WordPress модальное окно – WordPress контактная форма во всплывающем окне. Ajax форма обратной связи в модальном окне

7 плагинов для легкого добавления модального окна в WordPres

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

 

Popup Maker

Popup Maker — преемник Easy Modal, является, пожалуй, самым популярным модальным оконным плагином WP, и это по причине — он полон функций. С его помощью вы можете создавать отзывчивые формы отказа, слайд-баннеры, баннеры, плавающие стикеры, уведомления, загрузочные экраны и лайтбоксы видео. Этот плагин работает с наиболее популярными плагинами для создания форм (такими как Ninja Forms, Gravity Forms и Contact Form 7) и программ для создания списков (таких как MailChimp, AWeber, InfusionSoft, GetResponse и т. д.). Плагин предлагает много с точки зрения конфигурации. Благодаря триггерам и условиям вы можете точно настроить, кто и когда видит ваши модалы. У вас также есть модуль статистики, поэтому вы знаете, какие из ваших всплывающих окон работают лучше всего.

 

Popup Builder

Popup Builder — еще один популярный плагин для модальных окон WP. Он также имеет много функций, и, на мой взгляд, с точки зрения параметров конфигурации он предлагает больше, чем большинство других плагинов. На самом деле, вы можете настроить практически любой аспект модального вида, о котором вы только можете подумать, — не только когда показывать его, кому и где показывать, но и полностью настраивать его внешний вид. Все это включено в бесплатную версию. Если вам нужны более продвинутые функции, такие как iframe, видео, произвольное отображение, всплывающие окна или планирование всплывающих окон, вы можете проверить версию Pro.

 

Popups — WordPress Popup

Если по какой-то причине вам не нравятся Popup Maker и Popup Builder и вы ищете всплывающий плагин с множеством функций, вы можете попробовать Popups — WordPress Popup . Он работает со всеми основными программами для создания форм, такими как Gravity Forms, Ninja Forms, Contact form 7 и более, но его главное преимущество — многочисленные фильтры, которые он предлагает. Благодаря этим фильтрам вы можете точно настроить, когда, где и как отображаются ваши всплывающие окна. Платная версия включает в себя больше (например, интеграция с MailChimp, Aweber и другими почтовыми программами, A / B-тестирование, больше правил отображения и т. д.).

 

Modal Window

Modal Window поставляется с довольно умеренным набором функций по сравнению с другими тремя плагинами, но если по какой-то причине они вам не нравятся или они не работают с вашей темой, всегда приятно иметь больше опций. Бесплатная версия Modal Window имеет множество ограничений, таких как возможность создавать только три мода, но для быстрого решения с базовой функциональностью всплывающих окон это более чем нормально.

 

Popup by Supsystic

Popup by Supsystic — отличный выбор, если у вас много мобильных посетителей, потому что он поставляется с тридцатью готовыми для мобильных устройств всплывающими шаблонами. Как и в случае с другими модальными оконными плагинами, этот предлагает триггеры, условия и функции настройки. Он также предлагает некоторые не очень распространенные функции для бесплатного плагина, такие как всплывающие окна в социальных сетях, блокировки ссылок или A/B-сплит-тестирование.

 

Exit Popup

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

 

SMNTCS Shortcode Popup

SMNTCS Shortcode Popup — еще один маленький и приятный плагин, который вы можете использовать в основном для всплывающих окон контактной формы. Плагин хорошо работает с Contact Form 7, Gravity Forms, TablePress и т. д., Как и в предыдущем плагине, он делает только одно, но делает это хорошо.

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

Плагины модального окна на WordPress

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

Elegance Modal Box

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

Media Modal

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

Посмотреть демо.

Ultimate Modal

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

WP Modal Popup with Cookie Integration

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

Посмотреть демо.

WP Modalplate

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

Master Popups v2.5.3 — лучший плагин модальных окон для WordPress

Master Popups – мощный плагин WordPress для создания модальных всплывающих окон, полноэкранных всплывающих окон, предупреждающих баров, всплывающих окон слайдов и всплывающих подсказок в контенте и в виджетах.

