Вы хотите добавить панель оповещений на свой сайт WordPress?Панель оповещений или панель уведомлений — отличный способ сообщить посетителям о важных обновлениях, специальных предложениях, запусках новых продуктов и многом другом.В этой статье мы покажем вам, как создать панель оповещений в WordPress с помощью 3 простых решений.Зачем создавать панель оповещений в WordPress?
Панель оповещений — отличный способ сообщить вашим посетителям о чем-то важном на вашем сайте. Это может быть текущее событие по продажам, обновление времени работы или изменения в ваших услугах.Вы также можете использовать панель оповещений, чтобы рассказать посетителям о специальном предложении, например, купить и получить одно бесплатное предложение. Это отличный вариант, если вы управляете интернет-магазином.Использование панели оповещений лучше, чем просто размещение объявления на главной странице. Ваша панель оповещений может отображаться на видном месте в верхней части каждой страницы на всем сайте.Как легко создать панель оповещений в WordPress? Мы рассмотрим методы, использующие плагины и ручной метод с использованием HTML и CSS-кода.Создание панели оповещений с помощью OptinMonster
OptinMonster — лучшее программное обеспечение для оптимизации конверсии и генерации лидов на рынке. Это поможет вам превратить больше посетителей сайта в подписчиков и клиентов.OptinMonster предлагает конструктор кампаний по перетаскиваниям. Он поставляется с красивыми всплывающими окнами лайтбокса, приветственными ковриками, таймерами обратного отсчета и другими динамическими наложениями, которые помогут вам увеличить количество подписчиков и продажи на вашем сайте.Вы также можете использовать OptinMonster для создания панели оповещений для вашего сайта. Их готовые шаблоны позволяют легко создать панель оповещений, которые отлично выглядят.Во-первых, вам нужно посетить сайт OptinMonster и зарегистрировать учетную запись. Вам понадобится, по крайней мере, базовый план, потому что он включает в себя тип кампании Floating Bar.Затем вам нужно установить и активировать плагин OptinMonster WordPress.Этот плагин позволяет подключить ваш сайт WordPress к программному обеспечению OptinMonster.После активации вы увидите экран приветствия и мастер настройки. Продолжайте и нажмите кнопку "Подключить существующую учетную запись".Затем откроется новое окно, в котором вам нужно будет подключить ваш сайт WordPress к OptinMonster.Просто нажмите кнопку "Подключиться к WordPress", чтобы двигаться дальше.Теперь вы можете следовать подсказкам на экране, чтобы подключить свою учетную запись OptinMonster.Затем просто перейдите в OptinMonster » Кампании на панели управления WordPress. Продолжайте и нажмите кнопку "Создать свою первую кампанию".Это откроет конструктор кампаний OptinMonster.Здесь вам нужно выбрать «Плавающую панель» в качестве типа кампании, чтобы создать панель оповещений.Далее вы увидите выбор шаблонов кампаний. Выберите шаблон, который вы хотите использовать.Вам просто нужно навести на него курсор мыши и нажать кнопку "Использовать шаблон", чтобы выбрать его. Мы будем использовать промо-шаблон кода купона для нашей строки оповещений.Затем вам будет предложено дать вашему шаблону имя. После того, как вы назвали свою кампанию, просто нажмите кнопку "Начать".Теперь вы увидите редактор кампании. Здесь вы можете создать свою панель оповещений.OptinMonster предлагает различные блоки, которые вы можете просто перетащить на шаблон. Например, вы можете добавить изображение, текст, кнопку и многое другое в панель оповещений.Вы увидите, что ваша панель оповещений отображается в нижней части экрана по умолчанию.Чтобы переместить его в верхнюю часть экрана, вам нужно нажать «Настройки плавающей панели» с левой стороны. Затем просто нажмите на ползунок, чтобы переместить плавающую полосу в верхнюю часть страницы.Чтобы изменить текст на плавающей панели, просто нажмите на область, которую вы хотите изменить, и введите любой текст, который вы хотите.Вы также можете изменить шрифт, размер и цвет текста и многое другое.Чтобы изменить настройки обратного отсчета, просто выберите таймер.Затем введите желаемую дату и время окончания. OptinMonster также позволяет выбрать тип обратного отсчета. Вы можете выбрать тип "Статический", если хотите показать стандартный таймер с указанной датой и временем окончания.С другой стороны, существует тип "динамического" обратного отсчета. Таймер будет работать в зависимости от поведения каждого пользователя на вашем сайте. Обратный отсчет устанавливается отдельно для каждого посетителя вашего сайта.Как только вы будете довольны дизайном панели оповещений, не забудьте нажать кнопку «Сохранить» в верхней части экрана.Затем вам нужно перейти на вкладку «Правила отображения», чтобы выбрать, когда и где ваша панель оповещений будет отображаться на вашем сайте. Правило по умолчанию заключается в том, что ваша панель оповещений будет отображаться после того, как посетитель находится на странице в течение 5 секунд.Мы изменим это на 0 секунд, чтобы панель оповещений отображалась мгновенно. Для этого просто измените значение "sec" на 0.Кроме того, вы также можете выбрать, где будет отображаться панель оповещений. Вы можете использовать настройку по умолчанию, которая является "текущий URL-путь — любая страница". Таким образом, ваша панель оповещений появится на всех страницах вашего сайта WordPress.Затем нажмите кнопку "Следующий шаг", чтобы изменить настройки действия. Вы можете оставить настройки «показать представление кампании» как Optin и выбрать, хотите ли вы воспроизводить звуковой эффект при появлении панели оповещений.После внесения изменений нажмите кнопку "Следующий шаг" еще раз.Здесь вы увидите сводку ваших правил отображения. Вы можете внести окончательные изменения и изменения в свою кампанию на панели оповещений.Как только вы будете довольны, просто нажмите кнопку "Сохранить" в верхней части экрана.После этого вы можете перейти на вкладку "Публикация" вверху и изменить статус публикации на "Опубликовать". Как только это будет сделано, вам нужно будет нажать кнопку "Сохранить" и закрыть конструктор кампаний.Далее вы увидите настройки вывода кампании.Последним шагом является активация кампании на самом вашем сайте. Просто измените статус с "Опубликовано" на "Опубликовано".Не забудьте нажать кнопку "Сохранить изменения", когда закончите.Теперь просто посетите любую страницу вашего сайта, и вы увидите свою кампанию в действии.Создание панели оповещений с использованием Thrive
Еще один способ добавить панели оповещений на свой сайт WordPress —это использовать Thrive Leads. Он является частью пакета Thrive Themes и помогает генерировать лиды с помощью панелей оповещений, лайтбоксов, всплывающих окон и многого другого.Во-первых, вам нужно будет посетить сайт Thrive Themes и зарегистрировать учетную запись. Просто нажмите кнопку "Начать сейчас", чтобы начать.Затем вам нужно будет установить и активировать плагин Thrive Product Manager на вашем сайте.Вы можете найти плагин Thrive Product Manager в своей учетной записи.После установки плагина просто перейдите на страницу Product Manager из вашей админки WordPress.Отсюда нажмите кнопку "Войти в мою учетную запись".После входа в свою учетную запись вы увидите различные плагины и инструменты, предлагаемые Thrive Themes.Просто выберите плагин Thrive Leads, а затем нажмите кнопку "Установить выбранные продукты" внизу.Когда Thrive Leads будет готов к использованию, вы увидите сообщение об успехе.Затем вы можете нажать кнопку "Перейти на панель управления темами".Далее вам нужно будет перейти на Thrive Dashboard » Thrive Leads из админ-панели WordPress.Рядом с заголовком "Группы лидов" просто нажмите кнопку "Добавить новый".После этого откроется всплывающее окно.Вы можете ввести имя для своей новой группы лидов и нажать кнопку "Добавить группу лидов".Затем вам нужно будет создать новую форму подписки.Продолжайте и нажмите кнопку "Добавить новый тип формы для включения".После этого Thrive Leads попросит вас выбрать тип формы.Вы можете выбрать тип ленты, чтобы добавить панель оповещений на свой сайт.После добавления типа формы подписки на ленту вам нужно будет добавить форму.Просто нажмите кнопку "Добавить форму" в разделе "Группы лидов".На следующем экране вы можете выбрать любую из существующих форм.Поскольку вы впервые создаете форму, нажмите кнопку "Создать форму".Теперь на вашем экране появится всплывающее окно.Вы можете ввести имя своей формы и нажать кнопку "Создать форму".Ваша форма будет добавлена в группу лидов ленты.Чтобы изменить дизайн формы, просто нажмите на значок карандаша.Затем Thrive Leads покажет несколько шаблонов на выбор.Просто выберите шаблон и нажмите кнопку "Выбрать шаблон" внизу.Это запустит визуальный конструктор с предварительным просмотром в реальном времени, где вы сможете настроить панель оповещений.Например, вы можете выбрать текст в шаблоне и изменить его в соответствии с вашими потребностями. Или нажмите на изображение на панели оповещений и измените его.После завершения редактирования нажмите кнопку "Сохранить работу" внизу.Теперь вы можете закрыть визуальный редактор и вернуться к настройкам формы. Здесь вы увидите опции для настройки триггера панели оповещений, частоты отображения и положения.По умолчанию панель оповещений появится в верхней части при загрузке страницы. Однако вы можете изменить эти настройки.Например, если вы нажмете кнопку Триггера, вы увидите больше опций, таких как отображение панели оповещений через определенное время, когда пользователь прокручивает определенную сумму вниз или когда пользователь достигает нижней части страницы.Кроме того, вы также можете изменить частоту отображения. Панель оповещений будет постоянно отображаться по умолчанию для всех пользователей.Тем не менее, вы можете отредактировать это и отобразить панель оповещений тому же посетителю через определенное количество дней.Затем вы можете вернуться на страницу Thrive Leads с панели управления WordPress.После этого просто нажмите на значок вилки, чтобы открыть настройки дисплея.Здесь вы можете выбрать, на каких сообщениях и страницах будет отображаться панель оповещений.Например, вы можете показать его только на главной странице или выбрать все сообщения и страницы. Существует также возможность исключить некоторые страницы и сообщения из отображения вашего предупреждающего сообщения.Когда закончите, просто нажмите кнопку "Сохранить и закрыть".Последний шаг — нажать на переключатели, чтобы отобразить панель оповещений на настольных и мобильных устройствах.Как только это будет сделано, ваша панель оповещений будет готова собирать адреса электронной почты пользователей и создавать список адресов электронной почты.Вы можете посетить свой сайт, чтобы увидеть его в действии.Вручную создайте панель оповещений с помощью пользовательского HTML/CSS
Что делать, если вы не хотите использовать OptinMonster или Thrive Leads? В этом методе мы покажем вам, как создать панель уведомлений с использованием HTML и CSS-кода.Примечание: Мы не рекомендуем этот метод для начинающих. Если вы новичок в WordPress или не уверены в добавлении кода на свой сайт, то мы предлагаем использовать любой из вышеперечисленных методов.
Во-первых, вам нужно будет скопировать следующий пользовательский код CSS для строки оповещения:<pre class="wp-block-syntaxhighlighter-code">
.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;
}
</pre>
Простой способ добавить CSS-код на свой сайт — использовать WPCode. Это лучший плагин фрагмента кода для WordPress, который поможет вам добавить пользовательский код на ваш сайт.Во-первых, вам нужно будет установить и активировать бесплатный плагин WPCode.После активации вам нужно перейдите в Code Snippets » + Add Snippet с панели управления WordPress и выбрать опцию «Добавить свой пользовательский код (новый фрагмент)».После этого введите заголовок фрагмента вверху и вставьте код CSS в область предварительного просмотра кода.Вам также нужно будет изменить тип кода на опцию "CSS Snippet" (Фрагмент).Затем вы можете прокрутить вниз до раздела "Вставка". Здесь вы можете выбрать, где будет работать код.Поскольку мы хотим, чтобы панель оповещений отображалась на всем сайте, вы можете использовать метод автоматической вставки по умолчанию.После этого вы можете нажать кнопку "Сохранить фрагмент" в верхней части.Вам также нужно будет нажать на переключатель, чтобы активировать код.После этого перейдите в Code Snippets » Headers & Footer на панели администратора WordPress.Просто скопируйте и вставьте следующую строку HTML-кода в поле "Заголовок":<div class="alertbar">В настоящее время на сайте цены могут отличаться.</div>
Вот как должен выглядеть этот код в поле "Заголовок" в WPCode:Вы можете изменить текст оповещения на все, что вам нравится. Не забудьте нажать кнопку "Сохранить изменения" в верхней части страницы, как только закончите.Теперь вы можете посетить свой блог WordPress, чтобы увидеть панель оповещений. Он должен отображаться в верхней части каждой страницы.Совет: В нескольких темах WordPress ваша панель оповещений может перекрывать ваше меню. Вы можете изменить высоту до 40 пикселей или 30 пикселей, чтобы избежать этого. Вам также нужно будет соответствующим образом уменьшить высоту строки, чтобы ваш текст оставался по центру вертикально на панели.Добавление пользовательских предупреждений на страницы WordPress с помощью SeedProd
Если вы хотите добавить пользовательские оповещения в различные части вашего сайта, такие как страницы продуктов, страницы оформления заказа и страницы магазинов, вы можете использовать SeedProd. Это лучший конструктор сайтов и конструктор целевых страниц для WordPress.Плагин предлагает конструктор перетаскивания для создания пользовательской темы и страниц сайта без редактирования кода. Он также предлагает создать блок оповещения, который вы можете разместить в любом месте вашего сайта.Этот блок оповещения может предупредить клиентов о том, что ваши запасы заканчиваются, определенные товары продаются или другие чувствительные ко времени предупреждения.Вы можете просто добавить блок оповещения на свою страницу, а затем добавить заголовок и описание. Плагин также позволяет добавлять динамический контент, что позволяет вставлять даты и другие параметры запроса.Есть также больше вариантов настройки для блока оповещений. Например, вы можете изменить его выравнивание, настроить размер шрифта и отредактировать значок.Мы надеемся, что эта статья помогла вам узнать, как создать панель оповещений в WordPress.