Всплывающие окна для WordPress: как создать и 40 плагинов

Всплывающее окно в WordPress создают плагином: устанавливают его, выбирают тип окна, задают триггер (по времени, прокрутке, клику или намерению уйти) и условия показа. Для старта подойдут Popup Maker (700 000+ активных установок на wordpress.org) или Hustle. Ниже — зачем нужны поп-апы, какие правила учесть и обзор плагинов с описанием возможностей.

Зачем нужны поп-апы

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

• Эксклюзивный контент. Читатель дошёл до нужного места статьи, и ему предлагают электронную книгу или чек-лист по теме.
• Акции и скидки. Если человек читает обзор конкретного смартфона, ему можно показать предложение именно по этой модели.
• Подписка. Форма во всплывающем окне собирает email для рассылки. Адрес можно использовать только с согласия пользователя.

Результаты и риски

По опубликованному кейсу, сайт WPBeginner вырос с 70–80 до 400 регистраций в день, показывая всплывающее окно на страницах записей посетителям, которые собирались уйти (например, наводили курсор на кнопку «Назад»). Маркетолог Дэн Зарелла, по тем же данным, удвоил число подписок на рассылку с помощью поп-апов.

Но окна, которые перекрывают содержимое, могут навредить. Google снижает позиции страниц с навязчивыми межстраничными окнами на мобильных, поэтому на смартфонах показывайте небольшие баннеры или слайд-ины, а не полноэкранные формы. При сборе email и cookie учитывайте согласие на обработку персональных данных (152-ФЗ) и уведомления о cookie. Окно должно закрываться одним касанием, а частоту показов стоит ограничить.

Как сделать поп-ап в WordPress

1. Установите плагин из каталога wordpress.org или с сайта разработчика.
2. Создайте окно и добавьте в него форму, текст или изображение.
3. Выберите триггер: автоматический показ с задержкой, клик по кнопке, прокрутка страницы или попытка покинуть сайт.
4. Задайте условия: на каких страницах и для каких посетителей показывать окно.
5. Ограничьте частоту, например, один показ на пользователя, и проверьте окно на телефоне.

Контекстное меню на HTML, CSS и JavaScript: пример без плагинов

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

HTML-код

В примере всего два элемента: заголовок h1 и ненумерованный список (ul), который станет контекстным меню. Код из листинга 1 сохраните в файл .html в любом текстовом редакторе.

Рис. 1

После сохранения и открытия файла в браузере вы увидите страницу, показанную на рисунке 2.

Рис. 2

Следующий шаг — оформить список с помощью CSS.

Визуальное форматирование с помощью CSS

Код CSS можно менять под свой макет.

Рис. 3

Добавьте теги style в заголовок страницы и вставьте код, показанный на рисунке 3. Стили можно вынести во внешний файл и подключить тегом link, но для простоты они остаются внутри страницы.

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

Теперь добавим работу меню на JavaScript.

Отображение меню с помощью JavaScript

Вставьте теги script в заголовок страницы. Код с рисунка 4 тоже можно вынести во внешний файл, удалив открывающий и закрывающий теги script, но в примере он остаётся на HTML-странице.

Рис. 4

Функция showMenu получает координаты курсора в момент клика и использует их для позиционирования div Menu, меняя его свойство visibility на visible. Поскольку позиционирование div задано как absolute, меню появляется в точке с координатами X и Y, присвоенными CSS-свойствам left и top.

Затем добавлен код, который скрывает меню после выбора пункта, и действия для каждого пункта: вместо демонстрационного окна alert можно вставить свой код.

Всё это выполняется внутри события onload объекта window, чтобы DOM успел загрузиться до обращения к элементам через JavaScript.

Сравнение основных плагинов

