Divi-Plugin-Highlight: Divi-Upload-Symbole

Divi Upload Icons ist ein Drittanbieter-Plugin für Divi, das es einfach macht, dem Divi Builder weitere Icons hinzuzufügen. Im Gegensatz zu anderen Icon-Plugins, die nur Font Awesome und Material Icons integrieren, können Sie mit diesem jeden beliebigen Satz von Icons hinzufügen. Es muss nur ein kompatibler Dateityp sein und zufällig werden die fünf beliebtesten Dateitypen verwendet.

Das Plugin fügt Ihrer WordPress-Installation einen Uploader hinzu, in den Sie Ihre Symboldateien ziehen und ablegen. Die Symbole werden dann zu jedem Divi-Modul hinzugefügt, das Symbole anzeigt. Genau wie die Standard-Divi-Symbole kann jedes von Ihnen hochgeladene Symbolset mit dem Divi Builder gestaltet werden. In diesem Divi-Plugin-Highlight werfen wir einen Blick auf die Divi-Upload-Symbole und sehen, wie einfach es zu verwenden ist.

Installieren und Aktivieren von Divi Upload-Symbolen

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Gehen Sie dann im Dashboard-Menü zu Einstellungen > Divi-Upload-Symbole , um Ihren Aktivierungsschlüssel einzugeben.

Hochladen von Icons mit Divi Upload Icons

Auch im Einstellungsbildschirm ist die Upload-Funktion. Hier laden Sie Ihre Symbole hoch. Die Symbole müssen in den Formaten .eot, .svg, .ttf, .woff, .woff2 und .css vorliegen. Sie können Icons aus jeder beliebigen Quelle herunterladen und mit Divi Upload Icons verwenden, solange sie in diesen Formaten vorliegen und die CSS-Datei enthalten. Um die Icons zu installieren, ziehen Sie sie per Drag & Drop in das Upload-Fenster. Die Anweisungen finden Sie im Upload-Bereich und es gibt ein kurzes Video, das die Verwendung demonstriert.

Symbole enthalten manchmal mehrere Formate. Sie müssen die CSS-Dateien zusammen mit den Symbolen hochladen, und die Symbole müssen eine unterstützte Datei sein. In diesem Beispiel lade ich mehrere Sets hoch. Sie umfassen mehrere Dateitypen und CSS-Dateien. Die Dateien im obigen Bild mit den orangefarbenen Symbolen haben fehlende Dateien.

Die Dateien in diesem Beispiel sind korrekt. Ich habe unterstützte Dateitypen mit ihren CSS-Dateien hochgeladen. Ich habe jetzt über 2500 neue Icons. Ich habe sie von iconfont, Dripicons, Foundation Icon Fonts und Map Icons heruntergeladen. Der Entwickler verwaltet eine Liste von Symbolen, die getestet wurden und die Sie mit Divi Upload-Symbolen verwenden können. Natürlich gibt es noch viele weitere Symbole, die Sie verwenden können.

Zum Vergleich hier das Divi Klappenmodul, bevor ich die neuen Icons hochgeladen habe. Divi enthält 360 Symbole. Sie können eine Vorstellung davon bekommen, wie viele das sind, indem Sie sich die Länge des Balkens im Fenster ansehen.

Dieses Bild enthält alle 2500 Symbole, die ich hochgeladen habe. Ich habe jetzt viel mehr Icons zur Auswahl und die Leiste für das Fenster ist viel kleiner. Sie können die Symbole im Visual Builder sehen, aber es enthält nicht die neuen Filter- und Suchtools.

Divi Upload Icons Filter und Suche

Ein neues Filterwerkzeug wird hinzugefügt, wenn Sie den klassischen Builder verwenden. Sie können den Filter öffnen oder schließen. In diesem Beispiel ist es geschlossen.

Klicken Sie auf Symbole filtern , um die installierten Symbolfamilien und eine Suchfunktion anzuzeigen. Klicken Sie auf eine der Symbolfamilien, um nur diese Familie anzuzeigen. Sie können auch alle Familien anzeigen oder die Filter- und Suchoption schließen. Der Filter arbeitet schnell. Wenn Sie auf eine Symbolfamilie klicken oder nach Symbolen suchen, werden die Symbole fast sofort angezeigt, selbst bei meinen 2500 Symbolen. Ich bin mir sicher, dass dies teilweise davon abhängt, wie viele Symbole Sie installiert haben, daher können Ihre Erfahrungen anders sein.

In diesem Beispiel habe ich die Map Icons ausgewählt , dass ich hochgeladen. Es gibt fast 200 Symbole in dieser Symbolfamilie.

Hier sind die Stiftungssymbole . Es hat auch fast 200 Symbole.

Hier sind die Iconfonts . Diese Symbolfamilie fügt über 2000 Symbole hinzu.

Sie können nach Schlüsselwörtern oder nach dem Familiennamen des Symbols suchen. Die Ergebnisse umfassen Symbole aus allen Symbolfamilien, die Sie hochgeladen haben und die bereits in Divi verfügbar waren.

