WordPress popup

Learn to protect your WordPress site with our tutorial Backup Your WordPress Sites Manually and Easily.

As Hunter Boyle says, popups are like Just Bieber: “You either love ‘em, or hate ‘em, but lately you see ‘em everywhere – because they still pull in big crowds”.

Popups work… really, really, really well. I’ve yet to see a case study where optin popups decreased the site’s conversion rate, and I’ve seen countless case studies where popups catapulted CRO by as high as 300%.

If you’re not convinced, don’t take my word for it. Simply use one of these top popup plugins for WordPress. They are quick, easy, and several are completely free.

1. SumoMe ListBuilder

I started using SumoMe’s List Builder app because of the ridiculously easy-to-use free version. It’s literally the easiest plugin I’ve ever set up. Within 5 minutes, you have a basic, lightbox optin-popup on your website.

WordPress Popup Plugin - Sumome

It can collect emails and you can adjust where it displays on your website, as well as how often it displays. Upgrade to premium, and the popup becomes fully customizable, with access to numerous templates and data collection options.

List Builder Design

Best of all, the List Builder app is one of an entire suite of must-have marketing apps that are all included on the same SumoMe plugin.

2. Ninja Popups

Ninja popups is one of CodeCanyon’s top selling plugins of all time… and with good reason. This plugin allows you to custom build a variety of popups with different goals in mind, from email signups to video displays to social shares. In terms of sheer customizability, this is the most creative freedom you’ll find for just $20.

Ninja Popups

3. OptinMonster

OptinMonster was one of the first companies to popularize the use of premium optin popups for marketing purposes. They led the market for several years, and their popup plugin is still one of the best around today.

Optin Monster

OptinMonster’s primary selling point is its Exit-Intent Technology, a feature that recognizes when users are about to leave your page and allows you send in an optin popup at the optimized moment.

4. PopUp Domination

PopUp Domination is a great, mid-priced option that includes all the features you look for in an optin popup. It includes A/B testing and a wide variety of targeting options, and while many of the templates have a slightly dated look to them, the functionality is rock solid.

Popup Domination

5. Dreamgrow Scroll Triggered Box

This useful plugin is a great, free way to get a simple popup onto your website. It offers a single template with a variety of color options. The Dreamgrow Scroll Triggered Box is a fantastic example of a plugin that does only one thing, but does it very well.

Dreamgrow Scroll

6. Icegram

Icegram is a free popup plugin that offers a number of other marketing-focused functionalities as well. It’s one of the more feature-rich free options available and would be much higher on the list if it was a bit more user friendly. For those with a duck-tape approach to web design, Icegram is a great option for sneaking in a few premium features at no cost.


7. Pippity

For those who aren’t looking for the advanced customizability of something like Ninja Popups, but want more options than a one-trick pony, Pippity is a great option to consider. This plugin prides itself on being ridiculously easy to use, and while it’s price/feature ratio brings it down a bit on our list, it’s a useful option for those whose top priority is ease-of-use.


8. YITH Newsletter Popup

If you’re looking for a popup that takes up the entire screen, this plugin is another free, one-trick pony that will do just that. The spacing and styling only really work if you have a lot to say, but for those looking for a big, bold, in-your-face popup template, look no further.

Yith Newsletter


Many of your site’s visitors may never land on your pages again. You have one chance to convert them into a lead or capture them as part of your regular audience.

Popups allow you to stick a CTA front and center, demanding an action. If readers liked your content, they will be much more likely to give you their email when asked then to search your site for a sidebar subscription box.

These 8 popup plugins make utilizing popups on your website ridiculously easy.

But don’t take my word for it. Test them out and see for yourself.

The results may surprise you.

Learn to protect your WordPress site with our tutorial Backup Your WordPress Sites Manually and Easily.


Насколько эффективны плагины WordPress для всплывающих окон?

Почитайте подробнее о том,  зачем именно нужна база e-mail адресов. Да, собирать ее не всегда легко: кому-то всплывающие окна нравится, других же они раздражают. Одно точно – они эффективны, если их правильно применять. После их внедрения в разы повышается количество подписчиков и переходов по ссылкам.

