25 всплывающих примеров элементаров, которые на самом деле преобразуют (2026)

Примеры всплывающих окон Grid of Elementor, включая согласие на электронную почту, код скидки, обратный отсчет, намерение выхода и уведомление о файлах cookie, созданные с помощью всплывающего конструктора главных дополнений

Лучшие примеры всплывающих окон Elementor имеют три общие черты: одно четкое предложение, триггер, соответствующий тому, что делает посетитель, и таргетинг, показывающий всплывающее окно только там, где ему место. Получите эти три правильно, и всплывающее окно преобразуется примерно в 45% посетителей; получите размещение и запустите правильно, и данные Wisepops показывают, что некоторые форматы достигают 12% и выше.

Каждый приведенный ниже пример работает на бесплатном Elementor. собственный всплывающий инструмент Elementor заблокирован за Pro, но бесплатный Мастер Аддоны Всплывающий конструктор дает вам такое же редактирование перетаскивания, пять триггеров, таргетинг на уровне страницы и библиотеку из более чем 100 всплывающих шаблонов, которые импортируются в один клик. Если вы никогда не создавали ни одного раньше, наше прохождение как добавить всплывающее окно в Elementor бесплатно накрывает установку примерно за десять минут.

25 примеров сгруппированы по целям. каждый показывает реальную сборку, называет подходящий ему триггер и объясняет конкретную причину, по которой он преобразуется. не “popups увеличивает вовлеченность,”, а какой психологический рычаг каждый нажимает.

Что делает всплывающее окно Elementor конвертируемым

Конвертирующее всплывающее окно отвечает на три вопроса, прежде чем посетитель сознательно их задает. Что я получу? Почему сейчас? почему это меня прерывает?

  • Одно предложение, одно действие. Всплывающее окно с полем электронной почты и кнопкой превосходит то, которое также связывает ваши социальные сети, вашу продажу и вашу страницу о. Каждый дополнительный выбор обесценивает конверсии.
  • Триггер соответствует поведению. Скидка может выстрелить на загрузку страницы. апгрейд контента не может, потому что читатель еще ничего не читал. большинство “popups не работают.” жалобы относятся к правильному предложению на неправильном триггере.
  • Нацеливание с учетом контекста. Всплывающее окно для восстановления корзины в блоге - это шум. Показанное только на странице корзины, то же всплывающее окно спасает реальный доход. Условия отображения на уровне страницы - это то, что отличает инструмент преобразования от раздражения.

Цифры обратно вверх.Среднее преобразование всплывающих окон находится около 4,65%, но размещения внизу в центре преобразуют 12,88% в тестировании Wisepops, всплывающие окна с целью выхода обычно восстанавливают 10 (15%) посетителей, которые собирались уйти, а всплывающие окна с двумя шагами превосходят одношаговые, потому что начало действия вызывает у людей желание закончить его (эффект Зейгарника).Каждый пример ниже применяет по крайней мере один из этих рычагов.

Всплывающие примеры поколения потенциальных клиентов

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

1. Всплывающее окно для загрузки электронной книги или контрольного списка

Бесплатный ресурс в обмен на электронную почту. это конвертирует лучше, чем простой “подписка” спрашивать, потому что посетитель уходит с чем-то конкретным, и это соответствует вашему списку. Тот, кто загружает ваш контрольный список оптимизации скорости, заботится об оптимизации скорости. Сжечь это на свиток на 50% так что он приземляется после того, как читатель инвестирован, и нацеливать его только на сообщения блога. библиотека шаблонов Master Addons имеет несколько подписок в стиле загрузки, которые вы можете импортировать в один клик и переформулировать.

Пример всплывающего окна загрузки электронной книги, созданный на Elementor, с изображением обложки, одним полем электронной почты и кнопкой загрузки

2. Согласие на подписку на однопольный информационный бюллетень

