Der Schieberegler in voller Breite bietet einige fantastische Funktionen, einschließlich der Möglichkeit, Schieberegler mit Videohintergrund hinzuzufügen. Eine Funktion, die es noch leistungsfähiger macht, ist die Möglichkeit, den Schieberegler so zu erweitern, dass er im Vollbildmodus angezeigt wird. Wir zeigen Ihnen, wie Sie einem Schieberegler Vollbildfunktionen hinzufügen.

Das Hinzufügen einer Vollbildfunktion zum Schiebereglermodul von Divi ist mit ein paar Zeilen CSS und JavaScript extrem einfach zu implementieren. In nur 5 Minuten können Sie Ihren Schieberegler in voller Breite in einen Vollbild-Schieberegler konvertieren, der sich erweitert, um den gesamten Bildschirm auszufüllen, ähnlich wie bei Vollbild-Headern.

Die Implementierung der Vollbild-Slider-Funktionalität auf Divi

Wenn Sie unsere nicht gelesen haben Tutorial zur Präsentation der Divi-OberflächeIch lade Sie ein, es zu tun.

Schritt 1: Fügen Sie einen Slider mit Slides in voller Breite hinzu

Verwenden Sie die " Divi Builder »Abschnitt hinzufügen« volle Breite »Und klicken Sie auf«  Fügen Sie ein Modul ein ".

So fügen Sie ein Modul in Divi Builder hinzu

Fügen Sie eine volle Breite Modul.

ein Modul Schieber Divi # hinzufügen

Fügen Sie in den Einstellungen des Vollbild-Schiebereglers auf der Registerkarte "Benutzerdefiniertes CSS" eine CSS-Klasse mit dem Namen " et_fullscreen_slider ".

Erweiterte CSS-Modifikation des Divi-Schiebereglers

Fügen Sie unter "Allgemeine Einstellungen" eine neue Folie hinzu.

Fügen Sie ein Diaspositiv für Divi hinzu

Aktualisieren Sie in den Folieneinstellungen unter Allgemeine Einstellungen die folgenden Elemente:

  • Sektion: [geben Sie Ihr Thema]
  • Button Text: [Geben Sie Ihre Schaltfläche Text]
  • URL Button: [URL eingeben Taste]
  • Hintergrundbild: [fügen Sie ein Hintergrundbild] (Ich verwende ein Bild von unsplash.com)

Divi Folieneinstellungen

Wiederholen Sie diesen Schritt für so viele Folien, wie Sie hinzufügen möchten.

Wenn Sie fertig sind, klicken Sie auf " Sicherer Ausgang ".

So fügen Sie benutzerdefiniertes CSS und JavaScript hinzu

Gehen Sie im WordPress-Dashboard zu " Divi → Themenoptionen Geben Sie unter "Allgemeine Einstellungen" das folgende CSS in das Textfeld Benutzerdefiniertes CSS ein:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-height: 100% signifikant; Höhe: 100%! important; }

Klicken Sie auf die nächste Registerkarte und fügen Sie das folgende Javascript in das Textfeld mit der Bezeichnung " Fügen Sie den Code zum Kopf hinzu Ihr 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);

schließlich

Jetzt haben Sie einen Vollbildmodus-Schieberegler für Ihren Webseite. Verwenden Sie es, um effektive Schieberegler in voller Breite für die meisten Browser zu erstellen.

Wenn Sie Fragen haben, zögern Sie nicht, sie zu 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”]DIVI THEMA HERUNTERLADEN [/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“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi Tutorials