Divi의 애니메이션 설정으로 헤드라인을 멋지게 만드는 방법

귀하의 헤드라인은 일반적으로 사람들이 귀하의 웹사이트를 방문할 때 가장 먼저 읽는 것입니다. 정말 좋은 헤드라인을 갖는 것 외에도 사람들이 당신이 보여주는 것이 무엇이든 주목하고 실제로 읽게 만드는 것도 중요합니다. 헤드라인은 일반적으로 크기와 영웅 섹션의 중심 위치 때문에 눈에 띄지 않지만 한 단계 더 나아가 말 그대로 헤드라인을 돋보이게 만들고 싶다면 이 튜토리얼이 적합합니다.

우리는 Divi의 애니메이션 설정을 결합하여 방문자의 눈에 띄고 관심을 끄는 헤드라인을 만들 것입니다. 헤드라인을 5개 부분으로 나누고 방문자가 움직임을 따르고 공유되는 내용을 읽고 싶게 만드는 플래시 효과를 만듭니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.

데스크탑

이동하는

재창조를 시작합시다!

새 섹션 추가

배경색

만들기 시작합시다! 새 페이지를 만들고 일반 섹션을 추가하십시오. 섹션 설정을 열고 배경색을 변경합니다.

• 배경색: #ededed

간격

그런 다음 섹션의 간격 설정으로 이동하여 사용자 지정 하단 패딩을 추가합니다.

• 하단 패딩: 10vw

행 #1 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 행 배경색을 변경하십시오.

• 배경색: #c9c9c9

사이징

다음으로 크기 조정 설정으로 이동하여 행이 화면의 전체 너비를 차지하도록 합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

행의 기본 상단 및 하단 패딩도 제거합니다.

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

텍스트 모듈 #1 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 첫 번째 모듈은 텍스트 모듈입니다. 단락 텍스트 스타일을 사용하여 콘텐츠 상자에 헤드라인의 첫 번째 부분을 입력합니다.

배경색

그런 다음 모듈의 배경 설정으로 이동하여 배경색을 추가합니다.

• 배경색: #c9c9c9

텍스트 설정

디자인 탭에서도 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Didact Gothic
• 텍스트 글꼴 두께: 굵게
• 텍스트 색상: #000000
• 텍스트 크기: 10vw
• 텍스트 줄 높이: 0.9em
• 텍스트 방향: 중앙

간격

그리고 사용자 정의 상단 및 하단 패딩을 사용하여 원하는 모양을 만듭니다.

• 탑 패딩: 10vw
• 하단 패딩: 3vw

생기

마지막으로 애니메이션을 추가할 것입니다. 애니메이션 지속 시간과 시작 불투명도가 0인지 확인하는 것이 중요합니다. 이렇게 하면 텍스트 모듈이 플래시 효과와 함께 표시됩니다.

• 애니메이션 스타일: 페이드
• 애니메이션 반복: 한 번
• 애니메이션 지속 시간: 0ms
• 애니메이션 지연: 1000ms

복제 텍스트 모듈 x4

첫 번째 텍스트 모듈 수정이 완료되면 헤드라인의 길이에 따라 원하는 만큼 모듈을 복제할 수 있습니다. 플래시 효과로 표시하려는 헤드라인의 각 부분에 대해 별도의 텍스트 모듈이 필요합니다. 이 예에서는 4개의 추가 모듈이 필요합니다.

중복 #1 변경

콘텐츠

첫 번째 복제본의 복사본을 변경합니다.

배경색

배경색과 함께.

• 배경색: #5900ff

텍스트 색상

텍스트 색상을 흰색으로 변경합니다.

• 텍스트 색상: #ffffff

생기

그리고 애니메이션 설정에서 애니메이션 지연을 늘립니다. 이렇게 하면 방문자가 이 모듈이 표시되기 전에 이전 텍스트 모듈을 읽을 수 있는 충분한 시간을 가질 수 있습니다.

• 애니메이션 지연: 1500ms

중복 변경 #2

콘텐츠

다음으로 두 번째 복제본의 내용을 변경합니다.

배경색

배경색과 함께.

• 배경색: #ffb200

텍스트 색상

그리고 텍스트 색상도.

• 텍스트 색상: #ffffff

생기

다시 말하지만 애니메이션 지연이 이전 두 모듈에 사용된 애니메이션 지연보다 높은지 확인합니다. 우리는 사람들이 읽을 수 있는 충분한 시간을 주기 위해 각각의 사이에 500ms를 남겨둡니다.

• 애니메이션 지연: 2000ms

중복 변경 #3

콘텐츠

세 번째 복제본의 내용을 변경하여 계속합니다.

생기

애니메이션 지연과 함께.

