Divi로 스크롤에 대해 이야기하는 방법
게시 됨: 2020-02-24귀하의 정보 페이지는 귀하의 웹사이트에서 가장 중요한 페이지 중 하나입니다. 그것은 사람들이 당신을 더 잘 알게 하고 그들이 다음 단계를 밟기에 편안한지 결정할 수 있도록 합니다. 정보 페이지에 스토리텔링을 포함할 수 있는 부드러운 방법을 찾고 있다면 이 튜토리얼을 좋아할 것입니다. Divi의 스크롤 효과를 사용하여 스크롤 시 부드러운 스토리텔링 전환을 만듭니다. 이야기의 한 부분이 사라지자 마자 다른 부분이 사라집니다. 이것은 방문자에게 흥미로운 이야기를 읽고 있다는 느낌을 줍니다. JSON 파일도 무료로 다운로드할 수 있습니다!
시작하겠습니다.
시사
튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.
데스크탑
이동하는
YouTube 채널 구독
스크롤 레이아웃에 대한 정보 페이지 스토리를 무료로 다운로드하십시오
스크롤 레이아웃에 대한 무료 정보 페이지 스토리를 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
1. 페이지의 첫 번째 전체 화면 섹션 만들기
새 섹션 추가
배경색
귀하의 정보 페이지에 첫 번째 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 배경색을 검정색으로 변경합니다.
- 배경색: #000000
사이징
크기 설정에서 최소 높이를 추가하여 섹션을 전체 화면으로 전환합니다.
- 최소 높이: 100vh
2. 애니메이션 행 추가
새 행 추가
열 구조
그런 다음 다음 열 구조를 사용하여 섹션에 새 행을 추가합니다.
사이징
행 설정을 열고 크기 설정을 수정하여 행이 전체 섹션 컨테이너의 너비를 차지하도록 합니다.
- 폭: 100%
- 최대 너비: 100%
간격
그런 다음 다양한 화면 크기에 걸쳐 왼쪽 및 오른쪽 패딩을 추가합니다.
- 왼쪽 패딩: 20vw(데스크톱), 10vw(태블릿 및 전화)
- 오른쪽 패딩: 20vw(데스크톱) 10vw(태블릿 및 전화)
생기
스토리텔링 효과를 높이기 위해 행에 페이드 애니메이션도 사용합니다.
- 애니메이션 스타일: 페이드
- 애니메이션 지속 시간: 3000ms
- 애니메이션 속도 곡선: Ease-In-Out
- 애니메이션 반복: 한 번
위치
마지막으로 위치 옵션을 수정하여 행이 섹션 컨테이너 내부의 중앙에 위치하도록 합니다.
- 위치: 절대
- 위치: 센터
3. 스크롤 효과가 있는 제목 삽입
열에 텍스트 모듈 #1 추가
H1 콘텐츠 추가
이 행에서 필요한 유일한 모듈은 일부 H1 콘텐츠가 포함된 텍스트 모듈입니다.
제목 1 텍스트 설정
모듈의 디자인 탭으로 이동하여 H1 텍스트 설정을 다음과 같이 변경합니다.
- 제목 글꼴: Nunito
- 제목 글꼴 두께: 반 굵게
- 제목 텍스트 색상: #ffffff
- 제목 텍스트 크기: 7vw(데스크톱), 9vw(태블릿), 11vw(전화)
수직 모션
미묘한 수직 애니메이션도 추가합니다.
- 수직 모션 활성화: 예
- 시작 오프셋: 0(50%에서)
- 중간 오프셋: 10(100%에서)
- 끝 오프셋: 10
페이드 인 및 아웃 스크롤 효과
페이드 인 및 아웃 효과와 함께.
- 페이드 인 및 아웃 활성화: 예
- 시작 불투명도: 100%
- 중간 불투명도: 100%(55%에서)
- 종료 불투명도: 0%(62%에서)
확대 및 축소 스크롤 효과
마지막으로 확대 및 축소 스크롤 효과도 사용합니다.
- 확장 및 축소 활성화: 예
- 시작 규모: 100%(40%에서)
- 중간 규모: 95%(74%에서)
- 엔딩 스케일: 90%
4. 전체 섹션을 한 번 복제하고 스크롤 효과가 있는 설명 텍스트 포함
콘텐츠 제목 변경 및 복사
첫 번째 섹션을 완료하면 완전히 복제할 수 있습니다. 복제 섹션 컨테이너 내에서 텍스트 모듈을 열고 일부 H2 사본을 사용하십시오.
텍스트 모듈 H2 텍스트 설정 수정
그에 따라 H2 텍스트 설정을 변경합니다.
- 제목 2 글꼴: Nunito
- 제목 2 글꼴 두께: 반 굵게
- 제목 2 텍스트 색상: #ffffff
- 제목 2 텍스트 크기: 5vw(데스크톱), 7vw(태블릿), 8vw(전화)
- 제목 2 줄 높이: 1em(데스크톱), 1.2em(태블릿 및 휴대폰)
열에 텍스트 모듈 #2 추가
콘텐츠 추가
다음으로, 선택한 설명 내용이 포함된 다른 텍스트 모듈을 열에 추가합니다.
텍스트 설정
다음과 같이 텍스트 모듈의 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Open Sans
- 텍스트 색상: #ffffff
- 텍스트 크기: 1vw(데스크톱), 2.5vw(태블릿), 3vw(전화)
- 텍스트 줄 높이: 3.1em(데스크탑), 2.5em(태블릿 및 휴대폰)
간격
상단 여백도 사용하십시오.
- 최고 마진: 8vw
페이드 인 및 아웃 스크롤 효과
그런 다음 고급 탭의 스크롤 효과로 이동하고 다음 페이드 인 및 아웃 설정을 사용합니다.
- 페이드 인 및 아웃 활성화: 예
- 시작 불투명도: 100%
- 중간 불투명도: 0%(31%에서)
- 끝 불투명도: 0%(35%에서)
확대 및 축소 스크롤 효과
확대 및 축소 효과도 추가하십시오.
- 확장 및 축소 활성화: 예
- 시작 규모: 100%(40%에서)
- 중간 규모: 95%(74%에서)
- 엔딩 스케일: 90%
5. 두 번째 섹션을 원하는 만큼 복제
이동하면서 콘텐츠 변경
페이지의 두 번째 섹션을 완료하면 정보 페이지의 줄거리에 따라 원하는 만큼 복제할 수 있습니다. 각 섹션의 내용을 변경해야 합니다.
6. CTA 섹션이 있는 전체 페이지
설명 텍스트 모듈 간격 변경
끝에 CTA 섹션으로 정보 페이지를 완성하십시오. 설명 텍스트 모듈을 열고 위쪽 및 아래쪽 여백을 수정합니다.
- 최고 마진: 4vw
- 하단 여백: 4vw
버튼 모듈 추가
사본 추가
그런 다음 선택한 사본과 함께 버튼 모듈도 추가하십시오.
버튼 설정
모듈의 디자인 탭으로 이동하여 다음과 같이 버튼 설정을 변경합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 1vw(데스크톱), 2.5vw(태블릿), 3.5vw(전화)
- 버튼 텍스트 색상: #000000
- 버튼 배경색: #FFFFFF
- 버튼 테두리 너비: 0px
- 버튼 테두리 반경: 100px
- 버튼 글꼴: Nunito
- 버튼 글꼴 두께: 굵게
간격
다양한 화면 크기에 사용자 지정 패딩 값을 추가하여 버튼 모듈 설정을 완료합니다.
- 상단 패딩: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
- 하단 패딩: 1vw(데스크톱), 2vw(태블릿), 3vw(전화)
- 왼쪽 패딩: 3vw(데스크톱), 6vw(태블릿), 8vw(전화)
- 오른쪽 패딩: 3vw(데스크톱), 6vw(태블릿), 8vw(전화)
시사
이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.
데스크탑
이동하는
마지막 생각들
이 게시물에서는 Divi의 기본 제공 스크롤 효과를 사용하여 정보 페이지에 스토리를 전달하는 방법을 보여주었습니다. 우리가 만든 효과는 연속 카피를 페이드 인 및 페이드 아웃할 수 있게 하여 방문자에게 그들이 이야기를 읽고 있다는 인상을 줍니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.
Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.