Divi Theme – 레이아웃 & Typography 설정

Divi Theme – 레이아웃 & Typography 설정

웹사이트 레이아웃 및 Typography 설정

웹 사이트의 레이아웃 및 타이포그래피(Typography) 사용자 지정을 시작하려면 먼저 워드프레스 대시보드 내에서 Divi > 테마 커스터마이저를 클릭합니다. 다음으로 “일반 설정” 패널을 찾습니다. 패널을 클릭하여 관련 설정을 열고 시작하십시오. 일반 설정 패널에는 레이아웃 설정, 활판기술 및 배경 등이 있습니다.

참고: 이 메뉴얼에선 “활판기술”을 타이포그래피라고 부르겠습니다.

일반 설정

레이아웃 설정

레이아웃 패널은 웹사이트의 다양한 크기 및 간격 옵션을 조정할 수 있는 곳입니다. 여기에서 열, 행 및 섹션 사이의 간격을 늘리거나 줄이고 사이드바의 크기를 조정할 수 있습니다. 이 패널 내에서 “박스 레이아웃”모드를 활성화할 수도 있습니다.

레이아웃 설정

박스 레이아웃 활성화

여기에서 사이트의 콘텐츠를 구성하고 사용자 정의할 수 있는 배경을 표시하는 상자 레이아웃으로 사이트를 변경할 수 있습니다.

웹사이트 내용 너비

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

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

웹사이트 열 간격

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

선택적 값은 1에서 4까지입니다.

1은 열 사이의 여백이 0임을 나타냅니다.

2는 열 사이의 3 % 오른쪽 여백을 나타냅니다.

3은 열 사이의 5.5 % 오른쪽 여백을 나타냅니다.

4는 열 사이의 8 % 오른쪽 여백을 나타냅니다.

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

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

섹션 및 행 높이

이 옵션은 각 섹션과 행의 세로 간격 (위쪽 및 아래쪽 패딩)을 조정합니다.

테마 강조 색상

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

타이포그래피

타이포그래피 패널은 전체 웹 사이트에서 텍스트의 기본 모양을 조정할 수 있는 곳입니다. 사이트의 모든 영역에 비례적으로 반영되는 본문 글꼴 및 헤더 글꼴의 크기를 조정할 수 있습니다. 색상, 줄 높이, 문자 간격 및 글꼴 스타일을 조정할 수 있습니다. 마지막으로 각각에 적용할 수십 가지 글꼴 중에서 선택할 수도 있습니다.

타이포그래피 설정

본문 문구 사이즈

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

바디 줄 높이

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

헤더 문구 사이즈

Divi를 사용하면 여기에서 기본 헤더 텍스트 크기를 설정할 수 있습니다. 이것은 Fullwidth Header Module 제목과 같은 Divi의 요소에 영향을 미칩니다.

헤더 글자 간격

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

헤더 줄 높이

문자 간격 값과 마찬가지로 헤더 행 높이 값은 모든 헤더 레벨 (h1, h2, h3, h4, h5, h6), 인용구 및 슬라이드 제목에 영향을줍니다. 글꼴 크기가 더 크기 때문에 1em이 기본 설정입니다.

헤더 폰트 스타일

이 옵션을 사용하여 헤더의 글꼴 스타일을 변경하십시오.

헤더 및 본문 글꼴

Divi의 기본 글꼴은 Open Sans이지만 Divi Theme Customizer에는 선택할 수있는 거의 100 개의 글꼴이 있습니다! 이러한 기본 제공 글꼴을 활용하고 테마에 가장 적합한 글꼴을 테스트하십시오.

본문 링크 색상

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

본문 색상

여기에서 본문 텍스트의 색상을 변경할 수 있습니다.

헤더 문구 색상

여기에서 헤더의 색상을 변경할 수 있습니다.

배경

배경 패널을 사용하면 테마의 배경색을 조정할 수 있을뿐만 아니라 사용자 정의 배경 이미지를 업로드하고 페이지에서 위치를 조정할 수 있습니다. 배경 이미지와 색상은 앞에서 언급한 레이아웃 패널의 박스형 레이아웃 설정과 함께 사용하면 잘 작동합니다.

배경 설정

원문: https://www.elegantthemes.com/documentation/divi/customizer-layout/

코멘트 제출