Divi에서 표시/숨기기 토글로 고정 프로모션 비디오를 만드는 방법
게시 됨: 2020-11-25프로모션 비디오는 정보를 얻기 위해 페이지를 탐색하기보다 비디오를 보고 싶어하는 모든 방문자에게 제품 및 서비스를 홍보하기 위한 훌륭한 마케팅 도구입니다. 또한 동영상이 전환율을 높이는 데 도움이 될 것이라고 확신하는 경우 사용자가 동영상을 최대한 많이 볼 수 있도록 하는 것이 좋습니다. 이를 염두에 두고 고정 프로모션 비디오(페이지 상단에 고정된 상태로 유지되는 비디오)는 웹사이트의 귀중한 자산이 될 수 있습니다.
이 튜토리얼에서는 Divi에서 표시/숨기기 토글을 사용하여 고정 프로모션 비디오를 만드는 방법을 보여 드리겠습니다. 아이디어는 처음에 스크롤 없이 볼 수 있는 부분에 동영상의 전체 크기 버전을 표시하는 것입니다. 그런 다음 사용자가 페이지를 아래로 스크롤하면 비디오가 페이지 상단에 고정되어 사용자가 페이지의 나머지 콘텐츠를 탐색하는 동안 쉽게 액세스 및/또는 볼 수 있습니다. 물론 이것은 일부 방문자에게 약간 방해가 될 수 있습니다. 따라서 사용자가 원할 때마다 비디오를 표시하거나 숨길 수 있는 토글 버튼을 추가하는 방법도 보여드리겠습니다.
시작하자!
엿보기
다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.
이것은 토글이 없는 스티키 비디오입니다.
다음은 토글 버튼이 있는 동일한 고정 비디오입니다.
다음은 토글 기능에 대해 자세히 살펴보겠습니다.
그리고 모바일에서는 이렇게 생겼습니다.
무료로 레이아웃 다운로드
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.
가져오기 버튼을 클릭합니다.
이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.
그런 다음 가져오기 버튼을 클릭합니다.
완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
시작하려면 다음을 수행해야 합니다.
- 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
- WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
- "미리 만들어진 레이아웃 선택" 옵션을 선택합니다.
- 디지털 마케팅 서비스 페이지 레이아웃을 업로드하십시오.
판매 페이지에 대한 표시/숨기기 토글을 사용하여 고정 프로모션 비디오를 만드는 방법
고정 비디오에 대한 행 추가
시작하기 위해 레이아웃의 첫 번째/상단 섹션 행에서 두 번째 텍스트 모듈을 삭제할 것입니다.
상단 섹션의 기존 행 아래에 새 1열 행을 추가합니다.
새 행에 대한 행 설정을 열고 고급 탭에서 다음과 같이 Z 인덱스를 업데이트합니다.
- Z 인덱스: 14
이렇게 하면 페이지 스크롤 중에 멈출 때 행에 추가한 비디오가 페이지의 다른 콘텐츠 위에 유지됩니다.
비디오 추가
행의 열 안에 새 비디오 모듈을 추가합니다.
비디오 설정을 열고 선택한 비디오의 mp4 및 webm 형식을 업로드합니다.
원하는 경우 비디오에 오버레이 이미지를 추가하십시오.
디자인 탭에서 다음 크기 조정 옵션을 업데이트합니다.
- 최대 너비: 900px
- 모듈 정렬: 중앙
- 둥근 모서리: 8px
- 박스 섀도우: 스크린샷 참조
기둥을 끈적하게 만들기
비디오가 포함된 열에 대한 설정을 열고 고급 탭에서 다음 CSS 클래스를 추가합니다.
- CSS 클래스: et-sticky-video
그런 다음 다음과 같이 스틱 위치를 업데이트합니다.
- 고정 위치: 상단에 고정
- 전환 기본 및 고정 스타일: 아니요
이제 고정 위치가 적용되었으므로 고정 상태의 기본 요소에 다음 사용자 지정 CSS를 추가합니다.
width: 300px !important; right: 0px !important; left: auto !important; top: 0px;
고정 상태에서 비디오 재생 아이콘 크기 업데이트
그런 다음 비디오 설정을 다시 열고 다음과 같이 고정 상태에서 재생 아이콘 글꼴 크기를 업데이트합니다.
- 사용자 정의 아이콘 크기 사용: 예
- 재생 아이콘 글꼴 크기(고정): 50px
지금까지의 결과
고정 비디오 토글 버튼 만들기
고정 비디오 토글 버튼을 만들려면 비디오 모듈 아래에 새 버튼 모듈을 만듭니다.
그런 다음 비디오 모듈 위로 버튼을 이동합니다.
버튼 설정을 열고 다음과 같이 버튼 텍스트를 업데이트합니다.
- 버튼 텍스트: 숨기기
(참고: 이 텍스트는 나중에 코드를 추가할 때 버튼을 클릭할 때 "Show"라는 단어로 대체/전환됩니다.)
디자인 탭에서 다음을 업데이트합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 스타일: 14px
- 버튼 텍스트 색상: #fa50a9
- 버튼 글꼴 두께: 반 굵게
- 버튼 글꼴 스타일: TT
- 버튼 아이콘: 오른쪽 화살표
- 버튼에 대한 호버 시 아이콘만 표시: 아니오
(참고: 보다 직관적이고 더 나은 사용자 경험을 위해 코드 레이아웃을 추가할 때 선택한 버튼 아이콘은 버튼을 클릭할 때 180도 회전됩니다.
버튼의 간격도 업데이트하십시오.
- 패딩: 위쪽 0.5em, 아래쪽 0.5em, 왼쪽 1em, 오른쪽 1.7em
고급 탭에서 버튼에 다음 CSS 클래스를 추가합니다.
- CSS 클래스: et-sticky-video-toggle
고급 탭에서 위치 옵션을 업데이트합니다.
- 위치: 절대
- 위치: 왼쪽 하단
이제 다음과 같이 고정 상태에서 변환 변환 옵션을 업데이트하여 열/비디오 외부의 버튼을 왼쪽으로 이동합니다.
- 변환 X축 변환(고정): -100%
버튼 토글 디자인을 끝내려면 버튼이 고정 상태에 도달할 때까지 버튼을 숨겨야 합니다. 이렇게 하려면 다음과 같이 사용자 지정 CSS를 바탕 화면 및 고정 상태의 기본 요소로 업데이트합니다.
바탕 화면의 주요 요소에 대해…
display:none !important;
Sticky의 주요 요소에 대해…
display:block !important;
토글 기능에 대한 사용자 정의 코드 추가
토글이 필요한 방식으로 작동하도록 하려면 비디오 모듈 아래에 코드 모듈을 추가해야 합니다.
맞춤 CSS
콘텐츠 탭에서 다음 사용자 정의 CSS를 지나서 스타일 태그로 감싸도록 합니다.
.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}
커스텀 제이쿼리
그런 다음 스타일 태그가 있는 CSS 아래에 스크립트 태그로 래핑된 다음 JQuery를 추가합니다.
(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');
$stickyVideoToggle.on('click',function(e) {
e.preventDefault();
$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');
$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);
그게 다야!
최종 결과
이제 페이지의 라이브 버전을 보고 결과를 직접 확인하십시오.
이것은 토글이 없는 스티키 비디오입니다.
다음은 토글 버튼이 있는 동일한 고정 비디오입니다.
다음은 토글 기능에 대해 자세히 살펴보겠습니다.
그리고 모바일에서는 이렇게 생겼습니다.
비디오를 보완하기 위해 고정 기둥에 추가 모듈을 쉽게 추가
비디오가 아닌 열에 고정 위치가 추가되기 때문에 비디오를 보완하기 위해 추가 모듈/콘텐츠를 자유롭게 추가하십시오.
예를 들어 동일한 고정 열의 비디오 하단에 버튼을 포함할 수 있습니다.
그러면 열의 고정 상태에서 비디오 아래에 유지됩니다.
이 고정 비디오 레이아웃으로 사용자 정의 비디오 옵션을 쉽게 추가하십시오.
비디오가 아닌 열에 고정 위치를 적용하면 열 내부에 사용자 지정 비디오 임베드 또는 HTML(텍스트 또는 코드 모듈 사용)을 추가하는 데에도 유용합니다. 고정 비디오 기능은 계속 작동합니다.
예를 들어 HTML5 비디오를 동일한 열 내의 코드 모듈에 추가할 수 있습니다.
기둥 구조도 쉽게 변경!
또한 인접한 콘텐츠와 함께 비디오를 표시하려는 열 구조로 행을 쉽게 변경할 수 있습니다. 예를 들어 처음에 오른쪽 또는 왼쪽 열에 고정 비디오가 있는 2열 레이아웃일 수 있습니다. 비디오 콘텐츠가 포함된 열이 이 튜토리얼에서 설명한 것과 동일한 CSS 클래스와 고정 스타일을 가지는지 확인하십시오. 고정 기능은 동일한 방식으로 작동합니다.
예를 들어 기존 디자인을 사용하여 레이어 보기를 사용하여 새 열을 추가하고 해당 새 열을 기본 제목 텍스트로 채울 수 있습니다.
인접한 열/콘텐츠가 문서의 정상적인 흐름에 남아 있는 동안 고정 열은 계속 원활하게 작동합니다.
Divi 오버레이 이미지 옵션을 사용하는 YouTube 동영상/삽입 관련 문제
이 디자인과 같이 동영상 모듈로 동영상을 삽입하기 위해 YouTube URL을 사용하는 경우 Divi의 내장 오버레이 이미지(재생 아이콘 포함) 옵션을 사용하지 않는 것이 가장 좋습니다. 이렇게 하면 비디오 오디오가 고정 상태에서 처음부터 자동 재생되어 다른 간격으로 중복 오디오가 재생됩니다. 따라서 Divi 비디오 모듈과 함께 Divi의 오버레이 이미지 및 재생 아이콘을 사용하려면 대신 mp4 및 WebM 비디오 파일/URL을 추가해야 합니다.
마지막 생각들
페이지에 대한 표시/숨기기 토글을 사용하여 고정 프로모션 비디오를 구축하면 제품 및 서비스를 홍보할 수 있는 새로운 방법의 문이 열립니다. 전환율이 높은 비디오를 최전방에 유지할 수 있을 뿐만 아니라 Divi의 동일한 열에 추가하기만 하면 비디오 위 또는 아래에 무료 정보 또는 CTA를 쉽게 포함할 수 있습니다.
사실, 비디오를 포함할 필요도 없습니다. 스크롤할 때 페이지 상단에 고정하려는 정보로 고정 열을 채우면 됩니다!
댓글로 여러분의 의견을 기다리겠습니다.
건배!