Хотите узнать, как создать интерактивное изображение с Hotspots в WordPress благодаря Elementor и необходимые дополнения?
Изображение – отличный инструмент для передачи информации. Всем известно, что информацию, передаваемую через изображение — и визуальную форму в целом — легче понять и запомнить.
В контексте Интернета вы можете использовать множество форматов изображений. Из инфографики, фотографии, комикса, иллюстрации и т. д.
Если вы хотите создать веб-контент, такой как анатомия чего-либо, городские достопримечательности, карты или маршруты, создание изображений с помощью Hotspots может быть отличной идеей.
Идея этого типа контента состоит в том, чтобы предоставить интерактивное изображение, которое поможет вашим читателям понять информацию, которую вы передаете. Вы можете добавить горячие точки на изображение, которое содержит всплывающую подсказку для каждой активной области. Вот пример.
Если у вас есть сайт на основе WordPress создать изображение с горячими точками не так уж сложно. Вы можете создать его с помощью модуля Основные дополнения .
Что такое модуль Essential Addons?
Essential Addons — это дополнение кElementor. Это один из самых популярных модов, который скачали более 2 миллионов раз. Это дополнение добавляет около 60 дополнительных виджетов в ваш Elementor.
Одним из виджетов, предлагаемых Essential Addons, является Горячие точки изображений EA который можно использовать для создания интерактивного изображения. Essential Addons сам по себе является бесплатным дополнением, но вы должны использовать профессиональную версию для создания изображений с Hotspots, потому что виджет EA Image Hotspots доступен только в этой версии.
Как использовать модуль Essential Addons для создания образов с Hotspots
Во-первых, вам нужно установить модули Elementor и Essential Addons на ваш WordPress. Вы можете получить профессиональную версию Essential Addons на его сайт официальный. В то время как для Elementor вы можете использовать бесплатную версию.
См. Также: Как использовать глобальный виджет в Elementor
Бесплатная версия Elementor доступна в каталоге Плагин Wordpress поэтому вы можете установить его, набрав «elementor» в поле поиска установщика плагинов (Плагины –> Добавить).
После установки Elementor и Essential Addons создайте новую страницу (Страницы –> Добавить) или новую статью (Предметы – > Добавить) и отредактируйте его с помощью Elementor. Вы будете перенаправлены в редактор Elementor после нажатия кнопки Редактировать с помощью Elementor.
Прежде чем создавать изображения с активными точками, вы можете сначала установить макет. Для этого откройте панель настроек страницы, щелкнув значок шестеренки в левом нижнем углу левой панели.
Читайте также: Как использовать виджет сообщений Elementor
Установите макет в раскрывающемся меню раскладка
Добавьте новый раздел, щелкнув значок плюса в поле редактирования, и добавьте виджет EA Image Hotspots с левой панели.
Добавьте свое изображение, нажав на средство выбора изображений на левой панели.
открытый вариант Hotspots на левой панели, чтобы добавить точки доступа. По умолчанию виджет EA Image Hotspots содержит активную область. Вы можете нажать на точку доступа по умолчанию, чтобы изменить ее содержимое.
По умолчанию тип точки доступа установлен на значок. Вы можете изменить его на Текст или уйти Смотри если вы хотите.
Нажмите на вкладку ПОЛОЖЕНИЕ установить положение точки доступа. Установите положения X и Y, перетаскивая ползунки.
Нажмите на вкладку ИНСТРУМЕНТ чтобы добавить содержимое всплывающей подсказки. Активируйте всплывающую подсказку и добавьте свой контент в редакторе. Вы также можете установить положение всплывающей подсказки: сверху, снизу, слева или справа.
Чтобы добавить больше точек доступа, просто нажмите кнопку ДОБАВИТЬ ЭЛЕМЕНТ в разделе Hotspots и повторите описанные выше шаги, чтобы установить положение активной области, содержание всплывающей подсказки и положение всплывающей подсказки.
Откройте раздел Настройки всплывающей подсказки установить размер всплывающих подсказок и эффект анимации.
Теперь перейдите на вкладку Стиль чтобы стилизовать горячие точки, а также всплывающие подсказки. Сначала откройте опцию Фото товара для установки размера изображения.
Открытый раздел Hot Spot для настройки горячих точек. Вы можете установить размер, цвет значка (или текста в зависимости от выбранного вами типа точки доступа), цвет фона, радиус границы и т. д.…
Узнайте также: Как добавить связанные элементы в Elementor
Откройте раздел подсказке для настройки всплывающих подсказок. Вы можете установить цвет фона, цвет текста, типографику (размер шрифта, семейство шрифтов, стиль шрифта) и ширину.
До сих пор вы успешно создавали изображения с горячими точками. Вы можете поиграть с левой панелью, чтобы настроить изображения с помощью горячих точек, пока не будете довольны результатом. Как только вы закончите, вы можете нажать кнопку ОПУБЛИКОВАТЬ опубликовать свою страницу.
Добавьте изображения с горячими точками в Гутенберг
Если вы хотите добавить изображения с горячими точками в качестве вспомогательного материала для статьи, над которой вы работаете, вы можете интегрировать ее с Gutenberg (редактор WordPress по умолчанию) с помощью плагина Блоки Elementor для Гутенберга. Этот плагин позволяет использовать шаблон Elementor в качестве блока Гутенберга.
Чтобы сохранить изображения с горячими точками выше в качестве шаблона раздела Elementor, щелкните правой кнопкой мыши дескриптор раздела и выберите Сохранить как шаблон.
Дайте вашей модели имя и нажмите кнопку ЗАПИСЫВАТЬ.
Откройте статью, в которую вы хотите добавить изображения с горячими точками. Добавьте новый блок, выберите Библиотека элементов и выберите только что созданный шаблон изображения с активными точками.
Получить Elementor Pro сейчас !!!
Заключение
Здесь ! В этой статье рассказывается, как создайте интерактивное изображение с помощью Hotspots в WordPress благодаря Elementor и Essential Addons. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите об этом в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
