Es ist neu. Es ist kostenlos. Es ist leistungsstark.

Geben Sie diesem KOSTENLOSEN WordPress-Plugin maximal 90 Tage Zeit und es wird Ihren Umsatz wie NIE ZUVOR steigern!

Vergessen Sie all Ihre aktuellen Marketingstrategien (E-Mail-Marketing, Gastbeiträge, Banner, Bewertungen usw.). Sie sind alle überholt. Brouavo ist ein Game Changer, der 30 % Ihres „schlafenden“ Traffics in ein garantiertes Einkommen verwandelt. Es ist das perfekte Tool, um Ihre Partnerprogramme zu bewerben oder Ihre eigenen Produkte zu verkaufen.

Abhängig von Ihrer Leistung bieten wir Ihnen auch eine Pro-Lizenz für WordPress-Plugins wie: Elementor Pro, TranslatePress, Divi Builder & Ai, All-in-One SEO Pro, kostenpflichtige Mitgliederabonnements

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 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-Slider für Ihre Website. Verwenden Sie es, um für die meisten Browser effektive Schieberegler in voller 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

Autor-Avatar
Blair Jersyer
WordPress-Entwickler und leidenschaftlich über alles, was mit neuen technologischen Trends zu tun hat. Autoren von Plugins, WordPress-Themes und anderen Webanwendungen. Autor bei BlogPasCher.com.

Pin It auf Pinterest