마우스 오버 시 여러 옵션을 표시하는 "시작하기" CTA 만들기

많은 회사들이 홈 페이지에 "시작하기" CTA를 포함할 것입니다. 이것은 일반적으로 페이지의 기본 클릭 유도문안입니다. 어떤 종류의 의도된 프로세스를 통해 사용자를 이끌기 때문입니다. 다른 페이지로 연결되는 간단한 "지금 시작하기" 버튼일 수 있습니다. 또는 "시작하기" 지침 및/또는 사용자가 회사에서 의도한 프로세스를 시작하기 위해 취할 수 있는 다양한 옵션이 포함된 페이지 섹션일 수 있습니다.

이 튜토리얼에서는 마우스 오버 시 여러 "시작하기" 옵션을 표시하는 "시작하기" CTA를 만드는 방법을 보여 드리겠습니다. Divi를 사용하여 섹션이 큰 버튼으로 표시되도록 디자인합니다. 그런 다음 버튼 위로 마우스를 가져가면 수직 슬라이더가 다음 슬라이드를 표시하는 것처럼 옵션이 나타납니다.

디자인은 우아하고 기능은 여러면에서 유용할 수 있습니다.

시작하자.

엿보기

다음은 이 자습서에서 구축할 "시작하기" CTA에 대한 간략한 설명입니다.

"시작하기" CTA Divi 레이아웃을 무료로 다운로드하십시오

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

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

시작하는 데 필요한 것

시작하려면 다음이 필요합니다.

1. Divi 테마가 설치되고 활성화되었습니다.
2. 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
3. 모의 콘텐츠에 사용할 이미지

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 "시작하기" CTA 디자인 구현하기

이 디자인의 기본 아이디어는 섹션 위로 마우스를 가져갈 때 섹션의 내용을 위쪽으로 이동하는 것입니다. 이렇게 하려면 섹션의 높이가 고정되어 있고 오버플로가 숨겨져 있는지 확인해야 합니다. 이렇게 하면 호버 상태 전에 CTA 옵션이 숨겨집니다. 그런 다음 여백을 사용하여 모듈을 배치하고 상단 패딩을 사용하여 호버 시 보기로 콘텐츠를 이동할 수 있습니다.

섹션부터 시작하겠습니다.

섹션 생성

일을 시작하려면 한 열 행이 있는 일반 섹션을 만드십시오. 그런 다음 모듈을 추가하기 전에 섹션 설정을 업데이트하겠습니다.

섹션 설정을 열고 다음을 업데이트합니다.

배경색:#2b87da
폭: 90%
최대 너비: 1100px
섹션 정렬: 중앙
여백: 상단 6vw, 하단 6vw(숨을 쉴 수 있는 공간을 제공하기 위해)
패딩(데스크톱): 상단 300px, 하단 0px
패딩(태블릿): 상단 0px, 하단 15%

그런 다음 둥근 모서리를 추가하십시오. 이렇게 하면 섹션에 최대 높이를 지정할 때마다 버튼과 같은 디자인이 생성됩니다.

둥근 모서리: 140px(데스크톱), 20px(마우스 오버), 10px(태블릿)

그런 다음 상자 그림자를 지정합니다(스크린샷 참조).

이 시점에서 최종 디자인에 필요한 모든 설정을 추가하지는 않을 것입니다. 다시 돌아와서 고정된 높이와 호버 효과를 주어야 합니다. 하지만 지금은 콘텐츠를 추가해 보겠습니다.

콘텐츠의 첫 번째 행 만들기

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

폭: 100%
패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 5%, 오른쪽 5%

한 열 행 안에 텍스트 모듈을 추가합니다.

그런 다음 본문 내용에 다음 h2 제목을 추가합니다.

<h2>Get Started Here...</h2>

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

제목 2 글꼴: Nunito
제목 2 글꼴 두께: 굵게
제목 2 텍스트 색상: #ffffff
제목 2 텍스트 크기: 78px(데스크톱 및 태블릿), 46px(휴대폰)
최대 너비: 500px
높이: 300px(데스크톱), 자동(태블릿 및 휴대폰)
여백: -300px 상단(데스크톱), 0px 상단(태블릿 및 휴대폰)
패딩: 상단 7%

300px 높이와 -300px 상단 여백은 섹션의 300px 상단 패딩을 채우기 위해 텍스트 모듈을 가져옵니다. 나중에 호버에서 상단 섹션 패딩을 제거할 때마다 텍스트 모듈이 섹션 위로 위로 스크롤됩니다.

두 번째 콘텐츠 행 만들기

콘텐츠의 두 번째 행은 CTA 옵션을 추가할 곳입니다. 계속해서 3열 레이아웃으로 새 행을 추가하십시오.

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

폭: 100%
최대 너비: 100%
패딩: 0px 상단, 0px 하단

그런 다음 1열에 광고 문구 모듈을 추가합니다.

그런 다음 다음과 같이 광고 설정을 업데이트합니다.

