Divi-Produkt-Highlight: Divi Essential

Veröffentlicht: 2023-09-04

Divi Essential ist ein Plugin, das dem Divi Builder über 60 neue Module hinzufügt und so die Möglichkeiten für die Designs erweitert, die Sie erstellen können. Mit diesem Plugin können Sie erweiterte Registerkarten, Inhaltsumschalter, dynamische Schieberegler, einzigartige Bild- und Inhaltsmodule, Teambereiche, soziale Module und vieles mehr hinzufügen. Jedes Modul verfügt über leistungsstarke Funktionen und umfangreiche Designoptionen, die das Entwerfen komplexer Layouts zum Kinderspiel machen.

Divi Essential bietet außerdem Zugriff auf über 600 vorgefertigte Abschnittslayouts, die die Module nutzen, 30 Starterlayouts und 6 vollständige Vorlagen mit mehreren Seiten. Diese Layouts können alle von der Divi Essential-Website heruntergeladen werden und können Ihnen helfen, den Designprozess zu beschleunigen. In diesem Beitrag werfen wir einen genaueren Blick auf Divi Essential, um Ihnen bei der Entscheidung zu helfen, ob es das richtige Produkt für Sie ist.

Lass uns anfangen!

Inhaltsverzeichnis
  • 1 Divi Essential installieren
  • 2 Divi Essential-Module
    • 2.1 Kreativmodule
    • 2.2 Slider-Module
    • 2.3 Bildmodule
    • 2.4 Inhaltsmodule
    • 2.5 Teammodule
    • 2.6 Sozialmodule
    • 2.7 Überprüfungsmodule
  • 3 Divi Essential Starter-Layouts
    • 3.1 Tour-Layout
  • 4 vorgefertigte Divi Essential-Websites
    • 4.1 Gärtner-Vorlage
  • 5 Bezugsquellen für Divi Essential
  • 6 abschließende Gedanken

Divi Essential installieren

Divi Essential wird als .ZIP-Plugin-Datei geliefert. Um das Plugin zu installieren, öffnen Sie die Plugin-Seite in Ihrem WordPress-Dashboard und klicken Sie auf „Neu hinzufügen“. Klicken Sie auf Datei auswählen, wählen Sie die Plugin-Datei von Ihrem Computer aus und klicken Sie dann auf Jetzt installieren.

Installieren Sie Divi Essential

Sobald das Plugin installiert ist, aktivieren Sie das Plugin.

Aktivieren Sie Divi Essential

Divi Essential fügt dem Divi Builder 65 neue Module hinzu. Sie können auf die hinzugefügten Module zugreifen, indem Sie im Menü „Modul einfügen“ auf die Schaltfläche „Divi Essential-Modul“ klicken oder „Weiter“ suchen, wodurch alle Divi Essential-Module angezeigt werden.

Divi Essential Insert-Modul

Divi Essential-Module

Die über 60 neuen Module erweitern den Divi Builder um viele Funktionen. Jedes der Module verfügt über Inhalt, Design und erweiterte Optionen, um das Aussehen und die Funktion vollständig anzupassen. Schauen wir uns einige dieser Module anhand der vorgefertigten Layouts von Divi Essential genauer an.

Kreativmodule

Es gibt 10 verschiedene Kreativmodule, die Sie Ihrer Seite hinzufügen können. Jedes Modul fügt Ihrem Layout eine einzigartige Funktionalität oder ein einzigartiges Design hinzu. Zusätzlich zu den Modulen, die ich unten hervorheben werde, enthält Divi Essential Module zum Hinzufügen eines schwebenden Elements, eines einzigartigen Teilers, einer Promo-Box, einer Lottie-Animation und eines Schrittablaufabschnitts zur Demonstration eines Prozesses.

Grundlegende Kreativmodule von Divi

Nächste erweiterte Registerkarte

Mit dem erweiterten Tab-Modul können Sie horizontale und vertikale Inhaltsabschnitte mit Tabs erstellen. Sie können für jede Registerkarte Titel, Untertitel und Symbol/Bild festlegen. Dieses Beispiel ist das erweiterte Tab-Layout 1.

Divi Essential-Registerkarte „Erweitert“.

Im Hauptteil jeder Registerkarte können Sie ein anzuzeigendes Divi-Bibliothekslayout auswählen oder Inhalte hinzufügen, indem Sie den Titel, die Beschreibung, das Bild/Symbol und die Schaltfläche bearbeiten.

Divi Essential Advanced Tab Body Content

