Divi 5 디자인 변수로 크기 및 간격 시스템 만들기

Divi 5는 전체 사이트에서 크기 크기 및 간격 결정을 정의, 관리 및 재사용하는 체계적인 방법을 제공합니다. 설계 변수 및 사전 설정을 사용하여 유지 관리, 조정 및 복제가 쉬운 확장 가능한 설계 시스템을 만들 수 있습니다.

이 게시물에서는 시스템에서 생각하는 방법을 보여 드리며 포괄적 인 크기 및 간격 시스템 구축을 안내합니다.

Divi 5는 당신이 만든 새로운 사이트에서 사용할 준비가되었지만 기존 사이트를 마이그레이션하는 것을 보류하는 것이 좋습니다 (현재).

크기 및 간격 시스템을 사용하는 이유는 무엇입니까?

대부분의 Divi 사용자는 레이아웃, 여백 및 타이포그래피의 일관성을 원합니다. 그러나 이러한 표준을 일찍 정의하는 데 시간이 걸리는 사람은 거의 없습니다. 또는 그렇게한다면, 당신은 아마도 스타일의 어린이 테마를 통해 그것을했을 것입니다. 이제 당신은 할 수 있습니다 :

YouTube 채널을 구독하십시오

1. 숫자 변수를 한 번 정의하십시오 (16px 또는 클램프 (16px, 4VW, 48px)).
2. 모듈/요소 사전 설정에 할당하십시오
3. 또는 옵션 그룹 사전 설정 (예 : 간격 또는 크기)
4. 나중에 변수를 업데이트하고 사이트 전체에서 반사 된 변경 사항을 확인하십시오
5. 더 얇은 페이지에는 전반적으로 CSS를 적게 사용하십시오

다른 사이트 빌더와 함께 디자이너는 CSS 프레임 워크에 크게 의존하여 일관된 간격 및 크기를 적용하면서 프로젝트에서 프로젝트로 가져갈 수있는 시스템을 사용합니다. Divi 5를 사용하면 단일 줄의 코드를 터치하지 않고 Divi의 디자인 변수를 사용하여 Divi UI 내에서 작동하는 고유 한 "디자인 프레임 워크"를 만들 수 있습니다.

요소 크기, 패딩 및 여백

각 웹 요소에는 전체 간격 및 크기에 영향을 미치는 세 가지 구성 요소가 있습니다.

• 요소 크기 : 너비와 높이로 정의 된 요소의 핵심 내용 크기.
• 패딩 : 요소 내부에 공간이 추가되어 클릭 가능한 영역과 시각적 크기가 증가합니다.
• 여백 : 요소 외부에 공간이 추가되어 다른 요소에서 밀어냅니다.

분할 요소에 대한 실제 사례

일반적으로 이것은 Divi에서 패딩 및 마진을 사용할 것으로 예상하는 방법입니다.

• 섹션에는 일반적으로 페이지 내에서 수직 간격을 만들기 위해 상단 및 하단 패딩 (여백이 아님)이 있습니다.
• 행은 종종 수직 패딩의 혜택을받지 만 컨텐츠를 채우게하십시오.
• 열은 주로 열 간격을 만들기 위해 적용된 마진에 중점을 둡니다.
• 모듈은 일반적으로 하단 마진을 사용하여 스택 요소를 명확하게 분리하지만 마진의 양은 시각적 그룹에 따라 다릅니다.

Divi의 기본 간격 값

Divi를 사용하는 웹 디자인의 초보자는 Divi가 상자 밖에서 당신을 위해 간격 결정을 내린다는 것을 깨닫지 못할 것입니다. 더 숙련 된 디자이너는 종종 목표에 맞게 조정하지만 이러한 불이행으로 인해 대부분의 사람들은 대부분의 사람들이 프로젝트를 신속하게 시작할 수 있습니다.

이러한 기본값은 도움이 될 수 있지만 디자이너는 종종 자신의 간격 표준을 설정하는 것을 선호합니다. 기본 패딩 설정없이 페이지의 모습을보고 싶다면 다음을 수행 할 수 있습니다.

1. 모든 요소로 이동하여 디자인 탭 에서 간격 옵션 그룹을 찾으십시오.
2. 기본 옵션 그룹을 열고 상단 및 하단 패딩을 0 (0)으로 설정하십시오.
3. 기본 간격 OG 사전 설정을 저장하여 모든 요소에 사이트 전체에 적용하십시오.

이것은 Divi의 기본 설정없이 페이지의 모습을 보여줍니다. 좋아 보이지는 않지만 자신만의 디자인 시스템을 만들기 위해해야 ​​할 일을보기 시작할 것입니다 (또는 Divi의 기본값을 사용하고 적합한대로 변경할 수 있습니다).

