전체 너비 슬라이더에는 비디오 배경이있는 슬라이더를 추가하는 기능을 포함하여 몇 가지 멋진 기능이 있습니다. 그러나이를 더욱 강력하게 만드는 한 가지 기능은 슬라이더를 확장하여 전체 화면 모드로 표시하는 기능입니다. 따라서 슬라이더에 전체 화면 기능을 추가하는 방법을 보여 드리겠습니다.

슬라이더 모듈에 전체 화면 기능 추가 Divi CSS와 JavaScript 몇 줄로 구현하기가 매우 쉽습니다. 5 분만에 전체 너비 슬라이더를 전체 화면 헤더처럼 전체 화면을 채우도록 확장되는 전체 화면 슬라이더로 변환 할 수 있습니다.

Divi에서 전체 화면 슬라이더 기능 구현

우리를 읽지 않았다면 Divi 인터페이스 프레젠테이션에 대한 자습서나는 당신이 그것을 초대합니다.

1 단계 : 전체 너비 모드에서 슬라이드가있는 슬라이더 추가

" 디비 빌더 »섹션 추가« 전폭 »그리고«  모듈 삽입 ".

전체 폭 모듈을 추가합니다.

모듈 슬라이더 디비 번호를 추가

전체 화면 슬라이더 설정의 "사용자 정의 CSS"탭에서 " et_fullscreen_slider ".

"일반 설정"에서 새 슬라이드를 추가합니다.

슬라이드 설정의 일반 설정에서 다음 항목을 업데이트하십시오.

• 섹션 : [당신의 화제를 입력]
• 단추 텍스트 : [당신의 버튼 텍스트를 입력]
• URL 버튼 : [당신의 URL 버튼을 입력]
• 배경 이미지 : 배경 이미지를 추가 (unsplash.com의 이미지를 사용하고 있습니다.)

추가하려는 슬라이드 수만큼이 단계를 반복하십시오.

완료되면 " 저장 후 종료 ".

사용자 정의 CSS 및 JavaScript를 추가하는 방법

워드 프레스 대시 보드에서 " Divi → 테마 옵션 그리고 "일반 설정"에서 사용자 정의 CSS 텍스트 상자에 다음 CSS를 입력합니다.

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {최소 신장 100 %의 유의; 높이 : 100 % 중요한;! }

다음 탭을 클릭하고 "라는 텍스트 상자에 다음 자바 스크립트를 추가합니다. 머리 부분에 코드를 추가하세요. 블로그 »:

(function($) {
 
 $(window).on('load resize', function() {
 $('.et_fullscreen_slider').each(function() {
 et_fullscreen_slider($(this));
 });
 });
 
 function et_fullscreen_slider(et_slider) {
 var et_viewport_width = $(window).width(),
 et_viewport_height = $(window).height(),
 et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
 $admin_bar = $('#wpadminbar'),
 $main_header = $('#main-header'),
 $top_header = $('#top-header');
 
 $(et_slider).height('auto');
 
 if ($admin_bar.length) {
 var et_viewport_height = et_viewport_height - $admin_bar.height();
 }
 
 if ($top_header.length) {
 var et_viewport_height = et_viewport_height - $top_header.height();
 }
 
 if (!$('.et_transparent_nav').length) {
 var et_viewport_height = et_viewport_height - $main_header.height();
 }
 
 if (et_viewport_height > et_slider_height) {
 $(et_slider).height(et_viewport_height);
 }
 }
 
})(jQuery);

최종적으로

이제 전체 화면 모드 슬라이더가 있습니다. 웹 사이트. 대부분의 브라우저에서 효과적인 전체 너비 슬라이더를 만드는 데 사용합니다.

궁금한 점이 있으면 언제든지 문의하십시오.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”플랫” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI 테마 다운로드 [/vcex_button][/vc_column][vc_column 너비=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” 레이아웃=”확장” align=”center” font_family = ”Raleway” font_weight=”700″ style=”플랫” ​​custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]다운로드 TEMPLATES DIVI[/vcex_버튼][/vc_열][/vc_row]

다른 Divi 자습서

• 레스토랑 이용 디비 테마 5 웹 사이트
• Divi WooCommerce 제품에 텍스트를 추가하는 방법
• Divi 페이지 간의 메뉴 색상을 변경하는 방법
• Divi로 블로그 그리드를 개인화하는 방법
• 어떻게 워드 프레스의 역할 디비 편집기를 사용하는
• 전체 화면 Divi 슬라이더를 만드는 방법
• Divi 페이지 간의 메뉴 색상을 변경하는 방법
• Divi에 대해 잘 모르는 기능
• WordPress에 Divi Builder를 사용하는 방법
• Divi 비디오 스크롤 모듈을 사용하는 방법
• Divi Builder Flip 모듈을 사용하는 방법
• Divi Builder에서 회원 평가 모듈을 추가하는 방법
• Divi 텍스트 모듈을 사용하는 방법
• Divi에서 슬라이더를 만드는 방법
• Divi 사용자 역할을 편집하는 방법
• Divi Social Media 모듈 사용 방법
• 테마 WordPress Divi에서 상점 모듈을 사용하는 방법
• Divi 사이드 바 모듈을 사용하는 방법
• Divi Price 테이블 모듈을 사용하는 방법
• Divi 발행물의 제목 모듈을 사용하는 방법
• Divi의 비디오 모듈을 추가하는 방법
• 기사 탐색 모듈을 사용하는 방법
• Divi 검색 모듈 사용 방법
• Divi 지갑 모듈 사용 방법
• Divi Builder에서 person 모듈을 사용하는 방법
• Divi 필터와 함께 Wallet 모듈을 사용하는 방법
• 전체 너비 슬라이더 모듈을 사용하는 방법
• Divi Builder 이미지 모듈을 사용하는 방법
• Divi Builder의 전체 너비 탐색 모듈을 사용하는 방법
• 이미지 갤러리 모듈을 사용하는 방법
• Divi Builder Full-Width Module을 사용하는 방법
• Divi Full Width 포트폴리오 모듈을 사용하는 방법
• Divi 전폭 헤더 모듈 사용 방법
• Divi Counter Module 사용 방법
• Divi Builder에서 아티클 슬라이더를 사용하는 방법
• Divi Email Optin 모듈을 사용하는 방법