Одно поле электронной почты, одна кнопка, одно предложение о том, что получают подписчики Каждое поле, которое вы добавляете, завершает сокращения, поэтому спросите имя позже, внутри приветственной электронной почты. Прокрутите триггер на 40 (60%), только страницы блога, и подавьте его в течение нескольких дней после того, как кто-то отклонит его. Соедините всплывающее окно с одним из лучшие плагины рассылки WordPress чтобы действительно доставить электронные письма. Всплывающее окно захватывает, ESP отправляет.

Пример всплывающего окна регистрации минимального количества рассылок в Elementor с одним полем электронной почты и кнопкой подписки

3. Обновление контента для конкретных должностей

Наибольшее конвертирование lead popup в большинстве блогов, потому что предложение соответствует точной статье: swipe файл на копирайтинг пост, шаблон на how-to post.Relevance делает убеждение.Target один единственный пост с условиями отображения и запускать его на 80% прокрутка, когда читатель почти закончил и доверяет вам больше всего.Да, это означает сделать один актив на ключевой пост.This также почему это работает: никто больше не беспокоит.

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

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

События несут встроенный крайний срок, а сроки конвертировать. сохраните форму для имени и электронной почты, покажите дату и время на видном месте, и сделать кнопку сказать “Спасите мое сиденье”, а не “Submit.” Загрузка страницы с задержкой в две-три секунды работает здесь, потому что событие является основным призывом сайта к действию на этой неделе, что делает это единственным случаем, когда прерывание досрочного оправданным.

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

5. Всплывающее окно с бесплатной пробной версией или демо-запросом

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

Пример всплывающего окна демонстрационного запроса открывается нажатием кнопки заголовка в Elementor

6. Разблокировка библиотеки ресурсов

Загрузите коллекцию руководств, шаблонов или контрольных списков за одной регистрацией. воспринимаемая ценность “вся библиотека” превосходит любую отдельную загрузку, поэтому это приносит электронным письмам простое согласие никогда бы не произошло. Используйте триггер щелчка на кнопке “Get access” страницы библиотеки, чтобы поток оставался преднамеренным, и доставьте ссылку разблокировки по электронной почте, чтобы сохранить честность адресов.

Пример всплывающего окна разблокировки библиотеки ресурсов, показывающий закрытую коллекцию руководств при регистрации по электронной почте

7. Выходной магнит

Защитная сетка. Когда курсор движется к панели вкладок, триггер exit-intent делает последнее предложение, и, поскольку посетитель все равно уходил, это не может повредить сеанс, который прерывает.Всплывающие окна выхода обычно восстанавливают 10 — 15% отказа от посетителей, а тесты полноэкранных дизайнов выходов привели к до 50% больше подписок, чем небольшие модальные окна. Ведите с самым сильным магнитом здесь, а не с помощью информационного бюллетеня.

Пример всплывающего окна "Намерение выхода" в Elementor, предлагающий ведущий магнит при движении посетителя для закрытия вкладки

Всплывающие примеры электронной коммерции и WooCommerce

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

8. Всплывающее окно со скидкой первого порядка

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

Пример всплывающего окна со скидкой при первом заказе для WooCommerce, предлагающий скидку 10 процентов в обмен на адрес электронной почты

9. Подталкивание порога бесплатной доставки

“You're $12 от бесплатной доставки” является машиной средней стоимости заказа: он переосмысливает добавление еще одного товара как экономию денег. покажите его как тонкое всплывающее окно или панель на страницах продуктов с триггером прокрутки и свяжите кнопку прямо с коллекцией бестселлеров по цене, близкой к пробелу. Никакой адрес электронной почты ask it use - это большая тележка, а не больший список.

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

10. Предложение о выходе из тележки

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

Всплывающий пример намерения выхода из корзины, предлагающий стимул для выполнения заказа WooCommerce

11. Всплывающее окно обратного отсчета распродаж

