Divi Plugin Highlight – Eulenkarussell Pro

Veröffentlicht: 2017-09-03

Wollten Sie schon immer Beiträge, Projekte, benutzerdefinierte Beitragstypen und Bilder in einem Karussell mit dem Divi Builder anzeigen? Beiträge und Bilder werden normalerweise in einem Schieberegler angezeigt, der jeweils einen Beitrag oder ein Bild anzeigt, aber was ist, wenn Sie ein echtes Karussell wünschen, das mehrere Beiträge gleichzeitig anzeigt? Sie können dies ganz einfach mit einem Plugin namens Owl Carousel Pro tun.

Owl Carousel Pro ist ein Drittanbieter-Plugin, das dem Divi Builder zwei neue Module hinzufügt. Der erste zeigt Beitragstypen wie Projekte, Beiträge und benutzerdefinierte Beitragstypen an. Das zweite ist ein Bildkarussell, das mit dem visuellen Editor konkurriert, um jede gewünschte Art von Inhalt hinzuzufügen.

Es gibt eine kostenlose Version des Plugins. Ich schaue mir die Pro-Version an, die mehrere neue Funktionen hinzufügt, darunter:

  • benutzerdefinierte Beitragstypen
  • benutzerdefinierte Felder anzeigen
  • benutzerdefinierte Abfrage
  • Miniaturgröße ändern
  • Anzahl der angezeigten Bilder ändern
  • Bild im Leuchtkasten öffnen

Bilder für die Beispiele stammen von Unsplash.com.

Installation von Eulenkarussell Pro

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Sie sehen dann im Divi Builder zwei neue Module: DP Owl Carousel und DP Owl Image Carousel. Die Module haben eine andere Farbe als die Standard-Divi-Module, um sie voneinander abzuheben. Dies ist meine Vorliebe für Module von Drittanbietern, da sie dadurch leichter zu finden sind.

DP Eulenkarussell

DP Owl Carousel zeigt Beiträge und Projekte sowie benutzerdefinierte Beitragstypen in einem Karussell an. Es zeigt Ihre letzten 10 Beiträge oder aus Kategorien oder Tags an, die Sie auswählen. Die Registerkarte Inhalt enthält Einstellungen für Inhalte und Elemente. Die Registerkarte "Design" enthält Text, Beitragstiteltext, Beitragsmetatext, Beitragsauszugstext, benutzerdefinierten Text, Abstände, Pfeile, Steuerelemente und Miniaturansichten.

Die Registerkarte "Erweitert" enthält die erwarteten CSS-Einstellungen, fügt aber auch Klickaktionen, Animationen (bestimmt das Timing für das Scrollen), Hintergrund und Sichtbarkeit hinzu. Die Hintergrundfarben in beiden Modulen sind nur einfarbig, daher sind keine Farbverläufe oder Bilder verfügbar. Normalerweise würde ich nicht auf der Registerkarte "Erweitert" nachsehen, es sei denn, ich wollte CSS verwenden, daher hätte ich diese Einstellungen übersehen, da ich sie auf der Registerkarte "Inhalt" erwartet hatte.

Sie können eine benutzerdefinierte Abfrage erstellen (Beispiele finden Sie auf der Website) oder Sie können die Einstellungen innerhalb des Moduls verwenden, um zu steuern, was angezeigt wird. Es enthält mehrere Einstellungen zur Steuerung der Anzeige, z. B. die Anzahl der Beiträge, eine Versatznummer, den Namen des benutzerdefinierten Beitragstyps, Kategorien, einzuschließende Tags und auszuschließende Tags. Meine benutzerdefinierten Beitragstypen wurden automatisch hinzugefügt.

Benutzerdefinierte Abfragen werden Ihrem Child-Theme innerhalb des PHP-Codes hinzugefügt (nehmen Sie PHP-Änderungen immer in einem Child-Theme und nicht im Parent-Theme vor, damit Sie Ihre Änderungen nicht verlieren, wenn das Theme aktualisiert wird). Die Website des Entwicklers enthält einige Beispiele.

