Divi 행동 유도 모듈에 애니메이션을 적용하는 방법

우리의 시그니처 테마인 Divi는 기본 모듈 라이브러리에 대한 다양한 스타일 옵션으로 가득 차 있습니다. 웹 사이트의 요소가 어떻게 보일지 세부적으로 제어할 수 있을 뿐만 아니라 페이지에 모션을 추가할 수도 있습니다. Divi에는 다음 웹 디자인 프로젝트에 추가할 수 있는 여러 애니메이션 효과가 포함되어 있습니다. 이 게시물에서는 기본 Call to Action 모듈 내에서 Divi의 다음 애니메이션 설정을 사용하는 방법을 살펴보겠습니다.

1. 호버
2. 스크롤 효과
3. 애니메이션과
4. 어려운

이 튜토리얼에서는 Divi 마케팅 대행사 레이아웃 팩 내의 섹션을 다시 만듭니다. 우리는 랜딩 페이지 레이아웃 작업을 할 것입니다.

랜딩 페이지 레이아웃 설치

페이지 레이아웃을 설치하려면 먼저 WordPress에서 새 페이지를 만들어야 합니다. 왼쪽 메뉴에서 페이지 메뉴 항목 위로 마우스를 가져가면 됩니다. 그런 다음 새로 추가를 클릭합니다 .

기본 WordPress 편집기인 Gutenberg에서 새 페이지 의 제목을 설정하세요 . 다음으로, 보라색 Divi Builder 사용 버튼을 클릭하세요 .

그러면 세 가지 옵션이 제공됩니다. 보라색 가운데 버튼인 Browse Layouts 를 클릭 하겠습니다.

그러면 선택할 수 있도록 미리 디자인된 페이지가 포함된 Divi의 방대한 레이아웃 라이브러리가 열립니다. 우리는 마케팅 대행사 레이아웃 팩을 선택 하겠습니다.

레이아웃 팩 내에서는 랜딩 페이지 레이아웃을 사용합니다. 레이아웃을 클릭한 다음 파란색 이 레이아웃 사용 버튼을 클릭하여 새로 생성된 페이지에 레이아웃을 로드합니다.

레이아웃이 로드되면 화면 오른쪽 하단에 있는 녹색 저장 버튼을 클릭합니다 .

이제 실제 작업이 시작됩니다! 첫 번째 클릭 유도 문구를 만들어 보겠습니다.

행동 촉구 모듈 추가

이 튜토리얼 전체에서는 이 섹션에서 사용된 텍스트 및 버튼 모듈을 대체하기 위해 클릭 유도 문안 모듈을 사용합니다.

시작하려면 먼저 이러한 모듈을 삭제해 보겠습니다. 각 모듈 위로 마우스를 가져가서 회색 팝업 메뉴가 나타나면 휴지통 아이콘을 클릭하세요. 소개라는 텍스트 모듈을 그대로 두고 싶지만 하나의 클릭 유도 문구를 사용하여 삭제한 모듈을 교체하겠습니다.

다음으로, 행에 Call to Action 모듈을 추가하려고 합니다. 텍스트 모듈 위에 마우스를 놓고 회색 더하기 아이콘을 클릭하면 됩니다.

그러면 모듈 팝업이 열립니다. 거기에서 Call to Action 모듈 아이콘을 클릭합니다 .

모듈이 추가되면 레이아웃 내에서 사용할 수 있도록 스타일을 지정할 수 있습니다.

행동 촉구 모듈 스타일링

새로 추가된 Call to Action 모듈에 대해 원래 모듈의 동일한 복사본을 사용할 것입니다. 이 콘텐츠를 모듈의 제목, 버튼 및 본문 필드에 입력할 수 있습니다.

행동 촉구 텍스트 스타일 지정