Преимущества и недостатки всплывающих окон


  • Привлечение внимания. Первое, что вы видят посетители, когда попадают на сайт – это pop-up баннер. Он сразу привлекает внимание.
  • Повышение конверсии. Исследования показывают, что pop-up баннеры в 13 раз эффективнее обычных для увеличения количества подписчиков или просмотров.
  • Быстрая обратная связь. Можно добавить всплывающее окно на страницу часто задаваемых вопросов, чтобы пользователи быстрее могли связаться с вами.


  • Большой отток посетителей. Если всплывающие баннеры установлены неправильно, то они будут только раздражать пользователей. Например, если баннер занимает весь экран или трудно найти кнопку, чтобы закрыть его, то гораздо проще уйти с сайта и поискать информацию в другом месте.
  • Спам. Сайты с множеством всплывающих окон сразу зачисляются в категорию «спама» в умах посетителей. Это, как вы понимаете, негативно влияет на репутацию компании в целом.
  • Блокировщики pop-up баннеров. Продвинутые пользователи интернета часто устанавливают в браузерах специальные программы, которые блокируют показ всплывающих окон. Соответственно снижается эффективность рекламы.

3 способа настройки всплывающих окон

Способ 1. По времени. Pop-up окно появляется, если пользователь провел заданное количество времени на сайте. Как только он осмотрелся и понял, насколько ему интересен контент, ему можно показать рекламу или предложить подписку.

Способ 2. По поведению. Всплывающие окна появляются при конкретных условиях. Например, пользователь уже посмотрел 3 страницы сайта, пролистал 66% текста на странице или перешел на специальную страницу.

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

Как создать эффективные всплывающие окна?

Чтобы взаимодействие с пользователями через pop-up окна было эффективным, необходимо постоянно тестировать тексты, дизайн и формат представления баннеров.

Вот некоторые важные элементы:

  • Текст заголовка. Простая и понятная формулировка всегда хорошо работает. Попробуйте несколько разных вариантов заголовков, чтобы понять, какой из них привлекает больше пользователей.
  • Дизайн заголовка. Как только вы нашли хороший заголовок, протестируйте несколько вариантов его дизайна (шрифты, цвета, размер). Он должен легко считываться.
  • Дизайн блока и изображений. Найдите, какие цвета, размеры и пропорции, формат блока лучше всего работает на вашем сайте. Часто бывает, что просто добавив картинку в блок, конверсия подписчиков резко увеличивается.

  • Поля формы. Попробуйте разные шрифты и расположение описаний (внутри поля, сверху поля или слева). Обязательно за тем, чтобы они отображались корректно на любом экране.
  • Кнопка выхода. Должна быть на всплывающем окне и кнопка отказа «Нет, спасибо» или что-то подобное. Проконтролируйте, могут ли пользователи закрыть баннер, просто кликнув на основную страницу сайта.
  • Основной текст. Вам просто необходимо описать преимущества и особенности подписки. Не надейтесь, что пользователи поймут ваши мысли инстинктивно. Один из наших тестов показал, что удалив полностью описание с баннера, конверсия упала на 100%.
  • Текст для призыва к действию. Протестируйте разные варианты кнопок. Вместо обычной «Отправить», например, посмотрите, как сработает «Получите бесплатный отчет», «Загрузите сейчас» или «Подпишите меня на рассылку».
  • Дизайн кнопки действия. Можно попробовать кнопки, разные по форме, размеру, цвету, чтобы определить самый кликабельный вариант.

Лучшие плагины WordPress для всплывающих окон

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

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

ITRO Popup Plugin



ITRO Popup Plugin позволяет создать сообщения, используя визуальный редактор Вордпресса. Симпатичные баннеры достаточно легко создавать и редактировать их дизайн. Также можно встроить изображения, тэги для заголовков, видео с YouTube.

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

YITH Newsletter Popup



YITH Newsletter Popup позволяет настроить всплывающий баннер в виде формы подписки. Он очень прост в установке и настройке. У него всего две страницы. Одна – для общих настроек, вторая – для редактирования дизайна.

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

