Окна PopUP для WordPress плагином

Всем привет!

Если обратиться к помощи Википедии, то можно узнать, что всплывающим окном (англ. pop-up) называется окно, открываемое на экране компьютера в результате выполнения какой-либо операции. В данной статье мы рассмотрим вопрос создания всплывающих окон PopUP для WordPress.

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

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

Плагин WordPress PopUp для создания всплывающих окон

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

Находим его через форму поиска и нажимаем Установить:

Создание всплывающих окон (PopUP) для WordPress плагином

Далее активируем плагин:

Создание всплывающих окон (PopUP) для WordPress плагином

В меню админки станет доступен новый пункт PopUp:

Создание всплывающих окон (PopUP) для WordPress плагином

В данном пункте доступны настройки плагина и управление его функционалом. Рассмотрим все перечисленное подробнее.

В подпункте PopUps пункта PopUp доступны все существующие всплывающие окна и управление ими. Так как пока ни одного окна не создано, пункт пустой:

Создание всплывающих окон (PopUP) для WordPress плагином

Исправим данное положение дел и создадим наше первое всплывающее окно, для этого идем в подпункт Add New и нажимаем одноименную кнопку:

Создание всплывающих окон (PopUP) для WordPress плагином

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

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

Данный идентификатор прописывается в графе PopUp Name (not displayed on the PopUp), и, как не сложно догадаться из названия данной графы при переводе на русский язык, в самом всплывающем окне не отображается:

Создание всплывающих окон (PopUP) для WordPress плагином

Далее по желанию можно прописать (не обязательно) заголовок и подзаголовок окна соответственно в графах Heading (optional) и Subheading (optional):

Создание всплывающих окон (PopUP) для WordPress плагином

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

Чуть ниже, в области под названием Main PopUp Content нужно разместить основное содержимое нашего всплывающего окна. Так как я решил разместить в данном окне форму подписки, то в данной области в режиме текстового редактора я прописываю именно код формы подписки:

Создание всплывающих окон (PopUP) для WordPress плагином

Здесь же, чуть правее, в разделе PopUp Feature Image (optional) можно реализовать вставку во всплывающее окно каких-либо изображений:

Создание всплывающих окон (PopUP) для WordPress плагином

Я изображение вставлять не буду.

Чуть ниже, в разделе Call To Action Button (optional) предоставляется возможность добавления в создаваемое окно кнопки с призывом к какому-либо действию:

Создание всплывающих окон (PopUP) для WordPress плагином

Сделать подобную кнопку крайне просто — нужно прописать название кнопки в графе Button Label, а в графе Button Link разместить ссылку, активирующую требуемое действие.

Осталось определить некоторые параметры создаваемого PopUp окна. Рассмотрим их подробнее.

Настройка параметров всплывающих окон

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

Начнем по порядку с раздела Appearance:

Создание всплывающих окон (PopUP) для WordPress плагином

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

Из доступных для бесплатной версии плагина здесь есть лишь чекбокс No rounded corners, галочка в котором активирует прямые, а не скругленные, как по умолчанию, углы настраиваемого окна, а также возможность ручного определения размеров настраиваемого окна в пункте Use custom size (галочка в соответствующем чекбоксе дает возможность прописать ширину и высоту окна в пикселах).

Теперь рассмотрим раздел Behavior, настройки в котором определяют поведение всплывающего окна:

Создание всплывающих окон (PopUP) для WordPress плагином

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

  • When to show the PopUp: — время (в секундах или минутах по выбору) с момента открытия страницы сайта до появления всплывающего окна;
  • «Never see this message again» settings: — настройки, позволяющие посетителю нажатием специальной кнопки запретить показ всплывающего окна в дальнейшем при открытии страниц данного ресурса. Здесь доступен лишь чекбокс Add «Never see this message again» link, галочка в котором активирует появление ссылки с анкором Never see this message again, переход по которой блокирует в дальнейшем показ данному пользователю всплывающего окна на страницах данного ресурса.

Переходим к рассмотрению раздела настроек Displaying Conditions (optional), отвечающего за условия отображения настраиваемого всплывающего окна:

Создание всплывающих окон (PopUP) для WordPress плагином

