Как настроить popup в tilda

23 АВГУСТА 2023
Zero Block во всплывающем окне — новый блок T1093 в библиотеке

Блок позволяет превратить любой Zero Block в попап. В библиотеке модификатор можно найти под номером Т1093 «Popup: Zero Block в попапе» в категории «Другое».

Когда пригодится блок-модификатор

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

Как пользоваться блоком-модификатором Т1093?
Добавьте на страницу Zero Block и подготовьте дизайн блока, который будет всплывать.
Добавьте на страницу блок-модификатор Т1093 из категории «Другое».

В этом блоке во вкладке Контент задайте id нулевого блока из первого шага. Там же задайте ссылку на попап.

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

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

Как сделать всплывающее окно?

Попапы могут появляться при клике на ссылку, при скролле, по времени или при закрытии страницы.

Важно: ссылка (линкхук) для каждого popup блока должна быть уникальна. Изменить ссылку можно в Контенте соответствующего блока.

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

1) Справа сверху выставляем желаемые настройки:
Положение — где будет всплывающее меню;
Id Блока — Id Zero блока, который будет находится внутри меню;
Ссылка — ссылка для кнопки, при нажатии на которую появится меню;
Цвет затемнения — цвет фона меню;
Не прозрачность затемнения — прозрачность фона меню;
Скорость анимации — скорость движения меню;
Скорость затемнения — скорость затемнения фона меню;
Отслеживание статистики — Отправляет данные об открытии попапа в систему аналитики. Открытие попапа будет отображаться в системе аналитики, как просмотр страницы: /tilda/popup/rec*номер блока*/opened FB pixel: ‘ViewContent’ event; Это стандартный функционал Тильды, подробнее о нем можно узнать здесь.
Ширина — ширина всплывающего меню;
Высота — высота всплывающего меню

Так-же, в вкладках «Адаптив» можно изменить размер всплывающего окна на разных расширениях экрана.
Например вкладка Адаптив960_1200 выставляет размеры для экранов шириной от 960px до 1200px.

Дополнительно:
В ширине и высоте можно указать размер как в пикселях (300px), так и в процентах (100%).
Позиции Сверху, Снизу, Слева, Справа созданы для применения с заданной высотой/шириной, например для создания небольшого меню выезжающего слева на 300 пикселей.

2) Ниже на странице скопируйте код и вставьте его в блок Т123.

3) Добавьте на страницу кнопку и укажите в ней ранее заданную ссылку в шаге 1. При нажатии на эту кнопку будет появляться меню.

Так-же, можно добавить открытие попапа при переходе по ссылке. Для этого добавляем код 2 в блок Т123 и указываем в нем вместо #popup:tildoshnaya ссылку на ваш попап. Дальше, при переходе по специальной ссылке, после загрузки страницы будет открываться указанный попап.
Примеры ссылок
mysite.tilda.ws/#popup:tildoshnaya — для главной страницы
mysite.tilda.ws/page#popup:tildoshnaya — для внутренних страниц

Читать:

Как разблокировать загрузчик honor

Внимание:
В Zero блоке, который будет попапом, отключите Lazy Load у всех изображений, иначе они могут не прогрузиться.

Попапы и меню

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

Pop-up блоки

Вы можете добавить на страницу всплывающие окна (pop-up), которые будут появляться в зависимости от поведения пользователя: при клике на ссылку, при скролле , по времени или при закрытии страницы .

Появление блока при клике на ссылку

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

1. Откройте Библиотеку блоков → категория «Форма» и добавьте pop-up блок. Подходящие блоки: BF501N, BF502N, BF503, BF504.

2. При добавлении блока в тексте на нем будет указана его ссылка (линкхук).

3. Эта же ссылка будет в Контенте этого блока, ее можно поменять на произвольное название. Например, #popup:superpopup.

4. Теперь эту ссылку можно добавить в кнопку. Откройте меню «Контент» блока с кнопкой и в поле «Ссылка для кнопки» поставьте ссылку вида: #popup:subscription

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

Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.

Выделите слово, при клике на которое должен появляться pop-up.
Через появившееся контекстное меню задайте ссылку на всплывающее окно.
Добавьте pop-up блок (категория «Форма»).
В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword

Появление блока при скролле

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

В меню «Контент», пропишите ссылку вида: #popup:subscription (слово может быть любым).

2. Добавьте специальный блок-триггер, который будет вызывать появление элемента при скролле. Триггер находится в категории «Другое».
Нужен блок – T183.

3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.

Время, на которое запоминается посетитель

В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы pop-up блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы pop-up блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.

4. Опубликуйте страницу. Блок появится, когда посетитель проскролит до места, где вы разместили pop-up блок.