Divi의 애니메이션을 사용하여 콘텐츠를 보기에 표시하기

Divi의 새로운 애니메이션 옵션을 사용하여 멋진 페이지 섹션을 디자인하는 방법을 알려주는 이 6부 시리즈 중 5부에 오신 것을 환영합니다. 웹사이트에 애니메이션을 추가하는 기술을 보여주기 위해 라이브 데모 페이지의 다양한 섹션을 구축하는 방법을 안내해 드리겠습니다. 애니메이션 기능은 정말 재미있고 사용하기 쉽습니다. Visual Builder를 사용하면 모든 단계에서 창작물이 살아 움직이는 것을 볼 수 있습니다. 저와 함께 Divi 애니메이션의 힘을 살펴보세요.

지난 게시물에서 우리는 애니메이션 데모 페이지의 섹션 6을 만들었습니다. 밝은 색상, 빛나는 그림자 및 정확한 애니메이션으로 제품 다운로드를 표시하기 위한 레이아웃을 디자인하는 방법을 보여 주었습니다.

오늘은 롤 애니메이션 효과를 사용하여 콘텐츠에 실제와 같은 움직임을 추가하는 방법에 대한 완벽한 예인 애니메이션 데모 페이지의 섹션 7을 구축할 것입니다. 최종 제품은 페이지를 아래로 스크롤할 때 다른 각도에서 보기로 미끄러지고 회전하는 텍스트와 휴대폰의 인상을 줍니다.

이것은 내가 가장 좋아하는 애니메이션 중 하나입니다. 시작하자.

다음은 오늘의 게시물에서 구축할 디자인 및 애니메이션의 미리보기입니다.

디자인 요소 준비

이 튜토리얼에는 세 개의 이미지가 필요합니다. 처음 두 이미지 수직 이미지는 약 580×950이어야 10% 반시계 방향 각도로 회전해야 합니다. 가로 이미지는 제공된 열에 잘 맞도록 이미지 오른쪽에 약 300px의 추가 투명 배경 공간이 있는 1250×608(시계 반대 방향 각도로 10% 회전)이어야 합니다. 전화 이미지가 투명한 배경을 가진 png 형식인지 확인하십시오. 오늘 포스팅에 사용한 이미지들입니다.

세로형 전화 이미지 #1

세로형 전화 이미지 #2

세로형 전화 이미지 #3

Divi의 애니메이션을 사용하여 콘텐츠를 보기에 표시하기

YouTube 채널 구독

데모의 섹션 7 구축

빌드 프로세스를 시작하기 전에 시각적 빌더를 사용하여 생성할 섹션 레이아웃의 와이어프레임 보기를 살펴보겠습니다.

Visual Builder를 사용하여 레이아웃에 다른 일반 섹션을 추가하여 시작하겠습니다. 그런 다음 섹션에 3개의 열(1/4 1/4 1/2) 행을 추가합니다.

행 설정 업데이트

첫 번째 모듈을 추가하기 전에 행 설정으로 이동하여 다음을 업데이트합니다.

디자인 탭에서…

사용자 정의 너비 사용: 예
사용자 정의 너비: 91%
사용자 지정 거터 너비 사용: 예
거터 폭: 1

2열 맞춤 패딩: 상단 5%
3열 맞춤 패딩: 상단 24%

이미지 추가하기 #1

레이아웃의 첫 번째(맨 왼쪽) 열에서 이미지 모듈을 추가하고 다음과 같이 이미지 설정을 업데이트합니다.

콘텐츠 탭에서…

