귀하의 사이트에 클릭 유도 문안을 갖는 것은 귀하의 관심을 끌 수 있는 가장 덜 방해적인 방법 중 하나입니다. 방문자. 대부분의 경우 그들은 CTA를 무시하거나 페이지를 계속 탐색하기 위해 CTA를 닫을 것이지만 때로는 당신이 그들을 설득할 수도 있습니다. 클릭 유도문안 슬라이드는 다음과 같은 경우에 적합합니다. 홍보 랜딩 페이지의 모든 것.

이 튜토리얼에서는 Divi Theme Builder를 사용하여 페이지 구석구석에 추가할 수 있는 닫기 가능한 클릭 유도 문구를 디자인합니다. 이 작업이 완료되면 다음 옵션을 사용할 수 있습니다. 홍보 플러그인을 사용하지 않고도 페이지 어디에서나 귀하의 제품과 특별 행사를 확인할 수 있습니다.

시작하자!

측량

다음은 페이지 템플릿의 네 모서리에 추가 할 XNUMX 개의 삽입 된 CTA를 간략히 살펴 봅니다. 물론 네 가지를 동시에 배포 할 필요는 없습니다. "x"아이콘을 클릭하여 각각을 닫을 수있는 방법을 확인한 다음 "더하기"아이콘을 클릭하여 CTA를 다시 활성화하도록 선택할 수 있습니다.

시작하려면 무엇이 필요합니까?

시작하려면 다음이 필요합니다 Divi 테마를 설치하고 활성화하는 방법 . 최신 버전의 Divi가 있는지 확인하십시오.

결과를 표시하기 위해이 페이지에 새 템플릿을 할당하려면 테스트 목적으로 Divi Builder로 만든 페이지가 하나 이상 필요합니다.

Divi의 페이지 템플릿을 사용하여 슬라이딩 클릭 유도 문안 생성

새로운 모델 생성

WordPress 대시 보드에서 Divi> 테마 생성기로 이동합니다. 그런 다음 "새 템플릿 추가"상자를 클릭하여 새 템플릿을 만듭니다.

홍보 바를 표시하려는 페이지에 템플릿을 지정하십시오.

새 모델에서 "사용자 지정 바디 추가"영역을 클릭 한 다음 "사용자 지정 바디 생성"을 선택합니다.

그런 다음“Build From Scratch”옵션을 선택하십시오.

출판 컨텐츠 섹션 작성

의 섹션 내용 게시물은 페이지 템플릿의 필수 부분입니다. 내용 Divi 또는 WordPress에 포함된 실제 페이지 또는 게시물. 삽입할 첫 번째 클릭 유도 문구를 만들기 전에 이를 템플릿에 추가하겠습니다.

열에 행 추가

시작하려면 일반 섹션에 열 행을 추가하십시오.

게시 컨텐츠 모듈 추가

그런 다음 모듈을 추가하십시오. 내용 라인에 게시.

라인 설정

그 후 다음과 같이 라인 매개 변수를 업데이트하십시오.

• 너비 : 100 %
• 최대 폭 : 100 %
• 패딩 : 0px 높이, 0px low

클릭 유도 문안 만들기 왼쪽 상단

이제 게시물 콘텐츠 모듈이 준비되었으므로 페이지 템플릿의 왼쪽 상단에 삽입 할 첫 번째 클릭 유도 문안을 추가 할 준비가되었습니다.

섹션 추가

각각의 새로운 클릭 유도 문안은 완전히 새로운 섹션으로 생성됩니다. 이렇게하면 클릭 유도 문안을 디자인하는 데 필요한 레이아웃이나 모듈을 추가 할 수 있습니다.

템플릿 레이아웃에 새 일반 섹션을 추가하십시오.

열에 행 추가

그런 다음 섹션에 열 행을 제공하십시오.

섹션 설정

게시물 내용 섹션 위로 섹션을 드래그 (또는 이동)하고 다음과 같이 섹션 설정을 업데이트하십시오.

• 왼쪽 색상 배경 ​​그라데이션 :
• 오른쪽 배경 그라데이션 :
• 이미지 위에 그라디언트 표시 : 예
• 배경 이미지 : [이미지 삽입]
• 너비 : 320px
• 여백 : 320px 남음
• 패딩 : 0px 높이, 0px low
• 애니메이션 스타일 : 슬라이드
• 애니메이션 방향 : 오른쪽
• 애니메이션 지연 : 2000ms

그런 다음 고급 탭으로 이동하여 다음 CSS 클래스 및 Z 인덱스를 추가하십시오.

• CSS 클래스 : slide-in-cta
• Z 지수 : 999

그리고 기본 요소 다음에 맞춤 CSS 스 니펫을 추가합니다.

position: fixed;top: 80px;left: -320px;

나중에 코드로 섹션을 타겟팅 할 수 있도록 CSS 클래스가 필요합니다. 사용자 정의 CSS는 페이지 템플릿의 왼쪽 상단 섹션을 고정 (또는 고정) 위치에 배치합니다. "왼쪽 : -320 픽셀"위치는 전체 섹션 (너비 320 픽셀)을 브라우저 창 외부 (따라서 뷰에서 벗어남)로 이동해야합니다. 그러나 우리는 그것을 다시보기 위해 320 픽셀의 왼쪽 여백을 가지고 있습니다. 이렇게 구성된 이유는 "x"아이콘을 클릭 할 때 여백 값을 켜거나 끌 수 있기 때문입니다. 이로 인해 CTA가 안팎으로 밀려 나게됩니다.

라인 설정

이제 다음과 같이 라인 매개 변수를 업데이트하십시오.

