Перейти к содержимому 
Как используются Popups?
Popups в Elementor — это универсальный инструмент для взаимодействия с посетителями сайта, который может быть применён в разных сценариях. Вот несколько основных способов их использования:
- Сбор лидов и подписчиков: Попапы с формой подписки на рассылку или сбором контактных данных часто появляются через несколько секунд после захода на сайт или при прокрутке страницы. Это помогает увеличивать базу подписчиков и взаимодействовать с аудиторией через email.
- Уведомления о распродажах и акциях: Всплывающие окна могут сообщать о текущих акциях, скидках или специальных предложениях, тем самым мотивируя посетителей совершить покупку. Например, popup может предлагать «Скидка 10% на первый заказ» при попытке пользователя покинуть сайт.
- Промоутирование контента: Попапы могут быть использованы для продвижения важного контента, такого как новые статьи, видео или вебинары. Их можно настроить так, чтобы они появлялись в нужный момент и предлагали пользователю ознакомиться с важным материалом.
- Предложение дополнительных товаров: Если пользователь добавил товар в корзину, popup может предложить ему дополнительные продукты по выгодной цене. Это помогает увеличить средний чек покупок.
- Exit-intent Popups: Попапы с триггером на уход с сайта появляются, когда пользователь пытается закрыть вкладку или уйти с сайта. Они могут предлагать дополнительную скидку или напоминать о брошенной корзине, чтобы вернуть внимание посетителя и удержать его на сайте.
Эти примеры демонстрируют, как можно эффективно использовать всплывающие окна для увеличения конверсий, улучшения взаимодействия с пользователями и повышения продаж.
Создание и настройка Elementor Popup
Перейдите в админ-панель WordPress своего сайта. Во вкладке “Шаблоны” есть раздел Popups – нажимаем и добавляем новый Popup.
Появится окно создания нового шаблона. Тип шаблона должен быть Popup. Пишем название и нажимаем “Создать шаблон”
Общая настройка Popup
Чтобы настроить всплывающее окно, нажмите на шестеренку в левой нижней части экрана.
Elementor Popup имеет следующие настройки:
Layout
- Width – ширина всплывающего окна
- Height – высота всплывающего окна
- Position – настройка позиционирования всплывающего окна. Вы можете расположить и выровнять Popup по вертикали и горизонтали
- Overlay – настройка затемнения пространства за всплывающим окном
- Close button – настройка кнопки закрытия всплывающего окна
- Enterance Animation – настройка анимации появления всплывающего окна
- Exit Animation – настройка анимации закрытия всплывающего окна
Основные настройки
Помимо настроек заголовка и статуса шаблона, мы можем увидеть настройку HTML-тэга. Кратко пройдемся по каждому из предложенных, чтобы понять, какой из тэгов подойдет лучше всего:
- div: Универсальный контейнер для группировки элементов без особого семантического значения.
- main: Основное содержимое страницы, уникальное и непосредственно относящееся к теме сайта.
- article: Самостоятельный блок контента, который может быть опубликован отдельно (статья, пост).
- header: Верхняя часть страницы или раздела, содержащая заголовки, лого, навигацию.
- footer: Нижняя часть страницы или раздела, обычно включает контакты, ссылки, копирайт.
- section: Семантический блок для организации связанного контента внутри страницы или статьи.
- aside: Дополнительный контент, часто боковая панель с информацией, не основной статьей.
- nav: Блок для навигационных ссылок, обычно используется для меню сайта.
Настройка стилей Popup
После основной настройки всплывающего окна, перейдем к настройке его внешнего вида.
Popup
- Тип фона – настройка фона всплывающего окна
- Тип границы – настройка обводки всплывающего окна
- Border Radius – настройка скругления углов всплывающего окна
- Тень бокса – настройка тени Elementor Popup
Overlay
Не будем углубляться в настройку Overlay, потому что из параметров там только фон.
Close Button
Close Button – это кнопка закрытия всплывающего окна. Мы можем настроить ее размер, цвет и позиционирование.
- Position – настройка позиционирования кнопки
- Color – настройка цвета иконки
- Background Color – настройка фона иконки в кнопке
- Size – размер кнопки закрытия
Расширенные настройки Elementor Popup
Расширенные параметры позволят Вам более точно настроить Ваше всплывающее окно. Доступны настройки от автоматического закрытия до пользовательских CSS стилей.
Advanced
- Show Close Button After – позволяет настроить время, через которое начнет отображаться кнопка закрытия всплывающего окна
- Automatically Close After – настройка автоматического закрытия Popup через заданное время
- Prevent Close on Overlay – отключает возможность закрытия всплывающего окна по клику на overlay
- Prevent Close on ESC key – отключает возможность закрытия всплывающего окна по нажатию клавиши ESC
- Disable Page Scrolling – отключает вертикальную прокрутку колесиком мыши основной страницы при открытом Popup
- Avoid Multiple Popups – настройка, при которой не будут появляться другие всплывающие окна при открытом одном окне
- Accessible navigation – разрешает навигацию по вкладкам с клавиатуры
- Open By Selector – позволяет прописать id или класс элемента, при клике на который будет открываться Popup
- Margin – настройка внешнего отступа всплывающего окна
- Padding – настройка внутреннего отступа всплывающего окна
- CSS Classes – позволяет прописать пользовательский CSS-класс всплывающему окну. Это удобно при редактировании кастомного CSS-кода.
Custom CSS
Это поле позволяет прописать свой собственный стиль с помощью CSS-кода.
Публикация Elementor Popup
Существуют разные варианты публикации всплывающего окна. В этом пункте мы рассмотрим, как опубликовать Popup, какие задать ключевые события для его открытия и дополнительные правила публикации.
Display Conditions
В этом разделе Вы можете указать, где будет открываться всплывающее окно. Можно выбрать областью отображения как весь сайт, так и отдельные страницы или архивы.
Triggers
Следующий пункт настроек публикации – Triggers. Здесь мы можем задать ключевые события для открытия всплывающего окна. Давайте рассмотрим все доступные триггеры.
- On Page Load – отвечает за автоматическое открытие Popup при загрузке страницы
- On Scroll – отвечает за автоматическое открытие Popup при прокрутке страницы
- On Scroll To Element – отвечает за автоматическое открытие Popup при прокрутке страницы до определенного элемента
- On Click – отвечает за автоматическое открытие Popup при клике мышки
- After Inactivity – отвечает за автоматическое открытие Popup при отсутствии активности по сайту
- On Page Exit Intent – отвечает за автоматическое открытие Popup при попытке пользователя уйти со страницы
Advanced Rules
Advanced Rules для Elementor Popups — это продвинутые настройки, которые позволяют более точно контролировать, когда и кому отображаются всплывающие окна. Эти правила делают использование попапов более персонализированным и адаптированным к действиям пользователей на сайте. Основные возможности Advanced Rules включают:
After X Page Views (После X просмотров страниц)
Это правило позволяет показывать попап только после того, как пользователь просмотрит определённое количество страниц. Например, если вы хотите показать предложение только лояльным пользователям, можно установить, чтобы попап появлялся после просмотра 3 страниц.
After X Sessions (После X сессий)
Вы можете настроить попап так, чтобы он показывался только пользователям, которые заходили на сайт несколько раз. Это позволяет таргетировать постоянных посетителей.
Show Up to X Times (Показывать до X раз)
Этот параметр ограничивает количество показов одного попапа конкретному пользователю. Например, можно установить ограничение на 3 показа, чтобы избежать раздражения пользователя чрезмерными всплывающими окнами.
Show When Arriving from Specific URL (Показывать при переходе с конкретного URL)
С помощью этого правила можно настроить показ попапа только для пользователей, которые пришли на сайт по определённой ссылке или с конкретного сайта (например, с рекламной кампании или социальных сетей).
Show on Devices (Показывать на определённых устройствах)
Настройка позволяет управлять показом попапов для пользователей на разных устройствах: настольных компьютерах, планшетах или мобильных телефонах. Это особенно полезно для адаптации контента под мобильные устройства.
Show When Arriving from Search Engines (Показывать при переходе с поисковых систем)
Попап будет показываться только тем пользователям, которые перешли на сайт через поисковые системы (Google, Bing и т.д.). Это может быть полезно для предложения контента, релевантного поисковым запросам.
Hide for Logged In Users (Скрывать для авторизованных пользователей)
Это правило исключает показ попапов для пользователей, которые уже вошли в систему. Это удобно, если вы не хотите показывать предложения авторизованным участникам, например, зарегистрированным пользователям или клиентам.
Show on Browsers (Показать в определённых браузерах)
Этот параметр позволяет вам настроить показ попапов в зависимости от используемого браузера. Это особенно полезно, если вы хотите настроить таргетинг для определённых групп пользователей на основе их браузерных предпочтений или если у вас есть специфические предложения или контент, который лучше работает в конкретных браузерах.
Schedule Date and Time (Запланировать дату и время)
Параметр Schedule Date and Time позволяет вам установить конкретные даты и временные промежутки для показа попапов. Это удобно, если вы хотите показывать всплывающие окна в определённые периоды, например, во время распродаж, праздничных акций или по мере запуска временных предложений.
Эти Advanced Rules позволяют тонко настраивать взаимодействие с пользователями, делая всплывающие окна более релевантными и менее навязчивыми, что значительно улучшает пользовательский опыт и повышает эффективность конверсий.
Альтернативные варианты открытия Popup
После сохранения и публикации Elementor Popup доступены другие варианты его открытия. Делается это с помощью динамических тегов на каком-либо элементе, например, на кнопке или с помощбю ссылки.
Динамические теги
- Добавляем кнопку на нашу страницу Elementor
- В настройке ссылки выбираем динамический тег Popup
- Выбираем Popup, который хотим повесить на кнопку и действие Action. Мы можем выбрать действием либо открытие, либо закрытие всплывающего окна.
Теперь Popup будет открываться при нажатии на кнопку.
С помощью ссылки
После добавления динамического тега мы можем вытащить ссылку на Popup, которую можно будет использовать на каком угодно элементе. Это может быть заголовок, текст, контейнер или что-то еще.
На странице с кнопкой исследуем код элемента:
Нам необходимо найти ссылку href и скопировать ее.
Добавляем ссылку в текст или другой элемент. Теперь всплывающее окно открывается по ссылке.
Заключение
Elementor Popups — это невероятно мощный и гибкий инструмент для создания интерактивных всплывающих окон на вашем сайте. Благодаря множеству настроек, от простых параметров, таких как ширина и анимации, до продвинутых правил, позволяющих персонализировать показ попапов на основе действий пользователя, их устройства или источника трафика, вы можете значительно улучшить взаимодействие с посетителями. Правильное использование попапов помогает увеличивать конверсии, собирать лиды, продвигать важный контент и стимулировать покупки. Однако важно помнить о балансе и использовать всплывающие окна так, чтобы они дополняли пользовательский опыт, а не мешали ему.