Das Modul verfügt über umfangreiche Designeinstellungen für das gesamte Modul sowie die einzelnen Registerkarten. Sie können jeden Aspekt des Designs anpassen, verschiedene Hover-Effekte für die Elemente auswählen, aktive Stile für die ausgewählte Registerkarte festlegen und vieles mehr. Erweiterte Tab-Einstellungen für Divi Essential

Nächste Geschäftsstunde

Mit diesem Modul können Sie Ihre Geschäftszeiten ganz einfach auf Ihrer Website anzeigen. Das abgebildete Beispiel ist Design-Layout 2. Sie können jeden Wochentag als Element innerhalb des Moduls hinzufügen. Jedes Element kann einzeln angepasst werden, oder Sie können die Designoptionen des Moduls verwenden, um jedem Element ein Design zu verleihen.

Divi Essential-Geschäftszeiten

Nächster Inhalt umschalten

Das Inhaltsumschaltmodul fügt Ihrer Seite einen Umschalter hinzu, mit dem Sie zwischen Inhalten wechseln können. In diesem Beispiel (Layout 2) wird der Schalter verwendet, um zwischen der Anzeige von Details einer Einzellizenz oder einer lebenslangen Lizenz zu wechseln.

Divi Essential Content Toggle

Sie können dem Umschaltbereich ein Divi-Bibliothekselement hinzufügen oder Ihren Inhalt in den Moduleinstellungen hinzufügen. Sie können das Design jedes Abschnitts sowie das Design des Umschalters anpassen.

Divi Essential Content Toggle-Einstellungen

Nächster Bild-Hotspot

Mit diesem Modul können Sie einem Bild Hotspots hinzufügen, die beim Bewegen des Mauszeigers den Inhalt sichtbar machen. Sie können Text und ein Bild hinzufügen, das angezeigt wird, und Sie können jedes Element mit Designoptionen anpassen. Das Hotspot-Symbol und die Farbe können einfach geändert werden, und die Hotspot-Position kann durch Ändern der horizontalen und vertikalen Positionen in den Designeinstellungen festgelegt werden. Das folgende Beispiel ist Layout 1.

Divi Essential Image Hotspot

Nächste Zeitleiste

Mit dem Timeline-Modul können Ereignisse, die Geschichte einer Organisation, Prozesse und vieles mehr visuell dargestellt werden. Innerhalb des Timeline-Moduls können Sie einzelne Timeline-Elemente hinzufügen, die jeden Timeline-Abschnitt umfassen. Sie können jedem Timeline-Element Text, ein Bild, eine Schaltfläche und ein Symbol hinzufügen. Jedes Element kann auf der Registerkarte „Design“ angepasst werden, sodass Sie einzigartige Zeitleistendesigns erstellen können. Unten ist das Zeitleistenlayout 11 abgebildet.

Divi Essential Timeline-Element

Slider-Module

Es gibt sechs verschiedene Slider-Module, die Sie mit Divi Essential zu Ihrer Website hinzufügen können. Sie können ein Logo-Karussell, ein Bild- und Textkarussell, einen 3D-Würfel-Slider, einen Galerie-Slider, ein Testimonial-Karussell und ein Post-Karussell hinzufügen. Schauen wir uns einige der Slider-Module genauer an.

Divi Essential Slider-Module

3D-Würfelschieber

Das 3D-Würfel-Schiebereglermodul fügt einen Schieberegler hinzu, der sich mit einem 3D-Würfeleffekt dreht. Sie können jede Folie mit einem Bild, Text und Hintergrund anpassen. In den Schiebereglereinstellungen können Sie die Autoplay-, Navigations- und Effekteinstellungen sowie alle Designoptionen ändern. Das abgebildete Beispiel ist Layout 4.

Divi Essential 3D Cube Slider

Nächstes Divi-Karussell

Dies ist das Karussell-Layout 17. Es stehen vier Layouts zur Auswahl: Bild, Text, Text im Bild oder Text unter dem Bild. Dies ermöglicht viele vielseitige Layouts.

Divi Essential Karussell

Sie haben die volle Kontrolle über das Layout und Design jedes Karussellelements sowie über das Karussellmodul selbst. Sie können die Einstellungen für die automatische Wiedergabe des Karussells ändern, die Navigationseinstellungen ändern, den Effekt ändern, eine Lightbox-Funktion hinzufügen und vieles mehr.

Divi Essential Karusselleinstellungen

Bildmodule

Mit 12 verschiedenen Bildmodulen bietet Ihnen Divi Essential viele Möglichkeiten, Bilder auf Ihrer Website kreativ anzuzeigen. Sie können eine Bildlupe, ein Mauerwerkslayout, Module, die den Bildern unterschiedliche Lade- und Hover-Effekte hinzufügen, eine Bild-Hoverbox, einen Vorher- und Nachher-Schieberegler und mehr hinzufügen. Werfen wir einen Blick auf einige der Bildmodule.

