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

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

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

Создавайте эффективные всплывающие окна для WordPress!

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

Данные плагины совсем простые, без сложных настроек и почти не создающий дополнительную нагрузку на ваш блог/сайт. И так читайте - Как сделать всплывающее окно в WordPress?

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

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

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

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

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

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

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

Далее, на вкладке Display Options:

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

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

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

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

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

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

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

Contact Form 7 в всплывающем окне

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

Нажмите кнопку Опубликовать (Publish) и вам остаётся только разместить код (про класс не забывайте) в нужном вам месте (в сайдбаре, в сообщениях, в футере блога, в меню). Пример, кнопка Написать автору после сообщения:

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

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

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

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

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

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

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

Popup Maker - всплывающие формы, подписки и многое другое. Все, что вам нужно для создания уникальных всплывающих окон WordPress. Плагин всплывающее окно для ВордПресс предлагает довольно щедрую бесплатную версию. И поэтому у него более 6 325 238 активных установок.

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

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

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

С помощью Popup Maker вы можете создавать такие всплывающие окна:

• Лайтбоксы для видео, 
• Всплывающие окна с подпиской на электронную почту,
• Всплывающие окна для приветствия посетителей,
• Всплывающие окна контактной формы,
• Объявления о коронавирусе / COVID-19,
• Уведомления о файлах cookie ЕС,
• Создавайте всплывающие окна WooCommerce,
• И многое, многое другое.

Легко создавайте уведомления о файлах cookie, всплывающие окна (лайтбоксы) с видео, модальные формы (Ninja Forms, Gravity Forms, Contact Form 7 (CF7), Caldera Forms, WPForms, Mailchimp для WordPress (MC4WP) и многое другое).

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

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

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