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

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

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

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

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

Что нового в интерфейсе Divi 5?

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

1. Редактирование в один клик в Divi 5

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

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

2. Более доступные элементы управления при наведении, закреплении и отзывчивости.

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

Упрощенный доступ к этим инструментам позволяет вам просматривать и настраивать поведение вашего контента на разных устройствах, быстрее добавлять закрепленные элементы управления к элементам и применять эффекты наведения, не углубляясь во вкладку «Дизайн», чтобы найти их.

3. Вкладки и стыковка нескольких панелей

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

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

4. Светлый и темный режим

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

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

5. Масштабирование холста для разных точек останова в Divi 5

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

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

6. Хлебные крошки Divi 5

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

7. Более быстрая визуальная обратная связь и производительность

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

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

• Переписанная базовая структура: ядро ​​Divi 5 было полностью переписано. Это устраняет неэффективность, которая приводит к снижению производительности. Мы перешли от структуры на основе шорткодов к модульной, что сделало ее адаптируемой к будущим обновлениям.
• Оптимизация кода: Divi 5 уменьшает раздувание кода, используя только JavaScript, необходимый для модулей страницы. В Divi 4 загружался весь JS, что приводило к задержкам Visual Builder. Теперь модули JavaScript предназначены для работы асинхронно, что делает конструктор более отзывчивым и повышает скорость страницы.
• Ускоренный рендеринг холста. Изменения в дизайне, такие как регулировка интервалов или изменение содержимого, теперь происходят мгновенно на холсте. Это является результатом изменений кода, которые создают меньшие по размеру независимые модули для более быстрого повторного рендеринга элементов.
• Лучшее использование ресурсов браузера. Divi 5 лучше работает с современными технологиями браузера, включая расширенное кэширование и улучшенное управление памятью. Теперь можно обрабатывать даже самые сложные макеты и динамический контент, не замедляя процесс проектирования.

Навигация по новому визуальному конструктору Divi 5

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

1. Основная панель инструментов

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

1. Настройки страницы: как и в Divi 4, вы можете добавить заголовок страницы, отрывок и избранное изображение. Другие параметры включают настройку ширины поля страницы, цветов текста и расширенных параметров CSS, видимости и положения.
2. Название страницы: здесь вы также можете изменить заголовок страницы, нажав на имя.
3. Адаптивное управление: переключение между настольным компьютером, планшетом и мобильным устройством.
4. Ширина страницы. Управляйте шириной холста.
5. Режимы просмотра. Увеличьте или уменьшите масштаб, чтобы увеличить или уменьшить размер изображения холста.
6. Светлый и темный режим: вы можете переключаться между светлым и темным режимами, чтобы сделать работу с Visual Builder более удобной в зависимости от ваших предпочтений.
7. Отменить/Повторить: в Divi 5 вы можете легко отменить или повторить последние настройки или корректировки дизайна.
8. Просмотр истории дизайна: получите обзор ваших последних действий.
9. Экспорт/Импорт: экспортируйте или импортируйте файл JSON вашей страницы.
10. Удалить: Удалить весь макет, чтобы начать с нуля.
11. Сохранить в библиотеке: сохраните макет в библиотеке Divi.
12. Параметры сохранения: сохранение, предварительный просмотр или выход из макета.

2. Левая панель инструментов.

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

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

Вот полное описание всех инструментов на левой панели инструментов:

1. Добавить макет: быстро добавьте готовый макет, сохраненный макет или существующую страницу.
2. Слои: получите краткий обзор структуры вашей страницы, чтобы легко найти то, что вам нужно.
3. Каркасный вид: ретроспективный вид вашей страницы, показывающий каркас разделов, строк и модулей.
4. Значки действий при наведении: если этот параметр включен, при наведении курсора на элемент отображаются соответствующие действия, такие как редактирование, дублирование, удаление или перемещение.
5. Значки родительских действий при наведении: активирует родительские элементы (разделы и строки), аналогичные модулям.
6. Рентген: размещает рамку вокруг элементов дизайна, чтобы их было легче идентифицировать.
7. Настройки Builder: предоставляет настраиваемые параметры Visual Builder, включая вид по умолчанию, настройки непрозрачности, светлый и темный режимы и цветовую схему.
8. Справка: коллекция видеоуроков и сочетаний клавиш Divi, которые помогут вам освоить новый интерфейс.

3. Правильная панель инструментов

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

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

4. Меню быстрых действий

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

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

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

• Поэкспериментируйте с стыковкой панелей: попробуйте различные макеты панелей, чтобы увидеть, какой из них лучше всего соответствует вашему стилю дизайна. Вы можете перемещать панели (аналогично Divi 4), закреплять их или группировать по вкладкам для быстрого доступа.
• Используйте масштабирование холста для адаптивного дизайна. Поиграйте с масштабированием холста, чтобы увидеть, как ваши проекты реагируют на различные устройства. Это изменит правила игры при адаптивном дизайне.
• Переключение между светлым и темным режимом: не забывайте, что вы можете переключаться между светлым и темным режимом в зависимости от ваших рабочих предпочтений.
• Используйте меню быстрых действий. Меню быстрых действий — одно из лучших обновлений Divi, позволяющих экономить время . Попробуйте скопировать и вставить стили модулей, чтобы ускорить рабочий процесс.

Испытайте будущее Divi

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

Готовы начать? Начните использовать публичную альфа-версию Divi 5 сегодня!

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