КАК СОЗДАТЬ ИНТЕРАКТИВНЫЕ ИЗОБРАЖЕНИЯ В WORD PRESS

Область интерактивных изображений – отличный способ поднять ваш сайт на новый уровень. Их можно использовать по-разному, о многих вариантах применения из которых вы, возможно, даже и не думали.

На сайтах недвижимости часто представлены планы интерьеров. С помощью интерактивных изображений вы можете позволить пользователю наводить курсор на отдельные комнаты для доступа к дополнительной информации, такой как площадь и использование.

Направляйте своих гостей с помощью интерактивных карт, чтобы помочь им добраться до места назначения.

Draw Attention

Draw Attention-  плагин №1 WordPress для создания интерактивных изображений и карт с более чем 10 000 активных установок и средним обзором 5 звезд.

Плагин идеально подходит для всех случаев использования, в том числе:

• Основные характеристики продукта для филиальных продавцов;
  
• Планы этажей, чтобы похвастаться недвижимостью;
  
• Карты для демонстрации свойств или мест.
  

Плагин позволяет выделять области на ваших изображениях, превращая их в интерактивные, предоставляя больше информации вашим читателям.
Версия PRO также поставляется с цветовыми схемами и дополнительными параметрами макета, которые вы можете использовать, чтобы оживить ваши изображения.

Draw Attention невероятно прост в использовании, отзывчив и доступен.
В дополнение к этому, он поставляется со сверхбыстрой и дружелюбной службой поддержки.

Плагин поставляется с 3 вариантами ценообразования:

• Бесплатный план на WordPress.org
  
• Единый план (74 доллара США), который позволяет использовать плагин на одном веб-сайте
  
• Безлимитный план (самый популярный) (124 доллара США), который позволяет использовать плагин на неограниченном количестве веб-сайтов.
  

Имея в своем арсенале плагин Simply Schedule Appointments, команда разработчиков плагина Draw Attention создала отличное дополнение к любому веб-сайту.

Ключевые особенности

Как плагин WordPress номер один для создания интерактивных изображений и карт изображений, WP Draw Attention включает в себя набор уникальных функций и возможностей, которые вы не обязательно получите с другими плагинами.
Давайте взглянем на некоторые из самых важных функций.

Функция перетаскивания позволяет легко размещать, перемещать и настраивать точки на интерактивных изображениях и картах.
Как только вы их создадите, они автоматически станут адаптивными и оптимизированными для SEO.

Горячие точки, ссылки и выделения

Вы также можете использовать интерактивный редактор изображений для добавления горячих точек, выделения и ссылок.
Например, с помощью функций лайтбокса и всплывающих подсказок ваши посетители могут кликнуть, чтобы отобразить дополнительную информацию, когда они наводят курсор на определенную область карты.
Вы также можете настроить его так, чтобы определенные точки на карте были выделены другим цветом, когда посетитель наводит курсор на область с помощью мыши.

Пользователи WP Draw Attention имеют возможность добавлять ссылки на выделенные фигуры.
Вы можете ссылаться на другие страницы, сообщения и продукты на своем сайте, а также добавлять внешние ссылки, указывающие на другие веб-сайты, которые могут открываться в том же или новом окне.

Предустановленные и пользовательские цветовые схемы и палитры

Этот плагин интерактивных изображений поставляется с более чем 20 предопределенными цветовыми схемами, что упрощает создание цветовой палитры, которая соответствует вашей текущей теме WordPress или бренду. У вас также есть возможность создать свою собственную цветовую схему или палитру.

WP Draw Attention также предоставляет множество функций для управления настройкой и стилизацией ваших интерактивных изображений и карт изображений.

Вы можете настроить цвет текста, заголовка и фона изображения, определить прозрачность, а также настроить стиль и параметры макета.

Как начать работу с WP Draw Attention

После того, как вы загрузите и активируете плагин WP Draw Attention на своем веб-сайте, он добавит пункт меню Draw Attention на вашу панель инструментов.

После выбора «Редактировать изображение» вы можете использовать редактор изображений, чтобы загрузить изображения и настроить параметры стиля и функциональности.

Когда вы будете готовы добавить интерактивное изображение на страницу или в публикацию, вы можете сделать это быстро, скопировав шорткод.

