Divi의 애니메이션을 사용하여 슬라이딩 이미지로 콘텐츠 펼치기

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

시리즈의 1부에서는 애니메이션 데모 페이지의 처음 두 섹션을 만들었습니다. 첫 번째 섹션의 헤더 디자인과 애니메이션은 전체 화면 표준 섹션 내에서 텍스트 모듈의 요소를 애니메이션하는 독특한 방법을 보여주었습니다. 두 번째 섹션을 구축하면서 우리는 랜딩 페이지의 콘텐츠를 매력적인 방식으로 소개하는 데 쉽게 사용할 수 있는 미묘하고 조화로운 애니메이션을 콘텐츠 행에 통합하는 방법을 발견했습니다.

오늘날 우리는 페이지를 스크롤할 때 애니메이션을 효과적이고 창의적으로 사용하는 섹션 레이아웃을 디자인하기 위한 여정을 계속하고 있습니다. 우리는 Divi의 애니메이션 기능의 힘을 보여주는 라이브 데모 페이지의 세 번째와 네 번째 섹션을 만들 것입니다. 이 두 섹션에는 제품이나 서비스를 소개하기 위해 자신의 프로젝트에 쉽게 채택할 수 있는 레이아웃이 있습니다.

시작하자.

다음은 오늘의 게시물에서 구축할 내용을 살짝 엿본 것입니다.

섹션 3

섹션 4

디자인 요소 준비

이미지 준비

세 번째 섹션의 경우 두 개의 이미지가 필요합니다. 첫 번째는 약 880×600이고 두 번째는 약 790×880이어야 합니다. 이 이미지 크기는 정확하지 않아도 됩니다. 아이디어를 제공하기 위해 이 치수를 포함시켰을 뿐입니다.

네 번째 섹션을 만들 때 600×400 크기의 두 개의 이미지도 생성됩니다.

비주얼 빌더 사용

여기에 고급 코드가 필요하지 않습니다. 이 시리즈의 1부에서 만든 페이지의 다음 두 섹션을 디자인하기 위해 Visual Builder만 사용할 것입니다. 페이지가 이미 설정되었으므로 사용할 준비가 된 것입니다.

Divi의 애니메이션을 사용하여 슬라이딩 이미지로 콘텐츠 펼치기

YouTube 채널 구독

데모의 섹션 3 구축

섹션 3은 이미지와 함께 클릭 유도문안 모듈을 디자인하고 애니메이션하는 방법에 대한 훌륭한 예입니다.

뛰어들어봅시다.

Visual Builder를 사용하여 2열 행이 있는 일반 섹션을 추가합니다. 왼쪽 열에 이미지 모듈을 추가합니다.

다음과 같이 이미지 설정을 업데이트합니다.

콘텐츠 탭에서…

이미지 URL: [880×600 이미지 삽입]

디자인 탭에서…
강제 전폭: 예
애니메이션 스타일: 슬라이드
애니메이션 방향: 왼쪽
애니메이션 강도: 20%
애니메이션 시작 불투명도: 100%

설정 저장

디바이더 모듈 추가

오른쪽 열에서는 구분자 모듈과 행동 유도 모듈을 사용하여 콘텐츠를 선보일 것입니다. 구분선 모듈은 텍스트 위에 짧은 구분선을 추가하는 데 사용됩니다.

오른쪽 열에 분할기 모듈을 추가합니다.

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

콘텐츠 탭에서…

디바이더 표시: 예

디자인 탭에서…

색상: #e4ca77
디바이더 무게: 4px
너비: 80px(기본값은 백분율이므로 이 값을 입력해야 함)
모듈 정렬: 기본값(왼쪽)
맞춤 여백: 위쪽 60px, 아래쪽 0px

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

설정 저장

행동 유도 모듈 ​​추가

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

콘텐츠 탭에서…

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

디자인 탭에서…

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

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

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

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

설정 저장

이제 클릭하여 행 설정을 편집하고 다음을 업데이트하십시오.

디자인 탭에서…

사용자 정의 너비 사용: 예
사용자 정의 너비: 1366px

고급 탭에서…

열 1 기본 요소 상자에 다음 사용자 지정 CSS를 추가합니다.

z-index: 999;

설정 저장

행 복제 및 업데이트

그것이 첫 번째 행에 대한 것입니다. 두 번째 행을 만드는 시간을 절약하려면 방금 만든 행을 복제하십시오.

다음과 같이 복제된 행 설정을 편집합니다.

