Divi-Produkt-Highlight: Divi Den Pro – Layout-Bibliothek

Divi Den Pro – Layout Library ist ein Plugin eines Drittanbieters mit einer umfangreichen Bibliothek vorgefertigter Divi-Elemente, mit denen Sie Websites schneller erstellen können. Es verfügt über eine einzigartige Benutzeroberfläche, die durchsuchbar und sortierbar ist, sodass die Layouts leicht zu finden sind. In diesem Beitrag werfen wir einen Blick auf Divi Den Pro – Layout Library, um Ihnen bei der Entscheidung zu helfen, ob es das richtige Produkt für Ihre Divi-Design-Toolbox ist.

Installieren von Divi Den Pro – Layoutbibliothek

Die Installation von Divi Den Pro – Layout Library war einfach. Es funktioniert genauso wie das Hochladen eines beliebigen Plugins, Sie müssen jedoch bei Ihrem Divi Marketplace-Konto angemeldet sein, damit es in Divi verfügbar ist. Gehen Sie zur Installation zunächst zu:

1. Plugins
2. Neue hinzufügen
3. Plugins hochladen
4. Datei wählen
5. Jetzt installieren

Sobald das Plugin installiert ist, aktivieren Sie es wie gewohnt und Sie sehen ein neues Menü, das Ihrem Dashboard hinzugefügt wird.

1. Plugin aktivieren

Inhalt der Layout-Bibliothek

Die Divi Den Pro – Layout-Bibliothek enthält 2615 Bibliothekselemente. Dazu gehören 1988 Abschnitte und Module, 631 Layouts, 39 Menüs und 18 vollständige Website-Designs. Alle Artikel sind vorgefertigt. Die Layouts sind beschriftet, getestet und für verschiedene Bildschirmgrößen optimiert.

Es gibt verschiedene Möglichkeiten, sie in Ihren Divi-Layouts zu verwenden. Sie finden die Layouts im Divi Den Pro DM-Menü und im Divi Theme Builder. Das Divi Den Pro DM-Menü ist die einfachste Möglichkeit, sie zu verwenden. Sie können sie nach Stichwort und Kategorie durchsuchen und in Ihre Divi-Bibliothek importieren.

Divi Den Pro DM-Menü

In Ihrem WordPress-Dashboard finden Sie einen neuen Menüpunkt namens Divi Den Pro DM. Das Menü enthält zahlreiche Links, die Sie auch als Registerkarten im Menü selbst finden.

Layout-Finder

Die erste Registerkarte ist der Layout-Finder. Dazu gehört ein Suchfeld mit Filtern auf der linken Seite und den Ergebnissen auf der rechten Seite. Es enthält auch Registerkarten, sodass Sie alle Layouts, nur die kostenlosen Layouts oder nur die Pro-Layouts anzeigen können. Die Filter zeigen die Anzahl der Layouts in diesem Typ an. Sie sind in Layouts, Abschnitte, Module, Kategorien, Sammlungen, Divi Theme Builder und Plugin Theme Builder unterteilt.

Im Ergebnisbereich wird eine Miniaturansicht des Layouts angezeigt. Die Miniaturansicht scrollt beim Schweben, wenn das Layout größer als der Container ist. Sie können das Layout in einer anderen Registerkarte anzeigen, das Layout in Ihrer Divi-Bibliothek speichern oder das Layout als JSON-Datei auf Ihren Computer herunterladen.

Wenn Sie einen Filter auswählen, wird dieser geöffnet und zeigt die Optionen an. Ich habe Sammlungen geöffnet, in denen die Namen der Layouts von Divi Den angezeigt werden. Wenn Sie eines auswählen, werden die Layouts innerhalb dieser Sammlung im rechten Bereich angezeigt.

Ich habe geklickt, um ein Layout anzuzeigen, und die Demo wurde auf der Divi Den-Seite in einem anderen Tab geöffnet. Die Seite zeigt mehrere Layouts, Abschnitte usw. an. Ich bewege den Mauszeiger über das Bild oben in der Mitte, um dessen Hover-Effekte anzuzeigen.

Neueste

Auf der Registerkarte „Neueste“ werden die neuesten Beiträge aus dem Divi Den-Blog angezeigt. Dies ist eine gute Möglichkeit, zu erfahren, was es Neues in der Layout-Bibliothek gibt.

Tutorials

Die Registerkarte „Tutorials“ enthält alle Tutorials, die die Verwendung von Divi Den Pro – Layout Library erläutern. Dazu gehören eingebettete Videos, die angezeigt werden, wenn Sie auf ein Tutorial klicken, sodass Sie direkt über das Divi Den-Dashboard lernen können, ohne WordPress zu verlassen. Dies trägt zur Benutzerfreundlichkeit bei. Wenn Sie also Hilfe benötigen, finden Sie sie hier.

Theme-Builder

Die Registerkarte „Theme Builder“ unterteilt die Layouts in Divi Theme Builder und Plugin Theme Builder. Es zeigt die Sammlungen, Seitentypen usw. an. Diese werden auch dem Divi Theme Builder hinzugefügt. Sie können den Theme Builder auch von hier aus starten.

