Divi에서 페이지의 환영 게이트를 디자인하는 방법

환영 게이트는 사이트에서 클릭 유도문안의 전환을 높이는 효과적인 방법입니다. 사실, 환영 게이트는 전환율이 높은 이메일 옵틴을 생성하기 위한 OptinMonster와 같은 플러그인과 함께 인기 있는 기능입니다. 환영 게이트의 기본 아이디어는 전체 화면 클릭 유도문안으로 웹 페이지의 콘텐츠를 숨기는 것입니다. 이렇게 하면 사용자가 의도한 페이지를 보기 전에 CTA와 상호 작용해야 합니다.

이 튜토리얼에서는 플러그인을 사용하지 않고 웹 페이지에 사용자 정의 환영 게이트를 추가하는 빠르고 쉬운 방법을 보여 드리겠습니다. 이것은 방문 페이지에서 CTA의 전환을 높이는 데 유용할 수 있습니다.

확인 해봐!

엿보기

다음은 이 튜토리얼에서 구축할 환영 게이트에 대한 간략한 설명입니다.

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

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

튜토리얼로 가볼까요?

시작하는 데 필요한 것

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

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

그런 다음 사용자 지정 환영 게이트를 만들 때 사용할 랜딩 페이지가 있습니다.

환영 게이트 만들기

새 섹션 추가

먼저 새 일반 섹션을 만들고 페이지 상단으로 끕니다. 그런 다음 섹션에 한 열 행을 추가합니다.

단면 설계

섹션에 모듈/컨텐츠를 추가하기 전에 사용자 정의 디자인을 추가하여 앞으로 작업할 멋진 캔버스를 만들어 보겠습니다.

배경

시작하려면 다음과 같이 배경 그라디언트와 이미지를 추가합니다.

• 배경 그라데이션 왼쪽 색상: rgba(0,17,38,0.7)
• 배경 그라데이션 오른쪽 색상: #001126
• 시작 위치: 68%
• 배경 이미지 위에 그라디언트 배치: 예
• 배경 이미지: [이미지 삽입]

패딩 및 애니메이션

그런 다음 디자인 탭으로 이동하여 다음 패딩 및 애니메이션 설정을 업데이트합니다.

• 패딩(데스크탑): 28vh 상단, 28vh 하단
• 패딩(태블릿): 18vh 상단, 18vh 하단
• 패딩(전화): 10vh 상단, 10vh 하단
• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 아래로
• 애니메이션 시작 불투명도: 100%;

환영 게이트 섹션 배치

이제 사용자가 "아니요" 버튼을 클릭할 때까지 환영 게이트가 브라우저 화면을 채울 수 있도록 섹션에 더 높은 z 인덱스로 고정된 위치를 지정할 준비가 되었습니다.

위치 지정 CSS를 추가하기 전에 다음과 같이 사용자 정의 CSS ID를 추가해 보겠습니다.

• CSS ID: 환영 게이트

이것은 jQuery로 섹션을 대상으로 지정하여 사용자가 "아니요" 버튼을 클릭할 때 보기에서 위쪽으로 이동하는 데 사용됩니다.

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

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

그런 다음 Z 인덱스를 다음과 같이 업데이트합니다.

• Z 인덱스: 11

참고: 환영 게이트에서 헤더도 숨기려면 "99999"와 같이 더 높은 Z 인덱스를 추가할 수 있습니다.

환영 게이트 콘텐츠 만들기

이제 섹션이 준비되었으므로 환영 게이트 콘텐츠를 추가해 보겠습니다. 이 환영 게이트에 원하는 콘텐츠를 추가할 수 있습니다. 지금은 두 개의 버튼이 있는 간단한 CTA를 만들어 보겠습니다. 왼쪽에 있는 버튼은 사용자가 클릭하기를 원하는 버튼입니다. 오른쪽에 있는 버튼은 환영 게이트를 닫는 "No Thank" 버튼입니다.

텍스트 모듈

한 열 행 안에 다음 내용이 포함된 새 텍스트 모듈을 추가합니다.

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

텍스트 디자인

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

• 텍스트 글꼴: 오두막
• 텍스트 텍스트 색상: #ffffff
• 텍스트 텍스트 크기: 24px(데스크톱), 18px(전화)
• 텍스트 정렬: 가운데
• 제목 2 글꼴: 오두막
• 제목 2 글꼴 두께: 굵게
• 제목 2 텍스트 색상: #ffffff
• 제목 2 텍스트 크기: 66px(데스크톱), 26px(태블릿)

2열 행 추가

버튼의 경우 텍스트 아래에 2열 행을 생성해 보겠습니다.

왼쪽 버튼 추가

왼쪽 열에서 버튼 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

• 버튼 텍스트: "냠! 예약하자”

• 버튼 정렬: 중앙
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #bd8f52
• 버튼 테두리 너비: 0px
• 버튼 글꼴 두께: 굵게

그런 다음 다음 사용자 정의 CSS를 추가하여 버튼이 열의 전체 너비로 확장되도록 합니다.

display: block !important;

오른쪽 "No Thank" 버튼 추가

"감사합니다" 버튼을 만들려면 먼저 왼쪽 버튼을 복사하여 오른쪽 열에 붙여넣습니다.

그런 다음 다음과 같이 콘텐츠를 업데이트합니다.

• 버튼 텍스트: 아니요
• 버튼 링크 URL: # (버튼이 페이지를 새로 고침하지 않도록 하는 것이 중요합니다)

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

• 버튼 텍스트 색상: #333333
• 버튼 배경색: rgba(255,255,255,0.4)

그런 다음 감사 없음 버튼에 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 감사합니다

이것은 클릭 시 환영 게이트를 닫는 jQuery의 선택기가 될 것입니다.

사용자 지정 코드 추가

이제 사용자가 "아니요" 버튼을 클릭할 때 환영 게이트를 닫는 기능을 추가하는 데 필요한 사용자 지정 코드 조각을 추가해 보겠습니다. 이렇게 하려면 감사 없음 버튼 모듈 아래에 코드 모듈을 추가합니다.

그런 다음 코드 모듈 코드 상자에 다음 코드를 붙여넣습니다.

마지막으로 버튼을 포함하는 행에 최대 너비를 지정하여 버튼을 더 가깝게 만들어 보겠습니다. 행 설정을 열고 다음을 업데이트합니다.

• 최대 너비: 600px

최종 결과

다음은 최종 디자인의 모습입니다.

다음은 페이지를 새로 고칠 때 환영 게이트의 모습입니다.

모바일에서 환영 게이트가 어떻게 생겼는지 보여줍니다.

마지막 생각들

이 환영 매트가 귀하의 페이지나 템플릿에 도움이 되기를 바랍니다. Divi를 사용하면 비주얼 빌더를 사용하여 웰컴 매트를 쉽게 디자인하고 배치할 수 있으며 jQuery의 작은 스니펫만 있으면 기능을 완료할 수 있습니다. 따라서 플러그인을 사용하지 않고 페이지에 대한 빠른 시작 매트를 찾고 있다면 이 기능이 유용할 것입니다.

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

건배!