Popups — Всплывающие окна

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

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

Рассмотрим принцип создания всплывающего окна в конструкторе сайта Elementor.

1.Создание шаблона Popups.

Переходим в основное меню WordPress и в пункте Шаблоны выбираем Popups . Далее нажимаем "Добавить новый".

После нажатия, открывается стандартное окно выбора шаблона с поле ввода его имени. Вводим имя и нажимаем кнопку Создать Шаблон

После появится окно с выбором предварительно настроенного и готового шаблона всплывавшего окна.

Вы можете выбрать подходящий или закрыть и создать шаблон с чистого листа.

2. Настройка параметров.

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

Настроек всплывающего окна достаточно много. Вы можете выбрать ширину, высоту, позицию окна, можно выбрать отключения затемняющего фона или кнопки закрытия окна или настроить анимацию появления и исчезновения окна (Entrance Animation и Exit Animation). А на вкладке Стиль, можно настроить стили самого окна и фона затемнения, а так же выбрать позицию и стиль кнопки закрытия окна.

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

3. Публикация всплывающего окна

После того как мы создали необходимый контент окна и настроили его так как нам нужно, нажимаем на стандартную кнопку ОПУБЛИКОВАТЬ и открывается окно настроек публикации.

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

Triggers - тут можно выбрать триггер , т.е на основе какого действия будет появляться окно. Можно выбрать из следующих вариантов:
On Page Load - При загрузки страницы.
On Scroll - При прокручивании страницы.
On Scroll to Element - При прокручивании и достижения до элемента страницы.
On Click - При клике по странице.
After Inactive - При неактивности пользователя.
On Page Exit Intent - При попытке закрыть браузер.

Advance Rules - это расширенные правила публикации всплывающего окна и последний шаг перед публикацией. В нем можно задать следующие параметры:

Show after X Page views: если установлено значение Yes, установите количество просмотров страниц до запуска всплывающего окна.

Show after X sessions: если установлено значение Yes, установите количество сеансов пользователя до запуска всплывающего окна (сеанс начинается, когда пользователь посещает веб-сайт, и заканчивается, когда пользователь закрывает браузер).

Show up to X times: максимальное количество показов всплывающего окна . Если Count установлен в положение On Open, это позволит всплывающему окну открываться только столько раз, сколько установлено число. Если счетчик установлен в положение On Close, всплывающее окно будет открываться только до тех пор, пока пользователь не закроет его в X-й раз, после чего оно больше не откроется. Этот параметр устанавливается в локальном хранилище и будет оставаться там до тех пор, пока не будет удален.

When arriving from specific URL : если задано значение Да, показать или скрыть всплывающее окно, если пользователь приходит с определенного URL-адреса (введите конкретный URL-адрес). Так же можно использовать Регулярное выражение - это возможность для опытных пользователей устанавливать расширенные правила для сопоставления шаблонов URL-адресов.

Show when arriving from: если установлено значение Yes, показать, если пользователь приходит из поисковых систем, внешнюю ссылку (введите URL конкретной ссылки) и/или внутреннюю ссылку (введите URL конкретной ссылки).

Hide for logged in users: установите значение Да, чтобы скрыть всплывающее окно для всех вошедших пользователей или от выбранных пользовательских ролей. Для веб-сайтов с кэшем эта функция может работать неправильно.

Show on devices: установите значение Да, чтобы выбрать отображение на настольных, планшетных и / или мобильных устройствах.

4. Вызов всплывающего окна

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

Для вызова окна по ссылке, мы выбираем объект со ссылкой, например Кнопка и переходим в выбор динамических данных.

Далее, выбираем Popup и уже в настройках ссылке выбираем наше созданное окно (в списке Popup необходимо ввести название шаблона и выбрать его)

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

Если у вас сторонний элемент т.е не виджет конструктора, то вызвать окно можно по селектору. Для этого на странице редактирования Всплывающего окна, переходим в настройки и на вкладку Расширенные. Далее в поле Open By Selector указываем селектор вашего элемента.

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