Срочность работает, когда она реальна Всплывающее окно с загрузкой страницы и живым выступлением таймер обратного отсчета и дата окончания продажи сжимает “Я подумаю об этом” в “решить сейчас.” Правило, которое удерживает его конвертируя долгосрочно: таймер должен сказать правду.Уберите всплывающее окно в ту минуту, когда продажа закончится. Вечнозеленый “ending скоро”, который никогда не заканчивается учит посетителей игнорировать каждый будущий срок, который вы установили.

Всплывающий пример флэш-продажи с таймером обратного отсчета в реальном времени, встроенным с помощью Elementor и Master Add

12. Регистрация на складе

Неакционерная страница обычно означает потерянную продажу. “Notify me” popup с кликом преобразует этот тупик в спрос, который вы можете измерить, и список адресов электронной почты с гарантированным интересом. Эти подписчики конвертируют с необычно высокими ставками, когда пополняется пополнение запасов электронной почты, потому что они просили именно этот продукт. Добавьте класс триггера к кнопке, расположенной там, где обычно находится "Добавить в корзину".

Пример всплывающего окна с уведомлением о наличии на странице продукта WooCommerce, которая не имеется в наличии

13. Купон раскрывает всплывающее окно

Два шага: посетитель выбирает, затем появляется код Любопытство плюс обязательство: как только кто-то нажимает “Раскройте мой код,” эффект Зейгарника подталкивает их завершить регистрацию, а затем оправдать ее, используя код. Одно честное примечание: колесо с вращением к выигрышу нуждается в отдельном инструменте геймификации; простое раскрытие - это свободный маршрут, и он респектабельно преобразуется без эстетики казино.

Двухэтапный купон раскрывает всплывающий пример, где код скидки появляется после регистрации по электронной почте

14. Всплывающее окно с рекомендациями по конкретной категории

Предложите свой бестселлер кофе-шестерни только в категории кофе Актуальность - это весь трюк: общий “проверьте наши бестселлеры” popup - это реклама, в то время как категория-соответствующая ощущается как помощь продавца Условия отображения Popup Builder обрабатывают таргетинг по категориям, и то же самое Расширение условий отображения вводит идентичные правила страницы и роли в любой другой элемент сайта.

Всплывающий пример рекомендаций по продукту для конкретной категории, ориентированный на условия отображения в Elementor

Примеры взаимодействия и всплывающих окон на странице

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

15. Всплывающее окно-лайтбокс видео

Встраивайте демо-видео прямо на страницу, и оно перетаскивает время загрузки вниз независимо от того, смотрит кто-то или нет. Лайтбокс с кликом переворачивает это: страница остается быстрой, и видео открывается в чистом наложении для посетителей, которые его выбирают. миниатюра кнопки воспроизведения преобразует щелчки лучше, чем текстовая ссылка, потому что она задает ожидание того, что именно произойдет дальше. Библиотека MA включает шаблоны видеолайтбоксов, готовые к импорту; поменяйте URL-адрес видео, и все готово.

Пример всплывающего окна видеолайтбокса в Elementor, открывающий демонстрацию продукта в наложении при щелчке мыши

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

Пример всплывающего окна лайтбокса галереи изображений, показывающий полноразмерное изображение портфолио, открытое из сетки миниатюр

17. Новая панель объявлений

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

Тонкий всплывающий пример панели объявлений в верхней части веб-сайта, рекламирующий новую функцию

18. Всплывающее окно микрообследования обратной связи

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

Один всплывающий пример опроса с обратной связью по вопросам с кликабельными кнопками ответов, активируемыми после бездействия

19. Возраст или ворота контента

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

Пример всплывающего окна полноэкранного шлюза проверки возраста, созданного с помощью всплывающего конструктора Elementor

20. Подробный модал "нажми и открывай"

Ценовые примечания, спецификации, условия доставки, руководства по размеру: контент, который имеет значение для 10% посетителей и загромождает страницу для остальных 90%. Поместите его за ссылку “View Details”, которая открывает модал. макет остается чистым, искатели деталей получают ответы без перезагрузки страницы, а ваш главный призыв к действию сохраняет свою направленность.

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

Всплывающие примеры полезности и соответствия требованиям

