Highlight des Divi-Plugins: Divi-Karussellmodul

Divi Carousel Module ist ein Drittanbietermodul für Divi, das interessante Karussells erstellt. Sie eignen sich hervorragend für Bilder, Produkte, Testimonials, Teammitglieder und mehr. Das Modul enthält viele Designelemente, die es hervorheben. Glücklicherweise ist es nicht schwer zu bedienen. In diesem Beitrag sehen wir uns das Divi Carousel Module an, sehen, was es kann, und sehen, wie einfach es zu verwenden ist, um Ihnen bei der Entscheidung zu helfen, ob dies das richtige Produkt für Ihre Bedürfnisse ist. Das Divi Architect Layout Pack bildet den Hintergrund unseres Tutorials.

Neues Divi-Karussellmodul

Das Divi Carousel Module fügt dem Divi Builder ein neues Modul hinzu. Fügen Sie das Modul auf die gleiche Weise wie jedes Divi-Modul zu jedem Divi-Layout hinzu.

Dias des Divi-Karussellmoduls

Jede Folie im Divi-Karussellmodul zeigt Folien als Untermodule an, die innerhalb des Hauptmoduls hinzugefügt werden. Die Folien können unabhängig voneinander gestaltet werden oder sie können die Gestaltung des Hauptmoduls verwenden. Um eine neue Folie hinzuzufügen, klicken Sie auf Neues Element hinzufügen.

Fügen Sie so viele hinzu, wie Sie möchten. Sie können die Nummer, die das Karussell auf dem Bildschirm für jeden Gerätetyp anzeigt, in den Moduleinstellungen festlegen, sodass die hinzugefügte Nummer das Design nicht beeinflusst. Die Submodule enthalten alle Standard-Divi-Einstellungen und einige einzigartige Einstellungen. Hier ist ein Blick auf die einzigartigen Einstellungen für das Submodul.

Hauptinhalt

Wenn Sie eine Folie hinzufügen, wird sie geöffnet, um die Einstellungen anzuzeigen. Der Hauptinhaltsbereich umfasst den Titel, den Untertitel und den Hauptinhalt. Verwenden Sie einige oder alle dieser Inhalte, die Sie möchten. Sie können diese Elemente im Design-Tab individuell gestalten.

Titel- und Bildlink

Fügen Sie die URL hinzu und wählen Sie aus, ob sie in einem neuen Fenster geöffnet wird. Dieser Link gilt sowohl für den Titel als auch für das Bild, funktioniert also auch dann, wenn Sie nur eines der beiden Elemente verwenden.

Tasteneinstellungen

Dadurch wird der Folie eine Schaltfläche hinzugefügt. Fügen Sie den Text und die URL hinzu und wählen Sie aus, wie sie geöffnet wird. Sie können die Schaltfläche auf der Registerkarte Design gestalten.

Bildeinstellungen

Hier können Sie wählen, ob Sie ein Bild oder ein Symbol verwenden möchten. Ein Bild ist die Standardeinstellung. Es enthält die Bildauswahl, Alt-Text und wenn es in einer Lightbox geöffnet wird. Das Bild wird standardmäßig über dem Titel platziert, aber Sie können dies leicht ändern, wenn Sie möchten.

Wenn Sie Symbol verwenden auswählen, wird eine Symbolauswahl bereitgestellt. Das Symbol ersetzt das Bild. Es kann auch in den Designeinstellungen gestaltet werden.

Meta

Dazu gehören zwei Optionen, zwischen denen Sie wählen können. Sie können nur eine der beiden Optionen auswählen. Die erste Option ist Social Media verwenden. Wenn Sie dies aktivieren, werden die Felder geöffnet, in die Sie Ihre URLs für vier soziale Netzwerke und Ihre E-Mail-Adresse eingeben können.

Die zweite Option ist Use Rating. Dies öffnet ein Dropdown-Feld, in dem Sie eine Bewertung von eins bis fünf auswählen können. Es zeigt die Bewertung als Sterne an.

