Divi-Plugin-Highlight: Divi-Karussell-Modul

DIVI Carousel Module ist ein Drittanbieter-Plugin für Divi und Extra, das dem Divi Builder einen erweiterten Karussell-Schieberegler hinzufügt. Sie haben die Kontrolle über fast alles im Modul, um fast jede Art von Karussell zu erstellen, das Sie für Ihre Divi- oder Extra-Website benötigen. In diesem Artikel werfen wir einen Blick auf das Divi Carousel Module und sehen, was es kann und wie einfach es zu bedienen ist.

Installation und Aktivierung des Divi Karussellmoduls

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Dem Dashboard wird ein neuer Menüpunkt namens DiviGear hinzugefügt. Gehen Sie in dieses Menü und fügen Sie Ihren Lizenzschlüssel hinzu.

Divi Karussell-Modul im Divi Builder

Dem Divi Builder wird ein neues Modul namens Divi Carousel hinzugefügt.

Das Modul enthält einen Bereich zum Hinzufügen neuer Elemente. Die Registerkarte Inhalt enthält die Schiebereglereinstellungen, mit denen Sie je nach verwendetem Gerät auswählen können, wie viele Folien angezeigt werden sollen, Mehrfachfolien aktivieren, die Übergangsdauer einstellen usw. Mittelfolie, Schleife, Autoplay, Pfeilnavigation und Punktnavigation aktivieren . Legen Sie den Elementabstand fest, aktivieren Sie die gleiche Höhe und die vertikale Ausrichtung. Mit den erweiterten Einstellungen können Sie den Schiebereglereffekt auswählen.

Die Registerkarte Design enthält Einstellungen für Overlay, Bild (Breite), Bildrahmen, Titel- und Fließtext, Farbe, Abstand und Rahmen. Dazu gehören Farbanpassungen sowohl für die Pfeil- als auch für die Punktnavigation.

Der Tab "Erweitert" enthält alle erwarteten CSS-Felder sowie Einstellungen für Sichtbarkeit und Übergang. Es fügt CSS-Felder für Titel, Inhalt, Bild und Schaltfläche hinzu.

Die Karussell-Elementeinstellungen umfassen auch die drei Registerkarten. Diese Einstellungen überschreiben alles, was in den Hauptmoduleinstellungen festgelegt wurde. Die Registerkarte Inhalt enthält einen Bereich für den Hauptinhalt, den Titel- und Bildlink, die Schaltflächeneinstellungen, die Bildeinstellungen und den Hintergrund.

Die Registerkarte Design enthält Einstellungen für den Titeltext, den Inhaltsstil (Haupttext), die Schaltfläche, den Abstand und den Rahmenschatten. Dies sind die Standard-Designeinstellungen, die Sie in den meisten Divi-Modulen sehen würden. Die Registerkarte Erweitert ist die Grundeinstellung in den meisten Modulen.

Für die Bildeinstellungen können Sie Bilder oder Symbole verwenden.

Fügen Sie so viele Folien hinzu, wie Sie möchten. Die Folien werden nebeneinander entsprechend der Anzahl angezeigt, die Sie für die Anzeige festgelegt haben. Dieser ist so eingestellt, dass er vier anzeigt. Sie können sie natürlich in beliebiger Reihenfolge ziehen und ablegen.

In diesem habe ich den Elementabstand auf 100 angepasst. Der Hauptunterschied, der in meinem Beispiel gezeigt wird, ist der Text. Es werden jetzt weniger Wörter pro Zeile angezeigt.

Dieser verwendet eine Pfeilnavigation. Ich habe es so eingestellt, dass es auf der Außenseite der Folie angezeigt wird. Ich habe den Elementabstand auf 1 gesetzt. Es ist offensichtlicher, wenn Sie Hintergrundfarben verwenden.

Ich habe dieses so eingestellt, dass zwei Folien angezeigt werden. Es zeigt Punktnavigation.

Hier sehen Sie die erweiterten Einstellungen. Ich habe den Slider-Effekt auf Coverflow eingestellt. Dies öffnet eine Rotations- und eine Schattenoption. Diese Funktion zeigt, was das Modul wirklich von einem Standard-Slider unterscheidet. Dies sind die Standardeinstellungen.

Jetzt habe ich die Drehung auf 100 gestellt. Die Dias sind noch mehr 3D nach links geneigt, vom Bildschirm weg.

