Редактирование шаблона 1 на Tilda и подключение Яндекс Метрики

Шаблон прямой продажи нужно не просто заполнить текстом. Его важно нормально адаптировать под продукт, проверить на мобильных устройствах, настроить ссылки, корзину, SEO, домен и аналитику. Тогда получится не просто красивая страница, а полноценный инструмент для заявок и продаж.

Оглавление

• С чего начать: подключаем шаблон к проекту
• Первый экран: Zero Block с оффером и видео
• Блок связи: мессенджеры, звонок и email
• Карточки и контентные блоки
• Потоки и посты: как превратить страницу в многостраничный сайт
• Якорные ссылки и плавный скролл
• Тарифы, гарантии и FAQ
• Футер: данные, ссылки и платежная модерация
• Закреплённая кнопка: как настроить показ после прокрутки
• Корзина: заявка, продукт, сумма и валюта
• Базовое SEO для главной страницы
• Подключение домена и HTTPS
• Шрифты в шаблоне
• Как подключить Яндекс Метрику к Tilda
• Что даст Метрика после запуска

С чего начать: подключаем шаблон к проекту

Сначала откройте слот, в котором будет находиться сайт. Нажмите «Создать новую страницу» или внизу страницы выберите вариант с указанием ID шаблона.

Введите ID шаблона, нажмите «Выбрать», и страница появится в вашем проекте. После этого можно переходить к редактированию блоков.

В шаблоне девять ключевых секций. Они закрывают основную логику продающей страницы: первый экран, связь через мессенджеры, контентные карточки, посты с кейсами, тарифы, гарантии, FAQ, корзину и футер.

Первый экран: Zero Block с оффером и видео

Первый экран сделан в Zero Block. Справа находится зона для видео, слева располагаются нейминг продукта, основной оффер, описание, кнопка и короткий подзаголовок под кнопкой.

Видео на первом экране помогает быстро показать продукт, результат или сам процесс работы. Его можно загрузить на YouTube и вставить ссылку в настройках видео. Для обычной демонстрации этого достаточно.

Если нужен более чистый вариант без лишних элементов интерфейса, переключения роликов и других отвлекающих деталей, лучше использовать видеохостинг с возможностью настроить:

• автовоспроизведение;
• выключенный звук;
• автоповтор ролика.

Так видео будет работать как аккуратная живая визуализация продукта на первом экране.

Как редактировать текст и кнопку

Текст в Zero Block меняется обычным двойным кликом. После выделения его можно редактировать почти как в Word, заметках или Google Документах: менять начертание, цвет, выравнивание, добавлять ссылки, маркированные и нумерованные списки.

У кнопки отдельные настройки в правой панели. Там можно изменить:

• текст кнопки;
• цвет и стиль;
• ссылку;
• иконку;
• оформление без привязки к исходному стилю.

После любого изменения в Zero Block обязательно проверяйте экран 320 px. Именно там сразу становится видно, не налезли ли блоки друг на друга, не ушла ли цена за край и не стала ли кнопка слишком высокой.

Когда всё готово, последовательность всегда одна: сохранить, закрыть, опубликовать. Сохранение фиксирует изменения в редакторе, а публикация выводит их на живую страницу.

Блок связи: мессенджеры, звонок и email

Блок BF905A стоит оставить на странице. Он позволяет добавить быстрые каналы связи: Telegram, WhatsApp, звонок, email, Viber, Max и другие мессенджеры.

Для Telegram и WhatsApp можно заранее прописать текст сообщения. Тогда после перехода у человека откроется диалог с уже подготовленной фразой, например запросом стоимости или консультации.

В этом же блоке можно заменить стандартную иконку на собственное изображение, например фотографию, аватар или визуал менеджера. Рядом стоит добавить короткое и понятное обещание по скорости ответа: «Отвечаем в течение нескольких минут».

Редактируется этот блок через кнопку Content, без сложных настроек.

Карточки и контентные блоки

Блок FR206 подходит для коротких смысловых карточек: преимуществ, этапов, состава услуги, причин выбрать продукт или формата работы.

В нём можно менять изображения, загружать собственные файлы или использовать встроенные иконки Tilda. Текст редактируется в Content, где отдельно настраиваются шапка блока и карточки.

Кнопку в этом месте добавлять необязательно. В шаблоне ниже предусмотрена закреплённая кнопка, поэтому не стоит перегружать страницу одинаковыми призывами на каждом экране.

Потоки и посты: как превратить страницу в многостраничный сайт

Блок FD401 выводит посты из потока. Он нужен для кейсов, отзывов, разборов, ответов на частые вопросы и дополнительного полезного контента.