Designeinstellungen des Submoduls

Die Design-Einstellungen des Submoduls umfassen die Bildstile, Bildfilter und Stile für Titel, Untertitel, Inhalt, Schaltfläche, soziale Medien und Bewertung. Wenn Sie anstelle des Bilds ein Symbol ausgewählt haben, sehen Sie Symboleinstellungen, um seine Farbe zu ändern, einen Kreis hinzuzufügen, seine Größe zu ändern und seine Ausrichtung anzupassen. Im folgenden Beispiel habe ich das Bild in die Mitte der Folie verschoben, indem ich im Dropdown-Feld „Bildposition“ die Option „Innerer Inhalt“ ausgewählt habe.

Einstellungen des Hauptmoduls

Die Hauptmoduleinstellungen umfassen die Schiebereglerdetails sowie die Standardeinstellungen von Divi. Schauen wir uns die Einstellungen des Schiebereglers genauer an.

Slider-Einstellungen

Die Schiebereglereinstellungen umfassen Breitensteuerung, die Anzahl der Folien, die auf jedem der Gerätetypen angezeigt werden sollen, Multislide, Dauer, Schleife, Autoplay, Pfeil- und Punktnavigation, Abstand, verzögertes Laden, Hash-Navigation und vieles mehr. Es ist interessant, die Anzahl der Artikel für verschiedene Geräte zu sehen. Ein Punkt zu den Zahlen, die Sie in diese Felder eingeben, ist, dass es sich nicht um ganze Zahlen handeln muss. Sie können eine halbe Folie zeigen, wenn Sie möchten. Geben Sie einfach die Zahl als Dezimalzahl ein und experimentieren Sie, bis die Folien wie gewünscht angezeigt werden.

Dieses Beispiel zeigt, dass ich eine Pfeilnavigation hinzugefügt habe. Ich habe auch die Art und Weise geändert, wie die einzelnen Karussellelemente auf dem Desktop, Tablet und Mobilgerät angezeigt werden. Zusätzlich zu dem oben Genannten habe ich dem Modul auch eine Loop-Funktion hinzugefügt.

Erweiterte Slider-Einstellungen

In den erweiterten Einstellungen können Sie den Slider-Effekt auswählen. Wählen Sie zwischen Standard und Coverflow. Die Standardeinstellung zeigt die Folien normal an, wobei jede Karte dem Benutzer zugewandt ist.

Coverflow zeigt die Karten gekippt in 3D an. Die Auswahl von Coverflow fügt Rotate hinzu, wodurch der Betrag angepasst wird, um den jede Karte in 3D gedreht wird, und Shadow, der den 3D-Effekt durch Schatten verstärkt. Die Karten zeigen eine Animation, während sie im Karussell an ihren Platz rollen.

Designeinstellungen des Hauptmoduls

Die Designeinstellungen des Hauptmoduls umfassen Bildüberlagerung, Ausrichtung, Breite, Rahmen und Rahmenschatten. Es enthält auch Einstellungen für den Titeltext, den Untertiteltext, den Haupttext, die Schaltflächen „Weiter“ und „Zurück“, die Navigationsfarbe, den Z-Index für das Bild, den benutzerdefinierten Abstand für jedes Element und die Standardeinstellungen von Divi. Ich habe viele der Einstellungen im folgenden Beispiel angepasst.

Die Pfeile „Weiter“ und „Zurück“ enthalten mehrere Positionsoptionen. Sie können die Farbe der Symbole und Hintergründe anpassen und benutzerdefinierte Symbole für die vorherigen und nächsten Links unabhängig voneinander auswählen. Sie können auch die Farben der Punktnavigation anpassen.

