Divi에서 페이지 템플릿의 모든 모서리에 닫기 가능한 슬라이드인 클릭 유도문안을 추가하는 방법

귀하의 사이트에 슬라이드인 클릭 유도문안을 두는 것은 방문자의 관심을 끌 수 있는 가장 눈에 잘 띄지 않는 방법 중 하나입니다. 대부분의 경우 그들은 단순히 CTA를 무시하거나 페이지를 계속 탐색하기 위해 CTA를 닫지만 때로는 당신이 그들을 사로잡을 것입니다. 슬라이드인 클릭 유도문안은 방문 페이지의 거의 모든 것을 홍보하는 데 효과적입니다.

이 튜토리얼에서는 Divi 테마 빌더를 사용하여 페이지의 모든 모서리에 추가할 수 있는 닫기 가능한 슬라이드인 클릭 유도문안을 디자인할 것입니다. 완료되면 플러그인을 사용하지 않고도 페이지 어디에서나 제품 및 특별 제안을 홍보할 수 있습니다.

시작하자!

엿보기

다음은 페이지 템플릿의 네 모서리에 모두 추가할 네 개의 슬라이드인 CTA에 대한 간략한 설명입니다. 물론 한 번에 4개를 모두 배포할 필요는 없습니다. "x" 아이콘을 클릭하여 각 항목을 닫을 수 있는 방법을 확인한 다음 "더하기" 아이콘을 클릭하여 CTA를 다시 열도록 토글할 수 있습니다.

무료로 슬라이드 인 클릭 유도문안 Divi 페이지 템플릿 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 테마 빌더 이식성 옵션을 사용하여 json 파일 중 하나를 Divi 테마 빌더에 추가하기만 하면 됩니다.

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

시작하는 데 필요한 것

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

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

그 후, 당신은 갈 준비가되었습니다.

Divi에서 페이지 템플릿의 모든 모서리에 닫을 수 있는 슬라이드인 클릭 유도문안 만들기

새 템플릿 만들기

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

프로모션 바를 표시할 페이지에 템플릿을 할당합니다.

새 템플릿에서 "사용자 정의 본문 추가" 영역을 클릭한 다음 "사용자 정의 본문 작성"을 선택합니다.

그런 다음 "처음부터 빌드" 옵션을 선택합니다.

게시물 콘텐츠 섹션 만들기

게시물 콘텐츠 섹션은 Divi 또는 WordPress에 내장된 페이지 또는 게시물의 실제 콘텐츠를 표시하기 위해 모든 페이지 템플릿의 필수 부분입니다. 첫 번째 슬라이드인 클릭 유도문안을 만들기 전에 이것을 템플릿에 추가합니다.

1열 행 추가

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

게시물 콘텐츠 모듈 추가

그런 다음 행에 게시물 콘텐츠 모듈을 추가합니다.

행 설정

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

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

왼쪽 상단 슬라이드인 클릭 유도문안 만들기

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

섹션 추가

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

템플릿 레이아웃에 새 일반 섹션을 추가합니다.

1열 행 추가

그런 다음 섹션에 한 열 행을 지정합니다.

섹션 설정

게시물 콘텐츠 섹션 위로 섹션을 드래그(또는 이동)하고 다음과 같이 섹션 설정을 업데이트합니다.

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

그런 다음 고급 탭으로 건너뛰고 다음 CSS 클래스 및 Z 인덱스를 추가합니다.

• CSS 클래스: Slide-in-cta
• Z 인덱스: 999

그리고 다음 사용자 정의 CSS 스니펫을 기본 요소에 추가합니다.

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

나중에 코드로 섹션을 대상으로 지정할 수 있도록 CSS 클래스가 필요합니다. 사용자 정의 CSS는 페이지 템플릿의 왼쪽 상단에 있는 섹션을 고정된(또는 고정된) 위치에 배치합니다. "왼쪽: -320px" 위치는 전체 섹션(폭 320px)을 브라우저 창 외부로 이동해야 합니다. 그러나 우리는 그것을 다시 볼 수 있도록 320px의 왼쪽 여백이 있습니다. 이렇게 만든 이유는 "x" 아이콘을 클릭할 때 여백 값을 켜고 끌 수 있도록 하기 위해서입니다. 이렇게 하면 CTA가 미끄러져 시야에서 사라집니다.

행 설정

이제 다음과 같이 행 설정을 업데이트하겠습니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 폭: 100%
• 패딩: 0px 상단, 0px 하단

