Divi의 새로운 디자인 기능을 사용하여 아름다운 섹션 전환을 만드는 방법

이 Divi 튜토리얼에서는 내장된 Divi 옵션만 사용하여 아름다운 섹션 전환을 만드는 방법을 보여 드리겠습니다.

섹션은 웹사이트에서 공유하는 모든 콘텐츠의 기초입니다. 각 섹션은 챕터이며 한 섹션에서 다른 섹션으로 이동하는 것은 스토리텔링 프로세스의 일부입니다. 이 전환을 최대한 매끄럽게 하면 전달하려는 메시지가 강조됩니다. 이를 돕기 위해 다음 웹 사이트 프로젝트를 위한 아름다운 섹션 전환을 만드는 방법을 보여 드리겠습니다.

엿보기

다른 모든 섹션 전환을 개별적으로 살펴보기 전에 예상할 수 있는 사항을 살펴보겠습니다.

Divi의 새로운 디자인 기능을 사용하여 아름다운 섹션 전환을 만드는 방법

YouTube 채널 구독

섹션 재생성

모든 예제에서 사용할 두 섹션을 다시 만드는 것으로 시작하겠습니다. 이 두 섹션에서는 전환을 최대한 활용하기 위해 필요한 패딩을 사용했습니다. 그러나 높이가 다른 섹션을 사용하는 경우 섹션을 완벽하게 일치시키기 위해 사용되는 그라데이션 배경을 약간 조정해야 할 수도 있습니다.

첫 번째 섹션 만들기

첫 번째 표준 섹션을 만들고 전체 너비 행을 선택하여 시작합니다.

섹션 설정

디자인 탭의 간격 하위 범주에 추가할 수 있는 '300px'의 상단 및 하단 패딩이 필요합니다.

첫 번째 텍스트 모듈

그런 다음 전체 너비 행에 텍스트 모듈을 추가합니다. 표시할 텍스트를 입력하고 디자인 탭으로 이동합니다. 디자인 탭에서 텍스트 하위 범주에 대해 다음 설정을 사용합니다.

• 텍스트 글꼴: Comfortaa
• 텍스트 글꼴 크기: 50
• 텍스트 줄 높이: 1.7em
• 텍스트 방향: 중앙

두 번째 텍스트 모듈

두 번째 텍스트 모듈에 대해서도 동일하게 수행하되 대신 다음 설정을 사용하십시오.

• 텍스트 글꼴: Comfortaa
• 텍스트 글꼴 크기: 16
• 텍스트 줄 높이: 1.7em
• 텍스트 방향: 중앙

버튼 모듈

마지막으로 버튼 모듈도 추가할 것입니다. 디자인 탭에서 중앙 정렬을 선택하여 시작합니다.

그런 다음 버튼 하위 범주를 열고 '버튼에 사용자 정의 스타일 사용' 옵션을 활성화하고 버튼 텍스트 크기로 '20'을 선택합니다.

버튼 하위 범주에 있는 동안 버튼에 다음 그라데이션 배경을 사용합니다.

• 첫 번째 색상: #2b87da
• 두 번째 색상: #29c4a9
• 그라디언트 유형: 선형
• 기울기 방향: 162deg
• 시작 위치: 0%
• 최종 위치: 100%

두 번째 섹션 만들기

다른 표준 섹션을 추가하되 대신 3열 행을 선택하십시오.

섹션 설정

두 번째 섹션에서는 상단과 하단에도 '300px' 패딩을 사용합니다.

블러브 모듈

다음으로 행의 첫 번째 열에 Blurb 모듈을 추가합니다. 표시할 텍스트를 결정했으면 콘텐츠 탭을 아래로 스크롤하여 '아이콘 사용' 옵션을 활성화하고 아이콘을 선택합니다.

완료했으면 디자인 탭으로 이동하여 아이콘 하위 범주에 대해 다음 설정을 사용합니다.

• 아이콘 색상: #515151
• 이미지/아이콘 배치: 상단
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 55px

