Иногда дизайн нуждается в кратком объяснении, не давая ему полную строку на странице Это работа всплывающей подсказки: маленький пузырь, который появляется на зависании, говорит свой кусок, и уходит с дороги.The Виджет подсказки в Мастер-аддоны для Elementor прикрепляет этот пузырь к значку, фрагменту текста или изображению, контролируя размещение, анимацию, триггер и стиль.
Это руководство проходит через виджет от первого перетаскивания до стилизованной подсказки на странице в реальном времени.
Что делает виджет всплывающей подсказки #
Виджет помещает небольшой целевой элемент на вашей странице, значок, текст или изображение, и привязывает к нему пузырь подсказок. когда посетители наводят курсор или щелкают цель, пузырь появляется вместе с вашим сообщением. размещение, анимация, время и смещения настраиваются, а вкладка "Стиль" охватывает как цель, так и пузырь.
Это автономный виджет: цель и его подсказка - это все. Если вы хотите добавить подсказки к виджетам, которые уже есть на странице, Master Addons также поставляет расширение подсказки, которое подключается к любому элементу Elementor. виджет является правильным выбором, когда цель подсказки - это собственный небольшой элемент дизайна, например, информационный значок рядом с ценой или аватар команды с пузырем имен.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Виджет всплывающей подсказки включен на панели параметров "Мастерские надстройки" в разделе "Базовые виджеты".
Как добавить виджет всплывающей подсказки #
В редакторе Elementor выполните поиск Элементы панель для Совет инструмента и перетащите виджет на свою страницу. Он загружается значком информации в качестве цели по умолчанию и уже подключенной подсказкой-заполнителем, поэтому наведение значка на холсте сразу показывает пузырь.
Выберите тип контента: значок, текст или изображение #
Открытый Настройки контента во вкладке Содержание. The Тип контента переключатель вверху предлагает три цели:
- Значок: выберите любой значок из библиотеки Elementor. классический информационный круг - по умолчанию.
- Текст: введите слово или фразу, как “Hover Me!”, и всплывающая подсказка прикрепляется к нему.
- Изображение: выберите изображение из медиатеки, полезное для аватаров и миниатюр продуктов.
К каждому типу применяются два элемента управления. Выравнивание помещает цель влево, в центр или вправо. Тег HTML заворачивает цель в выбранную вами разметку: от H1 до H6, div, span, p, кнопка или a. Придерживайтесь p или span для простых всплывающих подсказок; используйте кнопку, когда цель должна действовать как элемент управления для обеспечения доступности.
С Текст выбранное поле "Содержимое" заменяет средство выбора значков:
С Изображение выбранная медиатека открывается, и выбранное изображение становится целью наведения:
Напишите всплывающую подсказку и установите ее поведение #
The Параметры подсказки секция управляет самим пузырем.
- Текст подсказки: сообщение внутри пузыря. держите его в строке или двух; всплывающие подсказки для подсказок, а не абзацы.
- Следуйте курсору: пусть пузырь выслеживает мышь, а не остается прикрепленным к цели.
- Размещение: где пузырь находится относительно цели. Верх - это по умолчанию, с верхним стартом, нижним и другими доступными краями.
- Анимация: как входит пузырь, Shift-Away по умолчанию.
- Триггер включен: Наведение курсора показывает пузырь при наведении курсора мыши; Нажмите ждет касания, что также лучше работает на сенсорных экранах.
- Продолжительность и задержка: скорость анимации и как долго пузырь задерживается после ухода курсора, оба 300 миллисекунд по умолчанию. по умолчанию для большинства страниц они кажутся подходящими; замедляйте их только в том случае, если всплывающая подсказка содержит что-то, что посетителям нужно дольше прочитать.
The Смещение X и Смещение Y ползунки отталкивают пузырь от места по умолчанию. Полезно, когда подсказка должна очистить границу или сесть рядом с целью странной формы.
Стиль цели #
В Стиль вкладка, Общие стили охватывает целевой элемент на странице.
- Ширина и заполнение контента: размер целевого блока. демо-версия расширяет его со 150 до 215 пикселей, чтобы дать аватару место.
- Нормальное состояние и состояние Ховера: Цвет фона, цвет текста, тень коробки и типографика для каждого состояния.
- Тип границы и радиус границы: кадр цели; радиус 4 пикселя сохраняет мягкость углов.
Стиль пузырь подсказки #
The Стили подсказок раздел стилизует пузырь, и холст просматривает его вживую во время работы.
- Ширина подсказки: максимальная ширина пузыря, 200 пикселей по умолчанию Текст заворачивается внутрь него.
- Цвет фона и цвет текста: демо-версия темно-синего цвета с белым текстом, классическим высококонтрастным внешним видом подсказки.
- Типографика, Набивка, Граница: текст и рамка пузыря.
- Расстояние: разрыв между пузырем и целью, 10 пикселей по умолчанию.
- Выравнивание текста и тень коробки: последние касания Мягкая тень помогает пузырю читать как парящий над страницей.
Результат на странице #
На живой странице цель сидит тихо, пока посетитель не навевает ее. Затем пузырь оживляется в выбранном вами месте, удерживается, пока курсор остается, и исчезает после задержки, которую вы установили.
Обычные случаи использования #
- Значки информации помимо строк ценообразования, этикетки форм и списки функций.
- Команда аватаров это раскрывает имя и роль при наведении курсора.
- Термины глоссария в тексте, с коротким определением в пузыре.
- Миниатюры продукта со спецификацией или заметкой, не заслуживающей места на странице.
- Кнопки только значков где всплывающая подсказка называет действие.
Советы по улучшению подсказок #
- Сохраняйте текст коротким. Одна или две строки. если сообщение нуждается в большем, оно принадлежит макету, а не подсказке.
- Используйте триггер Click для сенсорных посетителей. На телефонах нет наведения, везде работает подсказка с кликом.
- Не обращайте внимания на контраст. Темный пузырь, светлый текст, или наоборот. ширина по умолчанию 200 пикселей с 10 заполнением хорошо читается при типичных размерах шрифта.
- Проверьте размещение вблизи краев экрана. Верхняя подсказка на первом элементе страницы может обрезать; переключите его на "Внизу" или используйте смещения.
- Не прячьте критическую информацию в всплывающих подсказках. Все, что посетители должны прочитать, принадлежит странице; пузырь предназначен для массовки.
Видео Учебник #
Если вы лучше посмотрите всплывающую подсказку в действии, то это короткое видео охватывает всю настройку, начиная от перетаскивания виджета внутрь и заканчивая стилизованным пузырем на живой странице.
Часто задаваемые вопросы #
Что такое виджет всплывающей подсказки в главных надстройках?
Это виджет Элементор, который помещает значок, текст или изображение на странице и прикрепляет к нему пузырь подсказок. пузырь появляется при наведении или щелчке, и вы управляете его размещением, анимацией, временем, смещениями и полным стилем с панели Элементор.
Может ли целью всплывающей подсказки быть изображение?
Да. установите тип контента на изображение в настройках контента и выберите любое изображение из медиатеки. Затем всплывающая подсказка появляется, когда посетители наводят или щелкают изображение, что соответствует аватарам команды и миниатюрам продуктов.
Могу ли я показать всплывающую подсказку нажатием мыши вместо наведения курсора?
Да. в параметрах всплывающей подсказки измените триггер с "Навести на кнопку". Нажмите "Пусковой механизм" также лучше ведет себя на телефонах и планшетах, где "наведение" не существует.
Как изменить место появления всплывающей подсказки?
Используйте раскрывающийся список "Размещение" в параметрах всплывающей подсказки, чтобы выбрать "Верхняя часть", "Нижняя часть" или начальный или конечный вариант каждого ребра. Затем ползунки смещения X и смещения Y точно настраивают точное положение, а расстояние устанавливает разрыв от цели.
Могу ли я уложить пузырь подсказок?
Да. раздел Стили всплывающей подсказки на вкладке Стиль контролирует ширину пузыря, цвет фона, цвет текста, типографику, заполнение, границу, расстояние от цели, выравнивание текста и тень коробки. редактор предварительно просматривает изменения в прямом эфире.
Завершая #
Виджет Tooltip обрабатывает весь шаблон "пузырь подсказок" в одном месте: выберите значок, текст или цель изображения, напишите сообщение, установите триггер и размещение, а также создайте стиль обеих половин на панели Elementor. Просмотрите полный набор Виджеты и расширения Master Addgets расширение всплывающей подсказки и все остальное в поле см страница ценообразования за то, что добавляет Про.
