Divi 테마 커스터마이저에 대한 궁극적인 가이드

Divi Theme Customizer는 Divi 테마를 사용자 정의할 수 있는 강력하고 편리한 도구입니다. Visual Builder와 마찬가지로 Divi Theme Customizer는 시각적 프론트 엔드 사용자 정의 및 디자인 변경을 허용하여 사용자 정의 프로세스에서 추측 게임을 제거합니다. 이 도구를 효율적으로 사용하면 시간을 절약하고 향후 프로젝트를 빠르게 시작할 수 있습니다.

오늘 게시물은 테마 사용자 정의 프로그램이 어떻게 작동하는지 더 잘 이해하여 향후 프로젝트의 생산성을 높이는 데 사용할 수 있습니다. 테마 사용자 지정 프로그램에서 사용할 수 있는 거의 모든 옵션을 Divi와 관련된 옵션에 중점을 두고 다룹니다. 어떤 면에서 이 게시물은 그 과정에서 몇 가지 심층적인 설명과 디자인 팁을 제공하는 문서의 역할을 합니다. 또한 다음 프로젝트에서 사용할 수 있도록 커스터마이저 설정을 내보내는 방법도 보여 드리겠습니다.

다룰 내용이 많으므로 처음부터 시작하겠습니다.

WordPress를 염두에 두고 구축

테마 커스터마이저는 워드프레스 3.4에서 도입되었습니다. 이 편리한 기능을 통해 WordPress 사용자는 테마에 대한 변경 사항을 실시간으로 미리 보고 한 번의 클릭으로 해당 변경 사항을 저장할 수 있습니다. 여러 개의 창과 무수한 새로 고침을 수행하던 작업을 이제 하나의 브라우저 창에서 빠르게 수행할 수 있습니다.

다음은 TwentySeventeen 테마에 대한 테마 사용자 지정 옵션의 예입니다.

보시다시피 WordPress 백엔드의 여러 페이지(사이트 ID, 메뉴, 위젯 등)에 있던 WordPress의 많은 기능을 이제 이 프런트 엔드 사용자 지정 도구에서 모두 한 곳에서 액세스할 수 있습니다.

반면에 Divi 테마 사용자 정의 프로그램은 모든 종류의 Divi 특정 옵션이 포함된 이 테마 사용자 정의 프로그램의 향상된 버전으로 제작되었습니다. 사용자의 경우 Divi를 사용자 정의하는 프로세스가 훨씬 쉬워집니다. 그리고 편집하는 동안(동시에) 사용자 정의를 실제로 볼 수 있다는 사실은 이것을 편리한 디자인 도구로 만듭니다.

Divi 테마 사용자 지정 프로그램에는 여전히 많은 표준 WordPress 사용자 지정 프로그램 옵션이 있지만 더 많은 기능도 있습니다.

보시다시피 Divi Theme Customizer에 추가된 설정이 훨씬 더 많습니다. 이제 더 깊이 탐색을 시작하겠습니다.

일반 설정

테마 사용자 지정을 시작할 때 일반 설정에서 시작하여 아래로 내려가는 것이 가장 좋습니다.

사이트 아이덴티티

이 섹션은 Divi에만 있는 것이 아닙니다. 이것은 귀하의 사이트에 대한 사이트 제목과 태그라인을 변경할 수 있는 편리한 위치입니다. Divi 테마 옵션에서 추가할 수 있는 파비콘 아이콘과 달리 브라우저와 앱에서 사용하는 사이트 아이콘을 입력할 수도 있습니다.

레이아웃 설정

레이아웃 설정을 사용하면 섹션과 행 사이의 공간과 기본 콘텐츠 섹션의 최대 너비를 결정하여 테마의 프레임워크를 조정할 수 있습니다.

박스형 레이아웃 활성화

여기에서 사이트 콘텐츠를 프레임화하고 사용자 정의할 수 있는 배경을 노출하는 상자 레이아웃으로 사이트를 변경할 수 있습니다.

웹사이트 콘텐츠 너비

여기에서 콘텐츠 섹션의 최대 너비를 설정할 수 있습니다. 콘텐츠가 반응형 레이아웃에 있으므로 더 작은 크기로 조정되지만 여기에 설정된 최대 너비보다 더 넓게 확장되지는 않습니다.

