Divi-Plugin-Highlight: WP- und Divi-Symbole

WP and Divi Icons ist ein Drittanbieter-Plugin für WordPress, das mit jedem WordPress-Theme funktioniert und sich in den Divi Builder integriert. Zur Verwendung mit Divi enthält es exklusive Layouts, die Sie in Ihren Projekten verwenden können. Die Symbole sind im WordPress-Editor und in jedem Divi-Modul verfügbar, in dem Sie Symbole auswählen können. In diesem Artikel werfen wir einen Blick auf WP und Divi Icons und sehen, was es von der Masse abhebt.

WP and Divi Icons fügt WordPress über 2500 Icons hinzu. Es enthält Font Awesome Icons, Material Icons und 450 benutzerdefinierte Icons, darunter 48 mehrfarbige Icons. Es ist sowohl in einer kostenlosen als auch in einer Pro-Edition erhältlich. Ich teste die Pro-Edition.

Installieren von WP- und Divi-Symbolen

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Ich verwende Version 1.1.0 mit Divi Version 3.17 und WordPress 4.9.8.

Als nächstes müssen Sie Ihre Lizenz aktivieren. Sie können zum Aktivierungsbildschirm navigieren oder auf die Nachricht klicken, die oben auf dem Bildschirm angezeigt wird. Es ist jedoch immer noch hilfreich zu wissen, wie Sie dorthin navigieren, da diese Seite zum Optionsbildschirm wird, sobald Sie Ihren Lizenzschlüssel eingeben.

Um unabhängig vom verwendeten Theme zum Bildschirm zu gelangen, klicken Sie auf den Link Anleitung in der Beschreibung des Plugins in der Plugin-Liste. Wenn Sie Divi verwenden, wird dem Divi-Menü im Dashboard ein neuer Menüpunkt namens WP and Divi Icons hinzugefügt. Klicken Sie darauf und geben Sie Ihren Lizenzschlüssel ein.

Anpassen der mehrfarbigen Symbole

Nach der Eingabe Ihres Lizenzschlüssels wird der Bildschirm mit den Anweisungen, einer Liste mit 48 mehrfarbigen Symbolen und Tools zum Erstellen Ihrer eigenen Farbschemas für diese Symbole geöffnet.

Sie haben die Kontrolle über drei Farben. Passen Sie die Farbregler an und warten Sie einige Sekunden, um die Ergebnisse zu sehen. Durch Klicken auf Entfernen wird das Farbschema gelöscht. Die Farben fügen einen kleinen Schattierungseffekt hinzu, der dunklere Versionen jeder Farbe erzeugt und fantastisch aussieht.

Wenn Sie auf Farbschema hinzufügen klicken, wird ein neuer Satz mehrfarbiger Symbole erstellt, die Sie anpassen können.

Fügen Sie so viele Farbschemata hinzu, wie Sie möchten. Dies erweitert die Möglichkeiten mit Symbolen erheblich. Die Steuerung ist intuitiv. Wie sich herausstellte, fand ich das ein bisschen süchtig.

Verwenden von WP- und Divi-Symbolen in WordPress mit jedem Theme

Um die Symbole mit einem beliebigen Thema zu verwenden, wählen Sie das neue Symbol aus, das dem WordPress-Editor hinzugefügt wird.

Dies öffnet den Editor, in dem Sie ein Symbol auswählen, die Farbe bearbeiten können, indem Sie sie in das Farbfeld eingeben oder den Farbwähler verwenden, die Größe ändern, indem Sie die Zahl in Pixeln eingeben oder den Schieberegler verwenden, einen Titel hinzufügen und eine Klasse hinzufügen. Sie können auch nach Symbolen suchen.

Alle Änderungen, die Sie vornehmen, werden live angezeigt. In diesem Beispiel habe ich die gewünschte Farbe eingegeben, die Größe auf 106 Pixel geändert und den Namen in Green Leaf geändert.

Wenn Sie auf OK klicken, wird das Symbol zu Ihrem Inhalt hinzugefügt.

Doppelklicken Sie auf das Symbol, um den Editor zu öffnen und Änderungen vorzunehmen.

Klicken Sie auf OK und die Änderungen werden auf das Symbol in Ihren Inhalten übertragen.

Dieser Editor bearbeitet die mehrfarbigen Symbole nicht. Sie müssen diese im Haupteinstellungsbildschirm bearbeiten, den ich oben gezeigt habe. Sie können sie weiterhin in diesem Editor auswählen, ihre Größe ändern, einen Titel hinzufügen, eine Klasse hinzufügen und sie von hier aus in Ihren Inhalt einfügen.

Die Icons sehen im Inhalt toll aus.

Verwenden von WP- und Divi-Symbolen mit dem Divi Builder

Dem Divi Builder werden viele neue Symbole hinzugefügt, auf die von jedem Modul aus zugegriffen werden kann, mit dem Sie Symbole auswählen können. Eine neue Suchfunktion wurde hinzugefügt und die Symbole sind viel größer, wodurch sie leichter zu sehen sind (was zeigt, dass dieses Plugin wahrscheinlich von einem alten Mann wie mir entwickelt wurde. Ich kann diese Funktion sowohl nachvollziehen als auch schätzen).

Ich würde gerne einen Filter hinzugefügt sehen, damit ich zwischen Font Awesome, Material oder den benutzerdefinierten Symbolen wählen kann. Auf diese Weise konnte ich die benutzerdefinierten Symbole leicht sehen und die Symbole für Font Awesome und Material ignorieren, wenn ich etwas anderes als alle anderen wollte, oder nur mit Font Awesome oder Material Icons erstellen oder meine Symbole selektiv mischen.

