Всплывающие окна (Popup) для Divi
Всплывающее окно или модальное?
Содержание
скрыть
- 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
Простота
Плагин добавляет новую вкладку «Popup» в настройки каждого раздела, что позволяет превратить его во всплывающее окно
Гибкость
Всплывающие окна можно показать всегда, когда они нужны: от нажатия на кнопку до отслеживания ухода со страницы
Быстродействие
Каждая строка кода оптимизирована для быстрой загрузки страницы. Совместим со всеми плагинами кэширования.
Применяемость
Применим в любом разделе, доступном в Divi. Совместим с Divi Builder, WooCommerce, Extra
Отзывчивость
В основе плагина стоит проверенный и гибкий API, который можно интегрировать в любую тему
Бесплатный
Плагин является бесплатным: ни сборов, ни рекламы, только всплывающие окна
Обзор функций плагина
| Тип макета | Всплывающее окно (pop-up) |
| Триггеры |
|
| Использование |
|
| Совместимость |
|
| Быстродействие | Оптимизирован по производительности |
| Поддержка |
|
| Условия использования |
|
Как установить плагин
Установка плагина стандартная, ничего особенного. Сам плагин Popups for Divi можно скачать:
- В репозитории плагинов WordPress
- У меня на сайте (точно такой же)
После скачивания плагина активировать. Никаких настроек у плагина нет. Единственным следствием установки плагина есть появление вкладки Popup в настройках Раздела (Section). В других модулях Divi этой вкладки нет.
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 не должен быть длинным, потому что часть его будет отрезана и недоступна.
Также обратите внимание, что эти всплывающие окна не отображаются при открытии страницы сайта. Для этого есть другие плагины, например Popup Builder.
Примеры
- Всплывающее окно в тексте
- Уход со страницы (поднесите мышку к крестику, закрывающему сайт)
Вопросы и ответы по использованию плагина всплывающих окон для Divi
Совместим этот плагин с моим плагином кэширования?
Этот плагин не создает динамического HTML-контента, как это делают другие всплывающие плагины. Производительность была приоритетом при создании этого плагина. Это означает: всплывающие окна для Divi кэшируется обычным способом и хранятся в кэше страницы.
В плагине действительно нет почти никакого phP-кода. Фактически плагин представляет собой статический JS, который работает в браузере пользователя. Это, как правило, хранится в кэше и даже может быть передан через CDN
Может ли плагин popups замедлить мой сайт?
Нет! Плагин настроен на максимальную производительность страницы без раздувания, без внешних библиотек, без отслеживания кода.
Маленькая деталь: Плагин Popups for Divi добавляет одну строку CSS в исходный код страницы. Кроме того, при первом посещении страницы загружается уменьшенный JS и очень простой CSS-файл. Все файлы имеют размер менее 7 кБ и кэшируются браузером.
Какая версия темы Divi мне нужна?
Плагин всегда совместим с последней версией Divi. Он протестирован со всеми релизами Divi, начиная с 3.0.0, но, возможно, он будет работать даже со старыми версиями Divi. Но надо быть реалистом: зачем кому-то использовать такую старую версию Диви!?
Совместим ли Popups с плагином Divi Builder?
Да, совместим. Плагин Popups для Divi тестируется с последней версией плагина Divi Builder и темами Divi и Extra.
Однако, некоторые темы могут включать CSS или JavaScript, которые могут блокировать всплывающие окна для Divi. В таком случае надо обращаться в службу поддержки плагина.
Будет ли плагин работать с другими темами WordPress?
Фактически плагин является обычным всплывающим модулем, который (по дизайну) предварительно сконфигурирован для темы Divi и плагина Divi Builder.
А если плагин не работает, где получить поддержку?
Во-первых, есть поддержка плагина на форуме поддержки wordpress.org.
Во-вторых, есть поддержка на сайте плагина. Надо иметь ввиду, что это бесплатный плагин, и ответ не придет мгновенно. Если нужна премиальная поддержка, то всегда можно перейти на платную лицензию плагина Divi Areas Pro, который является расширенной версией Popups for Divi.
Помогу в создании блога, интернет-магазина или лендинга на премиальной теме WordPress Divi. Обучу администрированию сайта. Окажу техническую поддержку.
Обращайтесь, буду рад помочь Вашему бизнесу или хобби.
Вы задаете вопрос автору блога DiviLancer
Я рассмотрю ваш вопрос в самое короткое время и отвечу по адресу электронной почты, которую укажете
Заполняя данную форму Вы соглашаетесь с политикой конфиденциальности сайта
Премиальная тема Divi WordPress на русском языке
Не уходи! Побудь со мной
Спасибо
На днях будет продолжение этой статьи. Заходите, будет интересно
Спасибо за статью!
Все получилось настроить, но вот только на телефоне форма не открывается почему-то 🙁
Андрей, спасибо за использование плагина. На мобильном устройстве pop-up работает только как действие по кнопке. Уход с экрана здесь не работает. Если у вас не работает на мобильном, проверьте опцию Visibility в настройках плагина (там чек-бокс для видимости не должен быть отмечен!!!)