Divi 5의 기본 사전 설정을 사용하여 전체 사이트 스타일

Option Group Presets의 도착은 Divi 5 내에서 많은 새로운 가능성을 열었습니다 . Nick은 이것이 몇 년 안에 Divi를 강타하는 가장 중요한 기능이라고 말했습니다.

당신은 이미 사전 설정을 요소하는 데 익숙하지만 옵션 그룹 사전 설정은 사용을 중단하지 않을 완전히 새로운 디자인 컨트롤 계층을 추가합니다. 그러나 두 유형의 사전 설정은 " 기본 사전 설정 "을 지원합니다. 그것이 내가 다음 2000 단어의 과정에서 당신에게 보여주고 싶은 것입니다.

Divi 5의 기본 사전 설정은 무엇입니까?

기본 사전 설정은 웹 사이트에서 편집하려는 첫 번째 사전 설정입니다. 여러면에서, 이것들은 테마 커스터마이저의 총 대체품입니다.

페이지를 편집 할 때 즉시 작업 할 수있는 두 가지 유형의 기본 사전 설정 (기본 요소 사전 설정 및 기본 옵션 그룹 사전 설정이 있습니다. 더 친숙하기 때문에 요소 사전 설정을 먼저 다루겠습니다. 그러나 옵션 그룹 사전 설정으로 모든 디자인을 시작하고 싶을 것입니다.

기본 요소 사전 설정

요소 사전 설정은 웹 사이트에서 여러 번 사용할 요소를 설계하는 빠른 작업을 만듭니다. 요소 사전 설정을 사용하면 Blurb 모듈과 같은 모듈을 가져 와서 모듈의 기본 사전 설정을 편집 할 수 있습니다. 기본 사전 설정이 편집되면 사이트에 새 Blurb 모듈을 추가 할 때 동일한 스타일을 사용합니다 (새 항목이 기본 설정을 사용하기 때문에).

기본 요소 사전 설정을 편집하는 방법

기본 사전 설정 편집은 간단합니다. 기본 설정을 변경하려는 요소를 클릭하십시오 (이 경우 텍스트 모듈). 오른쪽 상단에서 사전 설정 선택기를 클릭하십시오.

드롭 다운 메뉴에 적어도 하나의 사전 설정 (해당 요소의 기본 사전 설정)이 표시됩니다. 설정 (기어 아이콘)을 찾고 클릭하여 특정 페이지 요소에서 기본 사전 설정의 설정 옵션으로 설정 옵션을 변경하십시오.

빵 부스러기 (작업중인 요소의 중첩 위치를 보여주는 위치를 보여주는)가 사라지고 설정 패널의 왼쪽 상단에 " 사전 설정 "이라는 단어가 나타날 때 사전 설정을 편집하고 있음을 알게 될 것입니다. 또한 사전 설정 선택기가 " 기본 사전 설정 "이라고 말하면 파란색으로 변합니다. 여기에서 편집하려는 요소 옵션 그룹 으로 이동하십시오. 이 경우 디자인 탭> 텍스트> 텍스트 크기 로 이동 하여이 모듈의 텍스트 내용의 크기를 편집하기로 결정했습니다.

"사전 설정 저장"을 클릭하여 변경 사항이 부지를 유지하도록하십시오.

당신이 몰랐을 때
한동안 Divi 주변에 있었다면 모듈 사전 설정 에 대해 알고 있습니다. 요소 사전 설정은 모듈 사전 설정과 동일하지만, 모듈 사전 설정이라고 부르는 것은 사전 설정이 섹션 및 행과 같은 비 모전트 요소에도 사용할 수 있기 때문에 혼란 스러웠습니다.

Divi 5의 페이지의 와이어 프레임보기.이 행에 모듈이 아니라 컨테이너의 기준에 맞지 않는 한이 행에 사전 설정이 어떻게 지정되는지 확인하십시오.

기본 요소 사전 설정은 모듈에 다른 사용자 정의 요소 사전 설정을 적용하거나 (아래에 자세히 설명) 특정 모듈 또는 요소에 직접 스타일을 적용하여 "재정의"할 수 있습니다. CSS와 마찬가지로 Divi는 특이성 규칙과 함께 작동 하며이 경우 모듈에 직접 적용되는 설정은 기본 요소 사전 설정에 적용되는 설정보다 더 구체적입니다.

그러나 블록에는 Divi 웹 사이트를 먼저 설계 해야하는 새로운 사전 설정이 있습니다.

기본 옵션 그룹 사전 설정

Divi의 새로운 옵션 그룹 사전 설정을 사용하면 유사한 옵션 그룹을 사용할 수있는 다양한 모듈과 요소에 걸쳐있는 기본 스타일을 만들 수 있습니다. 이것은 모두 " 기본"옵션 그룹 사전 설정 으로 수행됩니다. 이 새로운 옵션 그룹 개념의 세부 사항에 대해 모호한 경우 게시물에서 더 많이 읽을 수 있으며, 이에 대해 알아야 할 모든 것을 알려줍니다.

옵션 그룹 사전 설정에 대해 알아보십시오

요컨대, 다른 모듈에는 다른 구성이 있습니다 (4 가지 다른 요소를 비교하는 예를 보려면 아래 표를 참조하십시오).

한 요소의 복합 기능이 다른 것과 겹치면 옵션 그룹 레벨에서 스타일을 공유 할 수 있습니다. 이는 여러 모듈과 요소에서 유사한 주제를 설계 할 때 시간을 절약 할 수 있습니다 (많은 모듈의 제목 텍스트). 특히 제목, 바디 텍스트, 그림자, 애니메이션, 끈적 끈적한 기능, 국경, 간격 및 버튼을 사용하면 웹 사이트를 훨씬 빠르게 디자인하게됩니다.

기본 옵션 그룹 사전 설정을 편집하는 방법

기본 옵션 그룹 사전 설정을 편집하려면 모듈 또는 행/섹션 설정 패널로 이동하십시오. 사용 가능한 옵션 그룹 (텍스트, 제목 텍스트, 버튼, 백그라운드 등)을 사용하십시오. 사전 설정을 지원하는 옵션 그룹은 호버링 될 때 해당 OG 필드의 오른쪽에 사전 설정 아이콘이 표시됩니다. 사전 설정 아이콘을 클릭하여 해당 옵션 그룹의 기본 및 사용자 정의 사전 설정을 표시하십시오.

다음은 단일 모듈의 특정 측면 편집과 옵션 그룹 사전 설정으로 동일한 측면을 편집하는 것의 차이점을 보여주는 비디오입니다.

UI가 밝아진 옵션 그룹에 대해서만 UI가 밝아지고있는 옵션 그룹에 대해서만 옵션 그룹 사전 설정을 편집하고 있다는 것을 알고 있습니다 (어두운 모드에서는 반대가 아닙니다). 변경 사항이 적용되도록 변경 사항을 저장해야합니다.

기본 및 사용자 정의 사전 설정의 차이점은 무엇입니까?

기본 사전 설정은 페이지 나 템플릿에 배치 된 새로운 요소 (모듈/섹션/행)에 자동으로 적용되는 스타일입니다. 어쨌든 Divi 내의 모든 요소와 모든 옵션 그룹은 기본 사전 설정을 갖습니다. 기본 스타일이 어디에서 나오는지 아래를 참조하십시오.

사용자 정의 사전 설정은 기본 사전 설정으로 관리하고 적용하기 쉽지만 자동으로 사용되지 않는 추가 사전 설정입니다 (기본 대신에 이러한 사용자 정의 사전 설정을 적용해야 함). 디자인에 필요한 어두운 섹션, 사이드 바 및 조밀 한 컨텐츠 디스플레이와 같은 특별한 상황에서 사용됩니다.

모든 웹 사이트는 가능한 한 기본 옵션 그룹 사전 설정을 사용하여 설계해야합니다. 그런 다음 설계 사양에 따라 유사한 상황을 처리하기 위해 추가 사용자 정의 옵션 그룹 사전 설정을 작성해야합니다. 해당 OG 사전 설정으로 덮지 않은 것은 기본 요소 사전 설정 및 사용자 정의 요소 사전 설정으로 설계 될 수 있습니다. 여전히 설계 해야하는 나머지 에지 케이스를 위해 개별 모듈에 스타일을 직접 적용 할 수 있습니다.

Divi는 모든 새로운 기능이 출시되는 흥미로운 단계에 있습니다. 고급 단위 및 설계 변수가 떨어지면 모든 CSS 단위 및 기능으로 CSS 변수를 설정할 수 있습니다. 여기에서 모든 사전 설정에서 CSS 변수를 사용하여 디자인 워크 플로우가 약 10 배 더 일관되고 빠릅니다.

또한 요소 사전 설정 내에서 중첩 옵션 그룹 사전 설정을 허용하는 계획된 기능이있어 옵션 그룹 사전 설정의 논리로 요소 사전 설정을 만들 수 있습니다. 즉, OG 사전 설정을 편집하면 관련 요소 사전 설정도 수정됩니다 (그 반대는 어느 정도).

미래는 Divi 5의 디자이너와 개발자에게 밝게 보입니다!

사용자 정의 사전 설정을 기본 사전 설정으로 바꾸는 방법

우리는 기본 사전 설정이 있으며 사용자 정의 사전 설정도 있습니다. 기본값 대신 사용자 정의 사전 설정을 적용하는 방법을 보았지만 기본값을 너무 좋아한다면 기본값을 만들고 싶다면 어떻게해야합니까?

글쎄, 그것은 쉽다. 요소 사전 설정 또는 옵션 그룹 사전 설정 드롭 다운 으로 이동하십시오. 기본값을 만들고 별 아이콘을 클릭하려는 사용자 정의 사전 설정 위로 마우스를 가져옵니다. 그런 다음 변경 사항을 저장하십시오 . 사전 설정은 이제 전체 웹 사이트에서 기본 사전 설정입니다.

기본 사전 설정 내부의 스타일은 어디에서 왔습니까?

편집되지 않은 기본 사전 설정은 테마 커스터마이저에있는 스타일 값을 상속합니다. 거의 모든 WordPress 테마는 여전히 테마 커스터마이저 (블록 테마)의 일부 측면을 사용하지만 Divi는 연결되었지만 사용해야 할 필요는 없습니다 . 우리는 향후 어느 시점에서 커스터마이저를 대체 할 것입니다. 그러나 현재로서는 현대적인 WordPress 테마의 기발한 WordPress Core에서 이월되는 유물입니다.

재무 고문 스타터 사이트를 사용했다고 가정 해 봅시다 (하나의 구체적인 예). 테마 커스터마이저에서 헤더 텍스트 크기는 30px 로 설정됩니다.

페이지의 비주얼 편집기로 이동하여 제목 또는 텍스트 모듈 의 " 기본 사전 설정 "을 클릭하고 H1 고도에 대한 디자인> 제목 텍스트 에서 확인하여 기본 사전 설정에 사용 된 것과 동일한 값 (30px)을 볼 수 있습니다.

Divi 5 필드의 회색 값은이 경우 테마 커스터마이저에서 상속 된 상속 된 값임을 의미합니다.

그러나 이것은 단순히이 스타터 사이트에서 설정 한 기본입니다. 가져온 레이아웃 팩에서 사전 설정을 사용하거나 처음부터 시작한 경우 테마 커스터마이저에서 다른 기본값이 설정됩니다.

기본 사전 설정을 사용하여 웹 사이트를 작성하는 방법

두 페이지의 와이어 프레임으로 빌드를 시작하는 것이 좋습니다. 설계해야 할 필요성으로 몇 페이지에 모든 것을 배치하십시오.

가장 간단한 모듈에 의존하여 작업을 완료하고 가능하면 동일한 모듈 세트의 사용을 반복하십시오. 제목, 텍스트, 블러 브, 메뉴, 이미지, 아코디언/토글 및 비디오 모듈을 사용하여 대부분의 페이지 와이어 프레임을 구축하는 방법을 고려하십시오. 필요에 따라 다른 모듈을 추가하지만 대부분의 경우 핵심 모듈 세트를 고수하면 옵션 그룹과 요소 기본 사전 설정을 모두 사용하는 것이 훨씬 빠릅니다.

이 페이지에서는 섹션, 행, 열, 텍스트, 블러 브, 이미지, 버튼 및 메뉴 모듈을 사용합니다. 이 특정 페이지에 대해 가능한 한 간단하게 유지함으로써 디자인 해야하는 옵션 그룹의 수를 줄입니다.

다음으로 기본 옵션 그룹 사전 설정으로 가장 눈에 띄는 변경 사항을 설계하기를 원합니다. 대부분의 디자인의 경우 다음과 같습니다.

1. 섹션 간격 : 상단/하단 여백, 왼쪽/오른쪽 여백 및 필요한 패딩을 포함합니다.
2. 섹션 배경색 : 대부분의 경우 사용하려는 기본 옵션 그룹 사전 설정과 대체/대비 배경색을 위해 사용자 정의 옵션 그룹 사전 설정을 만듭니다. 배경 옵션 그룹 사전 설정에 대한 기본 사전 설정은 열 배경에도 적용될 수 있습니다.
3. 타이포그래피 : H1-H6으로 시작하십시오. 모듈 사용량에 따라 기본 옵션 그룹에서 제목으로 제목 텍스트 아래에있는 기본 옵션 그룹 사전 설정에서이를 시작하고 Blurb 모듈과 같은 것들에 대한 제목 텍스트 . 그런 다음 일반 텍스트에서 작업하여 텍스트 모듈의 텍스트 옵션 그룹과 Blurb 모듈과 같은 것들에서 발견되는 신체 텍스트 옵션 그룹에 중점을 둡니다.
4. 기타 디자인 설정 : 테두리, 상자 그림자, 필터 (스타일링 이미지 인 경우) 및 애니메이션에 대한 옵션 그룹 사전 설정을 만듭니다. 이를 위해서는 기본 사전 설정을 사용하지 않고 페이지 요소에 선택적으로 적용 할 수있는 사용자 정의 사전 설정을 만듭니다.
5. 고급 설정 : 위의 단계와 유사하지만 전환 및 스크롤 효과와 같은 것들에 대한 옵션 그룹 사전 설정을 만듭니다. 또한 기본 사전 설정을 사용하지 않고 페이지 요소에 선택적으로 적용 할 수있는 사용자 정의 사전 설정을 만듭니다.

이러한 방식으로 기본 옵션 그룹 사전 설정을 작성하면 사이트 전체에 스타일이 자동으로 적용됩니다. 기본 OG가 업데이트 될 때마다 웹 사이트의 관련 요소는 이러한 변경 사항을 자동으로 수락합니다.

기본 사전 설정은 시간을 절약 할 수 있습니다

요소와 옵션 그룹 품종 모두 기본 사전 설정은 대량 시간을 절약 할 수 있습니다. Divi 5의 Blazing Fast Builder를 사용하여 이러한 기능으로 사이트를 구축하기를 기다릴 수 없습니다. 그리고 그것은 Divi 5에서 출시되는 새로운 기능의 끝이 아닙니다.

Divi의 새롭고 계획된 기능을 사용하면 손가락 끝에 진정한 디자인 시스템이 있습니다. 먼저 기본 사전 설정을 사용하여 사이트 편집을 시도 했습니까? 어떻게 되었습니까? 아래 의견에 알려 주시고 이러한 기능을 사용하는 방법을 공유하십시오.

Divi 5 다운로드 Divi 5에 대한 모든 것을 배우십시오 Divi 5 데모 시도