Как сделать всплывающее окно в wordpress
Обновлено: 18.05.2024
Лучший плагин для создания всплывающих окон на wordpress
Привет друзья! Всплывающие окна или pop up wordpress – это необходимый функционал для любого современного коммерческого сайта. Благодаря им можно повысить конверсию и поведенческие характеристики своего веб-ресурса. В модальные окна можно вставить все что угодно, например, контактную форму, форму авторизации, видеоролик, коммерческое предложение при закрытии страницы, уведомление об использовании куки и даже статью. Существует много решений для создания всплывающих окон на сайте, и пользователи ищут лучшие. В этой статье я постараюсь ответить на то какой лучше плагин для создания всплывающих окон на wordpress?
Плагин Popup Maker wordpress
Не буду пытаться сохранять интригу и сразу скажу, что на мой взгляд лучший плагин это pop up maker wordpress. Ниже опишу почему этот плагин я считаю лучшим.
- Плагин бесплатный
- Позволяет создавать неограниченное количество поп ап окон с любым содержимым
- Поддерживает интеграцию с contact form 7, ninja forms, mail chimp, woocommerce и другими популярными плагинами
- Есть шесть шаблонов всплывающих окон и редактор настроек
- Имеется настройка для скрытия и показа pop up окон на страницах и постах блога
- Есть настройка триггеров кликов по элементам меню, кнопкам, изображениям
- Можно сделать временную задержку показа модального окна
- Плагин имеет более 400 000 активных установок, постоянно обновляется и есть платные расширения.
Настройка плагина pop up maker
Устанавливаем плагин pop up maker с репозитория вордпресс и активируем его. После активации панель с настройками появится в консоли администратора сайта. Далее рассмотрим самые необходимые на мой взгляд настройки плагина popup maker. Я остановлюсь только на некоторых из них.
Темы всплывающих окон
Первое на что я хотел бы обратить внимание, так это темы всплывающих окон. Плагин popup maker имеет несколько предустановленных тем, которые можно кастомизировать с помощью редактора настроек тем. Это темы
- Тема по умолчанию
- Light box
- Enterprise blue
- Hello box
- Режущий край
- Рамка границы
Также здесь можно установить свою тему, но я не вижу в этом необходимости, поскольку в редакторе можно изменить настройки отображения любой темы под свои нужды. Для примера я выбираю тему Light box.
Как вы, наверное, уже поняли темы popup maker представляют собой внешний вид модального окна. С помощью редактора настроек темы можно изменить
- Фон под всплывающим окном. То есть изменить цвет и настроить прозрачность фона. Если вы хотите, чтобы страница сайта просматривалась под модальным окном, сделайте фон слегка прозрачным, если нет, то уберите прозрачность.
- Во вкладке контейнер настраивается внутренний отступ от краев модального окна. Кто знает css – это свойство margin. Также здесь можно изменить радиус по периметру, свойство border-radius, а также фон под текстом, толщину и цвет границы контейнера. Обычно я изменяю только толщину и цвет контейнера, а остальное оставляю по умолчанию.
- Во вкладках «Заголовок» и «Содержание» настраиваются размеры шрифтов для заголовка окна и основного текста под заголовком. А также устанавливается семейство шрифтов, толщина, стиль отображения, нормальный или курсив. Опять же здесь все визуально понятно и не требует объяснений.
- Во вкладке «Закрыть» настраивается размер и положение кнопки закрытия модального окна.
После того как вы настроили тему всплывающего окна, выберите ее как основную на вкладке «Настройки». Вы можете использовать выбранную вами тему для показа окон с контактной формой или формой авторизации на сайте. Если вам нужно будет вставить другой контент, например, большой текст, то для текста сделайте другую тему. Таким образом у вас будет несколько готовых тем под разные случаи.
Итак, тема создана и выбрана как основная. Теперь переходим на вкладку «Создание всплывающего окна» и жмем на «добавить новое».
Как сделать pop up maker contact form 7
Далее давайте соединим плагин popup maker с contact form 7. Необходимым полем для дальнейшей настройки является поле «Имя всплывающего окна». Назовите его, например, contact. Имя всплывающего окна используется плагином для установки триггера на отображение всплывающего окна.
Далее установите плагин contact form 7 и скопируйте шорткод готовой контактной формы созданной плагином по умолчанию. Вставьте этот шорткод в поле «Текст» в визуальном редакторе и обновите страницу настроек.
Теперь можно сказать, что плагины pop up maker и contact form 7 соединены, модальное окно создано, но теперь нужно произвести дальнейшие настройки плагина popup maker и нового модального окна.
Pop up maker настройка поля «отображения»
Под визуальным редактором, в который был вставлен шорткод находятся дальнейшие настройки модального окна. В поле «Отображения» я выбираю размер окна. Плагин popup maker wordpress реализует шесть адаптивных размеров ширины окна в процентах.
- Нано 10%
- Микро 20%
- Крошечное 30%
- Маленькое 40%
- Среднее 60%
- Нормальное 70%
- Большое 80%
- Огромное 95%
Для вывода popup с contact form 7 я использую «Маленькое» окно. Такой размер смотрится аккуратно, и я не вижу смысла делать большое. Также здесь можно настроить позицию вывода модального окна. Например, назначить ему положение «верх центр» или «низ левый», или «середина правый». Я оставляю по умолчанию позицию «верх центр».
Поле «Закрыть»
Чтобы пользователь мог закрывать модальное окно нужно кликнуть по кнопке «крестик», находящейся в верхнем правом углу. Это не всем удобно и хорошо, когда окно закрывается кликом по любому месту экрана, то есть по оверлею вне зоны окна. Чтобы сделать это зайдите во вкладку «Закрыть», далее «Альтернативные методы» и активируйте соответствующий чекбокс.
Триггеры
Триггеры – это события, вызывающие появление всплывающего окна в браузере. Для появления модального окна нужно настроить хотя бы один триггер. Нажмите на кнопку «Добавить триггер» и появится окно с выбором двух тригерров «Открыть» или «Задержка времени / Автооткрытие». Из их названия нетрудно понять, что триггер «Открыть» предназначен для открытия модального окна кликом по элементу интерфейса страницы, а триггер «Задержка времени / Автооткрытие» для автоматического открытия модального окна после определенного промежутка времени, например, через 15 секунд после захода посетителя на страницу сайта.
Жмите на «Добавить триггер» и появится окно с настройкой триггера. Самый простой способ настроить триггер – это повесить событие вызова модального окна на css класс кнопки, ссылки или картинки. Для этого нужно узнать css класс данного элемента или назначить ему свой.
Узнать класс можно следующим способом. Наведите курсор мыши на элемент интерфейса класс которого вы хотите получить, затем нажмите на правую кнопку мыши и кликните по команде «просмотреть код». Сразу же перед вами появится консоль разработчика, посмотрев на которую вы увидите класс нужного вам элемента. Я для примера возьму класс кнопки «Read more» на первом экране сайта.
В ссылке есть два класса: lsow-button и lsow-trans. Я его сокращу до одного класса .lsow-button и вставлю в форму настроек тригерра и сохраню.
Второй способ узнать селектор нужного элемента, это скопировать его класс в админбаре wordpress, то есть в верхней панели настроек. После активации плагина popup maker wordpress, его ярлык появился в админбаре. Вам нужно навести курсор на значок Popup maker / Инструменты / Получить селектор и кликнув по команде появится alert с уведомлением что «После нажатия кнопки «ОК» выберите элемент, для которого вы хотите выбрать селектор». Далее жмите на OK и потом по элементу, селектор которого вам нужен. Затем вы снова увидите alert с css классом элемента на который вы хотите настроить событие. Скопируйте его и вставьте в поле настройки триггера.
Таким образом я сделал красивую контактную форму во всплывающем окне на своем сайте. Вот образец.
Таким образом появилась аккуратная и компактная контактная форма. Можете посмотреть на моем сайте ее внешний вид. Итак, как сделать pop up maker с contact form 7 мы разобрались, теперь я хочу показать еще кое-что.
Нацеливание на определенные страницы
По умолчанию модальное окно будет загружаться на всех страницах и постах вашего сайта. И чтобы вывести его скажем в сайдбаре, вам нужно просто поставить в сайдбар кнопку или ссылку с определенным классом. Но что если вы не хотите, чтобы данное окно показывалось на некоторых страницах сайта или постах блога? Также возможно вам понадобиться отключить его на мобильных устройствах? Сделать это просто во вкладке «Нацеливание».
Нажмите на «Выберите условие» нацеливания и страницу на которой вы хотите вызвать окно. Если одного условия мало, добавьте еще одно.
Настройка автооткрытия модального окна
Если вы хотите, чтобы модальное окно появилось автоматически через определенный промежуток времени, то активируйте триггер «Автооткрытие». Он позволяет установить временную задержку открытия модального окна через установленный вами промежуток времени.
Например, вы хотите, чтобы через 15 секунд после открытия страницы появилась форма с интегрированным плагином mail chimp реализующим подписку на ваш сайт. Просто установите соответствующий плагин, получите его шорткод и вставьте в новое модальное окно.
Настройка куки в popup maker
Coockie используют для того чтобы предотвратить повторное появление окна формы. Например, пользователь уже увидел вашу форму с предложением подписаться на рассылку новостей блога. Он подписался и закрыл окно и нужно чтобы форма снова ему не показывалась, когда он зайдет на ваш сайт. Для этого используют куки при установке триггера.
Например, при создании триггера «Автооткрытие» назначьте ему куки «Форма подписки успешно» и установите время сохранения данной куки. По умолчанию здесь стоит кука на месяц, но вы можете увеличить это время. Также чтобы кука «Форма подписки успешно» сработала в настройках своего плагина включите интеграцию с сторонними плагинами. Я использую Mailchimp for WordPress (MC4WP) и у меня включена интеграция Custom «Integrate with custom third-party forms» и все работает.
Таким же образом в popup wordpress можно вставить форму регистрации и сделать вход в аккаунт в body press или вставить показ видео с YouTube.
Заключение
Надеюсь моя статья помогла вам разобраться какой лучше плагин для создания всплывающих окон на wordpress. Если вы знаете другое решение, то прошу поделиться им в комментариях к статье и, если материал оказался вам полезен, закрепите его на своей стене в социальной сети и поделитесь с друзьями. Удачи всем!
Как создать всплывающее (модальное) окно в WordPress
Также хочу сразу предупредить, что урок будет длинным. Не пугайтесь, все очень просто и делается достаточно быстро. Но для лучшего понимая я постараюсь хотя бы по пару слов написать по настройкам, которые вам смогут рано или поздно пригодиться.
Создание всплывающих окон в WordPress
И так, давайте перейдем непосредственно к созданию всплывающих окон, для создания которых мы будем использовать плагин Popup Maker. Как пример, давайте создадим всплывающее окно с видеозаписью внутри, которое будет открываться при клике на кнопку, но при желании всегда можно сделать его появление автоматическим.
1. Установите и активируйте плагин Popup Maker.
2. После активации плагина перейдите в Pupup Maker -> Add New.
3. В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:
- 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
- 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
- 8) Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
- 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
- 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.
Настройки внешнего вида всплывающего окна
После создания всплывающего окна можно настроить его внешний вид. Для этого переходим в Popup Maker -> Theme.
В открывшейся странице можно настроить фон модального окна, размеры и цвет шрифтов, тени, отступы и изменить название кнопки отвечающей за закрытие модального окна.
Настройка открытия всплывающего окна
После создания модального окна нам нужно решить каким образом оно будет открываться. Для начала давайте разберем каким образом можно открыть всплывающее окно.
При создании модального окна ему назначается два класса, которые являются уникальными идентификаторами модального окна. Один из идентификаторов нужно указать в элементе, при клике на который должно открываться модальное окно.
Для того чтобы узнать class-идентификатор вашего модального окна переходим в Popup Maker -> All Popups.
На открывшейся странице мы видим два класса, которые являются идентификаторами созданного нами модального окна, в нашем примере это popmake-106 и popmake-primer-vsplyivayushhego-okna. Использовать можно любой из них.
Для того чтобы модальное окно работало, нужно добавить class-идентификатор в элемент, при нажатии на который мы ходим чтобы модальное окно появлялось. Ниже примеры добавления в ссылку, кнопку и изображение.
В примере будем использовать класс popmake-106.
Открытие модального окна при клике по ссылке:
Открытие модального окна при нажатии кнопки:
Открытие модального окна при клике по изображении:
После добавления класса, модальное окно будет появляться при нажатии на элемент которому мы этот класс добавили.
Вот такое всплывающее окно в результате у нас получится:
Обзор
Проголосуйте за урок
Оценка
Как создать всплывающее (модальное) окно в WordPress
Также хочу сразу предупредить, что урок будет длинным. Не пугайтесь, все очень просто и делается достаточно быстро. Но для лучшего понимая я постараюсь хотя бы по пару слов написать по настройкам, которые вам смогут рано или поздно пригодиться.
Создание всплывающих окон в WordPress
И так, давайте перейдем непосредственно к созданию всплывающих окон, для создания которых мы будем использовать плагин Popup Maker. Как пример, давайте создадим всплывающее окно с видеозаписью внутри, которое будет открываться при клике на кнопку, но при желании всегда можно сделать его появление автоматическим.
1. Установите и активируйте плагин Popup Maker.
2. После активации плагина перейдите в Pupup Maker -> Add New.
3. В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:
- 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
- 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
- 8) Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
- 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
- 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.
Настройки внешнего вида всплывающего окна
После создания всплывающего окна можно настроить его внешний вид. Для этого переходим в Popup Maker -> Theme.
В открывшейся странице можно настроить фон модального окна, размеры и цвет шрифтов, тени, отступы и изменить название кнопки отвечающей за закрытие модального окна.
Настройка открытия всплывающего окна
После создания модального окна нам нужно решить каким образом оно будет открываться. Для начала давайте разберем каким образом можно открыть всплывающее окно.
При создании модального окна ему назначается два класса, которые являются уникальными идентификаторами модального окна. Один из идентификаторов нужно указать в элементе, при клике на который должно открываться модальное окно.
Для того чтобы узнать class-идентификатор вашего модального окна переходим в Popup Maker -> All Popups.
На открывшейся странице мы видим два класса, которые являются идентификаторами созданного нами модального окна, в нашем примере это popmake-106 и popmake-primer-vsplyivayushhego-okna. Использовать можно любой из них.
Для того чтобы модальное окно работало, нужно добавить class-идентификатор в элемент, при нажатии на который мы ходим чтобы модальное окно появлялось. Ниже примеры добавления в ссылку, кнопку и изображение.
В примере будем использовать класс popmake-106.
Открытие модального окна при клике по ссылке:
Открытие модального окна при нажатии кнопки:
Открытие модального окна при клике по изображении:
После добавления класса, модальное окно будет появляться при нажатии на элемент которому мы этот класс добавили.
Вот такое всплывающее окно в результате у нас получится:
Обзор
Проголосуйте за урок
Оценка
Как создать всплывающее (модальное) окно в WordPress
Также хочу сразу предупредить, что урок будет длинным. Не пугайтесь, все очень просто и делается достаточно быстро. Но для лучшего понимая я постараюсь хотя бы по пару слов написать по настройкам, которые вам смогут рано или поздно пригодиться.
Создание всплывающих окон в WordPress
И так, давайте перейдем непосредственно к созданию всплывающих окон, для создания которых мы будем использовать плагин Popup Maker. Как пример, давайте создадим всплывающее окно с видеозаписью внутри, которое будет открываться при клике на кнопку, но при желании всегда можно сделать его появление автоматическим.
1. Установите и активируйте плагин Popup Maker.
2. После активации плагина перейдите в Pupup Maker -> Add New.
3. В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:
- 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
- 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
- 8) Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
- 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
- 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.
Настройки внешнего вида всплывающего окна
После создания всплывающего окна можно настроить его внешний вид. Для этого переходим в Popup Maker -> Theme.
В открывшейся странице можно настроить фон модального окна, размеры и цвет шрифтов, тени, отступы и изменить название кнопки отвечающей за закрытие модального окна.
Настройка открытия всплывающего окна
После создания модального окна нам нужно решить каким образом оно будет открываться. Для начала давайте разберем каким образом можно открыть всплывающее окно.
При создании модального окна ему назначается два класса, которые являются уникальными идентификаторами модального окна. Один из идентификаторов нужно указать в элементе, при клике на который должно открываться модальное окно.
Для того чтобы узнать class-идентификатор вашего модального окна переходим в Popup Maker -> All Popups.
На открывшейся странице мы видим два класса, которые являются идентификаторами созданного нами модального окна, в нашем примере это popmake-106 и popmake-primer-vsplyivayushhego-okna. Использовать можно любой из них.
Для того чтобы модальное окно работало, нужно добавить class-идентификатор в элемент, при нажатии на который мы ходим чтобы модальное окно появлялось. Ниже примеры добавления в ссылку, кнопку и изображение.
В примере будем использовать класс popmake-106.
Открытие модального окна при клике по ссылке:
Открытие модального окна при нажатии кнопки:
Открытие модального окна при клике по изображении:
После добавления класса, модальное окно будет появляться при нажатии на элемент которому мы этот класс добавили.
Вот такое всплывающее окно в результате у нас получится:
Обзор
Проголосуйте за урок
Оценка
WP Post Popup – Отличный плагин для отображения контента страниц и записей в всплывающем окне
Превратите любую страницу, пост, пользовательский тип записей во всплывающее окно!
Идеально подходит для отображения основных страниц контента без пере направления пользователя на страницу, отображения контента в всплывающем (модальном) окне.
Характеристики
- Загружает только поле the_content() – исключая заголовок / нижний колонтитул / боковые панели / и т.д.
- При желании можно загрузить пользовательские поля с помощью пользовательского шаблона страницы.
- Вызов всплывающего окна при загрузке страницы с использованием параметра URL
- Показать внешние страницы во всплывающем окне на Вашем сайте
- Позволяет показывать только определенный div с внешней страницы
- Работает с шорт кодами и различными плагинами, такими как Contact Form 7 и BuddyPress
- Динамически изменить URL-адрес в адресной строке на адрес всплывающей страницы
- Поддерживает подключение стилей отображения
- Визуальный редактор – кнопка для легкого создания всплывающей ссылки
- Установите точку брекпоинта, ниже которой будет загружаться страница вместо всплывающего окна.
Полезные ссылки
Избавляемся от ошибки “Uncaught ReferenceError: wp is not defined wp-post-modal-public.js:70”
По сути этот баг связан с кастомизацией заданной на страниц настроек плагина в админке.
Данная ошибка выглядит следующим образом:
И если Вам позволяет опыт, Вы можете задать внешний вид всплывающих окон при помощи CSS и jQuery без использования настроек на стороне админки. По этому просто отключим обработчик.
Первое что нужно сделать это за комментировать по данному пути:
Cтроку:
То есть в коде данного файла строка должна выглядеть так:
Ниже я “заскринил” страницу с настройками которые я всегда устанавливаю для данного плагина.
jQuery пример реализации “умного” прилоадера
Задача прилоадера – отображаться до тех пор пока контент записи не будет загружен. Когда контент был загружен успешно прилоадер будет удален.
8 лучших плагинов для всплывающих окон WordPress
Оптимизация коэффициента конверсии – приоритет номер один для большинства маркетологов. Привлечение и «зацепление» будущего верного последователя может быть формой искусства, которая сбивает с толку лучших из нас. К счастью, существует огромное количество инструментов, которые помогут вам достичь ваших целей; особенно в сообществе WordPress. В этой статье мы собираемся изучить лучшие из лучших.
В частности, мы собираемся погрузиться в мир всплывающих плагинов. Когда мы закончим с этим, мы перейдем к изучению того, как вы можете максимально использовать свой новый всплывающий плагин и максимизировать коэффициент конверсии на своем веб-сайте WordPress. Приступим к взлому!
Что такое всплывающее окно Optin?
Всплывающие окна Optin – проверенный способ превратить посетителей в лояльных последователей. Optins позволяет посетителям вводить контактную информацию для подписки на информационный бюллетень или запроса дополнительных сведений по определенной теме.
Вы говорите всплывающие окна? Но они чертовски раздражают, правда? Маркетинговые инструменты могут быть утомительными – в этом нет никаких сомнений – но в руках великого рыбака правильная наживка может стать ключом к его или ее успеху. Только вы можете решить, стоят ли результаты метода. С учетом сказанного, давайте сразу приступим к изучению лучших всплывающих плагинов для WordPress.
Доступно множество плагинов для всплывающих окон WordPress, и отсортировать зерна от плевел может быть несколько пугающей перспективой. К счастью, мы уже проделали за вас всю тяжелую работу с нашим тщательно продуманным выбором ниже.
Отказ от ответственности: TechBlogSD является партнером одного или нескольких продуктов, перечисленных ниже. Если вы перейдете по ссылке и совершите покупку, мы сможем получить комиссию.
1 Всплывающие окна ниндзя
Ninja Popups – это настраиваемый создатель всплывающих окон для WordPress. С помощью этого плагина вы можете легко создавать всплывающие окна на своем веб-сайте для подписок на информационные бюллетени, подписчиков в социальных сетях, рекомендуемых или связанных элементов и многого другого.
Всплывающие окна – отличный способ привлечь внимание читателей, а Ninja Popups позволяет легко добавлять пользовательские всплывающие окна на ваш сайт. Плагин предоставляет вам множество отличных всплывающих окон, которые готовы к работе для мобильных устройств, полностью переводимы и полны функций. Добавляйте всплывающие окна, которые блокируют контент, пока читатель не подпишется или не поделится. Или добавьте всплывающие окна для специальных предложений, скидок или кодов купонов. Возможности безграничны. Одна из самых удобных функций – это статистика, которую предоставляет Ninja Popups, которая показывает, какие всплывающие окна помогают, а какие могут исчезнуть.
Нужны дополнительные варианты дизайна всплывающих окон? Получите пакет расширения! Автор плагина создал дополнительный пакет тем для тех, кому нужно немного больше разнообразия. Если вы проводите много рекламных акций или хотите использовать разные дизайны для каждого типа всплывающих окон, пакет расширения определенно будет вам полезен. Но так как это всего лишь несколько дополнительных долларов, нужно просто добавить в свой инструментарий на более поздний срок.
2 Конструктор всплывающих окон
Popup Maker – это плагин, который позволяет вам размещать практически любой контент, который вы можете себе представить, во всплывающие окна. Кроме того, он обладает множеством функций, таких как:
- Анимация открытия всплывающих окон
- Полный контроль позиционирования и размера
- Конструктор тем
- Прокручиваемый контент и многое другое
3 Блум
Bloom – очень интересный плагин от рок-звезд Elegant Themes. Это тоже премиум-класса, так что вы получаете то, за что платите – качественный продукт. Независимо от того, как вы планируете добавлять формы подписки на свой сайт, в Bloom есть множество замечательных функций, которые упрощают процесс создания:
- Шесть простых стилей подписки; как всплывающее окно, прилет и виджет
- Более 100 стартовых шаблонов
- Легкий импорт и экспорт для совместного использования с другими сайтами
- Отслеживание статистики для отслеживания конверсий
- И еще – ознакомьтесь с нашим обзором Bloom, чтобы узнать больше
4 Всплывающие окна – всплывающее окно WordPress
Всплывающие окна – WordPress Popup – это мощный плагин для всплывающих окон, который был загружен более 60000 раз и может похвастаться 40% -ным увеличением числа ваших подписчиков. Возможности включают:
- Несколько фильтров отображения, чтобы различать привычки пользователей
- Параметры, когда показывать или не показывать всплывающие окна
- Настройки местоположения, времени и скрытия
- Шорткоды для социальных сетей
5 PopupAlly
PopupAlly отлично подходит для увеличения количества подписчиков. Этот плагин WordPress позволяет быстро настраивать расширенные профессиональные формы регистрации, даже если вы не знакомы с кодом.
- Совместимость с большинством систем электронного маркетинга
- Имеет профессиональный вариант с доступной премиальной поддержкой
- Предлагает пошаговые инструкции по началу работы
- Бесплатный 30-дневный курс, который поможет вам составить свой список
6 PopUp By Supsystic
PopUp By Supsystic обеспечивает простой, неограниченный творческий дизайн для привлечения большего количества подписчиков и последователей в социальных сетях.
- Адаптивные всплывающие окна с удобными опциями
- Настраиваемые темы
- Всплывающие окна выхода для захвата потерянных посетителей
7 Самурай по выбору
Создавайте красивые всплывающие формы подписки в WordPress с помощью подписки Samurai. Opt-in Samurai – еще один плагин премиум-класса, разработанный Intense WP, который позволяет создавать красивые всплывающие формы подписки для вашего веб-сайта WordPress.
Он поставляется с более чем 100 готовыми формами подписки с настраиваемыми изображениями и текстовыми деталями. Все формы подписки полностью протестированы на отзывчивость и идеально отображаются на всех устройствах. Наряду со всеми функциями, которые может предложить Opt-in Samurai, он также включает 20 специальных форм подписки на боковой панели.
Самурай с подпиской также может отправлять ваших потенциальных клиентов напрямую в Sugar CRM. Помимо всплывающей формы, формы также могут быть размещены на странице напрямую (без всплывающего окна) на случай, если вы хотите отобразить форму подписки в середине содержимого с помощью короткого кода. Панель управления плагина предоставляет вам подробную аналитику форм, которые получают просмотры, и те, которые конвертируются больше всего. Opt-in Samurai – один из удобных плагинов для настройки всплывающих форм подписки. Помимо этого, плагин поддерживает всплывающие окна с приветствием и выходом. И вы также можете определить срок действия cookie для каждого всплывающего окна.
8 Optin Ninja
Optin Ninja – это плагин премиум-класса для WordPress, разработанный таким образом, чтобы помочь вам привлечь новых подписчиков электронной почты. Собирайте адреса электронной почты и храните их в локальной базе данных, используйте автоответчики с помощью ключа API или любую настраиваемую форму. Плагин позволяет использовать одно- или двухэтапный процесс преобразования посетителей в подписчиков.
Плагин прост в установке и хорошо работает с большинством тем и плагинов WordPress. Ознакомьтесь с демо-версией плагина, чтобы просмотреть все потрясающие демонстрации страниц подписки и увидеть реальные скриншоты аналитического графика, автоответчика, вариантов дизайна и более 300 включенных графиков.
Гипотеза?
После выбора всех плагинов, настройки всплывающих окон и написания информационных бюллетеней, как вы узнаете, что все это работает? Хотя магическая формула будет оспариваться в течение многих последующих тысячелетий, есть некоторые эксперименты, которые, по мнению большинства экспертов, действительно дадут желаемые результаты. Это происходит в форме проверки статистических гипотез.
Статистическая проверка гипотез не имеет абсолютно ничего общего с определенным крупным, в основном травоядным млекопитающим, которое обычно встречается в районах Африки к югу от Сахары. Тем не менее, он делает совсем немного общего с научными исследованиями в области статистики.
A / B-тестирование относится к рандомизированному эксперименту, состоящему из двух вариантов – A и B – тогда как первый представляет «контрольный» субъект, а «лечение» – второй.
Смущенный? Что ж, к счастью, вам не нужно быть ученым-ракетчиком, чтобы иметь успешный веб-сайт. Вот для чего нужны плагины! Хотя многие плагины всплывающих окон имеют встроенные функции отслеживания, есть плагин, специально разработанный, чтобы помочь вам определять, управлять и отслеживать эксперименты A / B-тестирования:
Nelio A / B Testing – это мощный и универсальный сервис оптимизации конверсии для WordPress. Сам плагин бесплатный, но требуемый сервис платный. Вот что Nelio A / B Testing может для вас сделать:
И самое лучшее, все это можно сделать прямо из панели управления WordPress! Еще одна замечательная функция, которая согреет вас – тепловые карты.
Эта функция буквально позволяет вам анализировать самые горячие области любой страницы, чтобы вы могли лучше понять своих клиентов. А поскольку Nelio A / B Testing спроектирован как услуга (хотя и премиум-класса), вся обработка удаляется с вашего веб-сайта и позволяет их облаку справляться с нагрузкой. Это значительно сокращает время загрузки сайта.
Обледенение торта конверсии
Итак, в этом посте мы говорим о всплывающих окнах, но я также хочу дать вам дополнительный бонус. Один из самых проверенных способов увеличить список подписчиков и заставить их возвращаться снова и снова – один из самых простых: сказать спасибо.
Тесты показывают, что включение страницы с благодарностью в конце транзакции (финансовой или иной) оказывает большое влияние на каждого клиента. Это также дает прекрасную возможность включить обратные ссылки на другой ваш контент.
Еще один отличный способ поблагодарить за время, проведенное вместе, – это, как вы уже догадались, плагин WordPress. На самом деле «Спасибо» отправляет письма с благодарностью всем, кто оставляет комментарий.
Есть множество удивительных функций:
- Пригласите читателей вернуться в свой блог
- Ссылка на свой Twitter или Facebook для большего количества подписчиков
- Настройте электронные письма по категориям
- Ссылка на ваш RSS-канал
- Включает многоязычный перевод
Как и в реальном мире, благодарность имеет большое значение для того, чтобы читатель, подписчик или клиент почувствовали себя желанными гостями, и они полюбят вас за это.
Крючок, леска и грузило для посетителей
Итак, голодные посетители сайта клюнули на приманку, и вы их заманили. Вы увеличили свой список подписчиков с помощью всплывающих окон, повысили интерес к своему сайту, пришли к полному пониманию своих клиентов и их потребностей и даже нашли время вне вашего напряженного дня, чтобы поблагодарить вас.
Теперь вы можете продолжить завоевание мира. Или, если вы все еще жаждете большего, ознакомьтесь с нашим обзором плагинов электронной почты. Есть вопросы, предложения или критические замечания? Стреляйте в комментариях ниже!
PopUp окна в WordPress. Часть 1
Однажды мой знакомый спросил:
Хочу сразу сказать, что я сторонник того, чтобы решать проблему путем написания собственного кода, хотя бы потому, что он дает именно тот результат, который хотим. Даже если он далек от идеала, и может вызвать нервный тик у профессионального разработчика. В то же время приходится отдавать себе отчет в том, что далеко не все и не всегда могут или хотят разделить мое мнение на этот счет. Поэтому идею написать статью в стиле «как изобрести велосипед» с сожалением все же пришлось отбросить и обратиться к репозиторию плагинов.
Как и следовало ожидать, вариантов оказалось множество, но лучших не так много. Большинство экспертов в этой области отдают предпочтение плагину PopUp Maker. Ему и посвящена данная статья.
После установки плагина в административной панели появляется одноименный раздел, при помощи которого можно создавать и управлять всплывающими конами сайта.
Механизм работы погранично прост: нажав ссылку «Добавить всплывающее окно», открываем интерфейс, в котором можем создать это самое окно. Здесь не должно возникнуть особенных трудностей, поскольку для его конструирования применяется все тот же Gutenberg со всеми его блоками, возможностью использования сторонних расширений и шорт кодов. Непосредственно под редактором располагается метабокс с настройками всплывающего окна, где:
Словом, бесплатная версия плагина обладает достаточным инструментарием для того, чтобы создать и настроить типовое модальное окно, закрывающее львиную долю потребностей в этом вопросе.
Теперь – к примерам.
Пример 1 Рекламное всплывающее окно, появляющееся само по себе
- Заходим в раздел PopUp Maker. Нажимаем ссылку «Добавить всплывающее окно»
- В открывшемся редакторе создаем само окно
- Задаем название PopUp (нигде кроме административного раздела оно отображаться не будет, поэтому может быть любым)
- Создаем контент (для примера разместил рекламу скидок к празднику).
- Настраиваем условия отображения всплывающего окна:
- В разделе «Триггеры» нажимаем «Добавить новый триггер». В появившемся окне выбираем «Задержка времени / Автооткрытие». В следующем шаге настройки устанавливаем время задержки появления окна.
- В разделе «Нацеливание» устанавливаем условие отображения. (чтобы окно не надоедало пользователю, я установил его показ только при просмотре главной страницы). Также можно установить отключение показа окна на мобильный устройствах.
- В пункте «Отображение» установим внешний вид на свое усмотрение (я выбрал Light box, как самый оптимальный для дальнейшей настройки). Размер – 40%. Тип анимации – движение. Начало анимации – справа. Позиция – Низ Право. Чтобы окно не прилипало к краям браузера, установим небольшие отступы от нижнего и от правого краев.
- Кнопку закрытия настраивать не буем и оставим как есть.
- Сохраняем настройки. Любуемся результатом.
Пример 2 Появление окна при щелчке по соответствующей кнопке (ссылке в статье).
Создание самого окна и большинство настроек осуществляются по предыдущей схеме. Отличие состоит в следующем:
- В странице или записи, при просмотре которой должен отображаться PopUp, создаем видимый и понятный читателю элемент (это может быть кнопка или картинка – не важно). Сохраняем внесённые изменения.
- Переходим к просмотру статьи во фронтальной части сайта.
- На панели администратора нажимаем кнопку PopUp Maker – Инструменты – Получить селектор.
- Щелкаем левой кнопкой мыши по заготовленному заранее элементу и копируем CSS-селектор.
- Возвращаемся в административную панель, открываем созданный ранее PopUp или создаем новый.
- Настраиваем условия отображения:
- На этапе установки триггера выбираем «Нажатие». В поле «Дополнительные CSS-селекторы» вставляем скопированные ранее.
- Раздел «Нацеливание» не трогаем
- Все остальное настраиваем на свой вкус.
В завершение следует отметить, что плагин PopUp Maker – довольно гибкая и мощная штука даже в бесплатной реализации. Если же дополнить его платным функционалом, то возможностей станет еще больше. О чем говорит его собственный репозиторий расширений.
Читайте также: