Skyderen i fuld bredde leveres med nogle fantastiske funktioner, herunder muligheden for at tilføje glidere med videobaggrund. Men en funktion, der gør den endnu mere kraftfuld, er evnen til at udvide skyderen til visning i fuldskærmstilstand. Så vi viser dig, hvordan du tilføjer fuldskærmsfunktionalitet til en skyder.

Tilføjelsen af ​​en fuldskærmsfunktion til skydermodulet til Divi er ekstremt let at implementere med et par linjer CSS og JavaScript. På bare 5 minutter kan du konvertere din skyder i fuld bredde til en skyder i fuld skærm, der udvides til at fylde hele skærmen, ligesom overskrifter i fuld skærm.

Implementeringen af ​​fuldskærms skyderen funktionalitet på Divi

Hvis du ikke har læst vores tutorial om præsentation af Divi-grænsefladen, Jeg inviterer dig til at gøre det.

Trin 1: Tilføj en skyder med dias i tilstanden i fuld bredde

Brug " Builder Divi »Tilføj et afsnit« fuld bredde »Og klik på«  Indsæt et modul '.

Tilføj et komplet breddemodul.

tilføj et skyderen modul til Divi #

Under fuldskærms skyderindstillinger skal du under fanen "Tilpasset CSS" tilføje en CSS-klasse kaldet " et_fullscreen_slider '.

I "Generelle indstillinger" skal du tilføje et nyt dias.

Opdater følgende elementer under diasindstillingerne under Generelle indstillinger:

• Kategori: [Indtast din overskrift]
• Tekstknap: [Indtast din tekstknap]
• URL-knap: [Indtast din URL-knap]
• Baggrundsbillede: [Tilføj dit baggrundsbillede] (Jeg bruger et billede fra unsplash.com)

Gentag dette trin i så mange dias, som du vil tilføje.

Når det er gjort, skal du klikke på " Gem og afslut '.

Sådan tilføjes tilpasset CSS og JavaScript

Gå til WordPress-betjeningspanelet til " Divi → Temaindstillinger Og under "Generelle indstillinger" skal du indtaste følgende CSS i tekstfeltet Custom CSS:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-højde: 100% signifikant; højde: 100%! vigtigt; }

klik på den næste fane og tilføj følgende javascript til tekstfeltet med titlen " Tilføj koden til hovedet af din blog »:

(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

Nu har du en skyder til fuldskærmstilstand til din websted. Brug den til at skabe effektive skydere i fuld bredde til de fleste browsere.

Hvis du har spørgsmål, tøv ikke med at stille 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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andre Divi tutorials

• 5 websteder, der bruger Divi restaurant tema
• Sådan tilføjer du tekst på et Divi WooCommerce-produkt
• Sådan ændres menuen farve mellem Divi sider
• Sådan tilpasses tavlerne på en blog med Divi
• Sådan bruges rolle Divi redaktør på WordPress
• Sådan opretter du en Divi-skyder på fuld skærm
• Sådan ændres menuenes farve mellem Divi-sider
• Funktioner, som du sandsynligvis ikke kender til Divi
• Sådan bruger du Divi Builder på WordPress
• Sådan bruges Divi-video-rullemodulet
• Sådan bruges Divi Builder Flip-modulet
• Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
• Sådan bruges Divi-tekstmodulet
• Sådan opretter du en skyder på Divi
• Sådan redigeres en Divi-brugerrolle
• Sådan bruges Divi Social Media-modulet
• Sådan bruges butikmodulet med temaet WordPress Divi
• Sådan bruges Divi sidebar modul
• Sådan bruges Divi Price Table Module
• Sådan bruges titelmodulet i Divi-publikationer
• Sådan tilføjes et videomodul til Divi
• Sådan bruges artikelnavigationsmodulet
• Sådan bruges Divi-søgemodulet
• Sådan bruges Divi wallet-modulet
• Sådan bruges personmodulet på Divi Builder
• Sådan bruges tegnebogen modulet med Divi filter
• Sådan bruges glidemodulet i fuld bredde
• Sådan bruges Divi Builder Image Module
• Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
• Sådan bruges billedgallerimodulet
• Sådan bruges Divi Builder Fuldbredde-kortmodul
• Sådan bruges Divi Full Width Portfolio Module
• Sådan bruges Divi-modulet i fuld bredde
• Sådan bruges Divi Counter Module
• Sådan bruges artikelskyderen på Divi Builder
• Sådan bruges Divi Email Optin-modulet