Es enthält sowohl ein- als auch mehrfarbige Symbole.

Suchen und ändern Sie Symbole live aus dem Frontend.

Sie sind wie jedes Divi-Symbol einstellbar.

Sie können auch mehrfarbige Symbole aus dem Frontend-Builder hinzufügen. Sie können die Farben des Symbols hier nicht anpassen (das geschieht im Editor für mehrfarbige Symbole), aber Sie können einen Kreis hinzufügen, einen Rahmen hinzufügen, die Farben anpassen und die Größe des Symbols in den Einstellungen des Moduls anpassen.

In diesem Beispiel habe ich einen Kreis mit einem Rahmen hinzugefügt.

Sie können sie sowohl vom Frontend als auch vom Backend aus verwenden.

Der WordPress-Icon-Editor ist auch im Divi-Textmodul verfügbar. Dieser Editor funktioniert genauso wie bei jedem WordPress-Theme.

WP- und Divi-Icon-Layouts

Das Plugin funktioniert mit jedem Theme, hat aber spezielle Funktionen nur für Divi. Einer der größten Vorteile bei der Verwendung mit Divi sind die exklusiven benutzerdefinierten Layouts. Sie wurden mit WP- und Divi-Symbolen individuell gestaltet und der Download-Link ist nur innerhalb des Plugins verfügbar. Sie stehen jedem mit dem Plugin zum Download zur Verfügung und können in jedem Projekt verwendet werden. Sie sind vollständige Layouts mit vielen gestylten Modulen.

Es sind bereits mehrere verfügbar und weitere sind in Vorbereitung. Hier ist ein Blick auf jeden einzelnen mit Schwerpunkt auf der Verwendung der Symbole. Sie können sie auf der Demoseite des Entwicklers sehen.

E-Commerce-Layout

Dieses Layout enthält eine gestylte Kopfzeile mit Blasen, um die Arten von Zahlungsgateways und Versandpartnern anzuzeigen, die das Unternehmen verwendet. Mehrfarbige Icons zeigen die angebotenen Dienste an. Wie es funktioniert, wird in Registerkarten angezeigt. Es enthält auch Preistabellen, Erfahrungsberichte, die Newsletter-Anmeldung von FAQ und eine Fußzeile.

Kreativagentur-Layout

Dieser enthält eine gestylte Kopfzeile, einen Bereich über die Arten von Dienstleistungen, die Sie anbieten, ein Portfolio, einen Schieberegler, der Ihre Arbeitsweise und Ihre Schritte beschreibt, Erfahrungsberichte, Auszeichnungen, über Ihr Team, Ihren Kontakt und eine Fußzeile. Es verwendet viele abgewinkelte Ecken und tiefe Schatteneffekte. Die mehrfarbigen Icons zeigen die Dienste an.

Geschäftslayout dunkel

Dieser hat eine zweispaltige Kopfzeile mit einem Bild auf der einen Seite und Text auf der anderen. Ein Abschnitt mit den von Ihnen angebotenen Diensten verwendet mehrfarbige Symbole und zeigt abwechselnd Bilder und Text auf der Seite an. Andere Abschnitte verwenden großen Hintergrundtext und zeigen die Geschichte des Unternehmens, die Teammitglieder mit mehrfarbigen Symbolen im Overlay, Kontaktformular, Kontaktinformationen und Fußzeile.

Business-Layout-Licht

Dies ist das gleiche Layout wie Business Layout Dark, jedoch mit hellen Farben.

Gemeinnütziges Layout

Dieser zeigt einen Vollbild-Bild-Slider mit einem vertikalen Menü auf der rechten Seite an und verwendet Symbole für Social-Follow-Buttons. Ein schmaler Abschnitt darunter zeigt einen Spenden-CTA. Es enthält auch einen Abschnitt mit Informationen, Anliegen, die Sie unterstützen, einen Abschnitt mit Veranstaltungen, Projekte, Klappentexte mit Symbolen, Sponsoren und eine Fußzeile.

Lizenz und Dokumentation

Die Preise reichen von kostenlos für eine limitierte Edition, $39 für eine einzelne Site, $59 für 3 Sites und $79 für unbegrenzte Sites. Sie können das Plugin auf der Website des Entwicklers kaufen.

Es beinhaltet Premium-Support und 3 Jahre Updates. Die Dokumentation wird auf der Website des Entwicklers bereitgestellt.

Gedanken beenden

WP und Divi Icons ist einfach zu bedienen. Es dauert ein paar Sekunden länger, die Symbole zu laden, wenn ich sie in den Divi-Modulen anklicke. Ich bin mir sicher, dass dies hauptsächlich an meiner langsamen Internetverbindung für das Willkommen auf dem Land liegt. Ich möchte, dass den Divi-Modulen ein Filter hinzugefügt wird. Die Suchfunktion ist hilfreich, um Symbole anhand von Schlüsselwörtern zu finden.

Ich mag, dass es Font Awesome und Material Icons hinzufügt, aber meine Favoriten sind die benutzerdefinierten Icons - und insbesondere die mehrfarbigen Icons. Der Editor macht einfach Spaß. Ich finde es auch ohne Divi ein tolles Plugin, aber mit Divi ist es wegen der freien Layouts noch besser.

Wir wollen von dir hören. Hast du WP und Divi Icons ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über VectorsMarket / shutterstock.com