이제 모듈 스타일을 지정해 보겠습니다. 먼저 행동 촉구 모듈의 디자인 탭을 클릭합니다. 먼저 텍스트의 정렬과 색상을 설정하고 싶습니다. 텍스트를 Center 에 정렬 하고 색상을 Light 로 설정 하려고 합니다.

둘째, 제목 텍스트 스타일을 지정하고 싶습니다. 아래에서 사용할 설정을 찾으세요.

제목 텍스트 설정:

• 타이틀 폰트: Poppins
• 제목 글꼴 두께: 굵게
• 제목 텍스트 크기: 55px
• 제목 줄 높이: 1.2em

이전에 사용된 텍스트와 어떻게 유사한지 확인하세요. Divi 마케팅 대행사 레이아웃 팩에서 스타일 지침을 받아보겠습니다.

셋째, 본문 텍스트의 스타일을 지정하고 싶습니다. 아래 설정을 사용하여 모듈의 본문 텍스트를 가져옵니다.

본문 설정:

• 본문 글꼴: Raleway
• 본문 글꼴 두께: 일반
• 본문 텍스트 크기: 16px
• 바디 라인 높이: 1.8em

모듈 내 버튼 스타일

마지막으로 다음 설정을 사용하여 Call to Action 모듈의 버튼 스타일을 지정하겠습니다.

버튼 설정:

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 14px
• 버튼 텍스트 색상: #000000
• 버튼 배경: #ffffff
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 10px
• 버튼 글꼴: Poppins
• 버튼 글꼴 두께: 굵게
• 버튼 패딩:
  • 상단 및 하단 패딩: 20px
  • 왼쪽 및 오른쪽 패딩: 30px

모듈에 패딩 추가하기

디자인 탭을 떠나기 전에 행동 촉구 모듈의 내용에 패딩을 추가해 보겠습니다. 이를 위해 간격 탭까지 아래로 스크롤 하겠습니다. 그런 다음 왼쪽 및 오른쪽 패딩 모두에 10%를 입력합니다 .

배경색 변경

모듈 스타일 지정을 마치려면 디자인 탭을 종료하고 마지막으로 콘텐츠 탭에서 끝납니다. 콘텐츠 탭을 클릭한 다음 배경 탭까지 아래로 스크롤합니다. 그런 다음 배경색 사용 토글을 선택 취소하여 모듈의 기본 배경색을 제거합니다.

완료되면 녹색 확인 표시를 클릭하여 작업을 저장하고 Call to Action 모듈을 닫습니다.

호버 효과로 모듈 애니메이션

미묘한 호버 애니메이션을 사용하여 첫 번째 행동 유도 모듈 ​​애니메이션을 시작하겠습니다. 아래에서 우리 작업의 최종 제품을 볼 수 있습니다.

호버 설정 활성화

시작하려면 새로 스타일이 지정된 Call to Action 모듈에 대한 모듈 설정으로 들어갑니다 .

그런 다음 디자인 탭을 클릭합니다 . 마지막으로 변환 탭까지 아래로 스크롤합니다 . 여기가 이 모듈의 호버 효과를 활성화하는 곳입니다. 변환 섹션에 있으면 변환 위로 마우스를 가져 가 플라이아웃 메뉴를 표시합니다. 메뉴에서 포인터 아이콘 을 클릭합니다 . 이 아이콘은 마우스를 올리면 활성화되는 변환 옵션 내에서 대체 설정을 지정할 수 있음을 의미합니다.

Divi의 가장 큰 장점 중 하나는 Divi의 많은 항목과 옵션에도 동일한 호버 효과를 활성화할 수 있다는 것입니다. 우리의 경우 모듈 위로 마우스를 가져가면 모듈의 크기가 5%씩 증가하기를 원합니다.