8 점 간격 스케일 사용

8 점 척도는 8의 증분을 사용하여 간격 값을 구축하는 레이아웃 방식입니다. 따라서 13px 또는 27px와 같은 임의의 값을 사용하는 대신 8, 16, 24, 32, 40, 48 등과 같은 값을 고수합니다.

이 시스템은 도움이됩니다.

• 일관된 크기의 루 브릭을 사용하여 수직 및 수평 리듬을 유지하십시오.
• 간격 스택을 중단 점에서 깨끗하게 보장하십시오
• 의사 결정 속도를 높이기 (더 적은 선택 = 더 빠른 디자인)

선호도 또는 스케일 유형에 따라 PX 또는 REM에서 스케일을 사용할 수 있습니다. 예를 들어, 기본 글꼴 크기가 16px 인 경우 16px는 1REM이됩니다.

영역 선택에주의를 기울이고 수직 간격으로 방문자를 페이지 아래로 밀어 넣는 페이지의 모형

수직 간격은 독자에게 집중할 위치를 알려줍니다. 더 단단한 간격과 함께 클러스터링 된 항목은 자연스럽게 서로 관련이있는 것으로 보입니다. 더 많은 공간으로 분리 된 것은 새로운 아이디어를 나타냅니다.

크기 및 간격 시스템을 만드는 방법

크기와 공간을위한 시스템은 설계 전체에서 사용될 변수 또는 토큰을 설정하고 사이트 디자인 전체에서 이러한 변수를 일관되게 사용하는 두 가지로 구성됩니다. Divi로 그렇게 할 수있는 방법은 다음과 같습니다.

1 단계 : 디자인 변수 관리자에서 숫자 변수 작성

Divi 5는 재사용 가능한 숫자 값을 정의하기위한 시각적 인터페이스를 소개합니다. 각 숫자 변수에는 다음이 포함됩니다.

1. 너무 길지 않은 쉽게 리콜 할 수있는 이름 (예 : Gap-Sm, Text-H1)
2. 숫자 값 또는 기능 calc () 또는 clamp ()
3. CSS 장치 (PX, REM, %, VW 등)

변수 관리자로 인해 별도의 스타일 시트에 CSS 변수를 작성할 필요가 없습니다. 디자인 변수 관리자 에이 모든 것을 설정 한 다음 Visual Builder의 입력 필드에서 선택하십시오.

아래는 8 점 디자인 시스템과 일치하는 완전한 숫자 변수 세트입니다. 이것을 사용할 필요는 없지만 가능한 것이 무엇인지에 대한 아이디어를 제공합니다.

그리고이를 변수 관리자로 채우는 것이 무엇인지에 대해서는 다음과 같습니다.

이러한 간격 값은 Divi 5의 다가오는 Flexbox 기능에 도움이됩니다.

2 단계 : 8 점 간격 시스템 계획

귀하의 페이지에는 일반적으로 반복되는 요소 패턴이 포함됩니다. 공통 그룹 또는 다음과 같은 클러스터를 찾으십시오.

• 제목, 단락, 버튼
• 작은 제목, 큰 제목, 단락
• 아이콘, 단락
• 여러 요소가 포함 된 카드

초기 와이어 프레임 (또는 자리 표시 자 설계)을 사용하면 잠재적 인 패턴을 만들 수 있습니다. 또한 처리 방법을 결정 해야하는 패턴에 맞지 않는 물건을 만들 것입니다. 그러나 그것은 디자인의 모든 부분입니다.

Figma에서 또는 Divi의 자리 표시 자 요소가있는 와이어 프레임 페이지를 직접 작성하여이를 수행 할 수 있습니다. 페이지에 배치 할 수있는 모든 것을 얻으십시오. 조정을 시작할 때 간격 (Divi의 기본 간격으로)을 시각화하는 데 도움이되는 Measure Everything이라는 크롬 확장을 사용할 수 있습니다.

확장을 사용하려면 Chrome Extension Toolbar에서 활성화하십시오. 그런 다음 관심있는 페이지의 요소를 클릭하여 해당 요소에 도구를 집중하십시오. 거기에서 마우스를 이동하여 현재 선택된 요소와 다른 요소 사이의 다양한 측면을 측정하십시오.

3 단계 : 옵션 그룹 사전 설정에 숫자 변수를 할당합니다

페이지 설정의 와이어 프레임과 디자인 변수가 제자리에 있으면 페이지에 간격 및 크기 관련 변경 사항을 변경할 수 있습니다. 먼저 콘텐츠 그룹으로 시작할 수 있습니다. 영웅 섹션의 제목, 단락 및 버튼에 초점을 맞추겠습니다.

