Некоторые детали не заслуживают целого абзаца на странице Короткая заметка, которая появляется на hover делает работу, как дополнительный контекст на карточке функций или метка на кнопке только значок.Elementor не имеет встроенного способа сделать это, так что Совет инструмента расширение в Мастер-аддоны для Elementor добавляет по одному на вкладку Advanced каждого элемента.
Вы пишете текст подсказки, выбираете, где он появляется и как он анимируется, затем стилизуете его, как любую другую часть вашего дизайна. Нет короткого кода и нет CSS.
Что делает расширение Tooltip #
После включения каждый элемент Elementor получает a Совет инструмента раздел под Продвинутый вкладка Включите его для элемента, введите текст, и посетители увидят небольшой пузырь, когда они навеваются на этот элемент на живой странице. каждый элемент несет свою собственную подсказку, поэтому три карты подряд могут объяснить себя с помощью разного текста.
Расширение разделяется на две подзаголовки: Настройки для поведения (текст, размещение, анимация, триггер, тайминг) и Стиль для образов (цвета, ширина, набивка, типографика).
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- Tooltips - это бесплатное расширение, поэтому лицензия Pro не требуется.
Как включить расширение Tooltip #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Советы по инструментам находятся в Динамические виджеты группа с популярным значком, рядом с Динамические теги и Оберточная ссылка. Нажмите на его переключатель, чтобы он стал фиолетовым, а затем нажмите Сохранить изменения вверху и дождитесь зеленого “Настройки сохранены успешно” уведомление.
Добавьте всплывающую подсказку к элементу #
Откройте свою страницу с помощью Elementor и выберите элемент. в примере видео это карта Info Box в строке с тремя столбцами. Перейти к Продвинутый вкладка, откройте Совет инструмента раздел с фиолетовым значком MA и переверните его Совет инструмента переключиться на Да. первой открывается подвкладка Настройки.
Объясненные настройки #
- Содержание: текст подсказки Введите его или используйте ссылку "Записать с помощью ИИ", если вам нужна отправная точка.
- Размещение: какую сторону элемента предпочитает пузырь: верхнюю (по умолчанию), нижнюю, левую или правую.
- Следуйте курсору: заставляет подсказку следовать за мышью, а не сидеть неподвижно.
- Анимация: как входит пузырь. Семь вариантов: нет, выцветание, сдвиг в сторону, сдвиг в сторону, масштаб, перспектива и эффект наполнения.
- Триггер: что открывает всплывающую подсказку, наведите курсор по умолчанию.
- Продолжительность и задержка: скорость анимации в миллисекундах и как долго пузырь задерживается перед закрытием.
- Смещение X и Y: оттолкните пузырь от места по умолчанию.
- Тип стрелки и стрелки: добавьте маленький указатель, соединяющий пузырь, к элементу, острому или круглому.
Стиль всплывающей подсказки #
Переключиться на Стиль подвкладка, чтобы пузырь соответствовал вашему дизайну, а не выглядел как браузер по умолчанию.
- Максимальная ширина: закрывает, насколько широко растет пузырь, 200px в демо, поэтому длинный текст обертывается вместо того, чтобы растягиваться по экрану.
- Цвет текста, фона и стрелки: полный контроль цвета, включая указатель.
- Набивка, тип границы и радиус границы: форма пузыря.
- Выравнивание текста, тень коробки и типографика: завершите образ собственным шрифтом и глубиной.
Результат на странице #
Сохранить и просмотреть страницу. наведите курсор на карту, и всплывающая подсказка исчезнет вместе с написанным вами текстом, используя анимацию, цвета и установленную вами ширину. отодвиньте курсор, и он закроется после задержки.
Повторите для других элементов на странице. В демо-версии каждая из трех карточек функций получает свой собственный текст подсказки, написанный один раз на панели и подаваемый при каждом наведении.
Где советы по инструментам зарабатывают себе на жизнь #
- Карты функций. Предложение дополнительной детализации без удлинения карты.
- Ценовые таблицы. Объясните, что на самом деле охватывает поддержка “priority”, прямо там, где люди задаются вопросом.
- Кнопки и иконки. Элементы управления только значками меток, поэтому никто не догадывается.
- Члены команды. Забавный факт или ролевая заметка на наведении курсора на каждую фотографию.
- Технические термины. Короткие определения на жаргоне, дешевле, чем на странице глоссария.
Видео Учебник #
Предпочитаете увидеть это вживую? Это видео включает в себя расширение, написание подсказки и укладку пузыря.
Часто задаваемые вопросы #
Как добавить всплывающую подсказку в Elementor?
Включите расширение Tooltips на вкладке Расширения главных дополнений, затем выберите любой элемент в редакторе Elementor, откройте вкладку Дополнительно и включите переключатель Tooltip Введите текст в поле Содержимое, выберите размещение и анимацию, а также подсказку, отображаемую на ховере.
Могу ли я добавить всплывающую подсказку к любому виджету Elementor?
Да. раздел "Подсказки" появляется на вкладке "Дополнительно" каждого элемента: виджетов, столбцов, контейнеров и разделов. Каждый элемент сохраняет свой собственный текст подсказки и настройки, поэтому разные карты на одной странице могут говорить разные вещи.
Могу ли я создать всплывающую подсказку, соответствующую моему сайту?
Да. подвкладка Стиль контролирует максимальную ширину, цвет текста, цвет фона, цвет стрелки, заполнение, границу, радиус границы, выравнивание текста, тень коробки и типографику. пузырь может соответствовать вашему бренду, а не выглядеть как браузер по умолчанию.
Какие анимации поддерживает всплывающая подсказка?
Семь вариантов: Нет, Затухание, Отключение, Сдвиг-К, Масштаб, Перспектива, и Эффект Заполнения Вы также управляете длительностью анимации в миллисекундах и задержкой до закрытия всплывающей подсказки после ухода курсора.
Расширение Tooltip бесплатное?
Да. всплывающие подсказки поставляются с бесплатной версией Master Addons for Elementor, в группе Динамические виджеты вкладки Расширения.The страница ценообразования показывает, что планы Pro добавляют помимо бесплатных расширений.
Завершая #
Расширение Tooltip для Elementor помещает небольшую стилистическую заметку о наведении на все, что вы собираете: переверните переключатель на вкладке "Дополнительно", напишите текст, выберите размещение и анимацию и один раз создайте стиль пузыря. Он читается как часть вашего дизайна, а не как оставшийся браузер. Для большего количества обновлений Advanced-tab просмотрите Виджеты и расширения Master Addgetsили посмотрите Расширение стекломорфизма для еще одного эффекта одного переключения.
