Divi의 새로운 애니메이션 효과를 사용하는 방법

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

애니메이션은 페이지에 생명을 불어넣을 수 있습니다. 효과적으로 수행하면 사용자가 참여하고 페이지의 콘텐츠를 탐색하려는 경향이 더 커질 수 있습니다. 제대로 수행되지 않으면 애니메이션이 사용자의 주의를 완전히 분산시키고 멍한 실망 상태로 몰아넣을 수 있습니다. 애니메이션의 속도, 타이밍 및 강도는 모두 사용자가 페이지를 아래로 스크롤할 때 이 교향곡의 움직임에서 중요한 역할을 합니다.

Divi의 고급 애니메이션 기능을 사용하면 웹사이트의 모든 요소에 애니메이션을 추가할 수 있습니다. 그리고 이러한 애니메이션 요소를 결합하여 섹션을 생생하게 만드는 수많은 움직임 조합을 만들 수 있습니다.

이 시리즈의 1부에서는 시각적 빌더를 사용하여 Divi의 애니메이션 기능의 힘을 보여주는 라이브 데모 페이지의 처음 두 섹션을 만들고 애니메이션하는 방법을 보여 드리겠습니다.

시작하자.

다음은 이 시리즈에서 구축할 사항에 대한 미리보기입니다.

시리즈의 1부

섹션 1

섹션 2

시리즈의 2부

섹션 3

섹션 4

시리즈의 3부

섹션 5

시리즈의 4부

섹션 6

시리즈의 5부

섹션 7

시리즈의 6부

섹션 8

섹션 9

디자인 요소 준비

첫 번째 섹션의 경우 두 개의 이미지가 필요합니다. 첫 번째는 약 1280×800 크기의 전체 화면 배경 이미지입니다. 다음은 내가 사용하고 있는 것입니다.

두 번째 이미지는 동일한 이미지를 수직으로 뒤집고 아래쪽으로 페이드 아웃한 편집된 버전입니다. 이 두 번째 이미지는 메인 헤드라인의 배경으로 사용되며 크기는 약 800×400이어야 합니다.

거꾸로 된 이미지를 만들려면 미리 보기에서 이미지를 열고 도구 > 세로 뒤집기를 선택하거나 Photoshop에서 이미지를 열고 이미지 > 이미지 회전 > 캔버스 세로 뒤집기를 선택합니다. 이미지 하단에 페이드 아웃 효과를 추가하기 위해 크기 800px, 경도 0%의 브러시 모드에서 지우개 도구를 사용했습니다. 그런 다음 Shift 키를 누른 상태에서 아래쪽 가장자리를 따라 브러시를 드래그했습니다.

반드시 png 파일로 내보내십시오.

Photoshop이 없는 경우 gimpshop과 같은 무료 사진 편집 솔루션을 사용하여 동일한 디자인 편집을 많이 수행할 수 있습니다. 사진 편집 소프트웨어를 사용하는 방법을 모르는 경우(현재 학습에 관심이 없는 경우) 지금은 두 번째 이미지를 생략하거나 아래의 이미지를 사용하십시오(클릭하여 데스크탑).

두 번째 섹션에는 두 개의 이미지가 필요합니다. 첫 번째는 이와 같이 약 730×490이어야 합니다.

그리고 두 번째는 아래와 같이 약 525×660이어야 합니다.

애니메이션 용어 이해

아직 읽지 않았다면 고급 애니메이션을 소개하는 기능 업데이트 게시물을 읽어보세요. 게시물 끝에서 Nick은 빌더 전체에서 찾을 수 있는 각 애니메이션 기능에 대한 유용한 정의/설명을 제공합니다. 이러한 애니메이션 기능이 실제로 무엇을 하는지 이해하는 것은 제작 과정에서 중요합니다.

이러한 애니메이션 기능이 무엇인지 이해했으면 본격적으로 살펴보겠습니다.

Divi의 새로운 애니메이션 효과를 사용하는 방법

YouTube 채널 구독

새 페이지 설정 추가

WordPress 대시보드에서 페이지 > 새로 추가로 이동합니다. 그런 다음 페이지에 제목을 추가합니다. 그런 다음 페이지 오른쪽 상단의 상자에서 Divi 페이지 설정을 찾아 Dot Navigation "ON"을 선택합니다. 페이지 속성 상자에서 페이지 템플릿에 대해 빈 페이지를 선택합니다. 마지막으로 "Divi Builder 사용" 버튼을 클릭하고 Visual Builder를 배포하여 레이아웃 구축을 시작합니다.

섹션 1 구축: 전체 화면 헤더 디자인 및 애니메이션