Чтобы воспользоваться преимуществами длинного списка функций и возможностей, предлагаемых плагином WP Draw, мы рекомендуем перейти на премиум-версию. Он включает в себя больше вариантов макета и предварительных цветовых схем и шаблонов, а также возможность создавать неограниченное количество изображений и использовать их на неограниченном количестве веб-сайтов.

Для начала вы можете поэкспериментировать с некоторыми демонстрациями интерактивных изображений
на веб-сайте плагина.

Плагин премиум-класса также включает год поддержки и обновления. Однако, если вам нужна помощь в установке или использовании, вы также можете обратиться к документации WP Draw Attention.

WooMapper

При цене 33,80 долларов в год, включая 12 месяцев поддержки, WooMapper ориентирован в основном на приложения WooCommerce. Плагин позволяет добавлять пользовательские пины к изображениям, которые ссылаются на продукты WooCommerce.

Этот плагин – отличный способ показать ваш продукт WooCommerce, цену, изображение и описание вашим потенциальным клиентам относительно новым и инновационным способом.

WooMapper прост в использовании и позволяет настраивать изображения, чтобы они легко интегрировались в дизайн вашего интернет-магазина.

IMapper

iMapper работает аналогично WooMapper, позволяя размещать пины на любом изображении на вашем веб-сайте WordPress.
Он поставляется с семью различными предустановленными стилями вывода, включая область, выделение и тень, а также позволяет загружать свой собственный пин.

Когда вы наводите курсор на контакты, iMapper может показывать ваш контент несколькими различными способами и позволяет вам определить позицию, в которой ваш контент будет отображаться.
Плагин дополнительно позволяет вам организовывать ваши пины по категориям, а также включать вкладки в контент пинов.

iMapper прост в реализации и включает в себя более 600 шрифтов Google.
Он полностью адаптивен и стоит 32 доллара, это отличное дополнение к любому интернет-магазину или картографической системе.

Adverty

Adverty – это плагин WordPress, который в основном ориентирован на рекламу. Он стоит 36 долларов и позволяет размещать рекламные блоки прямо на ваших изображениях. Это может быть отличным инструментом для интернет-магазинов для демонстрации своих товаров в использовании. Все, что вам нужно сделать, это пометить любую часть вашего изображения и ввести свой контент, партнеров или рекламу.

Кроме того, этот плагин также можно использовать для создания баннеров вверху или внизу ваших изображений для показа вашей рекламы.

Image Map Pro

Image Map Pro – один из самых продвинутых плагинов в нашем списке. Этот плагин может помочь вам создавать интерактивные изображения благодаря простому в использовании интерфейсу и полезным инструментам.

Плагин поставляется в двух вариантах цены:

• Обычная (39 долларов США в год) – эта лицензия позволяет использовать плагин в одном конечном продукте и включает бесплатные обновления и поддержку клиентов.
  
• Расширенная (169 долларов в год) – эта лицензия позволяет вам включать Image Map Pro в проект, который требует оплаты от пользователей.
  

Image Map Pro поставляется с собственным редактором, который вы можете попробовать перед покупкой.
Интерфейс интуитивно понятен и позволяет создавать собственные формы, чтобы ваши изображения выделялись.
Плагин содержит более 600 высококачественных значков FontAwesome SVG, а также позволяет загружать собственные значки для создания изображений, которые легко интегрируются с дизайном вашего веб-сайта.

Отличная особенность этого плагина – возможность создавать несколько этажей.
Это может быть очень полезно при изображении таких вещей, как свойства и планы этажей.
Благодаря бесконечным комбинациям стилей и анимации этот плагин является очень хорошим адаптивным решением для ваших изображений.

Image Map HotSpot

Ещё один плагин в нашем списке – Image Map HotSpot по цене 22 доллара.
Он помогает отображать всплывающие подсказки или аннотации к изображениям на вашем веб-сайте WordPress.
Вы можете выбрать отображение содержимого, щелкнув значок или наведя указатель мыши.

Плагин имеет простой в использовании рабочий предварительный просмотр в реальном времени прямо в серверной части, который помогает вам создать желаемый вид, прежде чем запускать его вживую.
Image Map HotSpot поддерживает Lightbox, что означает, что ваши изображения, карты и видео с YouTube или Vimeo можно открывать сразу после активации значка.

Заключение

