Divi의 슬라이드 애니메이션을 사용하여 프로세스 진행 상황 표시
게시 됨: 2017-10-15Divi의 새로운 애니메이션 옵션을 사용하여 멋진 페이지 섹션을 디자인하는 방법을 알려주는 이 6부 시리즈 중 3부에 오신 것을 환영합니다. 웹사이트에 애니메이션을 추가하는 기술을 보여주기 위해 라이브 데모 페이지의 다양한 섹션을 구축하는 방법을 안내해 드리겠습니다. 애니메이션 기능은 정말 재미있고 사용하기 쉽습니다. Visual Builder를 사용하면 모든 단계에서 창작물이 살아 움직이는 것을 볼 수 있습니다. 저와 함께 Divi 애니메이션의 힘을 살펴보세요.
지난 게시물에서 저는 애니메이션 데모 페이지의 섹션 3과 4를 만들 때 제품과 서비스를 표시하기 위해 웹사이트 섹션을 디자인하고 애니메이션하는 몇 가지 창의적인 방법을 보여주었습니다.
오늘 우리는 멋진 애니메이션을 사용하여 4개의 멋진 Blurb 모듈을 표시하는 섹션 5를 다룰 것입니다. 광고 문구 애니메이션의 단계별 타이밍은 광고 문구가 사용되는 단계별 프로세스를 실제로 보완합니다.
뛰어들자!
다음은 오늘의 게시물에서 구축할 내용을 살짝 엿본 것입니다.
디자인 요소 준비
이 튜토리얼에서 정말로 필요한 것은 Blurb 모듈에 사용되는 4개의 207×188 이미지 아이콘 뿐입니다. 여기에 내가 사용할 이미지가 있습니다.
Divi의 슬라이드 애니메이션을 사용하여 프로세스 진행 상황 표시
YouTube 채널 구독
건물 섹션 5
Visual Builder를 사용하여 일반 섹션을 추가합니다(시리즈를 팔로우하는 경우 섹션 4 아래). 다른 작업을 수행하기 전에 섹션에 배경색 #f5f9fc를 추가하고 설정을 저장합니다.
두 개의 텍스트 모듈을 사용하여 섹션 헤드라인 추가
그런 다음 1열 행을 추가합니다. 행에서 Text Module을 추가하고 다음과 같이 설정을 업데이트합니다.
콘텐츠 탭에서…
내용: "설정"
디자인 탭에서…
텍스트 글꼴: 굵게(B), 대문자(TT)
텍스트 글꼴 크기: 15px
텍스트 텍스트 색상: #6a8091
텍스트 문자 간격: 5px
텍스트 줄 높이: 1.9em
텍스트 방향: 중앙
간격: 20px 하단
애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 지속 시간: 850ms
설정 저장
이제 방금 만든 모듈 아래에 다른 텍스트 모듈을 추가하여 섹션 헤드라인을 추가해 보겠습니다. 다음과 같이 텍스트 설정을 업데이트합니다.
콘텐츠 탭에서…
콘텐츠 상자의 텍스트 탭에 다음 html을 추가합니다.
<h1>Say Hello to DIVI</h1>
디자인 탭에서…
헤더 글꼴: 굵게(B)
머리글 텍스트 정렬: 가운데
헤더 글꼴 크기: 39px
헤더 텍스트 색상: #2f3a54
참고: 이것은 h1 헤더이므로 헤더 텍스트 설정을 편집해야 합니다.
너비: 600px(이 값 입력)
모듈 정렬: 중앙
맞춤 여백: 20px 하단
애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 지속 시간: 850ms
애니메이션 강도: 12%
애니메이션 속도 곡선: 이즈아웃
설정 저장
The Four Blurbs 디자인
이제 Blurb 모듈을 추가할 준비가 되었습니다. 먼저 4열(1/4 1/4 1/4 1/4) 구조의 행을 만듭니다.
첫 번째(맨 왼쪽) 열에 Blurb 모듈을 추가합니다.
그런 다음 Blurb 설정을 업데이트합니다.
콘텐츠 탭에서…
콘텐츠 상자의 텍스트 탭에 다음 html을 추가합니다.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.</p> <p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔</strong></a></p>
참고: 사용자가 클릭할 수 있는 다른 옵션을 제공하기 위해 수동으로 링크를 추가했습니다. 수동 링크의 URL이 귀하가 블러브 모듈 URL에 추가한 링크와 일치하는지 확인하십시오.
URL: [URL 입력]
이미지: [207×188 이미지 입력]
배경색: #ffffff
디자인 탭에서…
텍스트 방향: 중앙
헤더 글꼴: 기본값, 굵게(B), 대문자(TT)
헤더 텍스트 색상: #7969f4
헤더 문자 간격: 3px
헤더 라인 높이: 3em
본문 색상: #6a8091
바디 라인 높이: 1.9em
맞춤 패딩: 위쪽 40px, 오른쪽 40px, 아래쪽 40px, 왼쪽 40px
애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 지속 시간: 700ms
애니메이션 강도: 4%
이미지/아이콘 애니메이션: 애니메이션 없음
고급 탭에서…
기본 요소 상자에 다음 사용자 지정 CSS를 추가합니다.
border-radius: 6px; box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
설정 저장
이제 하나의 Blurb를 완료했으므로 다음 세 개의 Blub에 대한 템플릿으로 사용할 수 있습니다.
모듈을 마우스 오른쪽 버튼으로 클릭하고 모듈 복사를 선택하십시오. 그런 다음 나머지 세 열에 모듈을 붙여넣습니다(ctrl + v).
이제 우리가 해야 할 일은 세 개의 복제된 모듈 각각에 몇 가지 업데이트를 추가하는 것입니다.
두 번째 열의 Blurb 모듈에 대해 다음을 업데이트합니다.
콘텐츠 탭에서…
제목: 2단계
내용: [텍스트 및 수동 링크 URL 업데이트]
URL: [광고 문구 URL 업데이트]
이미지: [새 207×188 이미지 추가]
디자인 탭에서…
헤더 텍스트 색상: #e944ff
애니메이션 지연: 50ms
애니메이션 강도: 12%
세 번째 열의 Blurb 모듈에 대해 다음을 업데이트합니다.
콘텐츠 탭에서…
제목: 3단계
내용: [텍스트 및 수동 링크 URL 업데이트]
URL: [광고 문구 URL 업데이트]
이미지: [새 207×188 이미지 추가]
디자인 탭에서…
헤더 텍스트 색상: #3ebaef
애니메이션 지연: 100ms
애니메이션 강도: 20%
네 번째 열의 Blurb 모듈에 대해 다음을 업데이트합니다.
콘텐츠 탭에서…
제목: 4단계
내용: [텍스트 및 수동 링크 URL 업데이트]
URL: [광고 문구 URL 업데이트]
이미지: [새 207×188 이미지 추가]
디자인 탭에서…
헤더 텍스트 색상: #95d624
애니메이션 지연: 150ms
애니메이션 강도: 30%
모든 Blurbs를 업데이트했으면 다음과 같이 행 설정을 업데이트하겠습니다.
디자인 탭에서…
사용자 정의 너비 사용: 예
사용자 정의 너비: 1366px
사용자 지정 거터 너비 사용: 예
거터 폭: 2
애니메이션 스타일: 확대/축소
애니메이션 시간: 700ms
애니메이션 시작 불투명도: 100%
설정 저장
이제 이 섹션을 모두 마쳤습니다. 데모 페이지에는 광고 문구 아래에 다른 이미지가 있지만 여기에 포함할 필요는 없다고 생각했습니다.
보너스: 쉽게 가져올 수 있도록 이 섹션을 다운로드하십시오.
보너스 특전으로 오늘의 튜토리얼에 포함된 섹션을 아래의 이메일 수신 동의 양식을 사용하여 얻을 수 있는 무료 다운로드로 패키징했습니다. 이메일을 입력하면 다운로드 버튼이 나타납니다. 이미 Divi 뉴스레터의 일부인 경우 "재구독"에 대해 걱정하지 마십시오. 이메일을 다시 입력해도 더 이상 이메일이 전송되거나 중복되지 않습니다. 그것은 단순히 다운로드를 표시합니다.
즐기다!
레이아웃 팩 다운로드
무료로 다운로드
Divi 뉴스레터에 가입하시면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
이 다운로드를 사용하려면 먼저 다운로드 폴더에서 Animation_Effects_Part_3.zip 이라는 압축 파일을 찾습니다. 압축을 풀어 다음 가져오기를 표시합니다.
애니메이션 효과 파트 3(섹션 1).json
애니메이션 효과 파트 3(섹션 2).json
WordPress 관리자에서 Divi > Divi 라이브러리 > 가져오기 및 내보내기로 이동합니다. 이식성 모달이 나타나면 가져오기 탭과 파일 선택 버튼을 클릭합니다.
원하는 json 파일을 선택하고 "Divi Builder 레이아웃 가져오기"를 클릭합니다. 가져오기가 완료되면 위 섹션 중 하나를 추가하려는 게시물이나 페이지로 이동합니다.
비주얼 빌더를 활성화하십시오. 위 섹션 중 하나를 추가하려는 페이지 부분으로 이동합니다. 새 섹션 추가 아이콘을 클릭하면 "라이브러리에서 추가" 옵션이 표시됩니다. 이 옵션을 선택하고 원하는 레이아웃을 선택합니다.
마무리
섹션 5의 디자인과 애니메이션은 몇 가지 애니메이션 설정만으로 콘텐츠를 전달할 수 있는 힘을 보여줍니다. 각 광고 문구가 진행 중인 모습을 보여주는 것이 멋져 보일 뿐만 아니라 어쨌든 프로세스의 단계를 보여주고 있다는 점을 고려하면 의미가 있습니다.
다가오는
시리즈의 4부에서는 제품 또는 다운로드를 표시하기 위한 멋진 레이아웃을 보여 드리겠습니다. 그리고 물론, 나는 애니메이션의 현명한 사용을 전체적으로 강조할 것입니다.
다음 시간까지!
아래 의견에서 여러분의 의견을 기다리겠습니다.