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

Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker

В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

Это дает максимум удобства, разберем пошагово, как делать попапы с встроенными формами.

Установка Contact Form 7

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

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

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует “текст”, “e-mail” и “текстовая область”. В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.

Переместил получившийся шорткод между тегами label, должно получится так.

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

Делаем по аналогии, что получилось.

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

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

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

Установка Popup Maker

Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.

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

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

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

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

Не забываем нажать на опубликовать.

В запись загрузил изображение с помощью медиафалов.

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

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

Переходим обратно в Визуально и нажимаем предварительный просмотр.

Открывается новая страница в браузере.

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

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

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

Для более простого понимания процесса советую посмотреть авторское пошаговое видео.

Плагином Easy Fancy box в форме ссылки

В поисковой выдаче есть запросы на тему всплывающей обратной связи через плагин Easy Fancy Box в форме ссылки, поэтому обязан написать обзор. Устанавливаем дополнение поиском из панели.

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Настройки fancybox

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

Вставка кода в виджет

По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.

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

Пример исполнения

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Вносим ID в тригеры

Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.

Выводим параметры элемента в elementor

Показ формы связи через elementor

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

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

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

Источник

Плагины всплывающего окна 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-окон поможет в реализации этой задачи. Желаю успеха!

Источник

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

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

Источник

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