새로운 Divi 옵션과 함께 디바이더 모듈을 사용하는 10가지 재미있는 방법

오늘의 Divi 튜토리얼에서는 이전 업데이트에서 Divi에 추가된 새로운 옵션으로 무엇을 할 수 있는지 살짝 보여드리겠습니다. 더 정확하게; 이러한 새로운 변경 사항으로 Divider 모듈의 스타일을 지정할 수 있는 10가지 흥미로운 방법을 공유할 것입니다. 가능성은 정말 무궁무진하지만 이 게시물은 다음 프로젝트에 필요한 영감을 찾는 데 도움이 될 것입니다.

엿보기

이 튜토리얼의 가장 좋은 점 중 하나는 추가 CSS(또는 해당 문제에 대한 모든 종류의 코드)를 사용하지 않을 것이라는 사실입니다. 우리가 만들 모든 예제는 Divider 모듈에 포함된 옵션만 사용합니다. 단계별로 각각을 생성하는 방법을 보여주기 전에 구축할 디바이더를 간단히 살펴보겠습니다.

새로운 Divi 옵션과 함께 디바이더 모듈을 사용하는 10가지 재미있는 방법

YouTube 채널 구독

재사용 가능한 섹션 생성

가장 먼저 해야 할 일은 10개의 모든 예제에서 사용할 섹션을 만드는 것입니다. 물론 다른 상황에서도 구분선을 사용할 수 있지만 이 섹션을 먼저 작성하면 자신의 Divi Builder를 가지고 놀고 선호하는 것을 확인할 수 있습니다.

새 페이지 만들기

먼저 WordPress 대시보드에서 새 페이지를 만들고 Divi Builder를 활성화하고 Visual Builder를 엽니다.

3열 행으로 섹션 만들기

새 페이지에서 표준 섹션을 만들고 해당 표준 섹션 내에서 3열 행을 사용합니다. 섹션 배경색으로 '#f4f4f4'를 사용했습니다.

첫 번째 텍스트 모듈 추가

그런 다음 첫 번째 텍스트 모듈을 행의 첫 번째 열에 추가합니다. 설정을 열고 표시할 텍스트를 입력한 다음 디자인 탭으로 이동합니다. 디자인 탭에서 텍스트 하위 범주를 다음과 같이 변경합니다.

• 텍스트 글꼴: 랍스터
• 텍스트 글꼴 크기: 35
• 텍스트 색상: #000000
• 텍스트 줄 높이: 1.7em
• 텍스트 방향: 중앙

두 번째 텍스트 모듈 추가

첫 번째 텍스트 모듈을 추가했으면 바로 아래에 다른 모듈을 추가할 수 있습니다. 표시할 텍스트를 추가하고 디자인 탭으로 이동합니다. 디자인 탭에서 다음 수정 사항이 적용되는지 확인합니다.

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

텍스트 모듈 복제 및 다른 두 열에 배치

이 두 텍스트 모듈을 만든 후에는 행의 다른 두 열에도 넣을 수 있습니다.

시작하기 전에

Divi의 디바이더 모듈을 스타일링할 수 있는 10가지 재미있는 방법을 공유합니다. 각 예제에는 서로 조화를 이루는 세 개의 구분선이 있습니다. 대부분의 설정은 세 가지 모듈 모두에 대해 동일합니다. 먼저 각각에 대해 계산되는 설정을 보여주고 나머지 두 디바이더에 적용해야 하는 변경 사항을 보여줌으로써 계속할 것입니다. 따라서 첫 번째 구분선을 완료할 때마다 복제하여 다른 두 열에 배치합니다. 이 작업을 완료하면 다른 두 구분선을 수정할 수 있습니다.

참고: 각 구분선에 대해 콘텐츠 탭에서 '분할선 표시' 옵션을 활성화해야 합니다.

1. 흐릿한 삼각형

첫 번째 분배기 모듈 설정

콘텐츠 탭

콘텐츠 탭 내에서 다음 배경 설정을 사용할 것입니다.