WordPress PopUp

Бесплатный / 19 долл.


С помощью плагина WordPress PopUp в визуальном редакторе WordPress можно создавать уникальные баннеры. Легко добавить формы и изображения. Можно выбрать, когда и как появляется всплывающее окно  по одному из девяти параметров. Например, окно видят только пользователи, которые никогда не оставляли комментариев на сайте, или только те, кто пришел на сайт через поисковики. Также можно настроить, что pop-up баннер не будет показываться тем пользователям, которые его уже видели несколько раз.

Размеры, местоположение и цвета можно менять. Также можно настроить, через сколько секунд он будет появляться. Платная версия плагина позволяет настроить показ по отдельным регионам.


Бесплатный / 47 долл


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

Ninja Popups

18 долл.


Плагины WordPress для всплывающих окон, в том числе и Ninja Popups поддерживается большинством почтовых сервисов. Все шаблоны выглядят профессионально, цветовые схемы можно настроить в соответствии со стилем сайта. Pop-up окна могут появляться на главной странице, внутри постов, отдельных страниц или категорий. Также можно настроить показ, когда пользователь уходит с сайта.

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


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

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

1. Установите и активируйте плагин Popup Maker.

Как создать всплывающее (модальное) окно в WordPress

2. После активации плагина перейдите в Pupup Maker -> Add New.

Как создать всплывающее (модальное) окно в WordPress

3.  В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:

Как создать всплывающее (модальное) окно в WordPress

  • 1) Указываем название модального окна. Это название пользователю видно не будет.
  • 2) Заглавие модального окна.
  • 3) Отмечаем галочкой страницы, на которых будем использовать всплывающее окно. Если указываем «On Entrie Site» — модальное окно можно использовать на всех страницах и записях сайта.
  • 4) Наполнение всплывающего окна. Сюда пишем текст, вставляем изображения и т.п. В общем, делаем наполнение по желанию. В нашем примере я вставил фрейм видеозаписи с youtube.
  • 5) Указываем размер модального окна. Размер можно указать как в процентах, так и в пикселях. Значение «Auto» — автоматически подбирает размер модального окна. В случае добавления видеозаписи это лучший вариант.

Как создать всплывающее (модальное) окно в WordPress

  • 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
  • 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
  • 8) Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
  • 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
  • 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.

Как создать всплывающее (модальное) окно в WordPress

  • 11) Настройки закрытия модального окна. Click Overlay to Close — закрытие модального окна при нажатии мимо него. Press ESC to Close — закрытие модального окна клавишей Esc. Press F4 to Close — закрытие клавишей F4. Я отмечаю все пункты, дабы не злить пользователей сайта и упростить возможность закрытия всплывающего окна ?
  • 12) Настройки автоматического открытия модального окна. В нашем примере его использовать не будем.

4. После того как мы выполнили настройки, нажимаем кнопку «Опубликовать». Таким образом мы создали всплывающее (модальное) окно.

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

После создания всплывающего окна можно настроить его внешний вид. Для этого переходим в Popup Maker -> Theme.

Как создать всплывающее (модальное) окно в WordPress

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

Такие настройки индивидуальны, и говорить о них я не вижу смысла. Если будут вопросы — задавайте в комментариях.


Best free WordPress popup plugins

There are plenty of WordPress popup plugins in the WordPress directory. So, making a list of the best quality ones is not an easy task. We went through user reviews, descriptions, demos, and tested many such WordPress popup plugins to bring out the best free titles for you. Let’s get introduced with them.

Popup Maker

WordPress popup pluginsPopup Maker is one of the best free WordPress popup plugins in the WordPress directory. It is superbly flexible. You can create any type of modal or content overlay for your WordPress site with Popup Maker. The plugin has limitless potential with no hidden restrictions. There are so many features including Slide Outs, Banner Bars, Floating Stickies, Notifications, Loading Screens, Video Lightboxes, Opt-In Forms etc. You can do anything that a popup plugin can do. You can use the unique popup editor to build the subject. All of the popups created with Popup Maker is fully responsive.

Popup Builder- Responsive WordPress Popup

