Открывающаяся страница в Тильде, которая встаёт окном поверх текущей, нужна почти в каждом проекте: показать условия акции, форму заявки или расчёт и не уводить человека со страницы. Скажу сразу: отдельного режима «страница поверх страницы» у Тильды нет, в справке такой настройки не описано. Тот же эффект собирается штатно из pop-up блоков. Окно лежит на той же странице, скрыто до вызова и появляется по клику, по таймеру, при прокрутке или когда человек собирается уйти. Ниже разбираю, какие блоки для этого есть, как их подключить и где заканчиваются стандартные возможности.
По теме статьи
Готовое решение
Автоматическая конвертация валюты на Tilda
Цены товаров в нужной валюте по актуальному курсу ЦБ — автоматически и в реальном времени.
от6 000 ₽
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Что в Тильде открывается поверх страницы
Поверх страницы в Тильде открывается блок, а не другая страница. Справка называет это pop-up блоками: вы добавляете окно на страницу, и оно остаётся скрытым, пока его не вызовут ссылкой или триггером. Внутри такого окна может быть:
- готовый блок из категории «Форма»: BF501N, BF502N, BF503 или BF504;
- Zero Block, который превращают в окно блоком-модификатором T1093;
- квиз QZ101 с включённой настройкой «Открыть блок в Pop-up».
Отсюда главное отличие от того, что обычно ждут от «открывающейся страницы». Окно живёт внутри той страницы, где его добавили, и вызывается ссылкой вида #popup:имя. Своего адреса, своих title и description у него нет.
Поэтому выбираю по задаче. Политику конфиденциальности, оферту и другие документы со своей ссылкой делаю обычными страницами и ставлю на них ссылки из подвала. Форму заявки, условия акции или короткое пояснение, после которого человек должен остаться на месте, выношу в попап.
Как открыть окно по кнопке или ссылке
Это самый частый сценарий, и он собирается за несколько минут без кода. Порядок по справке Тильды:
- Открываю Библиотеку блоков, категорию «Форма», и добавляю pop-up блок: BF501N, BF502N, BF503 или BF504.
- На добавленном блоке сразу видна его ссылка, в справке она называется линкхуком. Та же ссылка указана в меню «Контент» блока.
- Меняю ссылку на понятное имя, например #popup:akciya.
- В блоке с кнопкой открываю «Контент» и в поле «Ссылка для кнопки» вставляю ту же ссылку.
- Проверяю в режиме предпросмотра или после публикации: по клику на кнопку окно появляется поверх страницы.
Ссылку можно повесить не только на кнопку. Выделяю любое слово в тексте, через контекстное меню задаю ему ту же ссылку, и окно открывается по клику на это слово.
Одно правило из ответов Тильды лучше держать в голове сразу: ссылка у каждого pop-up блока должна быть уникальной. Если на странице три окна, у них три разных имени, иначе кнопки начнут открывать не то окно, которое вы ждёте.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Окно по таймеру, при прокрутке и при уходе со страницы
Для автоматического показа к pop-up блоку добавляется блок-триггер из категории «Другое». В «Контенте» триггера указываю точно такую же ссылку, как у окна. За что отвечает каждый триггер:
| Когда показать окно | Блок-триггер | Как работает |
|---|---|---|
| При прокрутке | T183 | окно появляется, когда посетитель долистал до места, где размещён pop-up блок |
| Через заданное время | T188 | время задаётся в меню «Настройки», поле «Таймер (в секундах)» |
| При уходе со страницы | T723 | окно появляется, когда курсор подводят к верхней границе браузера |
У всех трёх триггеров в меню «Настройки» есть поле Cookie life time. В нём задаётся, на сколько дней Тильда запоминает посетителя, чтобы не показывать ему окно снова. Значение 10 означает показ не чаще раза в 10 дней, 365 даёт по сути разовый показ на год, а пустое поле показывает окно при каждом заходе на страницу. Для формы подписки пустое поле почти всегда ошибка: человек, который уже закрыл окно, увидит его снова в следующий визит.
С окном при уходе осторожнее. Сама справка Тильды предупреждает, что такие окна посетители обычно ненавидят. К тому же триггер завязан на движение курсора, поэтому на телефоне я на него не рассчитываю и оставляю этот вариант для десктопного трафика и действительно сильного предложения.
Своё окно из Zero Block и квиз в попапе
Попап из Zero Block
Стандартные BF-блоки узнаваемы, их видно на тысячах сайтов. Когда окно нужно в дизайне проекта, собираю его в Zero Block и превращаю в попап:
- Делаю Zero Block с содержимым окна.
- Добавляю на ту же страницу блок-модификатор T1093 из категории «Другое».
- В «Контенте» T1093 указываю ID нужного Zero Block или выбираю его по ссылке «Выбрать Нулевой блок».
- Ссылка на окно по умолчанию #zeropopup. Имя можно заменить на своё, решётку в начале оставляю.
- Ставлю эту ссылку на кнопку или на слово в тексте.
После этого Zero Block скрывается со страницы и работает как обычное всплывающее окно. В настройках T1093 задаются цвет и непрозрачность фона, цвет иконки закрытия, скорость анимации и собственный Z‑index. Z‑index выручает, когда окно оказывается под закреплённым меню или другим блоком с высоким слоем.
Квиз во всплывающем окне
Квиз QZ101 и его вариации QZ101A-QZ101F из категории «Форма» умеют открываться в попапе без модификаторов. В настройках блока, в разделе «Основные настройки», включаю «Открыть блок в Pop-up», после этого в настройках появляется отдельная вкладка с параметрами окна. Так удобно прятать длинный опрос: страница остаётся короткой, а квиз открывается по кнопке вроде «Рассчитать стоимость».
Ограничения: чем попап отличается от отдельной страницы
Перед тем как переносить контент в окно, сверяю задачу с этой таблицей:
| Параметр | Pop-up блок | Отдельная страница |
|---|---|---|
| Где лежит контент | на той же странице, скрыт до вызова | на своей странице проекта |
| Как открывается | ссылка #popup:имя или #zeropopup, блок-триггер | обычный переход по ссылке |
| Свой адрес | нет | есть |
| Title и description | общие со страницей, где лежит окно | свои |
| Работа на нескольких страницах | окно добавляется на каждую страницу | одна страница на весь сайт |
Последняя строка на практике раздражает сильнее всего. Окно с формой заявки, которое должно работать на десяти страницах, приходится добавлять на все десять. Частично выручает дублирование: если собрать страницу-заготовку с готовым попапом, её копия делается через Настройки страницы → Действия → Дублировать, и окно переезжает вместе со страницей. На уже опубликованных страницах это не помогает, туда окно добавляется отдельно.
Второе ограничение касается ссылок. Штатного способа дать человеку ссылку, по которой страница откроется сразу с открытым окном, в справке Тильды нет. Для рекламы и рассылок с таким сценарием нужен скрипт.
Когда нужна доработка кодом
Штатные блоки закрывают четыре сценария: клик, таймер, прокрутку и уход со страницы. Всё, что сверх этого, в справке по попапам не описано и делается своим скриптом в HTML-блоке T123. Чаще всего кодом решаются такие задачи:
- открыть окно сразу при заходе по ссылке из рекламы или письма, например по метке в адресе;
- показать окно после отправки формы и подставить в него данные, которые ввёл человек;
- показывать окно по своим условиям: только новым посетителям, только с определённого источника трафика, только после просмотра нескольких страниц.
Такие вещи беру как доработку сайта на Tilda. Простой скрипт под один сценарий стоит от 3 000 ₽, итоговая цена зависит от того, сколько условий нужно учесть и с какими блоками окно должно работать.
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Можно ли открыть другую страницу сайта во всплывающем окне Тильды
Штатного способа в справке Тильды нет. Ссылка на страницу проекта открывает её обычным переходом, а всплывающее окно собирается из блока на текущей странице: BF-блока, Zero Block с модификатором T1093 или квиза в режиме «Открыть блок в Pop-up».
Меняется ли адрес страницы, когда открывается попап
Нет, у окна нет своего адреса. Попап это блок той же страницы, который вызывается ссылкой вида #popup:имя или #zeropopup, поэтому своих title и description у него тоже нет.
Как сделать, чтобы попап не показывался одному человеку каждый раз
В меню «Настройки» блока-триггера заполните поле Cookie life time. Число в нём означает, на сколько дней запомнить посетителя: 10 даёт показ не чаще раза в 10 дней, 365 почти разовый показ на год. Пустое поле показывает окно при каждом заходе.
Можно ли повесить одну ссылку на два разных попапа
Нет, ссылка у каждого pop-up блока должна быть уникальной. Имя меняется в «Контенте» блока, для второго окна задайте другое, например #popup:zayavka и #popup:akciya.