Как сделать всплывающее окно в вордпрессе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обзор

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

Оценка

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

Источник

Как сделать всплывающие окна в WordPress: 7 лучших плагинов 2018

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

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

Читайте также:  Как на айфоне сделать оповещения вконтакте на

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

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

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

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

2. Slick Modal (Premium)

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

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

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

3. Layered Popups (Premium)

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

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

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

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

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

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

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

5. ConvertPlus (Premium)

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

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

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

6. Master Popups (Premium)

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

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

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

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

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

Читайте также:  Как правильно сделать кисти для шали

Источник

Плагины всплывающего окна WordPress

Привет, уважаемые читатели!

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

Назначение и основные функции всплывающих окон

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

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

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

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

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

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

Бесплатные popup-окна WordPress

В репозитории WordPress можно найти множество popup-плагинов, новых и развиваемых создателями в течение нескольких лет. Устанавливаются они на блог или сайт стандартным образом: меню консоли Плагины — Добавить новый, Поиск по названию, кнопки Установить и Активировать. Практически все представленные плагины имеют премиум-версию, значительно расширяющую функционал. Рассмотрим наиболее популярные из них.

Popup Maker — WordPress-плагин с огромным количеством настроек и безграничным потенциалом для создания любых типов окон popup на сайт. Русифицирован частично, но в достаточной мере для того, чтобы в нем можно было работать русскоязычным пользователям: основные пункты меню переведены, есть возможность вручную заменить служебные сообщения, показываемые посетителю, их переводом.

Поддерживает популярные плагины для создания контактных форм: Contact Form 7, Gravity Forms, Ninja Forms. Есть страница загрузки полутора десятков платных расширений, в числе которых интеграция с различными сервисами почтовых рассылок, возможность добавления во всплывающее окно видео, аналитики и т.д.

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

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

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

Плагин предлагает создание 12-ти типов всплывающих окон в PRO-версии (скриншот выше) и 6 тем визуального оформления. В бесплатной модификации возможностей существенно меньше, но их достаточно для того, чтобы сконструировать привлекательный баннер с информацией для посетителя: можно добавлять изображения, кнопки подписки на Facebook-аккаунт, шорткоды, редактировать HTML-код.

Читайте также:  Как сделать вибростол для еврозабора своими руками

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

Содержимое popup-окна компонуется в визуальном или HTML-редакторе, идентичном стандартному редактору WordPress.

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.

Заключение

Достижение поставленной цели (информирование посетителя, предложение скидки, призыв подписаться на рассылку) — во многом, это результат экспериментов с текстом и дизайном блока, результат грамотного подхода к показу баннеров. А представленный в статье выбор инструментов для создания, настройки и вывода на сайте popup-окон поможет в реализации этой задачи. Желаю успеха!

Источник

Оцените статью
Как сделать своими руками
Adblock
detector