(Последнее обновление: 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. Это плагин переведен примерно, на 75%, но этого вполне достаточно для того, чтобы начать им пользоваться.

Прежде чем, рассказывать как им пользоваться хочу сказать несколько слов о том, кому он может пригодится:

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

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

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

Всплывающее окно wordpress – плагин на русском языке.

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

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

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

После того, как мы посмотрели раздел “Обзор”, рекомендую перейти в пункт “Настройки”:

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

Естественно, после того, как Вы внесли какие-то изменения обязательно нужно нажать кнопку “Сохранить”, которая находится над меню.

Следующий раздел всплывающего окна для wordpress – это “Показать все PopUP”:

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

И, наконец, самое интересное окно – “Добавить новый PopUp”:

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

Всплывающее окно wordpress – главные настройки.

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

Следующий раздел:

Дизайн всплывающего окна wordpress.

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

Здесь находятся специальные подразделы:

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

    • Тексты – в данной надстройке вы, собственно, пишите текст, который увидит человек, когда посетит ваш сайт.


    • Анимация открытия PopUp – здесь вы можете задать анимацию того, как ваш всплывающее окно wordpress будет появляться на мониторе у пользователя.

Подписчики всплывающего окна wordpress.

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

Логин/Регистрация всплывающего окна wordpress.

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

А/Б тестирования всплывающего окна wordpress.

И в этом случае данный раздел является платным:

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

На момент того, как я тестировал плагин и у меня не отображались показатели статистики, но на момент того, как я пишу эту статью плагин зафиксировал 3 показа окна.

CSS/HTML-код всплывающего окна wordpress.

В большинстве своем данный пункт редко кем используется. Проводить в нем изменения вы можете, если знаете языки CSS и HTML – в противном случае, я бы не рекомендовал вносить корректировки в код:

Я не стал “выпендриваться” и сделал стандартное всплывающее окно wordpress, вот как оно выглядит:

Надеюсь статья вам понравилась и вы захотите воспользоваться данным плагином для создания PopUP.

P.S. Во все необязательно покупать платную версию плагина, функционала бесплатной версии вполне себе достаточно.

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

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

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

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

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