Hier ist die gleiche Drehung, aber ohne den Coverflow-Schatten.

Beispiele für Divi Karussell-Module

Eine meiner Lieblingsanwendungen für ein Karussell ist es, Logos von Kunden oder Produkten anzuzeigen. Für dieses Beispiel habe ich das Modul zur Portfolioseite der App Developer Landing Page hinzugefügt. Ich habe es so eingestellt, dass 3 Firmenlogos angezeigt werden, das Scrollen in einer Schleife läuft und automatisch abgespielt wird, damit der Besucher nicht durch sie navigieren muss.

Es funktioniert auch, um Projekte anzuzeigen, an denen Sie gearbeitet haben. Für dieses habe ich mehrere Projekte mit Schaltflächen hinzugefügt, damit der Besucher das Projekt sehen kann. Ich habe die Textfarbe der Schaltfläche in Weiß geändert und der Schaltfläche einen Kastenschatten hinzugefügt. Ich habe die Pfeile weiß gemacht und die Deckkraft ihres Hintergrunds auf fast transparent eingestellt.

Hier habe ich der Folie einen Hintergrund hinzugefügt, sie halbtransparent gemacht und Boxschatten hinzugefügt. Der Abstand umfasst die Schaltflächen-, Bild- und Inhaltsauffüllung. Ich habe der Schaltfläche und dem Bild einen Abstand hinzugefügt.

Dieser verwendet den Überlauf-Schieberegler-Effekt. Dies sind die Standardeinstellungen.

Für dieses habe ich es so eingestellt, dass es die Folie zentriert. Bei Verwendung mit den Überlaufeinstellungen zentriert es die mittlere Folie und richtet die Folien auf beiden Seiten so aus, dass sie sich gegenüberstehen. Es ist so eingestellt, dass vier Folien angezeigt werden.

Dieser ist so eingestellt, dass er 3 Folien anzeigt. Ich habe Rotate auf 80 gesetzt.

Dieser ist so eingestellt, dass er 6 Folien anzeigt. Drehen ist auf Standard (50) eingestellt.

Dieses zeigt 6 Folien ohne Center Slide oder Overflow aktiviert.

Dieses zeigt 6 mit aktiviertem Center Slide.

In diesem Beispiel verwende ich das Modul als Schieberegler für das Essensmenü. Durch das Hinzufügen eines Bildes, eines Textes und einer Schaltfläche wird tatsächlich ein Schieberegler mit Klappentexten erstellt. Die Bilder sind auf 100 Breite eingestellt. Ich habe ein Overlay, eine Schaltfläche zum Kauf jedes Artikels (die Schaltfläche führt Sie zur Produktseite des Artikels) und eine Punktnavigation hinzugefügt. Ich habe das Overlay und das Overlay-Symbol sowie die Punkte sowohl für die aktiven als auch für die nicht aktiven Folien gestaltet. Es passt perfekt in das Coffee-Layout.

Für dieses habe ich eine Pfeilnavigation hinzugefügt und sie so gestaltet, dass sie den Schaltflächen entspricht. Ich habe es, um die Pfeile beim Schweben anzuzeigen. Sie können die Pfeile innerhalb oder außerhalb des Schiebereglers einstellen und ihre Farbe ändern. Sie können ihre Größe in den Einstellungen des Moduls nicht ändern.

Dieser verwendet den Coverflow-Effekt. Ich bewege den Mauszeiger über die linke Folie, um das Overlay und die Pfeile anzuzeigen.

Für dieses habe ich nur einer der Folien einen Hintergrund und einen Kastenschatten hinzugefügt. Dies kann verwendet werden, um anzuzeigen, was im Angebot ist, oder um das beste Angebot hervorzuheben.

Für dieses verwende ich nur Symbole. Ich habe das Modul neben eine Reihe von Klappenmodulen platziert und 6 Social-Media-Links eingerichtet. Sie sind so gestaltet, dass sie den Klappentexten entsprechen. Ein Klick auf das Symbol öffnet das soziale Netzwerk. Ich habe es so eingestellt, dass es jede Sekunde automatisch rutscht.

Beim Anzeigen mehrerer Folien wird ein Teil eines Symbols abgeschnitten, was bei der Animation des Schiebereglers eine gute Grafik ergibt.

