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

Привет всем!

Popup plugin WordPress – layered Popups

Итак, после того, как вы скачаете его по ссылке в конце поста и установите на свой блог или сайт wordpress, что вы получите?

У вас будет возможность:

создавать всплывающее окно;

воспользоваться предустановленным шаблоном popup;

создать собственное popup окно.

Откровенно сказать, на перевод этого popup plugin я потратил в совокупности около недели и постарался сделать это хорошо. Надеюсь вам будет в радость им пользоваться.

Настройки popup plugin

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

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

Если вы видите текст типа: “enter you message..” – не волнуйтесь, можно поставить на его место любой другой текст и на каком хотите языке.

Вкладка рассылка popup plugin

Здесь о Вас так же уже позаботились, но вы можете вводить свой собственный текст, какой пожелаете нужным.

Раздел Интеграции popup plugin wordpress

Лично для меня он не представляет особого интереса, но возможно кто-то пользуется сторонними сервисами для отправки email.

Всплывающие окна – A/B кампании

Здесь вы можете создавать компании и отслеживать какое из popup наиболее эффективно.

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

Скажу сразу – этот раздел я особо не тестировал.

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

Журнал я такк же не тестировал, поэтому лишь упомяну о нем и не более того..

В Popup plugin WordPress – layered Popups есть функция, которая позволяет вам скачать и установить дополнительные popup, но вот беда, без кода покупки она бесполезна..

Есть так же раздел с дополнениями, но, к сожалению они так же за деньги..

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

Есть также раздел ЧЗВ – “Часто задаваемые вопросы”, но он к плагину ни какого отношения не имеет и перебрасывает пользователя на страницу с ответами на английском языке, так что перевести его не получится.

А теперь я бы хотел привести несколько примеров того, какое всплывающее окно wordpress вы можете сделать, используя даже встроенные в плагин примеры popup:

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

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

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

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

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

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

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

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

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

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

Два отличных плагина, чтобы сделать всплывающее окно в 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 всплывающие окна можно организовать с помощью плагина 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 – нужно ли закрывать окно, если пользователь кликнул за его пределами.