Вы можете легко создавать всплывающие окна из предварительно созданных шаблонов несколькими кликами мышки. Разработчики создали его, чтобы вы могли добавлять любые типы контента в свои всплывающие окна. Master Popups включает в себя формы для подписки по электронной почте, чтобы вы могли получать больше подписчиков и сохранять все свои данные непосредственно в WordPress или в своем любимом почтовом сервисе, например таких, как Mailchimp, GetResponse и т. д.

Что вы можете создать с помощью Master Popups?

• Модальные всплывающие окна
• Полноэкранные всплывающие окна
• Панель уведомлений
• Слайды во всплывающих окнах
• Липкие всплывающие окна
• Всплывающие подсказки в контенте и виджетах

Что вы можете показать в любом всплывающем окне?

• Формы подписки
• Контактные формы
• Изображения
• Видео с Youtube / Vimeo / HTML5
• Пользовательское содержимое из WordPress
• Шорт-коды

Ключевые особенности

Полностью настраиваемый

• Неограниченное количество всплывающих окон, вы можете создать столько всплывающих окон, сколько вы хотите.
• Размер всплывающего окна: ширина, высота или полноэкранное всплывающее окно
• Настройки фона
• Анимация при открытии/закрытии окна
• Наложение настроек, цветов, непрозрачности
• Настраиваемый предварительный загрузчик
• Липкий режим
• Параметры для загрузки файла и перенаправления пользователя после отправки формы
• Куки, чтобы показывать всплывающее окно только один раз
• Предустановленные подписные / контактные формы
• Поддержка коротких кодов
• Встроенные всплывающие окна: вставляйте свои всплывающие окна до или после контента поста / страницы. Или в области виджетов
• Шаблоны готовых всплывающих окон
• Сохранение данных для использования на другом веб-сайте.

Тригеры – когда запускать всплывающее окно?

• On Click: отображение всплывающего окна путем нажатия на определенный элемент
• On Page Load: отображение всплывающего окна автоматически через X секунд
• On Exit Intent: отображение всплывающего окна, когда пользователь пытается покинуть ваш сайт
• On User Inactivity: отображение всплывающего окна после X секунд бездействия пользователя
• On Scroll: отображение всплывающего окна после прокрутки вниз расстояния X, после сообщения или после определенного элемента
• Display Inline: встроить всплывающее окно автоматически до или после содержимого поста / страницы

Таргетинг по типу содержимого

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

• Отображать всплывающее окно на всём сайте
• Отображать всплывающее окно на главной странице
• Отображение всплывающих окон в архивах
• Отображать всплывающие окна на страницах
• Отображать всплывающие окна в постах
• Отображать всплывающие окна в категориях
• Отображать всплывающие окна в тегах
• Отображать всплывающие окна по определенным URL-адресам
• Отображать всплывающие окна по типу постов
• Отображение всплывающих окон для определенных пользователей: пользователи, которые вошли в систему или не вошли в систему
• Отображение всплывающих окон по типу устройств: настольный компьютер, планшет, мобильник

Интеграция с плагинами и сервисами рассылки электронной почты

В плагине Master Popups есть интегрированная система, которая позволяет хранить и управлять лидами, а также он может быть легко интегрирован со многими сторонними службами рассылки электронной почты (CRM), такими как:

• Mailster (MyMail)
• MailChimp
• Constant Contact
• Hubspot
• Infusionsoft
• Aweber
• Campaign Monitor
• Autopilot
• Mautic
• Benchmark Email
• Active Campaign
• Sendinblue
• MailerLite
• GetResponse
• Mad Mimi
• Freshmail
• Pipedrive
• SimplyCast
• Customer.io
• TuNewsletter
• Mailgunn

 

https://codecanyon.net/item/masterpopups-multipurpose-popup-plugin-for-wordpress-with-easy-email-marketing-integration/20142807

https://www.upload.ee/files/9551970/masterpopups-v253.rar.html
https://www4.zippyshare.com/v/paaRCG2f/file.html
http://www.solidfiles.com/d/M2KdDPvdyd4ve
https://uptobox.com/75ucj0f05jui
https://userscloud.com/0ntwk3imgvg9
https://openload.co/f/DkNjOvyvPxs/masterpopups-v253.rar
https://bayfiles.com/adue2at7b0/masterpopups-v253_rar
https://anonfile.com/b3u928t5b1/masterpopups-v253_rar
https://www.datafilehost.com/d/6f5de10f
https://dailyuploads.net/bw8qnev47akk
https://sendit.cloud/5ls10tqjgpgc
https://my.pcloud.com/publink/show?code=XZP0Yl7ZDfrIK1sXzSJWfm4zeMz1O7pHKkEX
https://mega.nz/#!6qZgUCiA!3_ZDEHTDVNziJdcBp2fUjaELMPBS8Dd47658ZTXEDK8
https://mir.cr/1OLAGh4N

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

