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

Самостоятельно сделать форму окна и прописать скрипт его появления во время сеанса на сайте – это очень сложная работа для неподготовленного человека. Вам придется прежде перерыть много учебников по программированию и CSS, пока вы поймете как сделать модальное окно. Чтобы вам не пришлось проходить столь сложный путь обучения, в данной статье рассмотрены 6 наиболее удобных и популярных модулей для генерации всплывающего объявления.

Unlimited Pop-Ups – многопрофильный плагин для созданию всплывающего окна, и не только

Сразу стоит оговориться – Unlimited Pop-Ups бесплатно не распространяется – это платный плагин. Покупать его стоит только в том случае, если у вас есть хоть какой-то органический трафик на сайте. Тогда точно сможете окупить покупку.

С Unlimited Pop-Ups сможете создать не только модальное окно, но и подвижные виджеты на странице, бары и колонки. Вы можете нашпиговать сайт WordPress рекламой по уши, но везде нужно знать меру. Обычно одного всплывающего объявления достаточно – больше уже будет перебор. К тому же, Unlimited Pop-Ups позволяет брать посетителей не количеством рекламы, а ее качеством. Вы сможете создать модальное многоуровневое окно, которое можно будет листать.

Contact Form Pop-up – ненавязчивая всплывающая реклама на сайте за несколько минут

Разработчики Contact Form Pop-up внимательно прислушались ко всем претензиям поисковиков по поводу попапов, и создали инструмент, с которым можно сделать модальное окно, которое не будет мешать посетителям. Суть в том, что форма объявления не будет выскакивать сразу целиком. Появится лишь часть окна в угу экрана. Она полностью раскроется, только если пользователь сам того пожелает – нажмет на появившийся ярлык. Вот тогда-то модальное окно раскроется во всей своей красе.

Вариантов много, и вам лучше сразу определиться как использовать Contact Form Pop-up, ведь плагин платный.

Единственный минус Contact Form Pop-up – всплывающая форма может быть размещена только в правом нижнем углу сайта WordPress.

Advert Flap Pro – плагин для создания эффективных попапов

Данный инструмент рассчитан в большей мере на рекламное использование. Он позволяет создавать необычные миниатюрные окна. При помощи него сможете создать модальное объявление, которое не только не помешает пользователям, но и украсит дизайн сайта. Цвет фона и текст легко настраиваются. Кроме того, вы сможете настроить время показа всплывающего баннера. Форма может быть размещена только в правой верхней части сайта WordPress. Но это не просто прихоть разработчиков – в этом месте реклама показывает наилучшие показатели. Ведь все уже так привыкли, что модальное окно выскакивает где-то снизу, что окошко Advert Flap Pro обязательно привлечет к себе нужное внимание.

Promotions Plugin – оригинальный плагин WordPress, который преобразит рекламу на сайте

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

Ninja Kick Sliding Panel – модерн-плагин для создания современных попапов

Всплывающая форма потому опасна для сайта WordPress, что людям она уже надоела. Это как реклама по телевизору – вроде все смирились, но ужасно злятся. И с каждым последующим сайтом со сплывающими баннерами и рекламными видео у пользователя буквально закипает кровь. В итоге, он может не выдержать, и ваш сайт останется “крайним” – посетитель внесет его в черный список, и никогда не вернется.

Ninja Kick Sliding Panel вызвался исправить сложившуюся ситуацию. Данный плагин WordPress способен сделать так, чтобы форма не отталкивала, а наоборот нравилась пользователям. Модуль создает окна в современном “плоском” стиле, напоминающем минимализм в архитектуре – минимум пышности, максимум содержательности. С ним вы сможете сделать потрясающе эффективную рекламу, либо создать работающую форму подписки. Дополнение это платное, но в данном случае есть за что платить.

Ninja Popup – любимчик среди других плагинов для генерации попапов

Ninja Popup даст фору любому другому плагину. Он имеет практически все. Созданная всплывающая форма при помощи Ninja Popup обязательно начнет приносить вам деньги. Инструмент предоставляет готовую базу из 40+ стилей всплывающих окон. Вы сможете отредактировать любой из приведенных в каталоге стилей. Помимо рекламных баннеров, с Ninja Popup можно добавить форму верификации возраста, подписки, социального опроса, регистрации, призыва к покупке и многое другое. Но за такие возможности придется заплатить – данный инструмент один из самых дорогих среди остальных рассмотренных плагинов.