Der Plugin-Theme-Builder verfügt über einen Link zum Öffnen des Theme-Customizers.

Der Theme Customizer fügt drei neue Customizer-Registerkarten für Seiten-, Blog- und globale Einstellungen hinzu. Dazu gehören zusätzliche Funktionen wie ein Popup-Customizer, eine Sticky Bar, weitere Symbole, die Schaltfläche „Zurück nach oben“, eine bald erscheinende Seite, Vorlagenanpassungen und vieles mehr.

Benutzerdefinierte CSS-Dateien

Die Registerkarte „Benutzerdefinierte CSS-Dateien“ stellt das benutzerdefinierte CSS aus den Divi Den-Layouts bereit, das Sie kopieren und ändern können. Wenn Sie auf eine klicken, wird das CSS in einer anderen Registerkarte geöffnet. Ein eingebettetes Video zeigt, wie Sie das benutzerdefinierte CSS verwenden.

Fortschrittlich

Die Registerkarte „Erweitert“ umfasst die Registerkarten „White Label“ und „Weitere Optionen“. Mit White Label können Sie das Plugin entsprechend Ihrer Marke umbenennen.

Auf der Registerkarte „Weitere Optionen“ können Sie die Registerkarte „Divi Den Pro“ innerhalb der Divi Builder-Elemente verschieben. Dies ist standardmäßig aktiviert.

Divi Den Pro-Layoutbibliothek im Divi Builder

Dem Modulmodul wurde eine Registerkarte für die Divi Den Pro – Layoutbibliothek hinzugefügt.

Wenn Sie die Registerkarte auswählen, wird das Menü geöffnet, in dem Sie das gewünschte Layout auswählen können. Die Layouts werden als JSON-Dateien heruntergeladen. Sie müssen sie also auf Seiten und Beiträge hochladen, wenn Sie sie verwenden möchten.

Divi Den Pro-Layoutbibliothek im Divi Theme Builder

Die Divi Den Pro – Layout Library-Schnittstelle wird auch am unteren Rand des Divi Theme Builder-Bildschirms hinzugefügt. Es funktioniert genauso wie im WordPress-Dashboard.

Im Theme Builder funktioniert es genauso wie auf Seiten und Beiträgen.

Beispiele für die Divi Den Pro-Layoutbibliothek

Nachdem wir nun gesehen haben, wie man die Divi Den Pro – Layout Library-Schnittstelle verwendet, schauen wir uns ein paar Beispiele an. Wir werden uns einige von jedem Typ ansehen.

Layouts

Als nächstes schauen wir uns einige Layouts an. Ich lade sie in den Divi Theme Builder. Sobald Sie die Layouts in Ihrer Divi-Bibliothek gespeichert haben, sind sie in Ihren Layouts verfügbar. Durchsuchen Sie sie und wählen Sie links Kategorien aus.

Shop Landing Page V3 Ragnar

Dies ist der obere Teil der Shop Landing Page V3 Ragnar. Es enthält einen Heldenbereich mit einem E-Mail-CTA. Ein Shop-Bereich zeigt vorgestellte Produkte und enthält ein animiertes Overlay, das beim Bewegen des Mauszeigers eine Nachricht in großem Text scrollt.

Hier ist der untere Teil der Shop Landing Page V3 Ragnar. Extragroße Bilder erstellen Shop-CTAs und enthalten animierte Buttons. Ein einzigartiger Blog-Bereich zeigt das vorgestellte Bild hinter dem Text an, der auf einer Seite erscheint.

Karriereseite V1 Tina

Dies ist der obere Teil der Karriereseite V1 Tina. Es enthält ein Heldenbild mit einem überlappenden Titel, eine Einleitung mit einer Legende und zwei Textspalten. Im Anschluss daran folgt ein Abschnitt mit offenen Positionen, die als Karten angezeigt werden.

Dies ist der untere Teil der Karriereseite V1 Tina. Klappentexte mit Hover-Animationen liefern Informationen, gefolgt von einem CTA zum Versenden eines Lebenslaufs und eines Abschnitts über Unternehmensvorteile.

Old Times-Blogseite

Dieses Beispiel ist der obere Teil der Old Times-Blogseite. Es enthält einen Heldenbereich mit einer Nachricht über einem Hintergrundbild und eine Schaltfläche mit einer Hover-Animation. Ein Blog-Bereich zeigt einen Blog-Beitrag mit einem großen, hervorgehobenen Bild auf der linken Seite und Beiträge mit einem kleineren, hervorgehobenen Bild als Seitenleiste auf der rechten Seite. Eine gelbe Linie trennt den Blog-Bereich vom Helden-Bereich. Alle Blogkarten enthalten Neigungsanimationen.

Dies ist der untere Teil der Old Times-Blogseite. Es verwendet außerdem gelbe Linien zur Trennung und enthält zwei dreispaltige Blog-Abschnitte, ein großes E-Mail-Formular und eine Fußzeile.

