Divi-Plugin-Highlight: Divi Supreme

Divi Supreme ist ein Drittanbieter-Plugin für Divi, das viele Einstellungen hinzufügt, um dem Divi Builder neue Funktionen sowie viele neue Module hinzuzufügen. In diesem Artikel sehen wir uns Divi Supreme an, um zu sehen, was es kann, und helfen Ihnen bei der Entscheidung, ob es das Plugin ist, das Sie in Ihrer Divi-Toolbox benötigen.

Installation

Die Installation ist einfach und unkompliziert.

1. Kaufen und laden Sie das Plugin vom Divi Marketplace herunter
2. Navigieren Sie zu Plugins > Neu hinzufügen > Plugin hochladen
3. Klicken Sie auf Datei auswählen
4. Suchen Sie die ZIP-Datei des Plugins auf Ihrem Computer und wählen Sie sie aus
5. Klicken Sie auf Jetzt installieren
6. Klicken Sie auf Aktivieren
7. Gehen Sie im WordPress-Dashboard zu Divi Supreme Pro > Lizenz und geben Sie Ihren Lizenzschlüssel ein

Allgemeine Einstellungen

Divi Supreme fügt einen Menübildschirm mit mehreren Registerkarten hinzu, um die Einstellungen nach Ihren Wünschen anzupassen. Die Registerkarte Allgemeine Einstellungen enthält Umschalter zum Aktivieren geplanter Elemente, ein Popup, ein Bibliotheks-Widget, einen Link zum Weiterlesen von Inhalten, Bibliotheks-Shortcodes und einen reaktionsschnellen Viewer. Schauen wir uns einige davon an.

Geplantes Element

Geplante Elemente bieten einen Kalender mit der genauen Zeit, sodass Sie planen können, ihn für diese Zeiten anzuzeigen oder auszublenden. Sie können auch auswählen, für welchen Benutzer es gilt. Dies wird allen Abschnitten, Zeilen, Spalten und Modulen hinzugefügt.

Pop-up

Die Popup-Funktion wird zu Modulen hinzugefügt. Sie können den Popup-Typ auswählen, ein Layout aus der Bibliothek auswählen, die Auslöser zum Öffnen und Schließen auswählen, automatisches Schließen, Ein- und Aus-Animationen, Positionen, Breiten, Überlagerungen, Schaltflächen zum Schließen, Symbole, Farben usw.

Weiterlesen

Read More fügt einen Link zu bestimmten Modulen hinzu, um deren Inhalt beim Klicken anzuzeigen. Wählen Sie aus, ob der Link auf Mobilgeräten, die minimierte Höhe, der Text, die Schriftart, die Farben, der Schatten, das benutzerdefinierte CSS und mehr angezeigt werden sollen.

Bibliotheks-Widget

Mit dem Bibliotheks-Widget können Sie jedes Layout aus der Divi-Bibliothek in Ihre Seitenleisten, Fußzeilen oder an anderen Stellen, an denen Sie Widgets verwenden, platzieren.

Dieses Beispiel zeigt das Demo-Layout in der Seitenleiste. Das Layout, das ich verwende, wurde nicht für diesen Bereich entwickelt, aber es ist interessant, dass es Divi-Layouts verwenden kann, um Seitenleisten zu erstellen.

Responsive Viewer

Der Responsive Viewer fügt der Builder-Symbolleiste neue Werkzeuge hinzu, die mehr Anzeigeoptionen bieten. Wenn Sie den Tablet- oder Telefonmodus anzeigen möchten, werden der Symbolleiste neue Bildschirmgrößen hinzugefügt. Außerdem wird ein Feld hinzugefügt, in das Sie eine benutzerdefinierte Größe eingeben können.

Einfacher Theme-Builder

Mit dem Easy Theme Builder können Sie Ihre Kopfzeile konfigurieren, die Farben der Kopfzeilenelemente beim Scrollen ändern und die verkleinernden Elemente anpassen.

Fester Header

Standardmäßig scrollt eine mit dem Theme Builder erstellte Kopfzeile mit der Site. Im obigen Beispiel habe ich die Seite nach unten gescrollt und die Kopfzeile ist weggescrollt.

Die Kopfzeile ist jetzt fest, wenn ich also scrolle, bleibt die Kopfzeile an Ort und Stelle.

Scrollen

Zum Scrollen habe ich die Hintergrundfarben in beiden Abschnitten geändert. Ich habe auch den Boxschatten hinzugefügt, der beim Scrollen angezeigt wird.

