Всплывающее окно для WordPress. Плагины модального окна на WordPress Плагин для вордпресс всплывающее окно с акциями

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

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

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

1. OptinMonster

2. Модальные всплывающие окна

Расширение WordPress Modal Popup Box можно приобрести как отдельно или в комплекте с Ultimate Addons из Visual Composer. Этот плагин WordPress позволяет добавлять всплывающие окна для самых разных целей:

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

Это самое простое решение для выбора в этом списке, которое понравится пользователям Ultimate Addons от Visual Composer или пользователям, ищущим простое всплывающее окно.

Его функции включают: поддержку плагинов , поддержка коротких кодов, возможность добавления изображений или видеороликов и многое другое

3. всплывающие окна

Что Popups не хватает в творчестве деноминации, он компенсирует простоту использования и методы таргетинга, специфичные для WordPress. Хотя он не предлагает столько функций, как OptinMonster, он идеально подходит для основных типов всплывающих окон.

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

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

4. Суперформы - всплывающие окна

Это расширение плагина WordPress Super Forms не имеет такого же свечения, как другие всплывающие плагины в этом списке, но он по-прежнему является хорошим выбором для пользователей, которые хотят быстро конвертировать посетителей в подписчиков.

Super Forms - Popups - отличный выбор, если вы ищете простое решение для создания своего списка электронной почты.

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

5. Всплывающие окна ниндзя

Благодаря более чем 30 000 продажам и рейтингу звезд 4,4, Ninja Popups является одним из самых популярных плагинов WordPress, доступных в Canyon Code.

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

6. ChimpMate Pro

ChimpMate Pro - это плагин WordPress, созданный специально для пользователей MailChimp, а также для преобразования читателей в подписчиков. Как и его плагин OptinPoint, который мы рассмотрим позже, этот плагин очень настраиваемый и позволяет полностью контролировать, когда и где появляются всплывающие окна.

ChimpMate Pro станет плагином выбора для пользователей MailChimp, но если вы не используете MailChimp, не волнуйтесь: плагин OptinPoint из нашего списка может понравиться вам.

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

7. Всплывающее устройство

Popup Maker - самый популярный всплывающий плагин плагина WordPress, указанный на WordPress.org с более чем активными установками 200 000. Это поможет вам создать множество всплывающих окон. Его всплывающий редактор поможет вам создать их, используя знакомый интерфейс WordPress, хотя это не идеальный инструмент, подобный тем, который найден на всплывающих окнах OptinMonster или Ninja.

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

8. Слоистые всплывающие окна

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

Благодаря широкому спектру функций Layered Popups добавит немного специй к вашим опциям и всплывающим окнам.

Особенности включают: совместимость с поставщиками услуг электронной почты 65, создателем визуального всплывающего окна, поддержкой кампаний и статистикой A / B и т. Д.

9. Доминирование Popup

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

Мало того, что он поставляется с кучей всплывающих шаблонов, чтобы вы начали быстро, у него также есть: система аналитики, чтобы вы могли видеть, как работают ваши всплывающие окна, поддерживают тестирование A / B для оптимизации ваши всплывающие окна на основе собранных данных, набор параметров таргетинга, таких как цель выхода, щелчок, уровень страницы, реферер, устройство и т. д. ..., поддержка всех популярных триггеров, таких как времени, глубины прокрутки, просмотра страниц и т. д., отслеживания интеграции событий из Google Analytics и т. д.

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

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

10. ConvertPlug

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

Поэтому, если вы хотите увеличить коэффициент конверсии, ConvertPlug должен быть одним из ваших плагинов, чтобы попробовать.

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

11. сумо

Плагин Sumo WordPress не ограничивается всплывающими окнами: это полный набор инструментов для вашего сайта. Но одним из самых популярных инструментов в этом пакете является List Builder, который, как вы догадались, поможет вам отображать всплывающие окна на вашем сайте.

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

Sumo List Builder также имеет тестирование и анализ A / B, поэтому вы можете оптимизировать всплывающие окна, которые вы используете на своем веб-сайте. Этот плагин не столь гибкий с точки зрения типов всплывающих окон, которые вы можете создать, но если вы хотите специально создать свой список адресов электронной почты с помощью всплывающих окон, это все равно отличный вариант.

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

Вывод

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

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

Но, если вы знаете другие плагины премиум-класса WordPress, которые могут сделать лучше этих, не стесняйтесь делиться ими с нами.