이 헤더 섹션은 전체 화면으로 설정된 전체 너비 헤더 모듈과 매우 유사하게 작동합니다. 즉, 사이트가 로드되면 창 크기에 관계없이 섹션이 브라우저 창의 전체 너비와 높이를 채웁니다. 그러나 전체 너비 헤더 모듈을 사용하는 대신 표준 섹션을 사용하고 높이를 100vh로 설정합니다. 그런 식으로 내부에 텍스트 모듈을 추가할 수 있습니다.

Visual Builder를 사용하여 Builder를 시작할 때 기본적으로 이미 표시된 표준 섹션의 섹션 설정을 편집하려면 클릭합니다. 다음을 업데이트합니다.

콘텐츠 탭에서…

배경 이미지: [1280×800 배경 이미지 입력]
시차 효과 사용: 예
시차 방법: 진정한 시차

디자인 탭에서…

맞춤 패딩: 위쪽 5%, 오른쪽 0px, 아래쪽 5%, 왼쪽 0px

고급 탭에서…

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

min-height: 100vh

이 한 줄의 CSS는 뷰포트 높이의 100%를 표시하도록 섹션에 지시합니다.

설정 저장

다음으로 행에 1열 구조를 삽입하고 열에 텍스트 모듈을 추가합니다. 다음과 같이 텍스트 모듈 설정을 업데이트합니다.

콘텐츠 탭에서... .

콘텐츠 상자 안에 "Divi"라는 단어를 추가하기만 하면 됩니다.

디자인 탭에서…

텍스트 글꼴: Oswald, 대문자(TT)
텍스트 글꼴 크기: 14px
텍스트 텍스트 색상: #08408e
텍스트 문자 간격: 1.5em(입력해야 함)
텍스트 방향: 중앙
사용자 정의 마진: 2%
애니메이션 스타일: 뒤집기
애니메이션 반복: 한 번
애니메이션 방향: 오른쪽
애니메이션 시간: 2000ms
애니메이션 지연: 1100ms
애니메이션 강도: 100%
애니메이션 시작 불투명도: 0%
애니메이션 속도 곡선: Ease-In-Out

시간 초과… 이 유사한 애니메이션을 수동으로 추가하는 데 필요한 작업을 보여드릴 수 있도록 잠시 멈추겠습니다.

다음은 애니메이션에 필요한 인라인 스타일이 있는 html입니다.

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

다음은 애니메이션에 필요한 CSS입니다.

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

그리고 여기에는 애니메이션이 브라우저 창에 표시될 때 애니메이션을 활성화하는 데 필요한 코드가 포함되지 않습니다. 어쨌든 이러한 애니메이션 기능이 내장되어 있으면 엄청난 시간을 절약할 수 있습니다. 그리고 애니메이션 옵션을 편집하면서 애니메이션을 실시간으로 볼 수 있다는 것은 상당한 보너스입니다.

이제 텍스트 모듈 설정 업데이트를 계속해 보겠습니다.

고급 탭에서…

기본 요소 상자에 다음 맞춤 CSS 줄을 추가합니다.

text-indent: 1.5em

설정 저장

다음으로 방금 만든 모듈 바로 아래에 다른 텍스트 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

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

<p><span>Believing</span><br />is  Seeing</p>

디자인 탭에서…

텍스트 색상: 라이트
텍스트 글꼴: Oswald, 대문자(TT)
텍스트 글꼴 크기: 8vw(이를 입력해야 합니다. 그러면 글꼴 크기가 뷰포트 너비의 8%가 됩니다)
텍스트 텍스트 색상: rgba(255,255,255,0.79)
텍스트 줄 높이: 1.4em
텍스트 방향: 중앙
애니메이션 스타일: 접기
애니메이션 방향: 위로
애니메이션 지속 시간: 1800ms
애니메이션 지연: 0ms
애니메이션 강도: 60%

설정 저장

이 애니메이션 효과는 겉보기에 평평한 위치에서 접거나 세워서 주요 헤드라인을 드러냅니다. 이제 주요 헤드라인 텍스트가 끝났으므로 거꾸로 된 배경 이미지를 행에 추가해 보겠습니다.

이제 방금 만든 두 개의 텍스트 모듈이 포함된 행의 행 설정으로 이동하여 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

배경 이미지: [800×440 이미지 삽입]
배경 이미지 크기: 맞춤
배경 이미지 위치: 상단 중앙
배경 이미지 반복: 반복 없음

디자인 탭에서…