행동 유도 모듈 ​​추가

행 안에 행동 유도 모듈을 추가하십시오.

클릭 유도문안 설정

그런 다음 클릭 유도문안 설정을 업데이트합니다.

콘텐츠

• 제목: [선택한 텍스트 입력]
• 버튼: [선택한 텍스트 입력]
• 본문: [선택한 텍스트 입력]
• 버튼 링크 URL: [실제 URL 또는 # 입력]

다음으로 기본 배경색을 제거하여 이전에 추가한 섹션의 배경을 표시합니다.

디자인 설정(텍스트, 버튼 및 패딩)

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

• 제목 글꼴: Lato
• 제목 글꼴 두께: Heavy
• 제목 줄 높이: 1.3em
• 본문 글꼴: Lato
• 본문 글꼴 두께: 굵게
• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 15px
• 버튼 테두리 너비: 0px
• 버튼 문자 간격: 1px
• 버튼 글꼴: Lato
• 버튼 글꼴 두께: Heavy
• 버튼 글꼴 스타일: TT
• 버튼 패딩: 상단 12픽셀, 하단 12픽셀, 왼쪽 32픽셀, 오른쪽 32픽셀
• 패딩: 상단 40픽셀, 하단 40픽셀, 왼쪽 40픽셀, 오른쪽 40픽셀

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

클릭 유도문안이 완료되면 슬라이드인 클릭 유도문안을 열고 닫는 데 사용되는 아이콘 버튼을 만들어야 합니다. 이것을 만들려면 행동 유도 모듈 ​​아래에 광고 문구 모듈을 추가하십시오.

블러브 설정

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

콘텐츠

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

설계

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

고급 설정

고급 탭에서 다음 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;

결과

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

왼쪽 하단 슬라이드인 클릭 유도문안 만들기

중복 섹션

페이지 템플릿의 왼쪽 하단 모서리에 슬라이드인 클릭 유도문안을 만들려면 페이지 레이아웃 상단에서 왼쪽 상단 CTA 섹션을 복제하세요. 중복 섹션에 "하단 왼쪽 CTA"라는 레이블을 지정한 다음 게시물 콘텐츠 섹션 아래로 이동합니다.

섹션 설정 업데이트

그런 다음 섹션 설정을 열고 "top: 80px"를 "bottom: 0px"로 교체하여 기본 요소 CSS를 업데이트합니다. 다음은 최종 스니펫입니다.

position: fixed;
bottom: 0px;
left: -320px;

Blurb 모듈 설정 업데이트

그런 다음 "bottom: 0px"를 "top: 0px"로 바꿔 Blurb 모듈의 주요 요소 CSS를 업데이트합니다. 다음은 최종 스니펫입니다.

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

결과

이제 라이브 페이지에서 왼쪽 하단의 슬라이드인 클릭 유도문안을 확인하십시오.

오른쪽 하단 슬라이드인 클릭 유도문안 만들기

중복 섹션

오른쪽 하단의 슬라이드인 클릭 유도문안을 만들려면 오른쪽 상단의 CTA 섹션을 복제하고 복제된 섹션을 게시물 콘텐츠 섹션 아래로 이동하세요.

섹션 설정 업데이트

섹션 설정을 열고 "top: 80px;"를 대체하여 기본 요소 CSS를 업데이트합니다. "하단: 0px;"와 함께. 다음은 최종 스니펫입니다.

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

Blurb 모듈 설정 업데이트

그런 다음 blurb 모듈 설정을 열고 "bottom: 0px;"를 대체하여 기본 요소 CSS를 업데이트합니다. "상단: 0px;"와 함께. 다음은 최종 스니펫입니다.

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

결과

이제 라이브 페이지에서 오른쪽 하단의 슬라이드인 클릭 유도문안을 확인하세요.

코드 모듈을 사용하여 사용자 정의 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를 표시할 페이지를 더 잘 제어할 수 있습니다. 페이지 로드 후 사용자가 CTA 슬라이드인 애니메이션을 조금 더 늦게(또는 더 빨리) 볼 수 있도록 CTA 섹션에 대한 애니메이션 지연을 자유롭게 늘릴 수 있습니다. 또한 Divi 리드를 사용하고 분할 테스트를 활성화하여 해당 CTA의 전환을 개선하고 어느 코너가 가장 좋은 전환을 얻을 수 있는지 확인할 수 있습니다.

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

건배!