Wie ein Schieber Vollbild auf Divi erstellen

Der Schieberegler in voller Breite bietet fantastische Funktionen, einschließlich der Möglichkeit, Schieberegler mit Videohintergründen hinzuzufügen. Ein Feature, das es noch leistungsfähiger macht, ist die Möglichkeit, den Schieberegler so zu erweitern, dass er im Vollbildmodus angezeigt wird. Wir zeigen Ihnen daher, wie Sie einem Schieberegler eine Vollbild-Funktion hinzufügen.

Hinzufügen einer Vollbildfunktion zum Slider-Modul 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 Schieberegler im Vollbildmodus umwandeln, der den gesamten Bildschirm ausfüllt, ähnlich wie bei Kopfzeilen im Vollbildmodus.

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

Wenn Sie nicht lesen Sie unsere Tutorial zur Darstellung der Oberfläche von DiviIch 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 ".

Fügen Sie eine volle Breite Modul.

ein Modul Schieber Divi # hinzufügen

Fügen Sie in den Slider-Einstellungen im Vollbildmodus auf der Registerkarte "Benutzerdefiniertes CSS" eine CSS-Klasse mit dem Namen " et_fullscreen_slider ".

Fügen Sie unter "Allgemeine Einstellungen" eine neue Folie 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 benutze ein Bild von unsplash.com)

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

Wenn Sie fertig sind, klicken Sie auf " Save & Exit ".

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 in den Kopf Ihres Blogs ein »:

<Script> (function ($) {$ (Fenster) .auf ( 'load Resize', function () {$ () jede (function () {et_fullscreen_slider ($ (this)) 'et_fullscreen_slider ..';}); }); Funktion et_fullscreen_slider (et_slider) {var et_viewport_width = $ (Fenster) .width () et_viewport_height = $ (Fenster) .Height () = $ et_slider_height (et_slider) .find () innerheight () 'et_pb_slider_container_inner.'. , admin_bar $ = $ ( '# wpadminbar), main_header $ = $ (' # Hand-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); </ Script>

schließlich

Jetzt haben Sie einen Schieberegler im Vollbildmodus für Ihre Website. Verwenden Sie diese Option, um für die meisten Browser effektive Schieberegler in voller Breite zu erstellen.

Wenn Sie Fragen haben, zögern Sie nicht, sie zu stellen.

Andere Divi Tutorials

• 5 Websites, die Divi Restaurant Thema verwenden
• Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
• So ändern Sie die Menüfarbe zwischen Divi-Seiten
• So personalisieren Sie die Gitter eines Blogs mit Divi
• Wie die Rolle Divi-Editor auf Wordpress verwenden
• So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
• So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
• Funktionen, die Sie wahrscheinlich nicht über Divi kennen
• Wie man Divi Builder auf WordPress benutzt
• Wie benutzt man das Divi Video-Scroll-Modul?
• Wie benutze ich das Divi Builder Flip Modul?
• So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
• Wie benutzt man das Divi-Textmodul?
• So erstellen Sie einen Schieberegler auf Divi
• So bearbeiten Sie eine Divi-Benutzerrolle
• Wie benutzt man das Divi Social Media Modul?
• So verwenden Sie das Shop-Modul zum Thema WordPress Divi
• So verwenden Sie das Divi-Sidebar-Modul
• Wie benutzt man das Divi Preistabellen Modul?
• Wie verwende ich das Titelmodul von Divi-Publikationen?
• So fügen Sie ein Video-Modul von Divi hinzu
• Wie man das Artikelnavigationsmodul benutzt
• Wie benutzt man das Divi-Suchmodul?
• So verwenden Sie das Divi-Wallet-Modul
• Wie man das Personenmodul im Divi Builder benutzt
• Wie man das Geldbörsenmodul mit Divi-Filter verwendet
• So verwenden Sie das Schiebermodul mit voller Breite
• Wie benutzt man das Divi Builder Image Modul?
• So verwenden Sie das vollständige Navigationsmodul von Divi Builder
• So verwenden Sie das Bildergalerie-Modul
• So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
• So verwenden Sie das Divi Full Width Portfolio-Modul
• So verwenden Sie das Divi-Header-Modul in voller Breite
• Wie benutze ich das Divi Counter Modul?
• So verwenden Sie den Artikel-Schieberegler in Divi Builder
• Wie benutze ich das Divi Email Optin Modul?