Divi의 타이틀에 텍스트 블록 애니메이션을 추가하는 방법

제목은 홈페이지에서 가장 중요한 부분 중 하나입니다. 이것은 일반적으로 처음 보는 것이므로 첫인상을 결정합니다. 다른 첫인상과 마찬가지로 당신은 그것이 좋기를 원합니다. 이제 제목을 창의적으로 표현할 방법을 찾고 있다면 CSS 텍스트 블록 애니메이션을 제목에 추가하는 방법을 보여줄 것이며 레이아웃 JSON 파일을 무료로 다운로드 할 수도 있으므로이 튜토리얼을 즐길 수 있습니다!

측량

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

디자인을 시작합시다

섹션 1 추가

그라데이션 배경

새 페이지 또는 작업중인 페이지에 일반 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 다음 그라데이션 배경을 적용합니다.

색상 1 : # f0f2b
색상 2 : # c10b1a
그라디언트 유형 : 선형
그라데이션 방향 : 63deg

간격

섹션 디자인 탭으로 전환하고 다양한 화면 크기에 다음 사용자 정의 상단 및 하단 채우기 값을 적용하십시오.

상단 패딩 : 7vw (데스크톱), 20vw (태블릿), 25vw (전화)
하단 패딩 : 7vw (데스크), 20vw (태블릿), 25vw (전화)

경계

또한 섹션에 테두리를 추가하십시오.

테두리 너비 : 2vw (상단, 왼쪽, 오른쪽)
아래쪽 테두리 너비 : 0vw
테두리 색상 : #ffffff

새 행 추가

기둥 구조

다음 열 구조를 사용하여 섹션에 새 줄을 계속 추가하십시오.

크기 조정

선 매개 변수를 열고 치수 매개 변수를 적절하게 수정하십시오.

너비 : 100 %
최대 폭 : 100 %

열에 텍스트 모듈 추가

H1 콘텐츠 추가

그런 다음 선택한 H1 제목이있는 텍스트 모듈을 추가하십시오.

H1 제목의 각 단어에 Div 태그 추가

제목 문구의 텍스트 탭으로 전환하고 제목의 각 단어에 다른 div를 추가합니다. CSS ID는 각 단어마다 달라야합니다.

준비된
...에서
짓다
아름다운
웹 사이트?

H1 텍스트 설정

모듈 디자인 탭으로 전환하고 그에 따라 H1 텍스트 설정을 변경합니다.

제목 글꼴 : Work Sans
제목 글꼴 무게 : 중간
헤더 텍스트 색상 : #ffffff
헤더 텍스트 크기 : 4vw (데스크톱), 5vw (태블릿), 6vw (휴대 전화)
헤드 라인 높이 : 1,4 em

간격

그런 다음 다른 화면 크기에서 여백 값을 변경하십시오.

왼쪽 여백 : 20vw (데스크 및 태블릿), 15vw (전화)
오른쪽 여백 : 35vw (데스크톱), 20vw (태블릿), 15vw (전화)

열에 코드 모듈 추가

CSS 코드 삽입

텍스트 블록 애니메이션을 제목에 적용하려면 CSS 코드가 필요합니다. 이 CSS 코드를 새 코드 모듈에 추가합니다.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

간격

모듈 디자인 탭으로 전환하고 모든 기본 하단 패딩을 제거합니다.

아래쪽 여백 : 0px

열에 버튼 모듈 추가

복사본 추가

다음으로 필요한 모듈은 버튼 모듈입니다. 원하는 사본을 입력하십시오.

버튼 설정

모듈 디자인 탭으로 전환하고 그에 따라 버튼 설정을 변경합니다.

버튼에 사용자 정의 스타일 사용 : 예
버튼 텍스트 크기 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
버튼 텍스트 색상 : #ffffff
버튼 배경색 : # 000000
버튼 테두리 너비 : 0px

버튼 글꼴 : Work Sans

간격

그런 다음 간격 설정으로 이동하여 다양한 화면 크기에 사용자 정의 여백 및 패딩 값을 적용하십시오.

상단 여백 : 3vw (사무실),
왼쪽 여백 : 20vw (데스크 및 태블릿), 15vw (전화)
상단 패딩 : 1.2vw (데스크톱), 2vw (태블릿), 4vw (전화)
하단 패딩 : 1.2vw (데스크), 2vw (태블릿), 4vw (전화)
왼쪽 패딩 : 1.8vw (데스크톱), 3vw (태블릿), 6vw (전화)
오른쪽 패딩 : 1.8vw (데스크), 3vw (태블릿), 6vw (전화)

애니메이션

애니메이션 설정도 사용자 지정합니다.

애니메이션 스타일 : 뒤집기
애니메이션 방향 : 아래로
애니메이션 지연 : 2000ms
애니메이션 강도 : 100 %
애니메이션 시작 불투명도 : 100 %
애니메이션 속도 곡선 : Ease-in-out
애니메이션 반복 : 한 번

섹션 2 추가

이전 섹션 바로 아래에 새 일반 섹션을 추가하여 계속하십시오.

간격

섹션 설정을 열고 기본 상단 패딩을 제거하십시오.

상단 패딩 : 0px