Эти пятеро справляются с практическими работами, которые в конечном итоге нужны каждому сайту. Они редко что-то продают, но плохо справляются с ними, они обходятся вам в счет посетителей, поэтому они тоже конверсионные работы.

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

Пример всплывающего окна согласия на использование файлов cookie в нижней панели, стилизованный под дизайн веб-сайта в Elementor

22. Вход или регистрация по модальному стандарту

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

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

23. Местоположение или выбор валюты

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

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

24. Всплывающее окно с формой назначения или бронирования

Для клиник, салонов, консультантов и всех, кто продает время: всплывающее окно с кликом, содержащее форму бронирования, означает, что каждая кнопка “Book now” на сайте открывает одну и ту же форму, не поддерживая отдельную страницу бронирования на услугу. Меньше шагов между намерением и назначением, а также одна форма для обновления при изменении доступности.

Всплывающий пример формы бронирования при встрече для веб-сайта салона, открываемого с кнопки "Забронировать сейчас"

25. Подталкивание к повторному взаимодействию

Сообщение после бездействия, которое возвращает отвлеченного посетителя до закрытия вкладки. Другая работа, чем намерение выхода: выход ловит активное решение уйти, бездействие ловит внимание, которое переместилось в другое окно. щадящий “Все еще решает? Вот наш самый популярный вариант” перезапускает сеанс чаще, чем вы ожидаете, и это ничего не стоит вовлеченному посетителю, потому что он никогда его не видит.

Всплывающий пример повторного вовлечения, подталкивающий неактивного посетителя обратно с помощью популярного предложения продукта

Предложение решает триггер. Мастер Аддоны поставляет пять (Загрузка страницы бесплатна, остальные четыре нуждаются в Pro), и выбор неправильного является наиболее распространенной причиной, по которой хорошее всплывающее окно неэффективно. Эта таблица отображает триггеры в приведенные выше примеры.

ТриггерПожары когдаЛучший пример подгонкиОстерегайтесь
На Нажать (Про)Посетитель щелкает заданный элементДемо-запрос (5), видеолайтбокс (15), форма бронирования (24)Для подключения необходима кнопка или ссылка
На Прокрутка (Про)Страница прокручивается на установленный процентОбновление контента (3), подписка на рассылку новостей (2)Установите его слишком низко, и он сработает до того, как появится интерес
Загрузка страницыПосле задержки вы установилиБаннеры продажи (11), уведомление об использовании файлов cookie (21), возрастные ворота (19)Менее двух секунд имеет тенденцию раздражать
Выход Намерение (Про)Курсор перемещается, чтобы закрыть вкладкуВосстановление тележки (10), ведущий магнит последнего шанса (7)Настольный сигнал слабее на мобильном телефоне
После бездействия (Про)Прокрутка и остановка движенияОпрос обратной связи (18), подталкивание к повторному вовлечению (25)Продолжайте ждать достаточно долго, чтобы чувствовать себя естественно
Панель "Всплывающие параметры главных дополнений" в Elementor с открытым раскрывающимся триггером, показывающим параметры "Загрузка страницы", "Нажатие", "Прокрутка", "Намерение выхода" и "После бездействия"

Как построить любой из этих всплывающих окон бесплатно

Сборка одинакова для всех 25 примеров.Установите бесплатный плагин Master Addons поверх бесплатного Elementor, откройте Master Addons → Popup Builder и добавьте новое всплывающее окно.

  1. Начните с библиотеки, а не с чистого холста. The библиотека шаблонов содержит более 100 всплывающих окон: подписки, скидки предложения, видео лайтбоксы, уведомления о файлах cookie, формы входа в систему. Найдите тот, который соответствует вашему примеру и он импортирует в один клик, полностью редактируемый.
  2. Редактировать с помощью обычных виджетов Elementor. Текст, форма, изображение, обратный отсчет: всплывающее полотно работает точно так же, как страница.
  3. Выберите спусковой крючок из стола выше. Загрузка страницы работает на бесплатном плагине; остальным нужны Master Addons Pro.
  4. Установить условия отображения. Весь сайт на бесплатном плагине, или определенные страницы и сообщения с Pro. это шаг таргетинга, который большинство людей пропускают, а затем задаются вопросом, почему всплывающее окно раздражает людей или никогда не показывает.

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