기본값은 1080px로 설정됩니다. 이것은 대부분의 표준 랩톱 및 데스크탑에 적합한 너비입니다.

웹사이트 거터 폭

여백 너비는 각 행의 열 사이의 가로 공간(여백)에 해당합니다.

거터 너비의 선택적 값 범위는 1에서 4입니다.

1은 열 사이의 여백이 0임을 나타냅니다.
2는 열 사이의 3% 오른쪽 여백을 나타냅니다.
3은 열 사이의 5.5% 오른쪽 여백을 나타냅니다.
4는 열 사이의 8% 오른쪽 여백을 나타냅니다.

사용자 정의 사이드바 너비 사용

테마의 기본 사이드바 너비를 설정합니다. 이것은 사이드바가 있고 Divi Builder를 사용하여 구축되지 않은 테마의 모든 페이지에 적용됩니다.

섹션 및 행 높이

이 옵션은 각 섹션과 행의 수직 간격(상단 및 하단 패딩)의 양을 조정합니다.

기본적으로 섹션 패딩은 상단과 하단에서 50px입니다 . 행의 경우 기본 패딩은 상단과 하단에서 30px입니다 . 그러나 Customizer를 사용하여 섹션 또는 행 패딩을 변경하면 패딩 값이 테마 사용자 지정 프로그램의 옵션 다이얼에 있는 숫자에 해당하는 백분율로 바뀝니다.

예를 들어, "0"은 상단 및 하단 패딩의 0%를 나타내고, "1"은 상단 및 하단 패딩의 1%를 나타내고, "2"는 2%를 나타내는 식입니다. 패딩의 백분율은 컨테이너(섹션 또는 행)의 너비를 기반으로 합니다. 따라서 섹션의 실제 너비가 1080px이고 섹션 높이를 1로 설정했다면 다음을 의미합니다.

1080픽셀 x 0.01 = 10.8픽셀

… 상단과 하단에 10.8픽셀의 패딩.

옵션 범위는 0에서 10까지이므로 최대 10%의 패딩을 가질 수 있습니다.

테마 액센트 컬러

다른 요소의 색상 변경을 시작하기 전에 먼저 색상을 변경해야 합니다 . 변경한 후에는 설정을 저장 및 게시하고 페이지를 새로고침하세요. 이제 업데이트된 테마 강조 색상이 다른 요소를 자동으로 채워야 합니다.

테마 강조 색상을 업데이트하면 다음도 업데이트됩니다.

• 바디 링크 색상
• 위젯 헤더 색상
• 위젯 글머리 기호 색상
• 바닥글 소셜 아이콘 호버 색상
• 아이콘의 기본 색상
• 바닥글 메뉴 활성 링크 색상
• 보조 메뉴 배경색
• 슬라이드 인 및 전체 화면 헤더 스타일 배경색
• 모바일 메뉴 색상에 대한 햄버거 메뉴 아이콘
• 기본 메뉴 활성 링크 색상
• 드롭다운 메뉴 선 색상
• 보조 메뉴 배경색
• 보조 드롭다운 메뉴 배경색
• 보조 메뉴 배경색
• 활성 기본 메뉴 링크 색상
• 바닥글 메뉴 활성 링크 색상

타이포그래피

이것은 사용자와 개발자가 간과하는 경향이 있는 웹사이트의 가장 중요한 측면 중 하나입니다. 이러한 옵션을 간과하는 실수를 하지 마십시오. 이러한 세부 사항을 올바르게 파악하면 큰 차이를 만들 수 있습니다. 테마의 기본 타이포그래피를 설정하는 데 시간을 할애하면 모듈 수준에서 사용자 정의를 수행할 필요가 없기 때문에 장기적으로 시간을 절약할 수도 있습니다.

본문 텍스트 크기

이렇게 하면 테마의 기본 본문 텍스트가 변경됩니다. 기본 크기는 14px입니다.

디자인 팁: 14px는 표준 본문 텍스트 크기에 너무 작은 것 같습니다. 기본 레벨 본문 글꼴 크기는 실제로 16px보다 작아서는 안됩니다. 우리 중 4세 이상에 가까운 사람들은 감사할 것입니다. 대부분의 브라우저에서도 표준 기본 수준 글꼴 크기로 16px를 사용합니다.

