Как эффективно построить страницы с помощью Divi 5

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

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

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

С учетом сказанного давайте погрузимся.

Понимание современного пользовательского интерфейса Divi 5

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

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

Эволюция визуального строителя

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

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

Интуитивная навигация

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

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

Адаптивные элементы управления дизайном

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

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

Создание вашей страницы с уникальными функциями Divi 5

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

Ниже мы подробно описываем, как использовать эти инструменты для создания веб -страницы.

1. Проектируйте переменные для эффективного стиля

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

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

Как использовать переменные дизайна

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

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

Номерные переменные также могут использоваться для расстояния. Например, вы можете установить стандартное расстояние для всех столбцов и строк на вашем сайте. Использование формулы Calc (), такой как Calc (80% - 60px), устанавливает ширину элемента конструкции как 80% контейнера, при добавлении 30px прокладки в обе стороны. Выберите CALL из раскрывающегося меню, чтобы применить формулу.

Введите формулу calc () в поле значения . Нажмите кнопку «Сохранить переменные» , чтобы добавить ее в диспетчер переменной.

Как только ваши переменные сохранились, Divi позволяет легко применять их на протяжении всего вашего дизайна. Чтобы использовать расстояние, нажмите на строку, столбец или модуль, перейдите на вкладку Design и найдите поле ширины.

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

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

Советы по использованию проектных переменных

• Задумчиво организуйте свои переменные: Имя переменные описательно, чтобы облегчить их идентифицировать в сложных проектах.
• Предупреждающие средства. Объедините переменные дизайна с глобальными пресетами Divi для создания шаблонов повторно используемого стиля для модулей, сокращая время настройки для новых страниц.
• Отзывчивость теста: предварительный просмотр с переменными конструкциями на разных устройствах в визуальном строителе, чтобы гарантировать, что все переменные работают как ожидалось.

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

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

Divi 5 предварительные презентации элементов

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

Divi 5 Опциональные ПРЕДЕРТЫ

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

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

Как эффективно использовать пресеты

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

Создание предустановки элемента

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

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

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

Создать предварительную установку группы опционов

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

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

Далее нажмите «Добавить новый предустановка» .

Стиль границы, назовите ее и сохраните предустановку.

Советы по использованию проектов Divi 5 на основе дизайна

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

• Используйте их для эффективности. Создайте предварительные устройства для элементов или предварительные устройства группы для ускорения построения страниц, особенно для больших веб -сайтов. Этот метод спасает вас от многократного стиля модуля, строки или раздела. Вы создаете стили впереди и применяете их везде, где это необходимо.
• Установите последовательность дизайна: предустановки обеспечивают единый стиль между элементами, усиливая идентичность вашего бренда и профессиональный лак.
• Редактировать пресеты, когда ваш сайт требует изменения дизайна: предустановки позволяют вам обновлять глобальные стили без ручного редактирования отдельных элементов, что делает их идеальными для итераций дизайна или изменений клиентов.
• Используйте их для масштабируемости: вы можете объединить предустановки с переменными дизайна, чтобы создать надежную структуру для сайтов, которые часто требуют обновлений. Нужно добавить страницу в будущем? Пресноты позволяют вам делать это быстрее и эффективнее.

3. Вложенные ряды для гибких макетов

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

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

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

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

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

Чтобы использовать силу вложенных рядов, следуйте этим шагам в визуальном строителе:

Начните с вставки стандартной строки в макет страницы. Это послужит основой. Затем нажмите на вкладку «Новая строка» , чтобы раскрыть параметры столбца для вашей новой вложенной строки.

Далее выберите модуль для первого столбца. Для этого примера изображение.

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

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

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

Советы по использованию вложенных рядов

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

4. Модульные группы для организованного контента

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

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

Как использовать группы модулей

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

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

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

Группы модулей могут создавать разделы членов команды, разделы вызовов в действие, заголовки внутренних страниц и многое другое. Но что еще более важно, группы модулей станут чрезвычайно полезными, когда будут выпущены такие функции, как Flexbox и Loop Builder.

Советы по использованию групп модулей