Если вы хотите улучшить свои изображения, чтобы отобразить дополнительную информацию о ваших продуктах, планах этажей, зданиях, картах и ​​почти любом графическом приложении, которое вы только можете придумать, интерактивные изображения определенно вам следует рассмотреть.

В этом посте мы рассмотрели 6 лучших плагинов WordPress:

1. Draw Attention (бесплатно / 74 доллара / 124 доллара) – отличный плагин для создания обзоров продуктов, интерактивных планов и карт для филиальных продавцов.
2. WooMapper (33,80 $) – лучший плагин для веб-сайтов на основе WooCommerce.
3. iMapper (32 доллара США) – плагин WordPress, который предлагает множество вариантов для ваших значков и контента.
4. Image Map Pro (39 долл. С ША / 169 долл. С ША) – один из наиболее сложных плагинов для создания интерактивных изображений, которые легко интегрируются с дизайном вашего веб-сайта.
5. Image Map HotSpot (22 доллара США) – самое дешевое решение с интуитивно понятным предварительным просмотром в реальном времени в серверной части.
   

Изображение – отличный инструмент для передачи информации. Всем известно, что информацию, передаваемую через изображение — и визуальную форму в целом — легче понять и запомнить.

В контексте Интернета вы можете использовать множество форматов изображений. Из инфографики, фотографии, комикса, иллюстрации и т. д.

Если вы хотите создать веб-контент, такой как анатомия чего-либо, городские достопримечательности, карты или маршруты, создание изображений с помощью Hotspots может быть отличной идеей.

Идея этого типа контента состоит в том, чтобы предоставить интерактивное изображение, которое поможет вашим читателям понять информацию, которую вы передаете. Вы можете добавить горячие точки на изображение, которое содержит всплывающую подсказку для каждой активной области.

Essential Addons — это дополнение к Факир. Это один из самых популярных модов с более чем 2 миллионами загрузок. Этот аддон добавляет еще около 60 виджетов в ваш Elementor.

Одним из виджетов, предлагаемых Essential Addons, является Горячие точки изображений EA который можно использовать для создания интерактивного изображения. Essential Addons сам по себе является бесплатным дополнением, но вы должны использовать профессиональную версию для создания изображений с Hotspots, потому что виджет EA Image Hotspots доступен только в этой версии.

Как использовать модуль Essential Addons для создания образов с Hotspots

Во-первых, вам нужно установить модули Elementor и Essential Addons на ваш WordPress. Вы можете получить профессиональную версию Essential Addons на его сайт официальный. В то время как для Elementor вы можете использовать бесплатную версию.

Бесплатная версия Elementor доступна в каталоге Плагин WordPress поэтому вы можете установить его, набрав «elementor» в поле поиска установщика плагинов ( Плагины –> Добавить).

После установки Elementor и Essential Addons создайте новую страницу ( Страницы –> Добавить) или новую статью ( Предметы – > Добавить) и отредактируйте его с помощью Elementor. Вы будете перенаправлены в редактор Elementor после нажатия кнопки Редактировать с помощью Elementor.

Прежде чем создавать изображения с активными точками, вы можете сначала установить макет. Для этого откройте панель настроек страницы, щелкнув значок шестеренки в левом нижнем углу левой панели.

Установите макет в раскрывающемся меню  раскладка

Добавьте новый раздел, щелкнув значок плюса в поле редактирования, и добавьте виджет EA Image Hotspots с левой панели.

Добавьте свое изображение, нажав на средство выбора изображений на левой панели.

Нажмите на вкладку ПОЛОЖЕНИЕ установить положение точки доступа. Установите положения X и Y, перетаскивая ползунки.

Нажмите на вкладку ИНСТРУМЕНТ чтобы добавить содержимое всплывающей подсказки. Активируйте всплывающую подсказку и добавьте свой контент в редакторе. Вы также можете установить положение всплывающей подсказки: сверху, снизу, слева или справа.

Чтобы добавить больше точек доступа, просто нажмите кнопку ДОБАВИТЬ ЭЛЕМЕНТ в разделе Hotspots и повторите описанные выше шаги, чтобы установить положение активной области, содержание всплывающей подсказки и положение всплывающей подсказки.

Откройте раздел Настройки всплывающей подсказки установить размер всплывающих подсказок и эффект анимации.