그런 다음 헤더 텍스트 하위 범주에 다음 설정이 적용되는지 확인합니다.

• 헤더 글꼴: Comfortaa
• 머리글 텍스트 정렬: 가운데
• 헤더 글꼴 크기: 18

마지막으로 Body Text 하위 범주에 대한 설정은 다음과 같습니다.

• 본문 글꼴: Comfortaa
• 본문 정렬: 가운데
• 본문 글꼴 크기: 14
• 바디 라인 높이: 1.7em

클론 블러브 모듈

Blurb 모듈을 만든 후에는 두 번 복제하고 행의 다른 두 열에 넣습니다.

1. 대각선 방향으로

이제 섹션을 만들었으므로 섹션 전환 추가를 시작할 차례입니다. 첫 번째 예제에서는 간단한 대각선으로 구성하는 방법을 보여줍니다.

첫 번째 섹션의 그라데이션 배경 설정

첫 번째 섹션의 설정을 열고 다음 그라데이션 배경을 추가합니다.

• 첫 번째 색상: #dddddd
• 두 번째 색상: #f7f7f7
• 그라디언트 유형: 선형
• 기울기 방향: 183deg
• 시작 위치: 85%
• 최종 위치: 70.05%

두 번째 섹션의 그라데이션 배경 설정

두 번째 섹션에는 대신 다음 그라데이션 배경 설정이 필요합니다.

• 첫 번째 색상: #f7f7f7
• 두 번째 색상: #dddddd
• 그라디언트 유형: 선형
• 기울기 방향: 183deg
• 시작 위치: 85%
• 최종 위치: 69.05%

두 번째 섹션의 상단 패딩 제거

이 예제에서 마지막으로 해야 할 일은 두 번째 섹션의 상단 패딩을 제거하는 것입니다.

2. 중간에 만나요

우리가 공유하고 싶은 다음 예는 두 개의 반대 그라데이션 배경이 사용되는 매우 우아한 예입니다. 이 효과를 사용하면 섹션이 서로 후속 조치되는 것처럼 느껴집니다.

첫 번째 섹션의 그라데이션 배경 설정

첫 번째 섹션의 경우 다음 그라데이션 배경 설정이 필요합니다.

• 첫 번째 색상: rgba(255,255,255,0)
• 두 번째 색상: rgba(224,43,32,0.07)
• 그라디언트 유형: 방사형
• 방사형 방향: 왼쪽 상단
• 시작 위치: 60%
• 최종 위치: 50%

두 번째 섹션의 그라데이션 배경 설정

두 번째 섹션에서는 다음과 같은 그라데이션 배경을 사용할 수 있습니다.

• 첫 번째 색상: rgba(255,255,255,0)
• 두 번째 색상: rgba(224,43,32,0.33)
• 그라디언트 유형: 방사형
• 방사형 방향: 오른쪽 하단
• 시작 위치: 58%
• 최종 위치: 50%

3. 융합

다음 예제는 나머지 예제와 약간 다릅니다. 아래 이미지에서 볼 수 있는 결과를 얻으려면 두 섹션 사이에 추가 섹션이 필요합니다.

첫 번째 섹션의 그라데이션 배경 설정

첫 번째 섹션의 경우 다음 그라데이션 배경이 필요합니다.

• 첫 번째 색상: rgba(12,113,195,0.19)
• 두 번째 색상: rgba(255,255,255,0.39)
• 그라디언트 유형: 방사형
• 방사형 방향: 왼쪽 하단
• 시작 위치: 50%
• 최종 위치: 50%

두 번째 섹션의 그라데이션 배경 설정

두 번째 섹션에서는 다음 그라데이션 배경 설정을 사용합니다.

• 첫 번째 색상: rgba(224,43,32,0.17)
• 두 번째 색상: rgba(255,255,255,0.39)
• 그라디언트 유형: 방사형
• 방사형 방향: 오른쪽 상단
• 시작 위치: 50%
• 최종 위치: 50%

사이에 새 표준 단면 추가

