5 советов по навигации по интерфейсу Divi 5 как профессионал

С выпуском публичной альфа-версии Divi 5 пользователи теперь могут изучить мощные улучшения, которые происходят за кулисами Elegant Themes. Divi 5 — это крупное обновление, предлагающее обновленную основу для повышения скорости, стабильности и масштабируемости. Независимо от того, являетесь ли вы опытным профессионалом или только начинаете работать с Divi, этот новый Visual Builder позволит вам создавать веб-сайты более эффективно, с меньшим количеством шагов и более быстрой загрузкой. Воспользуйтесь этим новым обновлением от Elegant Themes и управляйте им как профессионал.

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

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

5 советов по освоению интерфейса Divi 5

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

1. Быстрый доступ к элементам через просмотр слоев

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

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

Совет профессионала

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

Практический пример

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

2. Ускорьте редактирование с помощью закрепляемых панелей и одним щелчком мыши.

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

Совет профессионала

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

Практический пример

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

3. Оптимизируйте навигацию с помощью навигационных цепочек на панели настроек.

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

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

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

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

Практический пример

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

4. Легкий адаптивный дизайн с масштабированием холста

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

Совет профессионала

Используйте Canvas Scaling, чтобы ваши мобильные проекты выглядели идеально. Настройте отступы, шрифты и выравнивание в мобильном представлении, чтобы ваш макет работал без проблем на небольших экранах.

Практический пример

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

Чтобы узнать больше, узнайте, как освоить адаптивное редактирование в Divi 5.

5. Оптимизация различных уровней взаимодействия в разных режимах просмотра

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

Как это работает

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

Совет профессионала

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

Практический пример

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

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

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

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

Навигация по Divi 5 как профессионал

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

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

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