Выводы

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

(Последнее обновление: 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 модальных окон . Всплывающие (модальные) окна ощутимо расширяют возможности сайта. У вас есть сообщение или объявление, которое должен увидеть каждый посетитель вебресурса? Нужно сделать заметной проводимую акцию? Хотите сделать всплывающую форму регистрации на сайте или форму расшаривания контента в социальных сетях? Создайте модальное окно!

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

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

Алгоритм создания в WordPress модальных окон

В WordPress нет встроенных инструментов для работы со всплывающими окнами. Мы будем конструировать и настраивать их с помощью плагина Popup Maker . Давайте, например, создадим модальное окно с видео, всплывающее при клике по кнопке (позже можно будет настроить его автоматическое появление).

1. Установите плагин Popup Maker. Активируйте его. Напоминаю: устанавливать плагины мы учились .
   
2. Найдите в боковом меню слева админпанели раздел Popup Maker и перейдите в его подраздел Add Popup .
3. Открылся редактор модальных окон. Впишите название окна в поле вверху страницы (название будет отображаться только в админпанели – пользователи его не увидят).
4. Придумайте заголовок окна (будет виден пользователям) и впишите его в поле над кнопкой Добавить медиафайл .
5. В блоке Conditions выберите в выпадающем меню страницами (категории), на которых будет появляться окно. Если плагин должен работать на всех страницах сайта , выберите Формат:All .
6. Добавьте в большое поле под панелью инструментов текст, изображения, видео или аудио – любой контент, который будет показываться во всплывающем окне. В рассматриваемом примере я добавил код видео с YouTube (добавление видео на сайт WordPress мы изучали ).
   
7. В блоке Triggers находятся настройки ручного или автоматического открытия (самоактивации) всплывающего окна. В нашем примере я выбрал значение Click Open .
8. Укажите ниже размер всплывающего окна (в пикселах или процентах). При выборе варианта Auto плагин подберет размеры модального окна автоматически.
9. Отметьте чек-бокс в строке Отключить фон , чтобы за всплывающим окном была видна страница сайта (рекомендую).
10. Настройте тип и скорость анимации (не обязательно: по умолчанию уже выставлены оптимальные значения).
    
11. Настройте положение окна на экране. Изначально плагин позиционирует его по центру вверху.
12. Значение свойства z-index , установленное по умолчанию, обычно в изменении не нуждается.
    
13. Выберите варианты закрытия всплывающего окна. Отметьте «птичками» чек-боксы в строках Click Overlay to Close (окно закроется при клике на фон вокруг него), Press F4 to Close (окно закроется клавишей F4 ), Press ESC to Close (окно закроется клавишей ESC ). Чтобы не раздражать посетителей сайта головоломкой с закрытием модального окна, рекомендую отмечать все пункты.
    
14. Нажмите Опубликовать. Поздравляю, модальное окно создано!

О настройке дизайна всплывающего окна

Чтобы изменить дизайн созданного модального окна, перейдите в подраздел Theme раздела Popup Maker бокового меню админпанели (слева).

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

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

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

Каждому окну плагин Popup Make присваивает два уникальных CSS-класса . Если добавить к элементу вебстраницы любой из этих классов, то при клике по этому элементу откроется модальное окно.

Где и как сделать накрутку комментариев Instagram – все методы. Портал pricesmm.com выяснил, что дешевле и лучше: накрутить комментарии в Инстаграме самостоятельно, с программами, получить в обмен или заказать услугу на сервисе СММ. Плюсы и минусы каждого способа.

Примеры добавления CSS-кода модального окна в код ссылки, изображения и кнопки:

< a href = "#" class = > Открытьмодальноеокно< / a >

Модальное окно появится при клике по картинке

< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna" / >

Модальное окно активируется после нажатия кнопки

< button class = "popmake-obrazets-modalnogo-okna" > Открытьмодальноеокно< / button >

Нажмите на HTML-элемент после после добавления к нему CSS-класса popmake-obrazets-modalnogo-okna . Должно появиться похожее модальное окно:

Появилось? Отлично! Теперь вы умеете настраивать всплывающие окна. Если окно не открылось, опишите проблему в комментариях – запустим его сообща!

Недавно для одного сайта меня попросили сделать форму обратной связи для 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 кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.