Divi의 스크롤 효과로 프로세스 단계를 점진적으로 플래시하는 방법

회사는 종종 프로세스 단계에 대한 유용한 설명을 제공하여 방문자에게 서비스에 대해 교육합니다. 예를 들어, 웹 디자인 에이전시는 웹 개발 과정을 보여주거나 빵집은 완벽한 컵케이크를 만들기 위한 단계를 보여줄 수 있습니다.

Divi를 사용하면 내장된 스크롤 효과를 사용하여 "프로세스의 단계"를 완전히 다른 수준으로 높일 수 있습니다. 이 자습서에서는 사용자가 페이지를 아래로 스크롤할 때 단계를 프로세스로 점진적으로 플래시하는 간단한 방법을 보여줍니다. 이렇게 하면 의도한 메시지를 창의적으로 강조하는 멋진 인터랙티브한 디자인을 얻을 수 있습니다.

엿보기

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 JSON 파일을 Divi Builder로 끌어다 놓기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi의 스크롤 효과로 프로세스 단계를 점진적으로 플래시하는 방법

스크롤 시 프로세스의 단계를 플래시하는 레이아웃을 만들려면 먼저 새 행을 추가해야 합니다.

4열 행 만들기

시작하려면 섹션에 4열 행을 추가하십시오.

열에 모듈/콘텐츠 추가를 시작하기 전에 행에 대한 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 2
• 최대 너비: 80%

여기까지는 충분히 간단합니다. 이제 콘텐츠를 추가해 보겠습니다.

각 열에 콘텐츠(단계) 추가

이 디자인은 프로세스의 단계를 깜박이는 스크롤 효과를 특징으로 하므로 각 열에는 단계 중 하나가 포함됩니다. 열 1에는 1단계를 설명하는 내용이 포함되고 열 2에는 2단계에 대한 내용이 포함됩니다.

열 1에 텍스트 모듈 추가

열 1에 새 텍스트 모듈을 추가합니다.

텍스트 모듈 콘텐츠 및 디자인

그런 다음 다음과 같이 텍스트 내용을 업데이트합니다.

디자인 탭을 열고 다음 설정을 업데이트합니다.

• 텍스트 글꼴: Lato
• 텍스트 글꼴 두께: 굵게
• 텍스트 텍스트 색상: #fc6d71
• 제목 2 글꼴: Oswald
• 제목 2 글꼴 두께: 가벼움
• 제목 2 텍스트 크기: 32px
• 제목 2 글자 간격: 1px
• 제목 2 줄 높이: 1.3em
• 여백: 0px 하단
• 패딩: 상단 10%, 하단 10%
• 테두리 너비: 1px
• 테두리 색상: rgba(166,166,166,0.16)

열 1에 이미지 모듈 추가

텍스트 모듈이 준비되면 1열의 텍스트 모듈 아래에 이미지 모듈을 추가합니다.

그런 다음 다음과 같이 이미지 여백을 업데이트합니다.

1열 콘텐츠 복사 및 붙여넣기

디자인 프로세스의 속도를 높이기 위해 다중 선택을 사용하여 열 1에서 두 개의 모듈을 선택한 다음 나머지 네 열 각각에 붙여넣을 수 있습니다.

중복 모듈에 대한 콘텐츠 업데이트

복제 모듈이 제자리에 있으면 돌아가서 프로세스의 4단계 각각을 반영하도록 텍스트 콘텐츠와 이미지를 업데이트합니다.

완료되면 디자인은 다음과 같아야 합니다.

각 열에 스크롤 효과 추가

이제 사용자가 페이지를 아래로 스크롤할 때 프로세스의 각 단계를 깜박이도록 스크롤 효과를 추가할 준비가 되었습니다. 각 모듈에 스크롤 효과를 추가하는 대신 콘텐츠의 모든 모듈에 효과가 적용되도록 각 열에 스크롤 효과를 추가합니다.

깜박이는 스크롤 효과를 만들기 위해 각 열에 페이드 인 및 아웃 스크롤 효과를 사용할 것입니다. 아이디어는 0% 불투명도로 시작하여 100% 불투명도로 계속해서 효과를 시작한 다음 다시 0%로 낮추는 것입니다.

1열 스크롤 효과

행 설정에서 열 1의 설정을 열고 다음 스크롤 효과를 추가합니다.

페이드 인 및 아웃 옵션 탭에서:

• 페이드 인 및 아웃 활성화: 예
• 시작 불투명도: 0%(20% 뷰포트에서)
• 중간 불투명도: 100%(25%-45% 뷰포트에서)
• 종료 불투명도: 0%(50% 뷰포트에서)

2열 스크롤 효과

열 2의 설정을 열고 다음 스크롤 효과를 추가합니다.

페이드 인 및 아웃 옵션 탭에서:

• 페이드 인 및 아웃 활성화: 예
• 시작 불투명도: 0%(35% 뷰포트에서)
• 중간 불투명도: 100%(40%-60% 뷰포트에서)
• 종료 불투명도: 0%(65% 뷰포트에서)

3열 스크롤 효과

4열 스크롤 효과

제목 추가

마지막으로 레이아웃에 제목을 추가할 수 있습니다. 이렇게 하려면 현재 행 아래에 새 1열 행을 추가하십시오.

그런 다음 다음 내용이 포함된 행에 텍스트 모듈을 추가합니다.

디자인 탭에서 다음을 업데이트합니다.

• 텍스트 정렬: Lato
• 제목 2 글꼴 두께: 가벼움
• 제목 2 글꼴 스타일: TT
• 제목 2 텍스트 색상: #fc6d71
• 제목 2 텍스트 크기: 70px(데스크톱), 40px(태블릿), 24px(휴대폰)
• 제목 2 글자 간격: 0.5em

최종 결과

라이브 페이지에서 결과를 보려면 섹션 위와 아래에 추가 공간을 추가하여 처음부터 끝까지 스크롤 효과를 확인해야 합니다. 이렇게 하는 한 가지 쉬운 방법은 섹션에 위쪽 및 아래쪽 여백을 추가하는 것입니다.

결과는 다음과 같습니다.

마지막 생각들

프로세스의 단계를 설명하는 것이 정적인 이미지나 그래픽으로 제한될 필요는 없습니다. Divi의 스크롤 효과를 사용하면 사용자가 페이지를 아래로 스크롤할 때 각 단계를 점진적으로 깜박임으로써 일러스트레이션에 생기를 불어넣을 수 있습니다. 그리고 각 열에 스크롤 효과가 추가되어 기능에 지장을 주지 않고 각 열의 모듈/내용을 쉽게 변경할 수 있습니다. 바라건대, 이것은 디자인 도구 상자에 추가하는 데 유용한 기술이 될 것입니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!