Hier ist mein Theme Builder-Header vor dem Scrollen. Ich habe es auf Fixed gesetzt und den Inhalt nach unten verschoben. Dieser Header besteht aus zwei Abschnitten.

Hier ist die Kopfzeile nach dem Scrollen. Die beiden Abschnitte haben ihre Hintergrundfarben gemäß meinen Einstellungen geändert.

Schrumpfen

Mit Shrink können Sie die Größe des Menüs beim Scrollen festlegen und das Logo in ein neues Bild ändern. Fügen Sie dem Abschnitt, den Zeilen und dem Modul Auffüllung hinzu und geben Sie einen Prozentsatz für das Verkleinern des Bilds an.

Hier ist mein Theme Builder-Header mit seinen Standardeinstellungen und einem neuen Logo.

Ich habe die Größe erhöht, damit der Unterschied leicht zu erkennen ist. Ich habe 8px Padding hinzugefügt und das Bild auf 80% gesetzt. Es hat jetzt das Logo in mein neues Bild geändert.

Einstellungen für soziale Medien

In den Einstellungen für soziale Medien können Sie Ihre Facebook-App-ID eingeben und die Sprache ändern, sodass Ihre Module dieselbe Sprache wie Ihre Website verwenden.

Sonstiges

Mit den verschiedenen Einstellungen können Sie die Daten des Plugins bei der Deinstallation entfernen, JSON-Datei-Uploads und SVG-Uploads zulassen und den Namen und das Symbol des Divi Supreme-Menüs ändern.

Divi-Module

Divi Supreme fügt dem Divi Builder 42 neue Module hinzu. Sie fügen viele neue Funktionen für Bilder, Texte, Schaltflächen, Kontaktformulare, soziale Netzwerke usw. hinzu. Schauen wir uns einige davon an.

Höchste Geschäftszeiten

Supreme Business Hours enthält Untermodule für jeden Wochentag, die es Ihnen ermöglichen, diese individuell zu benennen, unterschiedliche Stunden anzuzeigen und zu gestalten. Sie können sie auch zusammen stylen, wie ich es hier getan habe. Es gibt Ihnen die unabhängige Kontrolle über die Schriftarten für Tag und Uhrzeit. Sie können auch einen beliebigen Text in die Felder eingeben.

Oberster Knopf

Supreme Button bietet Ihnen zwei Schaltflächen, die Sie zusammen oder unabhängig voneinander stylen können. Außerdem werden Trenntext, eine Lightbox für jede Schaltfläche und QuickInfos hinzugefügt. Jedes der Elemente hat seine eigenen Styling-Optionen. Sie können genau die gewünschten Funktionen verwenden, sodass Sie nicht beide Schaltflächen, den Trenntext usw.

Oberste Karte

Supreme Card erstellt Karten, die wie Blogposts aussehen. Fügen Sie ein Bild, einen Titel, eine Beschreibung, eine Schaltfläche und ein Abzeichen hinzu. Jedes der Elemente kann unabhängig gestaltet werden. Ich habe ein Bild hinzugefügt, die Schriftstärke für den Titel erhöht, die Farbe und die Schriftgröße des Logos geändert, die Farbe der Schaltflächen geändert, die Schaltfläche abgerundet und der Schaltfläche einen Kastenschatten hinzugefügt. Dies ist die gestapelte Ansicht.

Sie können auch Inline erstellen und die Breite, die Reihenfolgenausrichtung und die horizontale Inhaltsausrichtung (wodurch die vertikale Position des Bildes angepasst wird) auswählen. Dies zeigt links für die Auftragsausrichtung und Mitte für die horizontale Ausrichtung. Die Ausrichtungsoption eignet sich hervorragend zum Erstellen von CTAs in einem abwechselnden Layout.

Das ist richtige Ausrichtung. Ich habe auch einige Anpassungen am Bild vorgenommen, z. B. abgerundete Ecken, einen roten Rahmen und einen Kastenschatten. Sie können dem Bild auch eine Überlagerung hinzufügen.

Supreme Kartenkarussell

Das Supreme Card Carousel bietet dieselben Funktionen wie die Supreme Card, fügt jedoch mehrere Karten zu einem Schieberegler hinzu. Es gibt Ihnen Styling-Optionen, damit Sie die Karten unabhängig voneinander stylen können. Es fügt auch Styling-Optionen für das Karussell hinzu, einschließlich Pfeile und Punktnavigation, und die Standard-Slider-Funktionen. Dies zeigt die Standardeinstellungen mit Bildern, die ich hinzugefügt habe. Dies ist die gestapelte Ausrichtung.

