Как создать popup окно из ZeroBlock для Tilda
Желательная очерёдность
BF 503
Zero
Код
Следующий так же.
.shirina < background:none !important; right: 0 !important; left: 0 !important; >.parpadding
Скрипт для закрытия попапа после отправки формы
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 блок.
Как в Zero Block сделать popup со своей кнопкой закрытия в Tilda
Чтобы указать класс у элемента в Тильда, нажимаем на него правой кнопкой мыши и выбираем из списка предпоследнюю строку «Add CSS Class Name», далее, справа в настройках указываем тот же класс что и в генераторе;
5. Копируем сгенерированный HTML код и вставляем его в блок Т123.
Вариант #2 «Подключаем к блокам T183, T188 или T723»
1. Повторяем шаги из Варианта #1 c 1 по 4;
2. В блоках T183, T188 или T723 нажимаем «Контент» и вставляем ссылку которая будет «вызывать» (открывать) popup, такую же как в генераторе;
3. Копируем сгенерированный HTML код и вставляем его в блок Т123.
Имей в виду:
Если у вас длинный поп-ап, то фон блока мы настраиваем не по window container, а по grid container — высоту задаем в пикселях, а также ставим overflow: hidden данному контейнеру.
Как сделать popup в tilda
951 subscribers
Независимая команда энтузиастов отвечает на вопросы по работе с платформой Тильда
About
Blog
Apps
Platform
951 subscribers
Как сделать галочку с политикой сайта под кнопкой формы в Tilda
Перемещаем галочку с политикой сайта под кнопкой формы в Tilda
Как сделать эффект автоскролла фона при наведении в блоке ТЕ225 и Zero в Tilda
Создаём эффект автоскролла фона при наведении в блоке ТЕ225 и Zero в Tilda
Как добавить дополнительные товары в корзине в Tilda
Добавляем дополнительные товары в корзине в Tilda
Добавляем в корзину поле с выбором подарка от определённой суммы заказа в Tilda
Создаём в корзине поле с выбором подарка от определённой суммы заказа в Tilda
Как персонализировать страницу «Спасибо» в Tilda
Квиз в контенте сайта из ZeroBlock в Tilda
Создаём квиз в контенте сайта из ZeroBlock в Tilda
Как cделать кнопку быстрого заказа в корзине ST100 через BF502N в Tilda
Создаём кнопку быстрого заказа в корзине в Tilda
Как сделать свою корзину в меню из ZeroBlock в Tilda
Как принять заявку, когда товара нет в наличии в Tilda
Как заменить текст кнопки «добавить в корзину» на свою иконку в Tilda
Заменяем текст кнопки «добавить в корзину» на свою иконку в Tilda
Как добавить иконки социальных сетей в блок МЕ901 в Tilda
Добавляем иконки социальных сетей в блок МЕ901 в Tilda
Как блок ST305 представить в виде таблицы с товарами из каталога в Tilda
Представляем блок ST305 в виде таблицы с товарами из каталога в Tilda
Как создать зависимый dropdown список в Tilda
Создаём зависимый dropdown список в Tilda
Как создать калькулятор уборки по прайсу в Tilda
Создаём калькулятор уборки по прайсу в Tilda
Как показать своё сообщение успешной отправке из ZeroBlock Тильда
Создаём своё сообщение успешной отправке из ZeroBlock Тильда
HTML5 Аудио Плеер в Tilda
Как добавить HTML5 Аудио Плеер в Tilda
Как добавить третий ряд меню в блок ME901 в Tilda
Как сделать прайс-лист TB103, инфо-панель в Zero и оформить заказ в форме BF502N в Tilda
Создаём прайс-лист TB103, инфо-панель в Zero и оформить заказ в форме BF502N в Tilda
Как добавить подзаголовок и иконку в TX16N в Tilda
Добавляем подзаголовок и иконку в TX16N в Tilda