WordPress popup pluginsA plugin that has 50000+ active installs and around 400 5-star ratings is supposed to be one of the useful ones. Popup Builder is very powerful, and yet, easy to use popup plugin that can help you grab your visitors’ attention. You can introduce your offers, discounts or another kind of promotional notices to your website visitors. You can also create and manage powerful promotion modal popups for your WordPress blog or website. There is an effective settings panel for each popup. So, you can customize the popup themes, colors, sizes and many other options.

Better Coupon box by Beeketing

Wordpress popupNot one of the oldest and most popular popup plugins known so far in the WP community, Better Coupon Box – built in the great Beeketing for WooCommerce plugin – is an innovative popup tool totally worth trying, especially for WooCommerce store owners. Better Coupon Box allows store owners to welcome new visitors with a beautifully designed popup, which offers them a discount code on the first purchase if they subscribe email or follow social channels. The aim is to convert visitors into email subscribers, social followers, and motivate them to start buying. (If you run non-eCommerce sites, you can use Better Coupon Box to curate simple non-coupon email popups as well)

Popups by OptinMonster

WordPress popup pluginsOptinMonster has an easy to use form builder that allows you to create beautiful opt-in forms that are proven to convert. You can create different types of opt-ins including WordPress popup forms, floating header and footer bars, slide-ins also known as scroll triggered boxes, sidebar forms, after post forms, in-line forms, mobile-specific forms, welcome gates and more. OptinMonster allows you to build high converting opt-in forms in minutes. You can choose from 8 different types of opt-ins including popup forms, floating bars, slide-ins, sidebar forms, after-post forms, in-line forms, mobile-only popup forms, and canvas.

ITRO Popup Plugin

WordPress popup pluginsITRO Popup Plugin is one of the most useful WordPress popup plugins available today. Over 20000 active installs and a good number of 5-star ratings, this plugin is ahead of others. It is a very lightweight plugin for WordPress. The plugin has a user-friendly interface, which allows WordPress users to easily modify all settings needed for a popup. You can set things up without writing any single line of code.


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

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

Через такие всплывающие окна, эффект отдачи очень велик. Говорят, иногда бывает такое, что число подписчиков увеличивается в 4 раза. Круто! Не правда ли? Использование всплывающих окон (попандеров) — очень эффективный способ привлечь огромное число посетителей. Обычно их используют для:

  • новостной рассылки;
  • пиара платных обучающих курсов;
  • раскрутки групп в соц. сетях;

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

Но! Все эти проблемы, можно обойти, если всплывающее окно настроить правильно.

Итак, давайте лучше вернемся к нашему главному вопросу.

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

1. WP-MK

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

  • Рекламы (например, Google Adsense);
  • Пиара своих групп в соц. сетях;
  • Простой формы подписки.

Скачать плагин можно по этой ссылке. Потом устанавливаем его и активируем обычным способом. Переходим слева в настройки ? всплывающее окошко и видим следующее:


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

2. Ninja Popups.


Если вы хотите, чтобы пользователи, заходя на ваш сайт, увидев всплывающее окно, кричали «Ухты», установите себе этот мега крутой плагин. Ninja Popups — монстр всплывающих окон на WordPress. Если сравнивать с WP-MK, то он сильно обходит его по функционалу. Я заметил, что Ninja Popups пользуются мастера своего дела. Почему? Плагин платный и не все могут позволить его себе. От себя могу сказать, что цены у них приемлемы, много не просят. Подробно о стоимости, можно узнать здесь.

Ну, давайте узнаем, что именно мы получим от этого плагина:

  • простота в настройках;
  • более 100 готовых шаблонов для подписки и других видов рекламы (конкурсы, акции, обучающие курсы и т.п.);
  • статистика;
  • мобильную версию всплывающего окна;
  • расширенная настройка времени показов;
  • и много другое.

Если хотите узнать обо всех преимуществах плагина, перейдите по этой ссылке.

Как настроить плагин под себя? Я предлагаю следующее… Вместо настырного текста, лучше посмотреть обучающее видео:

Вот и все друзья, что касается настроек. Но все же, если возникнут вопросы, задайте их в комментариях.


