Все, что вам нужно знать о продвинутых подразделениях Divi 5

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

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

Давайте погрузимся.

Что такое продвинутые подразделения в Divi 5?

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

Это небольшое изменение в визуальном строителе, которое поддерживает все единицы CSS с новой поддержкой для Fit-Content, Unset, Calc (), Clamp () и CSS.

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

Изучение передовых подразделений в Divi 5

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

CSS -единицы в Divi 5

Расширенные подразделения открывают полную палитру подразделений CSS, далеко за пределами пикселей и процентов. Например, взять ширину просмотра (VW) - установите ширину секции на 80 ВВт , и она всегда будет занимать 80% ширины просмотра (горизонтально), отлично масштабируя от рабочего стола до мобильного.

Root em (rem) связывает размеры с размером шрифта сайта - идея для последовательной типографии, например, 4,5Rem для заголовка.

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

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

CALC () - динамический калькулятор

Функция CaCl () похожа на мини -калькулятор, встроенный в Divi. Он позволяет смешивать единицы с операциями - с добавлением, вычитанием, умножением и делением - для динамических результатов. Классическим примером является Calc (100% - 50px) , который устанавливает ширину секции на 100% и вычитает 50 пикселей. Если ваш элемент выровнен в центре, 25px с обеих сторон уменьшается.

Вы можете использовать Calc () для реагирования, например, установление секции или ширины строки, чтобы оставить идеальные желоба с каждой стороны. CALD () Регулирует на лету при изменении видового порта, гарантируя, что ваш дизайн остается сбалансированным, не внося ручные настройки.

Зажим () для контроля жидкости

Функция Clamp () помогает вам управлять размерами, которые плавно регулируют по размерам экрана. Он использует три значения: минимальный размер, предпочтительный размер и максимальный размер. Хорошим примером является зажим (36px, 4VW, 48px) .

Это означает, что размер начинается с 36 пикселей, увеличивается на основе 4% ширины просмотра, но никогда не превышает 48px. Он отлично подходит для текста, как модуль заголовка, который хорошо выглядит как на маленьких телефонах, так и на больших экранах. Clamp () гарантирует, что ваш дизайн остается сбалансированным и читаемым, независимо от устройства.

Переменные CSS для глобальной гибкости

Переменные CSS (или пользовательские свойства) позволяют определить многократные значения, такие как –Font-размер: 5EM , в параметрах темы Divi или в поле CSS настройки страницы. При добавлении переменных CSS в Divi 5, обязательно приложите их в родительский элемент, как это:

:root {
--font-size:5em;
}

После определения вы можете сбросить VAR (–FONT-размер) в поле текстового размера заголовка, чтобы применить его.

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

Без единичные значения

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

Как продвинутые подразделения работают в Divi 5

Усовершенствованные подразделения в Divi 5 привносят новый уровень управления непосредственно в визуальный строитель, что позволяет легко создавать адаптивные, динамические дизайны. Вы можете мгновенно ввести в любую единицу, функцию или переменную CSS, например, vw, calc () или clamp () - и увидеть результаты. Вот как продвинутые подразделения работают в Divi.

Адаптивная ширина секции с Calc ()

Допустим, вам нужен раздел, который охватывает 80% от высоты вида, но удаляет немного прокладки сверху и снизу. Перейдите на вкладку проекта раздела, найдите поле высоты и добавьте в поле Calc (80VH - 60px) .

Этот расчет позволяет разделу масштабировать плавное масштаб с помощью видового порта, сохраняя 80% высоты видового порта, вычитая 30px сверху и снизу.

Жидкая типография с зажимом ()

Clamp () может быть полезен, если вам нужны заголовки, которые растут с размером экрана, но остаются читаемыми. На вкладке модуля заголовка установите размер текста заголовка на зажим (52px, 2VW, 36px) .

Это устанавливает текст на 52px, увеличивается на основе 2% ширины просмотра и ограничивает размер на 36px - без усилий, обеспечивая отзывчивую, сбалансированную типографию.

Размеры шрифтов с переменным

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

