Divi의 폴드 애니메이션을 사용하여 Blurbs Bloom 만들기
게시 됨: 2017-10-16Divi의 새로운 애니메이션 옵션을 사용하여 멋진 페이지 섹션을 디자인하는 방법을 알려주는 이 6부 시리즈 중 4부에 오신 것을 환영합니다. 웹사이트에 애니메이션을 추가하는 기술을 보여주기 위해 라이브 데모 페이지의 다양한 섹션을 구축하는 방법을 안내해 드리겠습니다. 애니메이션 기능은 정말 재미있고 사용하기 쉽습니다. Visual Builder를 사용하면 모든 단계에서 창작물이 살아 움직이는 것을 볼 수 있습니다. 저와 함께 Divi 애니메이션의 힘을 살펴보세요.
지난 게시물에서 단계별 프로세스를 위해 구성된 4개의 광고 모듈을 디자인하고 애니메이션하는 몇 가지 창의적인 방법을 보여 드렸습니다.
오늘 우리는 애니메이션 데모 페이지의 섹션 6을 만들 것입니다. 이 섹션에서는 추천 제품 또는 다운로드를 표시하기 위한 몇 가지 멋진 디자인과 애니메이션을 보여줍니다. 이러한 블러브 모듈에 대한 색상의 사용과 애니메이션의 블루밍 효과는 섹션을 정말 돋보이게 합니다.
뛰어들자!
다음은 오늘의 게시물에서 구축할 내용을 살짝 엿본 것입니다.
Divi의 폴드 애니메이션을 사용하여 Blurbs Bloom 만들기
YouTube 채널 구독
건물 섹션 6
섹션 추가 및 사용자 지정
Visual Builder를 사용하여 레이아웃에 다른 일반 섹션을 추가하여 시작하겠습니다. 그런 다음 섹션에 3열(1/4 1/4) 행을 추가합니다.
첫 번째 모듈을 추가하기 전에 섹션 설정으로 이동하여 다음을 업데이트하십시오.
콘텐츠 탭에서…
배경색: #00252d
디자인 탭에서…
맞춤 패딩: 상단 80px, 하단 80px
설정 저장
텍스트 모듈을 사용하여 헤더 추가
이제 3열 행으로 돌아가서 왼쪽 열에 텍스트 모듈을 추가하겠습니다. 다음과 같이 텍스트 설정을 업데이트합니다.
콘텐츠 탭에서…
콘텐츠 상자의 텍스트 탭에 다음 h1 헤더를 추가합니다.
<h1>Build Like You Mean It</h1>
디자인 탭에서…
헤더 글꼴: Lato, 굵게(B)
헤더 글꼴 크기: 38px
헤더 텍스트 색상: #ffffff
헤더 라인 높이: 1.3em
맞춤 여백: 20px 하단
애니메이션 스타일: 슬라이드
애니메이션 방향: 왼쪽
애니메이션 강도: 16%
설정 저장
다른 텍스트 모듈을 사용하여 텍스트 추가
일반적으로 동일한 텍스트 모듈의 h1 헤더 아래에 나머지 텍스트를 추가하면 됩니다. 그러나 h1 헤더와 그 아래에 있는 텍스트에 다른 애니메이션 효과를 추가하고 싶기 때문에 다른 텍스트 모듈을 만들어야 합니다. 방금 만든 모듈 아래에 텍스트 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.
콘텐츠 탭에서…
내용: “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 하단
애니메이션 스타일: 슬라이드
애니메이션 방향: 왼쪽
애니메이션 강도: 8%
설정 저장
버튼 추가
이제 왼쪽 열의 두 텍스트 모듈 아래에 버튼 모듈을 추가해 보겠습니다. 그런 다음 다음과 같이 설정을 업데이트합니다.
콘텐츠 탭에서…
하단 텍스트: 모두 다운로드
버튼 URL [URL 입력]
디자인 탭에서…
버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 15px
버튼 텍스트 색상: #01254c
버튼 배경색: #ffcd1c
버튼 테두리 너비: 0px
버튼 테두리 반경: 65px
버튼 문자 간격: 1px
버튼 글꼴: 굵게(B), 대문자(TT)
맞춤 패딩: 위쪽 10px, 오른쪽 30px, 아래쪽 10px, 왼쪽 30px
애니메이션 스타일: 슬라이드
애니메이션 방향: 왼쪽
애니메이션 강도: 16%
box shadow css 속성을 사용하여 멋진 글로우 효과를 추가하는 것을 잊지 마십시오. Custom CSS에서 Main Element 상자를 찾아 다음을 추가합니다.
box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);
설정 저장
첫 번째 Blurb 모듈 추가
그것이 우리의 왼쪽 열에 대한 것입니다. 이제 중간 열(첫 번째 1/4 열)에 Blurb 모듈을 추가해 보겠습니다.
다음과 같이 설정을 업데이트합니다.
콘텐츠 탭에서…
제목: 디비
아이콘 사용: 예
아이콘: [아이콘 선택]
배경 그라디언트 색상: #8b56ff, #5d3dff
그라디언트 유형: 선형
기울기 방향: 140deg
디자인 탭에서…
아이콘 색상: #ffffff
텍스트 색상: 라이트
텍스트 방향: 중앙
헤더 글꼴: 굵게(B), 대문자(TT)
헤더 문자 간격: 10px
사용자 정의 여백: 12% 하단
맞춤 패딩: 위쪽 40px, 오른쪽 30px, 아래쪽 30px, 왼쪽 30px
애니메이션 스타일: 접기
애니메이션 방향: 왼쪽
애니메이션 지연: 200ms
고급 탭에서…
여기에서 모듈에 글로우 효과를 추가하고 헤더를 약간 들여쓸 수 있습니다.
기본 요소 상자에 다음 CSS를 추가합니다.
border-radius: 6px; box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);
Blurb Title 상자에 다음 CSS를 추가합니다.
text-indent: 10px;
설정 저장
Blurb 모듈을 복제하여 다음 3개의 Blurb 만들기
이제 첫 번째 Blurb 모듈이 디자인되고 애니메이션되었으므로 모듈을 복제하여 나머지 Blurb를 만들 수 있습니다.
Blurb 모듈 위로 마우스를 가져간 다음 복제 모듈 아이콘을 클릭합니다. 아래에 나타나는 새 복제 모듈에서 다음과 같이 설정을 업데이트합니다.
콘텐츠 탭에서…
제목: 블룸
아이콘: [새 아이콘 선택]
배경 그라데이션 색상: #ff56f9, #c43dff
디자인 탭에서…
애니메이션 방향: 아래로
고급 탭에서…
기본 요소 상자의 CSS를 다음으로 바꿉니다.
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);
설정 저장
블러브 모듈의 다른 복제본을 만들고 해당 복제본을 맨 오른쪽 열로 드래그합니다. 그런 다음 해당 Blurb 모듈을 다음 설정으로 업데이트합니다.
콘텐츠 탭에서…
제목: 엑스트라
아이콘: [새 아이콘 선택]
배경 그라데이션 색상: #56ffda, #38d5ea
디자인 탭에서…
애니메이션 방향: 위로
고급 탭에서…
기본 요소 상자의 CSS를 다음으로 바꿉니다.
border-radius: 6px; box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);
바로 아래에 나타나도록 오른쪽 열에서 방금 업데이트한 블러 모듈의 다른 복제본을 만듭니다. 그런 다음 해당 Blurb 모듈을 다음 설정으로 업데이트합니다.
콘텐츠 탭에서…
제목: 군주
아이콘: [새 아이콘 선택]
배경 그라데이션 색상: #f2743a, #ff5656
디자인 탭에서…
애니메이션 방향: 오른쪽
고급 탭에서…
기본 요소 상자의 CSS를 다음으로 바꿉니다.
border-radius: 6px; box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
설정 저장
이제 다음과 같이 행 설정을 업데이트하여 간격을 올바르게 조정해 보겠습니다.
디자인 탭에서…
사용자 정의 너비 사용: 예
사용자 정의 너비: 1366px
사용자 지정 거터 너비 사용: 예
거터 폭: 2
맞춤 패딩: 위쪽 80px, 오른쪽 0px, 아래쪽 160px, 왼쪽 0px
Comn 1 사용자 정의 패딩: 140px 상단
두 번째 행 만들기
이제 섹션에 대한 다음 행을 만들 준비가 되었습니다. 작업 속도를 높이기 위해 이전에 디자인한 행과 모듈에서 디자인 요소를 복제하고 복사합니다.
먼저 섹션에 새로운 1열 행을 추가해 보겠습니다. 그런 다음 다음으로 행 설정을 업데이트합니다.
사용자 정의 너비 사용: 예
사용자 정의 너비: 1366px
사용자 지정 거터 너비 사용: 예
거터 폭: 2
설정 저장
다음으로 h1 제목을 포함하는 생성한 첫 번째 행의 첫 번째 텍스트 모듈을 복사합니다. 그런 다음 다음과 같이 설정을 업데이트합니다.
콘텐츠 탭에서…
현재 h1 태그를 다음으로 바꿉니다.
<h1>Don't Settle for Less</h1>
디자인 탭에서…
텍스트 방향: 중앙
애니메이션 스타일: 뒤집기
애니메이션 강도: 70%
설정 저장
다음으로 이전 행에서 버튼 모듈을 복사하고 두 번째 행에서 방금 업데이트를 마친 텍스트 모듈 아래에 붙여넣습니다. 그런 다음 다음과 같이 버튼 모듈을 업데이트합니다.
콘텐츠 탭에서…
버튼 텍스트: 오늘 가입
디자인 탭에서…
버튼 정렬: 중앙
애니메이션 스타일: 뒤집기
애니메이션 강도: 70%
설정 저장
이제 마지막 행입니다. 1/2 1/2 열 구조로 새 행을 만듭니다. 모듈을 추가하기 전에 다음과 같이 행 설정을 업데이트하십시오.
디자인 탭에서…
사용자 지정 거터 너비 사용: 예
거터 폭: 2
설정 저장
그런 다음 이전 행에서 보라색 "Divi" Blurb 모듈을 복사하여 새 행의 왼쪽 열에 붙여넣습니다. 그런 다음 다음 설정을 업데이트합니다.
콘텐츠 탭에서…
제목: 빌더
아이콘: [새 아이콘 선택]
배경 그라데이션 색상: #ff568e, #ff3d5d
고급 탭에서…
기본 요소 상자의 CSS를 다음으로 바꿉니다.
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);
설정 저장
다음으로 생성한 첫 번째 행의 맨 오른쪽 열 상단에 있는 청록색 "Extra" 블러브 모듈을 복사합니다. 그런 다음 새 세 번째 행의 오른쪽 열에 붙여넣습니다.
그런 다음 다음과 같이 광고 설정을 업데이트합니다.
콘텐츠 탭에서…
제목: 고요한
아이콘: [새 아이콘 선택]
배경 그라데이션 색상: #3da4ff, #385eea
고급 탭에서…
기본 요소 상자의 CSS를 다음으로 바꿉니다.
border-radius: 6px; box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);
설정 저장
그게 다야
보너스: 쉽게 가져올 수 있도록 이 섹션을 다운로드하십시오.
보너스 특전으로 오늘의 튜토리얼에 포함된 섹션을 아래의 이메일 수신 동의 양식을 사용하여 얻을 수 있는 무료 다운로드로 패키징했습니다. 이메일을 입력하면 다운로드 버튼이 나타납니다. 이미 Divi 뉴스레터의 일부인 경우 "재구독"에 대해 걱정하지 마십시오. 이메일을 다시 입력해도 더 이상 이메일이 전송되거나 중복되지 않습니다. 그것은 단순히 다운로드를 표시합니다.
즐기다!
레이아웃 팩 다운로드
무료로 다운로드
Divi 뉴스레터에 가입하시면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
이 다운로드를 사용하려면 먼저 다운로드 폴더에서 Animation_Effects_Part_4.zip 이라는 압축 파일을 찾습니다. 압축을 풀어 다음 가져오기를 표시합니다.
애니메이션 효과 파트 4(섹션 1).json
애니메이션 효과 파트 4(섹션 2).json
WordPress 관리자에서 Divi > Divi 라이브러리 > 가져오기 및 내보내기로 이동합니다. 이식성 모달이 나타나면 가져오기 탭과 파일 선택 버튼을 클릭합니다.
원하는 json 파일을 선택하고 "Divi Builder 레이아웃 가져오기"를 클릭합니다. 가져오기가 완료되면 위 섹션 중 하나를 추가하려는 게시물이나 페이지로 이동합니다.
비주얼 빌더를 활성화하십시오. 위 섹션 중 하나를 추가하려는 페이지 부분으로 이동합니다. 새 섹션 추가 아이콘을 클릭하면 "라이브러리에서 추가" 옵션이 표시됩니다. 이 옵션을 선택하고 원하는 레이아웃을 선택합니다.
마무리
이 멋진 섹션을 함께 만드는 것이 즐거웠기를 바랍니다. 색상, 빛나는 그림자 및 독창적인 애니메이션의 조합으로 자신의 다운로드 또는 제품을 선보일 수 있는 뛰어난 레이아웃이 됩니다.
다가오는
5부에서는 섹션 내에서 롤 애니메이션 스타일을 휴대폰에 성공적으로 통합하는 방법을 보여 드리겠습니다.
아래 의견에서 여러분의 의견을 기다리겠습니다.
건배!