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

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

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

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

Зачем использовать систему размеров и интервалов?

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

Подписаться на наш канал на YouTube

1. Определить числовую переменную один раз (например, 16px или зажим (16px, 4VW, 48px)))
2. Назначить его предустановке модуля/элемента
3. Или опциозные предварительные предприятия (например, расстояние или размеры)
4. Обновите переменную позже и смотрите изменения отраженных по всей стране
5. Используйте меньше CSS в целом для более тонких страниц

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

Размер элемента, прокладка и поля

Каждый веб -элемент имеет три компонента, влияющие на общий интервал и размер:

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

Практические примеры для элементов Divi

В общем, это то, как вы можете ожидать использования прокладки и маржи в Divi:

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

Значения расстояния между по умолчанию Divi

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

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

1. Перейдите к любому элементу и найдите группу опций расстояния на вкладке Design .
2. Откройте группу опций по умолчанию и установите верхнюю и нижнюю накладку на 0 (ноль).
3. Сохраните предварительную установку на расстоянии между по умолчанию, чтобы применить его по всей стране к каждому элементу.

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

Использование 8-балльной шкалы интервалов

8-балльная шкала-это схема макета, где значения интервала создаются с использованием приращения 8. Поэтому вместо использования произвольных значений, таких как 13px или 27px, вы придерживаетесь значений, таких как 8, 16, 24, 32, 40, 48 и т. Д.

Эта система помогает:

• Держите вертикальный и горизонтальный ритм, используя постоянную рубрику размеров
• Убедитесь, что расстояние в стеки с точками останова
• Ускорить принятие решений (меньше вариантов = более быстрый дизайн)

Вы можете использовать шкалу в PX или REM, в зависимости от ваших предпочтений или типа шкалы. Например, 16px становится 1 rrem, когда размер базового шрифта составляет 16px.

Макет страницы, которая связывает ваше внимание, чтобы выбрать области и толкает посетителей по странице с вертикальным интервалом

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

Как создать систему размеров и расстояния

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

Шаг 1: Создайте переменные номера в диспетчете переменной дизайна

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

1. Легко отзываемое имя (например, Gap-SM, Text-H1), которое не слишком долго
2. Числовое значение или функцию calc () или clamp ()
3. Единица CSS (PX, REM, %, VW и т. Д.)

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

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

И вот как выглядит это заполнить это в менеджере переменных.

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

Шаг 2: Планирование системы интерната на 8 пунктов

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

• Заголовок, абзац, кнопка
• Маленький заголовок, большой заголовок, абзац
• Икона, абзац
• Карты, содержащие несколько элементов

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

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

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

Шаг 3: Назначьте переменные номера предварительному

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

Каркас с содержанием заполнителей и размер шрифта/шрифта на месте

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

Пример параметров размеров типографии, установленных как переменные числа

Теперь мы хотим оценить, какое расстояние по умолчанию применяется в дизайне. Для этого вы можете посмотреть на график ранее в посте и сравнить ее с тем, что мы имеем в разделе «Герой». Очевидно, есть раздел (#1) и два ряда (#2 и#3). Прямо сейчас мы установим верхнюю часть строки по умолчанию/нижнюю накладку на ноль.

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

• Настольный компьютер : верхняя и нижняя накладка установлена ​​в Space-xxxl
• Планшет : верхняя и нижняя накладка установлена ​​в Space-xxl
• Мобильный : верхняя и нижняя накладка установлена ​​в Space-xl

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

Шаг 4: Интервал модулей

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

У вас есть варианты, вы можете разделить расстояние несколькими способами:

• Применить интервал на полевой вершины
• Применить интервал на маржи
• Равномерно нанесите расстояние между краем и краем

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

В этом разделе мы применили 0px к верхней и снизу зама

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

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

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

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

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

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

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