Теперь перейдите на вкладку Стиль чтобы стилизовать горячие точки, а также всплывающие подсказки. Сначала откройте опцию  Фото товара для установки размера изображения.

Узнайте также: Как добавить связанные элементы в Elementor

Откройте раздел подсказке для настройки всплывающих подсказок. Вы можете установить цвет фона, цвет текста, типографику (размер шрифта, семейство шрифтов, стиль шрифта) и ширину.

До сих пор вы успешно создавали изображения с горячими точками. Вы можете поиграть с левой панелью, чтобы настроить изображения с помощью горячих точек, пока не будете довольны результатом. Как только вы закончите, вы можете нажать кнопку ОПУБЛИКОВАТЬ опубликовать свою страницу.

Добавьте изображения с горячими точками в Гутенберг

Если вы хотите добавить изображения с горячими точками в качестве вспомогательного материала для статьи, над которой вы работаете, вы можете интегрировать ее с Gutenberg (редактор WordPress по умолчанию) с помощью плагина Блоки Elementor для Гутенберга. Этот плагин позволяет использовать шаблон Elementor в качестве блока Гутенберга.

Чтобы сохранить изображения с горячими точками выше в качестве шаблона раздела Elementor, щелкните правой кнопкой мыши дескриптор раздела и выберите  Сохранить как шаблон.

Дайте вашей модели имя и нажмите кнопку  ЗАПИСЫВАТЬ.

Откройте статью, в которую вы хотите добавить изображения с горячими точками. Добавьте новый блок, выберите  Библиотека элементов и выберите только что созданный шаблон изображения с активными точками.

Заключение

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

В этой статье я расскажу вам про интереснейший и необычный плагин, который позволяет сделать интерактивное изображение. Добавлю ещё, что этот плагин совершенно бесплатный и стабильный.

Интерактивное изображение – это картинка, на которой есть несколько активных областей, клик по которым (или наведение мышки), вызывает какое-либо событие, например, переход на ссылку или вывод сообщения подсказки.

Как создать интерактивное изображение на WordPress

Для начала расскажу только о том, как создать интерактивное изображение. А потом разберу все настройки плагина.

Перейдите в пункт консоли «ImageLinks», который появился после активации плагина, а затем в подпункт «Add new». Введите в верхнем поле какое-либо название для вашего интерактивного фото.

Прокрутите немного вниз и нажмите на кнопку «Set Image».

Перед вами откроется встроенный медиазагрузчик WordPress, в котором выберите уже загруженное или загрузите с компьютера новое изображение, которое нужно сделать интерактивным. И выбранная картинка сразу появится в предпросмотре немного выше.

Теперь давайте сделаем из этой картинки интерактивное изображение. Для этого перейдите ниже предпросмотра во вкладку «Hotspots» и нажмите на иконку с плюсом, чтобы добавить новую интерактивную точку на изображении.

Затем верните к предпросмотру. Вы увидите, что вверху слева появилась точка.

Хватайте её мышкой и двигайте в то место картинки, где должна быть первая интерактивная точка.

После этого снова перейдите к опциям под предпросмотром, чтобы задать параметры для точки. Здесь вам нужен раздел «Hotspot Settings». Откройте его и заполните поле «Link URL», в котором нужно указать ссылку, на которую будет происходить переход при клике на эту точку на интерактивном изображении. При необходимости можно включить опцию «Open Link in New Window», чтобы ссылка открывалась в новой вкладке.

Теперь обратите внимание на блок настроек «Popover Settings». Здесь можно задать подсказку, которая будет появляться при наведении мышки на интерактивную точку. Для начала включите опцию «Show Popover». А затем ниже в редакторе заполните содержимое подсказки.

Теперь верните к предпросмотру и нажмите на кнопку «Preview», чтобы увидеть, как это будет выглядеть на практике.

Вы увидите ваше уже работающее интерактивное изображение, где можно проверить созданную подсказу и ссылку.

Теперь стало понятно, как добавлять интерактивные точки на изображение. Чтобы добавить ещё точку, нажмите на кнопку с иконкой плюса.

На картинку можно добавить любое количество точек.

Когда все точки добавлены, нажмите кнопку «Опубликовать», что бы сохранить изменения, и используйте шорткод для публикации этого интерактивного изображения на сайте,  в записях и страницах.

Настройки плагина ImageLinks Lite

