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 ".
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 ".
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 verwende 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 " 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
- 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?
hallo und danke für dieses Tutorial! Ich kann den Js- und CSS-Code zum Einfügen in den Schieberegler hier nicht finden
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,
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.
Guten Tag, wie kann ich die Foliengröße an die Größe des Bannerbilds anpassen, damit ich das Bild nicht zuschneiden kann?
Guten Tag,
Ich verstehe die Frage nicht.
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 🙂
Guten Tag,
Nicht unbedingt. Sie können divi behalten, wenn Sie nicht zu viel technisches Wissen haben.
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
Guten Tag,
Haben Sie das DIVI-Team kontaktiert?
Hallo Aliénor,
Ich habe das gleiche Problem ... Haben Sie eine Lösung gefunden?
Danke im voraus
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?
Guten Tag,
Dies könnte an einem Fehler liegen. Haben Sie versucht, den Eleganthemes-Support zu kontaktieren?
Guten Tag,
Vielen Dank für Ihren Artikel!
Weißt du, wie ich die Geschwindigkeit des Dia-Scrollens ändern könnte?