Pop-up блоки

Настройка всплывающих окон
Вы можете добавить на страницу всплывающие окна (pop-up), которые будут появляться в зависимости от поведения пользователя: при клике на ссылку, при скролле, по времени или при закрытии страницы.
1
Появление блока при клике на ссылку
Чтобы при клике на кнопку появлялось окно с информацией или формой подписки, вам нужно задать специальную ссылку для кнопки. Ссылку можно создать в блоке с всплывающим окном.
Всплывающее pop-up окно на опубликованной странице с формой подписки на рассылку и кнопкой «Subscribe».
1. Откройте Библиотеку блоков → категория «Форма» и добавьте pop-up блок. Подходящие блоки: BF501N, BF502N, BF503, BF504.
В библиотеке блоков: категория «Форма» со списком pop-up блоков BF501N, BF502N и BF503.
2. При добавлении блока в тексте на нем будет указана его ссылка (линкхук).
Редактор страницы: ссылка для открытия всплывающего окна в описании pop-up блока.
3. Эта же ссылка будет в Контенте этого блока, ее можно поменять на произвольное название. Например, #popup:superpopup.
В панели «Контент» всплывающего блока: поле «Ссылка на popup».
4. Теперь эту ссылку можно добавить в кнопку. Откройте меню «Контент» блока с кнопкой и в поле «Ссылка для кнопки» поставьте ссылку вида: #popup:subscription
Панель «Контент» блока: поле «ССЫЛКА ДЛЯ КНОПКИ».
Опубликуйте страницу или перейдите в режим предпросмотра, чтобы увидеть, как работает всплывающее окно. Оно будет появляться при клике на кнопку.
Всплывающее окно подписки на рассылку на странице сайта с полем ввода email и кнопкой «Subscribe».
Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.

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

  1. В меню «Контент», пропишите ссылку вида: #popup:subscription (слово может быть любым).
Панель «Контент» поп-ап блока: поле «Ссылка на popup».
2. Добавьте специальный блок-триггер, который будет вызывать появление элемента при скролле. Триггер находится в категории «Другое».
Нужен блок – T183.
Библиотека блоков, категория «Другое»: блок T183 «Триггер: Показывать поп-ап при скролле».
3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.
В панели «Контент» блока-триггера: поле «ССЫЛКА НА POPUP».
Время, на которое запоминается посетитель
В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы pop-up блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы pop-up блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.
4. Опубликуйте страницу. Блок появится, когда посетитель проскролит до места, где вы разместили pop-up блок.
Пример всплывающего pop-up окна подписки на рассылку с формой ввода email и кнопкой «Subscribe».
3
Появление блока по времени
Добавьте pop-up блок, который будет появляться через определенное время. Например, форму подписки или важное напоминание.

  1. В меню «Контент», пропишите ссылку вида: #popup:subscription (слово может быть любым).
Панель «Контент» попап-блока: поле «ССЫЛКА НА POPUP».
2. Добавьте триггер, который будет вызывать появление блока по времени. Триггер находится в категории «Другое».
Нужен блок – T188.
Библиотека блоков: блок T188 «Триггер: Показывать поп-ап по таймеру» в категории «Другое».
3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.
Поле «ССЫЛКА НА POPUP» в панели «Контент» блока-триггера.
В меню «Настройки» укажите время, через которое должен появиться блок – «Таймер (в секундах)».
Время, на которое запоминается посетитель
В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

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

  1. В меню «Контент» пропишите ссылку вида #popup:subscription (слово может быть любым).
Панель «Контент» поп-ап блока: поле «ССЫЛКА НА POPUP».
2. Добавьте триггер, который вызовет появление блока при закрытии вкладки. Триггер находится в категории «Другое».
Нужен блок – T723.
Библиотека блоков: блок T723 «Триггер: Показывать поп-ап при закрытии окна» в категории «Другое».
3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.
В панели «Контент»: поле «Ссылка на popup».
Время, на которое запоминается посетитель
В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы pop-up блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы pop-up блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.
4. Опубликуйте страницу. Поп-ап будет появляться при подведении курсора к верхней границе браузера.
Пример всплывающего pop-up окна подписки на рассылку с полем ввода email и кнопкой «Subscribe» поверх затемнённой страницы сайта.
Будьте осторожны, используя этот тип поп-апа – обычно их ненавидят.
Made on
Tilda