Один честный предел: всплывающий конструктор захватывает потенциальных клиентов и показывает предложения, но это не платформа электронной почты или пакет тестирования A/B. Если вам нужно сплит-тестирование и глубокая аналитика, соедините его со специальным инструментом; наше сравнение лучшие плагины для создания всплывающих окон для WordPress карты той территории. для дизайнерского вдохновения за пределами этих 25, собственных у Элементора всплывающие примеры стоят прокрутки, и бесплатный плагин включен Каталог WordPress когда готов строить.

Часто задаваемые вопросы

Как мне создать всплывающие окна в Elementor?

Свободный Элементор не имеет встроенного всплывающего конструктора, поэтому вы добавляете его с плагином.Установите бесплатные Главные Аддоны для плагина Элементор, перейдите в Мастер Аддоны, Всплывающий конструктор, нажмите Добавить новое, спроектировать всплывающее окно с виджетами Элементор, выберите триггер, установите условия отображения, и опубликовать. поток занимает менее десяти минут.

Как я могу создать всплывающее окно в Elementor бесплатно?

Используйте бесплатный Мастер Аддоны всплывающий конструктор. он работает на бесплатной версии Elementor и открывает всплывающие окна при загрузке страницы по всему сайту.The On Click, On Scroll, Exit Intent и After Inactivity триггеры и таргетинг на уровне страницы нуждаются в Master Addons Pro. Elementor Pro нужен только в том случае, если вы хотите собственный всплывающий конструктор Elementor вместо этого.

Как запустить всплывающее окно Elementor при нажатии кнопки?

С помощью Master Addons Pro установите всплывающий триггер в On Click и введите CSS-класс, такой как open-popup. Затем добавьте тот же класс в виджет кнопок в разделе "Дополнительно", "Классы CSS". Каждая кнопка с этим классом открывает всплывающее окно, и тот же метод работает для изображений, значков и ссылок.

Существуют ли бесплатные всплывающие шаблоны Elementor?

Да. всплывающая библиотека Master Addons поставляет более 100 шаблонов внутри бесплатного плагина, охватывающих подписки, баннеры продаж, видео-лайтбоксы, уведомления о файлах cookie и формы входа в систему. Каждый импортируется одним щелчком мыши и остается полностью редактируемым в Elementor, без пробного ограничения или водяного знака.

Почему не отображается мое всплывающее окно Elementor?

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

Фотография Роя Джеми
Рой Джеми
Я Рой Джеми, Content Wrangler и Marketer в Pixar Labs, работаю над Master Addons для Elementor.Я пишу учебные пособия, записываю видео и поддерживаю актуальность документации, поэтому вы всегда знаете, как использовать каждую функцию. Я также занимаюсь поддержкой, поэтому, если вы наткнетесь на корягу, я тот человек, который поможет вам исправить это. Реальные ответы, от кого-то, кто использует эти инструменты каждый день.
Сентябрьская распродажа

40% выключить все

Каждый Мастер Аддоны Про план, годовой и пожизненный Один код, восемь дней.

00дней
00час
00мин
00сек

Заканчивается в понедельник, 14 сентября, 23:59 по восточному времени

  • Личный1 сайт 129 долларов77 ДОЛЛАРОВ
  • Бизнес5 сайтов 199 долларов119 долларов
  • РазработчикНеограниченные сайтыЛучше всего для агентств 599 долларов359 долларов

Платите один раз. Никакого продления никогда.

Код купона МАЛИФЕ40
Получите скидку 40% прямо сейчас
  • Более 30 000 активных установок
  • 4,5/5 из 212 отзывов
  • 14-дневный возврат денег