Плагин	Версии	Особенности
Popup Maker	Бесплатная и Pro	Триггеры по клику, времени, отправке формы; триггеры выхода и прокрутки в Pro
Popup Builder	Каталог wordpress.org	Формы подписки, интеграции с AWeber, MailChimp, WooCommerce
Popup by Supsystic	Бесплатная и платная	Более 60 шаблонов; часть триггеров только с лицензией
Hustle	Бесплатная и в составе WPMU DEV	Поп-апы, слайд-ины, встроенные формы
Ninja Popups	Платный, CodeCanyon	Блокировка контента до действия, темы оформления
Advanced Popups	Открытый код	Рассылка, cookie-уведомления
Modal Window	Бесплатный	Любой контент в модальном окне по клику

Лучшие плагины для WordPress

Плагины скачивайте из каталога wordpress.org или у самого разработчика: платные дополнения со сторонних зеркал могут быть изменены и содержать вредоносный код.

My Popup

Позволяет создавать окна разных типов и показывать разные окна на разных страницах. Окна выводятся с задержкой по времени, а для сложных кампаний есть расширенный таргетинг. Добавлять их на страницы можно без шорткодов.

Ссылка на плагин: mypopup.com

Popup Maker

Один из самых популярных плагинов для поп-апов: на wordpress.org у него более 700 000 активных установок. Подходит для окон подписки, уведомлений о cookie, баннеров, слайдов и рекламных предложений. Можно настроить положение, размер и анимацию окна, несколько триггеров на одно окно и частоту показа для каждого посетителя. Триггеры по намерению уйти и по прокрутке страницы доступны в версии Pro.

Страница плагина: wordpress.org/plugins/popup-maker/

Ссылка на плагин: https://ru.wordpress.org/download/

Popup Builder

Функций меньше, чем в Popup Maker, но он позволяет вставлять в окна любой контент, задавать дизайн и эффекты, создавать изображения, формы подписки, HTML и правила показа. Есть расширения для Google Maps, погоды и других сервисов. Плагин интегрируется с AWeber, Ninja Forms, MailChimp, Gravity Forms и WooCommerce, чтобы предлагать скидки по активности клиента в магазине. Встроенная аналитика поведения посетителей показывает, что стоит улучшить в окне.

Ссылка на плагин: https://wordpress.org/plugins/popup-builder/

Popup by Supsystic

Есть бесплатная и платная версии. Бесплатная даёт собирать окна из шаблонов или создавать свои, интегрироваться с контактными формами и экспортировать список подписчиков. Среди возможностей: проверка возраста, более 60 готовых шаблонов, iFrame, PDF, полноэкранный режим и карты Google. Можно запускать A/B-тесты, чтобы увидеть, какой вариант конвертирует лучше, и закрывать окно только после действия (например, лайка). Триггеры вроде прокрутки и окна при уходе со страницы доступны по лицензии.

Ссылка на плагин: https://wordpress.org/plugins/popup-by-supsystic/

Ninja Popups

Создаёт всплывающие окна, которые превращают посещения в действия: подписку на рассылку, получение купона за email или блокировку контента страницы до выполнения действия. Есть набор тем оформления и гибкая настройка окна.

Ссылка на плагин: https://codecanyon.net/item/ninja-popups-for-wordpress/3476479

Master Popups

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

Ссылка на плагин: https://ru.wordpress.org/plugins/master-popups-lite/

Lightbox & Modal Popup WordPress Plugin

Плагин FooBox — лайтбокс с адаптивным макетом: масштабирует изображения для телефонов и перестраивает кнопки управления в книжной и альбомной ориентации. Автоматически добавляет модальные окна к галереям WordPress, изображениям с подписями и вложениям без настройки.

Ссылка на плагин: https://ru.wordpress.org/plugins/foobox-image-lightbox/

Hustle

Плагин WPMU DEV: поп-апы, слайд-ины, встроенные формы и рекламные блоки. У Hustle есть бесплатная версия на wordpress.org, но часть возможностей в ней ограничена. Он также входит в премиум-членство WPMU DEV, которое объединяет плагины для безопасности, маркетинга, SEO и производительности; актуальную цену смотрите на сайте WPMU DEV.

Ссылка на плагин: https://ru.wordpress.org/plugins/wordpress-popup/

Popups for Divi

