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 ".

Hur man lägger till en modul på divi builder

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 ".

Avancerad CSS-modifiering av divi-reglaget

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

Lägg till en diaspositiv på divi

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)

Inställningar för Divi-bild

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 ett skjutreglage för helskärmsläge 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″ style=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA 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”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andra Divi tutorials