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

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

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

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

Обзор карт изображений и 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.

В WordPress перейдите в «Плагины» → «Добавить новый». Найдите «Draw Attention». Установите, а затем активируйте плагин. После активации зайдите в него из меню слева: Настройки → WP Draw Attention.

Шаг 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.

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

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

Итак, это все. Создавать карты изображений в WordPress очень просто с помощью WP Draw Attention.

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