Для сайтов на Divi. Включите Visual Builder, выберите раздел и превратите его во всплывающее окно. Количество окон не ограничено, и их можно размещать на любой странице.

Ссылка на плагин: https://ru.wordpress.org/plugins/popups-for-divi/

Side Cart Woocommerce (Ajax)

Плавающая корзина для магазина на WooCommerce: покупатель меняет количество товара, удаляет позиции и обновляет цену без перезагрузки страницы (Ajax). Настраиваются положение значка мини-корзины, цвет, тексты на нужных языках.

Ссылка на плагин: https://ru.wordpress.org/plugins/side-cart-woocommerce/

Popup Anything

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

Ссылка на плагин: https://ru.wordpress.org/plugins/popup-anything-on-click/

BlossomThemes Social Feed

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

Ссылка на плагин: https://ru.wordpress.org/plugins/blossomthemes-instagram-feed/

Popups, Welcome Bar, Optins and Lead Generation Plugin

Плагин Icegram: всплывающие окна, баннеры, предложения и триггерные сообщения при выходе. Есть правила таргетинга и сплит-тестирование.

Ссылка на плагин: https://sa.wordpress.org/plugins/icegram/

Popup, Optin Form & Email Newsletters for Mailchimp, HubSpot, AWeber

Плагин MailOptin показывает формы регистрации и призывы к действию во всплывающем окне (лайтбокс или модальное), в форме внутри записи, на панелях уведомлений, в слайд-ине и виджете боковой панели. Интегрируется с Mailchimp, HubSpot, AWeber.

Ссылка на плагин: https://wordpress.org/plugins/mailoptin/

Login/Signup Popup

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

Ссылка на плагин: https://ru.wordpress.org/plugins/easy-login-woocommerce/

Button contact VR

Фиксированная кнопка связи с горячей линией, Zalo, Viber, WhatsApp, мессенджером и всплывающей формой. Положение слева, справа или внизу, масштаб настраивается. Установка: «Плагины → Добавить новый», найдите Button contact VR и активируйте, либо загрузите папку плагина в каталог /wp-content/plugins/.

Ссылка на плагин: https://ru.wordpress.org/plugins/button-contact-vr/

Video PopUp

Отделяет активное видео от вкладки и показывает его в небольшом плавающем окне поверх других окон. Использует браузерный API «картинка в картинке». Плавающее окно остаётся при смене вкладки и закрывается вместе с вкладкой с видео.

Ссылка на плагин: https://ru.wordpress.org/plugins/video-popup/

Advanced Popups

Лёгкий плагин с открытым исходным кодом: окна подписки на рассылку, уведомления о cookie и другие сообщения.

Ссылка на плагин: https://ru.wordpress.org/plugins/advanced-popups/

WP Video Popup

Встраивание YouTube и Vimeo замедляет сайт, а WP Video Popup загружает видео только после клика по триггеру. Соединение с YouTube или Vimeo не устанавливается, пока не откроется лайтбокс, что удобно для требований GDPR.

Ссылка на плагин: https://wordpress.org/plugins/responsive-youtube-vimeo-popup/

Brave

Конструктор всплывающих окон с редактором перетаскиванием. Поддерживает слайд-ины, поп-апы и нижние панели, подходит для форм входа и допродаж.

Ссылка на плагин: https://ru.wordpress.org/plugins/brave-popup-builder/

ARI Fancy Lightbox

Лайтбокс, который не требует правок HTML: выберите типы медиа (например, YouTube или Vimeo), и плагин сам подключит лайтбокс к подходящим ссылкам. Работает с галереями WordPress и Jetpack (плитка, круг), изображения открываются в окне fancybox.

Ссылка на плагин: https://ru.wordpress.org/plugins/ari-fancy-lightbox/

Modal Window

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

Ссылка на плагин: https://ru.wordpress.org/plugins/modal-window/

ConvertPlug

Платформа для роста конверсии: редактор в реальном времени, встроенная аналитика, шаблоны и интеграции с сервисами email-маркетинга.

Ссылка на плагин: https://www.convertplug.com/

Ultimate Modal Windows

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

