Divi 5로 갭 기반 간격 시스템 생성

일관된 간격은 세련되고 전문적인 웹 사이트의 기초입니다. 개별 요소의 마진을 하나씩 관리하는 대신 사이트 전체에서 레이아웃을 깨끗하게 유지하고 균형을 유지하는 단일 시스템에 의존 할 수 있습니다.

Divi 5의 새로운 디자인 변수 및 Flexbox 기능을 사용하면 이제 시각적 빌더에서 갭 기반 간격 시스템을 직접 구축 할 수 있으며 사용자 정의 코딩이 필요하지 않습니다. 봅시다!

전통적인 간격 방법이 부족한 이유

여백과 패딩은 충분히 간단 해 보입니다. 여기에 공간을 추가하고 패딩을 조정하십시오. 그러나이 접근법은 쉽게 지저분해질 수 있습니다. 실제로 어떻게 진행되는지는 다음과 같습니다.

하나의 텍스트 블록에서 30px 마진을 설정했습니다. 그런 다음 버튼 주위에 공간이 필요하므로 20px를 추가합니다.

다른 모듈에는 호흡 공간이 필요하므로 40px를 선택합니다. 각 결정은 현재 옳은 느낌이지만, 당신은 카드의 집을 짓고 있습니다.

모바일로 전환하면 모든 것이 균형을 잡을 수 있습니다. 신중하게 선택한 픽셀 값은 번역되지 않습니다. 간격은 데스크탑에서 완벽하게 보이지만 더 작은 화면 크기에서는 균형이 맞지 않습니다. 따라서 모바일 별 값을 생성 한 다음 태블릿 값을 만듭니다.

이제 세 가지 간격 시스템을 관리하고 있습니다. 이 분할 접근 방식은 사이트 전체에서 일관된 시각적 리듬을 유지합니다.

간격 특성이 간격을 간단하게 만드는 방법

갭 속성은 전통적인 마진과 다르게 작동합니다. 각 요소에 개별적으로 간격을 적용하지 않습니다. 대신, 부모 컨테이너에서 간격 규칙을 설정합니다. 컨테이너는 모든 어린이 요소간에 간격을 차지합니다.

Flexbox가 활성화되면 수평 및 수직의 두 가지 갭 컨트롤이 제공됩니다. 수평 간격을 24px로 설정하면 모든 어린이 요소는 수평으로 24px 공간을 얻습니다. 수직 간격을 15px로 설정하면 쌓인 요소는 15px의 수직 공간을 얻습니다.

이것은 Flexbox 컨테이너 내부의 모든 컨텐츠에 대해 작동합니다. 텍스트 모듈, 이미지, 버튼, 분배기 및 기타 어떤 것이 무엇이든 동일한 일관된 간격을 얻습니다. 개별 모듈을 파고 마진을 개별적으로 조정할 필요가 없습니다. 갭 속성은 간격 수학을 처리합니다.

전통적인 방법은 임의의 간격을 선택합니다 : 여기 10px, 20px, 40px가 다른 곳. 이러한 산란 된 값은 불일치를 유발하고 어떤 간격이 적용되는지 알기가 어렵습니다. 갭 속성 모든 요소에 대해 하나의 일관된 규칙을 사용하여 추측을 제거합니다.

이 접근법에는 여전히 한계가 있습니다. 사용한 모든 가치를 기억하고 필요한 곳마다 수동으로 적용해야합니다. 어떤 가치가 어디에서 작동하는지 추측해야합니다. 일단 해당 값을 설정하면 마음을 바꾸는 것은 각각을 찾고 수동으로 교체하여 오류와 불일치를위한 공간을 남기는 것을 의미합니다.

Flexbox 및 설계 변수가있는 갭 기반 간격 시스템이 훨씬 더 나은 접근 방식입니다.

Divi 5에서 갭 시스템을 설정하는 방법

갭 기반 간격 시스템을 구축하는 것은 복잡한 소리가 들리지만 Divi 5는 놀랍게도 간단합니다. 코딩 지식이나 외부 프레임 워크가 필요하지 않습니다. Visual Builder는 설계 변수 및 Flexbox 컨트롤을 통해 모든 것을 처리합니다. 간격 변수 생성에서 재사용 가능한 사전 설정 저장에 이르기까지 각 단계를 안내합니다.

