Как сделать wordpress popup окно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обзор

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

Оценка

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

Источник

Лучший плагин для создания всплывающих окон на wordpress

Привет друзья! Всплывающие окна или pop up wordpress – это необходимый функционал для любого современного коммерческого сайта. Благодаря им можно повысить конверсию и поведенческие характеристики своего веб-ресурса. В модальные окна можно вставить все что угодно, например, контактную форму, форму авторизации, видеоролик, коммерческое предложение при закрытии страницы, уведомление об использовании куки и даже статью. Существует много решений для создания всплывающих окон на сайте, и пользователи ищут лучшие. В этой статье я постараюсь ответить на то какой лучше плагин для создания всплывающих окон на wordpress?

Плагин Popup Maker wordpress

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

Плагин popup maker wordpress

Настройка плагина pop up maker

Устанавливаем плагин pop up maker с репозитория вордпресс и активируем его. После активации панель с настройками появится в консоли администратора сайта. Далее рассмотрим самые необходимые на мой взгляд настройки плагина popup maker. Я остановлюсь только на некоторых из них.

Темы всплывающих окон

Первое на что я хотел бы обратить внимание, так это темы всплывающих окон. Плагин popup maker имеет несколько предустановленных тем, которые можно кастомизировать с помощью редактора настроек тем. Это темы

Также здесь можно установить свою тему, но я не вижу в этом необходимости, поскольку в редакторе можно изменить настройки отображения любой темы под свои нужды. Для примера я выбираю тему Light box.

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

Настройка темы модального окна

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

Выбор темы popup window

Итак, тема создана и выбрана как основная. Теперь переходим на вкладку «Создание всплывающего окна» и жмем на «добавить новое».

Как сделать pop up maker contact form 7

Далее давайте соединим плагин popup maker с contact form 7. Необходимым полем для дальнейшей настройки является поле «Имя всплывающего окна». Назовите его, например, contact. Имя всплывающего окна используется плагином для установки триггера на отображение всплывающего окна.

Далее установите плагин contact form 7 и скопируйте шорткод готовой контактной формы созданной плагином по умолчанию. Вставьте этот шорткод в поле «Текст» в визуальном редакторе и обновите страницу настроек.

Интеграция popup maker с contact form 7

Теперь можно сказать, что плагины pop up maker и contact form 7 соединены, модальное окно создано, но теперь нужно произвести дальнейшие настройки плагина popup maker и нового модального окна.

Pop up maker настройка поля «отображения»

Под визуальным редактором, в который был вставлен шорткод находятся дальнейшие настройки модального окна. В поле «Отображения» я выбираю размер окна. Плагин popup maker wordpress реализует шесть адаптивных размеров ширины окна в процентах.

Для вывода popup с contact form 7 я использую «Маленькое» окно. Такой размер смотрится аккуратно, и я не вижу смысла делать большое. Также здесь можно настроить позицию вывода модального окна. Например, назначить ему положение «верх центр» или «низ левый», или «середина правый». Я оставляю по умолчанию позицию «верх центр».

Поле «Закрыть»

Чтобы пользователь мог закрывать модальное окно нужно кликнуть по кнопке «крестик», находящейся в верхнем правом углу. Это не всем удобно и хорошо, когда окно закрывается кликом по любому месту экрана, то есть по оверлею вне зоны окна. Чтобы сделать это зайдите во вкладку «Закрыть», далее «Альтернативные методы» и активируйте соответствующий чекбокс.

Триггеры

Триггеры – это события, вызывающие появление всплывающего окна в браузере. Для появления модального окна нужно настроить хотя бы один триггер. Нажмите на кнопку «Добавить триггер» и появится окно с выбором двух тригерров «Открыть» или «Задержка времени / Автооткрытие». Из их названия нетрудно понять, что триггер «Открыть» предназначен для открытия модального окна кликом по элементу интерфейса страницы, а триггер «Задержка времени / Автооткрытие» для автоматического открытия модального окна после определенного промежутка времени, например, через 15 секунд после захода посетителя на страницу сайта.

Настройка триггера для вызова модального окна

Настройка триггера “Автооткрытия”

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

Получение селектора css для вызова popup окна

Вставляем css селектор в поле настроек триггера

Второй способ узнать селектор нужного элемента, это скопировать его класс в админбаре wordpress, то есть в верхней панели настроек. После активации плагина popup maker wordpress, его ярлык появился в админбаре. Вам нужно навести курсор на значок Popup maker / Инструменты / Получить селектор и кликнув по команде появится alert с уведомлением что «После нажатия кнопки «ОК» выберите элемент, для которого вы хотите выбрать селектор». Далее жмите на OK и потом по элементу, селектор которого вам нужен. Затем вы снова увидите alert с css классом элемента на который вы хотите настроить событие. Скопируйте его и вставьте в поле настройки триггера.

Еще один способ получить класс элемента для настройки триггера

Таким образом я сделал красивую контактную форму во всплывающем окне на своем сайте. Вот образец.

Пример работы popup maker contact form 7 на сайте wp-oleg

