Вы видели всплывающие подсказки везде.Наведите курсор на значок панели инструментов в Документах Google, и маленькая метка расскажет вам, что делает эта кнопка. это всплывающая подсказка. в WordPress всплывающие подсказки позволяют добавлять короткие подсказки, которые появляются, когда кто-то зависает (или нажимает) над элементом на вашей странице. Никакой дополнительной страницы недвижимости, никакого загромождения макета.
Мастер-аддоны для Elementor дают вам два способа добавления подсказок: Элемент подсказки, отдельный виджет, который вы опускаете на страницу, и Расширение подсказки, который прикрепляет всплывающую подсказку к любому виджету, разделу или контейнеру Elementor, которые уже существуют. Это руководство охватывает оба метода, когда использовать каждый и как их стилизовать.
Оглавление
Что такое подсказки и почему они имеют значение?
Подсказка - это короткое сообщение, которое появляется, когда посетитель наводит курсор на определенный элемент на вашей странице. на сайтах WordPress подсказки служат нескольким практическим целям:
- Объясните термины, не нарушая поток. Если в вашем контенте используется жаргон, подсказка позволяет читателям быстро получить определение при наведении курсора, не прерывая абзац.
- Добавляйте контекст к изображениям и значкам. Когда вы отображаете значки продуктов, фотографии членов команды или значки функций, подсказка предоставляет дополнительную информацию, не занимая визуального пространства.
- Сохраняйте страницы в чистоте. Вместо того, чтобы впихивать каждую часть информации в видимый макет, всплывающие подсказки скрывают второстепенные детали до тех пор, пока читатель действительно не захочет их.
- Улучшить вовлеченность. Интерактивные элементы, такие как подсказки, побуждают посетителей изучать ваш контент. страницы, которые приглашают к взаимодействию, как правило, удерживают внимание дольше.
Что понадобится
- WordPress установлен на вашем сайте
- Мастер-аддоны для Elementor установлен и активирован (работает бесплатная версия)
- Конструктор страниц Elementor (бесплатно или Pro)
Master Addons - это плагин WordPress 80+ виджетов и расширений для Elementor, включая обе функции подсказок, описанные здесь.
Элемент всплывающей подсказки против расширения всплывающей подсказки: какой из них следует использовать?
Они решают разные задачи. подбор правильного экономит время.
| Особенность | Элемент подсказки | Расширение подсказки |
|---|---|---|
| Что это такое | Автономный виджет Elementor | Расширение, работающее на любом виджете |
| Работает на | Текст, изображения и значки (в виджете подсказки) | Любой контейнер, секция или элемент Элементора |
| Лучший для | Создание выделенных блоков содержимого всплывающих подсказок | Добавление всплывающих подсказок к существующим элементам страницы |
| Как получить доступ | Перетащите с панели виджетов Elementor | Включить с вкладки Дополнительно любого виджета |
| Типы контента | Текстовая подсказка, подсказка для изображения, подсказка для значков | Текстовая подсказка на любом элементе |
| Использовать случай | Вы хотите создать раздел, специально разработанный на основе всплывающих подсказок | Вы хотите добавить быструю подсказку к кнопке, заголовку, изображению или любому виджету, уже находящемуся на вашей странице |
Короткая версия:
- Нужно добавить всплывающую подсказку к заголовку, кнопке или любому виджету, уже находящемуся на вашей странице? Используйте Расширение подсказки.
- Нужен специальный блок контента, в котором пользователи наводят курсор на определенный текст, изображения или значки, чтобы видеть содержимое подсказок? Используйте Элемент подсказки.
Можно использовать и то, и другое на одной странице Они не конфликтуют друг с другом.
Способ 1: как добавить всплывающую подсказку в Elementor с помощью элемента всплывающей подсказки
The Элемент подсказки является автономным виджетом. вы перетаскиваете его на свою страницу, и пользователи наводят курсор на текст, изображение или значок, чтобы открыть сообщение подсказки.
Используйте это, когда хотите создать подсказки по изображениям, текстовые подсказки или подсказки по значкам в качестве специального раздела вашей страницы.
Шаг 1: откройте свою страницу в Elementor
На панели управления WordPress перейдите на страницу, которую хотите редактировать, и нажмите Редактировать с помощью Elementor.
Шаг 2: поиск виджета всплывающей подсказки
В панели виджетов Elementor с левой стороны в строке поиска введите “Tooltip”.The Совет по инструментам МА виджет появляется в разделе Главные дополнения Перетащите его на свою страницу, где вы хотите, чтобы всплывающая подсказка появилась.
Шаг 3: выберите тип контента
Нажмите на виджет, чтобы открыть его настройки. Под Содержание вкладка, the Тип контента опция дает вам три варианта:
- Текст. Посетители навевают курсор на ваш текст, чтобы увидеть сообщение всплывающей подсказки.
- Изображение. Посетители наводят курсор на изображение, чтобы увидеть всплывающую подсказку.
- Иконка. Посетители нависают над значком, чтобы раскрыть дополнительную информацию.
Выберите тип контента, соответствующий вашему варианту использования.
Шаг 4: настройте содержимое подсказки
После выбора типа контента настройте обе части:
Содержимое триггера (то, что посетители видят на странице):
- Для текста: введите слово или фразу, над которой будут наводиться посетители
- Для изображения: загрузите изображение из медиатеки WordPress
- Для значка: выберите значок из библиотеки значков
Содержимое подсказки (то, что появляется на зависании):
- Иди в Настройки подсказки раздел
- Введите текст подсказки во встроенный редактор
- Вы можете отформатировать текст жирным курсивом, ссылками и многим другим
Шаг 5: настройте направление и скорость подсказки
В Настройках всплывающей подсказки задайте, как отображается всплывающая подсказка:
- Направление всплывающей подсказки. Выберите, где всплывает всплывающая подсказка относительно триггера: сверху, снизу, слева или справа.
- Скорость всплывающей подсказки. Установите скорость анимации в миллисекундах. более низкие значения делают ее более быстрой.
Совет: Сохраняйте скорость всплывающей подсказки в пределах 300-500 м. Слишком быстро ощущается резко, слишком медленно - невосприимчиво.
Шаг 6: создайте подсказку
Переключиться на Стиль вкладка для настройки внешнего вида виджета подсказки Elementor:
- Содержимое Макс Ширина. Контролирует, насколько широко может достигать ящик для подсказок.
- Фон Цвет. Установите фон подсказки.
- Цвет текста. Изменить цвет шрифта подсказки.
- Типографика. Отрегулируйте семейство шрифтов, размер, вес и расстояние.
- Коробка Тень. Добавьте глубину с эффектом тени.
- Граница. Добавьте границы и установите радиус границы для закругленных углов.
- Набивка. Управляйте пространством между краями текста и подсказок.
Вы можете установить разные стили для нормальный и зависать государства для добавления визуальной обратной связи.
Ниже общих стилей Стили подсказок раздел дает вам контроль над самим пузырем. Установите ширину подсказки в пикселях, выберите фоновый и текстовый цвета, настройте типографику, настройте подкладку со всех четырех сторон, выберите тип границы, установите радиус границы для закругленных углов, контролируйте расстояние между спусковым крючком и пузырем, выровняйте текст внутри подсказки и добавьте тень коробки для глубины.
Для полного прохождения каждой настройки проверьте Подсказка Документация элемента или посмотреть видеоурок.
Способ 2: как добавить всплывающую подсказку к любому виджету Elementor с помощью расширения всплывающей подсказки
The Расширение подсказки работает иначе, чем элемент. вместо того, чтобы быть автономным виджетом, он добавляет a Совет инструмента раздел на вкладку Дополнительно каждого элемента Элементор. выберите любой виджет, контейнер, столбец или раздел, который уже существует на вашей странице, переверните переключатель, введите текст, и посетители увидят небольшой пузырь, когда они навеваются на этот элемент. Каждый элемент несет свою подсказку, поэтому три карты подряд могут объяснить себя с помощью разного текста.
Расширение разделяется на две подзаголовки: Настройки для поведения (текст, размещение, анимация, триггер, тайминг) и Стиль для образов (цвета, ширина, набивка, типографика).
Шаг 1: включите расширение подсказки
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Советы по инструментам находятся в Динамические виджеты группа. Нажмите на его переключатель, чтобы он стал фиолетовым, а затем нажмите Сохранить изменения вверху и дождитесь зеленого “Настройки сохранены успешно” уведомление.
Шаг 2: откройте свою страницу в Элементоре
Перейдите на страницу, которую хотите редактировать, и нажмите Редактировать с помощью Elementor.
Шаг 3: выберите любой элемент
Нажмите на любой существующий элемент, куда вы хотите добавить всплывающую подсказку Это работает с заголовками, кнопками, изображениями, значками, таблицами цен, контейнерами, столбцами, разделами, и любым виджетом Elementor или элементом Master Addons.Раздел всплывающей подсказки появляется на вкладке Дополнительно каждого элемента.
Шаг 4: перейдите на вкладку "Дополнительно" и включите всплывающую подсказку
Выбрав элемент, нажмите кнопку Продвинутый вкладка в панели настроек. прокрутите вниз, пока не найдете Совет инструмента раздел с фиолетовым значком МА. Разверните его и переверните Совет инструмента переключиться на Да. первой открывается подвкладка Настройки.
Шаг 5: настройте настройки подсказки
Вкладка Настройки дает вам контроль над тем, как ведет себя всплывающая подсказка:
- Содержание: текст подсказки Введите его или используйте ссылку "Записать с помощью ИИ", если вам нужна отправная точка.
- Размещение: какую сторону элемента предпочитает пузырь: верхнюю (по умолчанию), нижнюю, левую или правую.
- Следуйте курсору: делает подсказку следящей за мышью вместо того, чтобы сидеть неподвижно.Полезно для карт, диаграмм и диаграмм, где каждая область под курсором нуждается в собственной метке.
- Анимация: как входит пузырь. Семь вариантов: нет, выцветание, сдвиг в сторону, сдвиг в сторону, масштаб, перспектива и эффект наполнения.
- Триггер: что открывает всплывающую подсказку Наведите курсор по умолчанию или нажмите, чтобы получить постоянные подсказки, удобные для сенсорного экрана.
- Продолжительность и задержка: скорость анимации в миллисекундах и как долго пузырь задерживается перед закрытием.
- Смещение X и Y: оттолкните пузырь от его пятна по умолчанию на определенное количество пикселей.
- Тип стрелки и стрелки: добавьте маленький указатель, соединяющий пузырь с элементом, с острыми или круглыми вариантами стиля.
Шаг 6: создайте подсказку
Переключиться на Стиль подвкладка, чтобы пузырь соответствовал вашему дизайну, а не выглядел как браузер по умолчанию.
- Максимальная ширина: закрывает, насколько широко пузырь растет, поэтому длинный текст обертывается, а не растягивается по экрану.
- Цвет текста, фона и стрелки: полный контроль цвета, включая указатель.
- Набивка, тип границы и радиус границы: форма пузыря.
- Выравнивание текста, тень коробки и типографика: завершите образ собственным шрифтом и глубиной.
Шаг 7: проверьте результат
Сохранить и просмотреть страницу.Наведите курсор на элемент, и всплывающая подсказка исчезнет вместе с написанным вами текстом, используя анимацию, цвета и установленную вами ширину. отодвиньте курсор и он закроется после задержки. повторите для других элементов на странице.
Полную информацию о конфигурации см. в разделе Документация по расширению подсказки или посмотреть видеоурок.
Практические варианты использования каждого метода
Когда использовать элемент всплывающей подсказки
Элемент всплывающей подсказки - это выделенный блок контента. используйте его, когда всплывающие подсказки являются основной точкой раздела:
- Страницы витрины функций. Отображение функций продукта в виде значков или изображений с описаниями подсказок.
- Разделы глоссария. Создайте встроенный глоссарий, в котором читатели будут наводить курсор на термины, чтобы увидеть определения.
- Портфельные предметы. Добавьте подсказки с изображениями в миниатюры портфолио, показывающие детали проекта.
- Страницы команды. Разместите значки или фотографии с подробной информацией о командных ролях.
- Образовательный контент. Пусть учащиеся наведут курсор на ключевые слова, чтобы увидеть объяснения, не покидая страницу.
Когда использовать расширение всплывающей подсказки
Расширение всплывающей подсказки добавляет контекст к элементам, которые уже существуют на вашей странице:
- Карты функций. Предложение дополнительной детализации без удлинения карты.
- Ценовые таблицы. Объясните, что на самом деле охватывает поддержка “priority”, прямо там, где люди задаются вопросом. смотрите наш Виджет таблицы цен для большего.
- Кнопки и иконки. Элементы управления только значками меток, поэтому никто не догадывается.
- Члены команды. Забавный факт или ролевая заметка на наведении курсора на каждую фотографию.
- Технические термины. Короткие определения на жаргоне, дешевле, чем на странице глоссария.
Объединение обоих методов
Вы можете использовать оба на одной странице Например, используйте элемент всплывающей подсказки, чтобы построить раздел сравнения функций, где посетители навевают курсор на значки, чтобы узнать о каждой функции, затем используйте расширение всплывающей подсказки на кнопке CTA внизу, чтобы добавить “Бесплатная 14-дневная пробная версия, не требуется подсказка кредитной карты”.
Между ними нет конфликта Они служат разным целям и могут сосуществовать на любой странице.
Лучшие практики подсказок для WordPress
- Сохраняйте текст подсказки коротким. Цельтесь в 1-2 предложения. если вам нужно больше, информация, вероятно, принадлежит самой странице, а не скрыта в подсказке.
- Используйте последовательное позиционирование. Выберите одно направление (верхнее или нижнее работает лучше всего для большинства случаев) и придерживайтесь его на своем сайте. смешивание позиций кажется случайным.
- Не злоупотребляйте всплывающими подсказками. Если каждый элемент на вашей странице имеет всплывающую подсказку, посетители не будут беспокоиться о том, чтобы зависать над любым из них. Используйте их там, где они действительно повышают ценность.
- Убедитесь, что всплывающие подсказки работают на мобильных устройствах. На сенсорных экранах не существует Расширение всплывающей подсказки поддерживает триггеры кликов, которые лучше работают для мобильных пользователей Перед публикацией тестируйте подсказки на телефоне.
- Соответствуйте дизайну вашего сайта. Настройте цвета подсказок, шрифты и границы, чтобы они соответствовали существующей теме. Стиль подсказок по умолчанию может выглядеть неуместно на полированном сайте.
Элемент всплывающей подсказки против расширения всплывающей подсказки: быстрое сравнение
| Особенность | Элемент подсказки | Расширение подсказки |
|---|---|---|
| Настройка | Перетащите новый виджет | Включить на любой существующей вкладке виджета Advanced |
| Триггерное содержимое | Текст, изображения, значки (встроенные в виджет) | Любой элемент Elementor: заголовки, кнопки, изображения, разделы, контейнеры |
| Лучший для | Выделенные блоки содержимого всплывающих подсказок | Добавление всплывающих подсказок к существующим конструкциям |
| Анимации | Затухание, масштабирование, сдвиг | 7 вариантов: Нет, Затухание, Отмена, Сдвиг-К, Масштаб, Перспектива, Эффект наполнения |
| Следуйте курсору | Нет | Да |
| Пишите с помощью ИИ | Нет | Да (для текста подсказки) |
| Настройка стрелки | Нет | Да (острый или круглый) |
| Настройка | Полный контроль стиля | Полный контроль стиля (вкладка "Стиль") |
| Несколько подсказок на странице | Да | Да (каждый элемент несет в себе свое) |
| Кривая обучения | Минимальный | Минимальный |
Обе функции доступны в Мастер-аддоны для Elementor. Вы можете начать с бесплатной версии и обновиться до Про для расширенных вариантов стиля и дополнительных виджетов.
Часто задаваемые вопросы
Как добавить всплывающую подсказку в WordPress без плагина?
Вы можете добавить основные подсказки с помощью HTML, добавив a title приписать любому элементу (например, <span title="Your tooltip text">Hover here</span>).Но этот метод предлагает нулевой контроль стиля и выглядит по-разному в разных браузерах. для пользовательских, стилизованных подсказок в WordPress, плагин, как Master Addons дает вам полный контроль над дизайном, анимацией и позиционированием.
Могу ли я добавить всплывающую подсказку к изображению в Elementor?
Да. главные надстройки предлагают два способа. используйте элемент всплывающей подсказки и выберите “Image” в качестве типа содержимого для создания специальной подсказки изображения. или используйте расширение всплывающей подсказки на любом виджете изображения элементара, чтобы добавить всплывающую подсказку к существующему изображению на своей странице.
Работают ли всплывающие подсказки на мобильных устройствах?
Стандартные подсказки на основе ховера не работают на сенсорных экранах, так как курсор для наведения курсора отсутствует. расширение подсказки Master Addons поддерживает опцию запуска клика, которая отображает подсказку при нажатии пользователями на элемент на мобильном телефоне. Это делает ваши подсказки доступными для всех устройств.
Чем отличается всплывающая подсказка от поповера?
Подсказка - это небольшой текстовый подсказка, которая появляется при наведении курсора и исчезает при перемещении курсора. Поповер обычно больше, может содержать богатый контент, такой как изображения, кнопки или формы, и часто требует щелчка, чтобы открыться и закрыть. Элемент подсказки главных дополнений может включать в себя форматированный текст, что делает его гибким как для простых подсказок, так и для более насыщенного контента наведения.
Подсказки хороши для SEO?
Содержимое всплывающей подсказки отображается в HTML, поэтому поисковые системы могут сканировать текст внутри них. однако, поскольку содержимое всплывающей подсказки скрыто по умолчанию и видно только при наведении курсора, поисковые системы могут придать ему меньший вес. не прячьте важный контент в всплывающих подсказках. используйте их для дополнительной информации, которая повышает ценность пользовательского опыта.
Могу ли я использовать элемент всплывающей подсказки и расширение всплывающей подсказки на одной странице?
Да. они работают независимо и не конфликтуют друг с другом. используйте элемент всплывающей подсказки для выделенных блоков содержимого всплывающей подсказки и расширение всплывающей подсказки, чтобы добавить быстрые всплывающие подсказки к любому существующему виджету Elementor на той же странице.
Начните добавлять подсказки на свой сайт WordPress
С помощью Master Addons вы получаете два варианта: Элемент подсказки для создания специального контента всплывающих подсказок с триггерами текста, изображений и значков Расширение подсказки для добавления подсказок к любому существующему элементу Elementor на вашей странице.
Оба метода работают из коробки. Вы также можете проверить Виджет точки доступа изображения если вам нужны интерактивные подсказки, прикрепленные к определенным местам изображения.
Скачать Master Addors для Elementor чтобы начать.
