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

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

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

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

итерактивное изображение для WordPress

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

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

Создание интерактивных картинок в WordPress

Первое, что необходимо сделать, это установить и активировать плагин Draw Attention.

После активации вы увидите новый пользовательский тип сообщения в вашей области администрирования WordPress. Чтобы создать интерактивное изображение, вам необходимо перейти на страницу Draw Attention » Add New страницу.

плагин итерактивных изображений WordPress

Начните с добавления названия для этого нового интерактивного картинки, чтобы вы могли запросто сохранить его. На данной странице можно создать интерактивный дизайн для новых или ранее загруженных картинок. Можно добавить новое изображение, нажав на значок uploaded images(загружаемое изображение), или можете выбрать изображение из media library(медиатеки) WordPress.

добавить итерактивную картинку

Далее необходимо нажать кнопку « Publish »(опубликовать).

Смотрите также:

Как исправить ошибку HTTP при загрузке картинок в WordPress

После публикации плагин может редактировать изображение и выделять определенные области, добавлять цвета, ссылки, рисовать области точек доступа и многое иное. Вы можете без проблем прокрутить страницу до области « Hotspot Areas »(горячие точки) и развернуть область просмотра для предварительного просмотра.

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

итерактивные изображения в WordPress

После обрисовки области «горячих точек» вам необходимо прокрутить вниз до раскрывающегося списка « Action »(Действие) и выбрать действие для выбранной области на изображении. Если вы выберете «Show More Info»(Показать дополнительную информацию), вы можете добавить описание, чтобы объяснить область «горячих точек» на изображении. Мжно добавить ссылку на выбранную область, используя настройка « Go to URL ».

итерактивные изображения WordPress

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

итерактивные изображения в WordPress

Далее вам необходимо нажать кнопку « Update »(Обновить) и скопировать короткий программный код и добавить его в пост или на страницу WordPress.

как вставить итерактивную картинку WordPress

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

загрузка итерактивных картинок в WordPress

Смотри также:

Canva — как создать крутые изображения к записям WordPress, если вы не дизайнер

Импорт и экспорт интерактивных картинок

Если вы работаете на нескольких веб-сайтах и планируете импортировать/экспортировать интерактивные картинки, для этого требуется один и тот же плагин Draw Attention на обоих веб-сайтах.

На первом веб-сайте необходимо посетить страницу « Draw Attention » Import / Export » и отметить картинки, которые вы хотели бы экспортировать. Далее нажмите кнопку « Generate Export Code »(Создать программный код экспорта) и скопируйте код.

загрузка итерактивного картинки

После этого перейдите на следующий сайт и убедитесь, что у вас включен плагин Draw Attention. Далее перейлите на страницу « Draw Attention » Import / Export » из администратора WordPress и вставить код в поле ввода импорта.

как загрузить итерактинвое видео

Нажмите кнопку « Import »(Импорт), картинки будут импортированы, и все интерактивные детали, которые были добавили ранее.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *