Вы хотите добавить панель оповещений на свой сайт WordPress?
Панель предупреждений или уведомлений — это отличный способ сообщить посетителям о важных обновлениях, специальных предложениях, запуске новых продуктов и многом другом.
В этой статье мы покажем вам, как создать панель оповещения в WordPress с помощью 2 простых решений.
Зачем создавать панель оповещений в WordPress?
Панель оповещения — это отличный способ сообщить посетителям о чем-то важном. Это может быть текущее мероприятие по продажам, обновление времени работы или изменения в ваших услугах.
Вы также можете использовать панель оповещения, чтобы сообщить посетителям о специальной сделке, например, о предложении «купи один и получи один бесплатно». Это отличный вариант, если вы управляете интернет-магазином.
Использование панели уведомлений лучше, чем просто размещение объявления на главной странице сайта. Ваша панель объявлений может появиться в верхней части каждой страницы на всем вашем сайте.
Создать панель объявлений в WordPress очень просто. Мы рассмотрим лучший плагин для панели уведомлений и ручной метод с использованием HTML и CSS кода. Просто нажмите на ссылки ниже, чтобы сразу перейти к каждой опции:
- Метод 1: OptinMonster
- Метод 2: Пользовательский HTML и CSS
Метод 1: Создание панели оповещения с помощью OptinMonster
OptinMonster — лучшее программное обеспечение для оптимизации конверсии на рынке. Это поможет вам конвертировать больше посетителей сайта в подписчиков и клиентов.
Он поставляется с красивыми всплывающими окнами, приветственными ковриками, таймерами обратного отсчета и другими динамическими накладками, которые помогут вам увеличить количество подписчиков и продаж на вашем сайте.
Вы также можете использовать OptinMonster для создания панели оповещений для вашего сайта. Вот тема, которую мы собираемся создать:
В OptinMonster есть множество готовых шаблонов. С его помощью очень легко создать панель оповещения, которая будет выглядеть великолепно в течение нескольких минут.
Сначала вам нужно посетить сайт OptinMonster и зарегистрировать аккаунт.
Далее вам нужно установить и активировать плагин OptinMonster WordPress. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
Этот плагин позволяет подключить ваш сайт WordPress к программному обеспечению OptinMonster.
После активации вам нужно будет подключить свой аккаунт. Чтобы начать, просто перейдите по ссылке OptinMonster » Настройки из вашей приборной панели WordPress.
Далее нажмите кнопку ‘Подключить существующий аккаунт’.
Теперь вы увидите всплывающее окно с просьбой ввести адрес электронной почты. Просто выберите свой адрес электронной почты и нажмите кнопку «Подключиться к WordPress».
Теперь вы можете следовать подсказкам на экране, чтобы подключить свой аккаунт OptinMonster.
После подключения OptinMonster, просто перейдите по ссылке OptinMonster » Кампании в вашей приборной панели WordPress. Нажмите кнопку «Создать первую кампанию».
Отсюда вам нужно выбрать ‘Floating Bar’ в качестве типа кампании, чтобы создать панель оповещения.
Далее вы увидите выбор шаблонов кампаний. Просто выберите шаблон, который вы хотите использовать. Вам просто нужно навести на нее курсор мыши и нажать кнопку «Использовать шаблон», чтобы выбрать ее.
Мы будем использовать шаблон ‘Promo’ для нашей панели оповещений.
Далее вам будет предложено дать имя вашему шаблону. После того, как вы назвали свою кампанию, нажмите кнопку «Начать создание».
Теперь вы увидите редактор кампании. Здесь вы можете создать свою кампанию.
Вы увидите, что по умолчанию панель оповещений появляется в нижней части экрана. Чтобы переместить ее в верхнюю часть экрана, нажмите «Настройки плавающей панели» с левой стороны.
Далее просто нажмите на ползунок, чтобы переместить плавающую панель в верхнюю часть страницы.
Чтобы изменить текст на плавающей панели, просто нажмите на область, которую вы хотите изменить, и введите любой текст.
Вы также можете изменить шрифт, размер и цвет текста и многое другое.
Чтобы изменить таймер обратного отсчета, просто выберите таймер в шаблоне, а затем перейдите на вкладку Countdown в левом меню. Затем введите дату и время окончания отсчета.
Вы также можете настроить таймер на вечный обратный отсчет вместо статичного обратного отсчета, если хотите. Вечнозеленый обратный отсчет устанавливается отдельно для каждого посетителя вашего сайта.
Продолжайте и вносите столько изменений в свою панель оповещения, сколько хотите. После того как текст будет готов, не забудьте нажать кнопку Сохранить в верхней части экрана.
Далее вам нужно перейти на вкладку «Правила отображения», чтобы выбрать, когда и где ваша панель оповещения будет отображаться на вашем сайте. По умолчанию ваша панель оповещения будет отображаться после того, как посетитель пробудет на странице в течение 5 секунд.
Мы собираемся изменить это значение на 0 секунд, чтобы панель оповещения появлялась мгновенно. Для этого просто измените обратный отсчет ‘sec’ на 0.
Затем нажмите кнопку ‘Следующий шаг’, чтобы изменить настройки действия. Вы можете оставить настройки «показывать вид кампании» для Optin и выбрать, хотите ли вы воспроизводить звуковой эффект, когда появляется панель оповещения.
После внесения изменений, нажмите кнопку «Следующий шаг» еще раз, и вы увидите сводку.
Как только вы будете довольны, просто нажмите кнопку «Сохранить» в верхней части экрана.
После этого вы можете перейти на вкладку Publish в верхней части сайта и изменить статус публикации на ‘Publish.’
Последний шаг — это активация кампании на вашем сайте.
Чтобы сделать это, вы можете закрыть редактор кампании, а затем перейти в раздел OptinMonster » Кампании. Здесь вы увидите список вашей кампании, а ее статус будет «Ожидание».
Нажмите на статус «В ожидании», чтобы изменить его на «Опубликовать» из выпадающего меню.
Теперь просто зайдите на любую страницу вашего сайта, и вы увидите вашу кампанию в действии.
Способ 2: Ручное создание панели оповещений с помощью пользовательского HTML/CSS
Что если вы не хотите использовать OptinMonster? В этом методе мы покажем вам, как создать панель уведомлений с помощью HTML и CSS кода.
Примечание: Мы не рекомендуем этот метод для новичков. Если вы новичок в WordPress или не чувствуете себя уверенно при добавлении кода на свой сайт, то мы предлагаем использовать метод выше.
Сначала вам нужно скопировать и вставить пользовательский код CSS для панели оповещения. Просто перейдите по ссылке Внешний вид » Настройщик страница в вашей приборной панели, затем нажмите вкладку «Дополнительные CSS» внизу.
Теперь скопируйте и вставьте этот CSS-код в это поле:
.alertbar
После того, как вы скопируете этот код, он должен выглядеть следующим образом. Чтобы сохранить CSS-код, нажмите кнопку «Опубликовать» в верхней части страницы.
Далее вам нужно добавить HTML-код для текста панели оповещения на ваш сайт.
Лучший способ сделать это — установить и активировать бесплатный плагин Insert Headers and Footers.
Примечание: Insert Headers and Footers — один из собственных плагинов WPBeginner. Мы создали его для того, чтобы было очень просто добавлять скрипты, HTML-код и многое другое на страницы вашего сайта.
После активации плагина, перейдите к Настройки » Вставка верхних и нижних колонтитулов в админке WordPress. Просто скопируйте и вставьте следующую строку HTML-кода в поле ‘Scripts in Body’:
Вот как этот код должен выглядеть в поле ‘Scripts in Body’ в меню Insert Headers and Footers:
Конечно, вы можете изменить текст предупреждения на любой другой, который вам нравится. Не забудьте нажать кнопку ‘Сохранить’ внизу страницы, когда закончите.
Теперь вы можете зайти на свой сайт и увидеть панель оповещения. Она должна появляться в верхней части каждой страницы, как показано здесь:
Совет: В некоторых темах WordPress панель уведомлений может перекрывать меню. Вы можете изменить высоту полосы на 40px или 30px, чтобы избежать этого. Вам также нужно будет уменьшить высоту строки, чтобы ваш текст оставался вертикально центрированным в полосе.
Мы надеемся, что эта статья помогла вам узнать, как создать панель оповещений в WordPress. Вам также может понравиться наше сравнение лучших конструкторов страниц WordPress, которые помогут вам еще больше настроить ваш сайт без написания кода, и наш список лучших плагинов WooCommerce для роста продаж вашего магазина.
Источник: www.wpbeginner.com