먼저 hover 탭을 클릭 하겠습니다. 그러면 모듈을 변환하는 데 사용할 수 있는 옵션이 표시됩니다. 두 번째로 Scale 아이콘 을 클릭 하겠습니다. 우리는 모듈의 전체 크기를 늘리고 싶습니다. 다음으로 모듈이 증가할 양을 입력합니다. 현재보다 5% 더 크게 만들고 싶으므로 크기 옵션에 105%를 입력합니다 . 변경 사항을 저장하려면 녹색 확인 표시 버튼을 클릭합니다 .

행동 촉구 모듈과 함께 스크롤 효과 사용

스크롤 효과를 사용하여 행동 촉구 모듈에 미묘한 애니메이션을 추가하는 방법을 살펴보겠습니다. Divi의 기본 스크롤 효과를 통해 얻을 수 있는 결과는 다음과 같습니다.

우리는 새로운 스타일의 Call to Action 모듈부터 시작하겠습니다. 변환 설정과 달리 모듈의 고급 탭에서 스크롤 효과를 활성화하겠습니다. 따라서 고급 탭을 클릭한 다음 스크롤 효과 탭까지 아래로 스크롤 합니다.

스크롤 효과 탭에 들어가면 이 미묘한 효과를 만들기 위해 알아야 할 몇 가지 설정이 있습니다. 먼저 이 모듈에서는 고정 위치를 고정하지 않음으로 유지하겠습니다. 다음으로 페이드 인 및 페이드 아웃 스크롤 효과를 사용해 보겠습니다. 아이콘을 클릭하여 활성화합니다 . 세 번째로 페이딩 인 및 아웃 활성화 토글을 활성화하여 설정을 활성화하려고 합니다.

이 애니메이션 스타일의 주요 부분은 시작, 중간 및 종료 불투명도에 사용되는 수치입니다. 이 설정은 모듈이 화면 뷰포트의 다양한 섹션에 들어올 때 활성화됩니다. 이 예에서는 다음 설정을 사용합니다.

페이드 인 및 페이드 아웃 설정:

• 시작 불투명도: 10%
• 중간 불투명도: 99%
• 종료 불투명도: 20%

모션 효과 트리거의 경우 요소의 중간에 초점이 맞춰지면 페이드 인 및 아웃이 시작되기를 원합니다.

이러한 설정을 사용하면 행동 촉구 모듈 내에서 깔끔한 스크롤 효과를 만들 수 있습니다. 다음으로, 애니메이션 탭을 사용하여 다른 행동 촉구 모듈의 입구를 애니메이션화할 수 있는 방법을 살펴보겠습니다.

입구 애니메이션 및 Divi

모듈이 화면 뷰포트에 들어갈 때 입구 애니메이션이 발생합니다. 스크롤 효과를 사용하면 뷰포트를 스크롤할 때마다 모듈과 지속적으로 상호 작용할 수 있지만 입구 애니메이션은 한 번 활성화됩니다. 시작 애니메이션은 반복될 수 있지만, 스크롤하거나 마우스를 올려 놓는 등의 작업을 해도 다시 애니메이션화되지는 않습니다. 입구 애니메이션을 만드는 방법은 다음과 같습니다. 모듈이 보이면 확대/축소 애니메이션을 사용하고 싶습니다.

클릭 유도 문구 모듈 설정 창에서 디자인 탭을 클릭 하고 애니메이션까지 아래로 스크롤합니다 . 내부에는 이 모듈에 초점이 맞춰지면 사용할 수 있는 여러 애니메이션 옵션이 있습니다. 확대/축소 애니메이션 스타일을 클릭하세요. 애니메이션 방향의 경우 기본값인 중앙으로 두고 다른 모든 기본 설정은 그대로 두겠습니다.

행동 촉구 모듈과 함께 고정 효과 사용

마지막 예에서는 Divi의 기본 고정 효과를 사용하는 방법을 보여줍니다. 이를 위해 새 행과 섹션을 만들어야 합니다.

새 섹션을 추가하려면 파란색 더하기 아이콘을 클릭하세요 .

그런 다음 1열 행 레이아웃을 선택합니다 .

