Некоторые изображения нуждаются в небольшом объяснении, как снимок продукта, план этажа, или карта.The Виджет точки доступа изображения в Мастер-аддоны для Elementor является виджетом Pro, который привязывает кликабельные маркеры в любом месте изображения. каждый показывает короткую текстовую подсказку, и может ссылаться на другую страницу, когда посетитель наводит или нажимает на нее.
Вы загружаете изображение, опускаете точки доступа туда, где вы хотите их, добавляете текст подсказки, затем стилизуете маркеры и устанавливаете, как ведут себя подсказки. это руководство охватывает каждую настройку виджета.
Что делает виджет Image Hotspot #
Виджет помещает маркеры поверх одного изображения. у каждой точки доступа есть своя позиция, значок и подсказка, поэтому вы можете пометить части фотографии или связать их с другими страницами. Наведите курсор или щелкните маркер, и рядом с ним появится подсказка.
Три вкладки запускают его. Содержание содержит изображение, горячие точки и поведение подсказки. Стиль обрабатывает изображение, цвета маркеров и внешний вид подсказки. Продвинутый это обычное расстояние и видимость Элементора.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер Аддоны Про установлен с активной лицензией, так как Image Hotspot является виджетом Pro. Новинка плагина? см руководство установки.
- Изображение, а также метки или ссылки, которые вы хотите отобразить в каждой точке доступа.
Как добавить виджет Image Hotspot #
В редакторе Elementor откройте Элементы панель и поиск Точка доступа к изображению, или прокрутить в раздел Главные дополнения (виджеты несут фиолетовый значок МА). перетащите его на страницу, и он загружается образцом изображения и маркеров, которые вы можете редактировать.
Выберите изображение #
Открыть Содержание вкладка. Изображение раздел - это место, где вы загружаете базовое изображение, на котором расположены горячие точки.
- Выберите изображение: выберите картинку из медиатеки.
- Разрешение изображения: размер подается, например, большой или полный.
- Выравнивание: слева, в центре или справа внутри столбца.
Добавить точки доступа #
Открыть Горячие точки раздел. это ретранслятор, поэтому каждый маркер является своим собственным элементом. используйте Добавить элемент, чтобы добавить маркеры, затем поместите каждый из них с ползунками на вкладку "Положение".
- Добавить товар: добавьте столько точек доступа, сколько нужно изображению.
- Отключить импульсный эффект: выключите пульсирующую анимацию на маркерах.
- Вкладка "Положение": Горизонтальное и вертикальное положение в процентах для каждого маркера.
Настройте каждую точку доступа #
Нажмите на точку доступа, чтобы открыть ее настройки. The Содержание вкладка устанавливает тип маркера, текст подсказки и дополнительную ссылку.
- Тип: ничего не показывайте, короткий текст, значок или изображение внутри маркера.
- Текст и ссылка: текст внутри маркера и URL-адрес, который работает, когда всплывающие подсказки открываются при наведении или отключаются на этом экране.
- Содержание подсказки: текст всплывающей подсказки. он редактируется в поле WYSIWYG, но всплывающая подсказка показывает только обычный текст.
Стиль каждой точки доступа #
The Стиль вкладка на горячей точке задает свои цвета. вы получаете цвет и фон для нормального состояния и отдельный набор для зависания, плюс ползунок непрозрачности.
- Цвет и фон по умолчанию: маркер в состоянии покоя.
- Цвет и фон наведения: как меняется при зависании.
- Непрозрачность: как солидно выглядит маркер.
Управляйте всплывающими подсказками #
Вернувшись на основную вкладку "Контент", Советы по инструментам раздел управляет тем, как ведет себя каждая подсказка: где она находится, как она анимируется и открывается ли она при наведении или щелчке.
- Показать положение и стрелку: на какой стороне открывается подсказка и есть ли на ней указатель.
- Анимация: эффект раскрытия, как и Shift-Toward.
- Триггер на Нажать: откройте всплывающие подсказки нажатием мыши вместо зависания, лучше на ощупь. Отключить On скрывает подсказки на планшете, мобильном телефоне или мобильном телефоне.
Стиль изображения и подсказок #
Открыть Стиль вкладка на виджете. The Изображение раздел задает непрозрачность картины, границу, фильтры, отделяет Горячие точки и Советы по инструментам в разделах стилизованы маркеры и ящики для подсказок.
- Изображение: непрозрачность, радиус границы, тень коробки и фильтры CSS.
- Горячие точки: глобальный размер и цвет маркеров.
- Советы по работе: фон подсказки, цвет текста и типографика.
Обычные случаи использования #
- Изображения продуктов прикрепление функций или характеристик к частям фотографии.
- Карты и планы этажей маркировка комнат, кабинок или мест.
- Инфографика добавление деталей без загромождения изображения.
- Фотографии команды или офиса маркировка людей или территорий.
- Учебники указание шагов или частей на скриншоте.
Советы по работе с виджетом Image Hotspot #
- Сохраняйте читаемость горячих точек. Распорте их, чтобы маркеры и подсказки не перекрывались на экранах меньшего размера.
- Используйте нажмите на мобильный. Включите триггер нажатием, чтобы пользователи могли открывать подсказки, поскольку на телефоне нет зависания.
- Сравните маркеры. Выберите цвет маркера, который выделяется на изображении позади него, иначе его проглотит занятая фотография.
- Сохраняйте текст подсказки коротким. Одна-две строки читаются лучше, чем абзац, засунутый в плавающий ящик.
- Установите точные позиции. Используйте ползунки вкладки "Положение", затем предварительно просмотрите телефон, чтобы проверить каждый маркер.
Смотрите видеоурок #
Предпочитаете следовать на экране? Видеоурок ниже проходит через элемент точки доступа к изображениям от начала до конца, показывая, как изображение, точки доступа, всплывающие подсказки и стиль работают в редакторе Elementor.
Часто задаваемые вопросы #
Что такое виджет Image Hotspot в Master Addons?
Это виджет Master Addons Pro для Elementor, который привязывает интерактивные маркеры к изображению. каждая точка доступа имеет свою собственную позицию, тип маркера, подсказку для обычного текста и дополнительную ссылку, отображаемую при наведении или щелчке мыши. Все устанавливается с панели Elementor без кода.
Как добавить больше точек доступа к изображению?
Откройте раздел "Горячие точки" на вкладке "Содержимое" и используйте "Добавить элемент", чтобы создать еще один маркер. Каждая новая точка доступа получает свое собственное содержимое, стиль и позицию, и вы помещаете ее с помощью ползунков на вкладку "Положение".
Могу ли я добавить ссылку на точку доступа?
Да. у каждой точки доступа есть поле Ссылка на вкладке Содержимое, поэтому маркер может указывать на любой URL-адрес. Ссылка работает, когда всплывающие подсказки открываются при наведении или отключаются на этом экране. Это позволяет изображению действовать как кликабельная карта, отправляя посетителей на страницу продукта, раздел или внешний сайт с помощью контакта на фотографии.
Работают ли точки доступа к изображениям на мобильных устройствах?
Да, но нажатие не существует на касание Включите триггер на Нажмите в разделе Советы по инструментам, чтобы мобильные пользователи могли нажать маркер, чтобы открыть его всплывающую подсказку Вы также можете скрыть всплывающие подсказки ниже точки останова и использовать ссылку маркера вместо этого.
Могу ли я использовать собственный значок или изображение в качестве маркера?
Да. у каждой точки доступа есть опция Тип на вкладке Содержимое, где вы можете показать значок или изображение внутри маркера вместо значения по умолчанию. таким образом, маркеры могут соответствовать вашему бренду или теме изображения.
Завершая #
Виджет Image Hotspot превращает плоское изображение в интерактивное: загрузить изображение, закрепить маркеры, добавить всплывающие подсказки, затем стилизовать маркеры и задать поведение всплывающей подсказки. примеры и сравнение с точкой доступа Elementor Pro см Виджет точки доступа изображения Elementor страница. Чтобы узнать о связанных виджетах, см. Виджет сравнения изображений и Виджет эффектов наведения изображения, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
