다음 Divi 프로젝트를 위한 생생한 섹션 제목을 만드는 방법

우리는 대부분의 사람들이 자신이 만든 웹사이트를 독특하게 만드는 새로운 방법을 항상 찾고 있다는 것을 알고 있습니다. Divi를 사용하면 웹사이트를 다른 웹사이트와 차별화할 수 있는 여러 가지 방법이 있습니다. 오늘은 Divi의 기본 제공 옵션만을 사용하여 멋진 섹션 제목을 만드는 방법을 보여 드리겠습니다. 이 접근 방식은 멋진 디자인을 만들고 전체 페이지 구조를 유지하며 원활한 탐색을 유지하려는 경우에 적합합니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 달성하고자 하는 결과를 살펴보겠습니다.

만들기 시작합시다!

새 일반 섹션 추가

간격

새 페이지를 열고 Visual Builder로 전환하고 첫 번째 섹션을 추가하여 시작하십시오. 아직 행이나 모듈을 추가하지 않고 섹션 설정을 열고 패딩을 추가합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

새 행 추가

열 구조

다음 열 구조를 사용하여 행을 계속 추가합니다.

배경색

다음 행 설정을 열고 전체 행에 배경색을 추가합니다.

• 배경색: #f9f9f9

열 1 그라데이션 배경

그런 다음 첫 번째 열에 미묘한 그라데이션 배경을 추가합니다. 이렇게 하면 열 간에 섹션 제목이 겹칠 수 있습니다.

• 색상 1: #0031c4
• 색상 2: #00aeff
• 열 1 기울기 방향: 125deg

사이징

행의 간격도 변경하여 화면의 전체 너비를 차지하도록 합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

마지막으로 다양한 화면 크기에 따라 간격 설정을 변경합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 열 2 상단 패딩: 200px
• 2열 하단 패딩: 200px
• 2열 왼쪽 패딩: 350px(데스크톱), 50px(태블릿 및 휴대전화)
• 열 2 오른쪽 패딩: 50px

열 1에 섹션 제목 텍스트 모듈 추가

H2 텍스트 설정

이제 모든 행 설정이 완료되었으므로 모듈 추가를 시작할 수 있습니다. 첫 번째 열부터 시작하겠습니다. 여기에서 필요한 유일한 모듈은 텍스트 모듈입니다. 콘텐츠 상자에 H2 콘텐츠를 추가한 후 H2 텍스트 설정을 변경합니다.

• 제목 2 글꼴 두께: 매우 굵게
• 제목 2 글꼴 스타일: 대문자
• 제목 2 텍스트 정렬: 가운데
• 제목 2 텍스트 색상: #ffffff
• 제목 2 텍스트 크기: 150px
• 제목 2 줄 높이: 1.25em
• 제목 2 텍스트 그림자 세로 길이: -0.55em
• 제목 2 텍스트 그림자 색상: rgba(0,255,255,0.25)

간격

열 사이의 겹침은 데스크톱, 태블릿 및 휴대폰에서 다릅니다. 겹침을 만들기 위해 텍스트 모듈의 간격 설정을 약간 변경합니다.

• 상단 여백: 325px(데스크톱), 150px(태블릿 및 휴대폰)
• 하단 여백: 325px, -120px(태블릿), -110px(휴대폰)
• 오른쪽 여백: -100%(데스크톱), 0px(태블릿 및 휴대폰)

필터

마지막으로 블렌드 모드를 사용하여 표시되는 텍스트의 색상 차이를 만듭니다.

• 혼합 모드: 오버레이

열 2에 제목 텍스트 모듈 추가

H3 텍스트 설정

두 번째 열로 넘어 갑시다. 여기서 우리가 필요로 하는 첫 번째 모듈은 제목 텍스트 모듈입니다. H3 콘텐츠를 추가한 후 H3 텍스트 설정을 변경합니다.

• 제목 3 글꼴 두께: 반 굵게
• 제목 3 텍스트 색상: #00aeff
• 제목 3 텍스트 크기: 60px
• 제목 3 글자 간격: -3px