Divi Essential Bildmodule

Weiter Vorher Nachher

Mit dem Vorher- und Nachher-Modul können Sie ein Vorher- und Nachher-Foto anzeigen, das mit einem Schieberegler angezeigt wird, den Sie ziehen können. Dieses Layout ist Vorher-Nachher-Layout 4.

Divi Essential Vorher Nachher Slider

Sie können die Vorher- und Nachherbilder festlegen, die Beschriftungen ändern, die Richtung und Funktion des Schiebereglers ändern und das Design anpassen.

Divi Essential Vorher-Nachher-Einstellungen

Nächstes kreisförmiges Bild schweben

Mit dem Hover-Modul für kreisförmige Bilder können Sie ein kreisförmiges Bild erstellen, das Inhalte mit einem Hover-Effekt sichtbar macht.

Divi Essential Circular Image Hover

Es stehen Ihnen 19 verschiedene Hover-Effekte und 4 verschiedene Hover-Richtungen zur Auswahl, die Ihnen viel Flexibilität bei der Gestaltung geben.

Divi Essential Circular Image Hover-Effekte

Nächstes Bild Akkordeon

Das Bildakkordeon-Modul fügt Ihrem Design ein interaktives Bildakkordeon hinzu. Wenn Sie mit der Maus über eines der Bilder im Akkordeon fahren, wird es erweitert und der Inhalt angezeigt. Sie können jedem Bild ein Symbol, einen Titel, eine Beschreibung und eine Schaltfläche hinzufügen. In diesem Beispiel ist das dritte Bild so eingestellt, dass es beim Laden der Seite geöffnet wird. Wenn Sie mit der Maus über ein anderes Bild fahren, wird es erweitert und bleibt erweitert.

Divi Essential Image Akkordeon-Einstellungen

Sie können das Akkordeon so einstellen, dass es sich beim Schweben oder Klicken bewegt, und Sie können es so einstellen, dass es sich vertikal oder horizontal öffnet.

Divi Essential Image Akkordeon

Inhaltsmodule

In der Inhaltskategorie gibt es 19 Module. All dies kann verwendet werden, um Ihre Inhalte dynamisch anzuzeigen und fesselnde Layouts zu erstellen. Sie können Boxen und Klappentexte, Module mit verschiedenen Texteffekten, Schaltflächen, Blog-Post-Schieberegler und mehr hinzufügen. Werfen wir einen Blick auf einige der Module.

Divi Essential Content-Module

Nächste 3D-Flipbox

Mit dem 3D-Flip-Box-Modul können Sie eine dynamische Box erstellen, die sich beim Schweben mit einem 3D-Effekt umdreht. Sie können die Rückseite der Box auch anders gestalten. Dieses Beispiel ist Layout 7.

Divi Essential 3D-Flipbox

In den Moduleinstellungen können Sie die Elemente, die sich auf der Vorder- und Rückseite befinden, anpassen. Sie können ein Symbol, ein Bild, Überschriftentext, Textkörper und Schaltflächen hinzufügen. Auf der Registerkarte „Design“ können Sie das Aussehen jedes Elements anpassen.

Divi Essential 3D Flip Box-Einstellungen

Nächster Klappentext

Das Blurb-Modul ist sehr vielseitig und bietet viele Inhalts- und Gestaltungsmöglichkeiten, mit denen Sie einzigartige Layouts erstellen können. Der hier verwendete Beispiel-Klappentext ist Layout 11. Er verfügt über einen Neigungseffekt beim Schweben, der sich mit der Maus bewegt.

Divi Essential Klappentext

In den Moduleinstellungen können Sie eine Vorüberschrift aktivieren, den Überschriftentext und das Überschriften-Tag festlegen, einen Nachüberschriftentext aktivieren, eine Beschreibung hinzufügen, ein Bild und ein Symbol hinzufügen und eine Schaltfläche hinzufügen. Mit den umfangreichen verfügbaren Designoptionen können Sie eine Bildmaske, einzigartige Hover-Effekte zum Klappentext oder zu Schaltflächen und vieles mehr hinzufügen.

Divi Essential Klappentext Hover

Nächster Knopf

