Как настроить всплывающие окна (pop-up) на сайте Рег.сайте

Всплывающее окно, или pop-up (попап), — это элемент интерфейса, который внезапно всплывает на экране пользователя или появляется при клике на определённую часть сайта. Раньше этот элемент использовали только как рекламный виджет, который часто раздражал пользователя, но сейчас его стали применять с пользой. В форме pop-up делают:

  • приветственное сообщение,
  • форму подписки,
  • форму обратной связи,
  • информирование об акциях и скидках.

В Рег.сайте установлен плагин Divi Supreme Pro. Он позволяет быстро создавать всплывающие окна (pop-up) на сайте.

Как сделать всплывающее окно в Рег.сайте

Так как плагин Divi Supreme Pro установлен в Рег.сайте по умолчанию, можно сразу приступать к оформлению внешнего вида всплывающего окна. Настройка всплывающего окна состоит из двух этапов:

  1. Создание макета.
  2. Размещение макета на сайте.

Для примера мы сделаем всплывающее окно с акцией. Однако Divi Supreme Pro позволяет добавить и форму обратной связи, и галереи картинок, и много другое. Всё зависит от конкретной задачи.

Этап 1. Создайте макет

  1. 1.
    Перейдите в админку Рег.сайта.
  2. 2.
    Перейдите во вкладку Divi ― Библиотека Divi.
  3. 3.

    Нажмите на кнопку Добавить новый:

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

  4. 4.
    Введите имя всплывающего окна. Имя может быть любое.
  5. 5.

    В пункте «Тип макета» выберите Макет и нажмите Отправить:

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

  6. 6.

    Выберите Начать создание:

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

  7. 7.
    Теперь вы можете переходить к созданию макета всплывающего окна. Чтобы создать макет, вам нужно настроить разделы, строки и модули. Как это сделать, описано в статье Основные элементы редактирования и в обзорном видео:

Например, наше всплывающее окно выглядит вот так:

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

Этап 2. Разместите макет на сайте

После того как макет всплывающего окна создан, можно разместить его на сайте. Для этого нужно отредактировать общий вид сайта и привязать pop-up к определённому элементу.

Обратите внимание
Даже если вы хотите, чтобы всплывающее окно появлялось перед входом или выходом пользователя с сайта, макет необходимо привязать к определенному элементу на странице сайта. Инструкция как настроить именно такой вариант окна описана ниже.
  1. 1.
    Перейдите в режим редактирования сайта.
  2. 2.

    В качестве примера мы покажем, как привязать всплывающее окно к кнопке. Для этого перейдите в Настройки модуля:

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

  3. 3.

    Затем перейдите во вкладку Дополнительно ― Видимость:

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

  4. 4.

    Найдите строку «Использовать всплывающее окно» и переведите переключатель в положение ДА:

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

  5. 5.

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

    Я хочу, чтобы всплывающее окно появлялось при входе на сайт

    Не всегда нужно, чтобы pop-up появлялся при нажатии на кнопку. Если вы хотите, чтобы он появлялся при входе на сайт или через некоторое время после входа, на шаге 5 в строке «Триггер» измените параметр, например на Загрузка страницы, а в строке «Задержка по времени» укажите количество секунд, через которое всплывающее окно должно появиться на экране пользователя.

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

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

  6. 6.

    Чтобы сохранить настройки, нажмите на галочку.

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

Готово, в нашем примере всплывающее окно будет появляться при нажатии на кнопку «Хочу подарок»:

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

Помогла ли вам статья?

Спасибо за оценку. Рады помочь 😊

 👍