Как создать окна предупреждений в WordPress

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

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

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

Что такое окно оповещения?

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

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

Зачем создавать окно оповещения?

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

Еще одно очень распространенное использование этой функции — захват адресов электронной почты посетителей. Многие плагины предупреждений WordPress могут быть настроены на всплывающее окно, когда пользователь перемещает курсор за пределы сайта (например, чтобы закрыть вкладку или нажать кнопку «Назад»).

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

Создание окна оповещения с помощью плагина

Благодаря плагинам WordPress создавать собственные окна предупреждений очень просто. Мы проведем вас через каждый шаг, используя мощный (и бесплатный) плагин Popup Maker.

Шаг 1. Загрузите плагин (например, Popup Maker)

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

Чтобы установить этот инструмент, перейдите на панель инструментов WordPress и перейдите в «Плагины» > «Добавить новый» . Найдите «создатель всплывающих окон», и это должна быть первая запись:

Затем нажмите «Установить сейчас ». После завершения установки не забудьте активировать плагин, выбрав «Активировать» . Обратите внимание, что хотя сам Popup Maker является бесплатным, для использования некоторых функций требуется премиум-план.

Шаг 2: Создайте всплывающее окно

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

Чтобы создать всплывающее окно, нажмите «Добавить новое всплывающее окно» в верхней части экрана. Это откроет редактор WordPress:

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

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

Эти шорткоды находятся под новой кнопкой с логотипом Popup Maker на панели инструментов:

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

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

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

На экране редактора всплывающих окон прокрутите вниз до «Настройки всплывающих окон» и выберите «Триггеры» из списка. Затем нажмите «Добавить новый триггер »:

Базовый плагин Popup Maker содержит три параметра: «Открыть» , «Задержка/Автооткрытие » и «Отправка формы ». Вы также можете выбрать Exit Intent в качестве триггера, если у вас премиум-план — этот вариант следует использовать, если вы хотите, чтобы всплывающее окно появлялось, когда пользователь пытается покинуть ваш сайт.

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

Шаг 4: Стиль вашего окна оповещения

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

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

Создание окна оповещения без плагина

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

Шаг 1: Отредактируйте файл header.php

Первое, что вам нужно сделать, это добавить код в файл header.php . Доступ к этому можно получить с помощью редактора тем WordPress. На панели инструментов перейдите в раздел «Внешний вид» > «Редактор тем» . Затем выберите заголовок темы (header.php) на боковой панели справа:

Скопируйте и вставьте следующий код в файл в конце раздела <head> :

<div class="alertbar">All items 20% off!</div>

Вот как должен выглядеть файл после этого добавления:

Это отобразит сообщение «Все товары со скидкой 20%!» на панели оповещений. Вы можете настроить текст так, как вам нравится.

Шаг 2: Добавьте пользовательский CSS

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

Для этого перейдите на панель управления WordPress и выберите «Внешний вид» > «Настроить». Это откроет ваш сайт в Customizer. На боковой панели выберите «Дополнительные CSS» . Откроется окно кода, в котором вы можете ввести собственный CSS.

Вставьте следующий код в текстовое поле:

.alertbar {

background-color: #A9A9A9;

color: #FFFFFF;

display: block;

line-height: 45px;

height: 50px;

position: relative;

text-align: center;

text-decoration: none;

top: 0px;

width: 100%;

z-index: 100;

}

Вот как выглядит предупреждение:

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

Улучшите свой сайт с помощью движка WP

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

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

Если вы хотите еще больше улучшить свой сайт, обязательно ознакомьтесь с нашими специальными планами хостинга WordPress!