Für dieses Beispiel wollte ich einen einfachen Preistabellen-Schieberegler erstellen. Ich habe die Preise aus dem Golfplatz-Layout-Paket vereinfacht.

Jetzt habe ich Boxschatten hinzugefügt. Zuerst konnte ich den vertikalen Schatten nicht unter die Folie bringen. Dann stellte ich fest, dass die Folien die Seiten des Modulcontainers berührten. Ich fügte Modulpolster hinzu und konnte dann auf allen Seiten der Folien Boxschatten hinzufügen.

Sie können auch den Abstand von Schaltflächen, Bildern und Inhalten für jede Folie einzeln anpassen. In diesem Beispiel passe ich die Polsterung für die Folie auf der linken Seite an.

Ich habe Pfeile hinzugefügt und sie so gestaltet, dass sie mit Elementen im Layout übereinstimmen.

Für dieses Beispiel habe ich Bilder hinzugefügt, den Boxschatten geändert und etwas mehr Inhaltsfüllung hinzugefügt, damit der Boxschatten vollständig angezeigt wird. Ich habe auch die Pfeile an die Außenseite der Folien verschoben.

Jetzt habe ich eine Schaltfläche hinzugefügt. Ich habe die Schaltflächenstile einschließlich Farben, Rahmenradius, Textgröße angepasst und einen Boxschatten hinzugefügt, der zu den Folien passt.

Da das Modul einen Inhaltsbereich enthält, können Sie natürlich jede Art von Inhalt hinzufügen, einschließlich Medien. Ich habe Bilder hinzugefügt, die dem Layout entsprechen. Der gesamte Inhalt wird unter dem Titel platziert. Die Bilder sehen an diesem Ort großartig aus.

So sieht das Modul im Golfplatz-Layout aus. Das ursprüngliche Layout hatte viele Preisfunktionen. Mit dem Divi-Karussell-Modul sind alle Preise immer noch vorhanden, werden jedoch auf den Folien angezeigt. Es sieht so aus, als ob es in dieses Layout gehört.

Funktioniert auch super mit Extra. In diesem Beispiel habe ich die Seite so eingestellt, dass keine Seitenleiste angezeigt wird.

So sieht es mit einer Seitenleiste aus (obwohl ich keine Widgets für die Seitenleiste hinzugefügt habe, ist die Größe gleich). Hier sehen Sie, dass das Modul responsive ist.

Divi Karussell Modul Preis

Das Divi Carousel Module ist auf der Website des Entwicklers erhältlich. Es stehen zwei Optionen zur Verfügung:

• Einzelne Site – $15
• Unbegrenzte Websites – 29 $

Dokumentation und Support zum Divi Karussell-Modul

Die Dokumentation ist im DiviGear-Dashboard-Menü verfügbar. Wählen Sie die Registerkarte Dokumentation. Hier finden Sie Links zu einem 4-minütigen Video-Walkthrough auf dem DiviGear YouTube-Kanal. Ticket-Support wird über Freshdesk bereitgestellt.

Gedanken beenden

Das Divi Carousel Module ist eine einfache Möglichkeit, dem Divi Builder einen Karussell-Schieberegler hinzuzufügen. Es ist intuitiv und hat tatsächlich mehr Anpassungen als ich erwartet hatte. Es gab einige Male, in denen ich eine Folie nicht richtig klonen konnte, aber das könnte meinerseits ein Problem gewesen sein. Denken Sie daran, jeder Folie ein Admin-Label zu geben, da sonst der Name des Elements im Modul angezeigt wird, was die Unterscheidung erschwert.

Mir gefällt, dass es Bilder, Inhalte und Schaltflächen separat gibt. Auf diese Weise können Sie Karten, Klappentexte, Bilder, Text, Symbole anzeigen oder alles, was Sie in einem Schieberegler anzeigen müssen, erstellen. Sie können am oberen Rand des Schiebereglers ein Bild hinzufügen und dennoch dem Inhaltsbereich weitere hinzufügen.

Divi Carousel Module ist ein hervorragender Karussellschieber. Es ist auf der Website des Entwicklers und auf den Divi-Marktplätzen erhältlich.

Wir wollen von dir hören. Haben Sie das Divi Karussell-Modul ausprobiert? Lassen Sie uns in den Kommentaren unten wissen, was Sie davon halten.

Ausgewähltes Bild über Anatolir / shutterstock.com