"위닝 스핀" 스크롤 효과로 CTA를 높이는 방법

상을 받는 것은 언제나 즐겁습니다. 그렇기 때문에 회사는 무료 물건을 제공하여 온라인으로 제품과 서비스를 마케팅합니다. 첫 주문 시 무료 디저트 쿠폰이 될 수도 있고, 이메일 목록을 구독하면 무료 전자책이 될 수도 있습니다. 그러나 때로는 공짜라도 웹에서 무시될 수 있습니다. 우아한 "위닝 스핀" 스크롤 효과를 추가하면 방문자에게 매력적인 상호 작용을 만드는 동시에 CTA에 관심을 끌 수 있는 좋은 방법이 될 수 있습니다.

이 튜토리얼에서는 Divi에서 "위닝 스핀" 스크롤 효과로 CTA를 높이는 방법을 보여 드리겠습니다. 사용자가 페이지를 아래로 스크롤하면 우승 상품이 표시되어 독특한 방식으로 무료 제안을 드러냅니다. 그리고 이것을 사용하여 생각할 수 있는 거의 모든 무료 제안을 홍보할 수 있습니다.

시작하자.

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "미리 만들어진 레이아웃 선택" 옵션을 선택합니다.
   
4. 베이커리 홈페이지 레이아웃을 선택하고 클릭하여 레이아웃을 사용합니다.
   

그런 다음 Divi에서 "위닝 스핀" 스크롤 효과로 CTA를 만들 준비가 된 것입니다.

1부: "위닝 스핀" 스크롤 효과 만들기

시작하려면 Divi Builder의 하단 설정 메뉴에서 레이어 보기를 배포합니다. 이렇게 하면 디자인 요소를 더 잘 관리하는 데 도움이 됩니다.

섹션, 행 및 열 추가

미리 만들어진 레이아웃에는 이미 콘텐츠가 포함된 여러 섹션이 있습니다. CTA가 상주할 페이지에 새 섹션을 추가할 것입니다. 이 자습서의 경우 "서비스" 섹션 바로 아래에 새 일반 섹션을 추가합니다.

섹션 내부에 2열 행을 추가합니다.

행 설정

모듈을 추가하기 전에 행 설정을 열고 다음을 업데이트하십시오.

• 거터 폭: 1
• 폭: 94%
• 패딩: 상단 10px, 하단 10px
• 테두리 너비: 1px
• 테두리 색상: rgba(0,0,0,0.12)

고급 탭에서 다음 사용자 정의 CSS를 기본 요소에 추가합니다.

display:flex;
align-items: center;

열 1 테두리

행 설정이 완료되면 열 1의 설정을 열고 다음과 같이 오른쪽 테두리를 추가합니다.

• 오른쪽 테두리 너비: 1px
• 오른쪽 테두리 색상: rgba(0,0,0,0.12)

블러브 모듈을 사용하여 스피너 화살표 및 텍스트 만들기

다음으로 우리는 우승 선택을 가리키는 화살표 역할을 할 스피너 화살표와 텍스트를 만들 것입니다.

블러브 모듈 추가

왼쪽 열에 새 광고 문구 모듈을 추가합니다.

광고 콘텐츠

그런 다음 새 제목과 아이콘으로 광고 내용을 업데이트합니다.

• 제목: 당신은 승리
• 아이콘: 오른쪽 화살표(스크린샷 참조)

광고 디자인

디자인 탭에서 다음을 업데이트합니다.

• 아이콘 색상: #a06d51
• 이미지/아이콘 배치: 왼쪽
• 아이콘 글꼴 크기: 80px(데스크톱), 50px(태블릿), 40px(휴대폰)
• 제목 글꼴: Patua One
• 제목 글꼴 두께: 굵게
• 제목 텍스트 크기: 40px(데스크톱), 25px(태블릿), 20px(휴대폰)
• 제목 글자 간격: 1px
• 제목 줄 높이: 2em

Blurb 사용자 정의 CSS

다음으로, 다음 사용자 정의 CSS를 기본 요소에 추가하여 화살표가 왼쪽이 아닌 오른쪽에 오도록 광고 내용의 순서를 전환합니다.

direction: rtl !important;

그런 다음 이 맞춤 CSS를 Blurb Title에 추가하여 광고 제목 아래의 기본 패딩을 제거합니다.

padding-bottom: 0px

여러 광고 문구로 상품 선택 만들기

오른쪽 열에는 회전하고 결국에는 승자를 결정하는 상품 선택을 추가할 것입니다. 이를 위해 제목과 이미지가 포함된 4개의 광고 문구 모듈을 만들고 배치합니다.

광고문안 만들기 1

2열에서 첫 번째 광고 문구를 만들려면 1열에서 광고 문구를 복제하고 2열로 드래그합니다.

열 2에서 복제 광고에 대한 설정을 열고 기본 요소에 대한 사용자 정의 CSS를 꺼냅니다.

이렇게 하면 아이콘이 다시 왼쪽으로 이동합니다.

제목 및 이미지 업데이트

그런 다음 다음과 같이 제목과 이미지를 업데이트합니다.

