Методы создания \»липкой\» плавающей панели в WordPress

how to create a sticky floating bar in wordpress

Хотите привлечь внимание ваших посетителей с помощью липкой плавающей панели в WordPress?

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

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

Что собой представляет липкая плавающая панель?

Липкий плавающий баннер остается в верхней или нижней части вашей веб-страницы, пока посетители прокручивают ее.

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

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

При грамотном использовании плавающие панели могут помочь вам:

  • Увеличить продажи и доходы через распродажи, скидки и специальные предложения
  • Привлечь трафик к вашему онлайн-контенту (подкастам, статьям, руководствам, видео и другим материалам)
  • Повысить вовлеченность и конверсии на сайте
  • Генерировать лиды и подписчиков для расширения вашего списка email-маркетинга
  • Увеличить активность и количество подписчиков в социальных сетях
  • Увеличить осведомленность о бренде

Существует множество способов использования липких панелей в ваших интересах. Давайте теперь разберемся, как создать привлекательный плавающий баннер в WordPress для вашего сайта.

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

Для создания липкой панели в WordPress вы можете воспользоваться несколькими методами:

1. Использование плагина

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

  • Sticky Menu, Sticky Header (or anything!) on Scroll — этот плагин позволяет сделать любой элемент на странице липким, будь то меню, заголовок или другая панель.
  • WP Sticky — плагин, который предлагает простой интерфейс для создания липких элементов без необходимости писать код.
  • myStickymenu — популярный плагин для создания липкого верхнего меню или уведомительной панели.

2. Настройка через код

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

cssCopy code.sticky-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:

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

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

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

OptinMonster

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

Читайте также:  Способы получения всех доступных названий ролей в WordPress

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

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

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

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

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

Чтобы продемонстрировать возможности OptinMonster, вот несколько примеров возможных кампаний:

campaign-examples-from-om

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

Давайте не будем терять время и приступим к созданию нашего всплывающего баннера WordPress с помощью OptinMonster.

Шаг 1: Установите и активируйте плагин OptinMonster

Сначала вам необходимо зарегистрироваться для получения учетной записи OptinMonster. Плагин доступен с ценой от 9 долларов в месяц и предлагает 30-дневную гарантию возврата денег.

После этого установите плагин OptinMonster, чтобы связать учетную запись с вашим сайтом.

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

OptinMonster-plugin

После установки и активации плагина OptinMonster на вашем сайте запустится мастер настройки. Вы сможете подключить только что созданный аккаунт.

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

Теперь вы можете приступить к созданию своего первого плавающего баннера WordPress с использованием OptinMonster.

Шаг 2: Создание новой кампании плавающей панели

С помощью OptinMonster вы можете создавать и настраивать плавающие баннеры прямо в панели управления WordPress.

Для этого перейдите на вкладку OptinMonster, где вы увидите различные типы кампаний по привлечению клиентов, такие как всплывающие окна, плавающие панели, полноэкранные формы, встроенные решения и другие.

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

Это активирует библиотеку шаблонов, включающую в себя великолепные шаблоны плавающих баннеров, из которых вы можете выбрать.

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

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

optinmonster-template-name

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

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

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

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

Некоторые из полезных элементов блоков:

sticky bar optinmonster builder

  • Обратный таймер
  • Бот для чата
  • Иконки социальных сетей
  • Формы для подписки
  • Кнопка Согласен/Не согласен
Читайте также:  Обзор Yoast SEO 2024: Это лучший SEO-плагин для WordPress?

1. Настройка блоков контента

Для изменения любого блока контента просто щелкните на него, и в левой боковой панели откроется редактор блока.

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

optinmonster image edit

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

image link optinmonster

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

button optinmonster

После завершения настройки блоков контента, нажмите кнопку Сохранить.

2. Конфигурация параметров кампании

OptinMonster предоставляет возможность редактировать параметры кампании прямо в конструкторе. Для этого кликните на значок Настройки в нижнем левом углу интерфейса кампаний.

sticky bar optinmonster settings

