Divi의 호버 옵션을 사용하여 애니메이션 제목 만들기

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다. 이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi의 호버 옵션과 Driving School 레이아웃 팩을 사용하여 애니메이션 타이틀을 만드는 방법을 보여 드리겠습니다. 이는 사본의 다른 부분을 주목하고 작업을 트리거하는 훌륭한 접근 방식입니다.

가자!

시사

튜토리얼에 들어가기 전에 결과를 간단히 살펴보겠습니다.

드라이버 스쿨 랜딩 페이지 업로드

이 튜토리얼을 만들기 위해 Driver School Layout Pack의 랜딩 페이지를 사용할 것입니다. 새 페이지를 추가하고 Visual Builder를 활성화한 다음 미리 만들어진 레이아웃에서 랜딩 페이지를 선택하세요.

애니메이션 제목 만들기 #1

섹션 그라데이션 배경 변경

첫 번째 예제를 작성해 봅시다! 이 애니메이션 제목을 페이지의 영웅 섹션에 추가하고 있습니다. 그러나 거기에 도달하기 전에 영웅 섹션의 설정을 열고 그라디언트 배경 오버레이 색상을 변경하십시오.

• 색상 1: rgba(0,0,0,0.94)
• 색상 2: rgba(12,12,12,0.63)

영웅 섹션에서 두 개의 마지막 행 제거

섹션의 마지막 두 행을 제거하여 계속합니다.

구분선 정렬 변경

우리는 여전히 거기에 있는 행을 유지하고 있습니다. 변경해야 할 유일한 것은 Divider 모듈의 모듈 정렬입니다.

• 모듈 정렬: 중앙

새 행 추가

열 구조

이전 행 바로 아래에 다음 열 구조를 사용하여 새 행을 추가합니다.

간격

다음 행의 기본 사용자 지정 패딩을 제거합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px

열에 텍스트 모듈 추가

콘텐츠 추가

우리에게 필요한 유일한 모듈은 텍스트 모듈입니다. 제목과 단락 링크라는 두 가지 다른 텍스트 유형을 사용하고 있습니다. 계속해서 원하는 사본을 추가하고 각 문장 중간에 Shift + Enter를 눌러 사본이 두 줄로 표시되는지 확인하십시오.

기본 배경색

그런 다음 배경 설정으로 이동하여 기본 배경색을 텍스트 모듈에 추가합니다.

• 배경색: rgba(255,255,255,0)

호버 배경색

마우스 오버 시 배경색을 변경합니다.

• 배경색: #ffa53b

기본 텍스트 설정

다음으로 전체 텍스트 설정에서 텍스트 방향을 변경합니다.

• 텍스트 방향: 중앙

기본 링크 텍스트 설정

링크 탭으로 전환하고 링크 사본의 모양을 일부 변경합니다.

• 링크 글꼴 두께: 매우 굵게
• 링크 글꼴 스타일: 기울임꼴, 대문자, 밑줄
• 링크 밑줄 색상: rgba(255,255,255,0.3)
• 링크 텍스트 크기: 0px
• 링크 라인 높이: 0em

호버 링크 설정

다음 호버에서 일부 변경을 수행하십시오.

• 링크 텍스트 크기: 40px
• 링크 라인 높이: 1.8em

기본 제목 텍스트 설정

제목 텍스트 설정도 일부 변경합니다.

• 제목 글꼴 두께: 매우 굵게
• 제목 글꼴 스타일: 대문자
• 제목 텍스트 색상: #ffffff
• 제목 텍스트 크기: 70px(데스크톱), 40px(태블릿), 30px(전화)
• 제목 줄 높이: 1.4em

호버 제목 텍스트 설정

호버에 약간의 조정이 있습니다.

• 제목 텍스트 색상: rgba(255,255,255,0)
• 제목 텍스트 크기: 0px

기본 간격

간격 설정으로 이동하여 사용자 정의 패딩 값을 추가하여 계속하십시오.

• 상단 패딩: 40px
• 하단 패딩: 0px
• 왼쪽 패딩: 20px
• 오른쪽 패딩: 20px

호버 간격

사용자 지정 패딩 값은 마우스를 가져갈 때 약간 다릅니다.

