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

Вы хотите добавить панель предупреждений на свой сайт WordPress?

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

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

Создание панели предупреждений для вашего сайта WordPress

Зачем создавать панель предупреждений в WordPress?

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

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

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

Создать панель предупреждений в WordPress несложно. Мы рассмотрим 2 лучших плагина панели уведомлений, а также ручной метод с использованием кода HTML и CSS. Просто нажимайте на ссылки ниже, чтобы сразу перейти к каждому варианту:

Метод 1: создание панели предупреждений с помощью OptinMonster

OptinMonster — лучшее программное обеспечение для оптимизации конверсии на рынке. Это поможет вам превратить больше посетителей веб-сайта в подписчиков и клиентов.

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

Вы также можете использовать OptinMonster для создания панели предупреждений для своего веб-сайта. Вот тот, который мы собираемся создать:

Панель предупреждений создана в OptinMonster

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

Во-первых, вам необходимо посетить веб-сайт OptinMonster и зарегистрировать учетную запись.

Далее вам необходимо установить и активировать плагин OptinMonster WordPress. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

Этот плагин подключает ваш сайт WordPress к приложению OptinMonster.

После активации вам необходимо ввести лицензионный ключ. Вы можете найти это в своей учетной записи на сайте OptinMonster.

В панели управления WordPress щелкните меню OptinMonster. Затем вам нужно нажать кнопку «Подключить учетную запись». Просто следуйте инструкциям на экране, чтобы подключить свой сайт WordPress к своей учетной записи OptinMonster.

Подключите свой сайт WordPress к своей учетной записи OptinMonster

После подключения OptinMonster просто перейдите в OptinMonster »Кампании в вашей панели управления WordPress. Идите вперед и нажмите кнопку «Создать новую кампанию»:

Создайте новую кампанию в OptinMonster

Вы попадете в инструмент создания кампании OptinMonster. Отсюда вам нужно выбрать «Плавающий бар» в качестве типа кампании.

Выберите тип кампании с плавающей полосой для панели оповещений

Далее вы увидите выбор шаблонов кампании. Просто выберите шаблон, который хотите использовать. Вам просто нужно навести на него указатель мыши и нажать кнопку «Использовать шаблон», чтобы выбрать его.

Мы собираемся использовать шаблон Promo для нашей панели предупреждений:

Использование промо-шаблона для панели оповещений

Затем вам будет предложено дать вашему шаблону имя и выбрать, на каком сайте вы собираетесь его использовать. OptinMonster уже должен был указать здесь имя и URL-адрес вашего сайта.

Назовите свою кампанию OptinMonster

После того, как вы назвали свою кампанию, нажмите кнопку «Начать строительство».

Теперь вы увидите редактор кампании. Здесь вы можете разработать свою кампанию.

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

Изменение плавающих настроек панели предупреждений

Затем просто щелкните ползунок, чтобы переместить плавающую панель в верхнюю часть страницы:

Плавающая полоса теперь расположена вверху страницы.

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

Редактирование текста для панели предупреждений

Вы также можете изменить шрифт, размер и цвет текста и многое другое.

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

Редактирование таймера обратного отсчета для панели предупреждений

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

Продолжайте и вносите столько изменений в панель предупреждений, сколько хотите. Когда вы будете довольны этим, не забудьте нажать кнопку «Сохранить» в верхней части экрана.

Сохранение кампании OptinMonster

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

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

Изменение правила отображения панели предупреждений

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

Сводка правил отображения панели предупреждений

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

Включение панели предупреждений в интерфейсе OptinMonster

Последний шаг — активировать кампанию на самом вашем сайте. Перейдите на вкладку OptinMonster на панели инструментов WordPress, затем нажмите кнопку «Обновить кампании».

Нажмите кнопку, чтобы обновить кампании OptinMonster

После этого вы увидите свою кампанию в списке здесь.

Ваша кампания OptinMonster должна быть указана в вашей панели управления WordPress.

Просто посетите любую страницу своего сайта, и вы увидите свою кампанию в действии:

Панель предупреждений создана в OptinMonster

Метод 2: создание панели предупреждений с помощью SeedProd

