Divi로 디자인 요소에 충돌 애니메이션을 적용하는 방법

페이지의 디자인 요소에 애니메이션을 추가하면 확실히 참여도를 높이는 데 도움이 됩니다. Divi의 Visual Builder에는 많은 애니메이션 옵션이 있으며 사용이 매우 간단합니다. 그러나 이러한 애니메이션으로 창의력을 발휘하고 독특한 방식으로 사용할 수도 있습니다. 이 게시물에서는 Divi의 기본 제공 옵션만 사용하여 단계별로 다시 생성할 충돌 애니메이션의 세 가지 예를 처리합니다.

가자!

시사

자습서를 시작하기 전에 이 자습서에서 다시 만들 세 가지 예를 간단히 살펴보겠습니다.

예제 #1: 충돌하는 텍스트

예제 #2: 충돌하는 분배기

예제 #3: 격자 충돌

호버

YouTube 채널 구독

예제 #1 다시 만들기: 충돌하는 텍스트

전문 섹션 추가

구조

첫 번째 예제부터 시작하겠습니다! 새 페이지 또는 기존 페이지를 열고 다음 구조를 사용하여 새 전문 섹션을 추가하십시오.

사이징

모듈이나 행을 추가하지 않고 섹션 설정을 열고 크기 설정에서 '이 섹션을 전체 너비로 만들기' 옵션을 활성화합니다.

행 #1 추가

열 구조

전문 섹션에 행을 추가하여 계속하십시오.

사이징

행 설정을 열고 크기 조정 설정을 일부 변경합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

간격 설정에서 사용자 정의 패딩 값도 변경하십시오.

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

열 1에 텍스트 모듈 추가

콘텐츠 추가

계속해서 행의 첫 번째 열에 텍스트 모듈을 추가하고 일부 콘텐츠를 추가합니다.

제목 텍스트 설정

다음으로 제목 텍스트 설정을 변경합니다.

• 표제 글꼴: 몬세라트
• 제목 글꼴 두께: 가벼움
• 제목 텍스트 크기: 4.4vw(데스크톱), 8.2vw(태블릿), 40px(전화)
• 표제 라인 높이: 0.7em

열 1에 분배기 모듈 추가

시계

열 1에 필요한 두 번째 모듈은 분배기 모듈입니다. '디바이더 표시' 옵션을 활성화하여 디바이더가 표시되는지 확인하십시오.

• 디바이더 표시: 예

색상

디자인 탭으로 이동하여 구분선 색상을 변경합니다.

• 색상: #000000

사이징

디바이더의 너비도 줄입니다.

• 폭: 91%

간격

그리고 위쪽 여백을 추가하여 Divider 모듈과 텍스트 모듈 사이에 공간을 만듭니다.

• 상단 여백: 30px

생기

마지막으로 Divider 모듈에 미묘한 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽

열 2에 텍스트 모듈 추가

콘텐츠 추가

두 번째 열로 이동하여 선택한 콘텐츠와 함께 두 번째 텍스트 모듈을 추가합니다.

제목 텍스트 설정

다음으로 제목 텍스트 설정을 변경합니다.

• 표제 글꼴: 몬세라트
• 제목 글꼴 두께: 가벼움
• 제목 텍스트 색상: #3f46ff
• 제목 텍스트 크기: 3.8vw(데스크톱), 6.5vw(태블릿), 40px(전화)
• 표제 라인 높이: 0.8em

생기

그리고 이 모듈에도 애니메이션을 추가하십시오.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽
• 애니메이션 지연: 600ms
• 애니메이션 강도: 10%

행 #2 추가

열 구조

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

나머지 모듈 추가

이 새 행에 표시할 다른 모듈을 추가하고 필요에 따라 수정합니다.

예제 #2 재작성: 구분선 충돌

전문 섹션 추가

구조

다음 예제로 넘어갑니다! 다음 구조를 사용하여 새 전문 섹션을 추가합니다.

사이징

행이나 모듈을 추가하지 않고 섹션 설정을 열고 '이 섹션을 전체 너비로 만들기' 옵션을 활성화합니다.

• 이 섹션을 전체 너비로 만들기: 예

행 #1 추가

열 구조

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

간격

행 설정을 열고 사용자 지정 패딩 설정을 수정합니다.

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

텍스트 모듈 추가

콘텐츠 추가

다음으로 선택한 콘텐츠가 있는 행에 텍스트 모듈을 추가합니다.

제목 텍스트 설정

디자인 탭으로 이동하여 제목 텍스트 설정을 변경합니다.

• 표제 글꼴: 몬세라트
• 제목 글꼴 두께: 가벼움
• 제목 텍스트 크기: 70px(데스크톱), 50px(태블릿), 40px(전화)
• 표제 라인 높이: 0.8em

행 #2 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 수정합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 너비: 53%(데스크톱), 100%(태블릿 및 휴대폰)

간격

사용자 정의 패딩 값도 변경하십시오.

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

열 1에 분배기 모듈 추가

시계

행 설정 수정이 끝나면 첫 번째 열에 Divider Module을 추가하고 'Show Divider' 옵션을 활성화하여 구분선이 표시되는지 확인합니다.

• 디바이더 표시: 예

색상

다음으로 구분선 색상을 변경합니다.

• 디바이더 색상: #3f46ff

스타일

그리고 스타일 설정에서 구분선 스타일을 변경합니다.

• 디바이더 스타일: 더블

사이징

크기 설정에서도 디바이더 가중치를 늘립니다.

• 디바이더 무게: 8px

생기

마지막으로 Divider 모듈에 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 오른쪽

클론 분배기 모듈 및 열 2에 배치

Divider Module 설정 수정을 완료했으면 계속해서 모듈을 복제하십시오. 행의 두 번째 열에 복제본을 배치합니다.

애니메이션 변경

충돌 효과를 만들려면 복제 디바이더 모듈의 애니메이션 방향을 변경하십시오.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽

행 #3 추가

열 구조

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

나머지 모듈 추가

그리고 섹션 디자인을 끝내고 싶은 만큼의 모듈을 추가하세요.

예제 #3: 충돌 그리드 재생성

새 섹션 추가

간격

다음이자 마지막 예제로! 일반 섹션을 추가하고 설정을 엽니다. 간격 설정으로 이동하여 사용자 지정 패딩 값을 추가합니다.

• 상단 패딩: 300px
• 하단 패딩: 200px

행 #1 추가

열 구조

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

열에 이미지 모듈 추가

모양 이미지 오버레이 업로드

마우스 오른쪽 버튼을 클릭하여 다음 모양의 이미지 오버레이를 바탕 화면에 저장합니다.

모양이 지정된 이미지 오버레이를 저장했으면 Divi 웹사이트로 돌아가서 행에 이미지 모듈을 추가합니다. 다운로드 폴더에서 찾을 수 있는 모양 이미지 오버레이 파일을 업로드합니다.

그라데이션 배경

다음으로 모듈에 그라데이션 배경을 추가합니다.

• 색상 1: #aa2bff
• 색상 2: #09f7eb

조정

이미지 정렬도 변경합니다.

• 이미지 정렬: 중앙

사이징

그리고 크기 조정 설정에서 'Force Fullwidth' 옵션을 활성화합니다.

• 강제 전폭: 예

간격

모듈에도 약간의 사용자 정의 여백을 추가하십시오.

• 왼쪽 여백: 200px
• 오른쪽 여백: 200px

생기

마지막으로 모듈에 애니메이션을 추가합니다.

• 애니메이션 스타일: 확대/축소
• 애니메이션 방향: 중앙
• 애니메이션 지속 시간: 3000ms
• 애니메이션 강도: 100%

행 #2 추가

열 구조

두 번째 줄로 이동합니다. 다음 열 구조를 사용합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 약간 변경합니다.

• 사용자 정의 너비 사용: 예
• 단위: PX
• 사용자 정의 너비: 944px
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

열 1에 Blurb 모듈 추가

콘텐츠 추가

계속해서 첫 번째 열에 Blurb 모듈을 추가합니다. 선택한 내용을 입력합니다.

상

다음 아이콘을 선택합니다.

배경색

그리고 모듈에 배경색도 추가합니다.

• 배경색: rgba(255,255,255,0.83)

아이콘 설정

디자인 탭으로 이동하여 아이콘 설정을 변경합니다.

• 아이콘 색상: #000000
• 아이콘 배치: 상단
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 73px

제목 텍스트 설정

제목 텍스트 설정도 수정합니다.

• 제목 글꼴: Open Sans
• 제목 글꼴 두께: 반 굵게
• 제목 텍스트 정렬: 가운데
• 제목 텍스트 크기: 15px
• 제목 문자 간격: -1px
• 제목 줄 높이: 1.8em

사이징

크기 설정에서 콘텐츠 너비를 줄입니다.

• 콘텐츠 너비: 183px

간격

사용자 지정 상단 및 하단 패딩도 추가합니다.

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

박스 섀도우

Blurb 모듈에 미묘한 상자 그림자를 주어 계속합니다.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.3)

전환

고급 탭에서 전환 시간을 늘리십시오.

• 전환 시간: 600ms

Blurb 모듈을 8회 복제하고 각 나머지 열에 3개의 복제물 배치

이제 첫 번째 Blurb 모듈 수정이 완료되면 계속해서 8번 복제할 수 있습니다. 두 번째 열에 세 개의 복제물을 배치하고 세 번째 열에 세 개를 배치합니다. 이 튜토리얼의 다음 부분에서는 Blurb 모듈 각각에 고유한 변경 사항을 적용합니다. 이를 위해 아래 번호를 따릅니다.

Blurb 모듈 #1 수정

간격

첫 번째 Blurb 모듈을 열고 약간의 음수 상단 여백을 추가합니다.

• 상단 여백: -340px(데스크톱), 0px(태블릿 및 휴대폰)

호버 간격

마우스 오버 시 여백 값을 변경합니다.

• 상단 여백: -380px
• 하단 여백: 40px
• 왼쪽 여백: -40px
• 오른쪽 여백: 40px

둥근 모서리

모듈의 왼쪽 상단 모서리에 '30px'를 추가하여 계속 진행합니다.

생기

그리고 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽
• 애니메이션 지연: 200ms

블러브 모듈 #2 수정

배경색

두 번째 Blurb 모듈을 열고 배경색을 변경합니다.

• 배경색: rgba(255,255,255,0.93)

간격

모듈에 약간의 음수 상단 여백을 추가하여 계속하십시오.

• 상단 여백: -340px(데스크톱), 0px(태블릿 및 휴대폰)

호버 간격

마우스를 가져갈 때 이러한 여백 값을 변경합니다.

• 상단 여백: -380px
• 하단 여백: 40px

생기

그리고 모듈에 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽
• 애니메이션 지연: 400ms

블러브 모듈 #3 수정

간격

세 번째 Blurb 모듈로 이동합니다. 약간의 음수 상단 여백을 추가하십시오.

• 상단 여백: -340px(데스크톱), 0px(태블릿 및 휴대폰)

호버 간격

마우스 오버 시 여백 값을 수정합니다.

• 상단 여백: -380px
• 하단 여백: 40px
• 왼쪽 여백: 40px
• 오른쪽 여백: -40px

둥근 모서리

모듈의 오른쪽 상단에도 '30px'를 추가합니다.

생기

그리고 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽
• 애니메이션 지연: 600ms

블러브 모듈 #4 수정

배경색

네 번째 모듈로 이동합니다. 설정을 열고 배경색을 변경합니다.

• 배경색: rgba(255,255,255,0.93)

호버 간격

다음에 약간의 호버 여백 값을 추가하십시오.

• 왼쪽 여백: -40px
• 오른쪽 여백: 40px

생기

그리고 애니메이션도 추가합니다.

• 애니메이션 스타일: 페이드
• 애니메이션 지연: 800ms

블러브 모듈 #5 수정

생기

다섯 번째 모듈로 이동합니다. 여기서 해야 할 일은 애니메이션을 추가하는 것뿐입니다.

• 애니메이션 스타일: 페이드
• 애니메이션 지연: 1000ms

블러브 모듈 #6 수정

배경색

계속해서 여섯 번째 모듈을 열고 배경색을 변경합니다.

• 배경색: rgba(255,255,255,0.93)

호버 간격

호버에서도 간격 값을 변경합니다.

• 왼쪽 여백: 40px
• 오른쪽 여백: -40px

생기

그리고 애니메이션을 추가합니다.

• 애니메이션 스타일: 페이드
• 애니메이션 지연: 1200ms

블러브 모듈 #7 수정

호버 간격

일곱 번째 모듈로 이동합니다. 간격 설정에 약간의 호버 여백 값을 추가하십시오.

• 상단 여백: 40px
• 왼쪽 여백: -40px
• 오른쪽 여백: 40px

둥근 모서리

계속해서 모듈의 왼쪽 하단 모서리에 테두리 반경 '30px'를 추가합니다.

생기

그리고 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 오른쪽
• 애니메이션 지연: 1400ms

블러브 모듈 #8 수정

배경색

계속해서 여덟 번째 모듈을 열고 배경색을 변경합니다.

• 배경색: rgba(255,255,255,0.93)

호버 간격

다음 모듈에 마우스를 가져갈 때 사용자 정의 여백을 추가하십시오.

• 상단 여백: 40px

생기

이 Blurb 모듈에도 애니메이션을 추가하십시오.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 오른쪽
• 애니메이션 지연: 1600ms

블러브 모듈 #9 수정

호버 간격

아홉 번째이자 마지막 모듈입니다! 간격 설정으로 이동하여 사용자 지정 호버 여백 값을 추가합니다.

• 상단 여백: 40px
• 왼쪽 여백: 40px
• 오른쪽 여백: -40px

둥근 모서리

오른쪽 하단 모서리에도 테두리 반경의 '30px'를 추가합니다.

생기

그리고 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 오른쪽
• 애니메이션 지연: 1800ms

행 #1의 이미지 모듈에 음수 하단 여백 추가

이제 이 예제의 첫 번째 부분에서 만든 원과 그리드를 충돌시키기 위해 이미지 모듈(모양의 이미지 오버레이 포함)에 아래쪽 여백을 약간 줄 것입니다.

• 하단 여백: -520px

시사

이제 모든 단계를 거쳤으므로 달성한 결과를 최종적으로 살펴보겠습니다.

예제 #1: 충돌하는 분배기

예제 #2: 충돌하는 텍스트

예제 #3: 격자 충돌

호버

마지막 생각들

페이지에 애니메이션을 추가하면 방문자와 귀하 간의 상호 작용을 더 많이 만들 수 있습니다. 물론 Visual Builder에 있는 애니메이션 설정을 사용할 수도 있지만, 충돌 애니메이션을 디자인 요소에 적용하여 한 단계 더 나아가 놀라운 결과를 얻는 데 도움이 될 수도 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!