Как создать всплывающее (модальное) окно в WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о создании модальных окон в WordPress. Возможности применения у модальных окон очень разнообразные. Их используют как для обычного всплывающего сообщения на сайте, так и для множества других задач, к примеру для создания всплывающей формы регистрации, объявления, акции и т.п.

В любом случае, главная задача модальных (всплывающих окон) — привлечь внимание пользователя.

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

Создание всплывающих окон в WordPress

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

1. Установите и активируйте плагин Popup Maker.

2. После активации плагина перейдите в Pupup Maker -> Add New.

3.  В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:

• 1) Указываем название модального окна. Это название пользователю видно не будет.
• 2) Заглавие модального окна.
• 3) Отмечаем галочкой страницы, на которых будем использовать всплывающее окно. Если указываем «On Entrie Site» — модальное окно можно использовать на всех страницах и записях сайта.
• 4) Наполнение всплывающего окна. Сюда пишем текст, вставляем изображения и т.п. В общем, делаем наполнение по желанию. В нашем примере я вставил фрейм видеозаписи с youtube.
• 5) Указываем размер модального окна. Размер можно указать как в процентах, так и в пикселях. Значение «Auto» — автоматически подбирает размер модального окна. В случае добавления видеозаписи это лучший вариант.

• 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
• 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
• 8) Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
• 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
• 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.

• 11) Настройки закрытия модального окна. Click Overlay to Close — закрытие модального окна при нажатии мимо него. Press ESC to Close — закрытие модального окна клавишей Esc. Press F4 to Close — закрытие клавишей F4. Я отмечаю все пункты, дабы не злить пользователей сайта и упростить возможность закрытия всплывающего окна 😉
• 12) Настройки автоматического открытия модального окна. В нашем примере его использовать не будем.

4. После того как мы выполнили настройки, нажимаем кнопку «Опубликовать». Таким образом мы создали всплывающее (модальное) окно.

Настройки внешнего вида всплывающего окна

После создания всплывающего окна можно настроить его внешний вид. Для этого переходим в Popup Maker -> Theme.

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

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

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

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

При создании модального окна ему назначается два класса, которые являются уникальными идентификаторами модального окна. Один из идентификаторов нужно указать в элементе, при клике на который должно открываться модальное окно.

Для того чтобы узнать class-идентификатор вашего модального окна переходим в Popup Maker -> All Popups.

На открывшейся странице мы видим два класса, которые являются идентификаторами созданного нами модального окна, в нашем примере это popmake-106 и popmake-primer-vsplyivayushhego-okna. Использовать можно любой из них.

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

В примере будем использовать класс popmake-106.

Открытие модального окна при клике по ссылке:

<a href="#">Открыть всплывающее окно</a>

Открытие модального окна при нажатии кнопки:

<button>Открыть всплывающее окно</button>

Открытие модального окна при клике по изображении:

<img src="popup-maker-icon.png" />

После добавления класса, модальное окно будет появляться при нажатии на элемент которому мы этот класс добавили.

Вот такое всплывающее окно в результате у нас получится:

Готово! Если у вас будут возникать вопросы или какие-либо проблемы при создании всплывающего окна — смело пишите в комментариях, постараюсь всем ответить и помочь.

Здравствуйте, друзья! В этом уроке мы поговорим о создании модальных окон в WordPress. Возможности применения у модальных окон очень разнообразные. Их используют как для обычного всплывающего сообщения на сайте, так и для множества других задач, к примеру для создания всплывающей формы регистрации, объявления, акции и т.п. В любом случае, главная задача модальных (всплывающих окон) — привлечь внимание пользователя. Также хочу сразу предупредить, что урок будет длинным. Не пугайтесь, все очень просто и делается достаточно быстро. Но для лучшего понимая я постараюсь хотя бы по пару слов написать по настройкам, которые вам смогут рано или поздно пригодиться. Создание всплывающих окон в WordPress И так,…