1. 간격 변수를 만듭니다

Divi 5는 설계 변수를 사용하여 시각적 빌더 내에 갭 값을 저장할 수 있습니다. 간격 시스템을 한 번 구축하고 Flexbox 컨트롤이 나타나는 곳에서 해당 값을 적용합니다. 사용자 정의 CSS 기능이 필요하지 않습니다.

변수 관리자는 시각적 빌더의 왼쪽 사이드 바에 있습니다. 해당 아이콘을 클릭 한 다음 간격 변수를 추가 할 수있는 숫자 탭을 엽니 다.

여기서 하드 코딩 된 픽셀 대신 사이트 전체에서 사용할 수있는 값을 생성합니다. 몇 가지 설계 변수를 사용할 수 있습니다. 우리는이 게시물에있는 것들을 다루지 않을 것이지만 훌륭한 가이드가 있습니다.

기본 간격 장치로 시작하십시오. 대부분의 디자이너는 8-12px에서 기초로 작업하지만 4px, 10px 또는 디자인 리듬에 맞는 것을 선택할 수 있습니다. 여기에서 픽셀을 제외하고 고급 장치를 사용할 수 있습니다. 예를 들어, 픽셀 대신 REM으로 시작합니다 (브라우저 기본 1REM = 16PX를 가정) :

• 갭 XS : 0.75REM (아이콘과 텍스트 만있는 열의 단단한 관계의 경우 ~ 12px)
• 갭 S : 1.25rem (텍스트 블록이있는 열의 ~ 20px)
• GAP M : 2REM (기능 상자의 경우 ~ 32px, 서비스 열)
• GAP L : 3REM (주요 컨텐츠 섹션의 경우 ~ 48px, 사이드 바 레이아웃)

이 레이블은 고정되지 않았습니다. 귀하와 귀하의 팀은 필요에 따라 이름을 바꿀 수 있습니다. 더 많은 갭 변수를 추가 할 수도 있습니다. 브라우저 글꼴 설정으로 스케일을 제거하므로 텍스트 크기를 증가시키는 방문자는 비례 적 간격을 얻습니다. 이것은 접근성을 향상시킵니다.

클램프를 사용하여 확장 가능한 간격을 만듭니다

클램프 ()도 사용할 수 있습니다. 클램프 ()가 무엇인지 모른다면 간단히 설명하겠습니다. 그러나 먼저 숫자 변수에 다음을 추가하는 것을 고려하십시오.

• 수평 컬럼 간격 : 클램프 (16px, 2VW, 32px) (카드, 기능 등의 수평 간격의 경우)
• 수직 열 간격 : 클램프 (16px, 1.5VW, 32px) (카드, 기능 등의 수직 간격의 경우)

클램프 ()는 사용하기에 안전한 CSS 장치입니다. 당신은 세 가지 값을 제공합니다 : Min, Preferred, Max. 브라우저는 선호하는 값을 시도하지만 너무 작 으면 최소를 사용하고 너무 큰 경우 최대를 사용합니다.

예를 들어, 수평 컬럼 간격 : 클램프 (16px, 2VW, 32px). 화면 너비가있는 갭 스케일 (뷰포트의 2VW = 2%). 작은 화면에서 또는 큰 화면에서 32px 이상으로 16px 이하로 변하지 않습니다. 이것은 중단 점이나 미디어 쿼리없이 간격 균형을 유지합니다.

모든 값을 사용할 수 있습니다. 유지 관리가 쉽고 변경에 적응하고보다 일관된 결과를 생성하기 때문에이 방법을 선택했습니다.

2. 섹션에서 Flexbox 레이아웃을 활성화합니다

새 섹션은 기본적으로 Flexbox를 사용합니다. 이전 사이트의 경우 설정 아이콘을 클릭하고 디자인 탭을 열고 레이아웃 탭에서 레이아웃 스타일을 선택하고 "Flex"를 선택하여 섹션을 변환하십시오. 행과 열에 대해서도 똑같이하십시오.

Flex를 활성화 한 후에는 정렬 및 배포를위한 정당화 컨텐츠와 같은 옵션을 얻습니다. 정렬 항목 컨트롤을 사용하면 공간이 수평으로 소진 될 때 항목이 작동하는 방식을 설정할 수 있습니다.

