Кейсы

О студии

Блог

Контакты

12+

Карта

Тех. поддержка (на тильде)

8 (800) 555-01-19

Обсудить задачу

Сайты на Tilda

Разработка сайта

Разработка дизайна

Проектирование

Тех. поддержка (на тильде)

Редизайн сайта

Как создать продающий лендинг на Тильде

Блог

Главная

Как создать продающий лендинг

маркетинг

маркетинг

Следите за внутренней кухней студии в нашем телеграм-канале

Содержание

1. Подготовка к созданию лендинга

2. Регистрируемся в Tilda

5. Настраиваем формы и кнопки CTA

6. Оптимизируем и тестируем

7. Публикуем лендинг

8. Лендинг готов. Что дальше?

3. Настраиваем структуру лендинга

4. Заполняем страницу контентом

Сделать лендинг на Тильде, в общем-то, несложно, особенно если вы используете ее знаменитые стандартные блоки. Здесь довольно простой интерфейс, а блоки и элементы можно добавлять или убирать по принципу конструктора.

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

Подготовка к созданию лендинга на Тильде

Итак, что такое продающий лендинг? Это страница, которая создана для того, чтобы что-то продать или мотивировать оставить заявку. Поэтому так важно заложить маркетинговый фундамент: товар или услугу нужно преподнести так, чтобы привлечь вашу аудиторию.

1. Определить цели лендинга. Прежде всего, нужно четкое целевое действие: что должен сделать посетитель этого лендинга, чего вы от него хотите. Если держать эту цель в голове, вам будет проще наполнять сайт контентом.

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

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

4. Создать контент. До начала работы над лендингом в Tilda нужно будет подготовить весь текстовый и визуальный контент.

Тексты. Напишите заголовки, подзаголовки, описания продукта или услуги, преимущества, отзывы клиентов и призывы к действию (CTA). Текст продающего лендинга должен быть кратким и убедительным. Написать его можно в гуглдоках, ворде, заметках — как удобнее. Нам нравится писать текст во время сбора прототипа (об этом этапе чуть ниже).
Изображения и видео. Подготовьте все изображения, графики и видео, которые будут использоваться на лендинге. Можно взять ваши собственные фото и видео (показать команду, товар, результаты работы), или купить контент на стоках (но без заезженных сюжетов, ведь сработает ассоциация «‎не заморочились с визуалом — не заморочились с продуктом/услугой»).
Отзывы и кейсы. Об этом нужно позаботиться заранее, потому что результат зависит от других людей, а человеческий фактор никто не отменял. Полученный контент вы будете использовать как социальные доказательства, чтобы вызвать доверие у посетителей сайта.

5. Создать прототип (вайрфрейм). Когда контент готов, нужно набросать структуру лендинга, чтобы представить, как будут расположены основные блоки. Мы уже публиковали подробное руководство по структуре продающего лендинга, прочитайте, прежде чем собирать прототип.

Инструменты для сбора прототипа:

бумага или доска + маркер — самый простой способ;
Google Docs — готовый текст можно разместить в блоки с помощью таблиц и списков;
Moqups — специальный сервис для создания прототипов;
Canva, Figma — графические редакторы.

Можно сделать прототип и в самой Тильде, с помощью готовых блоков. Этот вариант подойдет, если вы уже хоть немного знакомы с интерфейсом сервиса.

Шаг 1

Регистрируемся в Tilda и создаем новый проект

Перейдите на сайт Tilda и зарегистрируйтесь, если у вас еще нет аккаунта. Если аккаунт уже есть — переходим к следующему шагу.

Нажмите на кнопку «Создать новый сайт» и введите имя проекта. Видеть это название будете только вы.

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

Как создать новый сайт и новую страницу на Тильде

Шаг 2

Настраиваем структуру лендинга

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

В Tilda есть библиотека стандартных блоков (более 400), которые вы можете использовать для создания структуры лендинга. Эти блоки включают заголовки, изображения, текстовые блоки, формы, списки, отзывы и многое другое.