Hinweis – Testen Sie Code immer auf einer Test-Site, bevor Sie ihn zu Ihrer Live-Site hinzufügen.

Beispiele für DP-Eulenkarussells

Dies ist das Standarddesign (ich habe einen Hintergrund hinzugefügt, um ihn hervorzuheben). Es zeigt meine letzten 10 Beiträge in allen Kategorien an. Ich habe den Divi-Header und das Post-Meta eingefügt, um zu zeigen, wie es auf der Seite aussieht. Wenn Sie auf eines der Bilder klicken, gelangen Sie zum Beitrag.

Dieser fügt den Titel, die Kategorie und das Datum hinzu. Sie können auch benutzerdefinierte Felder anzeigen, wenn Sie diese eingerichtet haben.

Dieser zeigt den Titel und den Beitragsauszug mit den standardmäßigen 270 Zeichen.

In diesem habe ich den Beitragsauszug auf 70 Zeichen gesetzt.

In diesem habe ich die Pfeile und Steuerelemente deaktiviert. Die Animation funktioniert immer noch, aber Benutzer können nicht durch die Folien blättern.

In diesem habe ich die Schriftgrößen und -farben geändert, die Pfeile rot gemacht, die Steuerelemente vergrößert und violett gemacht, die Miniaturansichten vergrößert, den Rand auf 0 reduziert und so eingestellt, dass 3 Bilder angezeigt werden. Die zweite Farbe für die Steuerelemente ist eine dunklere Version der Farbe, die ich gewählt habe. Die zweite Farbe wird vom Plugin bereitgestellt.

In diesem habe ich einen Hintergrund im Modul selbst hinzugefügt und den Elementrand so geändert, dass der Hintergrund zwischen den Beiträgen angezeigt wird. Ich habe auch die Schriftfarben geändert und diesmal die Zeilenhöhe und den Zeilenabstand angepasst. Es zeigt 4 Beiträge pro Bildschirm und ich habe die Miniaturansichtsgröße reduziert. Ich stelle die Pfeile auf groß und die Steuerelemente auf klein.

Wenn Sie die Miniaturansichtsgröße ändern, wird sie nur an die Anzahl der angezeigten Beiträge angepasst. Wenn Sie also die Bilder vergrößern möchten, müssen Sie die Anzahl der angezeigten Beiträge manuell reduzieren.

DP Eulen-Bildkarussell

Das DP Owl Image Carousel zeigt Bilder in einem Karussell an. Sie können Bilder hinzufügen und die Pfeile und Steuerelemente anzeigen. Zu den Designeinstellungen gehören Text, Bildtiteltext, Bildinhaltstext, Abstand, Pfeil, Steuerelemente und Miniaturansichten. Die Registerkarte „Erweitert“ entspricht der des DP-Eulenkarussell-Moduls.

Sie können beliebig viele Bilder hinzufügen, sie in einer Lightbox öffnen lassen und eine kopierte Version des Bildes oder des Originalbilds verwenden. Ich habe absichtlich Bilder in verschiedenen Größen ausgewählt, um zu sehen, wie es funktioniert.

Die Bilder werden schön angezeigt. Ich mag es, dass Sie auf eine URL verlinken oder sie in einer Lightbox öffnen können. Ich würde gerne Overlays zu den Bildern hinzufügen, da dies das Erlebnis noch weiter verbessern würde.

Beispiele für das DP-Eulen-Bildkarussell

So sieht das Modul auf der Seite mit den Standardeinstellungen aus. Ich habe dem Abschnitt einen Hintergrund hinzugefügt, um ihn hervorzuheben.

In diesem Beispiel habe ich den Bildern Titel und Text hinzugefügt. Ich habe auch die Pfeile und Steuerelemente auf groß eingestellt und die Farben für jeden geändert.