Недавно для одного сайта меня попросили сделать форму обратной связи для WordPress в модальном окне. То есть при клике по ссылке «напишите нам» вместо перехода на соответствующую страницу пользователю должно открываться новое всплывающее окно, где и будет находится функция отправки сообщения. Это более интерактивное решение, хотя далеко не всем оно нравится. Я лично предпочитаю классическую реализацию со страницей контактов, однако формы на сайтах бывают разные — поэтому полезно будет рассмотреть решение данной задачи. В работе использовал 2 плагина: известный многим Contact Form 7 и модуль Easy Modal, чтобы сделать модальное окно в вордпресс.

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

Детально останавливаться на установке и настройке Contact Form 7 не буду, всю информацию о нем . В блоге также была статья про , что может пригодиться.

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

Загрузок более 10 тысяч, оценка 4.6. Допустимые версии 3.4 — 4.0.8, хотя я успешно запустил его на WP 4.3.1. Не смотря на то, что сейчас плагин трансформировался в новое решение Popup Maker, на сайте wordpress.org и при поиске плагинов внутри админки все еще можно найти обычный Easy Modal версии 2.0.17. На его примере я и расскажу про создание модального окна обратной связи в WordPress.

После установки появится одноименный раздел, где есть несколько пунктов. Нам понадобится самый первый из них — Modals . Кликаете там по кнопке Add New.

Это действие создаст новое модальное окно для вашего вордпресс сайта. В настройках элемента будет 4 закладки:

General — общие параметры.
Display Options — опции отображения.
Close Options — настройки закрытия окна (с помощью клика или кнопки Esc).
Examples — примеры кода для использования.

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

Тип загрузки Load Type имеет 2 варианта:

Load Sitewide (для всего сайта).
Per Page/Post (для конкретных постов и страниц).

Весьма интересная опция. Если вам нужно всплывающее окно, которое будет выводиться на всех страницах сайта (ссылка располагается в сайдбаре, например), то выбиваете первый вариант. Во втором случае на страницах/постах сайта при редактировании появится соответствующий блок настройки:

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

Вторая закладка параметров модуля — Display Options (опции отображения) .

Здесь указываете:

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

Примеры отображения вывода модального окна в вордпресс с помощью плагина Easy Modal найдете в последней вкладке.

Вставлять этот код нужно через виджет в сайдбаре или в текстовом редакторе. Он ничем не отличается о любого другого HTML кода, единственное, что здесь указан класс конкретного модального окна (eModal-1). Для, созданного вами, второго элемента класс будет eModal-2 и т.п. Дабы не совершить ошибку при вставке кода проще всего копировать его с данной страницы.

Редактирование темы оформления модального окна

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

В данном инструменте 6 закладок:

General — указываете название темы;
Overlay — фон (тут можно выбрать цвет и прозрачность подложки формы);
Container — разные настройки самого модального окна (отступы, рамка, тень);
Title — параметры заголовка всплывающего окна (шрифт, тень);
Content — шрифт и цвет текстов в блоке;
Close — элемент закрытия формы (текст и оформление).

Как видите, внешний вид можно настраивать как угодно под ваши нужды. У меня получилось вот такая простенькая WordPress форма в модальном окне:

После установки всех настроек на забудьте их сохранить (кликаете по кнопке Save).

Видео добавления Contact Form 7 во всплывающем окне Easy Modal

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

Итого про модальные окна для wordpress

Как уже говорилось выше, сейчас плагин Easy Modal (судя по официальной странице) преобразовали в Popup Maker. В репозитории удалось найти одноименный модуль, но его я не тестировал. Рассказываю вам об этом дабы знали что искать, если вдруг Easy Modal в WordPress последующих версий перестанет работать.

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

Что же касается задачи открытия формы обратной связи Contact Form 7 во всплывающем окне, то тут хватает базовых возможностей Easy Modal. Причем данное решение может использоваться и для вывода других модальных окон в вордпресс — полезных подсказок, дополнительной информации и т.п. Учитывая наличие редактора вставки HTML кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.

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

Простое, адаптивное модальное окно с рядом самых необходимых настроек. Редактируется полное внешнее оформление, условия показа (даже по датам), запоминания куки, время всплытия, вставка видео, HTML кода, баннеров и прочее.

Открытие медиа-файлов в модальном окне при клике на веб-кнопку. Окно вставляется в запись через шорткод с определенными параметрами.

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

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