Проголосуйте за урок

100

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.58 ( 22 голосов ) 100

Плагины для создания всплывающих окон на сайте WordPress 2018

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

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

1.Popup Maker (бесплатно)

Popup Maker создает любые типы модальных или контентных наложений для веб-сайтов WordPress. Он поддерживает самые популярные плагины форм, такие как формы Gravity, Ninja, Contact Form 7 и другие. У Popup Maker есть полезный форум поддержки пользователей.

Используя этот плагин, вы можете легко создавать уведомления cookie ЕС, всплывающие окна, модальные формы и многое другое. Он включает в себя Auto Open Triggers, с помощью которого можно установить время и отобразить всплывающее окно в соответствии с вашими настройками. Можно диктовать частоту, когда пользователи увидят ваши всплывающие окна с помощью файлов cookie, а также редактировать файлы cookie так, как вам нужно, используя события создания файлов cookie.

Ключевые особенности:

• Форум поддержки Awesome.
• Идеально подходит для мобильных устройств.
• Можно использовать редактор всплывающих окон для создания любого содержимого.
• Автоматические открытые триггеры позволяют установить задержку.
• Триггеры, позволяющие запускать всплывающее окно.

2.Slick Modal (Premium)

Slick Modal – потрясающий всплывающий плагин, у которого есть более 50+ настроек, 30 переходов и 41 всплывающее демо. Эти параметры можно объединить вместе и добиться эффекта броска для ваших сообщений без использования каких-либо знаний в области кодирования. Можно создать всплывающее окно за считанные минуты, используя всплывающее окно предварительного просмотра и генератор настроек.

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

Ключевые особенности:

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

3.Layered Popups (Premium)

Layered Popups – самый быстрый и мощный плагин WordPress для реализации всплывающих окон, доступный на рынке. Используя этот плагин, можно создавать свои собственные многослойные всплывающие окна с анимацией. Также можно использовать более 200 красиво оформленных готовых шаблонов из библиотеки. Этот плагин включает расширенную систему таргетинга, которая упрощает настройку позиции всплывающего окна на экране.

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

Ключевые особенности:

• Расширенный таргетинг.
• Отлично справляется с различными событиями.
• Экспорт и импорт всплывающих окон.
• Конструктор всплывающих окон.
• Доступ к библиотеке всплывающих окон.

Смотрите также:

Все лучшие плагины в разделе Плагины WordPress.

4. Popups (бесплатно)

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

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

Ключевые особенности:

• Совместим с плагином основной формы.
• 5 видов всплывающих окон.
• Изменение цвета шрифта, фона и т. п.
• Шорт-коды для социальных акций.
• Настройка непрозрачного фона.

5. ConvertPlus (Premium)

ConvertPlus – это идеальный вариант плагина WordPress, который создает красивые всплывающие окна в считанные минуты. Плагин помогает конвертировать ваших посетителей в подписчиков, клиентов и социальных последователей. Посетители, нажав на ссылку, кнопку или изображение, увидят ваши предложения.

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

Ключевая особенность:

• Визуальный редактор для создания форм.
• Импорт и экспорт.
• возможность использовать расширенные триггеры прокрутки.
• Трассировка определенных сегментов посетителей вашего сайта.

6. Master Popups (Premium)

Master Popups идеально подходит для создания модальных всплывающих окон, панелей уведомлений, контекстных всплывающих окон и всплывающих окон Inline & widget. Всего за несколько кликов можно создавать всплывающие окна из предварительно созданных шаблонов. Плагин включает в себя систему захвата подписчиков из электронной почты и сохраняет все ваши данные непосредственно в WordPress.

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

Ключевые особенности:

• Всплывающие окна Inline и widgets.
• Интеграция электронной почты.
• Всплывающие шаблоны контактной формы.
• 40+ предварительно созданных шаблонов всплывающих окон.
• Возможность добавить липкий элемент управления в всплывающее окно.

7. Popup Builder (бесплатно)

Popup Builder позволяет добавлять настраиваемые всплывающие окна с помощью коротких кодов. Можно легко добавить неограниченное количество всплывающих окон с собственной конфигурацией. В этом плагине встроены эффективные настройки, которые упрощают настройку цвета, размеров и многие другие параметры. Этот плагин позволяет вставлять любой тип контента прямо в всплывающее окно. Можно легко и быстро вставлять их на любую страницу или в статью.