간격

다음에 아래쪽 여백을 추가하여 공간을 만듭니다.

• 하단 여백: 50px

2열에 디바이더 모듈 추가

디바이더 색상

두 번째로 필요한 모듈은 Divider 모듈입니다. 색상 설정을 열고 디자인의 색상 팔레트와 일치하도록 색상을 변경합니다.

• 디바이더 색상: #00ffff

사이징

그런 다음 크기 조정 설정을 수정합니다.

• 높이: 56px
• 폭: 75%

2열에 설명 텍스트 모듈 추가

텍스트 설정

다음 텍스트 설정을 사용하여 설명 텍스트 모듈을 추가하여 계속하십시오.

• 텍스트 크기: 17px
• 텍스트 줄 높이: 1.3em
• 텍스트 방향: 양쪽 맞춤

사이징

다음으로 크기 조정 설정을 변경합니다.

• 크기: 70%(데스크톱), 100%(태블릿 및 휴대폰)

간격

하단 여백도 사용하여 이 모듈 아래에 공간을 추가합니다.

• 하단 여백: 50px

2열에 버튼 모듈 추가

버튼 설정

이 칼럼에서 필요한 마지막 모듈은 버튼 모듈입니다. CTA를 추가한 후 버튼 설정을 변경합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 17px
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #00aeff
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 100px
• 버튼 문자 간격: -1px
• 글꼴 두께: 매우 굵게
• 글꼴 스타일: 대문자

간격

버튼에 더 깔끔한 모양과 느낌을 주기 위해 패딩도 추가합니다.

• 상단 패딩: 10px
• 하단 패딩: 10px
• 왼쪽 패딩: 30px
• 오른쪽 패딩: 30px

박스 섀도우

마지막으로 미묘한 상자 그림자를 사용하여 섹션에 약간의 깊이를 추가합니다.

• 상자 그림자 흐림 강도: 54px
• 상자 그림자 확산 강도: -8px
• 그림자 색상: rgba(0,0,0,0.3)

복제 섹션

모든 사본 변경

두 번째 섹션을 생성하려면 이미 생성한 섹션을 복제한 다음 모든 사본을 변경하기만 하면 됩니다.

행 배경색 변경

이 새 섹션에서는 다른 색상 팔레트를 사용할 것입니다. 행의 배경색을 변경하여 시작하십시오.

• 배경색: #efefef

열 1 그라데이션 배경 변경

그런 다음 다른 그라디언트 배경도 선택하십시오.

• 색상 1: #5f00a8
• 색상 2: #9000ff

섹션 제목 그림자 색상 변경

Text Shadow Color를 새로운 색상 팔레트와 일치시킵니다.

• 제목 2 텍스트 그림자 색상: rgba(255,0,255,0.24)

섹션 제목 간격 설정 변경

사용 중인 복사본의 길이에 따라 음수 오른쪽 여백을 가지고 놀아야 합니다.

• 오른쪽 여백: -110%(데스크톱)

제목 텍스트 모듈 텍스트 색상 변경

그런 다음 2열에서 제목 텍스트 모듈의 텍스트 색상을 변경합니다.

• 제목 3 텍스트 색상: #9000ff

구분선 색상 변경

마찬가지로 디바이더 색상을 디자인과 일치시키도록 합니다.

• 색상: #ff00ff

버튼 배경색 변경

마무리하려면 버튼 모듈의 배경색을 변경해야 합니다.

• 버튼 배경색: #9000ff

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 최종 결과를 살펴보겠습니다.

마지막 생각들

웹 디자인을 다른 웹 사이트와 차별화할 수 있는 방법은 여러 가지가 있습니다. 이 게시물에서 우리는 Divi의 기본 제공 옵션만을 사용하여 멋진 섹션 제목과 섹션을 만드는 방법을 보여주었습니다. 열 그라디언트 배경을 텍스트 모듈 겹침, 텍스트 그림자 및 혼합 모드와 결합하여 놀라운 최종 결과를 만들었습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!