• 첫 번째 색상: #e09900
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 선형
• 기울기 방향: 176deg
• 시작 위치: 13%
• 최종 위치: 31%

디자인 탭

디자인 탭으로 이동하여 크기 조정 하위 범주에 다음 설정이 적용되는지 확인합니다.

• 분배기 무게: 0
• 높이: 25px
• 폭: 35%
• 모듈 정렬: 중앙

동일한 탭을 아래로 스크롤하고 애니메이션 하위 범주에서 다음 애니메이션 설정을 사용합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 반복: 한 번
• 애니메이션 방향: 중앙
• 애니메이션 지속 시간: 1200ms
• 애니메이션 강도: 80%

두 번째 디바이더 모듈 설정

콘텐츠 탭

콘텐츠 탭에서 첫 번째 그라데이션 색상을 '#0c71c3'으로 변경하기만 하면 됩니다.

디자인 탭

다음으로, 애니메이션 하위 범주에 '250ms'의 애니메이션 지연을 추가해야 합니다.

세 번째 디바이더 모듈 설정

콘텐츠 탭

마지막 구분선의 첫 번째 그라데이션 색상을 '#8300e9'로 변경합니다.

디자인 탭

마지막 분할기의 애니메이션 하위 범주에 추가해야 하는 애니메이션 지연은 '500ms'입니다.

2. 컬러 섀도우

첫 번째 분배기 모듈 설정

콘텐츠 탭

콘텐츠 탭에서 다음 그라데이션 배경 설정을 사용합니다.

• 첫 번째 색상: #e09900
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 선형
• 기울기 방향: 180deg
• 시작 위치: 0%
• 최종 위치: 72%

디자인 탭

디자인 탭에서 가장 먼저 해야 할 일은 구분선의 색상을 '#000000'으로 변경하는 것입니다.

동일한 탭의 스타일 하위 범주 내에서 '단색'을 구분선 스타일로 사용하고 '상단'을 구분선 위치로 사용합니다.

계속 아래로 스크롤하여 크기 조정 하위 범주에 다음 변경 사항을 적용합니다.

• 분배기 무게: 2
• 높이: 20px
• 폭: 70%
• 모듈 정렬: 중앙

마지막으로 애니메이션 하위 범주에 대해 다음 옵션 설정을 사용합니다.

• 애니메이션 스타일: 바운스
• 애니메이션 반복: 한 번
• 애니메이션 방향: 중앙
• 애니메이션 시간: 2000ms

두 번째 디바이더 모듈 설정

콘텐츠 탭

그라디언트 배경의 첫 번째 그라디언트 색상을 '#0c71c3'으로 변경합니다.

디자인 탭

애니메이션 하위 범주 내에서 애니메이션 지연 옵션에 '350ms'를 추가합니다.

세 번째 디바이더 모듈 설정

콘텐츠 탭

세 번째 구분선도 동일하게 변경하되 대신 '#8300e9' 색상을 사용합니다.

디자인 탭

그리고 마지막으로 '700ms'의 애니메이션 지연을 추가합니다.

3. 그라데이션 시리즈

첫 번째 분배기 모듈 설정

콘텐츠 탭

첫 번째 구분선의 경우 다음 그라데이션 배경 설정을 사용합니다.

• 첫 번째 색상: #0970a0
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 선형
• 기울기 방향: 119deg
• 시작 위치: 0%
• 최종 위치: 86%

디자인 탭

디자인 탭에서 구분선 색상으로 '#FFFFFF'를 선택합니다.

그런 다음 Styles 하위 범주를 다음과 같이 변경합니다.

• 디바이더 스타일: 솔리드
• 디바이더 위치: 수직 중앙

동일한 탭에 있는 동안 다음 설정이 크기 조정 하위 범주에 적용되는지 확인합니다.

• 분배기 무게: 3
• 높이: 10px
• 폭: 25%
• 모듈 정렬: 왼쪽

Spacing 하위 범주 내의 아래쪽 패딩에도 '15px'를 추가합니다.

마지막으로 애니메이션 하위 범주에 대해 다음 설정을 사용합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 반복: 한 번
• 애니메이션 방향: 왼쪽
• 애니메이션 시간: 2000ms
• 애니메이션 강도: 100%