Единственное что мне пришлось так это поправить некоторые стили формы. Также я сократил количество рядов в теге textarea до 6-ти, вставив в поле [textarea minlength:6 your-message]. Так же я убрал теги обертки label для каждого input и вставил текcт находящийся в них в атрибут placeholder (placeholder “Ваш Email”) чтобы текст был внутри тегов input.

Таким образом появилась аккуратная и компактная контактная форма. Можете посмотреть на моем сайте ее внешний вид. Итак, как сделать pop up maker с contact form 7 мы разобрались, теперь я хочу показать еще кое-что.

Нацеливание на определенные страницы

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

Настройка показа модального окна на определенных страницах

Нажмите на «Выберите условие» нацеливания и страницу на которой вы хотите вызвать окно. Если одного условия мало, добавьте еще одно.

Настройка автооткрытия модального окна

Если вы хотите, чтобы модальное окно появилось автоматически через определенный промежуток времени, то активируйте триггер «Автооткрытие». Он позволяет установить временную задержку открытия модального окна через установленный вами промежуток времени.

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

Интеграция popup maker и mail chimp

Настройка куки в popup maker

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

Например, при создании триггера «Автооткрытие» назначьте ему куки «Форма подписки успешно» и установите время сохранения данной куки. По умолчанию здесь стоит кука на месяц, но вы можете увеличить это время. Также чтобы кука «Форма подписки успешно» сработала в настройках своего плагина включите интеграцию с сторонними плагинами. Я использую Mailchimp for WordPress (MC4WP) и у меня включена интеграция Custom «Integrate with custom third-party forms» и все работает.

Настройка куки в popup maker wordpress

Настройка куки в попап окне

Таким же образом в popup wordpress можно вставить форму регистрации и сделать вход в аккаунт в body press или вставить показ видео с YouTube.

Заключение

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

Источник

Как сделать всплывающие окна в 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 позволяет добавлять настраиваемые всплывающие окна с помощью коротких кодов. Можно легко добавить неограниченное количество всплывающих окон с собственной конфигурацией. В этом плагине встроены эффективные настройки, которые упрощают настройку цвета, размеров и многие другие параметры. Этот плагин позволяет вставлять любой тип контента прямо в всплывающее окно. Можно легко и быстро вставлять их на любую страницу или в статью.

Источник

Как сделать всплывающие окна (popup) на сайт WordPress

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

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

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

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

WP Popups: Список возможностей

WP Popups поставляется как в бесплатной версии на WordPress.org (WP Popups Lite), так и в премиум-версии с большим количеством функций.

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

Что вы получаете в бесплатной версии?

Работа с WP Popups.

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

Для создания нового всплывающего окна, вам нужное перейти к WP Popups → Add New.

В результате запустится интерфейс конструктора всплывающих окон.

1. Выберите шаблон

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

Бесплатная версия поставляется с двумя готовыми шаблонами — в то время как в премиум-версии шаблонов больше:

Для этого обзора я выбрал элегантный шаблон (Elegant Popup)

2.Добавьте контент.

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

Вы можете использовать вкладку «Content» чтобы добавить содержимое всплывающего окна с помощью классического редактора WordPress.

Кроме этого, здесь есть две примечательные особенности:

Когда вы вносите изменения в редакторе, вы сразу же видите эти изменения, показанные в предварительном просмотре вашего всплывающего окна:

3. Настройка внешнего вида

Теперь, на вкладке Appearance (Внешний вид) можно настроить место появление и дизайн всплывающего окна.

В бесплатной версии вы получаете семь различных вариантов позиции:

Выбрав новую позицию, вы сразу увидите свою форму в предварительном просмотре:

Теперь вы можете указать оставшиеся настройки:

4. Настройка правил отображения

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

Правила отображения — это то, где плагин WP Popups действительно превосходен.

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

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

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

Например, если вас поведенческие от поисковиков, то вы можете создать правило, которое гласит:

Если кто-то зашел с поисковика и использует мобильный телефон, то всплывающее окно не отображается.

В общей сложности, в бесплатной версии WP Popups вам предоставляется 26 различных правил отображения. Вы можете настроить таргетинг на:

Вы можете смешивать и сочетать все эти условия, используя правила И и ИЛИ:

И — все условия в группе правил должны быть выполнены, чтобы всплывающее окно отображалось.

ИЛИ — если выполнено хотя бы одно из условий из группы правил, то всплывающее окно появится.

5. Настройка параметров.

Теперь вам нужно настроить еще две важные детали:

Для этого вам нужно перейти в раздел Settings (настройки)

Что вы получаете с полной версии плагина WP Popups.

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

Премиум-версия дает вам доступ к:

Вы также получаете доступ к дополнительным готовым шаблонам.

Стоимость платной подписки составляет от 35 долларов в год, до 299 долларов в год.

Заключение.

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

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

Совсем другое дело, когда вы сами полностью контролируете этот вид рекламы. Когда вы сами устанавливаете, что именно показывать, кому показывать, когда показывать и как показывать.

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

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

В общем, если вам нужен отличный инструмент для создания всплывающих окон на сайт WordPress, то попробуйте WP Popups.

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

Источник