Вы хотите добавить интерактивные изображения на 360 градусов на свой сайт WordPress? Интерактивные 360-градусные изображения могут использоваться для создания виртуальных туров или позволять пользователям взаимодействовать с изображениями продуктов под разными углами. В этой статье мы покажем вам, как легко добавлять интерактивные изображения на 360 градусов в WordPress.
- Зачем использовать интерактивные изображения на 360 градусов в WordPress?
- Algori 360 Image
- Альтернативные интерактивные плагины для изображений с обзором в 360 градусов, которые стоит попробовать
- Вы владеете магазином/поставляете товары
- Вы планируете мероприятие
- У вас есть обучающий портал
- Draw Attention
- Ключевые особенности
- Простые в использовании инструменты рисования
- Горячие точки, ссылки и выделения
- Предустановленные и пользовательские цветовые схемы и палитры
- Как начать работу с WP Draw Attention
- WooMapper
- IMapper
- Adverty
- Image Map Pro
- Image Map HotSpot
- Заключение
- Zoom в WordPress с плагином WP Image Zoom
- Что такое интерактивное изображение?
- Как создать интерактивные изображения в WordPress
- Импорт и экспорт интерактивных изображений
- Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
- Нажмите, чтобы Чат WhatsApp
- Был ли этот полезный
- Как создать интерактивное изображение на WordPress
- Настройки плагина ImageLinks Lite
- Как использовать модуль Essential Addons для создания образов с Hotspots
- Добавьте изображения с горячими точками в Гутенберг
- Обзор карт изображений и WP Draw Attention
- Как создать карту изображений в WordPress с помощью WP Draw Attention
- Установите WP Draw Attention
- Создайте свою первую карту изображений
- Загрузите базовое изображение и добавьте активную область
- Шаг 4. Добавьте дополнительные области горячих точек и превью
- Выберите стиль вашего интерактивного изображения
- Добавьте интерактивную карту изображений на свой сайт
- Обновитесь до WP Draw Attention Pro, чтобы получить больше возможностей
Зачем использовать интерактивные изображения на 360 градусов в WordPress?
Есть много причин использовать изображения с обзором в 360 градусов на вашем сайте WordPress. Вы можете использовать фотографию в формате 360 градусов, чтобы показывать товары со всех сторон в своем интернет-магазине. Или, возможно, у вас есть веб-сайт о недвижимости, и вы хотите предлагать виртуальные туры с использованием таких изображений.
Проблема в том, что по умолчанию WordPress не показывает изображения в формате 360 градусов. Однако вы все равно можете добавлять их с помощью плагинов. Так давайте посмотрим, как легко добавить на ваш сайт интерактивные изображения на 360 градусов.
Algori 360 Image
Самый простой способ добавить в WordPress изображения, вращающиеся на 360 градусов, – это использовать плагин Algori 360 Image. Это бесплатный плагин, поддерживающий VR (виртуальная реальность). Algori 360 добавляет новый блок в редактор блоков. Вы просто загружаете свое 3D изображение в этот блок.
Примечание. Вы не можете использовать этот плагин с классическим редактором. Кроме того, на страницу можно добавить только одно изображение с углом обзора 360 градусов.
Во-первых, вам необходимо установить и активировать плагин Algori 360. После активации просто отредактируйте любой существующий пост или страницу или создайте новую. На экране редактирования публикации нажмите кнопку (+) добавить новый блок, а затем добавьте блок изображения 360°.
Теперь пришло время загрузить ваше 360-градусное изображение в настройки блока. Просто перетащите свое изображение в блок или нажмите кнопку «Загрузить», чтобы найти его на своем компьютере. Вы также можете выбрать изображение, которое уже есть в вашей медиатеке.
Загрузка и обработка изображения может занять несколько минут. В процессе загрузки вы увидите вращающийся круг загрузки. Просто подождите, пока изображение появится в редакторе блоков WordPress.
После этого вы можете опубликовать свой пост, чтобы увидеть изображение в формате 360° прямо на вашем сайте. Если вы не готовы опубликовать сообщение, вы можете просмотреть его.
Если у вас есть гарнитура VR, вы даже можете нажать кнопку VR, чтобы просмотреть изображение в виртуальной реальности.
Альтернативные интерактивные плагины для изображений с обзором в 360 градусов, которые стоит попробовать
Если вам нужно больше функций или что-то немного отличное от Algori 360 Image, вы также можете попробовать один из этих других плагинов WordPress:
Мы надеемся, что эта статья помогла вам узнать, как добавлять интерактивные изображения 360 градусов в WordPress.
Если вам нужен современный сайт, обращайтесь ко мне.
Область интерактивных изображений – отличный способ поднять ваш сайт на новый уровень. Их можно использовать по-разному, о многих вариантах применения из которых вы, возможно, даже и не думали. Давайте посмотрим на некоторые тематические исследования.
Вы владеете магазином/поставляете товары
На сайтах недвижимости часто представлены планы интерьеров. С помощью интерактивных изображений вы можете позволить пользователю наводить курсор на отдельные комнаты для доступа к дополнительной информации, такой как площадь и использование.
Вы планируете мероприятие
Направляйте своих гостей с помощью интерактивных карт, чтобы помочь им добраться до места назначения.
У вас есть обучающий портал
Почему бы не показать изображения, открывающие слово на иностранном языке, когда вы наводите на них курсор?
Плагины интерактивных изображений и карт улучшают пользовательский интерфейс для ваших посетителей. В этой статье я рассмотрю лучшие плагины для WordPress.
Draw Attention
Draw Attention – плагин №1 WordPress для создания интерактивных изображений и карт с более чем 10 000 активных установок и средним обзором 5 звезд.
Плагин идеально подходит для всех случаев использования, в том числе:
Плагин позволяет выделять области на ваших изображениях, превращая их в интерактивные, предоставляя больше информации вашим читателям. Версия PRO также поставляется с цветовыми схемами и дополнительными параметрами макета, которые вы можете использовать, чтобы оживить ваши изображения.
Draw Attention невероятно прост в использовании, отзывчив и доступен. В дополнение к этому, он поставляется со сверхбыстрой и дружелюбной службой поддержки.
Плагин поставляется с 3 вариантами ценообразования:
Имея в своем арсенале плагин Simply Schedule Appointments, команда разработчиков плагина Draw Attention создала отличное дополнение к любому веб-сайту.
Ключевые особенности
Как плагин WordPress номер один для создания интерактивных изображений и карт изображений, WP Draw Attention включает в себя набор уникальных функций и возможностей, которые вы не обязательно получите с другими плагинами. Давайте взглянем на некоторые из самых важных функций.
Простые в использовании инструменты рисования
WP Draw Attention прост в использовании даже для начинающих мастеров WordPress. Он позволяет рисовать сложные красочные формы и добавлять широкий спектр элементов контента, в том числе:
Функция перетаскивания позволяет легко размещать, перемещать и настраивать точки на интерактивных изображениях и картах. Как только вы их создадите, они автоматически станут адаптивными и оптимизированными для SEO.
Горячие точки, ссылки и выделения
Вы также можете использовать интерактивный редактор изображений для добавления горячих точек, выделения и ссылок. Например, с помощью функций лайтбокса и всплывающих подсказок ваши посетители могут кликнуть, чтобы отобразить дополнительную информацию, когда они наводят курсор на определенную область карты. Вы также можете настроить его так, чтобы определенные точки на карте были выделены другим цветом, когда посетитель наводит курсор на область с помощью мыши.
Пользователи WP Draw Attention имеют возможность добавлять ссылки на выделенные фигуры. Вы можете ссылаться на другие страницы, сообщения и продукты на своем сайте, а также добавлять внешние ссылки, указывающие на другие веб-сайты, которые могут открываться в том же или новом окне.
Предустановленные и пользовательские цветовые схемы и палитры
Этот плагин интерактивных изображений поставляется с более чем 20 предопределенными цветовыми схемами, что упрощает создание цветовой палитры, которая соответствует вашей текущей теме WordPress или бренду. У вас также есть возможность создать свою собственную цветовую схему или палитру. W P 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 – один из самых продвинутых плагинов в нашем списке. Этот плагин может помочь вам создавать интерактивные изображения благодаря простому в использовании интерфейсу и полезным инструментам.
Плагин поставляется в двух вариантах цены:
Image Map Pro поставляется с собственным редактором, который вы можете попробовать перед покупкой. Интерфейс интуитивно понятен и позволяет создавать собственные формы, чтобы ваши изображения выделялись. Плагин содержит более 600 высококачественных значков FontAwesome SVG, а также позволяет загружать собственные значки для создания изображений, которые легко интегрируются с дизайном вашего веб-сайта.
Отличная особенность этого плагина – возможность создавать несколько этажей. Это может быть очень полезно при изображении таких вещей, как свойства и планы этажей. Благодаря бесконечным комбинациям стилей и анимации этот плагин является очень хорошим адаптивным решением для ваших изображений.
Image Map HotSpot
Ещё один плагин в нашем списке – Image Map HotSpot по цене 22 доллара. Он помогает отображать всплывающие подсказки или аннотации к изображениям на вашем веб-сайте WordPress. Вы можете выбрать отображение содержимого, щелкнув значок или наведя указатель мыши.
Плагин имеет простой в использовании рабочий предварительный просмотр в реальном времени прямо в серверной части, который помогает вам создать желаемый вид, прежде чем запускать его вживую. Image Map HotSpot поддерживает Lightbox, что означает, что ваши изображения, карты и видео с YouTube или Vimeo можно открывать сразу после активации значка.
Заключение
Если вы хотите улучшить свои изображения, чтобы отобразить дополнительную информацию о ваших продуктах, планах этажей, зданиях, картах и почти любом графическом приложении, которое вы только можете придумать, интерактивные изображения определенно вам следует рассмотреть.
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. Опции разбиты на четыре шага:
После внесения соответствующих настроек, можно проверить, как zoom в WordPress выглядит на сайте. Все изменения должны там отобразиться. При необходимости можно снова подправить нужные опции. Если же возможностей требуется больше, то придётся приобрести этот плагин.
Хотите создать интерактивное изображение для своего WordPress блог ?
Интерактивное изображение позволяет выделять, связывать и анимировать определенные области изображения.
В этом уроке мы покажем вам, как создавать интерактивные изображения на WordPress.
Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог в 7 шага et Как найти, установить и активировать WordPress тему на своем блоге
Тогда вернемся к тому, почему мы здесь.
Что такое интерактивное изображение?
Интерактивное изображение включает области точек доступа, выделения, ссылки, цвета и т. Д.
Сделайте свой блог более плавным и эффективным, попробовав эти 6 WordPress плагины сжатия изображений для вашего блога
Это отличается от простого изображения, которое вы загружаете в WordPress. Интерактивные изображения привлекают внимание и привлекают внимание пользователей. Вы можете добавлять описание к различным частям изображения, добавлять ссылки на страницы, выделять разделы и т. Д.
На этом изображении вы можете увидеть описание фруктов рядом с указателем мыши над различными полосами. Вы можете использовать эти интерактивные изображения для увеличения взаимодействия с пользователем и увеличения времени на сайте.
Откройте для себя Как использовать FOMO в WordPress для улучшения конверсий
Давайте посмотрим, как можно привлечь внимание посетителей с помощью интерактивных изображений.
Как создать интерактивные изображения в WordPress
Первое, что нужно сделать, это установить и активировать плагин. Обратить внимание. Для получения дополнительной информации см. Наше пошаговое руководство по способ установить плагин WordPress.
После активации вы увидите новый пользовательский тип сообщения на панели инструментов WordPress. Вы должны пойти в Привлечь внимание »Добавить новый создать интерактивное изображение.
Начните с добавления заголовка для этого нового интерактивного изображения, чтобы его было легко запомнить. На этой странице вы можете создать интерактивный дизайн на новых или уже загруженных изображениях. Вы можете добавить новое изображение, щелкнув значок загрузки изображения, или выбрать изображение из медиатеки WordPress.
Идите дальше, обнаружив эти Премиальные плагины 9 для WordPress для оптимизации вашей медиатеки
Затем нужно нажать на кнопку публиковать
Просто переместите курсор мыши и нарисуйте интерактивные области на изображении. Вы можете легко выбрать области точки доступа и развернуть их, чтобы создать выбор.
После рисования области горячей точки нужно прокрутить вниз Действие и выберите действие для выделенной области на изображении. Если вы выберете Показать больше информации, вы можете просто добавить описание, поясняющее область точки доступа на картинке. Вы также можете добавить ссылку на выбранную область, используя опцию » Перейти по URL».
учиться Как сделать резервную копию и восстановить свой блог с Snapshot Pro
Вы также можете управлять общими настройками и стилем выделения для ссылки действия, текста действия, фона и т. Д. Эти настройки могут помочь вам сделать ваше изображение более интерактивным.
Затем нужно нажать на кнопку Обновление и скопировать короткий код чтобы добавить его в свой пост или страницу WordPress.
Плагин позволяет создавать столько интерактивных изображений, сколько вы хотите, используя ранее загруженные или новые изображения.
Импорт и экспорт интерактивных изображений
Если вы работаете на нескольких веб-сайтах и хотите импортировать / экспортировать интерактивные изображения, плагин Draw Caution должен быть установлен на обоих веб-сайтах.
На первом сайте вы должны посетить Обратить внимание »импорт / экспорт и отметьте изображения, которые хотите экспортировать. Затем нажмите на кнопку Сгенерируйте код экспорта и скопируйте код.
После этого вам нужно перейти на второй веб-сайт и убедиться, что вы активировали плагин Draw Caution. Тогда вы должны пойти в Обратить внимание »импорт / экспорт на панели инструментов и вставьте код в поле импорта.
Идите вперед и нажмите кнопку Импорт и ваши изображения будут импортированы.
Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.
Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
Opt-In Content Locker — это Плагин WordPress, что позволяет заблокировать важный контент в вашем блоге и показывать его только подписчикам.
Его основными характеристиками являются: инструмент мнадежно и безопасно, Vблокирование важного контента,поддержка MailChimp, AWeber, GetResponse, iContact, Campaign Monitor, Mad Mimi, Benchmark, Sendy и MyMail, поддержка xport данных в формате CSV, возможность перевода на несколько языков, fпростота установки, электронная почтаПоддержка клиентов xcellent, e
Нажмите, чтобы Чат WhatsApp
Le Плагин WordPress Click to WhatsApp Chat позволяет клиентам WordPress легко связаться с владельцем веб-сайта или службой поддержки клиентов, используя свою учетную запись WhatsApp.
Просто нажмите на учетную запись WhatsApp, и она будет направлена непосредственно на мобильную учетную запись WhatsApp с сообщением по умолчанию. И если клиент находится на настольном компьютере или ноутбуке, он будет перенаправлен в WhatsApp Web.
Этот плагин требует номер WhatsApp, а также время и день, которые владелец веб-сайта или группа поддержки будут использовать для обсуждения. Кнопку чата можно добавить на страницу сведений о продукте WooCommerce, которая напрямую связана с этим продуктом.
Был ли этот полезный
Этот плагин уникален тем, что просит посетителей ответить на вопрос, почему они не находят сообщение полезным, когда они нажимают опцию «НЕТ». Аналогичным образом, он спрашивает посетителей, что им больше всего нравится, когда они нажимают на опцию «ДА».
Кроме того, вы можете перейти на страницу / список статей, где вы увидите раздел «Да / Нет», который позволяет вам быстро просмотреть статистику и, наконец, получить полный обзор качества ваших статей и ваших страниц.
Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.
Вот ! Вот и все, что касается этого урока, я надеюсь, он позволяет вам создавать интерактивные изображения. Не стесняйся поделиться с друзьями в ваших любимых социальных сетях.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на 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». Начну с разделов первой вкладки:
Во вкладке «Hotspots» собраны опции для каждой из точек. Сбоку с левой стороны располагается список созданных точек с кнопками для операций над ними – добавить, удалить, скопировать и переместить.
Выделив ту ил иную точку, можно её настроить.
Есть такие разделы опций:
Хотите узнать, как создать интерактивное изображение с Hotspots в WordPress благодаря Факир и необходимые дополнения?
Изображение – отличный инструмент для передачи информации. Всем известно, что информацию, передаваемую через изображение — и визуальную форму в целом — легче понять и запомнить.
В контексте Интернета вы можете использовать множество форматов изображений. Из инфографики, фотографии, комикса, иллюстрации и т. д.
Если вы хотите создать веб-контент, такой как анатомия чего-либо, городские достопримечательности, карты или маршруты, создание изображений с помощью Hotspots может быть отличной идеей.
Идея этого типа контента состоит в том, чтобы предоставить интерактивное изображение, которое поможет вашим читателям понять информацию, которую вы передаете. Вы можете добавить горячие точки на изображение, которое содержит всплывающую подсказку для каждой активной области. Вот пример.
Если у вас есть сайт на основе WordPress создать изображение с горячими точками не так уж сложно. Вы можете создать его с помощью модуля Основные дополнения .
Что такое модуль Essential Addons?
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
Прежде чем создавать изображения с активными точками, вы можете сначала установить макет. Для этого откройте панель настроек страницы, щелкнув значок шестеренки в левом нижнем углу левой панели.
Установите макет в раскрывающемся меню раскладка
Добавьте новый раздел, щелкнув значок плюса в поле редактирования, и добавьте виджет EA Image Hotspots с левой панели.
Добавьте свое изображение, нажав на средство выбора изображений на левой панели.
открытый вариант Hotspots на левой панели, чтобы добавить точки доступа. По умолчанию виджет EA Image Hotspots содержит активную область. Вы можете нажать на точку доступа по умолчанию, чтобы изменить ее содержимое.
По умолчанию тип точки доступа установлен на значок. Вы можете изменить его на Текст или уйти Смотри если вы хотите.
Нажмите на вкладку ПОЛОЖЕНИЕ установить положение точки доступа. Установите положения X и Y, перетаскивая ползунки.
Нажмите на вкладку ИНСТРУМЕНТ чтобы добавить содержимое всплывающей подсказки. Активируйте всплывающую подсказку и добавьте свой контент в редакторе. Вы также можете установить положение всплывающей подсказки: сверху, снизу, слева или справа.
Чтобы добавить больше точек доступа, просто нажмите кнопку ДОБАВИТЬ ЭЛЕМЕНТ в разделе Hotspots и повторите описанные выше шаги, чтобы установить положение активной области, содержание всплывающей подсказки и положение всплывающей подсказки.
Откройте раздел Настройки всплывающей подсказки установить размер всплывающих подсказок и эффект анимации.
Теперь перейдите на вкладку Стиль чтобы стилизовать горячие точки, а также всплывающие подсказки. Сначала откройте опцию Фото товара для установки размера изображения.
Узнайте также: Как добавить связанные элементы в Elementor
Откройте раздел подсказке для настройки всплывающих подсказок. Вы можете установить цвет фона, цвет текста, типографику (размер шрифта, семейство шрифтов, стиль шрифта) и ширину.
До сих пор вы успешно создавали изображения с горячими точками. Вы можете поиграть с левой панелью, чтобы настроить изображения с помощью горячих точек, пока не будете довольны результатом. Как только вы закончите, вы можете нажать кнопку ОПУБЛИКОВАТЬ опубликовать свою страницу.
Добавьте изображения с горячими точками в Гутенберг
Если вы хотите добавить изображения с горячими точками в качестве вспомогательного материала для статьи, над которой вы работаете, вы можете интегрировать ее с Gutenberg (редактор WordPress по умолчанию) с помощью плагина Блоки Elementor для Гутенберга. Этот плагин позволяет использовать шаблон Elementor в качестве блока Гутенберга.
Чтобы сохранить изображения с горячими точками выше в качестве шаблона раздела Elementor, щелкните правой кнопкой мыши дескриптор раздела и выберите Сохранить как шаблон.
Дайте вашей модели имя и нажмите кнопку ЗАПИСЫВАТЬ.
Откройте статью, в которую вы хотите добавить изображения с горячими точками. Добавьте новый блок, выберите Библиотека элементов и выберите только что созданный шаблон изображения с активными точками.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Трудно передать множество важных мелких деталей продукта, не оттолкнув ваших клиентов стеной подробного текста. Если вы хотите точно определить объект, комнату или область, а также предоставить подробную информацию, не прерывая путешествие клиента, отправляя его в разные части вашего сайта, тогда вам подойдет карта изображений.
Карта изображений — лучший способ продемонстрировать ваши красивые фотографии и эффективно добавить множество деталей, не портя эффект. Вы получаете максимум информации, сжатой в наименьшем объеме интернет-пространства, но сделанной красиво.
Функция увеличения изображений в магазинах электронной коммерции решает проблему элегантным способом, но установка магазина 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 очень просто. Позаботьтесь о стиле в каждом рисунке.
Установите WP Draw Attention
Получите бесплатный плагин Draw Attention из библиотеки плагинов WordPress или с панели управления WordPress.
Создайте свою первую карту изображений
После установки нажмите пункт меню «Draw Attention», чтобы начать.
Поскольку бесплатная версия позволяет создавать только одну карту изображений, вы увидите параметр Edit image, который мы рассмотрим подробнее ниже.
На этой странице введите заголовок (имя) для вашего нового интерактивного изображения. Оно будет отображаться на вашем сайте, поэтому выберите описательное, оптимизированное для SEO имя.
Загрузите базовое изображение и добавьте активную область
Нажмите на раздел Drop image here в правой части экрана, чтобы выбрать или загрузить базовое изображение.
В приведенном ниже случае мы загрузили план квартиры в качестве примера того, как застройщик, архитектор или даже дизайнер интерьеров могут продемонстрировать проекты для конкретного объекта.
В разделе Hotspot теперь вы увидите изображение, которое вы только что загрузили, с инструкцией Draw the clickable areas of our image.
Затем выделите каждый раздел, который вы хотите связать с дополнительной информацией. Для этого щелкните каждую точку области, которую вы хотите выделить на интерактивной карте изображения, как мы сделали ниже.
Вы можете инстинктивно использовать мышь для перетаскивания курсора, чтобы обвести изображение, но вам нужно создать контур из точек, а не рисунок. Поместите курсор в первую точку области, которую хотите выделить. Нажмите и перейдите к следующему месту. Повторяйте, пока не создадите контур области.
После того, как вы отметили три точки, вы можете взять контур за угол, добавить больше точек к контуру, переместить блок и другими способами поиграть со своей диаграммой инстинктивно.
Перейдите к полю Title под рисунком. Введите название выделенной области (в приведенном выше примере это спальня в квартире).
Далее добавьте более подробное описание помещения или объекта. Затем добавьте ссылку на фотографию в свою медиатеку (или внешний URL-адрес), которую вы хотите отображать, когда кто-то кликает вашу карту изображений.
Сохраните карту изображений (перейдите в раздел WordPress Publishing в правом верхнем углу), прежде чем переходить к следующему шагу.
Вот и все: вы добавили первую кликабельную область к базовому изображению.
Шаг 4. Добавьте дополнительные области горячих точек и превью
Оставайтесь в разделе Hotspot area. Теперь нажмите на следующую выпадающую область под названием Clickable Area #2.
Повторите шаги, сделав серию щелчков по всему контуру области, которую вы хотите выделить. Назовите изображение карты (в данном случае «ванная»), свяжите область с фотографией по вашему выбору и сохраните.
Продолжайте, пока не охватите все области, не назовете и не свяжете все свои горячие точки. Сохраните и опубликуйте свое изображение.
Теперь вы можете предварительно просмотреть карту изображений, чтобы увидеть, как она может выглядеть на вашем сайте.
Выберите стиль вашего интерактивного изображения
Нажмите Edit interactive Image, чтобы перейти по автоматической ссылке, которая появляется вверху страницы под названием вашего изображения. Откроется новая страница с вашим интерактивным изображением. Изображение изначально имеет стиль WP Draw Attention по умолчанию.
Откройте/разверните функцию More Info Box Styling на своей странице. Выберите цвет фона изображения, цвет заголовка, который будет отображаться над связанным изображением, и цвет текстового описания.
Поле More Info Background Color относится к цвету блока, содержащего дополнительную информацию. Вы также можете отредактировать стиль выделения (highlight). Это цвет выделенной области, как она выглядит на вашем основном изображении. Премиум-версия поставляется с большим набором предустановленных тем для быстрой установки.
Обновите изменения. Затем мы добавим вашу новую карту изображений на новую страницу.
Добавьте интерактивную карту изображений на свой сайт
Шорткод появляется в правой части экрана редактирования, под полем Add Image. Он просто читается как Copy Shortcode, так как бесплатный плагин предлагает только одну интерактивную диаграмму. Это изменится, если вы используете плагин премиум-класса и имеете более одного интерактивного изображения.
Скопируйте шорткод, создайте новую страницу на своем сайте и вставьте ее в блок шорткода.
Вот и все, карта изображений теперь видна на вашем сайте, и посетители могут взаимодействовать с ней по своему желанию, как вы можете видеть в иллюстрации ниже.
Обновитесь до WP Draw Attention Pro, чтобы получить больше возможностей
Помимо неограниченного количества карт изображений в WP Draw Attention Pro, эти три специальные функции могут помочь опытным цифровым маркетологам:
Взгляните на дополнительные параметры стиля ниже и обратите внимание, что у вас есть опция All images в меню панели инструментов слева. Вы разблокировали возможность создавать неограниченное количество карт изображений в WordPress.
Общие параметры стиля расширяются и становятся проще благодаря выбору из нескольких предустановленных тем. Вы также можете исправить выравнивание каждой карты изображения на вашей странице.
Если у вас есть несколько разных планов этажей или юнитов, которые вы хотели бы выделить, WP Draw Attention Pro — отличная инвестиция не только потому, что вы получаете неограниченное количество карт изображений, но и потому, что они будут выглядеть даже лучше, чем базовая версия.