Теперь, когда вы знаете в общих чертах как сделать интерактивное изображение, я рассмотрю другие настройки и возможности плагина. Как вы могли заметить, все опции делятся на две вкладки «Generals» и «Hotspots».

Начну с разделов первой вкладки:

• Image Url.
  Указывается ссылка на интерактивное изображение. Можно указать картинку и из другого источника, а не с вашего сайта.
• Image Size.
  Размер картинки.
• Можно выбрать тему оформления для подсказок точек.
• Mobile Animation.
  Включает и выключает анимацию точек на мобильных устройствах.
• Popover Settings.
  Настройки внешнего вида подсказок на точках.
• Custom CSS.
  Здесь можно подключить кастомный стиль.

Во вкладке «Hotspots» собраны опции для каждой из точек. Сбоку с левой стороны располагается список созданных точек с кнопками для операций над ними – добавить, удалить, скопировать и переместить.

Выделив ту ил иную точку, можно её настроить.

Есть такие разделы опций:

• Hotspot Location.
  Показывает координаты точки и их можно задать вручную более точно.
• Hotspot Settings.
  Здесь можно установить своё изображение для точки, ссылки, придать точке свой CSS класс и HTML контент.
• Popover Settings.
  Здесь опции подсказки. Они состоят из кнопки для включения и редактора текста.

Zoom – это эффект для изображения. Он проявляется в том, что при наведении мышки на картинку, её фрагмент увеличивается. Это позволяет пользователю лучше рассмотреть детали изображения. Такой эффект особенно применим в интернет-магазинах. Благодаря ему можно увидеть все мелочи покупаемого продукта. Например, zoom встречается на знаменитом Aliexpress.

В этой статье я расскажу о плагине, который позволяет создать zoom в WordPress. Покажу, какие есть возможности у этого дополнения, и как его использовать.

Zoom в WordPress с плагином WP Image Zoom

Для начала покажу, как сделать zoom в WordPress, а потом расскажу о настройках плагина. Итак, опубликуйте в редакторе какое-либо изображение, кликните на него мышкой и нажмите на эту кнопку в панели инструментов (кнопку, которую я показываю на скриншоте ниже).

Сохраните изменения и просмотрите, как работает zoom.

Помните, чтобы изображение при увеличении через zoom выглядело красиво и качественно, файл должен быть с большим разрешением. Иначе увеличение бессмысленно.

Вот так всё легко. Теперь посмотрим, какие есть настройки. Все опции собраны в пункте консоли «WP Image Zoom». Есть две вкладки.

Во вкладке «General settings» главные настройки, среди которых интеграция zoom в плагин интернет-магазина Woocomerce и управление эффектом на мобильных устройствах. Большая часть опций здесь доступна только в премиум-версии.

Вкладка «Zoom settings» более интересна. Здесь настройки внешнего вида zoom в WordPress. Опции разбиты на четыре шага:

• Step
  Здесь выбирается форма для линзы увеличения картинки.
• Step
  Это предпросмотр. Все внесённые изменения отображаются здесь. Очень удобно.
• Step
  Более тонкие настройки эффекта: курсор, анимация, цвета, дизайн и другое. Некоторые опции доступны только в платной версии плагина.
• Step
  Здесь нужно просто сохранить все изменения.

После внесения соответствующих настроек, можно проверить, как zoom в WordPress выглядит на сайте. Все изменения должны там отобразиться. При необходимости можно снова подправить нужные опции. Если же возможностей требуется больше, то придётся приобрести этот плагин.

Что такое интерактивное изображение?

Интерактивное изображение включает области точек доступа, выделения, ссылки, цвета и т. Д.

Сделайте свой блог более плавным и эффективным, попробовав эти 6 WordPress плагины сжатия изображений для вашего блога

Это отличается от простого изображения, которое вы загружаете в WordPress. Интерактивные изображения привлекают внимание и привлекают внимание пользователей. Вы можете добавлять описание к различным частям изображения, добавлять ссылки на страницы, выделять разделы и т. Д.

На этом изображении вы можете увидеть описание фруктов рядом с указателем мыши над различными полосами. Вы можете использовать эти интерактивные изображения для увеличения взаимодействия с пользователем и увеличения времени на сайте.

Откройте для себя Как использовать FOMO в WordPress для улучшения конверсий

