Hinzufügen von Symbolen im Gutenberg-Editor ohne zusätzliche Plugins

Last Updated on 11/10/2021 by MTE Leben

Beim Besuch von Websites trifft man oft auf Icons, die aus dem Webdesign nicht mehr wegzudenken sind. Darüber hinaus haben Sie im Alltag immer wieder damit zu tun auf Verkehrsschildern, Produktverpackungen, Bannern usw. Symbole helfen uns, die Informationen besser zu verstehen und Platz zu sparen, indem Wörter durch Bilder ersetzt werden. Wenn Sie sie mit Ihren Inhalten verwenden, verbessern Sie die Lesbarkeit und Verständlichkeit.

Im neuen WordPress-Editor gibt es keine benutzerdefinierten Blöcke zum Hinzufügen von Symbolen oder Symbollisten. Es gibt jedoch noch eine weitere Möglichkeit, sie hinzuzufügen, ohne zusätzliche Plugins zu installieren. In diesem Tutorial fügen wir die Symbole mithilfe des SVG-Codes hinzu.

Es gibt einige Schritte, die Sie befolgen müssen, um Symbole in Gutenberg einfach hinzuzufügen:

• Wählen Sie das benötigte Symbol

Finden Sie das Portal mit Symbolen, die Sie nehmen können. Im Web gibt es genügend ähnliche Seiten zur Auswahl. Wir verwenden Icons von iconify.design. Also zuerst, was wir tun, gehen Sie zu ihrer Website. Um mit der Suche nach Symbolen zu beginnen, klicken Sie oben rechts auf „Symbole durchsuchen“. Geben Sie dann den Symbolnamen in das Suchfeld ein oder wählen Sie aus der Liste unten.

• SVG finden

Wählen Sie das richtige aus und klicken Sie gegenüber dem ausgewählten Symbol auf die Registerkarte SVG, um einen Code zu erhalten. Kopieren Sie es, um fortzufahren.

• SVG in URL umwandeln

Da Gutenberg das Einfügen von Bildern nur aus URL-Codes erlaubt, sollten Sie den SVG-Code in URL umwandeln. Finden Sie die bequemste Seite für diesen Zweck.

Geben Sie die Site ein und geben Sie den SVG-Code in das speziell vorbereitete Feld ein. Nach dem Einfügen des Codes in „Insert your SVG“ erscheinen auch die Codes in anderen Fenstern. Die benötigte URL befindet sich im Feld „Ready for CSS“. Kopieren Sie es ohne Klammern, wie wir im Screenshot zeigen.

• Holen Sie sich Ihr Gutenberg-Symbol

Öffnen Sie den Editor und suchen Sie den Beitrag oder die Seite, auf der Sie das Symbol einfügen müssen. Sie müssen einen Bildblock hinzufügen und auf “Von URL einfügen” klicken. Geben Sie den kopierten Code in dieses Feld ein und drücken Sie “Enter”.

• Icon-Listen erstellen

Nachdem wir nun gelernt haben, wie man Icons in den Gutenberg-Editor einfügt, können wir auf die gleiche Weise auch kompliziertere Blöcke mit Icons füllen. Sehen wir uns an, wie Sie eine Symbolliste mit Spaltenblock erstellen.

Tippen Sie auf die Schaltfläche “+” und suchen Sie den Spaltenblock. Drücken Sie in diesem Block “+” in der erforderlichen Spalte, Sie möchten einen Bildblock hinzufügen, um Ihr Symbol einzufügen. Wiederholen Sie alle Aktionen, die wir in den vorherigen Schritten ausgeführt haben.

Sobald Sie das Gutenberg-Symbol hinzugefügt haben, sehen Sie in der rechten Seitenleiste die Blockeinstellungen. Beheben Sie sie, um das erwartete Ergebnis zu erzielen. Sie können die Größe, den Stil usw. ändern.

Um die Schaltfläche in die Spalte einzufügen, klicken Sie auf die Schaltfläche „+“ unter Ihrem Symbol und suchen Sie nach dem Schaltflächenblock. Schreiben Sie den erforderlichen Text und fügen Sie einen Link hinzu, um Benutzer auf die gewünschte Site umzuleiten.

Hier sind einige Tipps zum Hinzufügen von Gutenberg-Symbolen in WordPress ohne Plugins. Beachten Sie, dass Sie in jedem Block Symbole hinzufügen können, in denen Sie die Bilder hinzufügen können. Wenn Sie jedoch alles in wenigen Schritten bearbeiten und die Seite funktionaler gestalten möchten, können Sie ein Zeguten-Plugin überprüfen, das aus mehreren Blöcken besteht.

Folgen Sie unserem Tutorial, um mithilfe von Symbolen großartige visuelle Inhalte zu erstellen und die Lesbarkeit und das Webdesign Ihrer Seiten zu verbessern.