Всплывающее окно или модальное?
- 1. Всплывающее окно или модальное?
- 2. Зачем нужны pop-up. Основные сценарии использования
- 3. Плагин Popups for Divi (всплывающие окна в Divi)
- 4. Вопросы и ответы по использованию плагина всплывающих окон для Divi
Сначала, уйдем немного в сторону и покажем разницу между всплывающим окном и модальным. Зачем? Потому что часто их путают, говорят одно, а подразумевают совершенно другое.
Всплывающее окно используется в коммерческих целях, чтобы побудить пользователя совершить какое-то полезное для владельца сайта действие. Окно, как и действие, не является обязательным и в любой момент может быть закрыто (если оно правильно построено).
В то время как модальные окна используются для операционных целей. Например, вы где-то создаете учетную запись и надо ввести информацию. Нажимая на кнопку, появляется окно, в которое вводится информация. Пока вы не введете туда что-то, оно не закроется. Или посещая сайт, который продает алкоголь, сразу же появляется модальное окно и спрашивает о возрасте. Пока не дадите ответ, окно не закроется и доступ к сайту будет заблокирован.
Модальное окно берет полный контроль над экраном и вы не сможете нажать никакую кнопку, чтобы выйти из него. Чтобы выйти из него надо ввести запрашиваемую информацию или отменить запрос.
В нашем случае мы разговариваем только о всплывающих окнах или как еще говорят попапах, поп-апах.
Зачем нужны pop-up. Основные сценарии использования
Pop-up или всплывающее окно — это элемент функционала сайта, который показывается в браузере пользователя поверх основной информации. Оно появляется без запроса или при клике на какой-то элемент сайта.
Видов поп-апов достаточно много, но решают они практически одну и ту же цель: привлечь внимание пользователя. А вот после того, как внимание привлечено (пользователь не закрыл всплывающее окно), тогда можно в этом окне:
- приветствовать посетителя на странице сайта,
- подписать пользователя на рассылку сайта,
- сообщить какую-то новость про продукт, услугу,
- показать рекламу,
- предложить техподдержку,
- получить заявку на расчет услуги для клиента.
Рассмотрим как быстро и просто вставить на сайт, построенном на теме Divi, всплывающее окно при помощи плагина Popups for Divi
Плагин Popups for Divi (всплывающие окна в Divi)
Использование плагина Popups for Divi использованием визуального конструктора дает интересные особенности применения:
- Можно превратить каждый раздел страницы во всплывающее окно,
- Количество попапов на каждой странице неограниченно,
- Триггеры на pop-up можно устанавливать через кнопки или ссылки,
- Расширяется с помощью профессионального API JavaScript (для разработчиков форм и макетов под тему Divi)
- Нет конфигурации и настроек, работает из «коробки»
Преимущества плагина для создания pop-up
Всплывающие окна можно показать всегда, когда они нужны: от нажатия на кнопку до отслеживания ухода со страницы
Обзор функций плагина
Тип макета | Всплывающее окно (pop-up) |
Триггеры |
|
Использование |
|
Совместимость |
|
Быстродействие | Оптимизирован по производительности |
Поддержка |
|
Условия использования |
|
Как установить плагин
Установка плагина стандартная, ничего особенного. Сам плагин Popups for Divi можно скачать:
- В репозитории плагинов WordPress
- У меня на сайте (точно такой же)

5 шагов для создания поп-ап в Divi
Шаг 1. Подготовка поп-апа на странице
Для создания нового всплывающего окна необходимо добавить новый раздел Divi на страницу, где будет срабатывать попап.
В примере я использую секцию с двухколоночной раскладкой. В левой колонке я отображаю модуль изображения, а в правой колонке я добавлю модуль обратной связи.
Ниже можно увидеть образец всплывающего окна, который я разработал для этой демонстрации на этой странице:

Шаг 2. Активация всплывающего окна
После того как спроектировали поп-ап следующий шаг будет простым: На вкладке Popup переключатель This is a Popup (Это есть попап) поставить в положение Yes (Да). Это действие добавляет новый CSS класс в Раздел и изменяет отображение его внутри Divi Builder.
Кроме того, я установил идентификатор Popup ID, так что позже cмогу запустить визуальное окно через ссылку/кнопку. В нашем случае Popup ID = test


Фон раздела всплывающего окна поменялся, он стал прозрачным (смотри на рисунке).
После создания самой поп-ап формы установим триггер срабатывания, то есть определим условие при котором окно сработает.
Шаг 3. Настройка поведения попапа
Поведение всплывающего окна настраивается на вкладке Popup в настройках раздела. Рассмотрим их подробнее.


