Divi-Produkt-Highlight: Divi Pixel

Divi Pixel ist ein Drittanbieter-Plugin für Divi, das über 45 benutzerdefinierte Module und mehr als 200 Einstellungen hinzufügt, um die Funktionen von Divi zu erweitern. Mit diesen Einstellungen können Sie ganz einfach Websites erstellen, die sich von der Masse abheben. In diesem Beitrag werfen wir einen Blick auf Divi Pixel und sehen, was es tun kann, um Ihnen bei der Entscheidung zu helfen, ob es das richtige Plugin für Ihre Anforderungen ist.

Was Sie von Divi Pixel erwarten können

Werfen wir zunächst einen Blick darauf, was Sie vom Divi Pixel-Plugin erwarten können, wenn Sie sich für den Kauf entscheiden.

Über 45 anpassbare Module

Divi Pixel fügt Divi eine Menge neuer anpassbarer Module hinzu. Es gibt viele Variationen bei den Modulen. Es reicht von einem Vorher/Nachher-Schieberegler bis hin zu Sternebewertungen, schwebenden Bildern, Karussells und mehr.

Über 200 benutzerdefinierte Optionen

Divi Pixel bietet Ihnen außerdem eine Menge benutzerdefinierter Optionen, mehr als 200 zusätzliche Optionen, um Ihre Website auf die nächste Stufe zu heben! Diese benutzerdefinierten Optionen helfen Ihnen, Ihre Divi-Website noch weiter anzupassen. Dies reicht von der Möglichkeit, SVG-Dateien hochzuladen, über die Erstellung einer benutzerdefinierten Anmeldeseite bis hin zur Anpassung Ihrer Kopfzeile und Navigation und mehr.

& Mehr

Die oben genannten Optionen und Module sind nicht die einzigen, die mit Divi Pixel geliefert werden. Es erwarten Sie einzigartige Features speziell für den Blog-Bereich und das mobile Erlebnis. Im Lieferumfang ist auch ein Layout-Injektor enthalten, mit dem Sie Layouts überall einfügen können!

Divi Pixel installieren

Laden Sie Divi Pixel hoch und aktivieren Sie es wie jedes andere Plugin. Gehen Sie zum WordPress-Dashboard und wählen Sie:

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

Als nächstes aktivieren Sie das Plugin. Divi Pixel ist jetzt einsatzbereit.

Divi-Pixel-Einstellungsbildschirm

Die Einstellungen finden Sie im Dashboard unter Divi > Divi Pixel . Sie umfassen 7 Registerkarten mit detaillierten Optionen.

Die Einstellungen fügen Funktionen über CSS-Klassen-IDs, zu aktivierende Optionen und dem Divi Builder hinzugefügte Module hinzu. Die neuesten Funktionen sind gekennzeichnet. Einige sind als „in Kürze verfügbar“ gekennzeichnet.

Wir werden uns auf jeder Registerkarte die neuesten Funktionen und einige interessante Funktionen ansehen. Wir werden viele der Einstellungen im Back- und Frontend sehen.

Registerkarte „Allgemein“ für Divi-Pixel

Die Registerkarte „Allgemein“ enthält 25 Einstellungen, darunter allgemeine Optionen, Kopf- und Navigationsoptionen sowie Fußzeilenoptionen.

Partikelhintergrund

Der Partikelhintergrund zeigt eine CSS-Klassen-ID an, die Sie dem Modul oder Abschnitt hinzufügen können, in dem Sie den Hintergrund anzeigen möchten. Es stehen zwei Klassen-IDs zur Auswahl, die Sie in den Customizer-Einstellungen anpassen können.

Ich habe die CSS-ID zum Abschnitt hinzugefügt.

Hier ist der Hintergrund mit aktivierten animierten Partikeln.

Wartungsmodus