3. Popup Maker (модальное окно)


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

  • ссылку;
  • кнопку;
  • картинку.

Итак, как его настроить?


1. Скачиваем плагин;

2. Устанавливаем и активируем;

3. Слева в меню ищем: Pupup Maker -> Добавить новое.


4. Перед нами покажется страница, такого вида:

Всплывающие окна на WordPress. Обзор лучших плагинов

Ничего не напоминает? Страница вплоть аналогична форме публикаций статей на WordPress. Как видите, здесь добавились некие дополнительные функции (настройки).

Давайте разберем их более подробно.

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

Укажите здесь заголовок окна — пишем название (например: подписка на новости).

Условия таргетинга — отмечаем галочкой, где будет отображаться наше окно.

Настройки темы — пока здесь нет вариантов. Выбираем по умолчанию. Друзья, в дальнейшем вы можете создать свой шаблон для оформления модального окна. Кстати, функция очень крутая. Найти ее можно: Pupup Maker -> Все темы.

Код — что будет отображаться в окне. В нашем случае видео с YouTube:


Внизу, нас ждут и другие настройки (размер окна, прозрачность, время показа и т.д.). Ничего сложного там нету. Надеюсь, справитесь. Если у вас будут возникать вопросы — смело задавайте их в комментариях.

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

Но это друзья еще не все. Переходим в раздел Pupup Maker -> Все всплывающие окна. Ищем CSS Classes. Нас интересует код, такого вида: popmake-xxx.

Этот код нам нужен для, отображения окна при нажатии по ссылке, картинке или кнопке (говорил вначале).


Открытие окна по ссылке:

Открытие окна при нажатии на картинку:

Открытие при нажатии на кнопку:


Такой код можно вставлять где угодно (например, в статье или виджете). Разницы нет. Если будут возникать проблемы или вопросы — задавайте в комментариях, буду рад помочь.


Как в WordPress создать модальное (всплывающее) окно

Здравствуйте, друзья! Предлагаю поговорить о создании в WordPress модальных окон. Всплывающие (модальные) окна ощутимо расширяют возможности сайта. У вас есть сообщение или объявление, которое должен увидеть каждый посетитель вебресурса? Нужно сделать заметной проводимую акцию? Хотите сделать всплывающую форму регистрации на сайте или форму расшаривания контента в социальных сетях? Создайте модальное окно!

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

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

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

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

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

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

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

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


Назначение и основные функции всплывающих окон

Popup-формы и окна — замечательный маркетинговый инструмент, способный работать на повышение конверсии как отдельной страницы личного блога, так и специализированного коммерческого сайта. Страницы с хорошо продуманными и качественно реализованными всплывающими окнами, согласно исследованиям, конвертируются в 13 раз эффективнее обычных. И это повод не только добавить окна popup на сайт, но и разобраться с инструментами для их создания.

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

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

  • проведение опросов;
  • получение быстрой обратной связи;
  • уведомление посетителей о предстоящих событиях и промоакциях;
  • получение репостов и лайков в социальных сетях;
  • увеличение количества подписчиков.

Как правило, любой современный плагин всплывающего окна WordPress отличается возможностями тонкой настройки по времени (появляется через заданное количество проведенного на сайте времени) и по поведению (появляется после просмотра определенного объема текста, перехода на другие страницы, выхода с сайта).

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

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

Бесплатные popup-окна WordPress

В репозитории WordPress можно найти множество popup-плагинов, новых и развиваемых создателями в течение нескольких лет. Устанавливаются они на блог или сайт стандартным образом: меню консоли Плагины — Добавить новый, Поиск по названию, кнопки Установить и Активировать. Практически все представленные плагины имеют премиум-версию, значительно расширяющую функционал. Рассмотрим наиболее популярные из них.

Popup Maker — Popup Forms, Optins & More

Popup Maker WordPress

Popup Maker — WordPress-плагин с огромным количеством настроек и безграничным потенциалом для создания любых типов окон popup на сайт. Русифицирован частично, но в достаточной мере для того, чтобы в нем можно было работать русскоязычным пользователям: основные пункты меню переведены, есть возможность вручную заменить служебные сообщения, показываемые посетителю, их переводом.

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

