Введение
Всплывающее окно ( popups) — это небольшое окно, которое появляется или «всплывает» над веб-страницей и может запускаться автоматически в зависимости от различных условий или вручную с помощью гиперссылки.
Обычно всплывающее окно служит для привлечения внимания к определенному фрагменту контента. Например:
- Подписки на рассылку по электронной почте или контактной формы
- Специального предложения или призыва к действию
- Подсказки по инструментам или дополнительной информации по теме статьи
Несмотря на множество встроенных модулей в Divi нет «от захода» механизма построения всплывающих окон.
Но, возможно, у вас появиться причина, по которой вы захотите использовать в Divi всплывающее окно. Тогда вам сюда. В данной статье я рассмотрю несколько способов добавления в Divi всплывающего модального окна.
к оглавлению ↑1. Плагин Popups for Divi
Первый способ — с помощью плагина Popups for Divi. Popups for Divi — это бесплатный плагин для создания всплывающих окон, который доступен как в репозитории WordPress.org, так и на Divi Макректплейс. В настоящее время существует 50 000 активных установок плагина со средним рейтингом 4 из 5 звезд.
После того, как плагин будет установлен и активирован, каждый раздел, который вы добавляете на страницу в Divi Builder, будет иметь новую вкладку «Всплывающее окно» (Popup) в настройках.
Напомню, страница в Divi Builder имеет сеточную структуру и состоит из разделов (в редакторе показаны синим цветом), строк (зеленый цвет) и модулей (черный). «Всплывающим» может быть только раздел и все его содержимое.
В разделе на вкладке «Popup» есть переключатель, который позволяет превратить раздел в модальное всплывающее окно и назначить идентификатор для использования в качестве триггера для ссылок или кнопок.
Например, на сайте есть раздел с оглавлением статьи. Сделаем это раздел всплывающим и зададим идентификатор окна:
Чтобы открыть окно вы можете выбрать любой модуль и при нажтии на модуль указать ему ссылку на идентификатор всплывающего окна. В нашем примере разместим модуль «Кнопка» и укажем для кнопки ссылку #testpopup (идентификатор всплывающего окна).
В нашем примере при нажатии кнопки всплывет окно с содержимым раздела.
Существуют параметры настройки для закрытия всплывающего окна при щелчке в фоновом режиме, закрытия других всплывающих окон при активации нового, автоматического открытия всплывающего окна при выходе.
Доступна версия Premium под названием Divi Areas Pro, которая предлагает дополнительные функции и варианты дизайна.
2. Как создать в Divi всплывающее окно без плагина
Ниже я покажу как создать в Divi всплывающее окно без использования плагина используя JQuery и стили CSS.
2.1. Установите вашей кнопке / элементу класс CSS
Первым делом нужно присвоить имя класса CSS элементу, на который вы хотите щелкнуть, чтобы активировать в Divi всплывающее окно. В нашем случае я даю ему имя класса, например popup :
2.2. Добавьте jQuery, чтобы настроить действия при нажатии на кнопку.
Следующим шагом будет добавление jQuery в настройках темы раздел Divi > Параметры темы> Интеграции> Добавить код в <body> секцию . Сначала мы просто проверим, работает ли jQuery, предотвратив действие ссылки по умолчанию. Смотрите код ниже
2.3. Создайте всплывающий раздел и добавьте классы CSS
Третий шаг — создать всплывающий раздел и добавить нужные нам модули. Добавьте новый раздел (section) и присвойте ему имя класса popup-overlay, затем в строке добавьте имя класса popup-content.
Для раздела, который в нашем случае стает оверлеем, можете добавить цвет фона.
Для строки можно добавить цвет фона, например белый, добавить отступы чтобы создать интервал между столбцом и модулями и сделать другие необходимые настройки.
2.4. Добавьте CSS в оверлей.
Теперь нужно скрыть только что созданный раздел и показать его, когда мы добавляем класс show с помощью jQuery (шаг 5).
Нужно сделать его фиксированным, чтобы при прокрутке он оставался видимым. Для этого сделать его размером в высоту и ширину экрана и расположив его над всеми другими разделами.
Ниже приведен CSS и объяснение каждого значения:
/* CSS for overlay */
.popup-overlay {
position: fixed; /* фиксируем позицию */
top: 0; /* разамещаем вверху */
left:0; /* размещаем влево*/
width: 100%; /* делаем на всю ширину экрана */
height: 100vh; /* делаем на всю высоту экрана */
z-index: -1; /* перемещаем раздел позади всех остальных, поэтому он не отображается */
justify-content: center; /* выравниваем по центру */
align-items: center; /* выравниваем по центру */
opacity: 0; /* скрываем оверлей */
overflow: hidden;
transition: opacity 0.4s ease-in-out; /* исчезновение */
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
}
/* CSS for overlay when shown */
.popup-overlay.show {
display: flex; /* flex, поскольку это позволяет нам центрировать строку */
opacity: 1; /* показать оверлей */
z-index: 99999; /* перемещает оверлей поверх остальных разделов */
}
/* CSS X значок над содержимым */
.popup-overlay>.et_pb_row:after {
display: block;
content: "\4d"; /* Elegant themes icon code */
font-family: ETmodules;
position: absolute; /* делает значок абсолютным по отношению к родительскому элементу */
top: 0px; /* переместить вверх */
right: 40px; /* переместить вправо */
font-size: 40px;
visibility: visible;
color: #fff;
cursor: pointer; /* изменяет курсор на указатель */
}
к оглавлению ↑
2.5. Добавьте jQuery, чтобы добавить показать / скрыть оверлей.
Наконец, мы хотим добавить класс show когда вы щелкаете элемент с классом popup (шаг 1).
Затем мы хотим удалить всплывающее окно класса, когда постеитель нажимают на оверлей, но не на контент.
Ниже приведен код jQuery.
Вот и все! Теперь это позволит вам создать в Divi всплывающее окно без плагина.
к оглавлению ↑3. Плагин Bloom
Плагин Bloom — плагин подписки на рассылки электронной почтой для WordPress. Входит в состав официальной подписки компании EleganThemes. Если всплывающее окно нужно вам для подписки — Bloom хороший вариант.
Для создание всплывающего окна формы подписки после инсталляции плагина щелкните ссылку Bloom> Optin Forms на панели инструментов WordPress чтобы открыть вкладку основных настроек.
Здесь вы можете управлять подписками, которые вы создали в прошлом, а также создавать новые подписки. Чтобы создать новую форму подписки, нажмите кнопку «New optin». Вам будет предложено выбрать одну из 6 типов окна подписки, которые поддерживает Bloom.
Щелкните значок «POP UP», чтобы начать создание новой формы подписки. После того, как вы выберете тип подписки, вы попадете на экран создания подписки, где сможете настроить различные параметры подписки. Эти параметры разбиты на три категории: «Настройка», «Дизайн» и «Параметры отображения».
Вкладка «Setup»
На вкладке Setup («Настройка») вы можете указать имя для подписки (для использования в будущем) и назначить учетную запись электронной почты для формы подписки.
Прежде чем вы сможете начать сбор адресов электронной почты, вам сначала необходимо подключить Bloom к вашей службе электронного маркетинга, такой как MailChimp или Constant Contact.
Если вы еще не добавили учетную запись в Bloom, вы можете сделать в этой опции. Если вы уже добавили учетную запись в Bloom, вы можете выбрать учетную запись и связанный список адресов электронной почты в настройках интеграции форм на этой странице.
к оглавлению ↑Вкладка Design («Дизайн»)
На вкладке «Дизайн» вы можете настроить внешний вид формы подписки. Bloom поставляется с множеством настроек дизайна, таких как цвет фона, цвет шрифта, цвет кнопки, цвет формы, изображение и расположение формы, стили границ и многое другое.
На этой вкладке вы можете настроить все эти параметры, а также предварительно просмотреть форму, нажав кнопку «Предварительный просмотр».
Вкладка Display Setting (Настройки отображения)
Вкладка Display — это то место, где вы настраиваете, как, где и когда форма подписки будет отображаться на веб-сайте.
Вы можете выбрать отображение формы на определенных постах, страницах или категориях или исключить определенные посты или страницы.
Вы также можете настроить триггеры, которые контролируют появление всплывающих окон и подписок. Эти подписки могут быть активированы на основе различных действий пользователя.
Используя эти настройки, вы можете создать широкий диапазон вариантов для подписки, и они будут отображаться в разных областях вашего веб-сайта как вы того пожелаете.
к оглавлению ↑Заключение
Конечно, существуют еще способы создания всплывающих окон. В основном, с использованием платных плагинов.
Делитесь своими находками, задавайте вопросы, пишите предложения и комментарии.
Удачи!
Александр Коваль
Добрый день! Подскажите, пожалуйста, с чем может быть связано то, что я не вижу кнопки редактирования Divi builder на главной странице блога? В блоге есть только главная и страницы постов, анонсы которых выводятся на главной. На страницах записей кнопка Divi builder есть, на главной — нет.
У меня несколько блогов на Divi и такой проблемы никогда не было. А тут появилась. Подскажите, пожалуйста, как это исправить. Буду очень признательна!
Здравия! Я бы проверил какая страница установлена как главная:
и если там установлена страница — то есть ли разрешение подключать туда Divi Builder: