De schuifregelaar over de volledige breedte wordt geleverd met een aantal geweldige functies, waaronder de mogelijkheid om schuifregelaars met video-achtergronden toe te voegen. Maar een functie die het nog krachtiger maakt, is de mogelijkheid om de schuifregelaar uit te breiden voor weergave op volledig scherm. Daarom laten we u zien hoe u functionaliteit op volledig scherm aan een schuifregelaar toevoegt.

De toevoeging van een functie voor volledig scherm aan de schuifmodule van Divi is uiterst eenvoudig te implementeren met een paar regels CSS en JavaScript. In slechts 5 minuten kunt u uw schuifregelaar over de volledige breedte omzetten in een schuifregelaar op volledig scherm die wordt uitgevouwen om het hele scherm te vullen, net als kopteksten op volledig scherm.

De implementatie van de schuifregelaarfunctionaliteit op volledig scherm op Divi

Als je onze tutorial over de presentatie van de Divi-interface, Ik nodig je uit om het te doen.

Stap 1: voeg een schuifregelaar met dia's toe in de volledige breedte

Gebruik de " Divi Builder »Voeg een sectie toe« volle breedte »En klik op«  Plaats een module .

Voeg een volledige breedte module.

voeg een module slider Divi #

Voeg in de schuifregelaarinstellingen voor volledig scherm, onder het tabblad 'Aangepaste CSS', een CSS-klasse toe met de naam ' et_fullscreen_slider .

Voeg in "Algemene instellingen" een nieuwe dia toe.

Update in de dia-instellingen onder Algemene instellingen de volgende items:

• Categorie: [voer je rubriek in]
• Tekstknop: [voer je tekstknop in]
• URL-knop: [voer je URL-knop in]
• Achtergrondafbeelding: [voeg je achtergrondafbeelding toe] (Ik gebruik een afbeelding van unsplash.com)

Herhaal deze stap voor zoveel dia's als u wilt toevoegen.

Als u klaar bent, klikt u op ' Opslaan afsluiten .

Aangepaste CSS en JavaScript toevoegen

Ga vanuit het WordPress-dashboard naar ' Divi → Thema-opties En voer onder "Algemene instellingen" de volgende CSS in het tekstvak Aangepaste CSS in:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-height: 100% significant; height: 100% belangrijk;! }

klik op het volgende tabblad en voeg het volgende javascript toe aan het tekstvak met de titel " Voeg de code toe aan het hoofd jouw 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);

eindelijk

Nu heb je een schuifregelaar voor volledig scherm voor je website. Gebruik het om effectieve schuifregelaars over de volledige breedte te maken voor de meeste browsers.

Als u vragen heeft, aarzel dan niet om ze te stellen.

[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”]DOWNLOAD DIVI THEMA [/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”]DOWNLOAD DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi-zelfstudies

• 5 websites voor restaurant gebruik Divi thema
• Tekst toevoegen aan een Divi WooCommerce-product
• Hoe de menukleur tussen Divi-pagina's te veranderen
• Hoe de rasters van een blog personaliseren met Divi
• Hoe de rol Divi editor op WordPress
• Een Divi-schuifregelaar op volledig scherm maken
• Hoe de kleur van menu's tussen Divi-pagina's te veranderen
• Functies die u waarschijnlijk niet kent over Divi
• Divi Builder gebruiken op WordPress
• Hoe de Divi-scrolmodule video te gebruiken
• Hoe de Divi Builder Flip-module te gebruiken
• Hoe een getuigenismodule op Divi Builder toe te voegen
• Hoe de Divi-tekstmodule te gebruiken
• Hoe maak je een schuifregelaar op Divi
• Hoe u een Divi-gebruikersrol kunt bewerken
• Hoe de Divi Social Media-module te gebruiken
• Hoe de shopmodule te gebruiken met het thema WordPress Divi
• Hoe de Divi zijbalkmodule te gebruiken
• Hoe de Divi Price Table-module te gebruiken
• Hoe de titelmodule van Divi-publicaties te gebruiken
• Hoe een videomodule van Divi toe te voegen
• Hoe de artikelnavigatiemodule te gebruiken
• Hoe de Divi-zoekmodule te gebruiken
• Hoe de Divi wallet-module te gebruiken
• Hoe de persoonsmodule op Divi Builder te gebruiken
• De walletmodule gebruiken met Divi-filter
• De schuifregelaarmodule op de volledige breedte gebruiken
• Hoe de Divi Builder-beeldmodule te gebruiken
• De navigatiemodule op de volledige breedte van Divi Builder gebruiken
• Hoe de afbeeldingengalerij-module te gebruiken
• Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
• Hoe de Divi Full Width Portfolio Module te gebruiken
• Hoe de Divi header-module over de volle breedte te gebruiken
• Hoe de Divi Counter-module te gebruiken
• De schuifregelaar voor artikelen gebruiken in Divi Builder
• Hoe de Divi Email Optin-module te gebruiken