Еще один способ сделать панель предупреждений — использовать плагин SeedProd WordPress. SeedProd наиболее известен своими страницами «Скоро» и режимами обслуживания для WordPress.

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

Во-первых, вам необходимо посетить веб-сайт SeedProd и создать учетную запись. Затем перейдите на страницу «Загрузки» в своей учетной записи и загрузите плагин Notification Bar Pro:

Загрузка панели уведомлений Pro с SeedProd

Затем вам необходимо установить и активировать плагин Notification Bar Pro на своем сайте. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

После установки вы увидите страницу, на которой вам нужно ввести лицензионный ключ. Вы можете найти это в своей учетной записи SeedProd.

Ввод лицензионного ключа для панели уведомлений Pro

Далее перейдите к Настройки »Панель уведомлений Pro где вы начнете создавать панель уведомлений. Просто введите для него имя и нажмите кнопку «Создать панель».

Создание панели уведомлений в SeedProd

Теперь вы увидите редактор панели уведомлений SeedProd. Для начала панель уведомлений будет отображаться в виде оранжевой полосы вверху экрана:

Интерфейс редактирования панели уведомлений

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

Редактирование текста для панели уведомлений

По умолчанию текст будет иметь тот же шрифт и размер, что и основной текст в вашей теме WordPress. Чтобы увеличить его, просто перейдите на вкладку «Типографика».

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

Изменение настроек типографики для панели уведомлений

При желании вы можете изменить цвет панели и кнопки на вкладке «Цвета».

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

Когда вы довольны своей панелью уведомлений, щелкните вкладку «Включить / отключить панель», затем переключитесь на параметр «Включить панель». Наконец, нажмите кнопку «Сохранить» в верхней части экрана.

Включите панель уведомлений, чтобы запустить ее
Панель уведомлений теперь появится на вашем сайте:

Панель уведомлений, отображаемая на нашем веб-сайте в режиме реального времени

Метод 3: вручную создать панель предупреждений с помощью пользовательского HTML / CSS

Что делать, если вы не хотите использовать OptinMonster или панель уведомлений Pro? В этом методе мы покажем вам, как создать панель уведомлений с помощью кода HTML и CSS.

Примечание: Мы не рекомендуем этот метод новичкам. Если вы новичок в WordPress или не уверены, что добавляете код на свой сайт, мы предлагаем вместо этого использовать один из описанных выше методов плагина.

Во-первых, вам нужно будет скопировать и вставить некоторый собственный код CSS для панели предупреждений. Просто зайдите в Внешний вид »Настройщик на панели инструментов, а затем щелкните вкладку «Дополнительные CSS» внизу.

Ввод дополнительного CSS в настройщике темы

Теперь скопируйте и вставьте этот код CSS в это поле:

.alertbar { 
    background-color: #ff0000; 
    color: #FFFFFF; 
    display: block; 
    line-height: 45px;
    height: 50px; 
    position: relative; 
    text-align: center; 
    text-decoration: none; 
    top: 0px; 
    width: 100%;
    z-index: 100;
}

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

Дополнительный CSS, отображаемый в настройщике темы

Затем вам нужно добавить HTML-код для текста панели предупреждений на свой сайт.

Лучший способ сделать это — установить и активировать бесплатный плагин Insert Headers and Footers.

Примечание: Вставить верхние и нижние колонтитулы — один из собственных плагинов WPBeginner. Мы создали его, чтобы упростить добавление скриптов, HTML-кода и прочего на страницы вашего веб-сайта.

После активации плагина перейдите в Настройки »Вставить верхние и нижние колонтитулы в админке WordPress. Просто скопируйте и вставьте следующую строку HTML-кода в поле «Сценарии в теле»:

<div class="alertbar">We are currently closed due to Covid-19.</div>

Вот как этот код должен выглядеть в поле «Сценарии в теле» вставки верхних и нижних колонтитулов:

Добавление HTML-кода с помощью плагина Insert Headers and Footers

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

Теперь вы можете посетить свой сайт, чтобы увидеть панель предупреждений. Он должен отображаться вверху каждой страницы, например:

Панель предупреждений CSS доступна на веб-сайте.

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

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


Поделись с друзьями:

Оставьте комментарий