Divi의 행 정렬 및 애니메이션 설정으로 슬라이드인 CTA 만들기

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다. 이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 청소 회사 레이아웃 팩을 사용하여 Divi의 행 정렬 및 애니메이션 설정으로 슬라이드인 CTA를 만드는 방법을 보여 드리겠습니다.

이 문제를 해결하는 데 도움이 되도록 이미 있는 모든 애니메이션을 제거하는 것부터 시작하겠습니다. 그렇게 하면 유입되는 클릭 유도문안을 강조 표시할 수 있습니다.

가자!

시사

이 게시물에서 다룰 세 가지 다른 예를 살펴보겠습니다.

청소 회사 방문 페이지 업로드

새 페이지 추가 및 Visual Builder로 전환

이전에 언급했듯이 청소 회사 레이아웃 팩을 사용하여 이 자습서를 만들지만 만들고 있는 모든 웹 사이트에 이 접근 방식을 자유롭게 사용할 수 있습니다. 새 페이지를 추가하고 페이지 제목을 입력하고 Visual Builder로 즉시 전환하십시오.

청소 회사 방문 페이지 업로드

그렇게 하면 화면에 세 가지 옵션이 표시됩니다. 처음부터 빌드를 시작하거나 미리 만들어진 레이아웃을 선택하거나 기존 페이지를 복제할 수 있습니다. 두 번째 옵션을 선택합니다.

청소 회사 레이아웃 팩을 검색하고 방문 페이지 레이아웃을 선택하고 페이지에 업로드하십시오.

페이지의 모든 애니메이션 설정 제거

페이지에서 섹션 찾기

레이아웃이 페이지에 업로드되면 계속해서 다음 섹션을 찾으십시오.

애니메이션 제거

설정을 열고 이미 있는 애니메이션을 제거합니다.

모든 섹션으로 스타일 확장

시간을 절약하기 위해 이 애니메이션 스타일을 페이지의 모든 디자인 요소로 확장합니다. 마우스 오른쪽 버튼을 클릭하고 '애니메이션 스타일 확장'을 선택하여 페이지 섹션부터 시작하겠습니다. 페이지 전체의 모든 섹션에 적용되도록 설정하고 '확장'을 클릭합니다.

모든 행으로 스타일 확장

동일한 단계를 반복하되 대신 페이지 전체의 모든 행에 적용합니다.

모든 모듈로 스타일 확장

마지막으로 페이지의 모든 모듈에도 적용되도록 합니다.

CTA #1 만들기

새 행 추가

위치

첫 번째 슬라이드인 CTA 만들기를 시작해 보겠습니다. 다음 섹션 하단에 새 행을 추가합니다.

열 구조

방금 추가한 행에 대해 다음 열 구조를 선택합니다.

행 정렬

슬라이드인 효과를 만드는 데 도움이 되도록 행을 왼쪽으로 밀어보겠습니다.

• 행 정렬: 왼쪽

사이징

또한 행의 너비를 줄입니다.

• 사용자 정의 너비 사용: 예
• 맞춤 너비: 500px

간격

그리고 불필요한 공백을 없애기 위해 행의 위쪽 및 아래쪽 패딩을 제거합니다.

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

행동 유도 모듈 ​​추가

사본 추가

이제 행동 유도 모듈을 추가할 수 있습니다! 선택한 콘텐츠를 추가합니다.

링크 추가

다음으로 CTA 모듈에 대한 링크를 추가하십시오. 아직 리디렉션할 링크가 없으면 '#'만 입력하면 됩니다. 이 상자에 항목을 추가하지 않으면 버튼이 표시되지 않으므로 비워 두지 마십시오.

배경색 제거

CTA 모듈에는 기본적으로 배경색이 있습니다. 계속해서 백그라운드 설정에서 제거하십시오.

단면 그라디언트 복사

파란색 그라데이션 배경이 포함된 섹션을 엽니다. 그것에 대해 아무 것도 변경하지 않고 마우스 오른쪽 버튼을 클릭하고 설정을 복사하십시오.

CTA 모듈에서 그라디언트 붙여넣기

이 그라디언트 배경을 CTA 모듈에 붙여넣습니다.

제목 텍스트 설정

CTA 모듈 설정을 다시 열고 제목 텍스트 설정으로 이동하여 레이아웃 팩과 일치하도록 몇 가지를 변경합니다.

• 제목 글꼴: Ubuntu
• 제목 글꼴 두께: 굵게
• 제목 텍스트 크기: 24px(데스크톱 및 태블릿), 16px(전화)
• 제목 줄 높이: 1.2em