여기에서는 별도의 수평 및 수직 슬라이더가있는 갭 컨트롤을 발견하여 행 내에서 열이나 모듈 사이의 간격을 설정합니다.

3. 변수를 사용하여 갭 값을 적용하십시오

Divi의 변수 관리자에 갭 변수를 설정하면 Flexbox 갭 설정에 적용하면 동적 컨텐츠 시스템을 통해 간단 해집니다. 레이아웃 설정으로 이동하여 수평 또는 수직 갭 필드의 레이블 위로 마우스를 가져와 동적 컨텐츠 아이콘을 표시하십시오.

동적 컨텐츠 아이콘을 클릭하여 변수 선택 대화 상자를 엽니 다. 이 메뉴에는 저장된 갭 변수가 나타납니다.

아시다시피, 우리는 그들이 사용될 컨텍스트에 따라 두 가지 갭 세트를 추가했습니다. 그 이유를 이해하기 위해 더 깊이 다이빙을하겠습니다.

클램프 간격 : 플렉스 컬럼 사이

클램프 간격은 Divi의 Flexbox 설정을 통해 "컨테이너"레벨에서 작동합니다.

한 행에 3 개의 서비스 카드와 같이 열을 나란히 배열 할 때 수평 열 간격 [클램프 (16px, 2VW, 32px)]를 적용하십시오. 선택되면 Divi는 자동으로 간격 설정에 적용합니다. 필드는 가변 이름을 표시하여 연결을 확인합니다. 레이아웃 방향이 행으로 설정된 경우 열 1, 열 2 및 열 3 사이에 비례 적 수평 간격이 생성됩니다.