Важно: чтобы пользоваться библиотекой блоков, Тильде нужно заплатить. Для начала подойдет тариф Tilda Personal за 750 ₽ в месяц (9 000 ₽ в год) или 6 000 ₽ при оплате сразу на год. Вы можете получить +1 месяц доступа бесплатно, если зарегистрируетесь по нашей ссылке. Tilda Personal можно оплатить только оплатой на карту. Если вы хотите оплатить с расчетного счета вашей компании, то берите Tilda Business.

На бесплатной версии доступны буквально по 2−3 варианта каждого блока, и они не самые крутые из всего ассортимента. Принимать заявки с такого лендинга будет практически невозможно: вам будет доступен только один блок с кнопкой и ни одного блока с формой для заявки (с полями для ввода и кнопкой).

Работа с блоками в Tilda

Вы можете открыть прототип лендинга и по очереди добавить подходящие блоки в страницу на Тильде. С текстами и визуалом пока можно не заморачиваться. Главное — собрать общую схему вашего лендинга.

Нажав на «‎Все блоки» пошагово заполняйте страницу новыми блоками, нажимая на плюсик внизу каждого добавленного блока.

В самом конце списка блоков есть вариант «‎Нулевой блок». Это инструмент, которым чаще всего пользуются студии и фрилансеры, которые делают сайты на Тильде. Мы в NAJES тоже любим нулевые блоки, или зероблоки.

Как работать с зероблоками в Tilda

Что важно знать о зероблоках:

Чтобы с ними работать и получать приличные результаты, нужно иметь представление о принципах дизайна, симметрии, колористике, композиции, типографике, сетках. Вдобавок нужно изучить функционал этих блоков, который за последний год только усложнился. Готовых решений тут нет, поэтому лучше сразу обращаться к профессионалам, если вы ни разу не дизайнер.
Зероблоки более гибкие: тут есть широкий набор настроек. Допустим, анимацию можно настроить детальнее, чем в стандартных блоках, и сделать ее многоступенчатой.
Нужно тщательно следить за тем, как зероблоки выглядят на верстке в разных разрешениях (десктоп, мобильный, планшет). В неопытных руках элементы могут сползти, перекрыть друг друга или вовсе исчезнуть. Все это в зероблоках нужно настраивать вручную, в отличие от стандартных блоков, где Тильда все адаптирует за вас.

NAJES — это 100+ лендингов на Тильде в портфолио и 4 место среди разработчиков на Тильде по версии Рейтинга Рунета

На зероблоках можно сделать прикольные сайты с нестандартным дизайном. И никто не догадается, что это сделано на Тильде. Конечно, для этого нужны руки и глаза опытного дизайнера. У нас такие есть.

Как мы это делаем

Шаг 3

Заполняем страницу контентом

Теперь, когда структура собрана, вы можете перенести в блоки ваш собственный контент. Чтобы настроить содержимое блоков, нажмите на кнопку «‎Контент» слева вверху, и вам откроется следующее меню:

Как менять содержание стандартных блоков в Tilda

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

Оптимальные требования к визуальному контенту для лендинга на Тильде:

размер до 1680 пикселей по большей стороне (если размер больше, то Тильда сама сожмет изображение, и оно может потерять в качестве);
вес до 5 Мб (чтобы уменьшить вес, картинку можно сжать через сервис TinyPNG);
по видео особых требований нет, но есть ограничения: видео в Тильду можно вставить только ссылкой на YouTube/Vimeo или на ваш хостинг (формат mp4 или webm).

Чтобы настроить оформление блока, нажмите на «‎Настройки» слева вверху блока. Вам откроется меню с понятным визуальным интерфейсом, где вы сможете настроить цвета, размеры и прозрачность отдельных элементов, отступы и анимации. Еще можно настроить технические нюансы: сколько карточек отображать в ряд, какими будут отступы в этом блоке и т. д.

Настройка стандартного блока в Tilda

Шаг 4

Настраиваем формы и кнопки CTA

Чтобы сделать продающий лендинг на Тильде с высокой конверсией, нужно добавить на него элементы, с помощью которых посетители будут оставлять заявки. Это могут быть формы с полями для заполнения и кнопки с призывом к действию (CTA).

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