Das Schaltflächenmodul enthält viele Optionen, um Ihrer Schaltfläche ansprechende Effekte hinzuzufügen. Sie können Hintergrundübergänge, Hover-Effekte, Icon-Hover-Effekte, Stricheffekte, 2D-Effekte hinzufügen, ein Hintergrundbild festlegen, ein Hintergrund-GIF hinzufügen und mehr. In diesem Beispiel verwende ich eine Sammlung von Schaltflächen mit 2D-Effekten. Sie können sehen, wie die Schaltfläche „Wachstum drehen“ größer geworden ist und sich beim Schweben leicht gedreht hat.

Divi Essential-Taste

Nächste Textanimation

Mit dem Textanimationsmodul können Sie Ihrem Text alle möglichen Animationseffekte hinzufügen. Dies ist Beispiellayout 10 und verfügt über einen Tippeffekt. Sie können den Vorher- und Nachher-Text festlegen, den animierten Text hinzufügen und den Animationseffekt auswählen. Der Textstil kann im Design-Tab weiter angepasst werden.

Divi Essential Textanimation

Nächste Textfarbbewegung

Mit dem Textfarben-Bewegungsmodul können Sie die Textfarbe animieren. Dieses Beispiel ist Layout 9.

Divi Essential Text Color Motion

Sie können aus mehreren verschiedenen Animationsstilen auswählen und vier verschiedene Textfarben auswählen, die einen auffälligen Verlaufseffekt erzeugen.

Divi Essential Text Color Motion Farbeinstellungen

Teammodule

Im Lieferumfang von Divi Essential sind fünf verschiedene Teammodule enthalten, mit denen Sie Ihre Teammitglieder mit einzigartigen Abschnitten und Effekten präsentieren können.

Divi Essential Team-Module

Nächste Team-Overlay-Karte

Mit dem Team-Overlay-Kartenmodul können Sie Ihre Teammitglieder mit einem Overlay präsentieren, das beim Hover erscheint und zusätzliche Inhalte wie eine Beschreibung oder Social-Media-Symbole anzeigt. Das gezeigte Beispiel ist Layout 1, das über einen geschwungenen Rand verfügt, der ihm eine einzigartige Note verleiht.

Divi Essential Team-Overlay-Karte

Nächste soziale Enthüllung des Teams

Mit diesem Modul werden Social-Media-Symbole beim Bewegen des Mauszeigers unterhalb des Beschreibungsabschnitts der Teammitglieder angezeigt. Dieses Beispiel ist Layout 1.

Divi Essential Team Social Reveal

Soziale Module

Divi Essential bietet Möglichkeiten, soziale Medien mit Ihrer Website zu verbinden. Für Facebook können Sie die folgenden Module hinzufügen: Teilen, „Gefällt mir“, eingebettetes Video, Kommentar, eingebetteter Kommentar, eingebetteter Beitrag und eingebettete Seite. Für Twitter können Sie eine Timeline, einen Tweet, eine Twitter-Schaltfläche oder eine Follow-Schaltfläche hinzufügen.

Divi Essential Social Modules

Nächster FB-Kommentar

Hier ist das Facebook-Kommentarmodul. Mit diesem Modul können Sie Benutzern ermöglichen, mit ihrem Facebook-Konto den Inhalt Ihrer Website zu kommentieren. Das Design kann mit Optionen auf der Registerkarte „Design“ angepasst werden.

Divi Essential FB-Kommentar

Nächste Twitter-Timeline

Mit diesem Modul können Sie Ihrer Seite eine Twitter-Timeline hinzufügen. Sie müssen lediglich den Benutzernamen des Twitter-Kontos festlegen und die Zeitleiste wird angezeigt. Sie können die Zeitleiste mit den Designeinstellungen anpassen.

Divi Essential Twitter-Timeline

Überprüfungsmodule

Es gibt drei Bewertungsmodule, mit denen Sie Kundenbewertungen und Erfahrungsberichte auf Ihrer Website anzeigen können.

Nächste Divi-Rezension

Mit dem Bewertungsmodul können Sie Kundenbewertungen zu Ihrer Seite hinzufügen. Sie können einen Namen, eine Position und eine Beschreibung hinzufügen und die Sternebewertung für jedes Modul festlegen. Dies ist Layoutbeispiel 1.

Divi Essential-Rezension

Nächster Testimonial-Slider

Mit diesem Modul können Sie einen Schieberegler hinzufügen, um die Erfahrungsberichte und Bewertungen Ihrer Kunden zu präsentieren. Dies ist Layout 11. Jede Testimonial-Folie wird als Element zum Modul hinzugefügt, d. h. Sie können das Design jeder Folie einzeln anpassen und Sie können das Foliendesign als Ganzes anpassen. Sie können jeder Folie eine Bewertung, einen Text und ein Bild hinzufügen. In den Slider-Einstellungen können Sie die automatische Wiedergabe des Sliders festlegen, die Slider-Übergangseinstellungen anpassen und die Navigationseinstellungen ändern. Mit den Optionen auf der Registerkarte „Design“ können Sie das Aussehen des Schiebereglers nach Ihren Wünschen anpassen.