Es wäre interessant, wenn der Filter nach der Suche funktionieren würde, um die Ergebnisse nach Symbolfamilie anzuzeigen. Es zeigt Ihnen den Namen mit der Symbolfamilie, wenn Sie mit der Maus über jedes Symbol fahren. Im obigen Bild bewege ich den Mauszeiger über das zweite Symbol von rechts. Dies ist hilfreich genug, sodass der Suchfilter nicht wirklich eine hohe Priorität hat.

Beispiele für Divi-Upload-Icons

Einer der Vorteile der Verwendung von Symbolen ist natürlich die Möglichkeit, mit dem Divi Builder Größen und Farben anzupassen, Kreise, Rahmen usw. hinzuzufügen. Das Plugin und die Symbole funktionieren mit dem Visual Builder, aber die Symbole werden nicht in der Live-Ansicht angezeigt. Dieses Beispiel zeigt die Symbole in der Symbolauswahl des Moduls, aber die Live-Vorschau funktioniert nicht.

Die Symbole werden auf der veröffentlichten Seite oder im Beitrag angezeigt. Sie können den Visual Builder weiterhin verwenden, um die Größe und Farben anzupassen, Sie werden sie nur in der Live-Vorschau nicht sehen. Ich bevorzuge den Visual Builder, wenn ich Farben und Größen anpasse, aber für die restlichen Beispiele verwende ich den Classic Builder. Dies ist die Zielseite aus dem Hypotheken-Layout-Paket.

Die Icons sehen toll aus und können wie Standard-Divi-Icons angepasst werden. Ich habe all diese Symbole über die Suchfunktion gefunden. Dies sind die Standardeinstellungen.

Ich habe die Farben so geändert, dass sie dem Layout entsprechen, genau wie die Originalbilder, die das Layout verwendet hat.

Für dieses habe ich die Schriftgröße für das Symbol ausgewählt und auf 32px angepasst. Es fängt an, dem ursprünglichen Design ähnlicher zu sein, aber mit meinen Symbolen.

In diesem habe ich jedem Symbol einen Kreis hinzugefügt. Ich habe die Farben der Kreise und Symbole geändert und den zweiten und vierten von links einen Rahmen hinzugefügt. Ich habe verschiedene Farben gewählt, um zu zeigen, wie sie aussehen.

So sehen die Symbole links neben dem Text aus.

In diesem habe ich die Bilder im Golfplatz-Layout durch Symbole ersetzt. Ich habe Farben aus dem Layout verwendet und sie auf 48px skaliert.

Für dieses Beispiel habe ich die Anpassung der Schriftgröße für die Symbole deaktiviert. Dies ist die Standardgröße von 96px. Sie fügen sich gut in das Design des Layouts ein.

Sie sehen auch toll aus, wenn Sie die Einstellungen für das Kreissymbol verwenden. Ich habe die Symbolfarbe in Weiß geändert und die Bräune aus dem Layout als Farbe des Kreises verwendet. Die Icons sind immer noch bei 48px.

Für dieses habe ich einen der Grüntöne aus dem Layout verwendet. Es gibt viele Möglichkeiten mit den Anpassungen des Divi Builders.

Divi Upload Icons Preis

Divi-Upload-Icons kostet 24,97 $. Es hat unbegrenzte Nutzung und Updates. Sie können Divi Upload Icons auf dem Marktplatz kaufen.

Gedanken beenden

Divi Upload Icons macht es einfach, genau die gewünschten Symbole aus jeder Schriftartenbibliothek hochzuladen. Die Idee hinter dem Plugin ist, anstatt Tausende von Symbolen zu installieren, die Sie nicht benötigen, können Sie genau die Symbole und Symbolfamilien installieren, die Sie mit Ihrer Divi-Website verwenden möchten.

Da Sie die Symbole in den Divi Builder hochladen, werden sie auf Ihrem Server gespeichert. Ich habe über 2500 Icons hochgeladen und hatte keine Geschwindigkeitsprobleme mit dem Divi Builder oder meiner Website.

Beachten Sie, dass Schriftarten mit der Schriftartdatei und der CSS-Datei erforderlich sind. Es ist leicht, die Schriftarten falsch hochzuladen (raten Sie, woher ich das weiß). Stellen Sie sicher, dass Sie die Anweisungen genau befolgen, oder die Schriftarten sind leere Quadrate. Außerdem funktioniert es nicht mit Font Awesome 5, aber es funktioniert großartig mit 4.7.

Ich mochte es, Divi Upload Icons zu verwenden. Ich würde es gerne mit dem Visual Builder verwenden, aber es funktioniert hervorragend mit dem klassischen Builder. Es brauchte einen zusätzlichen Versuch, um sicherzustellen, dass ich die richtigen Dateien hatte, aber wenn man bedenkt, wie viele Symbolfamilien es im Internet gibt, lohnt es sich, sich die Zeit zu nehmen, um Symbole mit den richtigen Dateien zu finden. Icons sind nicht schwer zu finden und der Entwickler stellt viele Links zu Icons bereit, die er bereits getestet hat.

Wenn Sie daran interessiert sind, dem Divi Builder eigene Symbole hinzuzufügen, ist Divi Upload Icons einen Blick wert.

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

Ausgewähltes Bild über hanss / shutterstock.com