두 섹션에 그라디언트 배경을 추가했으면 그 사이에 섹션을 추가할 차례입니다.

새 섹션에 그라데이션 배경색 추가

이 새 섹션에는 다음 설정을 사용하여 그라디언트 배경도 필요합니다.

• 첫 번째 색상: rgba(12,113,195,0.19)
• 두 번째 색상: rgba(224,43,32,0.17)
• 그라디언트 유형: 선형
• 기울기 방향: 92deg
• 시작 위치: 43%
• 최종 위치: 62%

4. 역

그런 다음 다른 섹션만큼 눈에 띄지 않지만 섹션에 미묘한 터치를 추가할 수 있는 섹션 전환도 있습니다.

첫 번째 섹션의 그라데이션 배경 설정

첫 번째 섹션의 그라데이션 배경은 다음과 같습니다.

• 첫 번째 색상: #f2f2f2
• 두 번째 색상: rgba(104,153,193,0.58)
• 그라디언트 유형: 방사형
• 방사형 방향: 오른쪽 하단
• 시작 위치: 7.9%
• 최종 위치: 7.9%

두 번째 섹션의 그라데이션 배경 설정

그리고 두 번째 그라디언트 배경에는 다음 그라디언트 배경 설정이 필요합니다.

• 첫 번째 색상: rgba(104,153,193,0.58)
• 두 번째 색상: #f2f2f2
• 그라디언트 유형: 방사형
• 방사형 방향: 오른쪽 상단
• 시작 위치: 8%
• 최종 위치: 8%

5. 포인터

다섯 번째 예는 다른 것보다 조금 더 깔끔하고 미니멀해 보입니다. 포인터나 원(또는 둘 다)을 보고 두 가지 방식으로 전환을 인식할 수 있습니다.

첫 번째 섹션의 그라데이션 배경 설정

첫 번째 섹션에 다음 그라데이션 배경을 사용합니다.

• 첫 번째 색상: #f4f4f4
• 두 번째 색상: #ffffff
• 그라디언트 유형: 방사형
• 방사형 방향: 상단
• 시작 위치: 88%
• 최종 위치: 88.05%

두 번째 섹션의 그라데이션 배경 설정

마지막으로 다음 그라데이션 배경 설정을 두 번째 섹션에 적용합니다.

• 첫 번째 색상: rgba(43,135,218,0)
• 두 번째 색상: rgba(12,113,195,0.43)
• 그라디언트 유형: 방사형
• 방사형 방향: 하단
• 시작 위치: 87%
• 최종 위치: 87%

6. 퍼즐

마지막 예는 확실히 섹션이 함께 속하는 것처럼 느끼게 합니다.

첫 번째 섹션의 그라데이션 배경 설정

첫 번째 섹션의 설정을 열고 다음 그라데이션 배경을 사용합니다.

• 첫 번째 색상: rgba(160,181,193,0.46)
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 상단
• 시작 위치: 56.3%
• 최종 위치: 43%

두 번째 섹션의 그라데이션 배경 설정

그런 다음 두 번째 섹션에 대해 다음 그라데이션 배경 설정을 사용합니다.

• 첫 번째 색상: rgba(242,242,242,0)
• 두 번째 색상: rgba(160,181,193,0.46)
• 그라디언트 유형: 방사형
• 방사형 방향: 상단
• 시작 위치: 56%
• 최종 위치: 40%

첫 번째 섹션의 패딩 변경

두 섹션이 더 잘 맞도록 하기 위해 첫 번째 섹션의 위쪽 및 아래쪽 패딩을 '150px'로 변경합니다.

두 번째 섹션의 상단 패딩 제거

마지막으로 두 번째 섹션의 상단 패딩도 제거합니다.

마지막 생각들

섹션 전환은 다른 섹션과 그 목적을 연결하는 데 도움이 됩니다. 이 게시물에서는 Divi 내장 옵션만 사용하여 다시 만들 수 있는 6가지 예를 공유했습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 자유롭게 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

NikVector의 추천 이미지 / shutterstock.com