Плагин WordPress Popup: настройка

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

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

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

Popup Builder — Responsive WordPress Pop up

Popup Builder WordPress

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

Popup окна WordPress с помощью плагина

Плагин предлагает создание 12-ти типов всплывающих окон в PRO-версии (скриншот выше) и 6 тем визуального оформления. В бесплатной модификации возможностей существенно меньше, но их достаточно для того, чтобы сконструировать привлекательный баннер с информацией для посетителя: можно добавлять изображения, кнопки подписки на Facebook-аккаунт, шорткоды, редактировать HTML-код.

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

Содержимое popup-окна компонуется в визуальном или HTML-редакторе, идентичном стандартному редактору WordPress.

Popup by Supsystic

Плагин Popup by Supsystic

Popup-плагин от Supsystic поможет делать специальные предложения, продвигать услуги и продукты, получать подписчиков на рассылку. С одним из более чем 60-ти предоставляемых бесплатно шаблонов 18-ти типов легко создать лайтбокс для показа посетителям сайта с любой необходимой информацией. Во всплывающем окне можно разместить уведомления для посетителей, видео, Google-карты, подписку на аккаунт в Facebook, форму подписки на рассылку, форму контактов или проверки возраста.

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

Popup by Supsystic: всплывающие баннеры для сайта

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

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

Можно в реальном времени отслеживать статистику по добавленным всплывающим окнам. В PRO-версии плагина есть блок настроек A/B тестирования. Базовые навыки по созданию popup-окна поможет получить видео-руководство, интегрированное в настройки плагина.

Плагины независимых разработчиков

Без упоминания этих альтернативных профессиональных решений обзор popup-плагинов для WordPress был бы неполным. В рассматриваемых ниже премиум-плагинах все, за что в большинстве случаев придется доплачивать пользователю плагина из репозитория (причем, доплачивать за каждую дополнительную опцию), уже включено в функционал. При этом стоимость таких инструментов весьма демократична и составляет 24-25 долларов.

Ninja Popups

Плагин Ninja Popups for WordPress

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

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

Ninja Popups работает со всеми популярными сервисами e-mail маркетинга (их в списке несколько десятков). Присутствует собственная аналитика и функционал A/B тестирования всплывающих окон и слайдеров.

Ninja Popups for WordPress: всплывающие окна

Для реализации уже имеющихся дизайн-макетов popup-окон в плагин включен продвинутый визуальный конструктор с предпросмотром вносимых изменений, позволяющий перетаскивать в макет будущего окна любые необходимые элементы (изображения, видео, блоки с текстом и HTML-кодом, списки, поля ввода данных и скрытые поля, карты, кнопки, чекбоксы, защиту от спама reCaptcha и др.). Интерфейс англоязычный, но достаточно простой и понятный.

Master Popups

Всплывающее окно Вордпресс: плагин Master Popups

Мощнейший инструмент для создания всего разнообразия видов всплывающих окон. Есть полсотни различных готовых шаблонов, которые можно редактировать. Присутствует возможность использования собственного CSS-кода, JavaScript и Cookie. В расширенных настройках можно выбрать, какие действия будут выполняться после открытия/закрытия окна и отправки формы, при бездействии пользователя, при решении покинуть страницу.

Всплывающие баннеры для сайта: плагин Master Popups

Плагин Master Popups обладает отличным визуальным редактором с интуитивно понятным интерфейсом и полным набором базовых элементов и форм для построения макета. Размеры всплывающих уведомлений, параметры цвета и прозрачности, эффекты анимации, настройки границ, параметры наложения и фона, шрифты — все это редактируется несколькими движениями. Предусмотрена замена выводимых плагином англоязычных сообщений для пользователей на собственные — эти данные прописываются вручную на отдельной странице настроек. Есть функция экспорта созданных баннеров для использования на других сайтах.

Этот плагин можно назвать достойным конкурентом не только упомянутому выше Ninja Popups, но и любому решению из официального репозитория WordPress.


Для чего нужны попап окна