새 모듈 추가 창을 닫을 수 있도록 사전 제작된 행동 유도 모듈을 사용할 것입니다. 이 섹션에서는 설정을 입력 하고 배경색을 설정하는 것부터 시작하겠습니다. 이렇게 하려면 톱니바퀴 아이콘을 클릭하여 섹션 설정으로 이동하세요.

그런 다음 배경 탭까지 아래로 스크롤 하고 배경색을 #f1ede1 로 설정합니다 .

배경이 준비되었으므로 이제 끈적한 행동 유도 모듈이 표시된 대로 작동하도록 간격 설정을 추가해야 합니다. 따라서 디자인 탭을 클릭한 다음 간격 섹션으로 스크롤합니다 . 이 부분은 고정 애니메이션이 적용되는 것을 볼 수 있는 충분한 공간을 확보하는 데 중요합니다.

섹션의 간격을 수정하려면 다음 설정을 사용합니다.

섹션 간격 설정:

• 여백 상단: 0px
• 패딩 상단: 0px
• 하단 패딩: 300px

이러한 설정을 입력한 후 녹색 확인 표시를 클릭하여 작업을 저장할 수 있습니다. 이제 섹션 행 내에서 끈적이 효과를 활성화하겠습니다. 먼저 톱니바퀴 아이콘을 클릭하여 행 설정을 입력합니다 .

고급 탭으로 이동하기 전에 행의 배경색을 설정해 보겠습니다. 섹션에서 했던 것과 유사하게 배경 탭까지 아래로 스크롤 하고 배경색을 #000000 으로 설정합니다 .

이를 통해 우리 행은 이 튜토리얼을 시작할 때 만든 Call to Action 모듈과 거의 비슷해 보입니다. 그러나 패딩과 여백을 사용하여 이 행을 가장자리에서 가장자리로 확장할 것입니다. 이렇게 하면 웹 사이트 방문자가 사용할 때 고정 효과가 시각적으로 매력적이고 방해가 되지 않게 됩니다.

이제 디자인 탭으로 이동하여 크기 조정 탭을 클릭합니다 . 다음으로 Width와 Max Width를 100%로 설정했습니다 .

이제 Spacing 탭까지 아래로 스크롤하여 20px의 동일한 상단 및 하단 패딩 값을 추가합니다 . 이는 행동 촉구를 통해 더욱 매끄러운 모양을 만드는 데 도움이 됩니다.

이제 미적 측면을 다루었으므로 이제 스크롤 효과를 적용할 수 있습니다. 고급 탭으로 이동한 다음 스크롤 효과 탭을 클릭합니다 . 이제 Stick to Top 을 선택하여 Sticky Position을 활성화합니다 . 우리는 CTA를 화면 상단에 고정하기를 원하므로 Sticky Top Offset을 0px로 남겨둡니다. 변경할 유일한 다른 설정은 Bottom Sticky Limit이며 이제 섹션으로 설정하겠습니다 .

그것을 요 ​​약하기

보시다시피 기본적으로 Divi에는 페이지에 애니메이션과 움직임을 추가하는 많은 기능과 방법이 있습니다. 페이지를 소개하기 위해 움직임을 추가하거나 콘텐츠에 대한 관심을 불러일으키려는 경우 Divi는 이를 위한 도구를 제공합니다. 우리는 행동 촉구 모듈에 애니메이션을 적용하는 네 가지 방법을 다루었지만 Divi 내의 모듈 라이브러리 전체에서 이와 동일한 설정을 사용할 수 있습니다. 또한 이러한 설정을 섹션, 열 및 행에 적용하여 사용자를 위한 생동감 있고 독특한 페이지 디자인을 만들 수 있습니다.

Divi에서 애니메이션을 어떻게 사용하고 있나요? 이러한 기술에 관심이 있었나요? 댓글 섹션을 통해 알려주시고 대화를 시작해 보세요!