기본 본문 텍스트를 제거하고 제목을 그대로 두십시오.

그런 다음 이미지 아이콘(90 X 90)을 추가합니다. 또는 원하는 경우 일반 Divi 아이콘을 사용할 수 있습니다.

배경을 추가하고 제목 텍스트의 디자인을 업데이트합니다.

배경색: #ffffff
제목 글꼴: Nunito
제목 글꼴 두께: 매우 굵게
제목 글꼴 스타일: TT
제목 텍스트 정렬: 가운데
제목 텍스트 색상: #2b87da
제목 텍스트 크기: 14px

광고문안을 원형으로 만들기 전에 먼저 광고문안의 높이와 너비를 동일하게 지정해야 합니다. 그런 다음 간격을 사용하여 광고문안과 광고문안 콘텐츠를 중앙에 정렬할 수 있습니다.

콘텐츠 너비: 200px(데스크톱), 250px(태블릿)
너비: 250px(데스크톱), 300px(태블릿)
모듈 정렬: 중앙
높이: 250px(데스크톱), 300px(태블릿)
여백: 상단 25px, 하단 0px
패딩: 상단 50px(데스크톱), 상단 75px(태블릿 및 휴대전화)

원 디자인을 완성하려면 광고 문구에 둥근 모서리와 상자 그림자를 지정합니다.

둥근 모서리: 50%
박스 섀도우: 스크린샷 참조

그것이 우리의 첫 번째 광고를 처리합니다. 다음 두 개를 생성합니다. 광고 문구를 복사하여 2열과 3열에 붙여넣습니다. 그런 다음 각각의 이미지 아이콘을 업데이트합니다. 다음과 같이 표시되어야 합니다.

섹션에 대한 최종 수정

"시작하기" CTA 디자인을 완료하려면 섹션을 조금 더 업데이트해야 합니다. 다음 섹션 설정을 업데이트합니다.

높이: 300px(데스크톱), 자동(태블릿 및 휴대폰)
수평 오버플로: 숨김
수직 오버플로: 숨김

이렇게 하면 섹션 높이가 행 1 및 행 2의 내용과 동일하게 유지됩니다. 오버플로를 숨기면 마우스를 가져갔을 때 표시될 때까지 행 2의 내용이 숨겨져 유지됩니다.

행 2 콘텐츠를 표시하려면 호버에서 섹션의 상단 패딩을 제거해야 합니다.

패딩(마우스오버): 0px 상단

지금까지의 결과를 확인해보세요. 콘텐츠가 위로 스크롤되어 세 가지 CTA 옵션이 표시된 2행의 콘텐츠가 표시됩니다.

섹션을 버튼처럼 보이게 하려면 변형 옵션을 사용하여 축소한 다음 호버에서 일반 크기로 다시 가져올 수 있습니다. 섹션에 대한 다음 변환 옵션을 업데이트하십시오.

변형 배율(데스크톱): 70%
변형 배율(마우스 오버): 100%
변환 스케일(태블릿): 100%

이제 배경 이미지 그래픽(500 X 500)을 추가하여 섹션의 올바른 크기를 차지합니다.

배경 이미지: 이미지 삽입
배경 이미지 크기: 실제 크기
배경 이미지 위치: 중앙 우측(데스크탑), 우측 상단(태블릿), 좌측 상단(휴대폰)

Blurbs에 링크 URL 추가 및 Hover에서 크기 조정

우리의 광고 문구는 실제로 원 버튼 역할을 하므로 각 광고 문구에 모듈 링크 URL을 추가해야 합니다. 물론 필요에 맞게 직접 추가해야 합니다.

광고 문구는 비주얼 빌더에 숨겨져 있으므로 와이어프레임 보기 모드를 전환하고 모듈 링크 URL로 각 광고 문구 설정을 업데이트합니다.

그런 다음 와이어프레임 보기 모드를 유지하고 다중 선택을 사용하여 3개의 블러브를 모두 선택합니다. 그리고 광고 문구 중 하나의 설정을 열어 세 가지 모두에 대한 요소 설정을 업데이트합니다. 그런 다음 다음과 같이 변환 옵션을 업데이트합니다.

변형 비율(마우스 오버): 105%

그게 다야!

최종 결과

"시작하기" CTA의 최종 디자인을 확인해 보겠습니다.

그리고 여기 태블릿과 휴대폰의 디자인이 있습니다.

마지막 생각들

"시작하기" CTA는 오늘날 웹에서 일반적입니다. 이 튜토리얼이 다음 단계로 나아가는 데 도움이 되기를 바랍니다. 그리고 이 기능을 사용하는 다른 방법을 생각하는 것을 두려워하지 마십시오. 그것에 대해 생각해보십시오. 섹션에 원하는 내용을 추가할 수 있습니다!

아래 의견에 자유롭게 의견을 공유하세요.

귀하의 의견을 기다리겠습니다.

건배!