Как освоить эффекты наведения в Divi 5 (публичная альфа-версия)

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

Узнайте больше об общедоступной альфа-версии Divi 5 и о том, как ее загрузить.

Скачать публичную альфа-версию Divi 5

Понимание эффектов наведения в Divi 5 (публичная альфа-версия)

В Divi 5 одним из существенных изменений, касающихся эффектов наведения, является то, что их теперь проще реализовать и они более доступны. В Divi 4 вам приходилось вручную включать эффекты наведения для каждого элемента в настройках. Этот процесс мог быть утомительным, так как вам нужно было найти конкретную опцию и активировать состояния наведения, прежде чем применять какие-либо изменения.

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

Это улучшение оптимизирует процесс проектирования за счет сокращения количества шагов, необходимых для применения расширенных моделей состояний наведения, ускорения рабочих процессов и повышения интуитивности создания динамических взаимодействий.

Ключевые улучшения в эффектах наведения Divi 5

Вот некоторые из ключевых улучшений Divi 5, которые делают применение и редактирование эффектов наведения быстрее и проще:

• Ускоренная навигация между обычным режимом и режимом при наведении: благодаря переключению одним щелчком мыши легче переключаться между состояниями и вносить изменения.
• Все настройки при наведении на одну панель: Больше никаких разрозненных настроек. Все настройки наведения элемента можно легко обновить на панели настроек.
• Мгновенная визуальная обратная связь: предварительный просмотр в реальном времени показывает изменения эффекта наведения по мере их внесения, что ускоряет рабочий процесс.
• Лучшая организация и видимость настроек: неактивные настройки выделены серым цветом, что помогает вам сосредоточиться на доступных опциях.

Эти улучшения упрощают процесс создания динамичных интерактивных проектов с эффектами наведения.

Хотите глубже погрузиться в новые настройки? Ознакомьтесь с разделом «Знакомство с интерфейсом Divi 5», чтобы узнать, как он может упростить рабочий процесс проектирования.

Получите общедоступную альфа-версию Divi 5

Как освоить эффекты наведения в Divi 5 (публичная альфа-версия)

1. Доступ и редактирование всех настроек состояния наведения в одном месте.

Настройки Divi 5 при наведении удобно отображаются на панели настроек, обеспечивая быстрый доступ ко всему в одном месте. Эта оптимизированная панель избавляет от необходимости переключать отдельные эффекты наведения для каждого параметра. Другими словами, как только на панели настроек выбрано состояние эффектов наведения, все параметры на каждой вкладке («Содержимое», «Дизайн» и «Дополнительно») теперь будут применяться только к состоянию наведения элемента.

Это ускоряет реализацию пользовательских или сложных эффектов при наведении.

2. Легко управляйте неподдерживаемыми настройками наведения

В Divi 5 неподдерживаемые настройки при наведении автоматически становятся серыми (недоступными), что позволяет вам быстро увидеть, какие функции недоступны для элемента, над которым вы работаете. Такая видимость позволяет избежать траты времени на отсеивание тех параметров, которые можно настраивать при наведении, от тех, которые не настраиваются , улучшая общий рабочий процесс.

3. Наслаждайтесь мгновенной визуальной обратной связью в реальном времени.

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

4. Быстро редактируйте эффекты наведения на всей странице

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

5. Предварительный просмотр эффектов наведения с уверенностью на внешнем интерфейсе

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

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

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

Скачать публичную альфа-версию Divi 5

Как создать эффект наведения в Divi 5: быстрый пример

Теперь, когда мы рассмотрели ключевые особенности эффектов наведения Divi 5, давайте рассмотрим небольшой пример, который покажет вам, как легко создать эффект наведения в Divi 5:

1. Добавьте модуль

В визуальном конструкторе Divi добавьте модуль, который хотите настроить. В этом примере давайте добавим кнопку.

2. Доступ к настройкам наведения

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

3. Настройте эффекты наведения

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

Не забывайте. Упрощенная панель настроек Divi 5 содержит все элементы управления на одной панели, поэтому внесите необходимые изменения, а затем нажмите «Сохранить», как только закончите.

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

Divi 5 меняет правила игры в дизайне с эффектом наведения

Эффекты наведения Divi 5 обеспечивают непревзойденную простоту, скорость и гибкость, оптимизируя процесс проектирования по сравнению с Divi 4. Независимо от того, являетесь ли вы опытным веб-дизайнером или новичком, эти интуитивно понятные функции упрощают добавление интерактивных элементов на ваш сайт, как никогда.

Готовы улучшить пользовательский опыт вашего сайта? Загрузите общедоступную альфа-версию Divi 5 сегодня и начните экспериментировать с новыми эффектами при наведении, чтобы увидеть, как ваши проекты оживают!

Скачать публичную альфа-версию Divi 5