Das Divi-Karussellmodul verfügt über eine beeindruckende Menge an benutzerdefinierten Abstandsoptionen. Fügen Sie jedem Element sowohl für den Container als auch für den Inhalt unabhängig voneinander Rand und Auffüllung hinzu. Ich habe einige der Elemente im folgenden Beispiel mit Padding versehen.

Verwendung des Divi-Karussellmoduls

Das Divi Carousel Module eignet sich hervorragend zum Anzeigen vieler Dinge, darunter Produkte, Teammitglieder, benutzerdefinierte Blog-Posts und -Seiten, Dienstleistungen, Bilder, Testimonials, ein Portfolio, Firmenlogos und vieles mehr. Die Website des Herausgebers enthält viele herunterladbare Vorlagen, die Ihnen den Einstieg erleichtern. Sie sind als JSON-Dateien verfügbar. Laden Sie sie in Ihre Divi-Bibliothek hoch und verwenden Sie sie für beliebige Vorlagen, Seiten oder Beiträge. Schauen wir uns einige davon an. Ich werde ihre Haupteinstellungen beschreiben, während wir gehen.

Inhaltskarussell des Divi-Karussellmoduls 02_05

Content Carousel 02_05 enthält große Bilder und gestaltet die Karten unabhängig voneinander, um ein abwechselndes Design mit dem Bild oben oder unten zu erstellen. Es zeigt drei Folien gleichzeitig auf Desktops, 2 auf Tablets und 1 auf Telefonen. Es schiebt sie automatisch jede Sekunde und Schleife.

Divi Karussellmodul Testimonial Karussell 01_07

Testimonial Carousel 01_07 zeigt zwei Folien auf Desktops und eine Folie auf Tablets und Telefonen. Es enthält zentrierte Pfeile und Punktnavigation. Die Folien platzieren die Bilder links und enthalten einen Farbverlauf hinter dem Text. Die Zitatsymbole sind Bilder, die dem Hintergrund hinzugefügt werden.

Divi-Karussellmodul Teamkarussell 01_05

Team Carousel 01_05 zeigt drei Folien auf Desktops, zwei auf Tablets und eine auf Telefonen. Die Folien haben ein einzigartiges Design mit sozialen Symbolen am unteren Rand. Die Hintergründe des Hauptinhaltsbereichs wechseln zwischen Schwarz und Weiß. Die Pfeile und Punkte sind grün. Bilder verwenden abgerundete Ecken und enthalten einen 4-Pixel-Rand, um sie einzukreisen.

Divi-Karussellmodul Bildkarussell 01_02

Image Carousel 01_02 zeigt 3,5 Elemente auf Desktops an und zentriert die Folien, um ein Design zu erstellen, das Bilder teilweise an den Seiten des Bildschirms anzeigt. Tablets zeigen 3 und Telefone 1 an. Es enthält eine Pfeilnavigation, und die Folien sind auf Schleifen eingestellt, sodass der Benutzer nie die Richtung ändern muss, um alle Folien anzuzeigen. Die abgerundeten Ecken verleihen den Bildern ein elegantes Design.

Kaufen Sie das Divi-Karussellmodul

Das Divi Carousel Module ist im Divi Marketplace für 29 $ erhältlich. Es beinhaltet eine unbegrenzte Nutzung, eine 30-tägige Geld-zurück-Garantie und ein Jahr Support und Updates.

Endgedanken

Das ist unser Blick auf das Divi Carousel Module. Das Modul hat viele Funktionen. Jedes Element kann unabhängig voneinander gestylt und angepasst werden, was Ihnen viele Gestaltungsmöglichkeiten bietet. Ich fand alle Einstellungen intuitiv, daher fühlte es sich im Divi Builder wie zu Hause an. Wenn Sie an einem Karussellmodul mit vielen Funktionen interessiert sind, ist das Divi Carousel Module einen Blick wert.

Wir wollen von dir hören. Haben Sie das Divi Carousel Module ausprobiert? Lass uns in den Kommentaren wissen, was du darüber denkst.