Divi에서 블로그 게시물에 스크롤 트리거 팝업을 추가하는 방법

블로그 게시물에 스크롤 트리거 팝업을 추가하는 것은 정말 현명한 일인 것 같습니다. 다른 블로그를 읽을 때 이미 본 적이 있을 것입니다. 사용자가 게시물의 특정 지점(보통 끝 부분)으로 스크롤하면 클릭 유도문안이 포함된 상자가 갑자기 나타납니다. 스크롤 트리거 팝업의 전체 목적은 방문자가 페이지에서 보기를 원하는 정확한 순간에 타겟 클릭 유도문안을 방문자에게 제공하는 것입니다. 요컨대, 전환을 높이거나 자격을 갖춘 리드를 확보하는 데 유용한 도구입니다. 이 때문에 많은 전환 향상 플러그인(당사의 Bloom 또는 Optin Monster와 같은)을 사용하면 이와 동일한 작업을 수행할 수 있습니다.

이 자습서에서는 플러그인 없이 처음부터 Divi의 블로그 게시물에 스크롤 트리거 팝업을 추가하는 방법을 보여줍니다. 이를 위해 우리는 Divi 테마 빌더를 사용하여 카테고리별 관련 게시물이 있는 팝업과 이메일 선택이 포함된 팝업을 디자인할 것입니다. 스크롤 트리거는 jQuery의 작은 조각을 사용하여 수행됩니다.

시작하자!

엿보기

다음은 우리가 만들 스크롤 트리거 팝업을 간략하게 살펴보겠습니다.

아래와 같이 관련 게시물(카테고리별)을 공개하는 팝업창을 생성해 드립니다.

또한 여기에서 볼 수 있는 것과 같이 팝업에 이메일 선택을 추가하는 방법도 보여줍니다.

스크롤 트리거 팝업 Divi 포스트 템플릿 무료 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

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

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

시작하는 데 필요한 것

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

이 튜토리얼에서는 해당 팩에서 미리 만들어진 포스트 템플릿을 사용할 것이기 때문에 네 번째 테마 빌더 팩을 다운로드해야 합니다.

또한 게시물 템플릿에 결과를 표시하려면 테스트 목적으로 만든 블로그 게시물이 몇 개 이상 필요합니다.

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

Divi 블로그 게시물 끝에 스크롤 트리거 팝업 만들기

네 번째 테마 빌더 팩에서 블로그 포스트 템플릿 가져오기

WordPress 대시보드에서 Divi > Theme Builder로 이동합니다. 테마 빌더 내에서 페이지 오른쪽 상단의 이식성 아이콘을 선택합니다. 이식성 팝업에서 가져오기 탭을 선택하고 theme-builder-pack-4-post-template.json 파일을 선택한 후 가져오기 버튼을 클릭합니다. (이 가져오기 파일은 네 번째 테마 빌더 팩 폴더 안에 있습니다)

전체 머리글과 바닥글을 정적 레이아웃으로 가져오는 옵션을 선택할 수도 있습니다.

템플릿을 가져온 후 아이콘을 클릭하여 사용자 정의 본문 영역을 편집합니다.

그러면 스크롤 트리거 팝업을 추가할 본문 템플릿 레이아웃 편집기로 이동합니다.

카테고리별 관련 게시물이 있는 스크롤 트리거 팝업 디자인

팝업은 Divi 행에 포함됩니다. 따라서 팝업 기능이 준비되면 해당 행을 모듈로 채워 원하는 콘텐츠를 만들 수 있습니다. 이 첫 번째 예에서는 카테고리별로 관련 게시물이 포함된 팝업을 만듭니다. 그렇게 하면 방문자가 게시물의 맨 아래로 스크롤하면 관련 게시물이 팝업으로 제안됩니다.

방법은 다음과 같습니다.

1열 행 추가

먼저 게시물 템플릿 레이아웃에서 게시물 콘텐츠 모듈이 포함된 행 바로 아래에 1열 행을 추가합니다.

행 설정

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

• 배경색: #ffffff
• 거터 폭: 1
• 너비: 300px(데스크톱), 200px(휴대폰)
• 패딩: 상단 20px, 하단 0px
• 박스 섀도우: 스크린샷 참조

텍스트 모듈 추가

행 설정을 사용자 정의한 후 행에 텍스트 모듈을 추가하십시오. 이것은 관련 게시물 팝업의 제목 영역이 됩니다.

콘텐츠

"Related Post"라는 텍스트로 본문 내용을 업데이트합니다.

설계

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

• 텍스트 글꼴: 희보
• 텍스트 글꼴 스타일: TT
• 텍스트 텍스트 색상: #f94857
• 텍스트 정렬: 가운데

블로그 모듈 추가

텍스트 모듈 아래에 블로그 모듈을 추가합니다.

콘텐츠

하나의 관련 게시물만 표시하고 싶기 때문에 팝업에 표시되는 게시물이 템플릿에 표시된 실제 게시물과 동일한 범주를 공유하도록 게시물 수를 1개로 제한하고 "현재 카테고리"를 포함할 것입니다.

다음을 업데이트합니다.

• 게시물 수: 1
• 포함된 카테고리: 현재 카테고리

집단

요소 옵션 그룹에서 추천 이미지만 표시하도록 선택했는지 확인합니다. 다른 모든 것을 숨깁니다.

설계

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

• 제목 글꼴: 희보
• 제목 글꼴 두께: 매우 굵게
• 제목 텍스트 크기: 16px
• 제목 줄 높이: 1.4em
• 패딩: 위쪽 5%, 왼쪽 5%, 오른쪽 5%

고급 행 설정

CSS 클래스, 사용자 정의 CSS 및 Z 인덱스

고급 탭에서 행에 CSS 클래스, 약간의 사용자 정의 CSS를 제공하고 페이지의 다른 콘텐츠 위에 팝업이 유지되도록 z 인덱스를 업데이트해야 합니다.

이 단계는 프런트 엔드에서 비주얼 빌더를 사용할 때 보기에서 행을 숨깁니다. 따라서 이러한 옵션을 업데이트하기 전에 와이어프레임 보기를 배포하는 것이 좋습니다.

와이어프레임 보기 모드에서 백업 행 설정을 열고 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 행 뒤

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

position: fixed;
bottom: 0%;
right: -300px;

Z 인덱스를 업데이트합니다.

• Z 인덱스: 999

스크롤 트리거 포인트로 디바이더 추가

이 시점에서 팝업을 사용할 준비가 되었습니다. 이제 사용자가 이 지점으로 스크롤하면 팝업이 표시되거나 숨겨지도록 게시물 템플릿에서 스크롤 트리거 지점을 추가할 위치를 결정해야 합니다. 스크롤 트리거 포인트는 CSS 클래스가 있는 요소에 의해 결정됩니다. 스크롤 트리거 포인트가 게시물의 맨 아래에 있기를 원하기 때문에 스크롤 트리거 포인트 요소로 CSS 클래스와 함께 구분선을 사용할 수 있습니다.

스크롤 트리거 포인트 #1 추가

첫 번째 스크롤 트리거 지점을 추가하기 위해 게시물 콘텐츠 모듈 바로 아래에 구분선 모듈을 추가해 보겠습니다.

그런 다음 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 포스트 웨이포인트

그것은 쉽다.

스크롤 트리거 포인트 #2 추가

이제 두 번째 트리거 지점(페이지 아래로 팝업을 숨길 지점)을 추가하려면 방금 만든 구분선 모듈을 복사합니다.

그런 다음 팝업을 닫거나(또는 숨길) 게시물 템플릿 아래에 있는 위치에 붙여넣습니다. 이 예에서는 관련 게시물 블로그 모듈 바로 아래와 게시물 템플릿의 댓글 섹션 바로 위에 추가합니다.

코드 모듈로 사용자 정의 코드 추가

이 스크롤 트리거 팝업이 작동하기 위해 남은 것은 약간의 코드입니다.

계속해서 게시물 템플릿에 코드 모듈을 추가하세요.

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

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

결과

결과를 보려면 블로그 게시물 중 하나를 방문하여 페이지를 아래로 스크롤하십시오. 게시물 콘텐츠 하단에 도달하면 관련 게시물 팝업이 표시되어야 합니다. 게시물의 관련 게시물 섹션 바로 뒤에 숨겨진 것을 보려면 계속 스크롤하십시오.

스크롤 트리거 팝업에 이메일 옵션 추가

관련 게시물 팝업은 멋지지만 대신 팝업을 선택하는 이메일을 원할 수도 있습니다. 이것은 하기 쉽습니다. 실제로 이 템플릿의 미리 만들어진 바닥글 레이아웃에서 이미 설계된 이메일 옵션을 사용할 수도 있습니다.

Divi 라이브러리에 바닥글 이메일 옵틴 저장

레이아웃을 저장하고 테마 빌더를 종료합니다. 그런 다음 을 클릭하여 사용자 정의 바닥글 템플릿 레이아웃을 편집합니다.

이메일 선택 모듈을 찾아 divi 라이브러리에 저장합니다.

팝업 행에 저장된 이메일 옵틴 추가

이제 사용자 정의 본문 템플릿 레이아웃으로 돌아가서 팝업으로 사용 중인 동일한 행을 선택하여 저장된 이메일을 추가하십시오. 해당 행 안의 모든 항목이 팝업 콘텐츠로 표시됩니다.

텍스트 및 블로그 모듈을 사용하지 않기 때문에 프런트 엔드에서 표시되지 않도록 비활성화할 수 있습니다.

이메일 옵틴 설정

이메일 옵트인이 설정되고 다른 모듈이 비활성화되면 다음과 같이 이메일 옵트인 설정을 업데이트하십시오.

• 제목: "이 기사가 마음에 드셨습니까?"
• 본문: “뉴스레터에 가입하세요!”

그런 다음 다음 패딩을 추가합니다.

• 패딩: 아래쪽 5%, 오른쪽 20px

결과

이제 라이브 포스트에서 결과를 확인하세요.

마지막 생각들

스크롤 트리거 팝업은 확실히 블로그에 귀중한 자산이 될 수 있습니다. 그들은 적격한 리드를 활용하는 눈에 거슬리지 않는 방법을 제공합니다. 관련 게시물 팝업을 사용하여 사이트에 계속 참여하거나 이메일 옵션을 사용하여 목록을 확장하세요. 그리고 Divi를 사용하면 생각할 수 있는 거의 모든 콘텐츠를 추가할 수 있습니다. 그리고 방문자가 꽤 강력한 팝업을 볼 시기를 정확히 결정할 수 있습니다. 자신의 블로그나 다음 프로젝트에 유용하게 활용되기를 바랍니다.

아래 의견에서 여러분의 의견을 기다리겠습니다.

건배!