Divi Essential Testimonial-Slider

Divi Essential Starter-Layouts

Zusätzlich zu den Modulen und Modullayouts, die wir oben untersucht haben, enthält Divi Essential auch 30 einseitige Starter-Layouts, die Sie verwenden können. Schauen wir uns eines genauer an.

Divi Essential Starter-Vorlagen

Tour-Layout

Dies ist das Tourlayout. Das Design ist voller Animationen und interaktiver Elemente. Die Überschrift nutzt das Multi-Überschriften-Modul und verfügt über einen Enthüllungseffekt. Unten finden Sie ein Logo-Karussell, drei Klappentexte und ein Karussell mit Reisezielen. Als nächstes folgt ein Abschnitt mit einem schwebenden Bild und einigen Inhalts- und Zahlenzählern auf der rechten Seite. Der Kartenabschnitt nutzt das Hotspot-Modul, um Ziele zu lokalisieren und beim Schweben Informationen anzuzeigen. Schließlich gibt es noch einen Testimonial-Slider, eine Newsletter-Anmeldung und eine Fußzeile.

Starter-Layout der Divi Essential Tour-Website

Divi Essential vorgefertigte Websites

Divi Essential bietet außerdem Zugriff auf 6 vollständige Website-Vorlagen, die mehrere Seiten umfassen.

Gärtner-Vorlage

Werfen wir einen Blick auf die Homepage der Gärtnervorlage. Zusätzlich zu dieser Seite enthält die Vorlage die folgenden Seiten: Über uns, Dienstleistungen, Galerie, Projekt, Projektdetails und Kontakt.

Vorgefertigte Website von Divi Essential Garden

Die Seite wird mit einem Heldenbereich mit mehreren Überschriften, einem großen Bild, einem schwebenden Element, Schaltflächen und mehreren Hintergrundgrafiken geöffnet. Der nächste Abschnitt enthält vier Klappentextmodule, die Dienste hervorheben. Darauf folgt ein weiterer Abschnitt mit einigen Texten und Bildern, die einen schwebenden Effekt haben. Der Inhalt der Überschrift verfügt über eine Enthüllungsanimation. Der unten stehende Abschnitt „Dienste“ nutzt ebenfalls die Klappentextmodule von Divi Essential und wird von einem schwebenden Element mit einer rotierenden Animation und einem Bildakkordeon gefolgt, das sich beim Schweben ausdehnt und den Inhalt freigibt.

Divi Essential Garden-Website-Layout-Startseite

Als nächstes folgt ein weiterer Abschnitt mit Blurb-Modulen, gefolgt von einem Abschnitt mit einem Hintergrundbild in voller Breite und einer schwebenden Grafik. Darunter befindet sich ein Abschnitt mit einer Preistabelle.

Divi Essential Garden Website-Layout Startseite 2

Weiter auf der Startseite gibt es einen Logo-Slider und einen Vorher/Nachher-Slider, gefolgt von einem Testimonial-Slider. Abschließend endet die Seite mit einem Newsletter-Anmeldeformular.

Divi Essential Garden Website-Layout Startseite 3

Wo kann man Divi Essential kaufen?

Divi Essential ist im Divi Marketplace erhältlich. Die unbegrenzte Website-Nutzung und ein Jahr Support und Updates kosten 79 US-Dollar. Im Preis ist außerdem eine 30-tägige Geld-zurück-Garantie enthalten.

Abschließende Gedanken

Divi Essential ist vollgepackt mit Modulen, die Ihrer Website neue Funktionen und dynamische Layouts hinzufügen. Ich war beeindruckt von der Anpassbarkeit und den umfangreichen Optionen, die jedes Modul bietet. Die Demo-Layouts, die einseitigen Starter-Layouts und die vorgefertigten Website-Vorlagen, die mit Divi Essential geliefert werden, scheinen allesamt hochwertige Designs zu sein, die Sie problemlos für Ihre eigenen Designzwecke verwenden und ändern können. Wenn Sie nach einem All-in-One-Plugin suchen, das die Möglichkeiten Ihrer Gestaltung mit Divi erweitert, ist Divi Essential eine großartige Option.

Wir würden uns freuen, von Ihnen zu hören! Haben Sie Divi Essential ausprobiert? Teilen Sie uns Ihre Meinung in den Kommentaren mit!