사용자 정의 너비 사용: 예
단위: %
사용자 정의 너비: 50%
맞춤 패딩: 위쪽 12%, 오른쪽 0%, 아래쪽 5%, 왼쪽 0%
애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 지연: 300ms
애니메이션 강도: 20%

이 애니메이션 효과는 마치 산 뒤에서 떠오르는 것처럼 이미지를 위로 밀어 올립니다.

그것이 첫 번째 섹션에 대한 것입니다. 최종 디자인과 애니메이션을 확인해 보겠습니다.

여기에 있는 세 가지 애니메이션 요소에는 행(위로 슬라이딩됨), "믿는 것이 보고 있음" 텍스트가 있는 텍스트 모듈(중앙에서 접혀 있음), 텍스트 "Divi"가 있는 텍스트 모듈(지연됨)이 포함됩니다. 다른 요소가 멈춘 후 오른쪽으로 뒤집기). 이 조합은 목적이 있고 시기적절한 방식으로 다양한 콘텐츠를 보여줌으로써 방문자의 참여를 유도합니다.

건물 섹션 2

애니메이션 데모 페이지의 이 두 번째 섹션은 페이지의 콘텐츠를 표시하는 미묘하면서도 매우 멋진 방법을 보여줍니다. 사실 첫눈에 모든 움직임을 인식하는 것은 거의 불가능합니다.

두 번째 섹션을 작성하려면 이전 섹션 아래에 일반 섹션을 추가하십시오. 섹션에서 2열(1/2 1/2) 행을 추가합니다.

왼쪽 열에서 다음 설정으로 텍스트 모듈을 추가합니다.

콘텐츠 탭에서…

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

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

디자인 탭에서…

텍스트 색상: 라이트
텍스트 글꼴: 몬세라트
텍스트 글꼴 크기: 18px
텍스트 줄 높이: 1.8em
헤더 글꼴: Montserrat, 굵게(B), 대문자(TT)
헤더 글꼴 크기: 39px(데스크톱)
헤더 라인 높이: 2.2em
여백-하단: 50px
애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 강도: 10%

이 애니메이션 효과는 텍스트 블록을 위로 밀어서 표시합니다.

설정 저장

다음으로 방금 만든 텍스트 모듈 아래에 버튼 모듈을 추가합니다. 다음과 같이 버튼 모듈 설정을 업데이트합니다.

콘텐츠 탭에서…

버튼 텍스트: 자세히 알아보기
버튼 URL: # (또는 원하는 대로)

디자인 탭에서…

버튼 정렬: 왼쪽
텍스트 색상: 라이트
버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 15px
버튼 테두리 반경: 0
버튼 문자 간격: 3px
버튼 글꼴: Montserrat, 굵게(B), 대문자(TT)
버튼 아이콘 표시: 예
맞춤 패딩: 위쪽 10px, 오른쪽 30px, 아래쪽 10px, 왼쪽 30px
애니메이션 스타일: 슬라이드
애니메이션 방향: 아래로
애니메이션 지연: 100ms
애니메이션 강도: 10%

위의 이전 텍스트 효과의 균형을 맞추기 위해 이 애니메이션 효과는 약간의 지연을 두고 아래로 밀어 버튼을 표시합니다.

현재 흰색 배경에 흰색 텍스트이기 때문에 아직 텍스트와 버튼을 볼 수 없습니다. 괜찮아요. 곧 배경을 추가할 예정입니다.

다음으로 오른쪽 열에 Divider 모듈을 추가합니다.

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

디자인 탭에서…

높이: 260px

고급 탭에서…

데스크톱에서 가시성 비활성화

여기에 구분선을 추가하면 모바일 장치에서 배경 이미지를 계속 볼 수 있습니다.

설정 저장

이제 각 열에 배경을 추가해 보겠습니다. 행 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 탭에서…

열 1 배경 그라데이션 색상: #fe8840, rgba(238,78,78,0.9)
열 1 기울기 방향: 135deg
2열 배경 이미지: [730×490 이미지 입력]
2열 배경 이미지 위치: 왼쪽 상단
열 2 배경 이미지 반복: 반복 없음

디자인 탭에서…

사용자 정의 너비 사용: 예
사용자 정의 너비: 1366px
사용자 지정 거터 너비 사용: 예
거터 폭: 1
열 높이 균등화: 예
맞춤 패딩: 위쪽 0px, 오른쪽 0px, 아래쪽 0px, 왼쪽 0px
열 1 맞춤 패딩: 위쪽 5%, 오른쪽 7%, 아래쪽 5%, 왼쪽 7%
애니메이션 스타일: 접기
애니메이션 방향: 위로
애니메이션 지속 시간: 800ms