두 번째 디바이더 모듈 설정

콘텐츠 탭

두 번째 구분선에 대한 그라데이션 배경 설정은 약간 다릅니다.

• 첫 번째 색상: #0970a0
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 0%
• 최종 위치: 100%

디자인 탭

크기 조정 하위 범주 내에서 모듈 정렬을 가운데로 변경합니다.

마지막으로 애니메이션 방향도 중앙 집중화합니다.

세 번째 디바이더 모듈 설정

콘텐츠 탭

세 번째 구분선에는 다른 그라데이션 배경도 포함되어 있습니다.

• 첫 번째 색상: rgba(255,255,255,0)
• 두 번째 색상: #0970a0
• 그라디언트 유형: 선형
• 기울기 방향: 119deg
• 시작 위치: 14%
• 최종 위치: 100%

디자인 탭

두 번째 구분선에 대해 변경한 것과 동일한 변경을 수행하지만 가운데 대신 오른쪽을 사용합니다.

4. 롤링 서클

첫 번째 분배기 모듈 설정

콘텐츠 탭

다음 그라데이션 배경 설정을 적용하여 시작합니다.

• 첫 번째 색상: #e09900
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 20%
• 최종 위치: 21%

디자인 탭

디자인 탭에서 가장 먼저 해야 할 일은 구분선에 '#000000' 색상을 사용하는 것입니다.

그런 다음 구분선 스타일로 '단색'을 선택하고 구분선 위치로 '수직 중심'을 선택합니다.

계속해서 Sizing 하위 범주를 다음과 같이 변경합니다.

• 분배기 무게: 2
• 높이: 50px
• 폭: 40%
• 모듈 정렬: 중앙

마지막으로 애니메이션 하위 범주에는 다음 설정이 필요합니다.

• 애니메이션 스타일: 롤
• 애니메이션 반복: 한 번
• 애니메이션 방향: 중앙
• 애니메이션 지속 시간: 1500ms
• 애니메이션 지연: 850ms
• 애니메이션 강도: 60%

두 번째 디바이더 모듈 설정

콘텐츠 탭

첫 번째 그라데이션 색상을 '#0c71c3'으로 변경합니다.

디자인 탭

그리고 Animation Delay를 '0ms'로 변경합니다.

세 번째 디바이더 모듈 설정

콘텐츠 탭

마지막 구분선의 경우 첫 번째 그라데이션 배경색을 '#8300e9'로 변경하기만 하면 됩니다.

5. 브래킷

첫 번째 분배기 모듈 설정

콘텐츠 탭

다음 그라데이션 배경 설정을 사용합니다.

• 첫 번째 색상: #e0d1b1
• 두 번째 색상: #e09900
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 36%
• 최종 위치: 100%

디자인 탭

구분선의 색상이 섹션 배경색과 동일한지 확인하십시오. 이 경우 '#f4f4f4'입니다.

디자인 탭을 아래로 스크롤하여 '대시'를 구분선 스타일로 사용하고 '상단'을 구분선 위치로 사용합니다.

크기 조정 하위 범주에 다음 설정을 적용합니다.

• 분배기 무게: 100
• 높이: 18px
• 폭: 60%
• 모듈 정렬: 중앙

또한 상단, 오른쪽 및 왼쪽 패딩에 '15px'를 추가해야 합니다.

마지막으로 다음 애니메이션 설정을 사용합니다.

• 애니메이션 스타일: 확대/축소
• 애니메이션 반복: 한 번
• 애니메이션 방향: 중앙
• 애니메이션 지속 시간: 1000ms
• 애니메이션 강도: 80%

두 번째 디바이더 모듈 설정

콘텐츠 탭

그라데이션 배경의 색상을 '#87acc1'과 '#0c71c3'으로 변경합니다.

디자인 탭

다음으로 Animation Duration을 '1300ms'로, Animation Delay를 '250ms'로 변경합니다.

세 번째 디바이더 모듈 설정

콘텐츠 탭