자리 표시 자 콘텐츠 및 글꼴/글꼴 크기가있는 와이어 프레임

이 시점에서 이미 타이포그래피의 첫 번째 초안을 설정하고 싶을 것입니다. 여기에는 글꼴, 글꼴 크기 및 라인 높이/문자 간격이 포함됩니다. 이 없으면 타이포그래피 시스템을 설정하면 모든 크기를 재조정 할 가능성이 높습니다.

타이포그래피 사이징 옵션의 예는 숫자 변수로 설정되었습니다.

이제 우리는 설계에 어떤 기본 간격이 적용되는지 평가하려고합니다. 이렇게하려면 게시물의 이전 차트를보고 영웅 섹션 내에서 진행중인 작업과 비교할 수 있습니다. 분명히 섹션 (#1)과 두 행 (#2 및#3)이 있습니다. 지금은 기본 행 상단/하단 패딩을 0으로 설정합니다.

다음으로 섹션 간격을위한 두 가지 옵션이 있습니다. 패딩을 0으로 설정하고 나중에 파악하거나 나중에 파악할 수 있습니다.

• 데스크탑 : 상단 및 하단 패딩 스페이스 -xxxl로 설정되었습니다
• 태블릿 : 상단 및 하단 패딩 스페이스 -xxl로 설정되었습니다
• 모바일 : Space-XL로 설정된 상단 및 하단 패딩

그러나 당신이하는 일은 전적으로 당신과 간격 디자인 변수에 달려 있습니다 (또는 당신이 그들을 자신의 것으로 채택하는 것을 선호하는 경우 기본값을 사용). 우리가 지금 가지고있는 것 (기본 행 패딩이 0 및 사용자 정의 섹션 패딩으로 설정) :

4 단계 : 모듈 간격

다음으로해야 할 일은 섹션/행 내 모듈 사이의 간격에 대한 작업입니다. 핵심은 모듈에 간격을 적용하는 일관된 방법을 선택하는 것입니다.

옵션이 있고 여러 가지 방법으로 간격을 분할 할 수 있습니다.

• 간격을 마진 탑에 적용하십시오
• 마진 바닥에 간격을 적용하십시오
• 마진 탑과 마진 바닥 사이에 간격을 고르게 적용하십시오

많은 모듈에 기본적으로 마진 바닥이 적용된다는 것을 기억하는 것이 중요하므로, 해당 컨벤션을 사용하여 간격 패러다임을 설정할 때 시작하는 것이 좋습니다. 우선, 상단/하단 여백을 0 으로 설정하여 모듈 간의 간격이 기본값을 적용하지 않고 어떻게 보이는지 확인할 수 있습니다.

이 섹션에서는 기본 간격 없이이 모든 모듈을보기 위해 0px를 여백 상단 및 하단에 적용했습니다.

이제 간격 시스템을 만들기 위해 이러한 모듈의 여백 바닥에 간격 설계 변수를 할당 할 수 있습니다. 우리는 제목과 신체 텍스트부터 시작합니다.

모듈 간격으로 패턴을보기 시작하면 기본 요소 사전 설정에 이러한 간격 선택을 추가 할 수 있습니다. 또한 벗어나는 요소에 대한 간격 규칙을 만들어야하므로 사용자 정의 요소 사전 설정을 만들 수 있습니다. 새 요소는 기본 사전 설정을 사용하지만 다양한 상황에 대해 사용자 정의 요소 사전 설정을 빠르게 선택할 수 있습니다.

크기 조정 및 간격에 Divi 5를 어떻게 사용 하시겠습니까?

당신이 만족하는 간격 및 사이징 시스템을 만드는 것은 기초를 연습하고 당면한 도구에 기대어 나옵니다. Divi 5는 WordPress 웹 사이트를위한 사실상 디자인 시스템을 만들고 있습니다. 그것은 많은 유연성을 갖는 달콤한 장소에 부딪 히지 만 머리를 감싸기 쉽습니다.

디자인 시스템 작성을 고려한 적이 없다면 Divi를 사용하면 개별 모듈 또는 요소 수준뿐만 아니라 설계 변수 및 사전 설정 수준에서이를 생각할 수 있습니다. 이를 통해 기본 설계 결정을 그 어느 때보 다 빠르게 요소에 적용 할 수 있습니다.

8 포인트 시스템을 시험 해보고 있습니까? 아니면 다른 계획이 있습니까? 또한 Divi의 기본 간격에 대해 처음 생각합니까? Divi 자동으로 디자인을 만들지 만 전문 디자이너의 경우 픽셀 분명한 비전을 달성하기 위해 이러한 기본값 중 일부를 변경할 수 있습니다.

Divi 5는 당신이 만든 새로운 사이트에서 사용할 준비가되었습니다.