Выбор и настройка формы

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

перенаправить на любую другую страницу (например, страница: «‎Спасибо, ваша заявка принята. Смотрите другие услуги, которые могут вас заинтересовать» + каталог);
вывести информационный поп-ап (например, «‎Спасибо, ваша заявка принята, ждите звонка от нашего менеджера»).

Прием заявок. Теперь нужно настроить, каким образом вы, как администратор сайта, увидите, что посетитель отправил заполненную форму. Тильда предлагает отправлять заявки на почту, в телеграм, в вашу CRM или даже на доску Trello или Notion. Чтобы настроить эти интеграции, зайдите на страницу «‎Мои сайты», нажмите «‎Настройки сайта», а затем «‎Формы».

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

Варианты учета заявок, полученных с сайта на Tilda

Привязка сервиса отправки данных ко всем формам

Привязка сервиса отправки данных в блоке

В общем, технически с приемом заявок проблем нет. Главное потом их вовремя обработать и конвертировать в продажу.

Прием платежей. Если ваш продукт позволяет сразу же принимать платежи (допустим, вы продаете готовый видеокурс), можно сразу же добавить на лендинг форму приема оплаты (ищите ее в готовых блоках). Чтобы завершить настройку, снова перейдите на страницу «‎Мои сайты», нажмите «‎Настройки сайта», а затем «‎Платежные системы».

И снова, не забудьте прикрепить этот сервис к форме оплаты и нажать «‎Опубликовать» на странице с формой, иначе интеграция не будет работать.

Как принимать платежи через лендинг на Тильде

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

Шаг 5

Оптимизируем и тестируем

Перед тем, как опубликовать лендинг, пройдитесь по следующим действиям. Это поможет вам окончательно навести красоту и подготовить сайт к приему гостей.

Настройка адаптива

Проверьте, как ваш лендинг выглядит на разных устройствах (компьютерах, планшетах, мобильных устройствах). Это можно сделать внутри редактора Tilda.

Как выглядят разные разрешения страницы на Тильде

Вам доступны инструменты для адаптивной настройки 5 разрешений страницы (десктоп, вертикальный и горизонтальный мобильный и планшет). Если вы делаете лендинг на стандартных блоках, то вряд ли с этим будут проблемы. Главное не переборщить с текстом, иначе он может перекрыть соседние элементы. И еще важно следить, чтобы картинки, которые вы загружаете, подходили по форме и размеру, иначе Тильда может довольно криво их обрезать. А если сайт на зероблоках — пристально следите вообще за всеми элементами, потому что они любят съезжать, куда не просят.

Небольшие SEO-настройки

Заполните метатеги (заголовки, описания, ключевые слова), чтобы улучшить видимость вашего лендинга в поисковых системах. Для лендинга это не так важно, как для сайта, но все же это не помешает. Также важно прописать теги Н1, Н2 и Н3 и альт-теги изображений.

Как заполнять метатеги

Тестирование функционала и юзабилити

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

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

Шаг 6

Публикуем лендинг

Если у вас есть собственный домен, подключите его к вашему проекту на Tilda. Если у вас его нет, то Тильда выдаст вам стандартный, прямо говоря, не очень симпатичный адрес сайта. Поэтому лучше использовать свой (эта опция доступна на любом платном тарифе).

Опция необязательная, но желательная: подключите сайт к Яндекс. Метрике, чтобы отслеживать поведение пользователей и оценивать эффективность рекламной кампании.

И финальный шаг: нажмите на кнопку «Опубликовать», чтобы сделать ваш продающий лендинг на Тильде доступным для всех.

Лендинг готов. Что дальше?

Увы, не время расслабляться. Создание продающего лендинга — это не разовый проект, а непрерывный процесс тестов, проб и ошибок. Теперь нужно запустить на лендинг трафик и посмотреть, будут ли посетители оставлять заявки. Используйте данные аналитики, чтобы постоянно повышать конверсию.

А если вы хотите делегировать создание лендинга профессионалам — обращайтесь к нам. Мы знаем, как превратить вашу идею в сайт, который приносит продажи.