Dieser zeigt 4 Bilder an. Ich habe die Bildgröße erhöht und den Elementrand von 8 auf 4 verringert. Als nächstes habe ich die Größen und Farben der Schriftarten, Pfeile und Steuerelemente angepasst. Die Titelschriftarten haben einen größeren Abstand.

Dieser verwendet einen dunklen Hintergrund mit neuen Farben für die Schriftarten, Steuerelemente und Pfeile.

So sehen die Bilder aus, wenn Sie sie in einer Lightbox öffnen. Die Scroll-Animation funktioniert weiterhin im Hintergrund.

Benutzerdefinierte Beitragstypen

Stellen Sie im Modul Owl Carousel Pro sicher, dass die benutzerdefinierte Abfrage deaktiviert ist (dies wird nur verwendet, wenn Sie Ihre eigenen benutzerdefinierten Filter erstellen möchten, anstatt Kategorien aus der Liste auszuwählen) und wählen Sie Ihren Beitragstyp unter Name des benutzerdefinierten Beitragstyps. Ich habe WooCommerce installiert und habe jetzt automatisch Produkt als Option.

Jede meiner Produktkategorien wird automatisch der Kategorieliste hinzugefügt. Jetzt kann ich nach unten scrollen und die Produkte auswählen, die ich im Karussell anzeigen möchte.

Die Produkte werden angezeigt, aber um die Preise anzuzeigen, muss ich das benutzerdefinierte Feld aktivieren, das anzuzeigende Feld auswählen und ein Etikett hinzufügen, um mein gewünschtes Währungssymbol anzuzeigen. Scrollen Sie nach unten und aktivieren Sie Benutzerdefinierte Felder anzeigen. Fügen Sie _price zu benutzerdefinierten Feldnamen und $ zu benutzerdefinierten Feldbezeichnungen hinzu.

Ich habe jetzt ein Produktkarussell, das die von mir ausgewählten WooCommerce-Kategorien zeigt. Ich habe die Anzeige von 4 Beiträgen ausgewählt, die Bildgröße erhöht, die Schriftfarben für die Titel-, Meta- und benutzerdefinierten Felder geändert und die Schriftgrößen für die Titel- und benutzerdefinierten Felder erhöht. In diesem Beispiel zeige ich nur das Datum für die Meta, aber wie bei normalen Posts könnte ich alle Metainformationen und einen Auszug anzeigen.

Verwenden von Owl Carousel Pro mit Extra und dem Divi Builder Plugin

Owl Carousel Pro funktioniert auch hervorragend mit Extra. Dies ist das Bildkarussell.

Hier ist ein Blick auf das Plugin mit dem Divi Builder-Plugin, das auf dem Twenty Seventeen WordPress-Theme installiert ist. Dieser zeigt meine WooCommerce-Produkte an.

Lizenz

Das Plugin kann auf unbegrenzten Websites für Sie und Ihre Kunden verwendet werden. Es beinhaltet 1 Jahr Updates und Support.

Abschließende Gedanken

Owl Carousel Pro fügt dem Divi Builder zwei schöne Module hinzu, mit denen Sie Beiträge, Projekte, benutzerdefinierte Beitragstypen und Bilder in einem anpassbaren Karussell anzeigen können. Die meisten der erwarteten Anpassungen des Divi-Moduls sind ebenso enthalten wie einige neue Funktionen zur Steuerung des Displays.

Ich fand fast jede Funktion und Einstellung intuitiv. Ich fand die benutzerdefinierten Filter für den durchschnittlichen Benutzer verwirrend. Ich würde gerne mehrere vollständige Beispiele zum Erstellen von Filtern sehen, da dies die umfangreichen Fähigkeiten dieses Plugins demonstrieren würde. Auch wenn Sie sich nicht mit Code beschäftigen möchten, bietet die Pro-Version genügend Funktionen, um eine Überlegung wert zu machen.

Wir würden gerne von Ihnen hören. Haben Sie Own Carousel Pro ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über gst / shutterstock.com