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.

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]

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 ".

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]

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:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

.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

Dieser Artikel enthält Kommentare 12
  1. Hallo, tolles Tutorial.
    Durch Nachteile wird beispielsweise auf dem iPhone kein Vollbild angezeigt. Durch Kippen des iPhones wird der Schieberegler von Zeit zu Zeit im Vollbildmodus angezeigt, jedoch nicht immer. Haben Sie eine Idee, dieses kleine Problem zu lösen, als wäre er nicht ansprechbar?

    Vielen Dank im Voraus,
    Mit freundlichen Grüßen,

    1. Guten Tag,

      Versuchen Sie, alle anderen Plugins zu deaktivieren. Überprüfen Sie auch, ob Ihre Versionen von WordPress und Divi auf dem neuesten Stand sind.

  2. 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?

  3. 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

  4. 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

  5. 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