Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Хотите создать интерактивное изображение для своего блога на WordPress?

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

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

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге

Тогда вернемся к тому, почему мы здесь.

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

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

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

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

интерактивное изображение демо-дюны на WordPress.jpg

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

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

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

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

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

После активации вы увидите новый тип настраиваемого поста на панели инструментов WordPress. Вы должны пойти в Draw Внимание »Добавить новый создать интерактивное изображение.

привлечь внимание WordPress.png

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

Идите дальше, обнаружив эти Премиальные плагины 9 для WordPress для оптимизации вашей медиатеки

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

перетащите картинку на start.png

Затем вам нужно нажать на кнопку публиковать .

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

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

создать зоны на WordPress.gif

После рисования области горячей точки, вы должны прокрутить вниз выпадающий список Экшен и выберите действие для выбранной области на изображении. Если вы выбираете Посмотреть больше информацииВы можете просто добавить описание, чтобы объяснить область точки доступа на изображении. Вы также можете добавить ссылку на выбранную область, используя опцию " Перейти к URL».

учиться Как сделать резервную копию и восстановить свой блог с Snapshot Pro

сохранить изображение hotspot.jpeg

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

общие настройки

Затем вам нужно нажать на кнопку Обновление и скопировать короткий код чтобы добавить его в свой пост или на страницу WordPress.

скопируйте shortcode.jpg

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

щелкните интерактивный image.jpeg

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

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

На первом сайте вы должны посетить Обратить внимание »импорт / экспорт и проверьте изображения, которые вы хотите экспортировать. Затем нажмите кнопку Генерация кода экспорта и скопируйте код.

экспортировать код hotspot.png

После этого вам нужно перейти на второй веб-сайт и убедиться, что вы активировали плагин Draw Caution. Тогда вы должны пойти в Обратить внимание »импорт / экспорт на панели управления и вставьте код в поле импорта.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

импортировать код hotspot.jpg

Идем дальше и нажимаем на кнопку Импорт и ваши изображения будут импортированы.

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

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

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

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

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

Все, что вам нужно сделать, это создать заблокированный контент с помощью коротких кодов [optinlocker] ... [/ optinlocker]. Если люди хотят отображать этот контент, они должны указать свое имя / адрес электронной почты. После отправки все заблокированное содержимое станет видимым.

Его основными характеристиками являются: инструмент мнадежно и безопасно, Vблокирование важного контента,поддержка MailChimp, AWeber, GetResponse, iContact, Campaign Monitor, Mad Mimi, Benchmark, Sendy и MyMail, поддержка шорткоды, еxпортирование данных в формате CSV, возможность перевода на несколько языков, fпростота установки, электронная почтаПоддержка клиентов xcellent, eт другие.

скачать | Демонстрация | веб-хостинг

2. Нажмите, чтобы Чат WhatsApp

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

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

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

скачать | Демонстрация | веб-хостинг

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

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

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [FREE]

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

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

Вывод

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

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

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

...

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
12 акции
доля10
чирикать1
Регистрация1