Im Wartungsmodus wird Ihre Website so eingestellt, dass sie anzeigt, dass sie bald verfügbar ist oder Aktualisierungen durchführt. Wählen Sie eine beliebige Seite aus, die als Wartungsmodusseite angezeigt werden soll. Eine benutzerdefinierte URL ermöglicht den Zugriff auf die Website.

Hier ist die Seite, die ich für meine demnächst erscheinende Seite ausgewählt habe. Es wird jetzt diese Seite anstelle meiner Homepage angezeigt.

TTF-, OTF- und WOFF-Uploads zulassen

Wenn Sie dies aktivieren, können Sie mehr Dateitypen hochladen. Diese Dateitypen können jetzt genauso hochgeladen werden wie jede normale Datei in Ihrer Medienbibliothek.

Benutzerdefinierte Kopfzeilen- und Navigationsstile

Zu den benutzerdefinierten Kopfzeilen- und Navigationsstilen gehören Hover-Animationen, ein benutzerdefiniertes Menü-Dropdown, eine CTA-Schaltfläche, die Auswahl des Menüs, Schaltflächentext und -URL, CSS, einige mobile Einstellungen und mehr.

Hier ist der Header im Frontend. Es wurde eine CTA-Schaltfläche mit einer Hover-Animation hinzugefügt.

Fußzeilenanpassungen

Fußzeilenanpassungen fügen dem Theme-Customizer neue Funktionen hinzu.

Der Customizer fügt das Fußzeilenmenü, die untere Leiste und soziale Symbole hinzu. In diesem Beispiel habe ich das Menü und die untere Leiste angepasst. In diesem Bild können Sie auch die benutzerdefinierte Bildlaufleiste sehen, die separat hinzugefügt wird.

Divi Pixel Blog-Tab

Die Registerkarte „Blog“ fügt 9 Einstellungen und viele Optionen zur Themenanpassung hinzu.

Benutzerdefinierter Archivseitenstil

Die benutzerdefinierten Stile umfassen 6 Layouts. Wählen Sie aus einer einzelnen Spalte mit dem Bild oben, einer einzelnen Spalte mit dem Bild links, einer einzelnen Spalte abwechselnd, zwei Spalten mit dem Bild oben, drei Spalten mit dem Bild oben und abwechselnd mit kleineren Bildern. Sie können diese Layouts auch mit der CSS-Klasse auf das Divi-Blog-Modul anwenden.

Hier ist die Standardeinstellung. Es fügt allen Elementen Stil hinzu, einschließlich einer gestalteten Schaltfläche. Die Bilder sind breit. Hier wird auch eine weitere standardmäßig aktivierte Einstellung namens „ Symbole zu Metatext hinzufügen“ und die Schaltfläche „Weiterlesen“ angezeigt. Außerdem werden das Autorenfeld, die Beitragsnavigation und verwandte Beiträge hinzugefügt, die Sie in den Beiträgen selbst sehen.

Um das Layout zu ändern, klicken Sie einfach auf das gewünschte Layout und speichern Sie die Änderungen. Hier ist das 3-Spalten-Layout. Die Bilder sind groß. Ich bewege den Mauszeiger über das mittlere Bild im Beispiel unten, um die Überlagerung anzuzeigen.

Sie können den gesamten Stil mit dem Theme-Customizer anpassen. Es enthält Optionen für Kategorien, Archive, Schaltflächen, Seitenleiste, Beitragsnavigation, Autorenfeld, verwandte Artikel und Kommentare. Im folgenden Beispiel habe ich die Titelschriftart und die Auszugsschriftart angepasst. Dieses Beispiel zeigt auch die sozialen Symbole, die der Kopfzeile hinzugefügt wurden.

Ich habe die Schriftarten für die Navigation, das Autorenfeld und verwandte Beiträge angepasst. Sie können alle Elemente unabhängig voneinander anpassen. Für das Autorenfeld habe ich die Titelschriftart, die Textschriftart und das Bild angepasst.

Divi Pixel Social Media

Auf der Registerkarte „Social Media“ von Divi Pixel können Sie Social-Media-Symbole zur Kopfzeile hinzufügen. Wählen Sie aus, zu welchem ​​Teil der Kopfzeile die Symbole hinzugefügt werden sollen und welche sozialen Netzwerke hinzugefügt werden sollen.

Aktivieren Sie Divi Pixel Social Icons

Sie können die Anzeige der Social-Media-Symbole in der Kopfzeile aktivieren. Dazu gehören auch Optionen zur Steuerung der Funktionsweise per Klick, für mobile Geräte usw.

Die Symbole werden standardmäßig im sekundären Menü platziert.

Sie können sie auch im Theme-Customizer anpassen. Passen Sie das Symbol, den Hintergrund, den Hover, die Animation, die Form, die Größe usw. an. Ich habe die sozialen Symbole zum Hauptmenü hinzugefügt, die Größe der Symbole und die Hover-Einstellungen für die Symbol- und Hintergrundfarben angepasst.

Netzwerke

Wählen Sie aus 19 beliebten Netzwerken. Zeigen Sie sie an, indem Sie Ihre URL hinzufügen.

Divi Pixel Mobile-Tab

Die Registerkarte „Mobil“ enthält Haltepunkte, das Korrigieren des Mobil-Headers, das Ausblenden des Suchsymbols, das Ändern des Logos auf Mobilgeräten usw. Dadurch haben Sie viel Kontrolle über die Mobileinstellungen. Sie können jedes gewünschte Logo hochladen.

Mobiles Menü

Das mobile Menü fügt 9 Einstellungen hinzu, die Optionen für den Animationsstil der Menüs umfassen. Wählen Sie zwischen Schieberegler, Drücken, Drehen, Elastisch, Zusammenklappen, Stehen, Federn, Minus und Vortex. Klicken Sie einfach auf das gewünschte Symbol. Es zeigt eine Animation auf dem Einstellungsbildschirm, um Ihnen eine Vorstellung davon zu geben, wie es im Frontend funktionieren würde.

Sie können den gesamten Stil des Hamburger-Symbols im Theme-Customizer anpassen. Passen Sie die Farbe, die offene Farbe, die Hintergrundfarbe, die geöffnete Hintergrundfarbe, den Randradius, den Abstand usw. an. In diesem Beispiel werden ein anderes Logo, eine andere Hintergrundfarbe und ein anderes Dropdown-Menü als in der Desktop-Version verwendet.

Untermenüelemente auf Mobiltelefonen einklappen

Durch Auswahl von „Untermenüelemente auf Mobiltelefonen reduzieren“ wird eine weitere neue Option geöffnet: Link zum übergeordneten Menü entfernen. Dadurch wird verhindert, dass die übergeordneten Menülinks geöffnet werden.

Registerkarte „Divi-Pixelmodule“.

Die Registerkarte „Module“ fügt dem Divi Builder über 40 neue Module hinzu. Einige davon funktionieren mit den neuen Beitragstypen, die von Divi Pixel hinzugefügt werden und auf die im WordPress-Dashboard zugegriffen werden kann. Sie können sie alle ein- oder ausblenden oder die gewünschten Module aktivieren. Wir werden uns einige der Divi-Module ansehen.

Referenzen

„Testimonials“ fügt einen neuen Beitragstyp hinzu, in dem Sie die Testimonials erstellen können, die im Modul angezeigt werden sollen. Sie können sie im Editor erstellen oder von Facebook, Google und WooCommerce beziehen. Der Editor enthält Felder für Titel, Inhalt, Bild, Name, Unternehmen, Website und Bewertung.

Das Modul zeigt die Testimonials an und bietet viele Optionen, einschließlich der anzuzeigenden Anzahl, der ein- oder auszuschließenden Testimonials, der ein- oder auszublendenden Elemente, Popup-Einstellungen, Karusselleinstellungen, des Bewertungstyps und mehr. Alle Standard-Divi-Designoptionen sind ebenfalls vorhanden.

Popup-Maker

