Для коммерческого сегмента каждый посетитель — на вес золота. И терять его из-за того, что он потерялся на вашем сайте, слишком расточительно. Вот почему на страницах крупных интернет-магазинов и онлайн-сервисов вы можете наблюдать всплывающие подсказки (попапы), которые появляются при наведении на тот или иной элемент интерфейса.
Такие «всплывашки» помогают новым посетителям сориентироваться в дизайне и произвести целевые действия. Результат — повышенная конверсия и рост доходов.
Взгляните, например, на сайт М.Видео — какое количество «всплывашек» на нем мелькает. Каждая из них преследует строго определенную цель и появляется в зависимости от поведения пользователя на странице.
Владельцы сайтов, базирующихся на CMS WordPress, для реализации таких всплывающих подсказок могут использовать плагин My Popup с гибкими настройками. С его помощью получится сделать всплывающие окна такими же или даже лучше, чем у конкурентов.
Инструкция: как вывести всплывающую подсказку при наведении на пункт меню
Сегодня покажу на живом примере, как добавить всплывающую подсказку при наведении на внутренний рекламный баннер, интегрированный в дизайн WordPress сайта.
1. Установите и активируйте плагин My Popup от WPShop в админ-панели вашего сайта.
2. Определите css-класс элемента, к которому планируете привязать вывод всплывающей подсказки. Для этого:
- в браузере на нужной странице своего сайта вызовите консоль разработчика (англ. Development tools), нажав клавишу F12;
- нажмите в верхней части этой панели слева на иконку со стрелкой;
- выберите на странице нужный элемент;
- посмотрите, какой css-класс прописан для этого элемента (в примере это класс cta-box), запомните его или запишите.
3. В административной панели WordPress нажмите в меню «My Popup» -> «Добавить новый».
4. В открывшемся окне задайте для своего попапа заголовок и приступайте к настройкам:
- На вкладке «Основные настройки» задайте размер всплывающей подсказки, на каких устройствах пользователей ее следует выводить, а также время, спустя которое всплывающая подсказка исчезнет (в примере это 20 секунд).
Для обычных подсказок не рекомендую ставить какие-либо запреты на закрытие, чтобы не раздражать ваших посетителей.
- На вкладке «Внешний вид» настройте отступ внутри попапа, раму и тень (если они нужны), цвет текста и фона. По желанию также можно включить фоновую подложку любого цвета на ваш выбор, добавить иконку и кнопку закрытия.
Использовать кнопку закрытия для всплывающих подсказок не рекомендую. Гораздо лучше сработает плавная анимация всплытия попапа и его закрытие по таймеру без необходимости нажимать на «крестик».
- На вкладке «Контент» размещен классический редактор, в котором вы можете задать текст подсказки, ее шрифт, цвет и другие элементы внешнего вида.
- На вкладке «Правила вывода» включите попап, активируйте опцию для типа события «Показать по скроллу до элемента», введите в поле рядом класс, который вы определяли на 2 шаге, и выберите страницы, на которых будет отображаться ваша подсказка (в моем примере она будет выводиться только на главной страничке сайта).
- Вот и все. Осталось нажать кнопку «Опубликовать» и проверить вывод «всплывашки».
Аналогичным образом с помощью My Popup вы сможете создать и вывести на своем сайте всплывающие подсказки, привязанные к поисковой строке, форме контактов или подписки на рассылку, меню навигации, полям калькулятора, справочнику терминов, кнопкам, изображениям скидочных купонов и так далее.
Выбор вариантов неограничен и может меняться в зависимости от потребностей вашей целевой аудитории.