Главная
Гаджеты
Как в WordPress создать всплывающее окно? Всплывающее окно wordpress – плагин на русском языке Модальные окна wordpress

Как в WordPress создать всплывающее окно? Всплывающее окно wordpress – плагин на русском языке Модальные окна wordpress

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

В данной статье мы рассмотрим вопрос создания всплывающих PopUP окон для WordPress.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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) , отвечающего за условия отображения настраиваемого всплывающего окна:

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

  • 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 :


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

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

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

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

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

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

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

Простое, адаптивное модальное окно с рядом самых необходимых настроек. Редактируется полное внешнее оформление, условия показа (даже по датам), запоминания куки, время всплытия, вставка видео, HTML кода, баннеров и прочее.

Открытие медиа-файлов в модальном окне при клике на веб-кнопку. Окно вставляется в запись через шорткод с определенными параметрами.

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

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

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

Самостоятельно сделать форму окна и прописать скрипт его появления во время сеанса на сайте – это очень сложная работа для неподготовленного человека. Вам придется прежде перерыть много учебников по программированию и CSS, пока вы поймете как сделать модальное окно. Чтобы вам не пришлось проходить столь сложный путь обучения, в данной статье рассмотрены 6 наиболее удобных и популярных модулей для генерации всплывающего объявления.

Unlimited Pop-Ups – многопрофильный плагин для созданию всплывающего окна, и не только

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

С Unlimited Pop-Ups сможете создать не только модальное окно, но и подвижные виджеты на странице, бары и колонки. Вы можете нашпиговать сайт WordPress рекламой по уши, но везде нужно знать меру. Обычно одного всплывающего объявления достаточно – больше уже будет перебор. К тому же, Unlimited Pop-Ups позволяет брать посетителей не количеством рекламы, а ее качеством. Вы сможете создать модальное многоуровневое окно, которое можно будет листать.

Contact Form Pop-up – ненавязчивая всплывающая реклама на сайте за несколько минут

Разработчики Contact Form Pop-up внимательно прислушались ко всем претензиям поисковиков по поводу попапов, и создали инструмент, с которым можно сделать модальное окно, которое не будет мешать посетителям. Суть в том, что форма объявления не будет выскакивать сразу целиком. Появится лишь часть окна в угу экрана. Она полностью раскроется, только если пользователь сам того пожелает – нажмет на появившийся ярлык. Вот тогда-то модальное окно раскроется во всей своей красе.

Вариантов много, и вам лучше сразу определиться как использовать Contact Form Pop-up, ведь плагин платный.

Единственный минус Contact Form Pop-up – всплывающая форма может быть размещена только в правом нижнем углу сайта WordPress.

Advert Flap Pro – плагин для создания эффективных попапов

Данный инструмент рассчитан в большей мере на рекламное использование. Он позволяет создавать необычные миниатюрные окна. При помощи него сможете создать модальное объявление, которое не только не помешает пользователям, но и украсит дизайн сайта. Цвет фона и текст легко настраиваются. Кроме того, вы сможете настроить время показа всплывающего баннера. Форма может быть размещена только в правой верхней части сайта WordPress. Но это не просто прихоть разработчиков – в этом месте реклама показывает наилучшие показатели. Ведь все уже так привыкли, что модальное окно выскакивает где-то снизу, что окошко Advert Flap Pro обязательно привлечет к себе нужное внимание.

Promotions Plugin – оригинальный плагин WordPress, который преобразит рекламу на сайте

Во многом этот инструмент похож на предыдущие. Модуль точно так же можно настраивать, меняя фон, содержание и тайминг показа окна. Но особенность его в более высокой конверсии, особенно, если использовать для подписок и продаж. Вы размещаете кнопку с призывом к действию (к примеру, “Подпишись”, “Зарегистрироваться”, “Купить” и т. д.), а после нажатия модальное окно открывается в другой части сайта. Такая форма появления окна слегка “взбудоражит” пользователя и привлечет его внимание к вашему предложению.

Ninja Kick Sliding Panel – модерн-плагин для создания современных попапов

Всплывающая форма потому опасна для сайта WordPress, что людям она уже надоела. Это как реклама по телевизору – вроде все смирились, но ужасно злятся. И с каждым последующим сайтом со сплывающими баннерами и рекламными видео у пользователя буквально закипает кровь. В итоге, он может не выдержать, и ваш сайт останется “крайним” – посетитель внесет его в черный список, и никогда не вернется.

Ninja Kick Sliding Panel вызвался исправить сложившуюся ситуацию. Данный плагин WordPress способен сделать так, чтобы форма не отталкивала, а наоборот нравилась пользователям. Модуль создает окна в современном “плоском” стиле, напоминающем минимализм в архитектуре – минимум пышности, максимум содержательности. С ним вы сможете сделать потрясающе эффективную рекламу, либо создать работающую форму подписки. Дополнение это платное, но в данном случае есть за что платить.

Ninja Popup – любимчик среди других плагинов для генерации попапов

Ninja Popup даст фору любому другому плагину. Он имеет практически все. Созданная всплывающая форма при помощи Ninja Popup обязательно начнет приносить вам деньги. Инструмент предоставляет готовую базу из 40+ стилей всплывающих окон. Вы сможете отредактировать любой из приведенных в каталоге стилей. Помимо рекламных баннеров, с Ninja Popup можно добавить форму верификации возраста, подписки, социального опроса, регистрации, призыва к покупке и многое другое. Но за такие возможности придется заплатить – данный инструмент один из самых дорогих среди остальных рассмотренных плагинов.

Выводы

Всплывающая форма на сайте WordPress принесет вам огромную пользу, если правильно ею воспользоваться. Старайтесь использовать попап для сторонней рекламы только в крайних случаях, если иных путей заработка нет. Лучшее, что вам может дать всплывающая форма – это новые подписчики и постоянные клиенты. Лучше зарабатывать с человека каждый месяц по 10 рублей за счет его постоянных посещений, чем единожды заработать 30 рублей за клик по навязчивой рекламе!

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

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

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

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

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

Разделы