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

Просмотров: 5 236

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

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

Как создать всплывающее окно для WordPress
Создайте красивые всплывающие окна в WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка написать автору Contact Form 7
Кнопка написать автору после сообщения

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

Контактная форма Contact Form 7 модальное окно
Форма для связи с автором в модальном окне

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

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

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

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

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

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

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

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

Popup Maker ™ - лучший плагин для всплывающих окон WordPress
Модуль Popup Maker для WordPress

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

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

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

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


5 комментариев к “Всплывающее окно для WordPress”

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

    Ответить
  2. Здравствуйте! Как код вывода сформированного модального окна можно вывести в стандартном меню wordpress? Т.е. при нажатии на кнопку «контакты» в горизонтальном меню вместо перехода на страницу «контакты» происходило всплытие модального окна.

    Ответить
  3. Доброго времени суток! Я сделала модальное окно для видео, но выводимое окно в высоту оказывается больше экрана, хотя я выбрала medium размер. после нажатия F12 все приходит в норму. Подскажите в чем может быть дело

    Ответить
    • Здравствуйте! Может нужно установить — авто. Если не получится, попробуйте плагин Popup Maker. 🙂

      Ответить
      • В итоге получилось сделать по-человечески, указав высоту у самого видео поменьше, чем та, которая автоматически была указана в шорткоде, чудеса))

        Ответить

Оставьте комментарий