• Группы модулей плана стратегически: используйте группы модулей для многоразовых компонентов, таких как CTA, отзывы, члены команды или карты продуктов. Они помогают упростить процесс строительства и поддерживать организацию.
• Комбинируйте группы модулей с пресетами: применить предварительные настройки опционов к группам модулей для последовательного стиля, таких как однородные тени или границы, в нескольких группах.
• Используйте Divi Cloud: сохраняйте часто используемые группы модулей в Divi Cloud для быстрого доступа между проектами, особенно для клиентов с аналогичными потребностями в дизайне.

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

5. Усовершенствованные единицы для динамического дизайна

Усовершенствованные подразделения Divi 5 поддерживают более широкий диапазон единиц CSS (PX, VW, REM, %и т. Д.) И такие функции, как Calc (), Clamp (), min () и max () в пределах одного поля ввода, обеспечивая динамические и отзывчивые конструкции. Например, вы можете установить ширину секции для расчета (100% - 40px) или зажима (20px, 3vw, 40px) для типографии жидкости, которая масштабируется на основе размера видового порта.

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

Как использовать передовые единицы

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

Хороший пример с текстом. Конечно, вы можете установить формулы Clamp () в менеджере переменных для управления размером на всем сайте, но что, если вы хотите сделать заголовок более эффективным, добавив пространство, чтобы сделать его лучше? Вот где входят передовые подразделения.

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

Рядом с полем ширины нажмите значок - чтобы раскрыть параметры расширенного блока.

В раскрывающемся меню выберите VW (ширина Viewport) и введите 50 . Это скажет заголовок, чтобы занять 50% ширины просмотра. Viewport - это видимая область окна веб -браузера. Таким образом, независимо от того, насколько широким является окно браузера, оно всегда будет половина ширины окна браузера.

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

Советы по использованию передовых единиц

• Начните с простого: начните с основных единиц, таких как PX или % для простых конструкций, затем экспериментируйте с Clamp (), Calc (), VH или VW для отзывчивых эффектов.
• Используйте зажим для типографии: примените Clamp () к размерам шрифтов или интервалу для создания жидких, доступных конструкций, которые адаптируются к любому размеру экрана без ручных точек останова.
• В сочетании с дизайнерскими переменными: хранить часто используемые устройства для заголовков и текста тела в качестве переменных дизайна для поддержания согласованности и упрощения обновлений.

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

6. Интеграция Divi AI

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

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

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

Как использовать Divi AI

Чтобы максимально использовать Divi AI при создании веб-страницы в Divi 5, вы можете использовать ее, чтобы помочь вам писать копию бренда, создавать изображения, добавить несколько CSS в существующие модули или даже генерировать разделы. Divi AI может помочь вам создать красивые веб -страницы, которые резонируют с вашими посетителями.

Чтобы использовать Divi AI на существующем текстовом модуле, наведите на текстовую область и нажмите значок Divi AI на вкладке Content.

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

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

Советы по использованию Divi AI

• Будьте конкретны с вашими подсказками: включите детали, такие как тон, цвета или предпочтения макета при использовании Divi AI для создания изображений или разделов. То же самое касается текста и кода. Чем конкретно, тем лучше вывод.
• Итерация по мере необходимости: если начальный выход не идеален, уточните свою подсказку или генерируйте несколько вариантов, чтобы найти наилучшее соответствие.
• Используйте его для вдохновения: один из лучших способов использования Divi AI - это идеи мозговой штурмы, такие как создание концепций макета или слоганов, даже если вы планируете индивидуально настроить свою веб -страницу.

Лучшие методы создания веб -страниц с Divi 5

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

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

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

Объедините предустановки элементов с предварительными наборами групп опционов, чтобы сбалансировать гибкость и согласованность. Используйте элементы предустановки для конкретных модулей, таких как стиль CTA -модуль. Напротив, для поддержания единообразия примените предустановки групп опционов для общих свойств, таких как стили границ или тени. Когда необходимы обновления, вы можете настроить эти заданные группы для глобальных изменений, а не редактировать отдельные элементы вручную.

Наконец, сохраняйте свои дизайны простыми для поддержания производительности и удобства использования. Избегайте ряда рядов или полагаясь на сложные формулы Calc (), если это необходимо, так как они могут усложнить редактирование. Точно так же создайте группы модулей для основных проектов, которые вы планируете использовать на своем веб -сайте.

Создайте умные веб -страницы с Divi 5

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

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

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