바디 라인 높이

각 개별 텍스트 줄의 줄 높이입니다.

디자인 팁 : 선 높이는 길이 값 "em"으로 측정됩니다. Divi의 기본값은 본문 텍스트의 경우 1.7em입니다. 이 em 값은 요소의 현재 글꼴 크기를 기반으로 하므로 상위 인라인 값(또는 이 경우 현재 글꼴 크기)에 따라 크기가 조정되기 때문에 픽셀(px) 값보다 좋습니다. "1.7em" 값은 기본적으로 현재 글꼴 크기의 1.7배를 나타냅니다. 따라서 현재 글꼴 크기가 16px인 경우 줄 높이는 27.2px입니다. 이렇게 하면 위쪽에 5.6픽셀, 아래쪽에 5.6픽셀의 추가 공간이 생깁니다. 이것은 가독성을 위해 좋은 행간(사본 줄 사이의 공백)인 것 같습니다.

헤더 텍스트 크기

Divi를 사용하면 여기에서 기본 h1 헤더 텍스트 크기를 설정할 수 있습니다. 이것은 Fullwidth Header Module 제목과 같은 Divi의 요소에 영향을 미칩니다. 다른 헤더 수준(h2, h3 등)의 크기를 조정하려면 추가 CSS에 추가하는 것이 좋습니다(이는 포스트 후반부에서 다룹니다).

디자인 팁: 대부분의 경우 페이지당 헤더가 하나만 있으므로 중요하게 생각하십시오. 책 표지의 제목이라고 생각하시면 됩니다. 사람이 가장 먼저 알아차리는 것입니다. 그리고 대중적인 슬로건과 달리 사람들은 여전히 ​​표지로 책을 판단합니다. 특히 이 경우에는 더욱 그렇습니다.

헤더 텍스트 크기의 기본값은 30px입니다. 이것은 시작하기에 좋은 안전한 크기입니다. 특히 일부 헤드라인에는 더 긴 사본이 필요하기 때문입니다. 그러나 나는 모니터 디스플레이의 증가하는 크기를 수용하기 위해 더 큰 헤더 크기에 끌리는 경향이 있습니다. 또한, 대부분의 고객은 "회사 소개" 및 "문의하기"와 같은 간단하고 짧은 헤드라인이 있는 웹사이트가 필요하며 글꼴 크기가 클수록 더 잘 보입니다. h1 헤더를 48px 이상으로 설정하고 싶습니다 .

헤더 문자 간격

문자 간격은 문자 사이의 수평 간격을 조정합니다. 머리글 문자 간격 값은 모든 머리글 수준(h1, h2, h3, h4, h5, h6), 큰따옴표 및 슬라이드 제목에 영향을 줍니다.

디자인 팁: 큰 텍스트의 경우 글자 간격을 줄이고 작은 텍스트의 경우 글자 간격을 늘리는 것은 좋은 디자인 기법입니다. 헤더와 관련하여 더 큰 글꼴 두께(굵게)가 있는 더 큰 텍스트는 -1px의 감소된 문자 간격으로 더 잘 보일 수 있습니다.

그러나 동일한 헤더를 대문자로 사용하면 문자 간격을 1-2px로 늘리는 것이 더 보기 좋아질 수 있습니다.

헤더 라인 높이

글자 간격 값과 마찬가지로 머리글 줄 높이 값은 모든 머리글 수준(h1, h2, h3, h4, h5, h6), 큰따옴표 및 슬라이드 제목에 영향을 줍니다. 더 큰 글꼴 크기 때문에 1em이 기본 설정입니다. 나는 1em에서 1.3em 사이의 줄 높이가 좋다고 생각합니다. 특히 헤더가 두 줄 이상으로 갈 때 그렇습니다.

헤더 글꼴 스타일

이 옵션을 사용하여 헤더의 글꼴 스타일을 변경합니다.

헤더 및 본문 글꼴

Divi의 기본 글꼴은 Open Sans 이지만 Divi 테마 사용자 지정 프로그램에는 선택할 수 있는 글꼴이 거의 100개에 달합니다! 이러한 내장 글꼴을 활용하고 테마에 가장 적합한 글꼴을 테스트하십시오.

