- Всплывающее окно
- Модальное окно
Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert().
Всплывающее окно
Первым шагом создания всплывающего окна является создание элемента <div> (или любого другого элемента) и его оформление:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> .okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; } </style> </head> <body> <div class="okno"> Всплывающее окошко! </div> </body> </html>
Попробовать »
Этот <div>
и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения
none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; } #okno:target {display: block;} </style> </head> <body> <div id="okno"> Всплывающее окошко! </div> <a href="#okno">Вызвать всплывающее окно</a> </body> </html>
Попробовать »
Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента <div> сменится с none на block.
Теперь надо расположить <div> посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:
#okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; /*позиционируем и центрируем*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент <div> внутри элемента <a>:
<a href="#" id="main"> <div id="okno"> Всплывающее окошко! </div> </a>
Затем мы позиционируем элемент <a> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #main { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #main:target {display: block;} </style> </head> <body> <a href="#" id="main"> <div id="okno"> Всплывающее окошко! </div> </a> <a href="#main">Вызвать всплывающее окно</a> </body> </html>
Попробовать »
У элемента <div>
убираем
display: none; (он больше не нужен, так как скрываем мы теперь <a>). В итоге родительский <a> выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.
На этом создание простого всплывающего окна закончено.
Модальное окно
Для создания всплывающего модального окна, берём элемент <div>, оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #okno:target {display: block;} </style> </head> <body> <div id="okno"> Всплывающее окошко! </div> <a href="#okno">Вызвать всплывающее окно</a> </body> </html>
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему <div>
и оформив:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #okno:target {display: block;} .close { display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; } .close:hover {background: #e6e6ff;} </style> </head> <body> <div id="okno"> Всплывающее окошко!<br> <a href="#" class="close">Закрыть окно</a> </div> <a href="#okno">Вызвать всплывающее окно</a> </body> </html>
Попробовать »
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный <div>
:
<div id="zatemnenie"> <div id="okno"> Всплывающее окошко!<br> <a href="#" class="close">Закрыть окно</a> </div> </div>
Позиционируем родительский <div> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.
У дочернего <div> убираем display: none; (он больше не нужен, так как родительский <div> будет скрывать всё, что находится внутри него). В итоге родительский <div> теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #zatemnenie { background: rgba(102, 102, 102, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; } #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #fff; } #zatemnenie:target {display: block;} .close { display: inline-block; border: 1px solid #0.
</html>
Попробовать »
Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).
puzzleweb.ru
Известный факт: большинство посетителей не совершают покупки при первом визите на товарную страницу интернет-магазина и даже не оставляют лиды — но как велико это большинство?
Согласно исследованиям компании SeeWhy, таковы 99% посетителей, впервые зашедших на ресурс. Конечно, речь идет в первую очередь о сайтах eCommerce, но все же возникает вопрос: если 99% посетителей ничего не покупают при первом визите, то как побудить их вернуться?
Хорошей новостью станет следующая статистика: 75% посетителей все же готовы возвратиться позже для завершения покупки.
Как бы вы не относились к popup окнам, эта маркетинговая технология все еще эффективна для привлечения внимания и сбора контактных данных (лидогенерации).
Проще говоря, используя popup окна, можно быстрее всего вернуть посетителя на лендинг.
- 5 советов по оптимизации всплывающего окна (Pop-Up)
Почему?
Это связано с методикой убеждения, известной как «прерывание паттерна» — когда ваше внимание, «усыпленное» определенным ритмом или последовательностью повествования, вдруг агрессивно привлекает что-то неожиданное. Вы часто испытываете этот эффект при просмотре фильмов, юмористических шоу и даже на важных переговорах.
Если говорить о контент- и email-маркетинге, то «прерывание паттерна» наиболее эффективно, когда читатель уже настроен на решение проблемы и продолжение взаимодействия (подписку на рассылку, покупку и т. д.).
Пример от сервиса Made.com. Маркетологи предложили своим посетителям бесплатный ваучер номиналом в 10 евро за сущий пустяк — адрес электронной почты. Это было сделано потому, что:
- Все любят денежные подарки;
- 10 евро за постоянный контакт по email — небольшая цена.
Согласно данным ExactTarget, электронная почта — наиболее предпочтительный для клиентов маркетинговый канал, ведь 77% потребителей предпочитают email другим каналам взаимодействия с брендом.
Возможно, всплывающие окна не так уж плохи?
Скорее всего, вы ненавидите pop-ups и имеете на это право. Еще бы, кому понравится сразу после перехода на лендинг видеть нечто подобное:
Или вот такое:
Вы можете даже не знать о сфере деятельности компании, а уже по шею засыпаны окнами pop up. Примеры выше — неудачные: прежде всего посетитель хочет узнать побольше о бренде, а потом уже скачивать «Бесплатное руководство по генерации трафика», «Бесплатную электронную книгу» и т. д. Разумеется, большинство пользователей ненавидят такие вещи и отвечают отказом от последующего взаимодействия с брендом.
Возможно, стоит немного остыть и посмотреть на результаты тестов. Что говорят цифры? Вот данные сплит-теста поп апа и кнопки «Нет, спасибо» на popup оффере.
| Текст | Количество просмотров | Количество собранных email | Коэффициент конверсии |
| Нет, спасибо. Я предпочитаю платить полную стоимость | 165 416 | 9928 | 6,0% |
| Мне это неинтересно | 165 625 | 7961 | 4,81% |
| Нет, спасибо | 165 021 | 7616 | 4,62% |
| Нет | 166 072 | 7433 | 4,48% |
Впечатляет? Тогда посмотрим на результаты компаний, эффективно использующих такой подход.
- Как создать огромную подписную базу?
1. Опыт использования всплывающих окон
За обычный день сервис WP Beginner получает около 70–80 новых подписчиков благодаря различным методам лидогенерации. Но чем больше подписная база, тем успешнее бизнес, поэтому маркетологи сервиса решились на ряд экспериментов с pop-ups.
Что было сделано?
Было разработано popup окно, появляющееся, когда пользователь намеревался покинуть сайт. Эффект был достигнут благодаря технологиям отслеживания курсора и прочим методам. Вот как выглядело окно:
Каковы результаты?
Использование всплывающего окна на важнейших страницах (не на всем сайте) повысило количество регистраций на 660%. То есть от 70–80 лидов сервис перешел к показателю в 445–470 лидов за сутки — скачок на качественно новый уровень.
Следующий кейс — от Backlinko. После добавления на лендинг СТА с предложением подписаться на рассылку, конверсия упала до 1.73% — необходимо было срочно что-то сделать. Маркетологи компании разработали popup окно, которое появлялось перед пользователями, решившими покинуть целевую страницу. Вот как оно выглядело:
Помните, что конверсия было около 1.7% до использования popup окна? Через 2 дня после запуска pop-up статистика изменилась. Всего за два дня коэффициент конверсии вырос с 1.73% до 4.83% — более чем в 2 раза!
Конечно, в мире, где один грамотный тест может повысить конверсию на 100, 300%, даже 1300%, результаты этого эксперимента выглядят скромно. Однако это не совсем так.
Прежде всего, имея крупную подписную базу, маркетологи могут создавать релевантный для своей аудитории контент и настраивать систему кросс-селлинга. Таким образом, учитывая допродажи и прочие факторы, один контакт приносит сервису в среднем 15$.
Если popup окна будут приводить по 15 дополнительных подписчиков в сутки, то ежедневный доход вырастет в среднем на $225, а годовой доход — на $82 125 соответственно. Неплохой заработок за 2 минуты проверки настроек, верно?
Очевидно, что ненавистники pop-ups были неправы. Но существуют и другие факторы: показатель отказов и влияние всплывающих окон на пользовательский опыт. Что насчет этого?
- 4 альтернативы традиционным Pop-Ups
2. Как pop-ups влияют на пользовательский опыт и показатель отказов?
Одна из первых мыслей при упоминании pop-up — рост числа отказов, ведь все больше людей будут уходить с лендинга по вине всплывающего окна, что абсолютно логично. Однако, вспомним приведенные выше примеры: маркетологи WP Beginner не увидели колебания данного показателя, равно как и Backlinko — число отказов не изменилось в обоих случаях.
Дэн Зарелла (Dan Zarrella) пришел к такому же выводу после проведения серии тестов на своей личной целевой странице, выяснив, что присутствие всплывающего окна никак не влияет на показатель отказов. Единственное, что изменилось — убрав pop-ups, Дэн лишился 50% входящих лидов.
- 6 способов быстро увеличить подписную базу
3. Что насчет пользовательского опыта?
Судя по всему, посетителям все равно. Маркетологи WP Beginner не получили ни одной жалобы на popup окна от своих клиентов.
Если задуматься, в этом есть смысл. Да, неприятно видеть подобное после перехода на ресурс по ссылке с Facebook:
Но это не повод в гневе покидать сайт. Что вы обычно делаете в подобных случаях? Верно — закрываете popup окно и продолжаете поиск нужного контента.
Более того, грамотное использование pop-ups способно повысить пользовательский опыт, по примеру сервиса Vero. Если вы зайдете главную страницу и в течение 30 секунд не предпримете никаких действий, то увидите в углу окно с текстом: «Что мешает вам подписаться на Vero прямо сейчас?».
4. Как уничтожить юзабилити с помощью всплывающих окон?
Однако вы не можете встроить в лендинг любое pop-up-объявление и надеяться на высокую конверсию. Если popup окно не выделяется на странице, то оно как минимум бесполезно.
Вы уже собираетесь уйти с лендинга, и тут… Бам! Произошло что-то непонятное, откуда в середине страницы появилась кнопка СТА? В действительности это popup окно наложилось на незатемненную страницу, слившись с фоном. Когда вы не отделяете pop-ups от остальной страницы, это сильно портит пользовательский опыт.
Как выяснилось, многие маркетологи заблуждаются насчет всплывающих окон — оказывается, они все еще работают. Сейчас вы узнаете, как использовать pop-ups на своем лендинге для достижения максимального эффекта.
- Примеры юзабилити пользовательского интерфейса
5. Создание эффективных всплывающих окон
Прежде чем приступать к созданию pop-ups, рассмотрим их основные виды. Существует две крупных разновидности popup окон:
- Большие окна (оверлеи).
- Окна, всплывающие в результате прокрутки страницы.
Оверлеи
Они выглядят как на примере выше. Подобные окна заслоняют весь экран, затемняя фон. Всплывающее окно остается единственным элементом на странице, который четко виден пользователю — в последнее время наметилась тенденция использования всплывающих окон именно такого формата.
Известный маркетолог Дэн Зарелла тоже использует оверлеи с затемнением фона, но само окно у него гораздо меньше обычного:
- Пользовательский опыт и юзабилити на сайтах eCommerce
Окна, всплывающие в результате прокрутки страницы
Этот вид pop-ups появляется, когда пользователь прокручивает страницу до некоторого этапа — чаще всего данный формат используется в блогах, и он крайне эффективен. Пролистав половину страницы, вы увидите нечто подобное:
В зависимости от ПО или плагина, используемого вами, можно экспериментировать с глубиной прокрутки — как далеко надо зайти пользователю, чтобы увидеть всплывающее окно. Кроме того, вы можете задавать появление pop-ups по времени, проведенному пользователем на сайте.
Текст кнопок на всплывающих окнах
К заголовкам, текстам полей и кнопок на всплывающих окнах применимы те же требования, что и к контенту на СТА. Ведь pop-ups и являются элементами призыва к действию, цель которых — увеличение просмотров/подписчиков/лидов.
6. Лучшее время для показа всплывающих окон
Если говорить о тестировании оверлеев, то сервис SumoMe собрал следующие данные: на сегодняшний день оптимальное время составляет 5 секунд после перехода посетителя на лендинг.
Сервис WhichTestWon дает другую статистику. В ходе тестов было проверено появление оверлеев на 15, 30 и 45 секунде после посадки пользователя, и оптимальный результат показал первый вариант: появление окна через 15 секунд на 11% эффективнее варианта с 30 секундами, и на 50% — варианта с 45 секундами после посадки.
Но помните — не существует идеального времени появления окна, ведь тесты необходимы в каждом конкретном случае. Это справедливо и для вопроса о частоте появления pop-ups. Проще говоря, статистика чужих ресурсов может мотивировать на собственное тестирование, но не должна быть объектом подражания — тестируйте.
- Как удвоить конверсию вашего сайта за 4 простых шага?
Заключение
Всплывающие окна могут прекрасно работать, увеличивая подписную базу и умножая доходы — данный метод очень прост и эффективен. Другой совет — чем больше на лендинге вариантов сбора контактных данных, тем лучше. Работают ли эти методы одинаково для всех? Конечно же, нет — тестируйте.
Высоких вам конверсий!
По материалам conversionxl.com
lpgenerator.ru
От автора: всплывающее окно для сайта это вещь, которую многие пользователи от души ненавидят. Но все же если использовать его с разрешения самого пользователя, то это превращается в достаточно интересный элемент сайта. В этой статье я как раз я расскажу вам о трех способах, как сделать всплывающее окно.
Способ №1 – на чистом html5 и javascript
Как ни странно, сегодня такое окно можно сделать без всяких jquery плагинов. Для этого нам потребуется элемент из html5 – dialog.
Чем будет хорошо этот способ? Во-первых, блок открывается только по желанию пользователя. То есть только в том случае, если он сам нажмет на кнопку. Также он в любое время может закрыть окошко и никогда больше его не открывать. Естественно, это только разметка, чтобы все работало, нужно добавить еще javascript. В разметке в контейнере dialog может быть все, что угодно: картинки, таблицы, видео и т.д. Абзац там только для примера.
Обязательно во всплывающем окне должна быть кнопка его закрытия. Хорошо, с разметкой разобрались, а вот и скрипт:
Отлично. В таком формате стоит вставлять код в html-файл, либо же вы можете скопировать этот код (кроме тегов script) в отдельный javascript-файл и подключить его к html. Смотрите сами, как вам удобнее. Вот так выглядит страница, если ее открыть в браузере:
У меня всего лишь одна кнопка, но в реальном примере это был бы какой-нибудь сайт, и там где-нибудь в виджете была бы кнопка для вывода всплывающего окна. Ну а так выглядит само окно:
Как видите, его можно в любой момент закрыть. У меня оно выглядит нестандартно, так как я добавил некоторые стили селектору dialog:
Стилей мало, они скорее для виду, но в реальной практике вы могли бы стилизовать всплывающее окно так, как вам нужно.
Придаем модальные свойства
Все хорошо, но это окно не модальное, то есть при его открытии другие элементы не блокируются и по ним тоже можно нажимать, можно выделять текст и т.д. Чтобы сделать его модальным, ищем в скрипте строчку:
А чтобы фон при открытии модального окна затемнялся, добавьте такой код в css:
Откройте и вы увидите разницу, все остальные элементы на странице будут заблокированы, пока вы не закроете блок с помощью соответствующей кнопки.
Минус вывода всплывающего окна на html5 с в том, что dialog поддерживается очень плохо. Конечно, сейчас я вам все показывал в последней версии Google Chrome и тут все отлично работает, но в целом тег поддерживается слабо, хотя можно подключить polyfill специально для этого элемента.
Да, зашел я тут на caniuse.com, поддерживает тег только Chrome и Opera на текущий момент.
Вариант для тех, у кого WordPress
Если у вас WordPress и вы хотите решение в виде готового простого плагина, то оно есть. Этот плагин называется WP Tactical Popup и в нем очень много настроек. Например, можно указать количество просмотренных страниц пользователем, после которых появится окно, можно указать таймер, по истечению которого оно появится. Также есть возможность указывать интервал показа одному человеку, чтобы сильно не раздражать. В общем, на мой взгляд, это просто очень хорошее готовое решение.
В модальное окно можно вставить html-код, картинку или форму подписки.
Вариант 3 – на фреймворке Bootstrap
В Bootstrap поддерживает jquery-плагин modal.js. Если вы используете этот фреймворк в своей верстке, то оптимально создавать красивое всплывающее окно именно с его помощью. Для начала вам потребуется: скачать и подключить Bootstrap, скачать и подключить jQuery
Разместить нужный код на нужной странице, после чего написать небольшой веб-сценарий. Подробное описание этого способа с примером вы можете найти на сайте http://bootstrap-ru.com. Пожалуй, это и будет самый оптимальный способ.
Что ж, мы рассмотрели три способа создания всплывающего окна, а если вы хотите лучше разобраться в javascript, то рекомендую к просмотру наш курс по этому языку, а также самой известной его библиотеке – jQuery.
webformyself.com
Будем делать PopUp окно, такое знакомое и вызвающее отвращение, но его можно использовать не только для рекламы, но и например для поздравления с каким-нибудь праздником.
HTML
<div id="blanket" style="display:none;"></div> <div id="popUpDiv" style="display:none;"> <a href="#" onclick="popup('popUpDiv')">Закрыть PopUp</a> </div> <a href="#" onclick="popup('popUpDiv')">Открыть PopUp</a>В контейнер popUpDiv помещается контент попап окна.
Если хотите, чтобы popup окно показывалось при загрузке страницы то допишите к тегу body такой код:
<body onload="popup('popUpDiv')">CSS
#blanket { background-color:#111; opacity: 0.65; *background:none; position:absolute; z-index: 9001; top:0px; left:0px; width:100%; } #popUpDiv { position:absolute; background:url('pop-back.jpg') no-repeat; width:400px; height:400px; border:5px solid #000; z-index: 9002; } #popUpDiv a {position:relative; top:20px; left:20px}Для IE задний фон при открытом popup окне мы выключили, так как старые версии IE не поддерживают прозрачность.
JS
jQuery у нас не используется, только jаvascript!
Подключаем файл css-pop.js с таким содержанием:
function toggle(div_id) { var el = document.getElementById(div_id); if ( el.style.display == 'none' ) { el.style.display = 'block';} else {el.style.display = 'none';} } function blanket_size(popUpDivVar) { if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight; } else { viewportheight = document.documentElement.clientHeight; } if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) { blanket_height = viewportheight; } else { if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) { blanket_height = document.body.parentNode.clientHeight; } else { blanket_height = document.body.parentNode.scrollHeight; } } var blanket = document.getElementById('blanket'); blanket.style.height = blanket_height + 'px'; var popUpDiv = document.getElementById(popUpDivVar); popUpDiv_height=blanket_height/2-200;//200 это половина высоты popup окна popUpDiv.style.top = popUpDiv_height + 'px'; } function window_pos(popUpDivVar) { if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerHeight; } else { viewportwidth = document.documentElement.clientHeight; } if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) { window_width = viewportwidth; } else { if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) { window_width = document.body.parentNode.clientWidth; } else { window_width = document.body.parentNode.scrollWidth; } } var popUpDiv = document.getElementById(popUpDivVar); window_width=window_width/2-200;//200 это половина ширины popup окна popUpDiv.style.left = window_width + 'px'; } function popup(windowname) { blanket_size(windowname); window_pos(windowname); toggle('blanket'); toggle(windowname); }PopUp автоматически центрируется по середине экрана. Чтобы скорректировать его расположения откройте этот js файл и подправьте строчки (в нашем примере ширина и высота popup 400px, а половина будет 200):
popUpDiv_height=blanket_height/2-200;//200 это половина высоты popup окна window_width=window_width/2-200;//200 это половина ширины popup окнаpcvector.net
Подключение Magnific Popup
Подключить плагин и начать работать с ним достаточно просто. Вообще на сайте есть подробная документация, правда она на английском. Но я скажу вам – чтобы заниматься веб-разработкой крайне важно знать английский язык на техническом уровне. Без этого никуда. Для меня лично не составляет труда изучить документацию по скриптам на английском языке. В конце концов есть также гугл переводчик, которым можно воспользоваться, если что-то непонятно.
В данной статье я рассмотрю только те моменты модальных окон, с которыми я разобрался и которые активно внедряю в процессе разработки сайтов. И так давайте начнем.
Подключаем файл плагина и файл стилей Magnific Popup. Если у вас не подключена библиотека jQuery, то обязательно следует подключить и ее. В общем, здесь подключение ничем не отличается от подключения любого другого скрипта jQuery. Про подключение стилей и скриптов я написал отдельную статью, советую ее почитать.
<!-- Magnific Popup core CSS file --> <link rel="stylesheet" href="/css/magnific-popup.css"> <!-- jQuery 1.7.2+ or Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Magnific Popup core JS file --> <script src="/js/jquery.magnific-popup.js"></script>Типы модальных окон
Тип контента в окне – Inline
Далее нам следует инициализировать наш плагин. Для этого нам нужно определиться с типом всплываемого контента. Давайте вызовем в модальном окне обычный текст. Тогда код инциализации будет для контента с типом – Inline.
jQuery(document).ready(function($) { $('.popup-content').magnificPopup({ type: 'inline' }); }); Как видим событие вызова модального окна вешается на объект с классом “popup-content“. Поэтому создадим его, например, это будет ссылка с якорем на вызываемый блок с id=”text-popup”.
<a href="#text-popup" class="popup-content">Вызвать окно с текстом</a> <div id="text-popup" class="white-popup mfp-hide"> <p>С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение направлений прогрессивного развития.</p> </div>И еще кое что. Для того, чтобы наше окно стало видно нам необходимо в файл стилей “magnific-popup.css” добавить следующий код:
.white-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; }Данное правило задает фоновый цвет окну и отступы. Их изначально его нет в файле стилей, т.к. само окно можно оформить на свое усмотрение.
В результате у нас открывается модальное окно с нашим текстом. Все довольно просто.
Тип контента – Image
Теперь давайте откроем картинки в модальных окнах.
<!-- Без анимации --> <p><a class="image-popup" title="Это описание изображения" href="images/images-magnific-popup/Img_1_b.jpg"> <img src="images/images-magnific-popup/img_1_s.jpg" alt="" /></a> </p><!-- С анимацией --> <p><a class="image-popup-zoom" title="Это описание изображения с анимацией" href="images/images-magnific-popup/Img_2_b.jpg"> <img src="images/images-magnific-popup/img_2_s.jpg" alt="" /></a> </p>
// Type Image - картинка без анимации $('.image-popup').magnificPopup({ type: 'image' }); // Type Image Zoom - картинка с анимацией $('.image-popup-zoom').magnificPopup({ type: 'image', zoom: { enabled: true, duration: 300 // продолжительность анимации. Не меняйте данный параметр также и в CSS } });Галерея картинок – Gallery
<div class="popup-gallery"> <a href="images/images-magnific-popup/gallery/img_1_b.jpg" rel="alternate"><img src="images/images-magnific-popup/gallery/img_1_s.jpg" alt="" /></a> <a href="images/images-magnific-popup/gallery/img_2_b.jpg" rel="alternate"><img src="images/images-magnific-popup/gallery/img_2_s.jpg" alt="" /></a> <a href="images/images-magnific-popup/gallery/img_3_b.jpg" rel="alternate"><img src="images/images-magnific-popup/gallery/img_3_s.jpg" alt="" /></a> <a href="images/images-magnific-popup/gallery/img_4_b.jpg" rel="alternate"><img src="images/images-magnific-popup/gallery/img_4_s.jpg" alt="" /></a> </div>инициализация будет следующей:
// Тип Image - галерея картинок $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Загрузка изображения #%curr%...', gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] // Will preload 0 - before current, and 1 after the current image } });Тип контента – Iframe
Теперь давайте откроем в модальном окне видео Youtube.
<a class="popup-youtube" rel="nofollow" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Открыть видео Youtube</a>Код инициализации будет следующим:
// Type Iframe - видео Youtube (или Vimeo), карты Гугл или другой контент в iframe $('.popup-youtube').magnificPopup({ type: 'iframe' });Заметьте, что адрес видео берется из адресной строки браузера, а не ссылка поделиться в Youtube. Также, если вы знаете, можно запретить в конце видео Youtube показ похожих видеороликов. Но для этого нужно добавить к адресу в коде iframe ролика параметр – ?rel=0. Но как это сделать, ведь мы копируем адрес из адресной строки? Так скажу вам, что API Magnific Popup позволяет нам настраивать код так, как нам нужно. Я поковырялся в документации и немного дополнил код инициализации.
// Type Iframe - видео Youtube (или Vimeo), карты Гугл или другой контент в iframe $('.popup-youtube').magnificPopup({ type: 'iframe', iframe: { patterns: { youtube: { index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index). id: 'v=', // String that splits URL in a two parts, second part should be %id% // Or null - full URL will be returned // Or a function that should return %id%, for example: // id: function(url) { return 'parsed id'; } src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0' // Урл, который берется из кода iframe } } } });Исходя из данного кода, видно, что мы создаем свой шаблон видео Youtube. В параметре “src” в конце добавляем параметр “rel=0” и все, теперь в конце видео не будет похожих роликов. Можете промотать видео до конца и посмотреть.
Тип – Ajax
В модальных окнах Magnific можно подгружать контент асинхронно, посредством технологии Ajax. Например, на демо-сайте я загружу страницу какой либо статьи в модальном окне. Демо-сайт работает на Joomla.
<a class="simple-ajax-popup" href="/novosti/5-novost-1.html?tmpl=component">Загрузить страницу в мод. окне Ajax</a>Это обычная ссылка на страницу статьи. Это всего лишь пример и я ставлю адрес статьи со своего сайта. Чтобы показать только контент, отбросив ненужные блоки (шапка сайта, сайдбар, подвал и т.д.) я добавлю в конец адреса параметр – ?tmpl=component.
Код инициализации:
// Тип Ajax - загрузка контента в модальном окне $('.simple-ajax-popup').magnificPopup({ type: 'ajax' });Форма в модальном окне
В данном случае форма будет загружаться с типом контента “inline“. В этом случае вы сможете спросить – а чем она отличается от первого варианта, где мы показывали просто текст? Ведь вместо теста мы можем вставить код формы. Да, все правильно, вместо текста будет просто код формы с дополнительной опцией в инициализации. Данная опция будет ставить фокус на определенном поле при загрузке формы. А это в свою очередь удобство. Лично мне нравится, что при открытии, скажем, формы поиска фокус сразу идет на поле ввода ключевого запроса.
// Форма в модальном окне с фокусом на поле Имя $('.popup-with-form').magnificPopup({ type: 'inline', focus: '#name' });<a href="#form-popup" class="popup-with-form">Открыть форму в модальном окне</a> <div id="form-popup" class="white-popup mfp-hide"> <form action="#"> <div><input id="name" class="inputbox" type="text" placeholder="Ваше имя" /></div> <div><input id="email" class="inputbox" type="email" placeholder="Ваше e-mail" /></div> <div><textarea name="mess" id="mess" class="inputbox" cols="30" rows="10" placeholder="Ваше сообщение"></textarea></div> <div><input type="submit" value="Отправить"></div> </form> </div>В данном случае при открытии формы фокус срабатывает на поле с id=”name” – Имя.
Диалоговые модальные окна
Чем данное окно отличается от предыдущих с типом inline? Практически ничем, за исключением того, что данное окно не закрывается по клику на затемненной области. Также скрыта кнопочка с крестиком. Для закрытия мы будет использовать другой объект. Таким образом можно создавать диалоговые окна на сайте.
// Диалоговое окно $('.popup-modal').magnificPopup({ type: 'inline', preloader: false, modal: true }); $(document).on('click', '.popup-modal-dismiss', function(e) { e.preventDefault(); $.magnificPopup.close(); });Здесь, как видим, используются дополнительные опции. О некоторых из них мы поговорим ниже.
<a class="popup-modal" href="#test-modal">Открыть модальное окно</a><div id="test-modal" class="white-popup mfp-hide"> <p style="text-align: right;"><a class="popup-modal-dismiss" href="#">Закрыть</a></p> <h3>Диалоговое окно</h3> <p>You won't be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions.</p> </div>Опции плагина
Теперь давайте рассмотрим некоторые опции плагина Magnific Popup.
mainClass
Тип – string (строка)
По умолчанию – empty
Данной опцией мы можем задать класс общему родительскому блоку всплываемого контента. Исходя из этого мы можем задать свое оформление конкретному окну. Также класс присваивается и блоку с затемненным фоном. Опять таки, можем задать цвет не черный, а скажем, белый. Здесь уже ваш полет фантазии расширяется.
Также, отталкиваясь от присваиваемого класса, мы можем задавать различные эффекты всплывания окна. Делается это все на CSS. Давайте зададим анимацию первому модальному окну, рассмотренного в данной статье выше. Это окно с текстом.
Создадим отдельную инициализацию с возможностью анимации.
// Модальное окно с эффектом ZoomIn $('.popup-with-zoom-anim').magnificPopup({ type: 'inline', removalDelay: 300, mainClass: 'my-mfp-zoom-in' });Создадим правила анимации в CSS
/** * Fade-zoom animation for first dialog **/ /* start state */ .my-mfp-zoom-in .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* Dark overlay, start state */ .my-mfp-zoom-in.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } /* animate out */ .my-mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /** * Fade-move animation for second dialog */ /* at start */ .my-mfp-slide-bottom .zoom-anim-dialog { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ); } /* animate in */ .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); transform: translateY(0) perspective( 600px ) rotateX( 0 ); } /* animate out */ .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog { opacity: 0; -webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); -o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); } /* Dark overlay, start state */ .my-mfp-slide-bottom.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-slide-bottom.mfp-ready.mfp-bg { opacity: 0.8; } /* animate out */ .my-mfp-slide-bottom.mfp-removing.mfp-bg { opacity: 0; }<p><a class="popup-with-zoom-anim" href="#text-popup-anim">Вызвать окно с текстом</a></p><div id="text-popup-anim" class="zoom-anim-dialog white-popup mfp-hide"> <p>С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение направлений прогрессивного развития.</p> </div>
Если заметите в коде инициализации мы использовали дополнительную опцию – removalDelay. Без данной опции анимация срабатывать не будет.
removalDelay
Тип – integer
По умолчанию – 0
Задержка удаления Popup из DOM. Значение соответствует миллисекундам.
preloader
Тип – boolean
По умолчанию – true
Индикатор текущего состояния. По умолчанию при загрузке контента выводится надпись – Loading… Если опция включена, она всегда присутствует в DOM, меняется только текст внутри него. В зависимости от состояния у блока меняется класс. В CSS мы можем задать разное оформление. Вот список классов:
/* Процесс загрузки */ .mfp-s-loading { } /* Удачная загрузка */ .mfp-s-ready { } /* Загрузка с ошибкой */ .mfp-s-error { }closeBtnInside
Тип – boolean
По умолчанию – true
Если включено, скрипт добавляет кнопку с крестиком в контейнер popup окна. Если вам нужно, чтобы она была за пределами модального окна, то достаточно передать значение – false
closeBtnInside: false
closeOnBgClick
Тип – boolean
По умолчанию – true
Закрывает модальное окно по клику на затемненной области.
alignTop
Тип – boolean
По умолчанию – false
Если включено, выравнивает окно по верхнему краю, а не по центру. Выравнивание работает с помощью добавления класса – mfp-align-top.
disableOn
Тип – integer
По умолчанию – null
Отключает действие, если максимальная ширина окна браузера равна заданному значению. Может принимать и функцию, которая должна вернуть правду или ложь.
disableOn: 768 или disableOn: function() { if( $(window).width() < 600 ) { return false; } return true; }Это далеко не все опции плагина. Я выбрал лишь некоторые из них, которые сам использую. Если брать все во внимание, то статья получится слишком большой. Вы можете расширить этот список самостоятельно, если заглянете в документацию на официальном сайте.
Я надеюсь вы поняли каковы возможности Magnific Popup. Лично я сам еще не все возможности данного плагина изведал. Даже сейчас по ходу написания данной статьи я открыл для себя новые возможности Magnific.
Напоследок хочу дать вам ссылку на Codepen автора с некоторыми примерами Magnific Popap – http://codepen.io/collection/nLcqo/. Все, на этом и завершу.
Надеюсь вам данная статья пригодится. Всем спасибо за внимание. На связи был Заур Магомедов. До встречи в следующих постах!
zaurmag.ru
Назначение и основные функции всплывающих окон
Popup-формы и окна — замечательный маркетинговый инструмент, способный работать на повышение конверсии как отдельной страницы личного блога, так и специализированного коммерческого сайта. Страницы с хорошо продуманными и качественно реализованными всплывающими окнами, согласно исследованиям, конвертируются в 13 раз эффективнее обычных. И это повод не только добавить окна popup на сайт, но и разобраться с инструментами для их создания.
Из отрицательных моментов, связанных с необдуманным и не целевым использованием на сайте подобного способа воздействия на аудиторию, можно назвать естественный отток посетителей (если popup-окна идентифицируются ими как спам) и нелюбовь поисковых систем (в частности, при использовании полноэкранных баннеров с рекламой и ссылками), а значит, и понижение в поисковой выдаче.
Если же использовать этот инструмент грамотно, дозировано и осторожно, привлекающий внимание пользователя всплывающий баннер при входе на сайт (или при его закрытии) способен помочь в решении различных задач, возникающих перед владельцем сайта:
- проведение опросов;
- получение быстрой обратной связи;
- уведомление посетителей о предстоящих событиях и промоакциях;
- получение репостов и лайков в социальных сетях;
- увеличение количества подписчиков.
Как правило, любой современный плагин всплывающего окна WordPress отличается возможностями тонкой настройки по времени (появляется через заданное количество проведенного на сайте времени) и по поведению (появляется после просмотра определенного объема текста, перехода на другие страницы, выхода с сайта).
Улучшение взаимодействия с посетителями сайта возможно за счет постоянного изучения аналитики показа и кликабельности всплывающих окон, тестирования различных форматов баннеров, изображений, заголовков, текстов, дизайна и расположения всех составляющих всплывающий блок элементов. Найти необходимые формы, пропорции и цвета, создать привлекательные и побуждающие к действию тексты в каждом конкретном случае — вызов для маркетолога.
Сегодня мы не будем вникать в тонкости настройки плагинов, ограничившись перечислением их функциональных возможностей. Для того, чтобы сделать отвечающий поставленной задаче всплывающий баннер WordPress, потребуется детальное изучение каждой опции, а в некоторых из popup-плагинов — таких опций десятки.
Бесплатные popup-окна WordPress
В репозитории WordPress можно найти множество popup-плагинов, новых и развиваемых создателями в течение нескольких лет. Устанавливаются они на блог или сайт стандартным образом: меню консоли Плагины — Добавить новый, Поиск по названию, кнопки Установить и Активировать. Практически все представленные плагины имеют премиум-версию, значительно расширяющую функционал. Рассмотрим наиболее популярные из них.
Popup Maker — Popup Forms, Optins & More
Popup Maker — WordPress-плагин с огромным количеством настроек и безграничным потенциалом для создания любых типов окон popup на сайт. Русифицирован частично, но в достаточной мере для того, чтобы в нем можно было работать русскоязычным пользователям: основные пункты меню переведены, есть возможность вручную заменить служебные сообщения, показываемые посетителю, их переводом.
Поддерживает популярные плагины для создания контактных форм: Contact Form 7, Gravity Forms, Ninja Forms. Есть страница загрузки полутора десятков платных расширений, в числе которых интеграция с различными сервисами почтовых рассылок, возможность добавления во всплывающее окно видео, аналитики и т.д.
Плагин имеет собственный редактор всплывающих окон. Предоставляет 6 тем оформления, каждую из которых можно изменять дополнительно. Все изменения моментально отображаются в окне предварительного просмотра, что очень удобно. Настраиваются следующие опции:
- цвет и степень прозрачности фона за всплывающими окнами;
- внутренние отступы, цвет фона и его прозрачность для контейнера;
- толщина, цвет, стиль и радиус закругления границ;
- параметры тени (величина смещения, степень размытия, размах, цвет, прозрачность);
- параметры заголовка (шрифт, размер, цвет, высота строки, выравнивание);
- оформление текста (шрифт, цвет, толщина, стиль);
- внешний вид и расположение кнопки закрытия окна.
Для самого popup-окна можно установить позицию, размер, один из трех анимационных эффектов, настроить скорость анимации, настроить триггеры вызова (по щелчку пунктов меню, боковых панелей, кнопок, изображений и т.д.) и условия показа (кто и когда будет видеть вплывающий блок).
Popup Builder — Responsive WordPress Pop up
Замечательный плагин Popup Builder для WordPress с продуманным конструктором всплывающих окон, мощный и одновременно простой в использовании. Один из лучших для создания модального окна, способного захватить внимание посетителей и представить им различные виды уведомлений, предложений и скидок.
Плагин предлагает создание 12-ти типов всплывающих окон в PRO-версии (скриншот выше) и 6 тем визуального оформления. В бесплатной модификации возможностей существенно меньше, но их достаточно для того, чтобы сконструировать привлекательный баннер с информацией для посетителя: можно добавлять изображения, кнопки подписки на Facebook-аккаунт, шорткоды, редактировать HTML-код.
Количество создаваемых окон не ограничено. Полностью настраиваемые темы, цвета, размеры, местоположение на экране, прозрачность и другие параметры. Полтора десятка эффектов анимации, возможность проигрывать звук из подгружаемого аудиофайла, управлять скроллингом контента в окне и на странице под окном.
Содержимое popup-окна компонуется в визуальном или HTML-редакторе, идентичном стандартному редактору WordPress.
Popup by Supsystic
Popup-плагин от Supsystic поможет делать специальные предложения, продвигать услуги и продукты, получать подписчиков на рассылку. С одним из более чем 60-ти предоставляемых бесплатно шаблонов 18-ти типов легко создать лайтбокс для показа посетителям сайта с любой необходимой информацией. Во всплывающем окне можно разместить уведомления для посетителей, видео, Google-карты, подписку на аккаунт в Facebook, форму подписки на рассылку, форму контактов или проверки возраста.
Плагин позволяет добавлять всплывающие баннеры для сайта в неограниченном количестве и с различной конфигурацией. Для этого достаточно вставить шорткод на той странице сайта, где необходимо показать popup-окно. Есть возможность автоматического показа с задержкой времени.
Всплывающее окно может быть показано в любом месте страницы. Есть настройка ширины баннера в пикселях и процентах от ширины окна браузера и возможность выбора адаптивного режима. Настраиваются цвет и прозрачность элементов, предлагается набор вариантов кнопки закрытия окна.
Интерфейс панели настроек плагина русифицирован и интуитивно понятен. Можно адаптировать любое popup-окно для сайта под индивидуальные потребности, присутствует возможность редактирования CSS и HTML-кода.
Можно в реальном времени отслеживать статистику по добавленным всплывающим окнам. В PRO-версии плагина есть блок настроек A/B тестирования. Базовые навыки по созданию popup-окна поможет получить видео-руководство, интегрированное в настройки плагина.
Плагины независимых разработчиков
Без упоминания этих альтернативных профессиональных решений обзор popup-плагинов для WordPress был бы неполным. В рассматриваемых ниже премиум-плагинах все, за что в большинстве случаев придется доплачивать пользователю плагина из репозитория (причем, доплачивать за каждую дополнительную опцию), уже включено в функционал. При этом стоимость таких инструментов весьма демократична и составляет 24-25 долларов.
Ninja Popups
Самый продаваемый профессиональный popup-плагин для WordPress, позволяющий конвертировать просмотры страниц сайта в конкретные действия посетителей. Обладает библиотекой с десятками прекрасных полностью редактируемых шаблонов, созданных практически под каждый информационный повод.
Разрешает открывать всплывающие окна в случаях, когда пользователь просмотрел заданный процент контента на странице или через определенное количество секунд бездействия пользователя. Есть таргетинг на уровне страницы: разные окна для каждой страницы/записи, показ окна для одной страницы или для всех.
Ninja Popups работает со всеми популярными сервисами e-mail маркетинга (их в списке несколько десятков). Присутствует собственная аналитика и функционал A/B тестирования всплывающих окон и слайдеров.
Для реализации уже имеющихся дизайн-макетов popup-окон в плагин включен продвинутый визуальный конструктор с предпросмотром вносимых изменений, позволяющий перетаскивать в макет будущего окна любые необходимые элементы (изображения, видео, блоки с текстом и HTML-кодом, списки, поля ввода данных и скрытые поля, карты, кнопки, чекбоксы, защиту от спама reCaptcha и др.). Интерфейс англоязычный, но достаточно простой и понятный.
Master Popups
Мощнейший инструмент для создания всего разнообразия видов всплывающих окон. Есть полсотни различных готовых шаблонов, которые можно редактировать. Присутствует возможность использования собственного CSS-кода, JavaScript и Cookie. В расширенных настройках можно выбрать, какие действия будут выполняться после открытия/закрытия окна и отправки формы, при бездействии пользователя, при решении покинуть страницу.
Плагин Master Popups обладает отличным визуальным редактором с интуитивно понятным интерфейсом и полным набором базовых элементов и форм для построения макета. Размеры всплывающих уведомлений, параметры цвета и прозрачности, эффекты анимации, настройки границ, параметры наложения и фона, шрифты — все это редактируется несколькими движениями. Предусмотрена замена выводимых плагином англоязычных сообщений для пользователей на собственные — эти данные прописываются вручную на отдельной странице настроек. Есть функция экспорта созданных баннеров для использования на других сайтах.
Этот плагин можно назвать достойным конкурентом не только упомянутому выше Ninja Popups, но и любому решению из официального репозитория WordPress.
pro-wordpress.ru