• 애니메이션 지연: 2500ms

중복 변경 #4

콘텐츠

다음 및 마지막 복제로 넘어갑니다. 내용을 변경합니다.

배경색

배경색과 함께.

• 배경색: #000000

텍스트 색상

텍스트 색상도 수정합니다.

• 텍스트 색상: #3a3a3a

생기

그리고 애니메이션 설정에서 애니메이션 지연을 늘립니다.

• 애니메이션 지연: 3000ms

첫 번째 모듈을 제외한 각 텍스트 모듈에 음수 여백 추가

모든 텍스트 모듈을 사용자 정의했으면 계속해서 겹침을 만들 수 있습니다. 이 겹침을 만들기 위해 중복된 각 텍스트 모듈에 음수 위쪽 여백을 추가합니다. 즉, 첫 번째 모듈 다음에 오는 모든 모듈이 첫 번째 텍스트 모듈 위에 표시되도록 합니다.

• 최고 여백: -21.98vw

변환 행

변환 번역

변환 변환 설정으로 시작하여 전체 행을 변환하여 계속하십시오.

• 하단: -35vw

변환 회전

변환 회전 값도 수정합니다.

• 왼쪽: 320deg

행 #2 추가

열 구조

두 번째 줄로! 이제 헤드라인 효과가 적용되었으므로 나머지 모듈을 추가할 수 있습니다. 다음 열 구조를 사용하여 새 행을 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 조정 설정에서 행이 화면의 전체 너비를 차지하도록 허용합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

다음 행의 기본 상단 패딩을 제거합니다.

• 상단 패딩: 0px

열 2에 제목 텍스트 모듈 추가

H1 콘텐츠 추가

모듈 추가를 시작할 시간입니다! 우리가 필요로 하는 첫 번째 모듈은 제목 텍스트 모듈입니다. 원하는 H1 콘텐츠를 추가하세요.

H1 텍스트 설정

그런 다음 디자인 탭으로 이동하여 H1 텍스트 설정을 변경합니다.

• 제목 글꼴: Didact Gothic
• 제목 글꼴 두께: 굵게
• 제목 텍스트 크기: 1.8vw(데스크톱), 3.8vw(태블릿), 4vw(전화)

간격

간격 설정에 몇 가지 사용자 정의 여백 값을 추가하십시오.

• 최고 여백: -4vw
• 하단 여백: 2vw
• 왼쪽 여백: 30vw
• 오른쪽 여백: 30vw(데스크톱), 15vw(태블릿 및 전화)

2열에 디바이더 모듈 추가

시계

다음으로 필요한 모듈은 Divider 모듈입니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

색상

그런 다음 디자인 탭으로 이동하여 구분선 색상을 변경합니다.

• 색상: #000000

사이징

크기 설정도 수정합니다.

• 디바이더 무게: 8px
• 폭: 7%

간격

간격 설정과 함께.

• 하단 여백: 1vw
• 왼쪽 여백: 30vw

2열에 설명 텍스트 모듈 추가

콘텐츠 추가

다음으로 필요한 모듈은 또 다른 텍스트 모듈입니다. 원하는 콘텐츠를 입력하세요.

텍스트 설정

그런 다음 디자인 탭에서 텍스트 설정을 수정합니다.

• 텍스트 크기: 0.8vw(데스크톱), 1.3vw(태블릿), 1.6vw(전화)
• 텍스트 줄 높이: 2.2em

간격

간격 설정에서도 일부 사용자 정의 여백 값을 추가하십시오.

• 하단 여백: 3vw
• 왼쪽 여백: 30vw
• 오른쪽 여백: 30vw(데스크톱), 15vw(태블릿 및 전화)

2열에 버튼 모듈 추가

버튼 설정

버튼 모듈인 다음이자 마지막 모듈로 넘어갑니다. 원하는 사본을 추가하고 그에 따라 버튼 설정을 변경합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 1vw(데스크톱), 1.5vw(태블릿), 2vw(전화)
• 버튼 테두리 너비: 0px
• 버튼 글꼴: Poppins
• 글꼴 두께: 굵게
• 글꼴 스타일: 대문자

간격

간격 설정으로 이동하여 사용자 정의 여백 및 패딩 값을 추가하면 완료됩니다!

• 왼쪽 여백: 30vw
• 탑 패딩: 1vw
• 하단 패딩: 1vw
• 왼쪽 패딩: 3vw
• 오른쪽 패딩: 3vw

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi의 기본 제공 옵션만 사용하여 헤드라인을 돋보이게 만드는 방법을 보여주었습니다. 이것은 방문자의 관심을 끌고 독창적인 방식으로 메시지를 전달할 수 있는 훌륭한 기술입니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!