Dies ist die Inline-Ausrichtung. Ich habe jedem der Untermodule eine Hintergrundfarbe hinzugefügt, damit sie auseinander stehen. Ich habe auch die Größe und Farbe der Pfeile und die Farben der Punktnavigation geändert. Die Pfeileinstellungen geben Ihnen auch die Kontrolle über die Position, das vorherige Symbol und das nächste Symbol.

Oberste Doppelüberschrift

Supreme Dual Heading Bietet drei Abschnitte für Text: davor, in der Mitte und danach. Der mittlere Text hat standardmäßig eine andere Farbe. Alle drei verwenden die gleichen Einstellungen, aber Sie können sie unabhängig voneinander stylen. Sie können sie auch in einer beliebigen Kombination als Inline oder gestapelt anzeigen. Inline ist die Standardeinstellung. Ich habe die Schriftgröße des Vorher- und Mitteltextes erhöht, den Nachhertext verkleinert und den Mitteltext fett gemacht.

Supreme eingebettete Google Map

Mit der eingebetteten Google Map können Sie die Adresse hinzufügen, die Sie anheften möchten, und die Zoomstufe auswählen. Es ist keine weitere Einrichtung erforderlich. Es verwendet Strg+ zum Zoomen, sodass Benutzer daran vorbeiscrollen können, ohne dass die Seite anhält, um die Karte zu zoomen.

Es hat keine benutzerdefinierten Einstellungen für eines der Kartenelemente, aber es verfügt über alle Standard-Designoptionen. Ich habe in diesem Beispiel einen Boxschatten hinzugefügt und die Filter angepasst.

Supreme eingebettete Twitter-Timeline

In der eingebetteten Twitter-Timeline können Sie einen Twitter-Benutzernamen angeben, um die Twitter-Posts dieses Benutzers in Ihr Layout einzubetten. Begrenzen Sie die Anzahl der Tweets, zeigen Sie Kopfzeile, Fußzeile, Rahmen, Bildlaufleiste an und entfernen Sie die Hintergrundfarbe. Es enthält Standard-Designeinstellungen. Es enthält auch ein helles und dunkles Thema.

Supreme Facebook-Kommentare

Facebook-Kommentare bettet die Kommentare einer Facebook-Seite ein und ermöglicht es Benutzern, über ihre Facebook-Konten Kommentare zu erstellen. Wählen Sie die Anzahl der anzuzeigenden Kommentare, ein helles oder dunkles Schema und die Reihenfolge der Kommentare aus. Benutzer können die Person auf Facebook liken, antworten und ihnen folgen. Es enthält Standard-Designeinstellungen.

Liste der Obersten Symbole

Supreme Icon List enthält Untermodule, in denen Sie den Inhalt hinzufügen und ein Symbol für jedes Element auswählen können. Sie können den Text und die Symbole unabhängig voneinander formatieren. Sie können auch Hintergründe, einschließlich Farbe, Farbverläufe, Bilder und Videos, hinter jedem Element hinzufügen.

Höchste Formen

Mit Supreme Shapes können Sie eine Form aus der Dropdown-Liste auswählen und ihre Größe festlegen. Es stehen 17 verschiedene Formen zur Auswahl.

Mit den Designoptionen können Sie die Farbe ändern, einen Rahmen verwenden und einen Schatten hinzufügen. Es enthält auch Standard-Designeinstellungen. Ich habe im obigen Beispiel die Farbe geändert und einen Schatten hinzugefügt.

Kaufen

Divi Supreme ist im Divi Marketplace für 79 US-Dollar erhältlich. Der Preis beinhaltet unbegrenzte Website-Nutzung und ein Jahr Support und Updates.

Gedanken beenden

Divi Supreme Pro ist ein interessantes Plugin für Divi. Es fügt eine Menge neuer Funktionen und Module hinzu, bleibt aber einfach zu bedienen. Alle Funktionen sind nützlich. Einige fügen Effekte hinzu, während andere Funktionen hinzufügen, die Divi erheblich erweitern. Wenn Sie Ihre Divi-Site oder Toolbox erweitern möchten, ohne eine Menge Plugins zu benötigen, ist Divi Supreme Pro einen Blick wert.

Wir wollen von dir hören. Haben Sie Divi Supreme Pro ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über VectorKnight / shutterstock.com