Skjutreglaget i full bredd har några fantastiska funktioner, inklusive möjligheten att lägga till skjutreglage med videobakgrunder. Men en funktion som gör den ännu mer kraftfull är möjligheten att expandera reglaget för att visas i helskärmsläge. Så vi visar hur du lägger till helskärmsfunktionalitet i en skjutreglage.

Tillägget av en helskärmsfunktion till skjutreglermodulen på Divi är extremt lätt att implementera med några rader CSS och JavaScript. På bara fem minuter kan du konvertera skjutreglaget för fullbredd till en skjutreglage för helskärm som expanderar för att fylla hela skärmen, ungefär som rubriker för helskärm.

Implementeringen av skjutreglaget för fullskärm på Divi

Om du inte har läst vår handledning om presentation av Divi-gränssnittet, Jag inbjuder dig att göra det.

Steg 1: Lägg till ett skjutreglage med objektglas i full breddsläge

Använd " Divi Builder »Lägg till ett avsnitt« hela bredden »Och klicka på«  Sätt i en modul ".

Lägg till en fullbreddsmodul.

lägga ett reglage modul Divi #

Lägg till en CSS-klass under fliken "Anpassad CSS" i helskärmsinställningarna under fliken "Anpassad CSS" et_fullscreen_slider ".

Lägg till en ny bild i "Allmänna inställningar".

Uppdatera följande objekt under bildinställningarna under Allmänna inställningar:

• Kategori: [skriv in din rubrik]
• Textknapp: [skriv in din textknapp]
• URL-knapp: [Ange din URL-knapp]
• Bakgrundsbild: [lägg till din bakgrundsbild] (Jag använder en bild från unsplash.com)

Upprepa detta steg för så många bilder som du vill lägga till.

När du är klar klickar du på " Spara och avsluta ".

Så här lägger du till anpassad CSS och JavaScript

Gå till WordPress-instrumentpanelen till " Divi → Temaalternativ Och under "Allmänna inställningar" anger du följande CSS i textrutan Anpassad CSS:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-höjd: 100% signifikant; höjd: 100%! viktigt; }

klicka på nästa flik och lägg till följande javascript i textrutan med titeln " Lägg till koden i huvudet på din blogg »:

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

slutligen

Nu har du en helskärmsreglage för din webbplats. Använd den för att skapa effektiva skjutreglage i full bredd för de flesta webbläsare.

Om du har några frågor, tveka inte att ställa 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″ stil= »platt » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-nedladdning »]LADDA NED DET DIVI TEMA [/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= »expanderad » align= »center » font_family= »Raleway » font_weight= »700″ style= »platt » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-ladda ner »]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andra Divi tutorials

• 5 webbplatser för restaurang användning Divi tema
• Så här lägger du till text på en Divi WooCommerce-produkt
• Så här byter du menyfärg mellan Divi-sidor
• Hur du anpassar rutorna på en blogg med Divi
• Hur man använder roll Divi editor på Wordpress
• Hur man skapar en Divi-skjutreglage på full skärm
• Hur man ändrar menyens färg mellan Divi-sidor
• Funktioner du antagligen inte känner till Divi
• Så här använder du Divi Builder på WordPress
• Så här använder du Divi video-rullningsmodulen
• Så här använder du Divi Builder Flip-modulen
• Hur man lägger till en vittnesmodul om Divi Builder
• Så här använder du Divi-textmodulen
• Hur man skapar en reglage på Divi
• Hur man redigerar en Divi-användarroll
• Så här använder du Divi Social Media-modulen
• Hur man använder butikmodulen på temat WordPress Divi
• Så här använder du Divi sidebar-modulen
• Så här använder du Divi Price Table Module
• Hur man använder titelfodulen i Divi-publikationer
• Hur lägger jag till en videomodul av Divi
• Så här använder du artikelnavigationsmodulen
• Så här använder du Divi-sökmodulen
• Så här använder du Divi-plånboksmodulen
• Hur man använder personmodulen på Divi Builder
• Hur man använder plånboksmodulen med Divi-filter
• Hur man använder skjutreglaget med hela bredden
• Så här använder du Divi Builder Image Module
• Så här använder du Divi Builder med fullbredd navigationsmodul
• Hur man använder modulen för bildgalleri
• Så här använder du Divi Builder Full-Width Card Module
• Så här använder du Divi Full Width Portfolio Module
• Hur du använder Divi-modulen med full bredd
• Så här använder du Divi Counter Module
• Hur man använder artiklarna på Divi Builder
• Så här använder du Divi Email Optin-modulen