이미지 URL: [이미지 #1 업로드]

디자인 탭에서…

강제 전폭: 예

애니메이션 스타일: 롤
애니메이션 방향: 오른쪽
애니메이션 강도: 16%
애니메이션 시작 불투명도: 100%

설정 저장

구분선 및 행동 유도 모듈로 애니메이션 텍스트 추가하기

이제 구분선 모듈이 텍스트 위에 짧은 구분선을 추가하는 데 사용될 중간(1/4) 열로 이동합니다.

열에 구분선 모듈을 추가합니다.

그런 다음 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

디바이더 표시: 예

디자인 탭에서…

색상: #e0c48f
디바이더 무게: 3px
너비: 60px(기본값은 백분율이므로 이 값을 입력해야 함)
모듈 정렬: 기본값(왼쪽)
맞춤 패딩: 상단 80px, 왼쪽 80px

애니메이션 스타일: 접기
애니메이션 방향: 오른쪽
애니메이션 지속 시간: 1200ms
애니메이션 지연: 50ms
애니메이션 강도: 70%
애니메이션 시작 불투명도: 0%

설정 저장

디바이더 모듈 아래에 다음 설정으로 클릭 유도문안 모듈을 추가하십시오.

콘텐츠 탭에서…

제목: "1000단어"
버튼 텍스트: "자세히 알아보기"
내용: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id.”
링크: #
배경색 사용: 아니요

디자인 탭에서…

텍스트 색상: 어두운
텍스트 방향: 왼쪽
헤더 글꼴: Lato, 굵게(B) 대문자(TT)
헤더 글꼴 크기: 38px
헤더 텍스트 색상: #33454f
헤더 문자 간격: 0.2em
헤더 라인 높이: 1.4em

본문 글꼴: Lato
본문 글꼴 크기: 18px
본문 색상: #9b9b9b
바디 라인 높이: 1.8em

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 15px
버튼 텍스트 색상: #f2733c
버튼 배경색: rgba(225,225,225,0)
버튼 테두리 너비: 0px
버튼 문자 간격: 2px
버튼 글꼴: Lato, 굵게(B), 대문자(TT)
버튼 아이콘: 오른쪽 화살표
버튼에 대한 호버 시 아이콘만 표시: 아니오
버튼 호버 문자 간격: 0px

애니메이션 스타일: 접기
애니메이션 방향: 오른쪽
애니메이션 지속 시간: 1200ms
애니메이션 지연: 50ms
애니메이션 강도: 70%
애니메이션 시작 불투명도: 0%

설정 저장

이미지 추가하기 #2

다음으로 방금 생성한 행동 유도 모듈 ​​아래에 이미지 모듈을 추가합니다. 다음과 같이 이미지 설정을 업데이트합니다.

콘텐츠 탭에서…

이미지 URL: [이미지 #2 업로드]

디자인 탭에서…

강제 전폭: 예

애니메이션 스타일: 롤
애니메이션 방향: 왼쪽
애니메이션 강도: 13%
애니메이션 시작 불투명도: 100%

이미지 추가 #3

그것이 우리의 두 번째(가운데) 열에 대한 것입니다. 이제 세 번째(맨 오른쪽) 열에 이미지 #3을 추가해 보겠습니다. 이렇게 하려면 방금 추가한 이미지 모듈을 두 번째 열의 맨 아래에 복사/복사하여 세 번째 열에 붙여넣을 수 있습니다. 애니메이션 스타일이 동일하기 때문에 새 이미지 모듈에 대해 업데이트해야 하는 것은 실제 이미지 URL뿐입니다.

분배기 및 행동 유도 모듈 ​​복제 및 사용자 정의

세 번째 열의 복제된 이미지에 새 이미지 URL을 추가한 후 두 번째 열의 상단에서 생성한 Divider Module과 Call to Action Module을 모두 복사/복사하고 두 모듈을 이미지 아래에 끌어다 붙여넣습니다. 세 번째 열의 #3.

Divider 모듈의 경우 디자인 탭에서 애니메이션 방향 설정을 "왼쪽"으로 변경합니다.

새로운 클릭 유도문안 모듈의 경우 다음 설정을 업데이트하세요.

콘텐츠 탭에서…

제목: 새로운 건축 방식

디자인 탭에서…

맞춤 패딩: 오른쪽 80px, 아래쪽 80px, 왼쪽 80px

애니메이션 방향: 왼쪽

이제 최종 결과를 확인해 보겠습니다...

보너스: 쉽게 가져올 수 있도록 이 섹션을 다운로드하십시오.

보너스 특전으로 오늘의 튜토리얼에 포함된 섹션을 아래의 이메일 수신 동의 양식을 사용하여 얻을 수 있는 무료 다운로드로 패키징했습니다. 이메일을 입력하면 다운로드 버튼이 나타납니다. 이미 Divi 뉴스레터의 일부인 경우 "재구독"에 대해 걱정하지 마십시오. 이메일을 다시 입력해도 더 이상 이메일이 전송되거나 중복되지 않습니다. 그것은 단순히 다운로드를 표시합니다.

즐기다!

레이아웃 팩 다운로드

무료로 다운로드

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

다운로드

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

이 다운로드를 사용하려면 먼저 다운로드 폴더에서 Animation_Effects_Part_5.zip 이라는 압축 파일을 찾습니다. 압축을 풀어 다음 가져오기를 표시합니다.

애니메이션 효과 파트 5(섹션 1).json

애니메이션 효과 파트 5(섹션 2).json

WordPress 관리자에서 Divi > Divi 라이브러리 > 가져오기 및 내보내기로 이동합니다. 이식성 모달이 나타나면 가져오기 탭과 파일 선택 버튼을 클릭합니다.

원하는 json 파일을 선택하고 "Divi Builder 레이아웃 가져오기"를 클릭합니다. 가져오기가 완료되면 위 섹션 중 하나를 추가하려는 게시물이나 페이지로 이동합니다.

비주얼 빌더를 활성화하십시오. 위 섹션 중 하나를 추가하려는 페이지 부분으로 이동합니다. 새 섹션 추가 아이콘을 클릭하면 "라이브러리에서 추가" 옵션이 표시됩니다. 이 옵션을 선택하고 원하는 레이아웃을 선택합니다.

마무리

이 레이아웃은 해제하기가 ​​약간 까다롭습니다. 그러나 올바른 이미지와 적절한 간격을 확보하면 애니메이션이 전체 레이아웃을 멋지게 결합합니다. 전화 이미지의 실제와 같은 롤링은 페이지를 아래로 스크롤할 때 누군가가 흰색 테이블에서 우리 보기로 슬라이드하는 것처럼 보입니다. 이 롤 애니메이션의 예는 확실히 눈에 띄는 것입니다.

다가오는

다음 게시물에서는 6부로 시리즈를 마무리하겠습니다. 일부 사용자 정의 이미지와 CSS가 있는 슬라이드 애니메이션을 사용하여 요리 레시피를 제공하기 위한 멋진 레이아웃을 만드는 방법을 보여 드리겠습니다. 그러나 동일한 레이아웃을 조정하여 다양한 기능 항목에 사용할 수 있습니다.

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