Здравствуйте, уважаемые читатели блога сайт. Замечаете на некоторых сайтах всплывающие окна? Возникали вопросы, как они делаются и для чего они вообще нужны? У меня да.

Так вот друзья, сегодня я расскажу вам именно о них. Но! Давайте сначала узнаем, зачем они нам вообще? Что с них можно получить и какой будет результат? Отвечаю.

Через такие всплывающие окна, эффект отдачи очень велик. Говорят, иногда бывает такое, что число подписчиков увеличивается в 4 раза. Круто! Не правда ли? Использование всплывающих окон (попандеров) - очень эффективный способ привлечь огромное число посетителей. Обычно их используют для:

новостной рассылки;
пиара платных обучающих курсов;
раскрутки групп в соц. сетях;

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

Но! Все эти проблемы, можно обойти, если всплывающее окно настроить правильно.

Итак, давайте лучше вернемся к нашему главному вопросу.

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

1. WP-MK

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

Рекламы (например, Google Adsense);
Пиара своих групп в соц. сетях;
Простой формы подписки.

Скачать плагин можно по . Потом устанавливаем его и активируем обычным способом. Переходим слева в настройки ? всплывающее окошко и видим следующее:

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

2. Ninja Popups.

Если вы хотите, чтобы пользователи, заходя на ваш сайт, увидев всплывающее окно, кричали «Ухты», установите себе этот мега крутой плагин. Ninja Popups - монстр всплывающих окон на . Если сравнивать с WP-MK, то он сильно обходит его по функционалу. Я заметил, что Ninja Popups пользуются мастера своего дела. Почему? Плагин платный и не все могут позволить его себе. От себя могу сказать, что цены у них приемлемы, много не просят. Подробно о стоимости, можно узнать здесь .

Ну, давайте узнаем, что именно мы получим от этого плагина:

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

Если хотите узнать обо всех преимуществах плагина, перейдите по этой ссылке.

Как настроить плагин под себя? Я предлагаю следующее… Вместо настырного текста, лучше посмотреть обучающее видео:

Вот и все друзья, что касается настроек. Но все же, если возникнут вопросы, задайте их в комментариях.

3. Popup Maker (модальное окно)

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

ссылку;
кнопку;
картинку.

Итак, как его настроить?

1. Скачиваем плагин;

2. Устанавливаем и активируем;

3. Слева в меню ищем: Pupup Maker -> Добавить новое.

4. Перед нами покажется страница, такого вида:

Ничего не напоминает? Страница вплоть аналогична форме публикаций статей на WordPress. Как видите, здесь добавились некие дополнительные функции (настройки).

Давайте разберем их более подробно.

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

Укажите здесь заголовок окна - пишем название (например: подписка на новости).

Условия таргетинга - отмечаем галочкой, где будет отображаться наше окно.

Настройки темы - пока здесь нет вариантов. Выбираем по умолчанию. Друзья, в дальнейшем вы можете создать свой шаблон для оформления модального окна. Кстати, функция очень крутая. Найти ее можно: Pupup Maker -> Все темы .

Код - что будет отображаться в окне. В нашем случае видео с YouTube:

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

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

Но это друзья еще не все. Переходим в раздел Pupup Maker -> Все всплывающие окна . Ищем CSS Classes. Нас интересует код, такого вида: popmake-xxx.

Этот код нам нужен для, отображения окна при нажатии по ссылке, картинке или кнопке (говорил вначале).

Открытие окна при нажатии на картинку:

Открытие при нажатии на кнопку:

< button class = "popmake-xxx" >Открыть окно

Такой код можно вставлять где угодно (например, в статье или виджете). Разницы нет. Если будут возникать проблемы или вопросы — задавайте в комментариях, буду рад помочь.

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

На обновления, участвуйте в . До скорой встречи. Всем пока!

С уважением, Могиш Иван

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

Как настроить всплывающие окна в WordPress?

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

Плагин Popup Maker

Итак, после установки и активации плагина, сразу видим окно приветствия. Для начала работы нажимаем кнопку Skip .

В итоге Вы попадаете в основное окно создания всплывающих окон.

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

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

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

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

Блок Показать настройки позволяет задать размеры попап-окна.

Настройка Отключить фон позволяет отображать или скрывать фон под всплывающим окном.

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

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

Итак, после того, как все настройки были внесены, следует нажать кнопку Опубликовать .

Наше всплывающее окно создано, и теперь можно смотреть на сайте.