이 애니메이션 효과는 전체 행을 보기에 접거나 세워서 표시합니다.

고급 탭에서…

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

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

설정 저장

다음으로 방금 생성한 행 아래에 2열(1/3 2/3) 행을 추가합니다.

왼쪽 열에서 Divider Module을 추가하고 다음과 같이 설정을 업데이트합니다.

디자인 탭에서…

높이: 400px

고급 탭에서…

데스크톱에서 가시성 비활성화

여기에 구분선을 추가하면 모바일 장치에서 배경 이미지를 계속 볼 수 있습니다.

설정 저장

시간을 절약하려면 "Time is Money"라는 텍스트가 포함된 위 행의 왼쪽 열에 있는 텍스트 모듈을 마우스 오른쪽 버튼으로 클릭하고 복사합니다. 그런 다음 아래 행의 오른쪽(2/3) 열에 붙여넣습니다.

다음과 같이 새 텍스트 모듈 설정을 업데이트합니다.

콘텐츠 탭에서…

콘텐츠 상자에서 h1 헤더 텍스트를 "Promute Like a Pro"로 변경합니다.

디자인 탭에서…

텍스트 텍스트 색상: #a8a8a8
헤더 텍스트 색상: #414159
애니메이션 스타일: 슬라이드
애니메이션 방향: 아래로
애니메이션 강도: 10%

이 애니메이션 효과는 텍스트 블록을 아래로 밀어서 표시합니다.

이제 위 행의 왼쪽 열에 있는 버튼 모듈을 마우스 오른쪽 버튼으로 클릭하고 복사하여 방금 편집을 마친 텍스트 모듈 아래에 붙여넣습니다.

다음과 같이 버튼 모듈 설정을 업데이트합니다.

버튼 텍스트 색상: #ff4823
버튼 테두리 색상: #ff4823
버튼 호버 텍스트 색상: #ff2323

설정 저장

마지막 단계에서 다음을 업데이트하여 행 설정을 편집하십시오.

콘텐츠 탭에서…

배경색: #ffffff
열 1 배경 이미지: [525×660 이미지 삽입]
열 1 배경 이미지 위치: 왼쪽 상단
열 1 배경 이미지 반복: 반복 없음
2열 배경 그라데이션 색상: rgba(255,255,255,0.91), #ffffff
열 2 기울기 방향: 135deg

디자인 탭에서…

사용자 정의 너비 사용: 예
맞춤 너비: 1040px
사용자 지정 거터 너비 사용: 예
거터 폭: 1
열 높이 균등화: 예
맞춤 패딩: 위쪽 0px, 오른쪽 0px, 아래쪽 0px, 왼쪽 0px
열 2 사용자 지정 패딩: 위쪽 5%, 오른쪽 7%, 아래쪽 5%, 왼쪽 7%
애니메이션 스타일: 접기
애니메이션 방향: 아래로
애니메이션 지속 시간: 800ms

이 애니메이션 효과는 전체 행을 보기로 접어서 표시합니다.

고급 탭에서…

기본 요소 상자 아래에 다음 사용자 정의 CSS를 추가합니다.

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

그것이 이 섹션에 대한 것입니다. 결과를 확인하세요.

이 섹션의 애니메이션 및 디자인 요소는 미묘하기 때문에 대부분의 페이지에서 사용할 수 있는 디자인 및 애니메이션 종류의 좋은 예라고 생각합니다. 뒤에서 책을 펼치는 것을 보는 것처럼 상단과 하단 열이 열립니다. 텍스트와 버튼은 맨 위 행에서 약간 위로 이동하고 맨 아래 행에서 아래로 이동합니다. 훌륭한 조합입니다.

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

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

즐기다!

레이아웃 팩 다운로드

무료로 다운로드

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

다운로드

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

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

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

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

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

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

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

마무리

이 두 섹션이 Divi의 애니메이션 기능을 사용하여 향후 빌드에 영감을 주기를 바랍니다. 디자인 컨셉만으로도 훌륭하고 레이아웃은 약간의 조정만으로 모든 웹사이트에 쉽게 적용할 수 있습니다. 이 시리즈에서 더 많은 내용을 다룰 예정이므로 계속 지켜봐 주십시오.

다가오는

이 시리즈의 다음 부분에서는 애니메이션 데모 페이지의 섹션 3과 4를 구축하여 Divi의 고급 애니메이션 기능에 대한 탐색을 계속할 것입니다.

다음은 구축할 수 있는 사항입니다.

섹션 3:

섹션 4:

아래에 의견을 남겨주세요.

건배!