Причин много, перечислю основные:

  1. Чтобы задержать клиента на сайте.
  2. Сообщение про акции и предложения.
  3. Наращивание подписной базы с помощью формы подписки, актуально для блогов.
  4. Реклама платных курсов.
  5. Сбор подписчиков в социальные группы.

Проще говоря для бизнеса. Яндекс не очень любит их, осторожнее. Далее разберем четыре плагина всплывающих окон.

Ninja popups

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

Что может данный плагин:

  • Адаптивная форма, вам не надо править код и подгонять под мобильные устройства.
  • Сбор статистики.
  • Шаблон оформлений не один, а целых сто.
  • Тонкая настройка времени показов, то есть окно не будет надоедать посетителям по разным критериям.
  • Функция появления при закрытии страницы.

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

Popup maker представляет плагин всплывающего окна wordpress распространяется бесплатно и он частично на русском. Чтобы он работал применяются четыре элемента:

  1. Ссылка.
  2. Кнопка.
  3. Картинка
  4. Появление через некотоое время.

Настройка плагина

Wordpress popupПерейдем к настройкам, плагин можете скачать стандартно через поиск из админки, либо отсюда. Активируем и находим слева раздел “popup maker”. На новых версиях в самом начале будет предложение на установку еще одного плагина, нажмите кнопку “skip”, чтобы пропустить. Чтобы добавить новый попап нажимаем на “add popup”.

Разберем сначала шапку и боковую панель. Видим два поля.

Wordpress popup

  1. Название формы, его не будет на блоге.
  2. Заголовок окна, это поле выведет крупными буквами заголовок всплывающего окна на блоге.

Теперь боковая панель:

  1. Conditions, здесь выбираем разделы и элементы в которых будет действовать попап.Wordpress popup
  2. Analytics, ставим галочку если хотим чтобы собиралась статистика при клике.Wordpress popup
  3. Выбираем щаблон оформления.Wordpress popup

Дальше пишем элемент, я сделал ссылку (можно видео или просто текст) на свой блог.

Wordpress popup

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

Wordpress popup

  1. Всплывающее окно по клику.
  2. Автоматическое, то есть через определенное время.

Разберем автоматическое, нажимаем и смотрим на форму настройки.

Wordpress popup

  1. Выставляем время, после которого появится попап.
  2. Добавляем.

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

Wordpress popup

Я для примера выставил 1 месяц, и нажал add.

Wordpress popup

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

Wordpress popup

Теперь надо посмотреть работу плагина, переходим на сайт и ждем автоматического появления.

Wordpress popup

Для того чтобы попап появлялся при нажатии, надо выставить в самом начале не Auto Open, а Click Open. Далее переходим в all popups и смотрим на класс.

Wordpress popup

В моем случае popmake-40, и надо этот класс привязать к элементу. Я сделал запись и написал ссылку, перешел в режим текст и там добавил этот класс. Можете прописать даже код формы обратной связи.

Wordpress popup

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

Плагин Popups – WordPress Popup

Для начала поставим WordPress Popup, найти его можно чрез стандартный поиск в вордпрессе, либо скачать по этой ссылке. Плагин условно бесплатный и на русском (цена 13 долларов). Находим раздел Popups, там уже есть одна стандартная форма, включим и отредактируем.Wordpress popup


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

Wordpress popup

После предложения купить премиум версию идут настройки шорткодов соцсети, можете вставлять их по вашему усмотрению, в редакторе показано как правильно пользоваться.

Wordpress popup

Дальше идет раздел Popup Appearance в нем настраиваем общий внешний вид формы, так же есть функция добавления своего css кода.

Wordpress popup

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

Wordpress popup

И в конце идут опции, все я описывать не буду, они понятны, расскажу лишь про три главные.

Wordpress popup

  1. Через какое время после открытия страницы будет появляться всплывающее окно.
  2. Правило куки, здесь надо указать число дней, когда ему окно покажется снова, ЕСЛИ он сделал какое либо действие, например нажал на ссылку.
  3. Правило куки, указываем число дней когда посетителю вновь покажут окно, ЕСЛИ он просто его закрыл.

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


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.