Часто на страницах блогов или информационных порталов можно увидеть всплывающие подсказки при наведении на какое-нибудь слово или словосочетание. Безусловно, это полезно для читателя, так как дает возможность более детально уточнить какой-нибудь термин или дату события.
Как в WordPress добавить всплывающие подсказки?
WordPress не имеет стандартных средств для создания таких подсказок. Поэтому воспользуемся сторонними решениями.
Плагин Responsive Mobile-Friendly Tooltip
Во-первых, плагин Responsive Mobile-Friendly Tooltip необходимо установить и активировать. Особенностью дополнения является работа “из коробки”, не вынуждая пользователя проводить какие-либо настройки. Далее следует открыть на редактирование страницу или запись.
Видно, что на панели инструментов визуального редактора WordPress добавилась кнопка в виде зеленого кружка. Для вставки подсказки следует поставить курсор в место ожидаемой подсказки и нажать эту кнопку.
Во всплывающем окне следует задать всего два значения. В поле The tip нужно ввести текст самой подсказки, а в The base text – текст в статье, при наведении на который будет появляться всплывающая подсказка. После заполнения обоих полей необходимо нажать кнопку Add tip.
В итоге в контентную часть записи будет вставлен специальный шорткод с Вашей подсказкой.
Для сохранения изменений нужно нажать кнопку Обновить. Подсказка вставлена, и теперь можно смотреть на сайте.
Плагин My PopUp
Сделать более заметные всплывающие подсказки помогает расширение My PopUp. В отличие от рассмотренного выше плагина, здесь возникает всплывающее окно с информацией при заданном вебмастером сценарии.
Это может быть:
- Определенное время с момента загрузки страницы.
- Прокрутка пользователем контента на заданный процент или до некого элемента.
- Отсутствие активности со стороны посетителя сайта.
- Попытка закрыть вкладку браузера.
- Клик на конкретный элемент.
В My PopUp сценарии всплывающих элементов легко таргетируются на отдельную страницу (запись, товар и другие типы контента).
Рассмотрим способ создать всплывающую подсказку, которая отобразится при клике на слово «Акция» в тексте и выведет информационное сообщение с промокодом на покупку.
- После установки My PopUp в админке появится соответствующий пункт — нажмите на него и выберите «Добавить новый».
- На вкладке «Основные настройки» определите место для появление всплывающей подсказки. Также выберите устройства для показа и задайте базовые параметры.
- Перейдите в раздел «Внешний вид» и настройте дизайн.
- В пункте «Контент» укажите текст. Тут же можно добавить некоторые элементы: таймер обратного отсчета, форма для заполнения, кнопки, соцсети и прочее.
- Теперь остается определить сценарий появления окна на вкладке «Правила вывода». Активируем переключатель «Показать по клику на элементе» и добавляем идентификатор. Например, mypopup-open.
- Опубликуйте всплывающую подсказку, после чего добавьте нужный идентификатор (через class) к элементу в материале, где требуется ее вывод.
Добавить класс можно ссылке, кнопке, изображению или другому элементу на странице.
- Ниже пример созданной подсказки, которая будет появляться при нажатии на слово «Акция» в заданном материале.
Создавать всплывающее окно не всегда обязательно с нуля. В My Popup на вкладке «Пресеты» предусмотрено несколько десятков готовых шаблонов. Также созданные «всплывашки» можно экспортировать и импортировать для переноса между сайтами.
My PopUp — действительно мощный и полезный инструмент. Приведу несколько вариантов его использования:
- Уточнение терминов, дат и других моментов в материале.
- Информирование о проходящих акциях в магазине.
- Вывод сообщения о сборе Cookie.
- Применение рекомендательных технологий.
- Предложение для посетителей оставить контактные данные или связаться с оператором в чате.
- Реклама социальных сетей, отдельных материалов (или товаров) на сайте, других проектов.
Модуль My PopUp разработан российской командой WPShop. Кнопка ниже даст скидку на покупку. Расширение полностью на русском, не нагружает сайт при работе и имеет подробную документацию.
Промокод на My PopUp
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Здравствуйте, подскажите, а как индексируются эти подсказки?
Здравствуйте. А картинку добавить к подсказкам?
Картинки, иконки, фоновые изображения можно добавить, если использовать для подсказок плагин My Popup.