Здесь присутствует значительное количество пунктов, разберем их по порядку:

  • Visitor is logged in — отображение всплывающего окна пользователям, прошедшим аутентификацию на сайте (при условии наличия такой возможности);
  • Visitor is not logged in — отображение всплывающего окна не аутентифицированным на сайте пользователям;
  • PopUp shown less than — отображение всплывающего окна до тех пор, пока пользователь не увидит его определенное количество раз (задается в графе Display PopUp this often:);
  • Only on mobile devices — отображение всплывающего окна только для посетителей с мобильных устройств;
  • Not on mobile devices — отображение всплывающего окна только для посетителей с компьютера или ноутбука (не с мобильных устройств);
  • From a specific referrer — отображение всплывающего окна в том случае, если пользователь пришел с помощью специального реферера (рефереры задаются здесь же);
  • Not from a specific referrer — скрытие всплывающего окна в том случае, если пользователь пришел с помощью специального реферера (рефереры задаются здесь же);
  • Not from an internal link — всплывающее окно не будет отображаться в том случае, если пользователь пришел по внутренней ссылке с другой страницы этого же ресурса;
  • From a search engine — отображение всплывающего окна для посетителей, перешедших на сайт с поисковых систем;
  • On specific URL — отображение всплывающего окна для посетителей, находящихся на определенных URL, перечень которых задается здесь же в графе Full URLs;
  • Not on specific URL — отображение всплывающего окна для посетителей, за исключением находящихся на определенных URL, перечень которых задается здесь же в графе Full URLs;
  • Visitor has commented before — отображение всплывающего окна пользователям, оставлявшим комментарии на сайте. Данное условие можно объединить с условием Visitor is logged in или Visitor is not logged in;
  • Visitor has never commented — отображение всплывающего окна пользователям, не оставлявшим комментариев на сайте. Данное условие можно объединить с условием Visitor is logged in или Visitor is not logged in.

Все настройки, доступные для бесплатной версии плагина, мы рассмотрели, теперь кратко пробежимся по настройкам, доступным только для платной версии плагина WordPress PopUp:

  • Раздел Appearance настроек — выбор цветовой гаммы настраиваемого окна (пункт Use custom colors), а также выбор анимационных эффектов при появлении (пункт PopUp display animation) и исчезании (пункт PopUp closing animation) настраиваемого окна;
  • Раздел Behavior настроек — некоторые условия появления всплывающего окна (пункт When to show the PopUp:); функция запрета закрытия окна при щелчке на любой области экрана, кроме самого всплывающего окна (пункт Closing Pop-up conditions); функция, позволяющая использовать кнопку закрытия окна как сигнал к дальнейшему запрету показа всплывающего окна для конкретного пользователя (пункт «Never see this message again» settings:); настройки поведение окна (пункт Form submit), содержащего какую-либо форму (контактную форму, форму подписки и т.д.)
  • Раздел Custom CSS настроек — определение CSS стилей оформления настраиваемого окна:
    Создание всплывающих окон (PopUP) для WordPress плагином

Вот такие бонусы несет в себе платная версия рассматриваемого плагина, которая, к слову, предлагается за 19$.

Когда вы произвели все необходимые действия по созданию и настройке всплывающего окна, необходимо сохранить полученный результат (кнопка Save) и посмотреть, что получилось, используя предварительный просмотр (кнопка Preview PopUp):

Создание всплывающих окон (PopUP) для WordPress плагином

Если результат вас устраивает, то можно активировать всплывающее окно (ползунок Status перевести в положение Activ).

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

Создание всплывающих окон (PopUP) для WordPress плагином

Получился довольно объемный обзор плагина WordPress PopUp, позволяющего создавать всплывающие окна для интернет-ресурсов на базе CMS WordPress.

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

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

С уважением, Владимир Денисов!

Комментарии 10

  • Вот интересно, а как бы избавиться от таких окон (я имею ввиду со стороны пользователя) когда они надоедают на разных сайтах и блогах?

  • Вещь классная, но себе ставить не буду.Просто когда посетитель заходит на блог и ему сразу что-то бросается — может раздражать 😮

  • Да, вещь действительно интересная! Но и я себе на блог PopUP окно тоже ставить не планирую, по той же причине что и Артём… 🙂

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

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

  • Супер!!! Давно искал такой плагин. На мои ГС то самое!! CTR вырос с 0,5% до 5%, — в ДЕСЯТЬ раз! Тизерки бросил на ротацию и гребу бабло!

  • Добрый день.
    установил плагин,в explorer 11 идеально, а вот в хроме и opera окно выпадает слишком низко, подскажите где и как это можно регулировать (использую бесплатную версию).

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

  • И мне интересно, как его настроить, что окно появлялось при закрытии сайта?

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

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