Ключевые особенности:

• Настройка пользовательских эффектов анимации.
• Изменение цвета фона.
• Возможность устанавливать местоположение всплывающего окна на экране.
• Настройка внешнего вида всплывающего окна.
• Добавить пользовательский класс.

Источник: themegrill.com

Смотрите также:

Модальное окно на WordPress с опцией подтверждения возраста

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

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

Плагин ITRO Popup Plugin

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

Некоторые особенности:

• Выбор определенных страниц, на которых будет всплывать окно
• Установка обратного отсчета для автоматического закрытия
• Автоматическое центрирование окна в браузере
• Установка времени до появления окна
• Опция подтверждения возраста
• Устанавливаем время для следующего всплытия окна по coockie

ITRO Popup Plugin

Настройка ITRO Popup Plugin

После установки плагина и его активации нужно перейти во вкладку «Настройки — ITRO Popup». Несмотря на то, что плагин не переведен на русский, ориентироваться по настройкам очень легко. Ниже прикладываю скриншоты с описанием нескольких пунктов, в остальном будет нетрудно разобраться.

Базовые настройки

Настройки опции возраста

HTML редактор

GENERAL SETTINGS

Disable easy closing – Отключить легкое закрытие. Окно невозможно будет закрыть клавишей Esc или кликом за пределом окна.
Popup seconds – Установить секунды для таймера обратного отсчета до автозакрытия
Popup delay – Установить время в секундах до появления всплывающего окна
Next visualization – Установить время в часах для повторного появления окна (вычисляется по coockie)
Show countdown – Показать обратный отсчет. Ниже меняем текст «This popup will close in» на «Окно закроется через:». Еще ниже выбираем цвет текста отсчета.

В самом низу параметров есть пункт «Enable age validation – Включить проверку возраста». На втором скриншоте увидите пример оформления. Там идет две кнопки: одна оставляет на сайте, если пользователь подтверждает возраст, другая перенаправляет на поисковик с запросом «Мультики».

Последняя часть параметров (Your text or HTML code) идет содержание модального окна. Редактор поддерживает все теги и можно свободно добавлять в него любую информацию.

Использование модальных окон на WordPress, и их создание с плагином и без него

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

Использование модальных окон на сайтах WordPress подразумевает привлечение внимание пользователя, поэтому мыслей, где можно их применить множество, например:

• Модальное окно WordPress может появляться при нажатии на картинку и, таким образом, пользователь увидит в нем увеличенное изображение.
• Посетитель сайта сможет, нажав на ссылку, увидеть текст полностью, не переходя на прочие ресурсы сайта.
• Есть возможность использовать модальные окна для того, чтобы воспроизводить видео на сайте.
• Использование модальных окон позволяет затребовать у пользователя ввода дополнительных данных, без которых дальнейшая работа с основным сайтом невозможна.

Как создается модальное окно WordPress

Модальное окно на сайте WordPress возможно создать при помощи плагинов, например, плагина CHBD Simple jQuery Modal либо вручную при помощи кода, что сложно для начинающих.

Модальные окна, созданные с помощью плагина, могут содержать в себе любую информацию, это может быть текст, аудио или видео, с помощью несложных настроек есть возможность подобрать подходящий внешний вид, размер и даже цвет. В базу плагина CHBD Simple jQuery Modal уже включены пять различных форм воспроизведения окон.

1. PopUpModal – после того как пользователь нажмет на гиперссылку модальное окно появится возле нее.
2. NotifyModal – модальное окно будет всплывать в центре экрана. Все пространство страницы вне окна засвечивается.
3. DialogModal – так же как и в NotifyModal, модальное окно появляется по центру, но остальное пространство не засвечивается, а наоборот, затемняется.
4. HintModal – модальное окно будет иметь образ подсказки, и воспроизводиться под гиперссылкой.
5. TitleModal – форма отображения аналогична HintModal, но у стиля TitleModal есть возможность изменить степень прозрачности для окон.

Для того чтобы установить плагин CHBD Simple jQuery Modal необходимо всего лишь его скачать, загрузить на сервер и активировать во вкладке «Плагины» в панели администратора WordPress. Подобротнее о способе установки почитайте тут.

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

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