Вы хотите создать интерактивное изображение для своего блога WordPress? Интерактивное изображение позволяет выделять, связывать и анимировать определенные области вашего изображения. В этой статье мы покажем вам, как создавать интерактивные изображения в WordPress.
^
Что такое интерактивное изображение?
Интерактивное изображение имеет области горячих точек, блики, ссылки, цвета и многое другое. Это отличается от простого изображения, которое вы загружаете в WordPress. Интерактивные изображения привлекают внимание и привлекают пользователей, чтобы увидеть детали изображения. Вы можете добавить описание к различным частям изображения, добавить ссылки на страницы, выделить разделы и многое другое.
^
На этом изображении вы можете увидеть описание фруктов при наведении мыши на разные полосы. Вы можете использовать эти интерактивные изображения, чтобы повысить заинтересованность пользователей и время, проведенное на сайте.
Давайте посмотрим, как вы можете привлечь внимание посетителей с помощью интерактивных изображений.
Создание интерактивных изображений в WordPress
Первое, что вам нужно сделать, это установить и активировать плагин Draw Attention. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.
После активации вы увидите новый пользовательский тип записи в вашей административной области WordPress. Для создания интерактивного изображения вам необходимо перейти на страницу Draw Attention »Add New.
^
Начните с добавления заголовка для этого нового интерактивного изображения, чтобы вы могли легко его запомнить. На этой странице вы можете создать интерактивный дизайн для новых или ранее загруженных изображений. Вы можете добавить новое изображение, нажав на значок загрузки изображения, или вы можете выбрать изображение из медиатеки WordPress.
^
Далее нужно нажать кнопку «Опубликовать».
После публикации плагин позволяет редактировать изображения и выделять определенные области, добавлять цвета, ссылки, рисовать области горячих точек и многое другое. Вы можете прокрутить вниз до раздела «Hotspot Areas» и развернуть интерактивную область для предварительного просмотра изображения.
Просто двигайте мышью и рисуйте кликабельные области на изображении. Вы можете легко выделить области горячих точек и расширить их, чтобы создать выделение.
^
После рисования области горячей точки, вам нужно прокрутить вниз до выпадающего меню Действие и выбрать действие для выбранной области на изображении. Если вы выберете «Показать дополнительную информацию», вы можете просто добавить описание, чтобы объяснить область горячей точки на изображении. Вы также можете добавить ссылку на выбранную область, используя опцию «Перейти к URL».
^
Вы также можете управлять общими настройками и выделять стили для ссылки действий, текста действий, информационного фона и многого другого. Эти настройки могут помочь сделать ваше изображение более интерактивным.
^
Затем вам нужно нажать на кнопку «Обновить» и скопировать шорткод, чтобы добавить его в свой пост или страницу WordPress.
^
Плагин позволяет создавать столько интерактивных изображений, сколько вам нужно, используя ранее загруженные или новые изображения.
^
Импорт и экспорт интерактивных изображений
Если вы работаете на нескольких сайтах и хотите импортировать / экспортировать интерактивные изображения, то для обоих сайтов требуется один и тот же плагин Draw Attention.
На первом сайте вам нужно зайти на страницу Draw Attention »Import / Export и поставить галочку на изображениях, которые вы хотите экспортировать. Затем нажмите кнопку «Создать код экспорта» и скопируйте код.
^
После этого вам нужно перейти на следующий сайт и убедиться, что у вас активирован плагин Draw Attention. Далее вам нужно перейти на страницу «Внимание» »« Импорт / экспорт »от администратора WordPress и вставить код в поле импорта.
^
Нажмите кнопку «Импорт», и ваши изображения будут импортированы со всеми интерактивными деталями, которые вы добавили ранее.
Эти интерактивные изображения хороши для WordPress SEO и привлекают больше посетителей на ваш сайт. Тем не менее, рекомендуется сжимать изображения перед их загрузкой, чтобы повысить производительность сайта.
Мы надеемся, что эта статья помогла вам научиться создавать интерактивные изображения в WordPress. Вы также можете проверить наше руководство о том, как лениво загружать изображения в WordPress.