Давайте посмотрим, как можно привлечь внимание посетителей с помощью интерактивных изображений.

Откройте для себя также несколько премиальных плагинов WordPress

Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

Блокировщик контента Opt-In

Opt-In Content Locker — это Плагин WordPress, что позволяет заблокировать важный контент в вашем блоге и показывать его только подписчикам.

 

Click to WhatsApp Chat позволяет клиентам WordPress легко связаться с владельцем веб-сайта или службой поддержки клиентов, используя свою учетную запись WhatsApp.

Просто нажмите на учетную запись WhatsApp, и она будет направлена ​​непосредственно на мобильную учетную запись WhatsApp с сообщением по умолчанию. И если клиент находится на настольном компьютере или ноутбуке, он будет перенаправлен в WhatsApp Web.

Этот плагин требует номер WhatsApp, а также время и день, которые владелец веб-сайта или группа поддержки будут использовать для обсуждения. Кнопку чата можно добавить на страницу сведений о продукте WooCommerce, которая напрямую связана с этим продуктом.

 

Был ли этот полезный

Этот плагин уникален тем, что просит посетителей ответить на вопрос, почему они не находят сообщение полезным, когда они нажимают опцию «НЕТ». Аналогичным образом, он спрашивает посетителей, что им больше всего нравится, когда они нажимают на опцию «ДА».

Обзор карт изображений и WP Draw Attention

Карта изображений — это интерактивный графический элемент, содержащий интерактивные области.

Очевидно использование застройщиками, риелторами и владельцами гостевых домов или отелей. Они используют карты изображений для демонстрации интерактивных планов этажей с красивыми изображениями, прикрепленными к каждой области.

Однако у карт изображений в WordPress есть больше преимуществ, о чем свидетельствует инструмент WP Draw Attention. Он быстро становится секретным маркетинговым инструментом, который выбирают мастера интернет-торговли разных типов.

Интерактивное изображение (например, план этажа) позволяет вашим клиентам увеличивать масштаб до невероятных деталей. Вы можете добавить подробное объяснение, текст, цифры, изображения или даже видео для каждой области, чтобы подчеркнуть уникальные особенности вашего продукта. Вы можете подробно рассказать обо всех преимуществах вашего продукта, не перегружая посетителя стеной текста.

Адаптивные карты изображений, созданные с помощью плагина WP Draw Attention, генерируют свои собственные метаданные в соответствии с вашим вводом и, следовательно, с самого начала оптимизированы для SEO.

Мы упомянем о различиях между бесплатным и платным планами WP Draw Attention ниже, но мы должны рассказать вам о потрясающих функциях этого плагина. Вы добавляете только один интерактивный рисунок на сайт, но важным фактором является то, что вы можете добавить любое количество областей детализации на этом чертеже.

В качестве примера возьмем план этажа. Вы можете связать области на плане этажа с фотографиями каждой комнаты, но вы также можете выделить конкретные элементы, представляющие интерес, на общем плане этажа. В итоге вы можете добавить подробные фотографии произведений искусства, антиквариата, цветочных композиций, и все это будет связано с вашим одним бесплатным базовым изображением.

Так давайте начнем наше руководство.

Как создать карту изображений в WordPress с помощью WP Draw Attention

Создать интерактивное портфолио с помощью плагина WP Draw Attention очень просто. Позаботьтесь о стиле в каждом рисунке.

Шаг 1: Установите WP Draw Attention

Получите бесплатный плагин Draw Attention
из библиотеки плагинов WordPress или с панели управления WordPress.

Шаг 2: Создайте свою первую карту изображений

После установки нажмите пункт меню «Draw Attention», чтобы начать.

Поскольку бесплатная версия позволяет создавать только одну карту изображений, вы увидите параметр Edit image,
который мы рассмотрим подробнее ниже.

На этой странице введите заголовок (имя) для вашего нового интерактивного изображения. Оно будет отображаться на вашем сайте, поэтому выберите описательное, оптимизированное для SEO имя.

Шаг 3: Загрузите базовое изображение и добавьте активную область

Нажмите на раздел Drop image here в правой части экрана, чтобы выбрать или загрузить базовое изображение.

В приведенном ниже случае мы загрузили план квартиры в качестве примера того, как застройщик, архитектор или даже дизайнер интерьеров могут продемонстрировать проекты для конкретного объекта.

В разделе Hotspot теперь вы увидите изображение, которое вы только что загрузили, с инструкцией Draw the clickable areas of our image.

Затем выделите каждый раздел, который вы хотите связать с дополнительной информацией. Для этого щелкните каждую точку области, которую вы хотите выделить на интерактивной карте изображения, как мы сделали ниже.

Вы можете инстинктивно использовать мышь для перетаскивания курсора, чтобы обвести изображение, но вам нужно создать контур из точек, а не рисунок. Поместите курсор в первую точку области, которую хотите выделить. Нажмите и перейдите к следующему месту. Повторяйте, пока не создадите контур области.

После того, как вы отметили три точки, вы можете взять контур за угол, добавить больше точек к контуру, переместить блок и другими способами поиграть со своей диаграммой инстинктивно.

Перейдите к полю Title под рисунком. Введите название выделенной области (в приведенном выше примере это спальня в квартире).

Далее добавьте более подробное описание помещения или объекта. Затем добавьте ссылку на фотографию в свою медиатеку (или внешний URL-адрес), которую вы хотите отображать, когда кто-то кликает вашу карту изображений.

Сохраните карту изображений (перейдите в раздел WordPress Publishing в правом верхнем углу), прежде чем переходить к следующему шагу.

Шаг 4. Добавьте дополнительные области горячих точек и превью

Оставайтесь в разделе Hotspot area. Теперь нажмите на следующую выпадающую область под названием Clickable Area #2.

Повторите шаги, сделав серию щелчков по всему контуру области, которую вы хотите выделить. Назовите изображение карты (в данном случае «ванная»), свяжите область с фотографией по вашему выбору и сохраните.

Продолжайте, пока не охватите все области, не назовете и не свяжете все свои горячие точки. Сохраните и опубликуйте свое изображение.

Теперь вы можете предварительно просмотреть карту изображений, чтобы увидеть, как она может выглядеть на вашем сайте.

Шаг 5: Выберите стиль вашего интерактивного изображения

Нажмите Edit interactive Image, чтобы перейти по автоматической ссылке, которая появляется вверху страницы под названием вашего изображения. Откроется новая страница с вашим интерактивным изображением. Изображение изначально имеет стиль WP Draw Attention по умолчанию.

Откройте/разверните функцию More Info Box Styling на своей странице. Выберите цвет фона изображения, цвет заголовка, который будет отображаться над связанным изображением, и цвет текстового описания.

Поле More Info Background Color относится к цвету блока, содержащего дополнительную информацию. Вы также можете отредактировать стиль выделения (highlight). Это цвет выделенной области, как она выглядит на вашем основном изображении. Премиум-версия поставляется с большим набором предустановленных тем для быстрой установки.

Обновите изменения. Затем мы добавим вашу новую карту изображений на новую страницу.

Шаг 6: Добавьте интерактивную карту изображений на свой сайт

Шорткод появляется в правой части экрана редактирования, под полем Add Image. Он просто читается как Copy Shortcode, так как бесплатный плагин предлагает только одну интерактивную диаграмму. Это изменится, если вы используете плагин премиум-класса и имеете более одного интерактивного изображения.

Скопируйте шорткод, создайте новую страницу на своем сайте и вставьте ее в блок шорткода.

Вот и все, карта изображений теперь видна на вашем сайте, и посетители могут взаимодействовать с ней по своему желанию, как вы можете видеть в иллюстрации ниже.

Обновитесь до WP Draw Attention Pro, чтобы получить больше возможностей

Помимо неограниченного количества карт изображений в WP Draw Attention Pro, эти три специальные функции могут помочь опытным цифровым маркетологам:

• Вы можете изменить тип взаимодействия на «наведение» (hover) или «клик» (click).
• Вы можете «всегда показывать» (always show) горячие точки для изображения. Выделенная область останется выделенной, чтобы посетители могли сразу увидеть, какую область они исследуют.
• Кроме того, вы можете использовать разные цвета подсветки для разных частей изображения. Это делает ваши карты изображений мгновенно узнаваемыми как интерактивные изображения.

Взгляните на дополнительные параметры стиля ниже и обратите внимание, что у вас есть опция All images
в меню панели инструментов слева. Вы разблокировали возможность создавать неограниченное количество карт изображений в WordPress.