Как построить веб -сайт с Divi 5 (присоединяйтесь к рано и продвигайтесь вперед)

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

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

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

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

Что отличает Divi 5?

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

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

Открывая Divi 5, вы можете подумать: «Это выглядит свежо». Затем вы начинаете строить, и тогда вы это заметите.

«Подожди, этот раздел просто загрузил мгновенно?»

Да, это так. И это только начало.

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

Давайте рассмотрим ключевые основные моменты того, что текущая альфа Divi 5 выходит с:

От шорткодов до блок-структуры

Divi 4 сохранила ваши макеты в качестве шорткодов: эти биты кода в квадратных скобках, которые WordPress читает для создания ваших страниц. Они работали, но не были идеальными.

В Divi 5 мы восстановили, как хранится ваш контент. Нет больше шорткодов, скрывающихся в вашей базе данных! Теперь мы используем чистый, блок-подход, который лучше соответствует направлению WordPress.

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

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

Новый интерфейс Divi 5

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

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

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

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

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

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

Многопанельное рабочее пространство

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

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

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

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

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

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

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

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

Переход от фиксированных рядов в вложенные ряды

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

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

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

Другие примечательные функции

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

• Проектируйте переменные централизовать ваш выбор стиля и внесите изменение в целом на месте. Определите цвета, шрифты, размеры, изображения и другие элементы один раз, затем примените их на протяжении всего сайта. Нужно обновить цвета бренда? Измените переменную, и каждый экземпляр обновляется автоматически.
• Редактирование в одном клике делает взаимодействие с вашим контентом без усилий. Просто нажмите на любой модуль, чтобы отредактировать его. Больше нет охоты на крошечных значков шестерни или кнопок настройки. Это небольшое изменение сохраняет бесчисленные клики на протяжении всего рабочего дня.
• Масштаб холста позволяет вам увидеть, как ваш дизайн выглядит на разных размерах экрана без переключения видов. Перетащите край холста, чтобы изменить его размер и посмотреть, как ваш макет адаптируется в режиме реального времени - идеально подходит для проверки отзывчивого поведения без постоянного переключения вкладок.
• Поддержка Advanced Units открывает новые возможности для точных, отзывчивых дизайнов. Используйте функции CSS, такие как Calc (), Clamp () и min ()/max () непосредственно в полях настроек Divi, чтобы создать макеты жидкости, которые идеально адаптируются к любому размеру экрана.
• Улучшение производительности , избегая загрузки ненужных сценариев и модулей
• Настраиваемые точки останова расширяются от трех (настольный компьютер, планшет, мобильный) до семи регулируемых вариантов. Этот тонко настроенный контроль помогает вам создать идеальные макеты для всего, от небольших телефонов до ультравидных мониторов.

Создание веб-сайта с Divi 5: Пошаговое руководство

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

1. Установка Divi 5

Получение бега Divi 5 делает всего несколько шагов. Загрузите последнюю версию Alpha из вашей области участников, загрузите ее в WordPress через раздел темы и активируйте ее, как обычно.

2. Настройка рабочей области

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

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

Создание рабочего пространства, которое работает для вас

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

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

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

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

Ускорение вашего рабочего процесса

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

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

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

2. Настройка динамических переменных

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

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

Настройка глобальных цветов

Во -первых, настройте некоторые цветовые переменные. Нажмите на вкладку «Цвета», добавьте свои цвета и назовите их что -то запоминающееся, например, «Brand Blue» или «основной цвет». Нажмите «Сохранить», и вы создали свою первую переменную.

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

Создание переменных шрифтов и номеров

Далее, давайте настроим вашу систему типографии. Под вкладкой шрифтов создайте переменные для вашего заголовка и шрифтов тела. Это сохраняет ваш текст в соответствии со всем сайтом.

Для переменных числа подумайте об общих измерениях, таких как:

• Стандартная заполнение (может быть, 30px для разделов)
• Радиус границы (если вы хотите округлые углы)
• Максимальная ширина для контейнеров содержимого
• Размеры шрифтов

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

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

Создайте переменные ссылки с помощью URL -адресов, которые вы можете повторно использовать на протяжении всего сайта, которые идеально подходят для обработки широко используемых ссылок, таких как профили социальных сетей, партнерские URL -адреса или кнопку «Get In Touch».

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

Использование переменных с передовыми единицами

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

Например, создайте переменную размера заголовка с: Clamp (36px, 5VW, 72px).

Это устанавливает ваш текст не менее 36px на небольших экранах, плавно масштабируется на средних экранах и крышки при 72PX на больших экранах. Примените это к своим модулям заголовка для текста, который всегда выглядит пропорционально независимо от устройства.

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

3. Строительство страниц и шаблонов с Divi

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

Вариант 1: Создайте свой сайт с помощью Divi AI

С Divi Quick Sites + Divi AI вы можете мгновенно создать рабочий веб-сайт с несколькими страницами, макеты тематических строителей, универсальные настройки дизайна, готовую навигационную панель и оптимизированные конфигурации WordPress, предоставляя базовую текстовую подсказку.

При создании веб -сайта с Divi AI перейдите на свою панель инструментов WordPress и нажмите значок Divi в меню. Ищите поле Divi Quick Sites и нажмите кнопку «Создать новый сайт».

