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

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

(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 Vollbild-Schieberegler für Ihre Website. Verwenden Sie diese Option, um für die meisten Browser effektive Schieberegler für die volle 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.
    Auf der anderen Seite wird es beispielsweise nicht auf dem iPhone im Vollbildmodus angezeigt. Durch Kippen des iPhones wird der Schieberegler von Zeit zu Zeit im Vollbildmodus angezeigt, jedoch nicht immer. Als ob es nicht reagieren würde, haben Sie eine Idee, um dieses kleine Problem zu beheben?

    Danke 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,
    Danke für diesen Artikel. Ich habe gelesen, dass es nicht unbedingt notwendig ist, ein untergeordnetes Thema mit Divi zu installieren, solange wir das CSS nicht zu stark ändern.
    Es gibt noch eine kleine Anpassung ...
    Empfehlen Sie also ein untergeordnetes Thema, bevor Sie Ihr Super-Tutorial anwenden?
    Vielen Dank im Voraus für all Ihre guten Ratschläge, ich lasse mich oft davon inspirieren 🙂

  3. Hallo, sehr guter Artikel!
    Ich habe die Anweisungen im Artikel befolgt, aber mein Schieberegler wird auf DIVI nicht im Vollbildmodus angezeigt.
    Können Sie mir helfen ? Ich möchte es auf meine Homepage setzen.

    Vielen Dank für Ihre Hilfe

  4. Guten Tag,
    Ich erstelle meine Homepage mit dem Builder. Wenn ich eine Vorschau mache, wird die Seite angezeigt.
    Das Problem ist, dass beim Speichern und erneuten Öffnen meiner Seite der Schieberegler nicht angezeigt wird.
    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
13 Aktien
Aktie5
tweet1
Registrieren7