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.

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.

ein Modul Schieber Divi # hinzufügen

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

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

Sie möchten Ihre Produkte im Internet verkaufen?

Laden Sie WooCommerce kostenlos herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen und ganz einfach Ihren Online-Shop zu erstellen. Perfekt für Anfänger.

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.

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "erweitert" 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] [/ width_column] [»vc_col] vc_column] 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 "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andere Divi Tutorials

13 Aktien
Aktie5
tweet1
Registrieren7