디자인 팁: 글꼴 페어링에 대한 영감을 얻으려면 Google 글꼴을 함께 페어링하는 데 도움이 되는 fontpair.co를 확인하세요. Divi는 이러한 모든 글꼴을 기본적으로 지원하지는 않지만 Divi가 지원하는 글꼴을 검색하여 함께 잘 작동하는 쌍을 볼 수 있습니다.

바디링크 컬러

본문 링크 색상은 테마 강조 색상으로 상속됩니다. 하지만 여기에서 언제든지 변경할 수 있습니다.

디자인 팁: 원하는 경우 추가 CSS를 사용하여 모든 본문 링크에 밑줄 속성을 추가할 수 있습니다(게시물 끝 참조).

본문 텍스트 색상

여기에서 본문의 색상을 변경할 수 있습니다. New York Times 및 Smashing Magazine과 같은 인기 있는 블로그는 본문 색상에 #333333 을 사용합니다. 이것은 내 의견으로는 흰색 배경에서 더 잘 읽는 경향이 있습니다.

헤더 텍스트 색상

여기에서 헤더의 색상을 변경할 수 있습니다. 검은색 계열을 고수한다면 본문보다 조금 더 어둡게 하여 조금 더 돋보이게 할 것입니다. #121212 와 같은 것이 작동합니다.

배경