Вы можете добавить следующее в параметрах темы или настройках страницы , в рамках Advanced> Custom CSS :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

Оттуда просто добавьте переменную в размер текста заголовка в любом модуле заголовка. Например, для этого заголовка в нашем разделе «Герой» мы просто добавляем var (-text-size-h1) . Divi распознает его как переменную и назначит соответствующий стиль вашему заголовку.

Лучшие практики для продвинутых единиц

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

Начните просто

Если вы новичок в использовании функций и переменных CSS, облегчить знакомыми единицами, такими как пиксели (PX) или проценты (%), то экспериментируйте с Calc () для основных динамических корректировок. Например, попробуйте Calc (100% - 40px) для ширины секции, прежде чем погрузиться в зажимные () или переменные CSS. Это укрепляет уверенность, не ошеломляя вас на ранней стадии.

Использующие переменные для общих стилей

Определите переменные CSS в параметрах темы для согласованности по всему сайту. Например, настройка –gutter: 30px позволяет повторно использовать расстояние между разделами, рядами и модулями. Переменные CSS также могут быть хорошими для установки равномерного размера текста для всех ваших заголовков. Одно из редактирования обновляет все, ускоряя процесс проектирования и сохраняя ваш дизайн сплоченным.

Испытать отзывчивость

Система отзывчивого представления Divi - отличный способ разработки вашего дизайна в нескольких размерах экрана. После применения единиц, таких как VW или Clamp (), переключайте между настольным компьютером, планшетом и мобильным видом, чтобы ваш макет плавно адаптировался. Заголовок, набор для зажима (20px, 3VW, 40px), может выглядеть идеально на рабочем столе, но может потребоваться регулировка для небольших экранов, поэтому проверьте его, чтобы быть уверенным.

Не становитесь слишком сложными

Несмотря на то, что вы можете гнездировать такие функции, как CALC (зажим (20px, 5VW, 50px) - 10px), вы должны придерживаться простых формул, по крайней мере, пока вы учитесь. Чрезмерная сложность может замедлить производительность и усложнять устранение неполадок, когда вещи не появляются, как и должно. Придерживайтесь чистых, целенаправленных расчетов, чтобы облегчить жизнь.

Почему продвинутые подразделения поднимают Divi 5

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

• Творческая свобода: смешивание единиц, функций и переменных разблокирует макеты, которые были более трудоемкими для достижения в предыдущих версиях Divi. Простые формулы позволяют регулировать высоты, ширину, размеры шрифтов и многое другое. Эта гибкость позволяет вам строить лучше и выполнять быстрее, все в визуальном строителе.
• Лучшие отзывчивые дизайны: передовые подразделения переключают Divi в сторону плавных конструкций, которые адаптируются без усилий. Использование vw или clamp () гарантирует, что ваш сайт чувствует себя естественным на любом устройстве, уменьшая необходимость в ручном переопределении и обеспечивая полированный опыт.
• Он защищен от будущего: передовые подразделения совпадают с миссией Divi 5 по модернизации визуального строителя для сегодняшней сети. Принимая полную силу CSS, Divi 5 предоставляет вам инструменты, необходимые для создания современных веб -сайтов. Речь идет не только о том, чтобы не отставать; Речь идет о том, чтобы оставаться впереди кривой с инструментами, которые отражают то, что используют профессиональные разработчики.

Скачать последнюю Divi 5 Alpha

Advanced Units - это полезная особенность, которая недавно была добавлена ​​в Divi 5. От точность Calc () до текучести Clamp () и эффективности переменных CSS, эти инструменты делают интервал, размеры и масштабируемость более интуитивно понятными, чем когда -либо. Независимо от того, использовали ли вы Divi в течение многих лет или просто обнаружили его, вы можете создать отзывчивые, динамичные веб -сайты с меньшими усилиями.

Готовы увидеть это сами? Скачать Divi 5 Alpha сейчас и начните экспериментировать с расширенными единицами. Играйте с VW и VH для расстояния между просмотром портов, Test Clamp () для типографии или настройте переменные, чтобы переосмыслить, как вы строите. Это шанс продвинуть ваши дизайны и узнать, что возможно.