Menüseitenlayout Jamie

Hier ist der obere Teil des Menüseitenlayouts Jamie. Es enthält einen Heldenbereich mit Symbolen, die auf die verschiedenen Menükategorien verweisen. Dazu gehören Hover-Animationen. Daran schließt sich eine zweispaltige Speisekarte mit einem Bild links und einer Beschreibung rechts an. Das Essen ist in Kategorien unterteilt.

Menüseitenlayout Jamie

Dies ist die untere Hälfte des Menüseitenlayouts Jamie. Es führt die Speisekarte fort und enthält Kontaktinformationen sowie eine Karte in voller Breite.

Showreel-Homepage-Layout

Dies ist der obere Teil des Showreel-Homepage-Layouts. Der Heldenbereich enthält eine Schaltfläche, die ein eingebettetes Video und mehrere Klappentexte über einem bildschirmfüllenden Hintergrundbild abspielt. Im Anschluss daran finden Sie eine Reihe von Registerkarten zur Anzeige von Informationen. Große Bilder mit animierten Overlays verweisen auf die Dienste.

Dies ist der untere Teil des Showreel-Homepage-Layouts. Es setzt die großen Bilder fort und enthält einen weiteren Bildabschnitt für Dienste mit geneigten Overlay-Animationen. Es enthält außerdem gestaltete Zahlenzähler, ein E-Mail-Formular und eine Fußzeile.

Visuelle Fortschrittsbalkenseite Freddie

Dies ist die Visual Progress Bar Page Freddie. Es hat ein elegantes Layout, aber das Hauptelement, das ich zeigen möchte, ist der Fortschrittsbalken. Dies ist der Heldenbereich des Layouts. Am unteren Bildschirmrand befindet sich ein Menü. Wenn Sie scrollen, wird das Menü oben auf dem Bildschirm angezeigt und zeigt den Fortschritt im Layout an.

Der Abschnitt in diesem Beispiel besteht aus Fallstudien. Der Fortschrittsbalken wird für jeden Abschnitt, über den ich gescrollt habe, gelb angezeigt. Die Bilder für diesen Abschnitt enthalten Neigungseffekte.

Abschnitte

Wenn Sie Divi Den Pro – Layout Library-Abschnitte in Ihrer Divi-Bibliothek gespeichert haben, wird eine Divi Den Pro DM-Registerkarte zu Ihrem Abschnittsmodal hinzugefügt.

Greatest Hits Musikmodul Freddie

Greatest Hits Music Module Freddie bietet einen gestalteten Audio-Player-Bereich mit schwarzem Hintergrund und gelben Hover-Effekten.

Styling-Galerie-Demo

Die Styling Gallery Demo bietet eine interessante Bildergalerie mit verschiedenen Randformen und einem Farbblock zur Trennung der Bilder.

Lintang-Prozess-Gnade

Die Styling Gallery Demo bietet eine Liste von Schritten. Sie werden horizontal platziert und enthalten geformte Bilder oder Farben sowie Hover-Effekte.

Thunderbolt-Produkt Freddie

Thunderbolt Product Freddie ist ein Produktbereich, der auf der einen Seite einen Produkt-Slider und auf der anderen Seite gestaltete Informationen anzeigt.

Alula Timeline Grace

Alula Timeline Grace erstellt eine alternative vertikale Zeitleiste mit Bildern auf der einen Seite und Informationen auf der anderen.

Module

Die Option „Module“ im Dashboard zeigt Schaltflächen an. Hier sind einige, die ich heruntergeladen habe.

Ich habe alle Schaltflächen, die ich heruntergeladen habe, auf einer einzigen Seite hinzugefügt. Jede der Schaltflächen enthält ansprechende Hover-Animationen.

Bezugsquellen für die Divi Den Pro-Layoutbibliothek

Divi Den Pro – Layout Library ist im Divi Marketplace für 189 $ erhältlich. Es beinhaltet unbegrenzte Website-Nutzung, ein Jahr Support und Updates sowie eine 30-tägige Geld-zurück-Garantie.

Abschließende Gedanken zur Divi Den Pro-Layoutbibliothek

Das ist unser Blick auf Divi Den Pro – Layout Library. Es gibt viele Layouts in dieser Bibliothek. Die Benutzeroberfläche ist einfach. Das Suchen, Sortieren, Importieren und Herunterladen der Layouts ist intuitiv. Ich habe festgestellt, dass der Link zu den Abschnitten und Modulen stärker eingeschränkt ist als das Dashboard. Sobald sich die Layouts in der Bibliothek befinden, sind sie durch Auswahl der Optionen „Aus Bibliothek hinzufügen“ verfügbar. Wenn Sie daran interessiert sind, Ihrer Divi-Bibliothek mehrere tausend professionell gestaltete Layouts hinzuzufügen, ist Divi Den Pro – Layout Library einen Blick wert.

Wir wollen von dir hören. Haben Sie Divi Den Pro – Layout-Bibliothek ausprobiert? Teilen Sie uns in den Kommentaren mit, was Sie davon halten.