Виджет точки доступа изображения Elementor с всплывающими подсказками (Pro)
Image Hotspot - это виджет Master Addons Pro, который прикрепляет маркеры поверх изображения. Маркером может быть простая точка, короткая текстовая метка, значок "Шрифт потрясающий" или маленькое изображение, и каждый из них открывает подсказку, когда посетитель ее наводит, или нажимает на нее, как только вы включите "Триггер" нажатием. Это подходит для фотографий "магазин-посмотреть", вызовов продуктов, планов этажей, карт кампуса и меченых диаграмм. Если вам нужен подсказка о наведении курсора на кнопку или заголовок, бесплатно Виджет подсказки или Расширение всплывающих подсказок (Pro) подходит ли ближе.
Как добавить точку доступа к изображению в Elementor
Чтобы добавить точку доступа к изображению в Elementor, активируйте Master Addons Pro, отредактируйте страницу с помощью Elementor и выполните поиск на панели виджетов по запросу Image Hotspot. Перетащите его, выберите изображение в разделе "Изображение", затем откройте "Точки доступа" и нажмите "Добавить элемент" для каждого маркера. Установите тип, содержимое подсказки и позицию каждого маркера, затем опубликуйте.
Найдите на панели “hotspot” и два результата вернитесь. один MA с бейджем - это этот виджет. Заблокированная рядом с ним точка доступа Elementor - это собственная точка доступа Elementor, которой нужна лицензия Elementor Pro, поэтому стоит проверить, какой из них у вас уже есть, прежде чем строить.
Забросьте виджет, выберите изображение и установите Разрешение изображения до Полного, если изображение несет в себе мелкие детали Маркеры сидят на визуализированном изображении, поэтому уменьшенный источник делает каждый вывод приблизительным Открыть Горячие точки, нажмите Добавить элемент, и повторите один раз на маркер. каждый элемент имеет свои собственные вкладки Содержимое, Стиль и Позиция.
Две вещи подставляют людей на первом сборе Маркеры приземляются в левом верхнем углу, пока вы не коснетесь ползунков Позиции, поэтому три свежих элемента складываются в то, что выглядит как один. И поле Содержимое всплывающей подсказки является полным редактором, что делает соблазнительным вставить абзац в. Есть причина сопротивляться тому, покрытый дальше вниз.
Работающие примеры с фотографиями продуктов, картами и диаграммами живут в как добавить точки доступа к изображениям в Elementor. Каждый элемент управления указан в Руководство по настройкам виджетов Hotspot изображения.
Четыре типа маркеров на одном изображении
выше Тип управление на вкладке "Содержимое" маркера дает вам четыре формы, и вы можете перемешать все четыре внутри одного изображения.
Нет оставляет голую цветную точку. Это самый чистый вариант для плотных диаграмм, где метки будут сталкиваться друг с другом.
Текст печатает короткую строку внутри маркера. числа хорошо работают здесь, потому что 01, 02 и 03 через кадр продукта читается как экскурсия без легенды, чтобы написать. более длинные строки превращают точку в таблетку, которая является образ вы хотите для чего-то вроде “Cologne № 5”.
Икона берет из библиотеки любой значок "Шрифт потрясающий", чтобы лист мог заменять ингредиенты, а звезда - рейтинг.
Изображение замените маркер на картинку из медиатеки.Лучше всего читаются миниатюры продуктов и аватары; все занятое превращается в кашу при размере маркера.
Каждый маркер также принимает a Ссылка. Эта ссылка срабатывает, когда всплывающие подсказки открываются при наведении курсора или на точках останова, где вы отключили всплывающие подсказки. Он не срабатывает, пока включен триггер нажатия, поскольку нажатие уже сделано.
Разместите каждый маркер в процентах
выше Должность таб удерживает два ползунка, Горизонтальное положение и Вертикальное положение, оба измерены в процентах от изображения. Установка 50 и 24 ставит маркер на четверть пути вниз по середине. нет размещения на холсте, поэтому вы подталкиваете цифры и смотрите предварительный просмотр.
Процент - это то, что сохраняет маркеры честными на телефоне. базовое изображение масштабируется вместе с контейнером, и каждый маркер сохраняет свое относительное место, поэтому этикетка, прикрепленная к крышке бутылки, все еще находится на крышке бутылки шириной 390 пикселей, где смещение пикселей могло бы сойти.
На той же вкладке имеется каждый маркер Показать к, который переопределяет глобальную сторону всплывающей подсказки для этого одного маркера. Это помогает, когда маркер находится рядом с правым краем, а его всплывающая подсказка будет стекать с изображения: установите этот знак влево, а остальное оставьте сверху.
Маркеры пульсируют по умолчанию. The Отключить импульсный эффект переключатель в нижней части раздела "Горячие точки" выключает анимацию для каждого маркера одновременно, что обычно и требуется для плана этажа с пятнадцатью контактами.
Положение подсказок, анимация и мобильное поведение
выше Советы по инструментам секция управляет каждой подсказкой в виджете вместе: отображение положения (вверху, внизу, слева или справа), анимация (сдвиг, сдвиг в сторону, затухание, масштаб или перспектива), переключатель стрелок, а также смещение и расстояние для точного подталкивания.
Советы по работе открываются при зависании. телефоны не имеют зависания, что оставляет два честных варианта. включите Триггер на Нажать и кран открывает всплывающую подсказку Или установить Отключить On в Mobile, или Tablet & Mobile, которая скрывает всплывающие подсказки на тех экранах и передает задание в Ссылку каждого маркера.
Одно ограничение для планирования вокруг.Tooltip Content является WYSIWYG box, но виджет лишает разметку перед тем, как она отображается, поэтому жирным шрифтом, ссылки, изображения и короткие коды все исчезают и всплывающая подсказка показывает простой текст.Keep каждый в одной короткой строке. когда вам нужно отформатированное содержимое всплывающей подсказки, виджет Hotspot от Elementor Pro обрабатывает богатый текст, а этот виджет - нет.
Стилизация самой всплывающей подсказки - это полный набор: выравнивание, заполнение, радиус, фон, цвет текста, граница, цвет стрелки, типографика и тень коробки. Базовое изображение получает непрозрачность, границу, радиус, тень коробки и фильтры CSS.
Маркеры стиля для дефолта и ховера
Стиль маркера расположен в двух местах, что проще, чем кажется, если вы знаете разделение.
Виджет Стиль вкладка охватывает каждый маркер одновременно: заполнение текста, радиус границы, типографику, группу перехода, а затем вкладки по умолчанию и наведение, содержащие непрозрачность, размер, цвет, цвет фона, тип границы и тень коробки. Размер представляет собой множитель масштаба от 0,5 до 2, поэтому установка наведения на 1,15 дает маркерам легкий подъем под курсором, не сдвигая ничего другого на странице.
Вкладка Стиль внутри одного маркера переопределяет цвет, фон и непрозрачность этого маркера для определения по умолчанию и зависания. Именно так вы делаете один маркер красным на фиолетовой стене, чтобы отметить распроданный товар или отметить горячую точку, которую хотите заметить первой.
Граничный радиус в 100 дает вам круги и таблетки. Бросьте его до 6 и текстовые маркеры становятся квадратными тегами, которые читаются лучше на архитектурном рисунке, чем ряд пузырей.
Точка доступа Elementor Pro против точки доступа к изображениям главных дополнений
Элементор Про отправляет свой собственный виджет Hotspot Если вы уже платите за Элементор Про, проверьте его первым, потому что вам может не понадобиться этот вообще.
| Особенность | Горячая точка Элементор Про | Точка доступа к изображениям главных дополнений |
|---|---|---|
| Цена | Нужен Элементор Про | Нужны главные дополнения Pro |
| Типы маркеров | Текст этикетки и значок пользовательского размера | Нет, текст, значок или изображение |
| Маркерная анимация | Soft Beat, Expand или Overlay с последовательной анимацией | Включение или выключение импульса |
| Содержимое подсказки | Богатый текст с форматированием | Только простой текст |
| Триггер подсказки | Наведите указатель мыши, нажмите или нет | Наведите указатель мыши или нажмите "Триггер" на кнопку |
| Анимация подсказок | Стили затухания и скольжения с настройкой продолжительности | Отклонение, смещение к, затухание, масштаб, перспектива, а также стрелка, смещение и расстояние |
| Мобильный | По позициям устройства | Отключите всплывающие подсказки на планшете, мобильном телефоне или мобильном телефоне |
Элементор Про выигрывает на богатой анимации текста всплывающей подсказки и маркеров.Мастер Аддоны является выбором, если вы хотите маркеры изображений или уже используете Мастер Аддоны Про без Элементор Про. Связанные: бесплатно Виджет подсказки, Расширение всплывающих подсказок (Pro), Сравнение изображений и Эффекты наведения изображения.
Где точка доступа к изображению зарабатывает свое место
Фотография "Магазин-похожий" - очевидная. Один снимок образа жизни, маркер изображения на продукт, подсказка с названием каждого товара и ссылка на страницу продукта. Он работает лучше, чем сетка миниатюр, потому что посетитель видит детали, стилизованные вместе, прежде чем они увидят их цену.
Спецификации без таблицы спецификаций - это более тихое использование. На корпусах камер, часах и оборудовании пронумерованные маркеры обходят читателем объект в выбранном вами порядке, и никому не нужно отображать строку 4 таблицы обратно на фотографию.
Затем есть планы этажей, карты кампуса и маркированные диаграммы. Точки с отключением импульсного эффекта, подсказки, установленные для запуска нажатия, и ссылка на каждом маркере, указывающая на всю страницу. Пятнадцать контактов остаются читаемыми таким образом; пятнадцать пульсирующих таблеток этого не делают.
Часто задаваемые вопросы для точки доступа к изображениям
Что происходит на мобильных телефонах, где нет зависания?
Включите триггер на Нажмите в разделе Советы по инструментам, чтобы посетители нажали маркер, чтобы открыть всплывающую подсказку. Вы также можете установить "Отключить на мобильный телефон" или "Планшет и мобильный телефон", что скрывает подсказки на этих экранах и позволяет маркеру "Ссылка" доставлять посетителей к дополнительной информации.
Могу ли я использовать пользовательское изображение вместо значка для маркера точки доступа?
Да. установите тип точки доступа в изображение и выберите изображение из медиатеки. Небольшое простое изображение, такое как миниатюра продукта или аватар, лучше всего читается в размере маркера.
Отзывчиво ли само базовое изображение?
Да. изображение масштабируется с его столбцом, и положения маркеров устанавливаются в процентах, поэтому каждый маркер остается на одной и той же части изображения в зависимости от размера экрана. Советы по подсказкам могут нуждаться в триггере нажатия или отключении для небольших экранов.
Виджет Image Hotspot бесплатен?
Нет. Точка доступа к изображениям является частью Мастер Аддоны Про. Бесплатный плагин имеет Виджет подсказки, который добавляет подсказку о наведении на один элемент, но не закрепляет маркеры на изображении Пользователи Elementor Pro также могут использовать собственный виджет Hotspot от Elementor.
Могу ли я отключить импульсную анимацию?
Да. отключить импульсный эффект сидит в нижней части раздела Hotspots и выключает импульс для каждого маркера в этом виджете. нет импульсного переключателя для каждого маркера, поэтому используйте второй виджет точки доступа к изображению, если вам нужны оба образа на одной странице.
Почему в моей подсказке исчезает форматирование?
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