이 옵션은 테마의 배경을 설정합니다. Divi 테마의 경우 이 옵션은 실제로 상자 레이아웃에만 적용됩니다 . 여기에서 변경하지 않는 한 기본 배경색은 흰색(#ffffff)입니다. 원하는 경우 배경 이미지를 추가할 수도 있습니다.

레이아웃 설정은 여기까지입니다. 레이아웃이 준비되면 더 구체적인 요소를 볼 수 있습니다.

헤더 및 탐색

헤더와 탐색 메뉴는 아마도 테마에서 가장 중요한 요소일 것입니다. 이 섹션에는 원하는 거의 모든 종류의 헤더를 생성할 수 있는 많은 옵션이 있습니다.

헤더 형식

헤더 스타일

네 가지 헤더 스타일을 사용하면 단 한 번의 클릭으로 웹사이트를 완전히 새로운 모습으로 만들 수 있습니다. 이러한 스타일에는 중앙, 중앙 인라인 로고, 슬라이드인 및 전체 화면이 포함됩니다.

고유한 기능이 될 수 있는 수직 탐색을 사이트에 추가할 수도 있습니다. 그리고 스크롤할 때까지 탐색을 숨기도록 선택할 수 있습니다. 이것은 탐색 모음의 방해 없이 스크롤 없이 볼 수 있는 부분에 더 많은 콘텐츠를 강조 표시하려는 단일 페이지 사이트에 유용합니다.

기본 메뉴 모음

기본 메뉴 모음은 웹사이트 헤더 내부의 기본 메뉴입니다. 기본 메뉴가 표시되는 방식을 완전히 사용자 지정할 수 있습니다.

디자인 팁: Divi Theme Customizer로 메뉴를 완성하기 전에 메뉴 링크가 무엇인지 알아야 합니다. 반응형 메뉴의 스타일을 지정한다는 사실을 잊지 마십시오. 시간을 내어 메뉴가 모든 화면 크기에서 멋지게 보이는지 확인하십시오. 사용자 정의 도구 하단에 있는 장치 아이콘을 클릭하거나 단순히 브라우저 크기를 조정하면 됩니다. 관심이 있는 경우 여기에서 반응형 탐색을 수정하는 방법을 찾을 수 있습니다.

전체 너비 만들기

이렇게 하면 메뉴가 브라우저 창의 전체 너비로 확장됩니다.

로고 이미지 숨기기

원하는 경우 여기에서 메뉴에서 로고 이미지를 완전히 숨길 수 있습니다.

메뉴 높이

여기에서 메뉴 높이를 원하는 대로 변경할 수 있습니다. 단, 홈페이지 콘텐츠 대신 메뉴에 귀중한 공간을 낭비할 수 있으므로 메뉴 높이를 너무 크게 만들지 않도록 주의하십시오.

로고 최대 높이

여기에서 로고의 최대 너비 백분율을 늘리거나 줄여 더 크게 또는 더 작게 만들 수 있습니다.

텍스트 크기, 문자 간격, 글꼴, 글꼴 스타일, 텍스트 색상, 활성 링크 색상

이 옵션을 사용하면 원하는 방식으로 메뉴 링크를 사용자 정의할 수 있습니다.

배경색

이를 통해 기본 메뉴의 배경색을 변경할 수 있습니다.

디자인 팁: 머리글에 반투명(또는 완전히 투명한) 색상을 사용하는 경우 Divi는 자동으로 머리글을 아래 섹션 위로 겹칩니다. 이것은 꽤 멋진 효과를 만듭니다. 예를 들어, 이것은 투명한 배경과 그 바로 아래에 전폭 헤더가 있는 중앙 헤더 스타일입니다. Divi가 헤더 뒤에 잘 맞도록 배경 이미지를 자동으로 조정하는 방법을 확인하세요.

드롭다운 메뉴 설정

드롭다운 메뉴는 기본 메뉴의 스타일을 상속할 필요가 없습니다. 여기에서 드롭다운 메뉴에 대한 고유한 디자인을 만들 수 있습니다. 드롭다운 메뉴를 표시할 때 사용자 지정 애니메이션을 추가할 수도 있습니다.

보조 메뉴 모음

여기에서 제공된 옵션을 사용하여 보조 메뉴 모음을 사용자 지정할 수 있습니다.

활성화되면 보조 메뉴 표시줄이 브라우저 맨 위에 있는 기본 메뉴 표시줄 위에 있습니다. 이메일 주소, 소셜 미디어 링크 및 보조 메뉴를 포함한 추가 요소를 포함할 수 있습니다.

기본적으로 보조 메뉴를 입력하거나 헤더 요소 섹션에서 요소를 추가하지 않는 한 보조 메뉴는 숨겨진 상태로 유지됩니다. 메뉴를 보려면 테마 사용자 지정 프로그램을 저장하고 새로 고쳐야 할 수 있습니다.

고정 탐색 설정

고정 탐색은 사용자가 페이지를 아래로 스크롤할 때 메뉴가 "고정"되거나 브라우저 창 상단에 고정된 상태를 나타냅니다. 기본적으로 고정 탐색은 높이가 줄어들어 사이트 콘텐츠를 표시하기 위한 더 큰 표시 영역을 제공합니다.

디자인 팁: 고정 기본 메뉴 배경색을 반투명 색상으로 설정하여 그 뒤에 있는 일부 콘텐츠를 표시할 수도 있습니다. 이렇게 하면 방해가 덜하지만 여전히 액세스할 수 있습니다.

헤더 요소

헤더 요소는 헤더에 추가할 수 있는 추가 요소입니다. 이러한 요소에는 소셜 아이콘, 검색 아이콘, 전화번호 및 이메일이 포함됩니다. 검색 아이콘을 제외하고 이러한 모든 요소는 보조 메뉴에 표시됩니다.

소셜 아이콘

기본적으로 Divi는 Facebook, Twitter, Google+ 및 RSS 아이콘을 표시합니다. Divi의 테마 옵션에서 이러한 프로필을 편집할 수 있습니다.

보행인

기본적으로 바닥글 섹션은 콘텐츠로 채워지지 않는 한 숨겨져 있습니다. 또한 바닥글은 기본적으로 사이트 맨 아래에 표시되며 바닥글 크레딧 및 소셜 아이콘을 포함하는 하단 표시줄과 혼동되어서는 안 됩니다.

형세

여기에서 바닥글 섹션에 대해 5가지 레이아웃 중에서 선택할 수 있습니다.

기본적으로 #222222로 설정된 바닥글 배경색을 설정할 수도 있습니다.

디자인 팁: 이 섹션은 사이트의 모든 페이지에 표시됩니다(빈 페이지 템플릿을 선택하지 않는 한). 따라서 사이트의 모든 페이지와 일치하도록 색상을 더 중립적으로 만드는 것이 좋습니다.

위젯

바닥글 섹션에 위젯을 추가한 경우 여기에서 해당 위젯의 스타일을 지정할 수 있습니다.

위젯은 Divi에만 있는 것이 아닙니다. 이들은 wordpress에 내장되어 있으며 Appearance > Widgets 아래의 wordpress 대시보드에서 찾을 수 있습니다. 거기에서 위젯을 추가할 수 있는 4개의 바닥글 영역을 볼 수 있습니다. 이 섹션에 추가하는 모든 위젯은 바닥글 영역에 표시됩니다.

그러나 테마 커스터마이저(내가 가장 좋아하는 것 중 하나)를 떠나지 않고도 위젯 영역에 액세스할 수도 있습니다.

바닥글 요소

여기에서 보조 메뉴와 마찬가지로 하단 표시줄에 소셜 아이콘을 표시하도록 선택할 수 있습니다.

바닥글 메뉴

바닥글 메뉴가 있는 경우 여기에서 스타일을 지정할 수 있습니다.

하단 바

하단 표시줄은 웹사이트 맨 아래에 있으며 기본적으로 바닥글 크레딧과 소셜 아이콘을 표시합니다. 여기에서 소셜 아이콘 글꼴 크기 및 색상 변경을 포함하여 이러한 요소의 스타일을 사용자 정의할 수 있습니다.

바닥글 크레딧 편집

기본 바닥글 크레딧을 이 상자 안에 원하는 html로 바꿀 수도 있습니다.

버튼

이 섹션은 원하는 기본 버튼 스타일을 제어합니다.

버튼 스타일

여기에서 테마의 버튼 스타일을 사용자 지정할 수 있습니다. 여기에서 각 옵션에 대해 자세히 설명하지 않겠습니다. 버튼 스타일 지정 방법에 대한 자세한 내용은 버튼 모듈에 대한 설명서를 참조하세요.

텍스트 색상

기본적으로 버튼 색상은 일반 설정에서 설정한 테마 강조 색상으로 상속됩니다. 이것은 텍스트가 "dark"로 설정된 모듈에만 해당됩니다. 그리고 모듈 텍스트가 "light"로 설정되면 버튼은 흰색입니다. 그러나 버튼에 대한 사용자 정의 텍스트 색상을 설정하자마자 이 색상은 특정 모듈 내에서 어두운 텍스트 버전과 밝은 텍스트 버전 모두에 대해 설정됩니다.

디자인 팁: 테마 강조 색상이 버튼의 텍스트 색상을 설정하도록 하여 모듈에서 버튼의 어둡고 밝은 버전을 추가할 수 있는 기능을 유지할 수 있습니다.

버튼 호버 스타일

여기에서 버튼의 호버 상태 스타일을 사용자 지정할 수 있습니다.

사용자가 클릭하려는 것이 실제로 는 버튼임을 이해하는 것이 중요합니다. 호버 효과를 추가하면 마음에 이것을 굳히고 상호 작용하도록 장려합니다. 기본 설정 Divi는 밝은 배경을 추가하고 오른쪽에 화살표 아이콘에 애니메이션을 적용합니다. 그러나 원하는 대로 변경할 수 있습니다.

디자인 팁: 배경을 더 어둡거나 더 밝은 색상으로 변경하는 것은 버튼이 어떤 식으로든 변경되는지 확인하는 것만큼 중요하지 않습니다. 또한 글자 간격을 늘리거나 테두리 반경을 조정하여 버튼에 호버링 시 고유한 효과를 줄 수 있습니다.

블로그

우편

이 섹션은 단일 게시물 내 게시물 헤더 콘텐츠의 스타일을 변경합니다. 이것은 블로그 페이지 또는 블로그 모듈에서 블로그 발췌 부분의 모양을 변경하지 않습니다. 때때로 블로그 게시물 헤더는 사이트의 나머지 부분에 있는 헤더와 달라야 합니다. 여기에서 이러한 조정을 수행합니다.

Post Header Module을 사용하기로 선택한 경우 이러한 옵션은 유효하지 않습니다.

모바일 스타일

이 섹션을 좋아합니다. 여기에서 모바일 장치에서 사이트가 어떻게 보이는지 조정하고 실시간으로 결과를 볼 수 있습니다.

태블릿 및 휴대폰 스타일

태블릿 또는 전화를 선택할 수 있으며 사용자 지정 프로그램의 오른쪽에 있는 창이 장치에서 페이지가 어떻게 보이는지 보여주기 위해 자동으로 조정됩니다. 그런 다음 레이아웃의 일반 설정에서 했던 것처럼 섹션 높이, 행 높이, 본문 텍스트 크기 및 머리글 텍스트 크기를 조정할 수 있습니다.

디자인 팁 #1: 휴대폰 레이아웃에 대해 만들고 싶은 한 가지 사용자 지정은 행 높이를 "0"으로 설정하는 것입니다. 이것은 행 사이의 간격을 없애기 때문에 전화에서 스크롤할 때 더 나은 콘텐츠 흐름을 만듭니다.

디자인 팁 #2: 사이트에 적합한 글꼴 크기를 찾으십시오. 다음은 내 헤더에 대해 팔로우하고 싶은 좋은 것입니다.

데스크탑: 48px

태블릿: 40px

전화: 32px

모바일 메뉴

이것을 간과하지 마십시오. 그렇지 않으면 모바일 메뉴에 대해 완전히 고유한 헤더를 만드는 것을 놓칠 수 있습니다. 모바일 장치에서만 로고를 숨기고 배경 및 텍스트 색상을 변경할 수 있습니다.

색 구성표

이들은 빠른 솔루션에 편리할 수 있습니다. 그러나 나중에 테마 사용자 정의 도구에서 이러한 색상 중 일부를 변경할 계획이라면 색상 구성표를 사용하는 것이 좋습니다. 일단 설정되면 생성된 CSS에 !중요한 규칙이 포함되므로 사용자 정의 프로그램에서 이러한 색상을 재정의할 수 없습니다.

제 생각에는 이 설정을 기본값으로 두는 것이 가장 좋습니다.

메뉴 및 위젯

더 이상 워드프레스 대시보드에서 메뉴나 위젯을 맹목적으로 편집할 필요가 없습니다. 이제 이러한 항목을 추가 및 사용자 정의할 수 있으며 실시간으로 페이지에 표시되는 것을 볼 수 있습니다. 나는 편리함을 좋아한다!

정적 전면 페이지

기본적으로 WordPress는 첫 페이지(홈페이지)에 최신 게시물을 표시합니다. 이 섹션에서 원하는 정적 페이지로 변경할 수 있습니다. 또한 게시물 페이지(또는 블로그 페이지)를 지정할 수도 있습니다.

이 게시물을 쓰기 전까지는 몰랐지만 테마 사용자 지정 프로그램 내에서 실제로 새 페이지를 배포하여 사용자 지정 프로그램을 종료하지 않고도 프론트 페이지 또는 블로그 페이지로 사용할 수 있습니다.

추가 CSS

추가 CSS 섹션은 테마 설정을 최종적으로 수정할 수 있는 좋은 기회를 제공합니다. Divi Theme Customizer가 제어할 수 없는 스타일 변경 사항이 무엇이든 여기에서 일부 사용자 정의 CSS를 사용하여 수행할 수 있습니다. 사용자 정의 프로그램을 사용하면 CSS 변경 사항을 실시간으로 볼 수 있으므로 외부 스타일시트에서 앞뒤로 이동하는 것보다 훨씬 쉽게 테마에 필요한 조정을 수행할 수 있습니다.

추가 CSS 예제

예제 #1: 모든 헤더의 크기 조정

추가 CSS의 좋은 예는 나머지 헤더 태그에 대한 스타일 지정입니다. Divi를 사용하면 제목 글꼴에 대한 설정을 사용자 지정할 수 있지만 이는 h1 헤더에만 해당됩니다. 추가 CSS 상자를 사용하여 나머지 헤더 태그(h2, h3, h4 등...) 사용자 정의를 입력할 수 있습니다. 나는 16, 18, 21, 24, 36, 48 척도를 사용하고 싶습니다.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

예제 #2: 하단 단락 패딩과 본문 라인 높이 일치

본문 텍스트 line-height를 1.7em으로 설정하면 일관된 기준선 격자와 세로 리듬을 유지하기 위해 단락 사이의 아래쪽 패딩에 동일한 값을 설정할 수도 있습니다. 즉, 단락 사이의 거리는 줄 높이와 같습니다. 이렇게 하려면 다음을 추가하면 됩니다.

p { padding-bottom: 1.7em}

길이 값 em은 부모 글꼴 크기를 기반으로 하기 때문에 테마 사용자 지정 프로그램에서 기본 글꼴 크기를 다른 것으로 변경하면 1.7em 값이 그에 따라 조정됩니다.

예 #3: 링크에 밑줄 속성 추가

본문 링크에 밑줄 속성을 추가합니다.

a {
    text-decoration: underline;
}

다음 프로젝트를 위한 Divi 커스터마이저 설정 내보내기 및 가져오기

Divi 테마 사용자 정의 프로그램에는 사용자가 사용자 정의 프로그램 설정을 내보내거나 가져올 수 있는 이식성 옵션이 있습니다. 이는 개발자가 향후 프로젝트에 사용할 일종의 사용자 지정 설정 템플릿을 만들 수 있는 좋은 기회를 제공합니다.

먼저 웹 사이트를 구축할 때 어떤 사용자 지정을 만드는 경향이 있는지 파악하는 데 시간을 할애하는 것이 좋습니다. 이러한 설정을 식별하면 해당 사용자 지정을 Divi 테마 사용자 지정 프로그램에 입력한 다음 해당 설정을 내보내 다음 프로젝트를 시작할 수 있습니다. 이미 할 수 있는데 왜 같은 일을 계속 반복합니까? 또한 중요한 사용자 지정을 건너뛰지 않도록 하는 데 도움이 됩니다.

설정을 내보내려면 Divi Theme Customizer 상단의 이식성 아이콘을 클릭하십시오.

내보내기 파일 이름을 지정하고 "Divi Customizer 설정 내보내기" 버튼을 클릭합니다.

이제 Divi Theme Customizer에서 동일한 이식성 아이콘을 클릭하고 내보내기 대신 가져오기를 선택하여 이 .json 파일을 나중에 사용할 수 있습니다. 그런 다음 .json 파일을 업로드하고 "Divi Customizer 설정 가져오기"를 클릭하기만 하면 됩니다.

그리고 그게 다야.

Divi 커스터마이저 설정에는 무엇이 포함되어 있습니까?

사용자 정의 설정에는 기본적으로 처음 7개 섹션의 모든 것이 포함됩니다.

1. 일반 설정
2. 헤더 및 탐색
3. 보행인
4. 버튼
5. 블로그
6. 모바일 스타일
7. 색 구성표

마지막 4개 섹션은 WordPress 전용이며 다른 Divi 설치로 이어지지 않습니다. 이러한 섹션에는 다음이 포함됩니다.

1. 메뉴
2. 위젯
3. 정적 전면 페이지
4. 추가 CSS

추가 CSS는 이월되지 않는다는 점에 유의하는 것이 중요합니다. 다음 빌드에서 시간을 절약하기 위해 이러한 설정에 의존할 수 있습니다. 이 경우 해당 CSS로 하위 테마를 만들어 다음 프로젝트에서 사용자 지정자 설정에 추가할 수 있도록 제안합니다.

Divi 커스터마이저 스타일 저장 방법

Divi Customizer(Divi Options 및 Divi Builder와 함께)의 경우 Divi는 페이지 로드 시간을 줄이기 위해 브라우저에서 캐시할 수 있는 정적 CSS 리소스를 제공합니다. 즉, 스타일이 페이지에 인쇄되지 않고 별도의 정적 CSS 파일에 저장됩니다. 사용자 지정자 설정을 저장할 때마다 정적 CSS 파일이 업데이트됩니다. 여기에는 추가한 추가 CSS도 포함됩니다.

마무리 생각

Divi Theme Customizer에는 몇 가지 매우 강력한 옵션이 포함되어 있으며 사용자 정의 프로세스는 편리하고 즐겁게 작업할 수 있습니다. 그리고 이러한 옵션이 무엇을 할 수 있는지 더 깊이 이해하면 Divi로 웹 사이트를 구축하는 방법을 확실히 개선할 수 있습니다. 아직 설정하지 않았다면 시간을 내어 프로젝트에 대한 최적의 기준 설정이 무엇인지 탐색하고 이를 사용자 지정 프로그램에 연결하고 내보내기 파일을 만듭니다. 새 프로젝트를 시작할 때 이것이 제공하는 부스트(및 자신감)에 놀랄 것입니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!