Как сделать всплывающее окно в 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.

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

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

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

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

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

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

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

Обзор

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

Оценка

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

WordPress: плагины для создания всплывающего окна

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

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

По статистике, страницы с хорошо настроенными pop-up окнами конвертируются в 13 раз лучше, чем страницы без них.

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

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

Как сделать всплывающее окно эффективным — этому можно посветить отдельную статью. А в этой статье я расскажу о плагинах, при помощи которых можно сделать всплывающее окно на своем WP-сайте.

Popup Maker

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

Настройка плагина:

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Popup Builder

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

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

Результат:

Popup by Supsystic

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

При создании нового окошка дается на выбор более 50 шаблонов:

Естественно, после выбора шаблон можно «доработать» под себя. Настроек много, интерфейс понятный и удобный:

Некоторые настройки (например, редактирование надписей на полях формы подписки) есть только в платной версии, стоимость составляет 29$ за один сайт.

Результат:

Заключение

Всплывающие окна — простой в настройке инструмент, который будет полезен на любом сайте. Перечисленные в статье плагины — это, конечно, далеко не полный список всех имеющихся, но я рекомендую начать с них, потому что они бесплатные и легко настраиваются. А если pop-up окна докажут свою эффективность на вашем сайте, то можно посмотреть в сторону платных вариантов: либо PRO-версий, либо платных плагинов вроде Master Popups или Ninja Popups .

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

Часто задаваемые вопросы

Как я могу использовать всплывающие окна для увеличения базы email?

Люди, которые используют Popup Maker для расширения списка email для рассылки, нашли множество творческих способов сделать это. Вот некоторые из наиболее распространенных всплывающих окон:

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

Более того, Popup Maker интегрируется со всеми наиболее популярными плагинами форм, поэтому вы можете легко встроить уже созданную форму прямо во всплывающее окно!

Каким образом всплывающие окна могут увеличить продажи и доходы моего магазина WooCommerce?

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

Некоторые всплывающие окна, из представленных, хорошо подходят для сайтов интернет-магазинов, например:

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

Где документация?

Ознакомиться с документацией можно здесь

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

С помощью «триггеров» вы можете установить, когда открывается всплывающее окно. Пример our triggers documentation here

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

Используя «cookies», вы можете настроить, через какой период времени всплывающее окно снова откроется, если вообще когда-либо откроется. Ознакомьтесь с нашей документацией по файлам cookie

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

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

Почему мои всплывающие окна не открываются / не работают?

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

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

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

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

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

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

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

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

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

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

• 5 разных мест для отображения всплывающих окон.
• Визуальный конструктор шаблонов для управления дизайном и содержанием ваших всплывающих окон.
• Подробные правила отображения для конкретного контента, пользователей, устройств и так далее.
• 3 различных правила запуска, включая время на сайте и глубину прокрутки
• Интеграция с другими плагинами форм, такими как WPForms, Gravity Forms, MailPoet и другими.

Работа с WP Popups.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Внизу страницы
• Внизу слева
• Внизу справа
• По центру
• Вверху
• Сверху слева
• Сверху справа.

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

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

• Входная анимация
• Размер — вы можете изменить ширину, высоту и отступы
• Цвета
• Указать размытие сайта
• Границы
• Тени
• Размер и положение кнопки закрыть

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

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

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

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

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

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

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

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

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

• Определенный контент — типы сообщений, типы страниц, категории, теги, пользовательские таксономии, определенные сообщения и так далее.
• Устройства — мобильные, планшеты или ПК
• Пришедшие с — например из определенного веб-сайта или из поисковой системы.
• Браузеры — например Chrome или Firefox
• Новые посетители или постоянные посетители
• И ряд других правил.

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

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

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

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

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

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

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

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

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

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

• Встроенной аналитики и интеграции отслеживания событий в Google Analytics для отслеживания ваших всплывающих окон в Google Analytics
• Встроенное A / B-тестирование для сравнения нескольких всплывающих окон
• Прямая интеграция с 10+ почтовыми маркетинговыми услугами, включая Mailchimp
• Еще больше правил отображения
• Больше триггеров, включая намерение выхода со страницы сайта.
• Планирование всплывающих окон
• Правила геотаргетинга
• Больше всплывающих позиций, например, всплывающие окна на весь экран.
• Больше анимаций

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

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

Заключение.

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

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

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

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

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

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

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