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

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