Сайт о телевидении

Сайт о телевидении

» » Лучший плагин для всплывающих окон в WordPress. Как в WordPress создать модальное (всплывающее) окно Всплывающее окно при наведении плагин wordpress

Лучший плагин для всплывающих окон в WordPress. Как в WordPress создать модальное (всплывающее) окно Всплывающее окно при наведении плагин wordpress

(Последнее обновление: 16.05.2019)

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

Создайте модальные окна и вставьте любой вид контента

Плагины, который я представлю чуть ниже, вы можете использовать для: Contact Form 7 в модальном окне; любая контактная форма (обратной связи) в модальном (всплывающем) окне; видео в модальном окне; картинки во всплывающем окне; размещение полезной информации с ссылками; форма подписки по почте на новые статьи в модальном окне и так далее, и так далее всего, и не перечислишь. Данные плагины совсем простые, без сложных настроек и почти не создающий дополнительную нагрузку на /сайт. И так читайте - Как сделать всплывающее окно в WordPress?

Плагин Easy Modal - всплывающее/модальное окно для WordPress

Плагин модального окна для WordPress - Easy Modal

Установить данный плагин можно стандартным способом, через админпанель - Плагины - Добавить новый и в поле Поиск плагинов вводите название Easy Modal, нажимаете Enter. В списке он должен быть первым. Устанавливаете и как обычно активируете его. А дальше можно переходить к созданию нового модального окна.

Для этого нажмите на новый появившейся раздел Easy Modal и выберите пункт Modals:

Easy Modal - создание нового модального окна

После этого, в самом вверху страницы нажмите кнопку Add New:

Добавить новое окно

А здесь, всё просто:

Создание всплывающего окна с видео

В общих настройках (вкладка General) даёте имя нового окна (отображаться оно не будет, это для вас, если например, вы создадите несколько модальных окон); тип загрузки Load Sitewide (для всего сайта); заголовок окна и наконец вставляете в редактор (режим Текст) нужный вам код. У меня в примере вставлен код видео с YouTube.

Настройка модального окна

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

На вкладке Examples вы найдёте примеры кода для вывода всплывающего окна в WordPress:

Код вывода модального окна в WordPress

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

Код модального окна с видео я вставил в сайдбаре в виде кнопки:

Кнопка на боковой панели блога

Посетитель нажимает на неё и открывается окошко с видео:

Модальное окно с видео

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

Редактирование темы - оформления модального/всплывающего окна

После всех настроек внешнего вида окна нажимайте кнопку справа Save (Сохранить). И напоследок, дамы и господа, покажу пример вывода контактной формы Contact Form 7 в модальном окне.

Создайте новое модальное окно, как показано выше и в текстовый редактор просто вставьте шорткод Contact Form 7 (если у вас установлен этот плагин, если нет, ):

Создания Contact Form 7 в всплывающем окне

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

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

Созданные модальные окна на WordPress

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

Знаете ли вы, что у Easy Modal новая модная замена под названием Popup Maker ? Это самый популярный пользовательский всплывающий и модальный плагин для WordPress.

  • Неограниченные темы;
  • Точный таргетинг, триггеры и файлы cookie;
  • Настроить все;
  • Полная линия расширений;
  • Обширная документация и API для разработчиков.

Если вы уже являетесь пользователем Easy Modal, переход с Easy Modal на Popup Maker - это совсем несложно с пользовательским импортером!

Popup Maker - плагин для всплывающих окон в Вордпресс

Модуль Popup Maker для WordPress

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

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

Легко создавайте уведомления , всплывающие окна (лайтбоксы) с видео, модальные формы (Ninja Forms, Gravity Forms, Contact Form 7). И многое другое. Можно использовать редактор всплывающих окон для создания любого содержимого. Все всплывающие/модальные окна являются отзывчивыми. Идеально подходит для мобильных устройств.

(function(w, d, n, s, t) { w[n] = w[n] || ; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true }); }); t = d.getElementsByTagName("script"); s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks");

Всплывающие окна – удобный инструмент для размещения рекламы, размещения предложения подписаться на рассылку и другой важной информации, к которой вы хотели бы привлечь внимание пользователей. Для wordpress всплывающие окна можно организовать с помощью плагина WP Super Popup. Он доступен и в бесплатной, и в платной версии. За последнюю разработчики просят 39,95$. Впрочем, для большинства проектов достаточно будет и бесплатной версии, о настройке которой мы поговорим в данной статье.

Установка и настройка WP Super Popup

Через «Плагины»→«Добавить новый» ищем и устанавливаем WP Super Popup (или скачиваем его с сайта разработчика http://wppluginspro.com/wp-super-popup-pro/), активируем. Далее переходим на вкладку «Super Popup», которая появилась в главном меню админки.

Здесь имеется три группы настроек:

  • · Base Settings – базовые параметры;
  • · Popup Content – настройки содержания всплывающего окна нашего сайта;
  • · Visual Effects Settings – различные визуальные эффекты.

Рассмотрим более подробно каждую из указанных групп.

Базовые параметры (Base Settings)

Status – галочка возле этого пункта означает, что плагин подключен.

Enable on mobile browsers – если вы хотите, чтобы всплывающие окна появлялись и при открытии сайта с мобильных устройств, активизируйте «Yes».

Paths inclusion/exclusion – здесь можно указать, на каких страницах сайта wordpress всплывающие окна показывать, а на каких – нет.

Show the popup – настройки длительности (Every и число дней) и периодичности (сколько раз показывать окно одному пользователю).

Здесь имеется 4 пункта «Embed the following» для настройки содержания вашего всплывающего окна. Выберите тот вариант, который вам подходит:

  • · URL content – здесь указывается адрес, по которому можно взять готовое содержимое всплывающего окна.
  • · WYSIWYG content – редактор для самостоятельного формирования содержания. Принцип работы сходен с добавлением обычной статьи на ваш сайт.
  • · plain HTML content – поле для вставки готового содержимого в html-формате.
  • · page content – используйте данный способ, если во всплывающем окне вы собираетесь использовать материал с определенной страницы своего блога. Разметка и форматирование при этом не переносятся.

Настройка визуальных эффектов Visual Effects Settings

Background Opacity – указывается непрозрачность заднего плана (число от ноля до единицы).

Popup Height – высота (в пикселях) всплывающего окна.

Popup Width – соответственно ширина.

Popup Delay – через какое время показывать всплывающее окно, задается в миллисекундах.

Popup Speed – скорость появления окна.

Close Popup when clicking on the background – нужно ли закрывать окно, если пользователь кликнул за его пределами.

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

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

Итак, сегодня мы представим вам список бесплатных плагинов 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, которые могут сделать лучше этих, не стесняйтесь делиться ими с нами.

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

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

Через такие всплывающие окна, эффект отдачи очень велик. Говорят, иногда бывает такое, что число подписчиков увеличивается в 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 в модальном окне. То есть при клике по ссылке «напишите нам» вместо перехода на соответствующую страницу пользователю должно открываться новое всплывающее окно, где и будет находится функция отправки сообщения. Это более интерактивное решение, хотя далеко не всем оно нравится. Я лично предпочитаю классическую реализацию со страницей контактов, однако формы на сайтах бывают разные — поэтому полезно будет рассмотреть решение данной задачи. В работе использовал 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 кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.