При первом входе в раздел постов создайте новый поток. Затем можно добавлять материалы:

1. Нажмите «Добавить пост».
2. Укажите название.
3. Добавьте краткое описание и обложку.
4. Создайте или выберите раздел.
5. Заполните содержимое поста: заголовки, текст, изображения, видео, цитаты.
6. Сохраните изменения.

Разделы нужны не для галочки. Они помогают разнести контент по разным страницам. Например, один раздел можно вывести для кейсов, другой для отзывов, третий для статей.

SEO и соцсети для каждого поста

У каждого поста обязательно заполняйте раздел SEO и соцсетей. Добавьте заголовок, описание, ключевые слова и изображение для превью. Это влияет и на базовую индексацию, и на то, как страница будет выглядеть при отправке в мессенджерах.

Нейросеть можно использовать как быстрый старт: передайте ей материал статьи и попросите подготовить meta description и список ключевых слов. Но готовый результат всё равно нужно прочитать. Нельзя вставлять описание и ключи вслепую, если там получилась бессмыслица или слова не соответствуют продукту.

После заполнения постов вернитесь в блок FD401, откройте Content и выберите нужные поток и раздел. После публикации на сайте появятся подстраницы, а сама страница станет фактически многостраничным сайтом.

Якорные ссылки и плавный скролл

Блок T173 отвечает за якорную ссылку. Она переносит человека к конкретной секции страницы по нажатию на кнопку. Например, кнопка «Узнать стоимость» может вести сразу к тарифам.

Настройка выглядит так:

1. В блоке якорной ссылки задайте уникальное значение и скопируйте его.
2. Откройте кнопку, которая должна вести к этому месту.
3. Вставьте ссылку с символом # перед именем якоря.
4. Сохраните и опубликуйте страницу.

Хэштег нужно добавлять вручную. Без него кнопка не будет вести к нужному блоку.

В конце страницы блок T178 добавляет плавный скролл. Благодаря этому переход по якорю происходит не резко, а аккуратно прокручивает страницу к нужной секции.

Тарифы, гарантии и FAQ

Блок с тарифом тоже сделан в Zero Block. В нём можно заменить текст, цену, визуализацию продукта и ссылку на корзину.

Особое внимание уделите адаптации. Если стоимость, название продукта или описание стали длиннее, элементы могут выйти за границы мобильной области. В таком случае текст нужно сократить, поменять размер, сдвинуть элементы или перестроить композицию вручную.

Проверять нужно не только смартфон, но и версию для компьютера. Иногда правка под мобильный экран влияет на десктопную компоновку.

Следующий Zero Block можно использовать под гарантию. Сюда логично добавить:

• договор или условия возврата;
• кейсы и доказательства результата;
• изображение продукта;
• понятные условия работы;
• контент, который снимает ключевые сомнения перед покупкой.

В блоке FAQ через Content меняются заголовок, карточки вопросов и ответы. Если ответ проще показать визуально, добавьте изображение с подсказкой или скриншотом интерфейса.

Футер: данные, ссылки и платежная модерация

Футер нужно заполнить самостоятельно. Здесь указываются реквизиты, статус работы, режим, контакты и обязательная информация, которая требуется для модерации платёжных сервисов.

Если вы работаете как ИП, замените шаблонные данные на свои: форму деятельности, УНП, информацию о постановке на учёт и режим работы.

Обязательно проверьте ссылку на Telegram. В шаблоне может стоять чужая ссылка, и в итоге обращения будут уходить не туда. Если отдельный текстовый блок с условиями возврата не нужен, его можно скрыть или удалить. Если нужен, замените все контакты на свои.

Закреплённая кнопка: как настроить показ после прокрутки

Закреплённая кнопка остаётся на экране во время прокрутки и помогает не терять человека на длинной странице. Это полезно, когда секция с ценой уже пройдена, а решение оформить заказ созрело позже.

Сначала настройте саму кнопку: текст, стили и URL, который должен вести в корзину.

Затем нужно связать её с блоком T123. В Content замените указанный ID на ID своей закреплённой кнопки, сохраните и опубликуйте.

Дальше настраивается логика показа:

• блок видимости определяет, после какого блока кнопка появится;
• блок показа определяет, какой именно элемент будет показан.

В коде укажите ID блока, после которого должна появляться кнопка, и отдельно ID самой кнопки. Так её можно показывать, например, только после секции с кейсами или примерами реализации.

Корзина: заявка, продукт, сумма и валюта

Корзина принимает заявки, передаёт их в Telegram, CRM или другую подключённую систему. Позже к ней можно подключить и онлайн-оплату.

