Всплывающие окна – незаменимый инструмент интернет‑маркетинга. С их помощью вы собираете подписчиков, анонсируете скидки, направляете посетителя к нужному действию. Если окно продумано и показывается в правильный момент, конверсия заметно растёт. В Elementor Pro есть встроенный конструктор попапов (Popup Builder) – он позволяет создавать любые окна без единой строки кода, прямо в визуальном редакторе. В этой статье я пошагово разберу, как сделать всплывающее окно для сбора e‑mail или рекламы акций – от идеи до публикации.
1. Что такое Popup Builder в Elementor?
Popup Builder – это компонент
Elementor Pro, который даёт возможность конструировать всплывающие окна точно так же, как вы редактируете обычные страницы: перетаскиваете виджеты, настраиваете стили, задаёте анимацию. Всё управление – дизайн, триггеры, условия показа – сосредоточено в одном месте. Вам не нужен отдельный плагин для попапов, и не придётся изучать чужую логику.
Важно: функция доступна только в платной версии Elementor Pro. Если у вас бесплатная версия, для создания всплывающих окон придётся использовать сторонние плагины или обновиться до Pro.
Типичные применения: подписка на рассылку, показ купона или скидки, важное объявление, запрос согласия на cookie и т.д.
2. Шаг 1. Создание шаблона попапа
2.1 Перейдите в раздел управления попапами
В панели администратора WordPress зайдите в
Elementor → Шаблоны → Всплывающие окна (или
Templates → Popups).
2.2 Добавьте новое окно
Нажмите кнопку
«Добавить новое» (
Add New Popup).
2.3 Дайте название
Придумайте понятное имя, чтобы потом легко находить окно. Например:
- для подписки: «Подписка со скидкой», «Сбор email»;
- для акций: «Скидка 20% до…», «Акция на товар X».
Затем нажмите
«Создать шаблон» (
Create Template).
2.4 Выберите шаблон или стартуйте с нуля
Откроется библиотека шаблонов Elementor. У вас два пути:
- Использовать готовый шаблон – в библиотеке более сотни вариантов: формы подписки, акционные баннеры, таймеры обратного отсчёта, опросы. Введите в поиске «subscribe» или «newsletter» – система покажет подходящие. Кликните на понравившийся, нажмите «Вставить» – и можно сразу править дизайн под свой бренд.
- Начать с чистого листа – закройте библиотеку (крестик в углу) и приступайте к самостоятельной вёрстке.
Совет: перед началом чётко определите цель окна – сбор почты, продвижение акции или уведомление. От этого зависят все дальнейшие настройки (триггеры, условия, частота показа).
3. Шаг 2. Дизайн и стилизация содержимого
В редакторе вы работаете с попапом так же, как со страницей – добавляете виджеты и настраиваете внешний вид.
3.1 Настройка макета (Layout)
Нажмите на значок шестерёнки в нижней панели редактора, чтобы открыть настройки попапа. Перейдите на вкладку
«Макет».
Здесь задаются основные параметры:
- Ширина – можно указать в пикселях (например, 600 px) или в процентах от ширины экрана (например, 80vw). Для подписных окон обычно хватает 600–800 px, для акционных – можно чуть шире.
- Высота – выберите «По умолчанию» (окно подстраивается под содержимое) или «Пользовательская» (задаёте точную высоту). Если нужен полноэкранный попап, поставьте ширину и высоту по 100vw и 100vh.
- Положение – окно может быть по центру, сверху, снизу. Подписки чаще показывают по центру, а акционные баннеры – в виде верхней или нижней плашки (это меньше раздражает).
- Затемнение фона – включите, чтобы выделить попап на фоне страницы.
- Анимация входа – выберите эффект появления: затухание, выезд сверху/снизу и т.д. Длительность анимации ставьте 1–3 секунды – не слишком быстро и не слишком медленно.
3.2 Наполнение содержимым
С помощью виджетов Elementor соберите информацию:
Для подписного окна:
- Заголовок (привлекательный, например: «Подпишитесь и получите скидку 10%»).
- Текст с кратким описанием выгоды (что получит подписчик).
- Форма – добавьте виджет «Форма», в нём настройте поля (имя, email) и кнопку отправки с призывом («Подписаться», «Получить скидку»).
Для акционного окна:
- Броский заголовок: «Скидка 30% только сегодня».
- Изображение товара или баннер.
- Таймер обратного отсчёта (виджет «Обратный отсчёт») – создаёт ощущение срочности.
- Кнопка с призывом («Перейти к покупке», «Заказать сейчас»).
3.3 Оформление стилей (Style)
Вкладка «Стиль» позволяет:
- Установить фон попапа (цвет, градиент, изображение).
- Задать цвета и шрифты для текстов – они должны хорошо читаться.
- Настроить кнопку – используйте контрастный цвет, чтобы она выделялась.
- Отрегулировать отступы и поля, чтобы содержимое не было сжатым.
- Настроить кнопку закрытия (крестик) – размер, цвет, положение – чтобы пользователь легко мог закрыть окно.
Важно: дизайн должен быть минималистичным и фокусироваться на одном действии (CTA – Call to Action). Не перегружайте окно лишними полями – для сбора почты достаточно одного поля email.
4. Шаг 3. Условия показа (Conditions)
Когда дизайн готов, нажмите
«Опубликовать». Откроются настройки публикации. Сначала задаются
условия – на каких страницах сайта будет появляться попап.
4.1 Добавьте условие
Нажмите «Добавить условие», выберите правило: «Включить» (показывать) или «Исключить» (не показывать).
4.2 Типичные настройки
- На всём сайте – окно появляется на каждой странице. Подходит для общих подписных окон или системных уведомлений.
- На конкретных страницах – выбираете нужные страницы вручную. Например, акционное окно показываем только на карточках товаров и в корзине.
- На записях блога – подписное окно уместно после прочтения статьи.
- По рубрикам / меткам – таргетируете посетителей, интересующихся конкретной темой.
Для подписки часто выбирают «все страницы» или «все записи блога»; для акции – только релевантные товарные страницы или лендинги.
5. Шаг 4. Триггеры (Triggers) – когда показывать
Триггер определяет
момент появления окна. Именно от него зависит, воспримет ли пользователь попап как полезный инструмент или как назойливую помеху.
5.1 При загрузке страницы
Окно появляется сразу после открытия страницы.
- Совет: обязательно установите задержку (2–5 секунд), чтобы посетитель сначала увидел контент.
- Сценарий: важное объявление, срочная акция.
5.2 По клику
Окно открывается при нажатии на кнопку, ссылку или иконку.
- Настройка: в настройках кнопки или ссылки выберите «Динамические теги» → «Действие» → «Всплывающее окно» → выберите нужное.
- Сценарий: подписка (посетитель сам решает открыть форму), просмотр скрытого контента, вход в личный кабинет. Это самый «дружелюбный» триггер – пользователь действует по своему желанию.
5.3 При прокрутке
Попап срабатывает, когда пользователь прокручивает страницу до определённого процента (например, 50% или 70%).
- Сценарий: подписное окно в блоге – после того как человек прочитал половину статьи, он уже заинтересован.
5.4 После просмотра нескольких страниц
Окно показывается после того, как посетитель перешёл на N-е количество страниц.
- Настройка: в расширенных правилах укажите «Показывать после X просмотров страниц».
- Сценарий: подписка – когда человек уже познакомился с сайтом (2–3 страницы), предложение будет более уместным.
5.5 При намерении покинуть страницу (Exit‑intent)
Срабатывает, когда курсор мыши движется к закрытию вкладки или адресной строке.
- Сценарий: «последний шанс» – предложите скидку или бонус, чтобы удержать уходящего посетителя. Это один из самых эффективных триггеров по конверсии.
5.6 При бездействии
Окно появляется, если пользователь некоторое время не двигает мышью и не скроллит.
- Сценарий: переключить внимание, если человек «завис» на странице.
6. Шаг 5. Расширенные правила (Advanced Rules)
Здесь вы уточняете, кому и как часто показывать попап.
6.1 Статус входа пользователя
- Скрыть от авторизованных – чтобы не раздражать уже подписавшихся или администраторов.
- Показывать только неавторизованным – идеально для подписки.
6.2 Контроль частоты показа
- Количество показов – ограничьте, сколько раз один пользователь увидит окно (обычно 1–2 раза).
- Периодичность – можно задать интервал между показами (например, раз в 3 дня).
- Ограничение по сессии – не более одного раза за сеанс.
Критично: не допускайте повторного появления окна каждый раз при переходе – это вызывает сильное раздражение. Для подписки достаточно одного показа на пользователя.
6.3 Ориентация на устройства
Вы можете показывать попап только на десктопе или только на мобильных устройствах, а также задавать разные размеры для разных экранов.
7. Шаг 6. Интеграция с сервисами email‑маркетинга (для подписных окон)
Если ваше окно содержит форму подписки, подключите её к сервису рассылок (MailChimp, ActiveCampaign, Sendinblue и др.).
7.1 Настройка API
- Зайдите в Elementor → Настройки → Интеграции.
- Выберите вашего провайдера и введите API‑ключ (получить его можно в личном кабинете сервиса).
- Сохраните настройки.
7.2 Привязка формы
В настройках виджета «Форма»:
- В разделе «Действия после отправки» выберите вашего провайдера.
- Сопоставьте поля формы с полями в списке рассылки (email, имя).
- Задайте действие после успешной отправки: закрыть окно, показать сообщение об успехе, перенаправить на страницу «спасибо».
8. Шаг 7. Сохранение и публикация
После всех настроек:
- Нажмите «Сохранить и закрыть».
- Попап становится активным на вашем сайте.
Обязательное тестирование
Прежде чем полагаться на окно, проверьте его вживую:
- Зайдите на те страницы, где оно должно показываться.
- Убедитесь, что триггер срабатывает в нужный момент.
- Отправьте тестовую подписку (если есть форма).
- Посмотрите, как окно выглядит на мобильном устройстве.
9. Сравнение лучших практик для подписки и для акций
| Параметр |
Подписное окно |
Акционное окно |
| Рекомендуемые триггеры |
По прокрутке, после просмотра страниц, по клику |
При намерении уйти, при загрузке (с задержкой) |
| Рекомендуемые условия |
Записи блога, все страницы |
Карточки товаров, корзина, лендинги |
| Ключевое содержимое |
Форма + выгода для подписчика |
Информация о скидке + таймер + кнопка |
| Частота показа |
1 раз на пользователя |
1 раз за сессию или раз в N дней |
| Главная цель |
Собрать email |
Стимулировать покупку |
Теперь у вас есть все инструменты, чтобы создать эффективное всплывающее окно – будь то форма подписки или реклама скидки. Главное – всегда тестируйте разные варианты (триггеры, оформление, текст) и анализируйте реакцию аудитории. Удачи в настройке!