• 상단 패딩: 40px
• 하단 패딩: 40px
• 왼쪽 패딩: 20px
• 오른쪽 패딩: 20px

국경

테두리도 사용하고 있습니다.

• 테두리 너비: 10px
• 테두리 색상: #ffa53b

전환

그리고 고급 탭에서 전환 지속 시간을 변경하여 빠른 전환을 추가합니다.

• 전환 시간: 0ms

애니메이션 제목 #2 만들기

새 섹션 추가

배경색

다음 예제로 넘어갑니다! 영웅 섹션 바로 아래에 새 섹션을 추가하고 배경색을 추가합니다.

• 배경색: #efefef

간격

그런 다음 간격 설정으로 이동하여 다양한 여백 및 패딩 값을 사용합니다.

• 하단 여백: 100px
• 오른쪽 여백: 200px(데스크톱), 100px(태블릿), 50px(전화)
• 상단 패딩: 54px
• 하단 패딩: 54px

박스 섀도우

이 섹션을 레이아웃 팩과 일치시키기 위해 미묘한 상자 그림자도 추가합니다.

• 상자 그림자 수평 위치: 30px
• 상자 그림자 수직 위치: 30px
• 상자 그림자 확산 강도: -10px
• 그림자 색상: #ffa53b

새 행 추가

열 구조

이 섹션에 추가할 행에는 다음 열 구조가 필요합니다.

텍스트 모듈 추가

콘텐츠 추가

제목 및 단락 링크를 사용하여 원하는 내용을 다시 한 번 추가합니다. 또한 방문자가 웹사이트의 다른 부분을 쉽게 탐색할 수 있도록 목록을 사용하고 있습니다.

기본 링크 텍스트 설정

링크 텍스트 설정으로 이동하여 링크 사본의 모양을 일부 변경합니다.

• 링크 글꼴 스타일: 밑줄
• 링크 텍스트 색상: #000000
• 링크 텍스트 크기: 0px(데스크톱), 20px(태블릿), 13px(전화)
• 링크 라인 높이: 0px(데스크톱), 1.8em(태블릿 및 휴대폰)

마우스 오버 링크 텍스트 설정

호버에서 약간의 조정을 수행하십시오.

• 링크 텍스트 크기: 30px
• 링크 라인 높이: 2.8em

기본 제목 텍스트 설정

선택한 제목도 수정해야 합니다.

• 제목 2 글꼴 두께: 매우 굵게
• 제목 2 글꼴 스타일: 대문자
• 제목 2 텍스트 크기: 30px(데스크톱 및 태블릿), 20px(전화)
• 제목 2 글자 간격: 1px

호버 제목 텍스트 설정

마우스 오버 시 텍스트 크기를 변경합니다.

• 제목 2 텍스트 크기: 0px

기본 간격

간격 설정으로 이동하여 사용자 정의 여백 및 패딩 값을 추가하여 계속하십시오.

• 왼쪽 여백: 0px(데스크톱, 태블릿 및 전화)
• 상단 패딩: 40px
• 왼쪽 패딩: 50px

호버 간격

마우스 오버 시 왼쪽 여백을 변경합니다.

• 왼쪽 여백: 200px

기본 테두리

다음으로 텍스트 모듈에 왼쪽 테두리를 추가합니다.

• 왼쪽 테두리 너비: 5px
• 왼쪽 테두리 색상: #ffa53b

호버 테두리

호버에서 모든 테두리 너비를 제거하십시오.

• 왼쪽 테두리 너비: 0px

전환

마지막으로 약간 더 높은 전환 지속 시간을 사용하여 부드러운 전환을 만듭니다.

• 전환 시간: 500ms

시사

이제 모든 단계를 거쳤으므로 최종 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 사용 사례 게시물에서는 Divi의 기본 제공 옵션만 사용하여 마우스를 가져갈 때 애니메이션 제목을 만드는 방법을 보여주었습니다. 이것은 사본의 특정 부분을 스포트라이트에 넣고 창의적인 방식으로 방문자의 행동을 유발하는 좋은 방법입니다. 질문이 있으시면 아래의 댓글 섹션에 댓글을 남겨주세요!