• 사용자 지정 거터 너비를 사용하십시오. 예
• 거터 폭 : 1
• 너비 : 100 %
• 패딩 : 0px 높이, 0px low

클릭 유도 문안 모듈 추가

행 안에 Call to Action 모듈을 추가합니다.

클릭 유도 문안 설정

그런 다음 클릭 유도 문안 설정을 업데이트하세요.

내용

• 제목 : [원하는 텍스트를 입력하십시오]
• 버튼 : [원하는 텍스트를 입력하십시오]
• 본문 : [원하는 텍스트를 입력하십시오]
• 버튼 링크 URL : [실제 URL 또는 # 입력]

그런 다음 기본 배경색을 제거하여 앞서 추가 한 섹션의 배경을 표시합니다.

디자인 매개 변수 (텍스트, 버튼 및 채우기)

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

• 제목 글꼴 : Lato
• 타이틀 폰트 무게 : Heavy
• 제목 줄 높이 : 1,3 em
• 경찰 : 라토
• 본문 글꼴 무게 : 굵게
• 버튼에 사용자 정의 스타일 사용 : 예
• 버튼 텍스트 크기 : 15px
• 버튼 테두리 너비 : 0px
• 버튼 문자 간격 : 1px
• 버튼 글꼴 : Lato
• 버튼 글꼴 무게 : 무거움
• 버튼 글꼴 스타일 : TT
• 버튼 패딩 : 위쪽 12 픽셀, 아래쪽 12 픽셀, 왼쪽 32 픽셀, 오른쪽 32 픽셀
• 패딩 : 상단 40 픽셀, 하단 40 픽셀, 왼쪽 40 픽셀, 오른쪽 40 픽셀

Blurb 모듈로 열기 및 닫기 아이콘 추가

클릭 유도 문안이 완료되면 슬라이딩 클릭 유도 문안을 열고 닫는 데 사용되는 아이콘 버튼을 만들어야합니다. 이를 만들려면 클릭 유도 문안 모듈 아래에 블 러브 모듈을 추가하세요.

프리젠 테이션 텍스트 설정

다음 설계 매개 변수를 업데이트하십시오.

내용

• 기본 제목 및 본문을 제거
• 아이콘 사용 : 예
• 아이콘 : 더보기 (스크린 샷 참조)

임신

• 아이콘 색상 : # 000000
• 아이콘 글꼴 크기 사용 : 예
• 아이콘 글꼴 크기 : 40 픽셀
• 너비 : 40px
• 높이 : 40px
• 둥근 모서리 : 50 %
• Z 축 회전 변환 : 135도

고급 설정

고급 탭에서 다음 CSS 클래스를 추가하십시오.

• CSS 클래스 : slide-in_target

그런 다음이 사용자 지정 CSS를 기본 요소에 추가합니다.

position: absolute;bottom: 0px;right: -40px;

Blurb 이미지에 다음 사용자 정의 CSS를 추가하십시오.

margin-bottom: 0px;

결과

지금까지의 결과입니다.

"x"아이콘을 클릭 할 때 닫기 및 열기 기능을 추가하려면 여전히 일부 코드를 추가해야합니다. 모델의 네 모서리 각각에 클릭 유도 문안을 생성 한 후 코드를 추가합니다.

오른쪽 상단에 클릭 유도 문안 생성

첫 번째 클릭 유도 문안이 내장되어 이미 생성 된 섹션을 복제하여 나머지 CTA 생성 프로세스의 속도를 높일 수 있습니다. 다음으로 오른쪽 상단 모서리에 대한 슬라이드 클릭 유도 문안을 만들 것입니다.

중복 섹션

와이어 프레임 표시 모드를 배포 한 다음 왼쪽 상단에 CTA 섹션을 복제합니다.

섹션 설정 업데이트

그런 다음 다음과 같이 새 섹션 매개 변수를 업데이트하십시오.

• 여백 : 320px 오른쪽
• 애니메이션 방향 : 왼쪽

그런 다음 "left"를 "right"로 대체하여 기본 요소의 사용자 정의 CSS를 업데이트하십시오. 전체 발췌 내용은 다음과 같습니다.

position: fixed;top: 80px;right: -320px;

Blurb 모듈의 매개 변수 업데이트

다음으로 Blurb 모듈 설정을 열고 "right"를 "left"로 대체하여 기본 요소에서 사용자 정의 CSS 스 니펫을 업데이트하십시오. 전체 발췌 내용은 다음과 같습니다.

position: absolute;bottom: 0px;left: -40px;

결과

이제 페이지 템플릿의 오른쪽 상단에 슬라이드로 클릭 유도 문안이 표시됩니다.

나머지 "오른쪽 아래", "왼쪽 아래"섹션에 대해 동일한 작업을 수행합니다. 또한 다음과 유사한 결과를 갖도록 각 모듈의 CSS 코드를 조정해야합니다.

코드 모듈을 사용하여 사용자 정의 jQuery 및 CSS 스 니펫 추가

마지막 단계에서는 각 슬라이드 CTA를 열고 닫는 기능을 사용할 수 있도록 사용자 지정 jQuery 및 CSS를 추가해야합니다.

코드 모듈 추가

프레젠테이션 섹션 중 하나에 코드 모듈을 추가합니다.

코드 붙여 넣기

그런 다음 코드 설정을 열고 다음 코드를 코드 영역에 붙여 넣습니다.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

마지막 생각

Divi를 사용하면 클릭 유도 문안을 만드는 것이 전혀 어렵지 않습니다. 그리고 테마 빌더를 사용하여 페이지 템플릿에 클릭 유도 문안을 추가 할 수 있으므로 이러한 CTA를 표시 할 페이지를 더 많이 제어 할 수 있습니다.