본문 설정

본문의 본문 글꼴 두께도 변경합니다.

• 본문 글꼴 두께: 반 굵게

버튼 설정

다음으로 버튼 설정을 변경합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 18px
• 버튼 텍스트 색상: #557df3
• 버튼 배경색: #FFFFFF
• 버튼 테두리 너비: 10px
• 버튼 테두리 색상: #FFFFFF
• 버튼 테두리 반경: 0px
• 버튼 글꼴: 우분투
• 글꼴 두께: 굵게

간격

모듈의 패딩도 늘립니다.

• 상단 패딩: 80px
• 하단 패딩: 80px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

국경

그런 다음 테두리 설정에서 오른쪽 상단 및 오른쪽 하단 테두리 반경을 추가합니다.

• 오른쪽 상단: 100px
• 오른쪽 하단: 100px

박스 섀도우

깊이를 더하기 위해 미묘한 상자 그림자를 추가합니다.

• 상자 그림자 흐림 강도: 71px
• 상자 그림자 확산 강도: -5px

생기

마지막으로 CTA 모듈에 애니메이션 효과를 부여하십시오.

• 애니메이션 방향: 오른쪽
• 애니메이션 강도: 100%
• 애니메이션 시작 불투명도: 100%
• 애니메이션 속도 곡선: 선형

CTA #2 만들기

CTA #1 행 복제 및 변경

복제 행

두 번째 예를 생성하려면 첫 번째 행을 복제하십시오.

섹션으로 드래그

페이지를 아래로 스크롤하여 여기에 복제본을 배치하십시오.

섹션 상단 패딩 제거

행을 넣은 섹션의 설정을 열고 상단 패딩을 제거합니다.

• 상단 패딩: 0px

섹션 상단 왼쪽 테두리 반경 제거

다음 테두리 설정으로 이동하여 왼쪽 상단 테두리 반경도 제거합니다.

CTA 오른쪽 상단 테두리 반경 제거

그런 다음 CTA 모듈을 열고 오른쪽 상단 경계 반경을 제거하여 섹션과 모듈이 혼합되도록 합니다.

애니메이션 변경

이 슬라이드인 CTA에서는 다른 애니메이션을 사용하겠습니다. 다른 애니메이션 옵션도 자유롭게 사용하십시오.

• 애니메이션 방향: 중앙
• 애니메이션 시작 불투명도: 100%
• 애니메이션 속도 곡선: 선형

CTA #3 만들기

CTA #1 행 복제 및 변경

복제 행

마지막 예제를 만들기 위해 행을 다시 한 번 복제합니다.

섹션으로 드래그

다음 섹션에 복제본을 배치합니다.

행 정렬 변경

모듈의 행 설정을 열고 정렬을 오른쪽으로 변경합니다.

• 행 정렬: 오른쪽

CTA 그라데이션 배경 제거

모듈의 그라데이션 배경도 제거하십시오.

대신 배경색 사용

대신 배경색을 사용하십시오.

• 배경색: #f2835a

버튼 텍스트 색상 변경

배경색과 일치시키려면 버튼 텍스트 색상도 변경하십시오.

• 버튼 텍스트 색상: #f2835a

CTA 테두리 반경 제거

우리는 CTA 모듈에 주어진 모든 경계 반경을 제거하여 정사각형으로 바꾸고 있습니다.

애니메이션 변경

다음으로 애니메이션 설정을 변경합니다.

• 애니메이션 방향: 아래로
• 애니메이션 강도: 100%
• 애니메이션 시작 불투명도: 100%
• 애니메이션 속도 곡선: 선형

섹션 하단 패딩 제거

마지막으로 모듈이 있는 섹션의 아래쪽 패딩을 제거하여 모듈을 섹션의 맨 아래로 밀어넣으면 끝입니다!

• 하단 패딩: 0px

시사

우리가 만든 슬라이드인 CTA의 세 가지 예를 마지막으로 살펴보겠습니다.

마지막 생각들

이 게시물에서는 Divi의 청소 회사 레이아웃 팩을 사용하여 슬라이드인 CTA를 만드는 방법을 보여주었습니다. 페이지에 이미 있는 애니메이션을 제거하는 것으로 시작했습니다. 그런 다음 관심을 끌기 위해 3개의 슬라이드인 CTA를 만들었습니다. 이 블로그 게시물은 매주 디자인 도구 상자에 무언가를 넣으려고 하는 Divi 디자인 이니셔티브의 일부입니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!