세 번째 구분선에 사용되는 그라데이션 색상은 '#c9a4e8'과 '#8300e9'입니다.

디자인 탭

애니메이션 지속 시간을 '1300ms'로 변경하고 애니메이션 지연을 '500ms'로 변경합니다.

6. 더블 라인

첫 번째 분배기 모듈 설정

콘텐츠 탭

다음 그라데이션 배경 설정을 적용합니다.

• 첫 번째 색상: #e09900
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 선형
• 기울기 방향: 179deg
• 시작 위치: 0%
• 최종 위치: 45%

디자인 탭

구분선 색상으로 '#000000'을 선택합니다.

스타일 하위 범주 내에서 'Double'을 구분선 스타일로 사용하고 'Vertical Centered'를 구분선 위치로 사용합니다.

계속해서 크기 조정 하위 범주에 대해 다음 설정을 사용합니다.

• 분배기 무게: 5
• 높이: 25px
• 폭: 35%
• 모듈 정렬: 왼쪽

마지막으로 다음 애니메이션 설정을 사용합니다.

• 애니메이션 스타일: 롤
• 애니메이션 반복: 한 번
• 애니메이션 방향: 왼쪽
• 애니메이션 지속 시간: 1000ms
• 애니메이션 강도: 50%

두 번째 디바이더 모듈 설정

콘텐츠 탭

첫 번째 그라데이션 색상을 '#0c71c3'으로 변경합니다.

디자인 탭

다음으로 두 번째 구분선에 다른 애니메이션을 사용합니다.

• 애니메이션 스타일: 페이드
• 애니메이션 반복: 한 번
• 애니메이션 지속 시간: 1400ms

세 번째 디바이더 모듈 설정

콘텐츠 탭

세 번째 구분선의 경우 첫 번째 그라데이션 배경색으로 '#8300e9'를 사용합니다.

디자인 탭

디자인 탭에서 변경해야 할 유일한 것은 애니메이션 방향이며, 이 경우에는 '오른쪽'입니다.

7. 다리

첫 번째 분배기 모듈 설정

콘텐츠 탭

배경에 '#8300e9'를 할당하여 시작합니다.

디자인 탭

섹션 배경색을 구분선 색상으로 사용하여 계속 진행합니다(이 경우 '#f4f4f4').

다음으로 '점선'을 구분선 스타일로 사용하고 '상단'을 구분선 위치로 사용합니다.

크기 조정 하위 범주 내에서 다음 설정을 사용합니다.

• 분배기 무게: 15
• 높이: 7px
• 폭: 70%
• 모듈 정렬: 왼쪽

사용자 지정 패딩도 필요합니다.

• 상단 패딩: 7px
• 오른쪽 패딩: -7px
• 왼쪽 패딩: -7px

우리가 사용할 애니메이션의 설정은 다음과 같습니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 반복: 한 번
• 애니메이션 방향: 왼쪽
• 애니메이션 지속 시간: 800ms
• 애니메이션 지연: 400ms
• 애니메이션 강도: 30%

두 번째 디바이더 모듈 설정

콘텐츠 탭

두 번째 구분선의 경우 배경을 '#0c71c3'으로 변경합니다.

디자인 탭

다른 애니메이션도 사용할 것입니다.

• 애니메이션 스타일: 확대/축소
• 애니메이션 반복: 한 번
• 애니메이션 방향: 중앙
• 애니메이션 지속 시간: 800ms
• 애니메이션 강도: 30%

세 번째 디바이더 모듈 설정

콘텐츠 탭

세 번째 구분선은 '#8300e9'를 배경색으로 사용합니다.

디자인 탭

세 번째 구분선의 애니메이션도 약간 다릅니다.

• 애니메이션 스타일: 확대/축소
• 애니메이션 반복: 한 번
• 애니메이션 방향: 오른쪽
• 애니메이션 지속 시간: 800ms
• 애니메이션 지연: 400ms
• 애니메이션 강도: 30%

8. 우아함

첫 번째 분배기 모듈 설정

콘텐츠 탭

첫 번째 Divider에 다음 그라디언트 배경을 추가하여 시작합니다.

• 첫 번째 색상: #000000
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 20%
• 최종 위치: 20%

디자인 탭

구분선에 '#8300e9' 색상을 사용합니다.

다음으로 '점선'을 구분선 스타일'로 사용하고 '수직 중심'을 구분선 위치로 사용합니다.

'40px'의 상단 패딩도 필요합니다.

그리고 다음 설정이 있는 애니메이션:

• 애니메이션 스타일: 바운스
• 애니메이션 반복: 한 번
• 애니메이션 방향: 아래로
• 애니메이션 지속 시간: 1000ms

두 번째 디바이더 모듈 설정

디자인 탭

두 번째 구분선의 색상을 '#0c71c3'으로 변경합니다.

애니메이션에도 몇 가지 변경 사항이 필요합니다.

• 애니메이션 방향: 중앙
• 애니메이션 지속 시간 1500ms

세 번째 디바이더 모듈 설정

디자인 탭

세 번째 구분선은 '#8300e9'를 색상으로 사용합니다.

그리고 애니메이션 방향으로 'Up'이 있습니다.

9. 미묘함

첫 번째 분배기 모듈 설정

콘텐츠 탭

그라데이션 배경에 대해 다음 설정을 선택합니다.

• 첫 번째 색상: #8300e9
• 두 번째 색상: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 0%
• 최종 위치: 38%

디자인 탭

크기 조정 하위 범주 내에서 다음 설정이 필요합니다.

• 분배기 무게: 0
• 높이: 4px
• 폭: 100%

마지막으로 사용할 애니메이션에는 다음 설정이 있습니다.

• 애니메이션 스타일: 바운스
• 애니메이션 반복: 한 번
• 애니메이션 방향: 위로
• 애니메이션 지속 시간 1800ms

두 번째 디바이더 모듈 설정

콘텐츠 탭

두 번째 구분선의 경우 첫 번째 그라데이션 배경색을 '#0c71c3'으로 변경합니다.

세 번째 디바이더 모듈 설정

콘텐츠 탭

세 번째 구분선도 동일하게 변경하되 '#8300e9' 보라색을 대신 사용합니다.

10. 글로우

첫 번째 분배기 모듈 설정

콘텐츠 탭

마지막 분할기 시리즈에 대해 다음 그라데이션 배경 설정을 사용합니다.

• 첫 번째 색상:
• 두 번째 색상:
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 0%
• 최종 위치: 38%

디자인 탭

섹션 배경색도 구분선 색상으로 선택합니다. 이 경우에는 '#f4f4f4'입니다.

다음으로 'Dashed'를 구분선 스타일로 사용하고 'Vertical Centered'를 구분선 위치로 사용합니다.

크기 조정 하위 범주 내에서 다음 설정을 사용합니다.

• 분배기 무게: 70
• 높이: 20px
• 폭: 100%

마지막으로 다음 옵션과 함께 애니메이션을 사용할 것입니다.

• 애니메이션 스타일: 페이드
• 애니메이션 반복: 한 번
• 애니메이션 지속 시간: 1800ms
• 애니메이션 지연: 800ms

두 번째 디바이더 모듈 설정

콘텐츠 탭

두 번째 구분선의 경우 두 번째 그라데이션 배경색을 '#0c71c3'으로 변경합니다.

디자인 탭

그리고 '250ms'의 애니메이션 지연을 추가합니다.

세 번째 디바이더 모듈 설정

콘텐츠 탭

마지막 구분선의 경우 두 번째 그라데이션 배경색을 '#8300e9'로 변경합니다.

디자인 탭

그리고 Animation Delay를 '0ms'로 설정하여 마무리합니다.

마지막 생각들

새로운 Divi 옵션을 사용하면 각 모듈에 내장된 설정으로 많은 새롭고 창의적인 작업이 가능합니다. 이 게시물에서는 이러한 옵션이 Divider Module을 통해 설계를 향상시키는 데 어떻게 도움이 되는지 구체적으로 보여주었습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

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

VikiVector의 추천 이미지 / shutterstock.com