Glidebryteren i full bredde kommer med noen fantastiske funksjoner, inkludert muligheten til å legge til glidebrytere med videobakgrunn. Men en funksjon som gjør den enda kraftigere, er muligheten til å utvide glidebryteren til å vises i fullskjermmodus. Så vi viser deg hvordan du legger til fullskjermsfunksjonalitet i en glidebryter.

Tillegg av en fullskjermfunksjon til glidemodulen til Divi er ekstremt enkel å implementere med noen få linjer med CSS og JavaScript. På bare 5 minutter kan du konvertere glidebryteren for full bredde til en glidebryter for full skjerm som utvides for å fylle hele skjermen, omtrent som fullskjermhoder.

Implementeringen av glidebryteren for fullskjerm på Divi

Hvis du ikke har lest vår veiledning om presentasjonen av Divi-grensesnittet, Jeg inviterer deg til å gjøre det.

Trinn 1: Legg til en glider med lysbilder i modus for full bredde

Bruk " Divi Builder »Legg til en seksjon« fulle bredde »Og klikk på«  Sett inn en modul '.

Legg til en full-bredde-modulen.

legge til en modul skyve Divi #

Legg til en CSS-klasse kalt "Under" Tilpasset CSS "-fanen under Fullskjerm-skyveinnstillingene. et_fullscreen_slider '.

Legg til et nytt lysbilde i "Generelle innstillinger".

Oppdater følgende elementer under lysbildeinnstillingene under Generelle innstillinger:

• Seksjon: [skriv inn delen]
• Tekst-knapp: [skriv inn tekstknappen]
• URL-knapp: [skriv inn URL-knappen]
• Bakgrunnsbilde: [legg til bakgrunnsbilde] (Jeg bruker et bilde fra unsplash.com)

Gjenta dette trinnet for så mange lysbilder du vil legge til.

Når du er ferdig, klikker du på " Lagre og avslutt '.

Hvordan legge til tilpasset CSS og JavaScript

Fra WordPress-oversikten, gå til " Divi → Temaalternativer Og under "Generelle innstillinger", skriv inn følgende CSS i tekstboksen Custom CSS:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-høyde: 100% betydelig; høyde: 100% viktig;! }

klikk på neste fane og legg til følgende javascript i tekstboksen merket " Legg til koden i hodet bloggen din '

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

endelig

Nå har du en glidebryter for fullskjermmodus for din nettside. Bruk den til å lage effektive glidebrytere i full bredde for de fleste nettlesere.

Hvis du har spørsmål, ikke nøl med å spørre dem.

[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”]LAST NED DIVI-TEMA [/vcex_button][/vc_column 1 ][vc_column] /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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Andre divisjoner

• 5 nettsteder for restaurant bruk Divi tema
• Slik legger du til tekst på et Divi WooCommerce-produkt
• Slik endrer du menyfargen mellom Divi-sider
• Hvordan tilpasse rutenettene til en blogg med Divi
• Hvordan bruke rollen Divi editor på WordPress
• Hvordan lage en Divi-glidebryter på fullskjerm
• Hvordan endre farge på menyer mellom Divi-sider
• Funksjoner du sannsynligvis ikke kjenner til Divi
• Slik bruker du Divi Builder på WordPress
• Slik bruker du Divi video-rullemodulen
• Slik bruker du Divi Builder Flip-modulen
• Hvordan legge til en attestmodul på Divi Builder
• Slik bruker du Divi-tekstmodulen
• Hvordan lage en glidebryter på Divi
• Hvordan redigere en Divi-brukerrolle
• Slik bruker du Divi Social Media-modulen
• Hvordan bruke butikkmodulen på temaet WordPress Divi
• Slik bruker du Divi sidebar-modulen
• Slik bruker du Divi Price Table Module
• Slik bruker du tittelmodulen til Divi-publikasjoner
• Hvordan legge til en videomodul av Divi
• Slik bruker du artikkelen navigasjonsmodulen
• Slik bruker du Divi-søkemodulen
• Slik bruker du Divi-lommebokmodulen
• Slik bruker du personmodulen på Divi Builder
• Slik bruker du lommebokmodulen med Divi filter
• Slik bruker du skyvemodulen med full bredde
• Slik bruker du Divi Builder Image Module
• Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
• Slik bruker du bildegalleriemodulen
• Slik bruker du Divi Builder Full-Width Card Module
• Slik bruker du Divi Full Width Portfolio Module
• Hvordan bruke Divi-modulen i full bredde
• Slik bruker du Divi-tellermodulen
• Slik bruker du glidebryteren for artikler på Divi Builder
• Slik bruker du Divi Email Optin-modulen