• 제목: 무료 쿠키!
• 이미지: 이미지 업로드(약 100px x 100px)

블러브 1 디자인

그런 다음 디자인 설정을 다음과 같이 업데이트합니다.

• 이미지 너비: 80px(데스크톱), 50px(태블릿), 40px(휴대폰)
• 콘텐츠 너비: 92%
• 폭: 100%

변형 원점

변환 회전 옵션을 사용하여 블러를 회전할 것이므로 블러가 회전되어야 하는 방식에 적합한 변환 원점을 선택하는 것이 중요합니다. 우리는 첫 번째 것을 회전하지 않을 것이지만, 이것은 앞으로 좋은 템플릿 역할을 할 것입니다.

다음과 같이 블러브에 대한 transform-origin을 업데이트합니다.

• 변환 원점: 오른쪽 중앙

이미지/아이콘 애니메이션도 제거해야 합니다.

절대 위치

고급 탭에서 다음과 같이 광고 문구와 절대 위치를 지정합니다.

• 위치: 절대
• 위치: 오른쪽 중앙

블러브 2 만들기

두 번째 광고 문구를 만들려면 광고 문구 1을 복제하세요.

회전하는 광고 2

그런 다음 다음과 같이 변환 회전을 추가합니다.

• 변환 회전 Z축: 25deg

이제 광고 문구가 행의 보기 영역 밖으로 회전된 것을 볼 수 있습니다.

Blurb 3 만들기 및 회전

세 번째 광고 문구를 만들려면 광고 문구 2를 복제합니다. 그런 다음 다음과 같이 변환 회전을 업데이트합니다.

• 변환 회전 Z축: 50deg

Blurb 4 만들기 및 회전

네 번째 광고문안을 만들려면 광고문구 3을 복제합니다. 그런 다음 다음과 같이 변환 회전을 업데이트합니다.

• 변환 회전 Z축: 75deg

광고 제목 및 이미지 업데이트

4개의 광고 문구 추가가 완료되면 돌아가서 필요에 따라 각각의 제목과 이미지를 업데이트합니다.

열 스크롤 회전

스크롤 효과를 추가하기 위해 4개의 회전된 광고 문구를 포함하는 전체 열을 회전할 것입니다.

열 2에 대한 설정을 열고 다음을 업데이트합니다.

• 변환 원점: 오른쪽 중앙

고급 탭에서 회전 스크롤 효과 탭을 열고 다음을 업데이트합니다.

• 회전 활성화: 예
• 시작 회전: -75%(15%에서)

그런 다음 모션 효과 트리거를 "Top of Element"로 업데이트합니다.

숨겨진 오버플로가 있는 행 업데이트

이제 행 설정으로 돌아가서 다음 행 설정을 업데이트하여 콘텐츠의 오버플로를 숨깁니다.

• 수평 오버플로: 숨김
• 수직 오버플로: 숨김

2부: 상품 CTA 생성

이 튜토리얼의 마지막 부분에서는 상품과 버튼에 대한 정보를 표시하는 CTA를 만들 것입니다. 그리고 "위닝 스핀" 애니메이션이 완료된 후 CTA를 표시하는 스크롤 효과를 추가할 것입니다. 이것은 놀라운 유형의 효과를 모방합니다.

행 추가

시작하려면 방금 만든 행 바로 아래에 1열 행을 추가합니다.

텍스트 모듈 추가

CTA의 내용을 추가하기 위해 페이지의 미리 만들어진 레이아웃에서 텍스트 모듈을 복사합니다. "온라인 쇼핑"이라는 제목의 텍스트 모듈을 찾아 복사합니다.

그런 다음 방금 만든 행에 붙여넣습니다.

텍스트 디자인

다음과 같이 텍스트 디자인을 업데이트합니다.

• 텍스트 글꼴: PT Sans
• 텍스트 글꼴 두께: 굵게
• 텍스트 텍스트 크기: 16px
• 텍스트 줄 높이: 2em
• 텍스트 정렬: 가운데

CTA 버튼 추가

그런 다음 미리 만들어진 레이아웃 상단에서 버튼을 찾아 복사합니다.

그런 다음 텍스트 모듈 바로 아래에 붙여넣습니다.

행 스크롤 효과

"우승 스핀"이 상품을 선택한 후 CTA를 표시하려면 행 설정을 열고 다음 스크롤 효과를 업데이트하십시오.

페이드 인 및 아웃 탭에서…

• 페이드 인 및 아웃 활성화: 예
• 시작 불투명도: 0%(50%에서)
• 중간 불투명도: 100%(55%에서)

최종 결과

마지막 생각들

이 "위닝 스핀" 스크롤 효과를 통해 자신의 사이트에서 보다 매력적인 CTA를 디자인하는 방법에 대한 신선한 아이디어를 얻을 수 있기를 바랍니다. 그것을 구축하려면 Divi의 변형 옵션과 스크롤 효과를 사용하여 약간의 기교가 필요합니다. 그러나 일단 완료되면 레이아웃은 고유한 콘텐츠로 업데이트하기가 정말 쉽습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!