В Content у корзины настройте поля формы. Это может быть имя, телефон, email, ник в Telegram или любое другое нужное поле. Если нужного поля нет, нажмите «Добавить поле» и выберите подходящий тип.

Также заполните:

• заголовок корзины;
• пояснение над формой;
• текст кнопки;
• короткий текст под формой.

Подпись под формой полезна, если заявка ещё не предполагает оплату. Она снимает последнее возражение: можно прямо написать, что деньги сейчас не списываются, а человек только оставляет заявку на продукт.

Как связать кнопку с корзиной

В настройках корзины есть формат ссылки вида #order:название-продукта:сумма. Скопируйте его и вставьте в URL кнопки, которая открывает оформление заказа.

В этой ссылке указываются название продукта и его цена. Если вы работаете в Беларуси, стоимость стоит указывать в белорусских рублях. Знак валюты меняется в настройках сайта, в разделе платёжных систем, в параметре отображения валюты в корзине и карточках товара.

После любых правок корзины снова сохраните настройки и опубликуйте все страницы проекта.

Базовое SEO для главной страницы

Посты в потоках уже могут получать отдельные SEO-настройки, но главную страницу тоже нужно подготовить к индексации.

Откройте настройки страницы и заполните:

• заголовок страницы;
• description;
• изображение для соцсетей и мессенджеров;
• заголовок и описание для соцсетей;
• ключевые слова в SEO-настройках.

Нейросеть может помочь быстро подготовить черновой вариант метатегов, но это базовый путь. Более грамотная SEO-работа начинается со сбора семантического ядра: анализа запросов, частотности, конкурентов и используемых ими ключей.

Для этого можно использовать Яндекс Вордстат и Google Trends. Это уже более объёмная работа, но именно она помогает строить страницу и контент вокруг реального спроса.

Подключение домена и HTTPS

Чтобы подключить домен, откройте настройки сайта, перейдите в раздел доменов и вставьте адрес, который приобрели у регистратора.

Для настройки DNS можно использовать инструкцию HostFly по подключению домена к Tilda. Обычно достаточно изменить два параметра у домена, после чего он становится активным.

После подключения домена не забудьте открыть SEO-настройки и настроить HTTPS. Также важно включить редиректы:

• с версии с www на основную версию домена;
• с незащищённого HTTP на защищённый HTTPS.

Это нужно для корректной индексации, рекламы и нормальной работы сайта без дублей адресов.

Шрифты в шаблоне

Если после копирования шаблона текст выглядит не так, как задумано, проверьте шрифты в настройках сайта. В шаблоне используется связка шрифтов Druk и Manrope.

Их можно выбрать из библиотеки Tilda. При желании допускается поставить другие шрифты, но тогда обязательно проверьте всю страницу, потому что длина строк, размеры заголовков и переносы могут измениться.

Как подключить Яндекс Метрику к Tilda

После публикации страницы и подключения домена можно переходить к аналитике. Яндекс Метрика нужна, чтобы собирать посещения, клики, действия на сайте и в дальнейшем использовать данные для настройки рекламы.

Создаём счётчик

1. Откройте Яндекс Метрику и авторизуйтесь.
2. Нажмите «Создать счётчик».
3. Укажите название сайта.
4. Введите адрес домена с HTTPS.
5. Оставьте включённым Вебвизор.
6. Примите условия и завершите создание счётчика.

После этого Метрика предложит установить код. Скопируйте его полностью.

Вставляем код Метрики в Tilda

Вернитесь в Tilda, откройте настройки страницы и перейдите в раздел «Дополнительно». Найдите пункт HTML-код для вставки внутрь head, нажмите «Редактировать код» и вставьте туда код счётчика.

Дальше снова сделайте три действия: сохраните, закройте настройки и опубликуйте страницу.

После публикации вернитесь в Метрику и нажмите «Проверить счётчик». Если на странице появляется индикатор проверки и кнопка Метрики внизу справа, подключение работает корректно.

Что даст Метрика после запуска

Сразу после установки данных может не быть, это нормально. Когда появятся посещения и клики, Метрика начнёт собирать статистику. Со временем можно анализировать поведение на странице, смотреть переходы, понимать, где люди уходят, и настраивать рекламу по автоцелям или созданным целям.

Финальная проверка перед запуском простая: откройте сайт на компьютере и телефоне, проверьте все кнопки, якоря, корзину, ссылки на мессенджеры, отображение тарифов, футер, HTTPS и работу счётчика. После этого страницу можно спокойно использовать в рекламе и развивать контентом.