Плагины модального окна на WordPress. Как в WordPress создать модальное (всплывающее) окно Как сделать всплывающие окна wordpress
Приветствую всех. Попался мне в очередной раз popup plugin, который будет полезен не только для инфо бизнеса, но, думаю, заинтересует и блоггеров, которые занимаются развитием своих сайтов. У меня была уже статья на блоге, в которой я рассказывал про popup plugin для wordpress. Ознакомится с ней можно по этой ссылке: “ “. Не сказал бы что предыдущий плагин хуже или лучше того, что будем сегодня рассматривать. Они несколько отличаются друг от друга.
Прежде чем, перейдем к рассмотрению самого плагина, хочу напомнить о том, что с прошлой недели на официальном канале публикуются только плагины без русификации. Русифицированные плагины и темы отправляются на закрытый канал. Прошу учитывать этот момент.
Итак, приступим.
Popup plugin для wordpress – настройки и возможности.
Ни чего особо интересного в нём нет. Разработчики доносят до вас информацию о том, какие возможности вам предоставляет данное решение.
Для пользователей предусмотрено три варианта использования popup plugin для wordpress. Можете использовать что-то одно, можете хоть все три решения – ограничений нет:
- Modal Popup – создайте красивое и интерактивное pop-up окно, чтобы привлечь внимание посетителей.
- Info Bar – создайте красивую и интерактивную информационную панель, чтобы привлечь внимание посетителей.
- Slide In Popup – создайте красивый и интерактивный слайд во всплывающем окне, чтобы привлечь внимание посетителей.
Настройки самого плагина не представляют особых сложностей, во всяком случае в русифицированной версии (постарался перевести все подсказки на русский язык).
В принципе с этими настройками ни чего сложного возникнуть не должно. Если что-то не понятно пишите в комментариях к посту свои вопросы.
Как видите на скриншоте ниже у меня показано огромное количество различных типов пользователей. Не волнуйтесь, если у вас такого не будет. Всё зависит от темы, которая у вас установлена в данный момент времени.
Данный popup plugin позволяет не только создавать симпатичные окна для сбора подписчиков на ваш сайт, в нём так же заложена функция аналитики, то есть собирая данные о пользователях, вы будите лучше понимать какой из ваших продуктов им интересен больше.
Разработчики плагина позаботились о своих пользователях и разработали несколько вариантов, условно, примеров pop-up окон.
Например, вы выбрали какое-то из них и решили с ним поработать, так чтобы максимально эффективно настроить под свой сайт.
Отправляемся в раздел “Подключения” и создаем свою первую компанию:
Для вас уже созданы заготовки. Можете посмотреть как они будут выглядеть у вас на сайте, нажав предпросмотр. Я взял несколько примеров, чтобы показать, как что будет выглядеть:
Например, вот такой-вот вариант, если вы предоставляете какой-то информационный контент, скажем, на бесплатной основе:
Или предложите посетителю сайта подписаться на рассылку писем с вашего сайта, как вариант:
Кто-то, возможно, захочет использовать своеобразный “Социальный замок” на ресурсе. Почему бы и нет.
Как вариант, использовать видео для сбора подписной базы. Ну а что – кролик вполне себе симпатичный, а вы можете поставить, к примеру, видео со своего вебинара.
На скриншоте ниже показано как выглядит панель настройки в popup plugin для wordpress. Думаю, что ни чего сложного вам в ней не покажется. Во всяком случае, я слегка поразвлекся и сделал парочку всплывающих окон, чтобы посмотреть как все работает.
Правда, в плагине есть и минусы. Например, в нём отсутствуют отечественные социальные сети, но присутствует масса зарубежных или тот же самый Linkdin. В общем и целом отсутствие Вконтакте и Одноклассников меня не порадовало.
Ну и вот такой вот всплывающий баннер я сделал минуты за 3 сильно не напрягаясь, а больше развлекаясь:
Здравствуйте, друзья! Предлагаю поговорить о создании в WordPress модальных окон . Всплывающие (модальные) окна ощутимо расширяют возможности сайта. У вас есть сообщение или объявление, которое должен увидеть каждый посетитель вебресурса? Нужно сделать заметной проводимую акцию? Хотите сделать всплывающую форму регистрации на сайте или форму расшаривания контента в социальных сетях? Создайте модальное окно!
Всплывающие модальные окна предназначены для привлечения внимания. Появляясь на странице, они блокируют основной контент и заставляют пользователя ознакомиться со своим содержимым (текстом, видео, призывом к действию и т.п.).
Внимание! Пусть вас не пугает длина этого урока – сложностей в создании модальных окон нет (читайте, и убедитесь сами), просто я подробно описываю каждый шаг.
Алгоритм создания в WordPress модальных окон
В WordPress нет встроенных инструментов для работы со всплывающими окнами. Мы будем конструировать и настраивать их с помощью плагина Popup Maker . Давайте, например, создадим модальное окно с видео, всплывающее при клике по кнопке (позже можно будет настроить его автоматическое появление).
- Установите
плагин Popup Maker. Активируйте
его. Напоминаю: устанавливать плагины мы учились .
- Найдите в боковом меню слева админпанели раздел Popup Maker
и перейдите в его подраздел Add Popup
.
- Открылся редактор модальных окон. Впишите название окна в поле вверху страницы (название будет отображаться только в админпанели – пользователи его не увидят).
- Придумайте заголовок окна (будет виден пользователям) и впишите его в поле над кнопкой Добавить медиафайл .
- В блоке Conditions выберите в выпадающем меню страницами (категории), на которых будет появляться окно. Если плагин должен работать на всех страницах сайта , выберите Формат:All .
- Добавьте в большое поле под панелью инструментов текст, изображения, видео или аудио
– любой контент, который будет показываться во всплывающем окне. В рассматриваемом примере я добавил код видео с YouTube (добавление видео на сайт WordPress мы изучали ).
- В блоке Triggers находятся настройки ручного или автоматического открытия (самоактивации) всплывающего окна. В нашем примере я выбрал значение Click Open .
- Укажите ниже размер всплывающего окна (в пикселах или процентах). При выборе варианта Auto плагин подберет размеры модального окна автоматически.
- Отметьте чек-бокс в строке Отключить фон , чтобы за всплывающим окном была видна страница сайта (рекомендую).
- Настройте тип и скорость анимации
(не обязательно: по умолчанию уже выставлены оптимальные значения).
- Настройте положение окна на экране. Изначально плагин позиционирует его по центру вверху.
- Значение свойства z-index
, установленное по умолчанию, обычно в изменении не нуждается.
- Выберите варианты закрытия всплывающего окна. Отметьте «птичками» чек-боксы в строках Click Overlay to Close
(окно закроется при клике на фон вокруг него), Press F4 to Close
(окно закроется клавишей F4
), Press ESC to Close
(окно закроется клавишей ESC
). Чтобы не раздражать посетителей сайта головоломкой с закрытием модального окна, рекомендую отмечать все пункты.
- Нажмите Опубликовать.
Поздравляю, модальное окно создано!
О настройке дизайна всплывающего окна
Чтобы изменить дизайн созданного модального окна, перейдите в подраздел Theme
раздела Popup Maker
бокового меню админпанели (слева).
В открывшемся редакторе настройте нужный фон окна, цвет и размеры шрифтов, отступы, тени , название кнопки закрытия. На вкус и цвет…– сами знаете, поэтому подробно останавливаться на настройке дизайна всплывающего окна не буду. Появятся вопросы – задайте их в комментариях.
Как настроить открытие всплывающего окна
Помните, мы не задействовали в настройках плагина функцию автоматического открытия модального окна? Поэтому нужно придумать, каким образом наше окно будет открываться. Давайте настроим «всплытие» окна при клике по ссылке, картинке или кнопке.
Каждому окну плагин Popup Make присваивает два уникальных CSS-класса . Если добавить к элементу вебстраницы любой из этих классов, то при клике по этому элементу откроется модальное окно.
Где и как сделать накрутку комментариев Instagram – все методы. Портал pricesmm.com выяснил, что дешевле и лучше: накрутить комментарии в Инстаграме самостоятельно, с программами, получить в обмен или заказать услугу на сервисе СММ. Плюсы и минусы каждого способа.
Примеры добавления CSS-кода модального окна в код ссылки, изображения и кнопки:
< a href = "#" class = > Открытьмодальноеокно< / a >Модальное окно появится при клике по картинке
< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna" / >Модальное окно активируется после нажатия кнопки
< button class = "popmake-obrazets-modalnogo-okna" > Открытьмодальноеокно< / button >Нажмите на HTML-элемент после после добавления к нему CSS-класса popmake-obrazets-modalnogo-okna
. Должно появиться похожее модальное окно:
Появилось? Отлично! Теперь вы умеете настраивать всплывающие окна. Если окно не открылось, опишите проблему в комментариях – запустим его сообща!
В данной статье мы познакомим вас с плагином «WP-MK», позволяющий создать выплывающее окно на своём сайте WordPress.
«WP-MK» достаточно прост в применении и так же, как и такой плагин как вызывать особого раздражения не будет у посетителей блога. Поскольку появляется данное всплывающее окно лишь после прокрутки страницы сайта до низа (можно настроить) и будет исчезать если посетитель пролистывает , также имеется кнопка для закрытия такого всплывающего окна. Окно, которое отображает плагин «WP-MK», направлено может быть для того, чтобы решить самые разные задачи.
Настройка плагина «WP-MK»
Для того, чтобы настроить плагин «WP-MK» необходимо перейти в раздел «Параметры» в административной панели WordPress, дальше пункт «Всплывающее окно» и таким образом попадаем в настройку плагина.
Страница настроек данного плагина имеет интерфейс на русском языке, и детальные пояснения к каждому пункту данного плагина давать нет никакого смысла, я считаю и так все ясно.
Клик для увеличения
Один пункт, который необходимо отметить — «Содержимое». В это поле можно вставить нужный html-код, к примеру, на своём блоге в данном всплывающем окне отображается на анонсы свежих статей посредством сервиса feedburner, так же возможна размещение кода формы от сервиса Smartresponder, ну, в общем, что отображать в этом окне решать только вам. Не нужно забывать после внесения, каких-либо модификаций в настройках данного плагина нажать на «сохранить» внизу страницы.
Вот данное и все настройки, которые имеет плагин «WP-MK», все достаточно просто. Надеюсь, что «WP-MK» заинтересует вас и окажется для вас достаточно полезным.
С уважением, Андрей Юрийчук
Использование плагина всплывающих окон на вашем сайте на WordPress - это проверенный способ привлечения внимания пользователей к вашей рассылке, страницам в соцсетях, либо призыва к любым другим действиям, к которым вы хотите подтолкнуть своих читателей.
Некоторые пользователи могут ненавидеть и игнорировать всплывающие окна, но это не делает их менее эффективными. А при правильной настройке они будут успешно работать.
Но все же не стоит добавлять их сразу же на главной странице сайта и раздражать постоянных пользователей навязчивыми уведомлениями. Тем более, после того, как они уже однажды нажали на кнопку Закрыть.
Опыт использования подобных плагинов некоторыми владельцами сайтов на других ресурсах подтверждает, что количество подписчиков, к примеру, на e-mail рассылку может увеличиться на 500%.
Плагин WordPress Popup
Если говорить о WordPress, то вам крупно повезло. Плагин всплывающих окон Popups доступен в бесплатной версии и может помочь вам существенно увеличить количество подписчиков, например, в социальных сетях. Доступна также и премиум-версия этого попап-плагина, в случае, если вам понадобятся дополнительные функции.
Настройка плагина
После загрузки и активации плагина появится новый раздел меню под названием «Popups », где, собственно, и настраиваются нужные вам всплывающие окна для вашего сайта. В разделе «All Popups » (Все всплывающие окна) есть демо-версия, которую можно начинать настраивать. Всплывающее окно загружается в визуальном редакторе, что позволяет вам отредактировать заголовок текста и добавить любой контент в тело:
Там вы найдете и шорткоды для отображения кнопок социальных сетей для Facebook, Google и Twitter. Внизу указаны параметры для этих шорткодов, так что вы можете добавить URL и другие параметры в кнопку:
Под параметрами шорткода находится бокс «Popup Display Rules » (Правила отображения всплывающих окон). В нем вы выбираете место на сайте, где должно появляться всплывающее окно - конкретная страница, тип поста, прочее.
И, наконец, есть бокс «Display Options » (Параметры отображения), в котором настраиваются все параметры внешнего вида всплывающих окон - призывы к действию, триггеры, анимации, фоновый цвет, наложение непрозрачности, цвет границы, прочее:
После настройки параметров нажмите на «Publish » (Публиковать), а затем на «View Post » (Просмотреть пост), и вы увидите, как работает всплывающее окно:
Функции плагина
Плагин довольно мощный и содержит полезный набор функций, как например:
- Выведение всплывающих окон на конкретных страницах сайта, в шаблонах, записях, прочее
- Фильтр пользователей с поисковых систем
- Фильтр пользователей, которые никогда не оставляли комментариев
- Фильтр пользователей, которые попали на ваш сайт с другой страницы
- Видимость всплывающего окна для зарегистрированным/незарегистрированных пользователей
- Отображение всплывающего окна для пользователей, которые заходят на сайт через мобильную версию или с планшетов
- Отображение всплывающего окна в зависимости от типа поста, шаблона поста, названия поста, формата поста, статуса поста
- Отображение всплывающего окна в зависимости от шаблона страницы, от того, является ли она родительской, от названия страницы, типа страницы
Доступные настройки
- Выбор из пяти возможных местоположений всплывающего окна
- Триггеры-окна, всплывающие после N–го количества секунд пребывания пользователя на сайте или % скроллинга страницы
- Автоисчезновение всплывающего окна при возвращении пользователя вверх страницы
- Изменение цвета шрифта, фона, границ, прочее
- Настройка непрозрачности фона
- Суточный интервал в появлениях всплывающего окна
- 8 новых анимационных эффектов
- Новые методы использования триггера
- Таймер для автоисчезновения окна
- Возможность отключения кнопки закрытия окна
- Возможность отключения любых других способов закрытия окна, как например, нажатие вне области всплывающего окна
- Премиум поддержка
Заключение
Итак, мы рассмотрели отличный бесплатный плагин для установки всплывающих окон на вашем сайте на WordPress. Он включает огромное количество функций для настройки окон нужным вам образом, в зависимости от поставленных вами целей. Также плагин доступен и в платной премиум версии всего за $15, но для многих пользователей будет достаточно и бесплатных возможностей.
Всплывающие окна – удобный инструмент для размещения рекламы, размещения предложения подписаться на рассылку и другой важной информации, к которой вы хотели бы привлечь внимание пользователей. Для 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 – нужно ли закрывать окно, если пользователь кликнул за его пределами.
