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

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

Благодаря новым переменным дизайна Divi 5 и функциями Flexbox теперь вы можете создать систему расстояния на основе зазоров непосредственно в визуальном строителе, не требуется пользовательское кодирование. Давайте посмотрим!

Почему традиционные методы расстояния терпят неудачу

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

Вы устанавливаете маржу 30PX на один текстовый блок. Затем вам нужно место вокруг кнопки, поэтому вы добавляете 20px.

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

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

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

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

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

С включенным Flexbox вы получаете два элемента управления зазором: горизонтальный и вертикальный. Установите горизонтальный зазор до 24px, и все детские элементы получают 24px пространства между ними горизонтально. Установите вертикальный разрыв на 15px, а укладываемые элементы получают 15px вертикального пространства.

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

Традиционный метод делает выбор случайного расстояния: 10px здесь, 20px там, 40px где -то еще. Эти рассеянные значения вызывают несоответствия и затрудняют понять, какое расстояние применяется. Свойства разрыва удаляют догадки, используя одно согласованное правило для всех элементов.

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

Система расстояния на основе пробелов с Flexbox и проектными переменными является гораздо лучшим подходом.

Как настроить систему GAP в Divi 5

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

1. Создание переменных интервалов

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

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

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

Начните с базового интерната. Большинство дизайнеров работают с 8-12px в качестве основы, но вы можете выбрать 4px, 10px или что-то еще, что соответствует вашему ритму дизайна. Вы можете использовать передовые единицы здесь, кроме только пикселей. Например, мы начинаем с REM вместо пикселей (при условии по умолчанию браузера 1Rem = 16px):

• GAP XS: 0,75Rem (~ 12px для жестких отношений для столбцов с только значком и текстом)
• GAP S: 1.25Rem (~ 20px для столбцов с текстовыми блоками)
• GAP M: 2Rem (~ 32PX для полевых ящиков, Службы столбцов)
• GAP L: 3Rem (~ 48px для основных разделов содержимого, макеты боковой панели)

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

Используйте зажимы, чтобы сделать масштабируемые пробелы

Мы также можем использовать Clamp (). Мы кратко объясним, если вы не знаете, что такое зажим (). Но сначала рассмотрите возможность добавления следующего в числовые переменные:

• Горизонтальный разрыв столбца: зажим (16px, 2vw, 32px) (для горизонтальных зазоров между картами, функциями и т. Д.)
• Зазор в вертикальном столбце: зажим (16px, 1,5VW, 32px) (для вертикальных разрывов между картами, функциями и т. Д.)

Clamp () - это безопасная единица CSS для использования. Вы даете три значения: мин, предпочтительный и макс. Браузер пробует предпочтительное значение, но если он слишком мал, он использует мин, и если он слишком большой, он использует макс.

Например, горизонтальный разрыв столбца: зажим (16px, 2vw, 32px). Разрыв масштабируется с шириной экрана (2VW = 2% просмотра). Он не будет ниже 16 % на небольших экранах или выше 32px на больших экранах. Это сохраняет сбалансировку между точками останова или медиа -запросы.

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

2. Включите макет Flexbox в ваших разделах

Новые разделы используют Flexbox по умолчанию. Для старых сайтов преобразовать раздел, нажав на значок «Настройки», открывая вкладку «Дизайн», выбрав стиль макета под вкладкой макета и выбрав «Flex». Сделайте то же самое для ваших рядов и столбцов.

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

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

3. Примените значения зазоров, используя ваши переменные

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

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

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

Захватывание зажима: между гибкими столбцами

Ваши зазоры будут работать на уровне «контейнера» через настройки Flexbox от Divi.

Примените горизонтальный разрыв столбца [зажим (16px, 2vw, 32px)], когда у вас есть столбцы, расположенные рядом, например, три сервисные карты в одной строке. После выбора Divi автоматически применяет его к настройке GAP. Поле будет отображать имя вашего переменной, подтверждая соединение. Это создает пропорциональное горизонтальное расстояние между столбцом 1, столбца 2 и столбца 3, когда направление макета установлено как строка.

Примените вертикальный разрыв в столбце [зажим (16px, 1,5VW, 32px)] Когда ваше направление макета установлено на столбец, элементы укладки вертикально. Это будет пропорционально пропорционально пространству элементов сверху вниз, когда направление макета установлено в виде столбца.

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

Базовые пробелы: содержание в рядах

Ваши базовые зазоры контролируют отношения между частями контента внутри каждого столбца. Когда за заголовком следует абзац и кнопка в том же столбце, рассмотрите возможность применения зазора XS (0,75Rem) между ними.

Рассмотрим использование GAP S (1.25Rem) для групп контента с несколькими текстовыми элементами или GAP L (3Rem), если вам нужно значительное расстояние между двумя столбцами, особенно если направление макета столбца установлено на строку.

Преимущество переменных дизайна

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

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

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

4. Настройка отзывчивых пробелов

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

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

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

Вертикальный разрыв на основе зажима сокращается и автоматически растет по мере изменения ширины просмотра. На небольшом экране телефона 2VW равняется около 7px, но зажим не превышает минимум 16px. На более крупном экране 2VW может означать 18px, а на еще большем экране - 20px.

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

Базовые промежутки могут по -прежнему нуждаться в ручных настройках за точку останова. Gap M может чувствовать себя слишком напряженным на мобильных устройствах. Переключитесь на свою мобильную точку останова и примените GAP L вместо вертикального разрыва.

Вы также можете создавать мобильные переменные, такие как «Gap Mobile S» или «Gap Mobile L», и применить их к точкам разрыва телефона и планшета. Однако в большинстве случаев основные зазоры базы и зажима работают хорошо.

5. Сохраните вашу конфигурацию в качестве предустановки

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

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

После настройки всех настроек Flexbox наведите на панель стиля макета. Вы увидите значок Presets Opportion Group.

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

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

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

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

Получите идеальное расстояние каждый раз с Divi 5

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

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