고급 탭에서…

Column 1 Main Element에서 Custom CSS를 꺼내 Column 2 Main Element 상자에 추가합니다.

z-index: 999;

이미지가 오른쪽 열에 있을 것이므로 왼쪽에서 움직이는 텍스트 위에 해당 열이 있어야 합니다.

설정 저장

두 번째 행의 이미지 모듈 및 행동 유도 모듈 ​​업데이트

다음으로 이미지 모듈을 오른쪽 열로 드래그하고 구분자 모듈과 행동 유도 모듈을 왼쪽 열로 드래그합니다.

이 섹션은 약간 다른 열 구조를 가질 것입니다. 열 구조 변경 행 아이콘(복제 행 아이콘 옆)을 클릭하고 2/3의 1/3 열 레이아웃을 선택합니다.

이제 행 내부의 각 모듈을 다시 방문하여 몇 가지 변경만 하면 됩니다.

먼저 Divider Module 설정을 다음과 같이 업데이트합니다.

디자인 탭에서…

모듈 정렬: 오른쪽
애니메이션 방향: 왼쪽

설정 저장

다음으로 행동 유도 모듈 ​​설정을 다음과 같이 업데이트합니다.

제목: "스스로 말하다"
텍스트 방향: 오른쪽
헤더 텍스트 정렬: 오른쪽
너비: 700px(입력)
애니메이션 방향: 왼쪽

설정 저장

다음으로 오른쪽 열의 이미지 모듈을 새로운 790×880 이미지로 업데이트합니다.

그것이 섹션 3에 대한 것입니다!

결과를 확인하세요.

데모의 섹션 4 구축

섹션 4에서는 몇 가지 고급 CSS 트릭을 사용하여 이미지 모듈의 디자인을 다른 수준으로 끌어 올립니다. 그리고 경첩에 접기 위해 텍스트 모듈을 쌓는 것은 배달과 잘 어울립니다. 뛰어들어봅시다.

Visual Builder를 사용하여 두 열(1/2 1/2) 행이 있는 일반 섹션을 추가합니다. 첫 번째 모듈을 추가하기 전에 섹션에 배경색을 추가해 보겠습니다. 섹션 설정을 편집하려면 클릭하세요.

콘텐츠 탭에서 배경색 탭을 선택하고 색상 #262938을 입력합니다.

설정 저장

첫 번째 텍스트 모듈 추가

왼쪽 열에서 텍스트 모듈을 추가하고 다음과 같이 텍스트 설정을 업데이트합니다.

콘텐츠 탭에서…

콘텐츠 상자의 텍스트 탭에 다음 html을 입력합니다.

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

디자인 탭에서…

텍스트 색상: 라이트
헤더 글꼴: Playfair 디스플레이, 굵게(B)
헤더 글꼴 크기: 38px
헤더 라인 높이: 1.3em
맞춤 여백: 20px 하단
애니메이션: 접기
애니메이션 방향: 위로

두 번째 텍스트 모듈 추가

다음으로 현재 텍스트 모듈 바로 아래에 다른 텍스트 모듈을 추가합니다. 그런 다음 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

내용: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.”

디자인 탭에서…

텍스트 색상: 라이트
텍스트 글꼴 크기: 18px
텍스트 텍스트 색상: rgba(255,255,255,0.66)
텍스트 줄 높이: 1.9em
맞춤 여백: 40px 하단
애니메이션 스타일: 접기
애니메이션 방향: 아래로
애니메이션 지연: 150ms

설정 저장

버튼 모듈 추가

마지막 텍스트 모듈 아래에 버튼 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

버튼 텍스트: 자세히 알아보기
버튼 URL: #

버튼에 사용자 정의 스타일 사용: 예

버튼 텍스트 크기: 15px
버튼 텍스트 색상: #01254c
버튼 배경색: #ffffff
버튼 테두리 반경: 0px
버튼 글꼴: 굵게(B), 대문자(TT)

맞춤 패딩: 위쪽 10px, 오른쪽 30px, 아래쪽 10px, 왼쪽 30px

애니메이션 스타일: 슬라이드
애니메이션 방향: 아래로
애니메이션 지속 시간: 1600ms
애니메이션 지연: 150ms
애니메이션 강도: 20%

설정 저장

오른쪽 열에 이미지 모듈 추가

그것이 그 칼럼에 대한 것입니다. 이제 오른쪽 열에 이미지 모듈을 추가해야 합니다. 그런 다음 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

