/ Попап окна в WordPress

3 июля, 2020 51
Категории: Статьи

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

В тройку наших лидеров по удобству и универсальности входят следующие модули:

Навигация по статье:

Popup Maker

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

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

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

1 e1592586256413 - Попап окна в WordPress

Также, в шаблоне настраивается позиция окна (относительная или абсолютная, фиксированная или адаптивная), его размеры (относительные или в пикселях), фон, анимация и ее продолжительность.

2 - Попап окна в WordPress

Наиболее часто попап окна используются для реализации всплывающих контактных форм. С помощью этого плагина легко создать новое попап окно и добавить в него шорткод контактной формы. Кроме того, в редакторе популярного плагина контактных форм Contact form 7 появляется вкладка настройки появления Popup после отправки контактных данных (извещения).

3 - Попап окна в WordPress
4 - Попап окна в WordPress
5 - Попап окна в WordPress

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

6 - Попап окна в WordPress
7 - Попап окна в WordPress
8 - Попап окна в WordPress

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

9 - Попап окна в WordPress

Popup Builder

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

10 - Попап окна в WordPress
11 - Попап окна в WordPress
12 - Попап окна в WordPress

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

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

13 - Попап окна в WordPress

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

14 - Попап окна в WordPress
15 - Попап окна в WordPress

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

16 - Попап окна в WordPress

Обратите также внимание на бесплатный шаблон попап окна в виде формы подписки. Такой вариант окна позволит собирать контактные данные посетителей, заполнят форму. Будет сохраняться эта база в пределах плагина и именно с него можно будет осуществлять рассылку писем. Этот вариант подойдет для небольших сайтов, где количество возможных подписок НЕ БУДЕТ составлять тысячи почтовых адресов. Бесплатный и достаточно удобный вариант для персональных блоков, небольших лендингов и страниц-презентаций.

Popups

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

17 - Попап окна в WordPress

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

18 - Попап окна в WordPress

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

19 - Попап окна в WordPress

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

20 - Попап окна в WordPress

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

21 - Попап окна в WordPress
22 - Попап окна в WordPress

Разработчики плагина принципиально переделали его и выпустили отдельным продуктом. Обновленное название wordpress popup plugin, который существует независимо от предыдущей версии. Все возможности Popups содержатся и здесь, но оформлены с акцентом на визуализацию всего процесса и с разбитыми по вкладкам настройками. Кому-то это может показаться удобным, поэтому при желании можно попробовать.

23 - Попап окна в WordPress
24 - Попап окна в WordPress

Выводы

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

Обсудить проект