То можно узнать, что всплывающим окном (англ. 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 всплывающие окна можно организовать с помощью плагина WP Super Popup. Он доступен и в бесплатной, и в платной версии. За последнюю разработчики просят 39,95$. Впрочем, для большинства проектов достаточно будет и бесплатной версии, о настройке которой мы поговорим в данной статье.
Установка и настройка WP Super Popup
Через «Плагины»→«Добавить новый» ищем и устанавливаем WP Super Popup (или скачиваем его с сайта разработчика http://wppluginspro.com/wp-super-popup-pro/), активируем. Далее переходим на вкладку «Super Popup», которая появилась в главном меню админки.
Здесь имеется три группы настроек:
- · Base Settings – базовые параметры;
- · Popup Content – настройки содержания всплывающего окна нашего сайта;
- · Visual Effects Settings – различные визуальные эффекты.
Рассмотрим более подробно каждую из указанных групп.
Базовые параметры (Base Settings)
Status – галочка возле этого пункта означает, что плагин подключен.
Enable on mobile browsers – если вы хотите, чтобы всплывающие окна появлялись и при открытии сайта с мобильных устройств, активизируйте «Yes».
Paths inclusion/exclusion – здесь можно указать, на каких страницах сайта wordpress всплывающие окна показывать, а на каких – нет.
Show the popup – настройки длительности (Every и число дней) и периодичности (сколько раз показывать окно одному пользователю).
Здесь имеется 4 пункта «Embed the following» для настройки содержания вашего всплывающего окна. Выберите тот вариант, который вам подходит:
- · URL content – здесь указывается адрес, по которому можно взять готовое содержимое всплывающего окна.
- · WYSIWYG content – редактор для самостоятельного формирования содержания. Принцип работы сходен с добавлением обычной статьи на ваш сайт.
- · plain HTML content – поле для вставки готового содержимого в html-формате.
- · page content – используйте данный способ, если во всплывающем окне вы собираетесь использовать материал с определенной страницы своего блога. Разметка и форматирование при этом не переносятся.
Настройка визуальных эффектов Visual Effects Settings
Background Opacity – указывается непрозрачность заднего плана (число от ноля до единицы).
Popup Height – высота (в пикселях) всплывающего окна.
Popup Width – соответственно ширина.
Popup Delay – через какое время показывать всплывающее окно, задается в миллисекундах.
Popup Speed – скорость появления окна.
Close Popup when clicking on the background – нужно ли закрывать окно, если пользователь кликнул за его пределами.
Часто ли Вы замечали на сайтах всплывающие окна? Так, большинство интернет-ресурсов, особенно новостные и блоговые сайты, показывают посетителям всплывающие или попап-окна с той или иной информацией. Зачем они нужны вообще? Обычно их наличие помогает конвертировать посетителей в подписчиков (т.е. в постоянных пользователей). По данным интернет-маркетологов, наибольший процент конверсии приходится именно на всплывающие окна, если, конечно, они настроены правильно. Конечно, если такие окна будут “вылетать” час за часом перед глазами посетителя, то понятно, что он уйдет из такого сайта и не захочет больше возвращаться.
Как настроить всплывающие окна в WordPress?
“Движок”, по умолчанию, не предоставляет возможности создания и настройки всплывающих окон. Поэтому воспользуемся сторонним решением – бесплатным плагином Popup Maker .
Плагин Popup Maker
Итак, после установки и активации плагина, сразу видим окно приветствия. Для начала работы нажимаем кнопку Skip .
В итоге Вы попадаете в основное окно создания всплывающих окон.
Для создания попап-окна необходимо нажать кнопку Добавить Всплывающее окно , после чего Вы попадете на страницу создания всплывающего окна.
Тут нужно будет ввести следующие данные. В первых двух полях для ввода вводим название и заголовок нашего окна. Отметим, что в названии можно ввести произвольный текст, так как он нигде показываться не будет выводится.
Блок Условия подразумевает настройку места показа всплывающего окна. Как видим, тут довольно большой выбор параметров, позволяющих гибко настроить показ (на всех страницах сайта, только на главной, в рубриках и пр.) Кроме того, есть возможность отключать показ попап-окна на мобильных и планшетных устройствах (настройки Отключать этот Popup на мобильных устройствах и Отключите это всплывающее окно на планшетных устройствах соответственно).
В блоке настроек Настройка темы Вы можете выбрать одну из предлагаемых плагином тем визуального оформления окна.
Блок Показать настройки позволяет задать размеры попап-окна.
Настройка Отключить фон позволяет отображать или скрывать фон под всплывающим окном.
Блок Анимация позволяет задать Вашему окну скорость, а также эффекты анимации (затухание, увеличение и др.)
В блоке Позиция Вы можете выбрать место на экране, где будет показываться Ваше попап-окно.
Итак, после того, как все настройки были внесены, следует нажать кнопку Опубликовать .
Наше всплывающее окно создано, и теперь можно смотреть на сайте.
Два отличных плагина, чтобы сделать всплывающее окно в wordpress!
Здравствуйте, уважаемые читатели и гости моего блога! Сегодня Вам расскажу и покажу видеоурок, как сделать всплывающее окно в wordpress при помощи двух прекрасных плагинов. Эти плагины имеют очень хорошую репутацию, не грузят движок wordpress, легко настраиваются и один из них имеет русский интерфейс!
Ну а теперь все по порядку, о каждом из двух плагинов...
Читайте и смотрите видеоурок! Как сделать всплывающее окно в wordpress при помощи плагинов? И больше не спрашивайте!
Первый наш плагин делающий всплывающее окно в wordpress: Scroll Triggered Box
Что о нем можно сказать? Это хороший плагин. Прост в установке и настройке. Работа его стабильна и не влияет на скорость движка WordPress.
Установка Scroll Triggered Box
Входим во вкладку плагины в консоли, жмем добавить новый плагин, вставляем в поисковое поле его название "Scroll Triggered Box " и жмем «Enter». Все наш плагин нашелся! Далее жмем установить, активировать. То есть стандартная установка плагинов!
Настройка Scroll Triggered Box
- Theme: Выбора темы. Здесь четыре разноцветных темы. Подбираете какая вам понравиться и подходит по дизайну к вашему блогу.
- Testing: Ставите в этом чек боксе галочку и кроме Вас никто его не видит!
- Visible at: Настройка демонстраций всплывающего окна на страницах и в записях блога.
- Cookie lifetime: Настройка времени показа всплывающего окна на сайте.
- Show box at: Если поставите 50, то после прокрутки посетителем половины страницы окно всплывет. Если впишите «0», тогда окно будет показываться постоянно.
- Show box at element: Здесь пишите ключевое слово, которое будет сигнализировать о начале показа всплывающего окна. Например если пишите #comments , то окно всплывет на уровне комментариев и т. д.
- Include css: Отказ от CSS стилей установленных по умолчанию. Ниже можно установить свои стили, пройдя по ссылке.
- Box position: Этовыбор позиции всплывающего окна. Внизу, справа, слева, посередине. На ваше усмотрение.
- Box width: Изменениеширины всплывающего окна.
- Box html: Окно для вставки содержимого для всплывающего окна. Так же предусмотрена вставка HTML кода.
- Social buttons: Место для установки кнопок соцсетей.
Второй плагин WP-MK для установки всплывающего окна на WordPress
Плагин WP-MK на мой взгляд даже лучше, чем плагин Scroll Triggered Box , который мы рассмотрели выше. Он более функционален, его интерфейс настроек на русском языке в отличии от Scroll Triggered Box . Поэтому о настройках WP-MK вряд ли стоит подробно расписывать. Я думаю не составит труда посмотреть и разобраться вам самим.
Установка плагина WP-MK стандартная и затруднений не вызовет.
А вот найти его стандартным способом в поиске плагинов в консоли WordPress вам не удастся.
Вы можете скачать бесплатно плагин WP-MK вот по этой ссылке, которая расположена ниже.
Модальные окна часто используются на сайтах для привлечения внимания пользователя к важным событиям или ознакомить с полезной информацией. В частности, это бонусы, бесплатный материал, подписка, «раздача лещей» и многое другое. Насколько такие меры эффективны и ненавязчивы, каждый рассматривает по-своему. Но несмотря на взвешивания за и против всплывающих окон, они применяются на ресурсах и довольно активно. Пропустим всю критику и перейдем к небольшой подборке из пяти плагинов модельных окон для WordPress.
Простое, адаптивное модальное окно с рядом самых необходимых настроек. Редактируется полное внешнее оформление, условия показа (даже по датам), запоминания куки, время всплытия, вставка видео, HTML кода, баннеров и прочее.
Открытие медиа-файлов в модальном окне при клике на веб-кнопку. Окно вставляется в запись через шорткод с определенными параметрами.
Очень простое всплывающее окно с несколько основными параметрами. Возможно указать ширину, высоту, цвет фона, а также доступен предварительный просмотр.
Всплывающее окно с возможностью добавления в него любого контента. Присутствуют настройки внешнего вида, запоминания куки, адаптивность и многое другое.