Выберите опцию «Создать свой сайт с помощью ИИ» и предоставить подробную информацию о вашем бизнесе. Чем больше особенности вы включаете в свои услуги, стиль и аудиторию, тем лучшие результаты вы получите. Помните, что вам понадобится подписка Divi AI, чтобы использовать эту функцию.

Если у вас есть продукты для продажи, проверьте опцию «Установка WooCommerce во время установки», и Divi автоматически создаст страницы вашего магазина со всеми необходимыми компонентами.

Для изображений вы можете выбрать опцию Divi Quick Sites для доступа к коллекции Unsplash, позвольте Divi создавать пользовательские изображения на основе описания вашего бизнеса или выбрать «Использовать заполнитель», если вы планируете добавить свои собственные фотографии позже.

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

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

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

Как только вы удовлетворены вашим выбором, нажмите кнопку «Generate & Publish» и подождите несколько минут, пока Divi делает свою магию. Ваша новая домашняя страница появится, готовая приветствовать посетителей вашего сайта.

Добавление новых разделов на ваши страницы с помощью ИИ

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

Рафинирование сгенерированных AI разделов

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

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

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

Вариант 2: Создайте свой веб -сайт с помощью готовых макетов

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

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

Когда вы нашли «один», нажмите «Используйте этот макет». Вы можете увидеть сообщение с вопросом об импорте цветовых схем. Просто снимите это, если вы этого не хотите.

Единственный недостаток? Вам нужно повторить это для каждой страницы, которую вы создаете. Но есть лучший способ. С Divi Quick Sites (не нужно ИИ), вы можете значительно ускорить это. Самое приятное то, что каждый пользователь Divi может получить доступ к быстрым сайтам и ко всем своим стартовым конструкциям, не платя дополнительную подписку на AI.

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

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

После применения макета ...

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

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

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

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

Вариант 3: Создайте свой сайт с нуля

Когда вы откроете новую страницу, вы увидите чистый холст с добавленным разделом по умолчанию. Как и Divi 4, вы можете нажать кнопку «Зеленая» (+), чтобы добавить новую строку и начать строить с нуля.

Как и Divi 4, есть коллекция готовых к использованию модулей с Divi 5.

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

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

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

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

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

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

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

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

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

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

Когда вы сохраняете, вы создали свою первую Preset Group Group! Красота - это то, что вы можете применить этот тот же стиль к любому элементу, который использует эту группу опций: текстовые модули, изображения, кнопки или даже полные разделы.

Объединение предустановки групп опционов с переменными дизайна

Вот где Divi 5 становится действительно мощным. При создании пресетов не просто используйте статические цвета или размеры - вместо этого используйте свои переменные дизайна.

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

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

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

Divi 5 также позволяет включить расширенные подразделения в поле любого размера. Хотите раздел, который никогда не бывает шире, чем 1200px, но сокращается на мобильных устройствах? Введите «Мин (1200px, 90%)» в коробке ширины. Сделанный. Контейнер будет оставаться на расстоянии 90%, пока он не превысит 1200px, а затем прекратит расти. Пользовательский CSS не требуется. Эти передовые единицы также могут быть применены к динамическим переменным.

Здания элементов пресеты

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

Чтобы создать один, полностью стиль модуля, и когда он выглядит идеально, щелкните значок Preset в заголовке модуля (не внутри определенной группы опций). Выберите «Новый пресет из текущих стилей», дайте ему имя, например, «карта функции» или «Team Bio» и сохранить.

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

Создайте другие страницы на основе вашей системы проектирования (переменные и пресеты)

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

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

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

Создайте свои шаблоны

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

Получите доступ к созданию темы Divi, пройдя через WordPress Dashboard: Divi → Builder. Вверху вы найдете свой шаблон по умолчанию - этот шаблон управляет общим видом всего вашего веб -сайта. Нажмите на раздел «Добавить глобальный заголовок» и выберите «Построить глобальный заголовок», чтобы открыть свое рабочее пространство. Аналогичным образом, вы можете выбрать «Добавить глобальный нижний колонтитул» для разработки нижних фунтов стерлингов.

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

Создать пользовательские шаблоны типа контента

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

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

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

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

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

Использование Divi AI для дизайна шаблона

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

Нажмите кнопку синего + в визуальном строителе и выберите «Создать раздел с ИИ».

Ваше описание имеет наибольшее значение. Быть конкретным в том, что вам нужно:

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

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

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

Сэкономьте время с расширенными функциями шаблона

Шаблоны становятся еще более мощными, когда вы добавляете условную логику. Хотите разные заголовки для ваших магазинов по сравнению с вашим блогом? Установите условия отображения, которые применяют шаблоны на основе категорий страниц или шаблонов URL.

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

4. Освоение отзывчивого дизайна

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

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

• Телефон: <767px покрывает большинство размеров экрана смартфона
• Телефон широкий: <860px покрывает большинство экранов телефона в режиме ландшафта
• Планшет: <980px хорош для большинства экранов планшетов в портретном режиме
• Широкая таблетка: <1024px является стандартным для ландшафтного обзора в большинстве iPads и Samsung.
• Широкоэкран: > 1280px - хорошая ширина для большинства меньших ноутбуков
• Ultrawide: > 1440px покрывает большие настольные экраны

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

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

5. Get, Set, запустите!

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

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

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

Окончательные полировки

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

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

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

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

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

Построить быстрее, лучшие сайты с Divi 5

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

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

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

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