Вкладка Popup в настройках Раздела имеет 5 опций:
- General — Общие сведения
- Behavior — Поведение
- Close Button — Кнопка закрытия
- Layout — Макет
- Visibility -Видимость
Рассмотрим каждую опцию
General (Общие сведения)

- Включение поп-апа
- Название вслывающего окна латиницейю. Если название в два и более слова, то пишется без пробелов
Behavior (Поведение)

- Close on Background-Click — всплывающее окно может быть закрыто, когда пользователь щелкает в любом месте за пределами окна. Если эта опция отключена, то пользователь сможет закрыть ее только через «крестик» в правом верхнем углу всплывающего окна или нажав клавишу ESC на клавиатуре.
- Close other Popups — если используется несколько всплывающих окон одновременно, то эта опция позволяет закрыть их все сразу.
- Enable Exit Intent — эта опция позволяет всплывающему окну появляться тогда, когда пользователь собирается покинуть сайт (работает только на компьютерах, а на мобильных или планшетах нет).
Close Button (Кнопка закрытия)

- Show Close Button — можно показать или скрыть кнопку закрытия,
- Button Сolor — выбрать, должна ли кнопка закрытия быть светлой или темной,
- Transparent Background — значок закрытия (крестик) может иметь цветной или прозрачный фон.
Layout (Макет)

- Add a default Shadow — позволяет добавить «по умолчанию» тень для всплывающего окна. Но лучше установить пользовательскую тень, воспользуйтесь родной функцией Divi вместо нее в разделе настроек на вкладке Style > Box Shadow.
- Show Loader — показывает в середине всплывающего окна вращающийся кружок (как при загрузке)
Visibility (Видимость)

Включает/отключает видимость всплывающего окна на разных типах устройств.
Шаг 4. Настройка срабатывания всплывающего окна
Плагин Popups for Divi предоставляет два триггера срабатывания:
- Клик по элементу, ссылке, кнопке
- Уход со страницы (активируется во вкладке Popup).
Клик по кнопке (ссылке, элементу)
Сделаем вплывающее окно, срабатывающее при клике на ссылку. Все очень просто: в качестве ссылки ставим Popup ID со значком якоря #. В нашем случаем ссылка имеет вид #test.

Шаг 5. Тестирование pop-up
Наконец, сохраняем все свои изменения и проверяем работу всплывающего окна.
Также обратите внимание, что эти всплывающие окна не отображаются при открытии страницы сайта. Для этого есть другие плагины, например Popup Builder.
Примеры
- Всплывающее окно в тексте
- Уход со страницы (поднесите мышку к крестику, закрывающему сайт)
Вопросы и ответы по использованию плагина всплывающих окон для Divi
Совместим этот плагин с моим плагином кэширования?
В плагине действительно нет почти никакого phP-кода. Фактически плагин представляет собой статический JS, который работает в браузере пользователя. Это, как правило, хранится в кэше и даже может быть передан через CDN
Может ли плагин popups замедлить мой сайт?
Маленькая деталь: Плагин Popups for Divi добавляет одну строку CSS в исходный код страницы. Кроме того, при первом посещении страницы загружается уменьшенный JS и очень простой CSS-файл. Все файлы имеют размер менее 7 кБ и кэшируются браузером.
Какая версия темы Divi мне нужна?
Совместим ли Popups с плагином Divi Builder?
Однако, некоторые темы могут включать CSS или JavaScript, которые могут блокировать всплывающие окна для Divi. В таком случае надо обращаться в службу поддержки плагина.
Будет ли плагин работать с другими темами WordPress?
А если плагин не работает, где получить поддержку?
Во-первых, есть поддержка плагина на форуме поддержки wordpress.org.
Во-вторых, есть поддержка на сайте плагина. Надо иметь ввиду, что это бесплатный плагин, и ответ не придет мгновенно. Если нужна премиальная поддержка, то всегда можно перейти на платную лицензию плагина Divi Areas Pro, который является расширенной версией Popups for Divi.

Помогу в создании блога, интернет-магазина или лендинга на премиальной теме WordPress Divi. Обучу администрированию сайта. Окажу техническую поддержку.
Обращайтесь, буду рад помочь Вашему бизнесу или хобби.

Вы задаете вопрос автору блога DiviLancer
Я рассмотрю ваш вопрос в самое короткое время и отвечу по адресу электронной почты, которую укажете
Заполняя данную форму Вы соглашаетесь с политикой конфиденциальности сайта
Премиальная тема Divi WordPress на русском языке
Не уходи! Побудь со мной
Спасибо
На днях будет продолжение этой статьи. Заходите, будет интересно