레이아웃 방향을 기둥으로 설정하면 품목을 수직으로 쌓을 때 수직 열 간격 [Clamp (16px, 1.5VW, 32px)를 적용하십시오. 레이아웃 방향이 열로 설정되면 상단에서 아래로 비례 적으로 공간 항목을 공간으로 공간으로 만듭니다.

행 방향이있는 열이 행당 3 개의 열로 배열 된 6 개의 카드와 같이 여러 줄로 랩하면 두 간격을 모두 적용합니다. 수평 갭 공간은 각 행 내의 항목이며, 수직 간격은 행을 자체적으로 공간에 공간에 공간.

기본 간격 : 행 내의 내용

기본 간격은 각 열 내부의 콘텐츠 조각 간의 관계를 제어합니다. 제목에 이어 단락과 같은 열의 단락과 버튼이 이어지면 간격 XS (0.75REM)를 적용하는 것을 고려하십시오.

두 열 사이에 상당한 간격이 필요한 경우, 특히 열의 레이아웃 방향이 행으로 설정된 경우 두 열 사이에 상당한 간격이 필요한 경우 여러 텍스트 요소 또는 GAP L (3REM)의 컨텐츠 그룹에 갭 S (1.25REM)를 사용하는 것을 고려하십시오.

설계 변수는 이점이 있습니다

설계 변수는 수동으로 값을 입력하는 데 몇 가지 이점이 있습니다. 라벨은 상황에 맞을 수 있으므로 픽셀 또는 REM 값을 암기하지 않고 간격을 일관성있게 유지합니다.

간격 철학을 변경하면 가변 관리자의 변수를 업데이트하여 사이트 전체에 사용되는 모든 간격을 업데이트하십시오.

이 시각적 방법은 팀원이 다른 값을 입력 할 때 간격 오류를 피합니다. 갭 변수는 간격을위한 공통 언어를 생성하여 레이아웃을 설정하는 설계 표준에 맞게 유지합니다. 이는 고객이 페이지를 편집하거나 추가 할 때 많은 기고자가있는 대규모 프로젝트에 특히 도움이됩니다.

4. 반응 형 간격을 설정하십시오

휴대 전화에는 수평 공간이 제한되어 있습니다. 3 열 서비스 레이아웃은 데스크탑에서 멋지게 보이지만 360px 전화 화면에서 비좁고 뻣뻣 해집니다.

Divi 5는 전화, 전화, 태블릿, 태블릿 와이드, 데스크톱, 와이드 스크린 및 Ultra Wide와 함께 작동 할 7 가지 사용자 정의 가능한 중단 점을 제공합니다. 각 중단 점은 독립적으로 작동합니다. 데스크탑을 엉망으로 만들지 않고 레이아웃 방향을 변경하거나 갭 변수를 교환하거나 모바일의 정렬을 조정할 수 있습니다. 이렇게하면 레이아웃이 변경되어야하는 정확한 화면 너비를 타겟팅 할 수 있습니다.

전화 중단 점으로 전환하고 레이아웃 방향을 "행"에서 "열"으로 변경하십시오. 컬럼이 수평 공간을 위해 싸우지 않고 수직으로 쌓기 때문에 수평 갭 옵션을 지우십시오.

뷰포트 너비가 변경됨에 따라 클램프 기반 수직 간격이 줄어들고 자동으로 증가합니다. 작은 전화 화면에서 2VW는 약 7px와 같지만 클램프는 최소 16px를 초과하지 않습니다. 더 큰 화면에서 2VW는 18px를 의미하고 더 큰 화면에서 20px를 의미 할 수 있습니다.

화면 크기가 변경됨에 따라 이러한 한계 사이에서 간격이 부드럽게 증가합니다. 서로 다른 값을 수동으로 설정하지 않으면 모바일에서 단단하고 데스크탑에서 관대 한 간격이 나타납니다.

기본 간격은 여전히 ​​중단 점당 수동 조정이 필요할 수 있습니다. 갭 m은 모바일에서 너무 빡빡 할 수 있습니다. 모바일 중단 점으로 전환하고 수직 간격 옵션 대신 갭 L을 적용하십시오.

또한 "Gap Mobile S"또는 "Gap Mobile L"과 같은 모바일 특정 변수를 생성하고 전화 및 태블릿 중단 점에 적용 할 수 있습니다. 그러나 기본베이스 및 클램프 갭은 대부분의 경우 잘 작동합니다.

5. 구성을 사전 설정으로 저장하십시오

갭 시스템은 지금 잘 작동합니다. 설계 변수는 작업 한 시각적 인터페이스를 통해 간격을 제어 할 수 있습니다. 그러나 Flexbox 구성을 계속해서 설정하는 것은 빨리 늙어갑니다. 레이아웃 방향, 정렬 및 랩핑 설정을 조정해야합니다. 그런 다음 갭 변수를 각 새 섹션에 적용합니다. 이 과정은 시간이 다릅니다.

옵션 그룹 사전 설정이 문제를 해결합니다. 레이아웃 방향, 정렬, 래핑, 정당화 및 디자인 변수를 참조하는 수평 및 수직 간격을 포함하여 전체 Flexbox 설정을 저장합니다.

모든 Flexbox 설정을 구성하면 레이아웃 스타일 패널 위로 이동하십시오. 옵션 그룹 사전 설정 아이콘이 표시됩니다.

클릭하고“현재 스타일에서 사전 설정 만들기”를 선택하십시오. 레이아웃이하는 일에 따라“3 열 그리드”,“서비스 그리드”또는“카드 디스플레이”에 따라 이름을 지정하십시오.

사전 설정은 Flexbox 구성을 통해 모든 컨테이너로 전달합니다. 배경색, 글꼴 또는 기타 시각적 스타일을 복사하지 않습니다.

“3 열 그리드”를 모든 행에 사전 설정하십시오. 자동으로 동일한 간격, 정렬 및 포장 동작을 설정합니다. 각 행 또는 열은 동일한 레이아웃 구조를 사용하면서 시각적 모양을 유지합니다.

당신은 이미 완벽한 설정을 재현하는 데 더 적은 시간을 소비합니다. 시각적 정체성은 각 섹션마다 고유합니다. 구조 기초는 귀하의 사이트에서 일관성을 유지합니다. 갭 시스템은 구현하기에 빠르게 유지되며 입증 된 레이아웃 패턴은 효율적으로 재사용됩니다.

Divi 5로 매번 완벽한 간격을 두십시오

Divi 5의 새로운 Flexbox 및 디자인 변수를 통해 일관된 간격은 쉽게됩니다. GAP는 장치 간의 균형 레이아웃을 제어하는 ​​반면, 변수는 단일 변경으로 사이트 전체에 업데이트가 반영되는지 확인합니다.

지속적인 수정 대신 신뢰할 수있는 명확한 시스템을 얻을 수 있습니다. 간격을 한 번 설정하고 어디에서나 재사용하고 방문자를위한 훌륭한 경험을 설계하는 데 집중하십시오.