Создаем пошаговый лендинг на Tilda через переменные [Инструкция]
Немного покопавшись в интерфейсе, нашел способ создавать пошаговые лендинги на Тильде в рамках одной страницы (чтобы не плодить по 10 одинаковых страниц). Получается примерно вот такая штука. Кому интересно — держите инструкцию: )
Общие принципы
Поскольку на тильде есть ограничение в 500 страниц, мне не слишком хотелось создавать по 10 страниц и связывать их кнопкой перехода. Мало того, что это заняло бы приличную часть ресурсов (ведь количество страниц ограничено), дык еще и путался бы постоянно. Да и хотелось потенциально улучшить поведенческие факторы для SEO в рамках одной страницы, а не создавать десяток обрубков.
Приступаем. Создание одного большого лендинга по экранам.
Чтобы все было в рамках одного URL — логично предположить, что все блоки, по которым будет гулять пользователь — должны находится в рамках одной страницы. Я использовал блок BF303 и в настройках блока указал высоту "100vh" — чтобы он занимал всю высоту экрана пользователя. Ниже на скрине видно, что экран 2 идет сразу после экрана 1, никаких разделителей или еще чего-то такого.
Таким образом в рамках одной страницы создаем все шаги по очереди.
Настройка переменных
После того, как шаги настроены, можно начинать настраивать саму «пошаговость».
Но для начала поясню, что такое переменные. Переменные — это специальный параметр (get, если по научному) в ссылке, при помощи которого можно отслеживать статистику, подменять контент, работать с базами данных и вообще куча всего. Состоит из двух частей — ключа и значения. Я не программист, поэтому мог криво объяснить, но самый популярный среди маркетологов get-параметр — это UTM.
?utm_source=google — это переменная с ключом "utm_source" и значением "google".
Добавляется он вот так, после знака вопроса или знака &:
Надеюсь понятно объяснил, если нет — спрашивайте в комментах: )
Итак, вернемся к Тильде. Надо добавить возможность заменять при помощи переменных контент на нашем лендинге.
Для этого в самый низ нашей заготовки добавляем блок Т809 (Мультилендинг: скрыть/показать блок по параметру в URL). Он находится в разделе «Другое», практически в самом низу.
Открываем его настройки и указываем следующие данные.
1. Для первого экрана
- Значение параметра (пусто).
- Показать блок (выбираем первый экран лендинга)
- Скрыть блоки (выбираем все оставшиеся экраны)
Это нам нужно для того, чтобы лендинг сразу открывался с первого этапа, если никаких переменных в URL нет.
2. Для всех остальных экранов
- Значение первого параметра — quiz=ecr2
Эти значения произвольные. В моем случае это обозначает, что если пользователь попадет на страницу, в URL которого содержится? quiz=ecr2 — он увидит второй этап лендинга. Вместо "quiz" можно написать, например, "step", а вместо "ecr2" прописать просто двойку, чтобы получилось вот так: site.ru?step=2 - Показать блок (тут выбираем соответствующий этапу этап, например — второй)
- Скрыть блоки (и скрываем все ненужные блоки, включая, разумеется, первый)
Аналогичным образом, по очереди прописываем для каждого этапа свою уникальную переменную и настраиваем, какой блок должен показываться и какие блоки должны скрываться. quiz=ecr3 — для третьего этапа, quiz=ecr4 — для четвертого и т.д. Должно получится приблизительно следующее:
Настраиваем кнопки
Собственно, переходим в финальную стадию настройки. И для начала — сохраните созданную страницу с тем URL, который будете использовать на сайте. В моем случае он выглядет вот так: /master-klass-trello.
Теперь можно приступать к настройке самих кнопок. Переходим в настройку блока первого экрана и находим там поле «Ссылка для кнопки» и указываем адрес ЭТОЙ ЖЕ страницы, но с нужной переменной. В моем случае, при клике на кнопку на первом экране посетитель должен попасть на страницу с переменной ?quiz=ecr2, чтобы отработал скриптик и скрылись все блоки, кроме второго этапа.
Идентичным образом настраиваем весь путь посетителя — на кнопке 2 получится ссылка с параметром ?quiz=ecr3 (переход на шаг 3), на кнопке 3 — с параметром ?quiz=ecr4 (переход на шаг 4) и т.д.
После этого публикуем лендинг и проверяем. Обратите внимание, что функция «Предпросмотр» в данном случае не будет работать, т.к. при клике на кнопку нас будет направлять не на наш сайт, а на страницу типа tilda.cc/master-klass-trello?quiz=ecr2 и будет выпадать ошибка.
Спасибо за внимание! Надеюсь, инструкция пригодилась: )
Можно посмотреть пример сайта, на котором вы применили свою разработку?
Здравствуйте) Ссылка прям в первом абзаце :)
Действительно необычное использование функции. Благодарю!
Рад, что пригодилось! :)
Здравствуйте)
Круто! Спасибо!
Благодарю за обратную связь :)
Очень пригодится гайд, особенно новичкам! Тильда становится все более популярной, а значит абсолютно разным специалистам, да и владельцам бизнеса, будет полезно в ней хотя бы на базовом уровне разбираться.