Glisorul cu lățime completă vine cu câteva caracteristici minunate, inclusiv posibilitatea de a adăuga glisoare cu fundaluri video. Dar, o caracteristică care îl face și mai puternic este capacitatea de a extinde glisorul pentru a fi afișat în modul ecran complet. Așadar, vă vom arăta cum să adăugați funcționalitatea ecranului complet la un glisor.

Adăugarea unei funcții de ecran complet la modulul glisor al Divi este extrem de ușor de implementat cu câteva linii de CSS și JavaScript. În doar 5 minute, puteți converti glisorul cu lățime completă într-un glisor cu ecran complet care se extinde pentru a umple întregul ecran, la fel ca anteturile pentru ecran complet.

Implementarea funcționalității glisante pe ecran complet pe Divi

Dacă nu ne-ați citit tutorial despre prezentarea interfeței Divi, Te invit să o faci.

Pasul 1: adăugați un glisor cu diapozitive în modul lățime completă

Folosiți „ Divi Builder »Adăugați o secțiune« lăţime completă »Și faceți clic pe«  Introduceți un modul ".

Adăugați un modul full-lățime.

adăugați un cursor modul Divi #

În Setări glisor ecran complet, sub fila „CSS personalizat”, adăugați o clasă CSS numită „ et_fullscreen_slider ".

În „Setări generale” adăugați un nou diapozitiv.

În setările de diapozitive, sub Setări generale actualizați următoarele elemente:

• Secțiunea: [introduceți subiectul]
• Butonul Text: [introduceți textul buton]
• Butonul URL: [introduceți butonul URL]
• Imaginea de fundal: [adăugați o imagine de fundal] (Folosesc o imagine de la unsplash.com)

Repetați acest pas pentru atâtea diapozitive pe care doriți să le adăugați.

Odată terminat, faceți clic pe „ Salvați și ieșiți ".

Cum se adaugă CSS și JavaScript personalizate

Din tabloul de bord WordPress, accesați „ Divi → Opțiuni temă Și sub „Setări generale”, introduceți următorul CSS în caseta de text Custom CSS:

.et_pb_slides .et_fullscreen_slider, .et_pb_slide .et_fullscreen_slider, .et_pb_container .et_fullscreen_slider {min-height: 100% semnificativă; Înălțime: 100% importantă;! }

faceți clic pe fila următoare și adăugați următorul javascript în caseta de text intitulată „ Adăugați codul la capul de blogul tău »:

(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);

În cele din urmă

Acum aveți un glisor pentru modul ecran complet pentru dvs site-ul web. Folosiți-l pentru a crea glisoare eficiente cu lățime completă pentru majoritatea browserelor.

Dacă aveți întrebări, nu ezitați să le puneți.

[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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCĂRCĂ TEMA DIVI [/vcex_button][/vc_column][vc_column] width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]

Alte tutoriale Divi

• site-uri web 5 pentru utilizare restaurant tematic Divi
• Cum să adăugați text pe un produs Divi WooCommerce
• Modificarea culorii meniului între paginile Divi
• Cum să personalizați grilele unui blog cu Divi
• Cum de a utiliza rolul editor Divi pe WordPress
• Cum se creează un glisor Divi pe ecran complet
• Modificarea culorii meniurilor între paginile Divi
• Caracteristici pe care probabil nu le cunoașteți despre Divi
• Cum se utilizează Divi Builder pe WordPress
• Cum se utilizează modulul de defilare video Divi
• Cum se utilizează modulul Divi Builder Flip
• Cum să adăugați un modul de mărturie pe Divi Builder
• Cum se utilizează modulul de text Divi
• Cum se creează un slider pe Divi
• Cum se editează un rol de utilizator Divi
• Cum se utilizează modulul Divi Social Media
• Cum se utilizează modulul magazin pe tema WordPress Divi
• Cum se utilizează modulul bara laterală Divi
• Cum se utilizează modulul de prețuri pentru divi
• Cum se utilizează modulul de titlu al publicațiilor Divi
• Cum se adaugă un modul video de Divi
• Cum să utilizați modulul de navigare pentru articole
• Cum se utilizează modulul de căutare Divi
• Cum se utilizează modulul portofel Divi
• Cum se utilizează modulul persoană pe Divi Builder
• Cum se utilizează modulul portofel cu filtrul Divi
• Modul de utilizare a modulului glisant cu lățime întreagă
• Cum se utilizează modulul de imagine Divi Builder
• Modul de utilizare a modulelor de navigație full-width din Divi Builder
• Cum se utilizează modulul galerie de imagini
• Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
• Cum să utilizați modulul de portofoliu Full Width Divi
• Cum se utilizează modulul antet de Divi pentru lățimea completă
• Cum se utilizează modulul Counter Modul Divi
• Cum se utilizează glisorul de articole pe Divi Builder
• Cum se utilizează modulul Divi Email Optin