Всплывающее окно или модальное?

Содержание скрыть

Сначала, уйдем немного в сторону и покажем разницу между всплывающим окном и модальным. Зачем? Потому что часто их путают, говорят одно, а подразумевают совершенно другое. 

Всплывающее окно используется в коммерческих целях, чтобы побудить пользователя совершить какое-то полезное для владельца сайта действие. Окно, как и действие, не является обязательным и в любой момент может быть закрыто (если оно правильно построено). 

В то время как модальные окна используются для операционных целей. Например, вы где-то создаете учетную запись и надо ввести информацию. Нажимая на кнопку, появляется окно, в которое вводится информация. Пока вы не введете туда что-то, оно не закроется. Или посещая сайт, который продает алкоголь, сразу же появляется модальное окно и спрашивает о возрасте. Пока не дадите ответ, окно не закроется и доступ к сайту будет заблокирован.

Модальное окно берет полный контроль над экраном и вы не сможете нажать никакую кнопку, чтобы выйти из него. Чтобы выйти из него надо ввести запрашиваемую информацию или отменить запрос.

В нашем случае мы разговариваем только о всплывающих окнах или как еще говорят попапах, поп-апах.

Зачем нужны 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)
Триггеры
  • Клик по элементу
  • Наведение мышки на элемент
  • Уход со страницы
Использование
  • Создание собственных макетов
  • Поддерживает все модули Divi
  • Поддерживает все popup на странице
  • Мобильность модуля
Совместимость
  • Divi Contact Forms
  • Formidable Forms
  • Contact Form 7
  • Gravity Forms
Быстродействие Оптимизирован по производительности
Поддержка 
  • Форум, чат, почта
  • Документация, руководство
  • Утвержден Elegant Themes
Условия использования
  • Бесплатно
  • Пожизненно
  • Количество сайтов не ограничено

Как установить плагин

Установка плагина стандартная, ничего особенного. Сам плагин Popups for Divi можно скачать:

  1. В репозитории плагинов WordPress
  2. У меня на сайте (точно такой же)
1. Скачать с репозитория2. Скачать здесь
После скачивания плагина активировать. Никаких настроек у плагина нет. Единственным следствием установки плагина есть появление вкладки Popup в настройках Раздела (Section). В других модулях Divi этой вкладки нет.
Установка плагина Popups for Divi

5 шагов для создания поп-ап в Divi

Шаг 1. Подготовка поп-апа на странице

Для создания нового всплывающего окна необходимо добавить новый раздел Divi на страницу, где будет срабатывать попап.

В примере я использую секцию с двухколоночной раскладкой. В левой колонке я отображаю модуль изображения, а в правой колонке я добавлю модуль обратной связи.

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

Шаг 1. Подготовка формы для вплывающего окна

Шаг 2. Активация всплывающего окна

После того как спроектировали поп-ап следующий шаг будет простым: На вкладке Popup переключатель This is a Popup (Это есть попап) поставить в положение Yes (Да). Это действие добавляет новый CSS класс в Раздел и изменяет отображение его внутри Divi Builder.

Кроме того, я установил идентификатор Popup ID, так что позже cмогу запустить визуальное окно через ссылку/кнопку. В нашем случае Popup ID = test

Шаг 2. Активация режима popup
Шаг 2. Активация режима popup на странице

Фон раздела всплывающего окна поменялся, он стал прозрачным (смотри на рисунке).

После создания самой поп-ап формы установим триггер срабатывания, то есть определим условие при котором окно сработает. 

Шаг 3. Настройка поведения попапа 

Поведение всплывающего окна настраивается на вкладке Popup в настройках раздела. Рассмотрим их подробнее. 

Настройки плагина Popups
Настройки плагина Popups

Вкладка Popup в настройках Раздела имеет 5 опций:

  1. General — Общие сведения
  2. Behavior — Поведение
  3. Close Button — Кнопка закрытия
  4. Layout — Макет
  5. Visibility -Видимость

Рассмотрим каждую опцию

General (Общие сведения)
Вкладка General плагина Popups for Divi
  1. Включение поп-апа
  2. Название вслывающего окна латиницейю. Если название в два и более слова, то пишется без пробелов 
Behavior (Поведение) 
Вкладка Поведение плагина Popups for Divi
  1. Close on Background-Click — всплывающее окно может быть закрыто, когда пользователь щелкает в любом месте за пределами окна. Если эта опция отключена, то пользователь сможет закрыть ее только через «крестик» в правом верхнем углу всплывающего окна или нажав клавишу ESC на клавиатуре.
  2. Close other Popups —  если используется несколько всплывающих окон одновременно, то эта опция позволяет закрыть их все сразу.
  3. Enable Exit Intent — эта опция позволяет всплывающему окну появляться тогда, когда пользователь собирается покинуть сайт (работает только на компьютерах, а на мобильных или планшетах нет). 
Close Button (Кнопка закрытия)
Вкладка Закрытие окна плагина Popups for Divi
  1. Show Close Button — можно показать или скрыть кнопку закрытия,
  2. Button Сolor —  выбрать, должна ли кнопка закрытия быть светлой или темной,
  3. Transparent Background — значок закрытия (крестик) может иметь цветной или прозрачный фон.
Layout (Макет)
Вкладка Макет плагина Popups for Divi
  1. Add a default Shadow — позволяет добавить «по умолчанию» тень для всплывающего окна. Но лучше установить пользовательскую тень, воспользуйтесь родной функцией Divi вместо нее в разделе настроек на вкладке Style  >  Box Shadow.
  2. Show Loader — показывает в середине всплывающего окна вращающийся кружок (как при загрузке)
Visibility (Видимость)
Вкладка Видимость плагина Popups for Divi

Включает/отключает видимость всплывающего окна на разных типах устройств.

Шаг 4. Настройка срабатывания всплывающего окна

Плагин Popups for Divi предоставляет два триггера срабатывания:

  1. Клик по элементу, ссылке, кнопке
  2. Уход со страницы (активируется во вкладке Popup).
Клик по кнопке (ссылке, элементу)

Сделаем вплывающее окно, срабатывающее при клике на ссылку. Все очень просто: в качестве ссылки ставим Popup ID со значком якоря #. В нашем случаем ссылка имеет вид #test.

 

Настройка срабатывания плагина по ссылке

Шаг 5. Тестирование pop-up

Наконец, сохраняем все свои изменения и проверяем работу всплывающего окна.

Рекомендую создавать разделы, размер которых не должен превышать размер экрана. В идеале, popup не должен быть длинным, потому что часть его будет отрезана и недоступна.

Также обратите внимание, что эти всплывающие окна не отображаются при открытии страницы сайта. Для этого есть другие плагины, например Popup Builder.

Примеры

  1. Всплывающее окно в тексте
  2. Уход со страницы (поднесите мышку к крестику, закрывающему сайт)

Вопросы и ответы по использованию плагина всплывающих окон для 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.

Автор DiviLancer

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

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.

Задать вопрос