Popups Generator

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

Ссылка на плагин: https://www.html-code-generator.com/html/popup-window-generator

Layered Popups

Теперь называется Green Popups. В отличие от плагинов с готовыми шаблонами, где можно менять цвета, шрифты и текст, он позволяет собирать окна из слоёв по своему замыслу.

Ссылка на плагин: https://layeredpopups.com/

ChimpMate Pro

Премиальный плагин для роста числа подписчиков: виджет, лайтбокс, слайдер, надстройка и верхняя панель.

Ссылка на плагин: https://saasscout.com/wordpress/chimpmate-pro/

OptinPoint

Центр подписки для WordPress. Интегрируется с сервисами email-маркетинга, включая Aweber и Getresponse, имеет несколько тем оформления, настройку и живой редактор.

WordPress & WooCommerce Better Discount, Vouchers, Coupon Pop-Up Plugin

Решение для управления купонами в WooCommerce: скидки по купонам, кредиты магазина, подарочные ваучеры. Поможет увеличить конверсию интернет-магазина.

Ссылка на плагин: https://wordpress.org/plugins/woo-coupon-box/

Super Forms

Премиальный конструктор веб-форм для WordPress. Не требует знаний программирования и веб-дизайна.

Modal Popup Box For Visual Composer

Дополнение для редактора Visual Composer Frontend: поп-апы создаются прямо в редакторе с любым контентом. Триггеры: при загрузке страницы, при выходе (для купонов), при прокрутке до нужного элемента, по клику вместо обычной ссылки.

Ссылка на плагин: https://wpjungles.com/downloads/modal-popup-box-for-visual-composer/

WP Flat Newsletter Subscription Panel

Адаптивная панель подписки на рассылку: показывается один раз каждому пользователю и запрашивает email, телефон и имя. Контакты хранятся на сервере, адреса можно автоматически отправлять в Mailchimp, Mailpoet или GetResponse, а также экспортировать в .csv.

Ссылка на плагин: https://www.sourceforest.net/codecanyon/item/wp-flat-newsletter-subscription-panel/

Opt-In Panda

Плагин для сбора списков рассылки: посетители добавляют имя и email, а встроенные функции списка адресов позволяют настроить автоответчики для подписчиков.

Ссылка на плагин: https://optin-panda-for-wordpress.softonic.com.br/wordpress

Swift Visual Composer Addons

Visual Composer — конструктор страниц без кода, а аддоны расширяют его возможности.

Ссылка на плагин: https://wordpress.org/plugins/visualcomposer/

Annotator Pro WP

Скрипт для улучшения изображений: 10 встроенных значков и точек, глубокие ссылки, предпросмотр правок, панорамирование, масштабирование и полноэкранный режим. Коммерческий скрипт от проверенного автора.

Ссылка на плагин: https://www.sourceforest.net/codecanyon/item/annotator-pro-wp-image-tooltips-zooming/

Hotspots with Comments

Плагин для горячих точек на изображениях: сотни значков, выбор шрифтов, поддержка записей, страниц и виджетов, популярных конструкторов страниц, неограниченное число шорткодов и свои стили CSS.

Ссылка на плагин: https://www.wpsolver.com/hotspots-with-comments-wordpress/

Usernoise Pro Modal Feedback & Contact Form

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

Ссылка на плагин: https://pluginbrasil.com/produto/usernoise-pro-modal-feedback-contact-form/

WP Flat Tour Builder

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

PopupPress - Popups with Slider & Lightbox for WordPress

Премиальный плагин для всплывающих окон с любым содержимым на любой странице WordPress. Есть простая статистика по числу просмотров окон.

Torchbox Image Lightbox for WordPress

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

Ссылка на плагин: https://wordpress.org/plugins/simple-lightbox/

Mosaic Gallery Addon for Visual Composer

Дополнение к Visual Composer: адаптивные мозаичные галереи с пагинацией jQuery, анимацией и встроенным лайтбоксом.

Ссылка на плагин: https://themeofwp.com/item/mosaic-gallery-addon-for-visual-composer/