Создаем пошаговый лендинг на Tilda через переменные [Инструкция]

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

Поскольку на тильде есть ограничение в 500 страниц, мне не слишком хотелось создавать по 10 страниц и связывать их кнопкой перехода. Мало того, что это заняло бы приличную часть ресурсов (ведь количество страниц ограничено), дык еще и путался бы постоянно. Да и хотелось потенциально улучшить поведенческие факторы для SEO в рамках одной страницы, а не создавать десяток обрубков.

Чтобы все было в рамках одного URL — логично предположить, что все блоки, по которым будет гулять пользователь — должны находится в рамках одной страницы. Я использовал блок BF303 и в настройках блока указал высоту "100vh" — чтобы он занимал всю высоту экрана пользователя. Ниже на скрине видно, что экран 2 идет сразу после экрана 1, никаких разделителей или еще чего-то такого.

Таким образом в рамках одной страницы создаем все шаги по очереди.

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

После того, как шаги настроены, можно начинать настраивать саму «пошаговость».

Но для начала поясню, что такое переменные. Переменные — это специальный параметр (get, если по научному) в ссылке, при помощи которого можно отслеживать статистику, подменять контент, работать с базами данных и вообще куча всего. Состоит из двух частей — ключа и значения. Я не программист, поэтому мог криво объяснить, но самый популярный среди маркетологов get-параметр — это UTM.
?utm_source=google — это переменная с ключом "utm_source" и значением "google".
Добавляется он вот так, после знака вопроса или знака &:

site.ru?{get-ключ}={get-значение}&{get-ключ}={get-значение}

Надеюсь понятно объяснил, если нет — спрашивайте в комментах: )

Итак, вернемся к Тильде. Надо добавить возможность заменять при помощи переменных контент на нашем лендинге.

Для этого в самый низ нашей заготовки добавляем блок Т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 и будет выпадать ошибка.

Спасибо за внимание! Надеюсь, инструкция пригодилась: )