Der Popup-Maker verwendet den Divi Builder, um die Layouts zu erstellen. Der Editor umfasst außerdem Triggereinstellungen, Popup-Positionsoptionen und Anpassungsmöglichkeiten. Dies ist kein Modul, aber Sie können es in den Moduleinstellungen ein- oder ausblenden. Es wird jedem Element mit einer CSS-Klassen-ID hinzugefügt.

Mit den Triggereinstellungen können Sie die Triggerereignisse, Schließoptionen usw. auswählen.

Zu den Standortoptionen gehören die Benutzerrollen, der Site-Bereich und die Beiträge, die das Popup anzeigen können. Wählen Sie Beitragstypen, bestimmte Beiträge und Ausnahmen aus.

Mit den Anpassungsoptionen können Sie die Hintergrundfarbe des Overlays, die Popup-Animation, die Position, die Unschärfe und mehr auswählen.

FAQ zum Schema-Markup

Das FAQ-Modul von Divi Pixel basiert auf den Strukturierten Datenprinzipien von Google. Der FAQ-Builder verwendet den klassischen Editor. Sie können sie wie jeden anderen Inhalt im klassischen Editor erstellen und FAQ-Kategorien hinzufügen.

Sobald Sie die FAQs erstellt haben, können Sie sie mit dem FAQ-Modul anzeigen. Zeigen Sie alle FAQs an oder schließen Sie bestimmte FAQs aus, zeigen Sie sie nach Kategorien an, geben Sie strukturierte Daten und HTML aus usw. Gestalten Sie sie im Design-Tab.

Ballon

Das Ballonmodul erstellt einen Ballon, der als Menüelement ausgewählt wird. Fügen Sie beliebige Inhalte innerhalb der Sprechblase hinzu und gestalten Sie sie auf der Registerkarte „Design“.

Inhalt umschalten

Das Content Toggle-Modul ist interessant. Sie können zwei Layouts festlegen und einen Schalter bereitstellen, damit der Benutzer zwischen ihnen wechseln kann. Ich habe zwei Layouts angegeben. Das Bild unten zeigt das erste Layout.

Durch Klicken auf den Schalter wird zum zweiten Layout gewechselt, wie unten dargestellt.

Infokreis

Das Info Circle Modul ist eine interessante Möglichkeit, Informationen und Inhalte darzustellen. Damit können Sie Symbole oder Bilder um einen Kreis herum hinzufügen. Erstellen Sie so viele Informationssätze, wie Sie möchten, wählen Sie für jeden einzelne Symbole und Bilder aus und gestalten Sie sie gemeinsam oder unabhängig voneinander.

Registerkarte „Divi Pixel Layout Injector“.

Mit dem Layout-Injektor können Sie ein Divi-Layout auswählen und es an bestimmten Stellen auf der Website platzieren. Platzieren Sie das Layout vor und nach der Navigation, der Fußzeile und nach der Blog- und Archivkopfzeile. Es kann auch eine 404-Seite erstellt werden.

Divi-Pixel-Ergänzungsdateien

Divi Pixel enthält außerdem viele Demos, die Sie importieren können, um Ihren Layouts einen Vorsprung zu verschaffen.

Wo kann man Divi Pixel kaufen?

Divi Pixel ist im Divi Marketplace für 169 US-Dollar erhältlich. Es beinhaltet unbegrenzte Website-Nutzung, eine 30-tägige Geld-zurück-Garantie sowie 1 Jahr Support und Updates.

Schlussgedanken

Das ist unser Blick auf Divi Pixel. Dieses Plugin enthält viele Funktionen und Module. Ich habe in diesem Beitrag nur an der Oberfläche gekratzt. Wenn Sie Ihre Möglichkeiten mit Divi erweitern möchten, ist Divi Pixel ein guter Ausgangspunkt.

Wir wollen von dir hören. Haben Sie Divi Pixel ausprobiert? Teilen Sie uns in den Kommentaren mit, was Sie davon halten.