Springe zum Hauptinhalt

Wie ein Schieber Vollbild auf Divi erstellen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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.

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

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:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • 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 »:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

<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

Dieser Artikel enthält Kommentare 10
  1. Guten Tag, wie kann ich die Größe der Folie entsprechend der Größe des Bildes des Banners anpassen, so dass ich das Bild nicht zuschneiden kann?

  2. Guten Tag,
    Danke für diesen Artikel. Ich habe gelesen, dass es nicht nötig war, ein untergeordnetes Thema mit Divi zu installieren, bis Sie das CSS zu sehr geändert haben.
    Es gibt noch ein wenig Anpassung ...
    Empfiehlst du also ein Kindthema, bevor du dein super Tutorial anwendest?
    Vielen Dank im Voraus für all Ihre guten Ratschläge, ich bin oft davon inspiriert

  3. Hallo, sehr guter Artikel!
    Ich folgte dem, was in dem Artikel angegeben wurde, aber mein Schieberegler wird nicht im Vollbildmodus auf DIVI angezeigt.
    Kannst du mir helfen? Ich möchte es auf meine Homepage stellen.

    Vielen Dank für Ihre Hilfe

  4. Guten Tag,
    Ich baue meine Homepage mit Builder ... wenn ich eine Previsualisierung mache, sehe ich die Seite.
    Das Problem ist, dass wenn ich meine Seite speichere und sie wieder öffne, der Schieberegler nicht erscheint.
    Könnte mir bitte jemand helfen?

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
11 Aktien
Aktie5
tweet1
Registrieren5