Хотите знать, как изменить изображение при наведении с помощью DIVI?
Эффекты наведения — это одни из самых простых микровзаимодействий, которые пользователь может иметь с сайт. В Конструктор тем Divi предлагает набор невероятно простых эффектов наведения, которые вы можете использовать для создания привлекательного взаимодействия с каждым человеком, который посещает ваш сайт. сайт.
Одним из самых ярких и полезных эффектов Divi является возможность изменять изображение, когда пользователь наводит на него курсор.
В этом уроке мы покажем вам, как добиться красивого изменения изображения при наведении на него курсора мыши.
обследование
Прежде чем мы начнем, давайте взглянем на результат, которого мы хотим достичь.
Создайте страницу с помощью Divi Theme Builder
Начните с добавления новой страницы в Веб-сайт из панели управления WordPress.
См. Также: Как создать скользящее и push-меню в DIVI?
Затем дайте название своей странице, затем нажмите « Использовать Divi Builder ".
Затем нажмите " Выберите макет«
Найди и выбери» Домашняя страница по уходу за собаками »
Выберите макет и нажмите « Выберите макет »
Найдите свои изображения
В Divi Builder просто найдите изображения, к которым вы хотите добавить эффект.
Обратите внимание, что вы можете использовать его на любой элемент, содержащий изображение
Открыть настройки модуля
Когда вы приняли решение, нажмите на значок шестеренки и введите параметры модуля содержащий изображение.
Читайте также: Как размещать сообщения блога в DIVI?
В случае с этим пакетом макетов изображение, к которому мы собираемся применить эффект наведения, является фоном крайнего правого столбца первой строки.
Введите настройки столбца.
Найдите изображение в настройках
Когда вы находитесь в настройках колонка правильно, обязательно выберите вкладку Содержание. Прокрутите вниз, пока не найдете вариант Нижний.
Sous фон, Divi дает вам возможность использовать либо сплошной цвет, либо градиент, либо изображение, либо видео в формате .mp4.
И хотя эффекты наведения можно применить к любому из них, мы работаем во вкладке Изображение, третье слева.
Включить эффекты наведения
Наведите мышку на слово фон (самый маленький субтитр) и найдитезначок стрелки в появившихся опциях. Это переключатель для Диви Hover Эффекты.
При активации этой опции появляются две новые вкладки. Левая вкладка — это базовое изображение, которое появляется без взаимодействия.
Выберите свой новый образ
Когда вы наведете курсор вниз на изображение, у вас будут обычные варианты: заменить изображение ou удалить картинку.
Если вы выберете значок корзины, он активирует эффект наведения, но изображение исчезнет.
Так как мы хотим изменять изображение при наведении, мы либо нажмите на само изображение, либо назначок передач .
Выберите изображение при наведении (замена)
Это откроет вашу медиатеку. Затем вы можете выбрать новое изображение, которое вы хотите, чтобы ваши пользователи видели, когда они наводят курсор на оригинал. Нажмите на 'Загрузить изображение"
Проверить наличие ошибок с исходным изображением
Мы всегда предлагаем вам убедиться, что исходное изображение также остается прежним. Итак, чтобы проверить, нажмите на левая вкладка и убедитесь, что исходное изображение все еще на месте.
Если все в порядке, вы можете сохранить настройки.
- Сохранить настройки столбца
- Нажмите еще раз на зеленая галочка для сохранения настроек линии.
Сохраните общие общие настройки и опубликуйте страницу.
Результат
Если вы выполнили все шаги в этом руководстве, вы должны получить это.
Скачайте DIVI прямо сейчас!!!
Заключение
Конструктор тем Divi полон мощных инструментов, которые каждый может использовать для создать сайт интересно и интерактивно. Изменение изображения при наведении, которое мы показали вам в этом руководстве, является лишь одним из многих инструментов.
Если вам нужно больше элементов для завершения проектов по созданию веб-сайтов, также просмотрите наше руководство на Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев говорить об этом. А между тем, поделитесь этой статьей в разных социальных сетях.
...