이미지 URL: [600×400 이미지 삽입]

디자인 탭에서…

강제 전폭: 예

애니메이션 스타일: 슬라이드
애니메이션 방향: 오른쪽
애니메이션 지연: 800ms
애니메이션 강도: 20%

설정 저장

행 설정 업데이트

이제 클릭하여 행 설정을 편집하고 다음을 업데이트하십시오.

디자인 탭에서…

사용자 정의 너비 사용: 예
사용자 정의 너비: 1366px

맞춤 패딩: 위쪽 27px, 오른쪽 0px, 아래쪽 170px, 왼쪽 0px
열 1 맞춤 패딩: 상단 6%

고급 탭에서…

열 1 기본 요소 상자에 다음 사용자 지정 CSS를 추가합니다.

z-index: 999;

이 CSS는 애니메이션 중에 텍스트가 이미지 상단에 유지되도록 추가합니다.

그런 다음 Column 2 Main Element 상자에 다음 사용자 정의 CSS를 추가합니다.

transform: scale(1.3);
transform-origin: top right;

이 CSS는 2열(이미지)에 있는 모든 항목의 크기를 확장(증가)하는 영리한 디자인을 추가합니다. 변형 원점 속성은 열이 행의 오른쪽 상단에서 확장되도록 지시합니다. 이렇게 하면 왼쪽의 텍스트와 이미지가 약간 겹칩니다.

설정 저장

행 복제 및 업데이트

이제 섹션 3에서 했던 것처럼 행을 복제할 것입니다. 행을 복제한 후 왼쪽 열에서 2개의 텍스트 모듈과 버튼 모듈을 오른쪽으로 드래그합니다. 그리고 이미지 모듈을 오른쪽 열에서 왼쪽으로 드래그합니다. 이제 복제된 행과 그 내용을 약간만 업데이트하면 됩니다.

먼저 다음으로 행 설정을 업데이트하겠습니다.

디자인 탭에서…

맞춤 패딩: 위쪽 40px, 오른쪽 0px, 아래쪽 40px, 왼쪽 0px
열 1 사용자 정의 패딩: [기본값으로 복원; 상위 6% 지우기]
2열 맞춤 패딩: 상단 6%

고급 탭에서…

Column 1 Main Element Box와 Column 2 Main Element Box에서 커스텀 CSS를 지웁니다. 이것은 복제에서 이월되었으며 더 이상 필요하지 않습니다.

이미지 모듈 업데이트

다음으로 Image Module(현재 왼쪽 열에 있음)을 다음으로 업데이트합니다.

콘텐츠 탭에서…

이미지 URL: [새 600×400 이미지 삽입]

디자인 탭에서…

애니메이션 방향: 왼쪽

고급 탭에서…

이 이미지가 이미 흐릿하다고 생각했다면. 다시 생각 해봐! 이 흐림 효과를 추가하려면 기본 요소 상자에 다음 사용자 정의 CSS 줄을 추가하기만 하면 됩니다.

filter: blur(5px) opacity(.6);

흐림 효과 외에도 이 CSS는 이미지를 60% 불투명도로 반투명하게 만듭니다.

설정 저장

오른쪽 열의 텍스트 모듈 업데이트

오른쪽 열로 이동하여 더 짧은 h1 헤더로 상위 텍스트 모듈 콘텐츠를 업데이트합니다.

<h1>Consectetur adipiscing elit</h1>

설정 저장

그리고 짜잔! 섹션 4는 모두 마쳤습니다. 최종 결과를 확인해 보겠습니다.

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

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

즐기다!

레이아웃 팩 다운로드

무료로 다운로드

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

다운로드

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

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

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

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

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

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

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

마무리

탄수화물을 갈망하게 만드는 것 외에도 이 섹션에서는 이미지를 표시하고 애니메이션을 적용하는 창의적인 방법을 보여줍니다. 또한 지연된 버튼 슬라이드와 함께 힌지에서 접히는 텍스트 모듈은 사용자가 CTA를 클릭하도록 유도합니다.

다가오는

이 시리즈의 3부에서는 블러브 모듈을 디자인하고 애니메이션을 적용하는 아름다운 방법을 보여 드리겠습니다. 이 섹션 레이아웃은 다양한 용도로 사용할 수 있습니다. 이것이 귀하의 서비스 프로세스 또는 귀하의 서비스 또는 제품 목록을 보여주는 방법임을 알 수 있습니다.

기대됩니다.

아래 의견에 연락하는 것을 잊지 마세요!