После этого вы увидите четыре ключевых параметра слева и живой предварительный просмотр плавающей панели справа на странице. Настройки включают:

  • Информация о кампании: Позволяет изменять название кампании, описание и другие сведения о вашей плавающей панели.
  • Настройки оформления: Предлагает разнообразные опции дизайна и стиля, чтобы соответствовать вашему бренду.
  • Параметры видимости: Укажите количество показов вашей кампании для посетителей.
  • Настройки плавающей панели: Измените местоположение вашей плавающей панели сверху вниз и наоборот.

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

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

settings background color

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

border settings optinmonster

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

Для этого зайдите в раздел Настройки всплывающих баннеров и активируйте опцию Показывать панель в верхней части страницы.

floating bar optinmonster

Не забудьте сохранить внесенные изменения по завершении.

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

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

Optinmonster предоставляет мощные инструменты таргетирования аудитории, которые помогут повысить конверсии и привлекать лиды с ваших кампаний.

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

После этого появится набор стандартных правил, которые показывают ваш баннер, если посетитель находится на любой странице сайта более 5 секунд.

Чтобы изменить настройки отображения, нажмите кнопку Редактировать или выберите уже существующее правило. Откроется список предустановленных параметров отображения, которые предлагает OptinMonster.

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

  • Скроллинг: Показ происходит только после того, как пользователь прокрутит страницу до заданного уровня
  • Дата и время: Таргетирование на праздники, дни недели и временные интервалы для проведения акций или специальных предложений
  • Географическое положение: Показывайте кампании пользователям в зависимости от их местоположения для локализации контента
  • Тип устройства: Демонстрируйте или скрывайте кампании в зависимости от того, на каком устройстве — настольном или мобильном — находится пользователь

Для добавления нового правила просто нажмите на него. Это действительно легко!

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

Читайте также:  Создание формы регистрации для онлайн-мероприятий в WordPress

Шаг 5: Подключение к почтовому провайдеру

OptinMonster поддерживает интеграцию со всеми популярными сервисами email-маркетинга, включая Constant Contact, Aweber, ActiveCampaign и ConvertKit.

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

Чтобы подключить почтового провайдера, откройте вкладку Интеграции в редакторе кампании.

Здесь вы можете выбрать нужного вам провайдера электронной почты и выполнить вход в учетную запись. Некоторые провайдеры требуют использования API, который можно найти в настройках вашего почтового аккаунта.

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

Теперь вы готовы разместить свою кампанию с всплывающим баннером на сайте WordPress.

Шаг 6: Публикация всплывающего баннера на WordPress

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

Нажав на кнопку Опубликовать, вы заметите, что статус кампании изменился на «Опубликовано».

Зайдите в панель управления WordPress и перейдите в раздел OptinMonster » Кампании. Проверьте, чтобы статус здесь был установлен на Опубликовано.

om popup set status to published in wordpress

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

display your wordpress floating banner

На этом мы завершаем! Надеемся, что эта статья помогла вам легко освоить создание липкого плавающего баннера для вашего WordPress-сайта.

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

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

  • Как создать страницу для захвата лидов на WordPress
  • Пошаговая инструкция по созданию всплывающих окон в WordPress
  • Создание страницы с высокой конверсией

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

Частые ошибки при разработке интерактивных элементов и как их избежать

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

  • Игнорирование пользовательского опыта: Один из основных недостатков заключается в том, что разработчики часто забывают о том, что основной целью является удобство пользователей. Элементы должны быть интуитивно понятными и не отвлекать внимание от основного контента.
  • Сложный дизайн: Использование слишком ярких или сложных графических элементов может привести к перегрузке информации. Простота и лаконичность должны быть в приоритете. Следует избегать излишних анимаций, которые могут отвлекать пользователей.
  • Отсутствие адаптивности: Важно, чтобы интерфейс хорошо отображался на различных устройствах. Неправильная адаптация под мобильные и планшетные версии может привести к снижению удобства использования.
  • Неправильное размещение: Элементы должны быть расположены так, чтобы их было легко найти. Логика расположения и последовательность взаимодействия с ними должны быть тщательно продуманы.
  • Отсутствие тестирования: Пропуск этапа тестирования может привести к выявлению проблем уже после запуска. Регулярное тестирование на различных устройствах и браузерах поможет выявить недочеты на ранних стадиях.
  • Неучёт аналитики: Необходимо анализировать поведение пользователей, чтобы понимать, какие элементы работают, а какие нет. Отсутствие анализа данных может привести к тому, что проблемы останутся незамеченными.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *