Divi의 내장 애니메이션 설정으로 방문자를 설득력 있게 페이지 아래로 이끄는 방법

영웅 섹션의 주요 목적 중 하나는 사람들이 페이지를 계속 아래로 스크롤하여 공유한 더 많은 콘텐츠와 정보를 발견하도록 설득하는 것입니다. Divi의 내장 애니메이션 옵션을 사용하여 페이지에 방문자를 설득력 있게 유도하는 데 도움이 되는 대화형 애니메이션을 페이지에 추가할 수 있습니다. 이 자습서에서는 방문자가 서비스 섹션으로 안내하는 화살표 아이콘을 사용하여 서비스 섹션까지 아래로 스크롤하도록 동기를 부여합니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.

데스크탑

이동하는

만들기 시작합시다!

YouTube 채널 구독

섹션 #1 추가

배경색

새 페이지를 만들고 일반 섹션을 추가하십시오. 섹션 설정을 열고 배경색을 변경합니다.

• 배경색: #0f0f0f

하단 디바이더

섹션에 하단 구분선을 추가하여 계속합니다.

• 구분선 스타일: 목록에서 찾기
• 디바이더 색상: #ffffff
• 디바이더 높이: 30px
• 디바이더 수평 반복: 10x(데스크톱), 4x(태블릿 및 휴대폰)

간격

사용자 정의 패딩 값도 추가하십시오.

• 상단 패딩: 269px(데스크톱), 100px(태블릿 및 휴대폰)
• 하단 패딩: 674px(데스크톱), 200px(태블릿 및 휴대폰)

행 추가

열 구조

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

사이징

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

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

텍스트 모듈 추가

콘텐츠 추가

이 행에서 필요한 유일한 모듈은 텍스트 모듈입니다. 계속해서 선택한 H1 콘텐츠를 추가하십시오.

제목 텍스트 설정

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

• 제목 글꼴: Didact Gothic
• 제목 글꼴 두께: 굵게
• 제목 텍스트 정렬: 가운데
• 제목 텍스트 색상: #ffffff
• 제목 텍스트 크기: 170px(데스크톱), 50px(태블릿 및 휴대폰)
• 표제 라인 높이: 0.8em

• 제목 텍스트 그림자 세로 길이: 1.5em
• 제목 텍스트 그림자 색상: rgba(0,0,0,0.11)

섹션 #2 추가

배경색

페이지에 두 번째 섹션을 추가하여 계속하십시오. 섹션 설정에서 배경색을 변경합니다.

• 배경색: #0f0f0f

탑 디바이더

섹션에 상단 구분선도 추가하십시오.

• 구분선 스타일: 목록에서 찾기
• 디바이더 색상: #ffffff
• 디바이더 높이: 30px
• 디바이더 수평 반복: 10x(데스크탑), 4x(태블릿 및 휴대폰)

간격

그리고 간격 설정에서 간격 값을 늘립니다.

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

행 추가

열 구조

계속해서 섹션에 다음 열 구조의 새 행을 추가합니다.

사이징

행 설정을 열고 크기 조정 설정으로 이동하여 몇 가지를 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 2

블러브 모듈 추가

아이콘 선택

첫 번째 열에서 필요한 첫 번째 모듈은 Blurb 모듈입니다. Blurb 모듈 요소에서 필요한 부분은 아이콘뿐입니다. 아래쪽을 가리키는 화살표 아이콘을 선택합니다.

아이콘 설정

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

• 아이콘 색상: #4ffcff
• 아이콘 배치: 상단
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 150px

간격

아이콘의 도달 범위를 늘리려면 약간의 음수 상단 여백을 추가해야 합니다. 이렇게 하면 Blurb 모듈이 이전 섹션과 겹칠 수 있고 두 섹션 간의 애니메이션이 원활하게 수행됩니다. 사용자 정의 여백을 보충하기 위해 사용자 정의 상단 패딩도 추가합니다. 이렇게 하면 아이콘이 이전과 똑같은 위치에 유지됩니다. 변경되는 유일한 것은 전체 모듈의 크기와 범위입니다.

• 상단 여백: -550px
• 상단 패딩: 550px

생기

마지막으로 다음 설정을 사용하여 Blurb 모듈에 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 아래로
• 애니메이션 지속 시간: 3000ms
• 애니메이션 지연: 1200ms
• 애니메이션 강도: 100%
• 애니메이션 시작 불투명도: 100%
• 애니메이션 속도 곡선: Ease-In-Out
• 이미지/아이콘 애니메이션: 애니메이션 없음

열 1에 텍스트 모듈 #1 추가

콘텐츠 추가

첫 번째 열에 필요한 다음 모듈은 텍스트 모듈입니다. 선택한 콘텐츠를 추가합니다.

텍스트 설정

텍스트 설정을 변경하여 계속하십시오.

• 텍스트 글꼴: Didact Gothic
• 텍스트 글꼴 두께: 굵게
• 텍스트 색상: rgba(255,255,255,0.03)
• 텍스트 크기: 350px
• 텍스트 방향: 중앙

열 1에 텍스트 모듈 #2 추가

콘텐츠 추가

선택한 H3 콘텐츠가 있는 첫 번째 열에 두 번째 텍스트 모듈을 추가합니다.

제목 텍스트 설정

그리고 디자인 탭에서 제목 텍스트 설정을 변경합니다.

• 제목 3 글꼴: Didact Gothic
• 제목 3 텍스트 정렬: 가운데
• 제목 3 텍스트 색상: #ffffff
• 제목 3 텍스트 크기: 40px(데스크톱), 30px(태블릿 및 휴대폰)
• 제목 3 글자 간격: -1px

열 1에 분배기 모듈 추가

시계

첫 번째 열에 필요한 다음 모듈은 Divider 모듈입니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

색상

디자인 탭에서 구분선 색상을 변경하여 계속 진행합니다.

• 색상: #ffffff

사이징

크기 설정도 일부 변경합니다.

• 폭: 59%
• 모듈 정렬: 중앙

생기

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

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 중앙
• 애니메이션 시간: 2000ms
• 애니메이션 강도: 10%
• 애니메이션 속도 곡선: Ease-In-Out

열 1에 텍스트 모듈 #3 추가

콘텐츠 추가

열 1에서 필요한 다음이자 마지막 모듈은 또 다른 텍스트 모듈입니다. 선택한 콘텐츠를 추가합니다.

텍스트 설정

텍스트 설정을 변경하여 계속하십시오.

• 텍스트 글꼴 두께: 라이트
• 텍스트 색상: #b7b7b7
• 텍스트 크기: 18px
• 텍스트 줄 높이: 1.8em
• 텍스트 방향: 중앙

생기

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

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 위로
• 애니메이션 강도: 20%
• 애니메이션 속도 곡선: Ease-In-Out

모듈 3회 복제 및 나머지 열에 중복 배치

열 1의 모든 모듈 수정을 완료했으므로 열 1의 모든 모듈을 3번 복제하고 나머지 열에 복제본을 배치할 수 있습니다.

모듈 콘텐츠 변경

중복 내용을 변경합니다.

중복의 디바이더 모듈에 애니메이션 지연 추가

각 디바이더 모듈 복제본에도 약간의 애니메이션 지연을 추가합니다.

• 2열의 디바이더 모듈: 400ms
• 3열의 분배기 모듈: 800ms
• 4열의 디바이더 모듈: 1200ms

텍스트 모듈 #3 중복에 애니메이션 지연 추가

각 열의 마지막 텍스트 모듈에 대해 동일한 작업을 수행합니다.

• 2열의 마지막 텍스트 모듈: 400ms
• 3열의 마지막 텍스트 모듈: 800ms
• 4열의 마지막 텍스트 모듈: 1200ms

광고 아이콘 #2 사용자 정의

아이콘 색상

또한 각 복제본에 대한 광고 아이콘의 색상과 애니메이션을 수정하고 있습니다. 열 2에서 Blurb 모듈을 열고 아이콘 색상을 변경합니다.

• 아이콘 색상: #ff6b86

생기

애니메이션 설정도 변경합니다.

• 애니메이션 유형: 슬라이드
• 애니메이션 방향: 아래로
• 애니메이션 시간: 2000ms
• 애니메이션 지연: 800ms
• 애니메이션 강도: 62%
• 애니메이션 시작 불투명도: 100%
• 이미지/아이콘 애니메이션: 애니메이션 없음

광고 아이콘 #3 사용자 정의

아이콘 색상

계속해서 3열에서 Blurb 모듈을 열고 아이콘 색상을 변경합니다.

• 아이콘 색상: #ffe500

생기

애니메이션 설정도 수정합니다.

• 애니메이션 유형: 슬라이드
• 애니메이션 방향: 아래로
• 애니메이션 지속 시간: 1000ms
• 애니메이션 지연: 600ms
• 애니메이션 강도: 69%
• 애니메이션 시작 불투명도: 100%
• 이미지/아이콘 애니메이션: 애니메이션 없음

광고 아이콘 사용자 정의 #4

아이콘 색상

열 4에서 마지막 Blurb 모듈을 열고 아이콘 색상을 변경합니다.

• 아이콘 색상: #00ff9d

생기

그리고 디자인 탭에서 애니메이션 설정을 변경하여 디자인을 완성합니다.

• 애니메이션 유형: 슬라이드
• 애니메이션 방향: 아래로
• 애니메이션 지속 시간: 3000ms
• 애니메이션 지연: 400ms
• 애니메이션 강도: 100%
• 애니메이션 시작 불투명도: 100%
• 이미지/아이콘 애니메이션: 애니메이션 없음

마지막 생각들

이 게시물에서는 Divi의 애니메이션 설정을 사용하여 방문자를 페이지 아래로 설득력 있게 유도하는 방법을 보여주었습니다. 기본 아이디어는 아이콘에 Blurb 모듈을 사용하고 영웅 섹션에 대한 애니메이션 도달 범위를 늘리는 것입니다. 이 접근 방식은 구축하고 원하는 만큼 창의적으로 만드는 모든 종류의 웹 사이트에서 사용할 수 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!