So fügen Sie Feature-Boxen mit Icons in WordPress hinzu

Die meisten Besucher überfliegen eine Seite, bevor sie entscheiden, ob sie sie lesen. Wenn Ihre wichtigsten Vorteile in Textabsätzen vergraben sind, werden viele Leute gehen, ohne sie jemals zu sehen.

Funktionsfelder lösen dieses Problem, indem sie jeden Vorteil mit einem kleinen Symbol und einer kurzen Beschreibung kombinieren, sodass Besucher auf einen Blick verstehen, was Sie anbieten. Sie können auch jedem Feld eine Call-to-Action-Schaltfläche hinzufügen, um Leser zu weiteren Details zu leiten.

In diesem Leitfaden zeigen wir Ihnen, wie Sie Funktionsfelder mit Symbolen in WordPress mit dem integrierten Block-Editor oder einem Seitenersteller-Plugin hinzufügen.

Welche Methode sollten Sie zum Hinzufügen von Funktionsfeldern verwenden?

Wenn Sie ein oder zwei Funktionsbereiche zu einer vorhandenen Seite oder einem Beitrag hinzufügen, verwenden Sie die Methode des Block-Editors. Sie ist kostenlos, in WordPress 7.0 und höher integriert und erfordert kein weiteres Plugin.

Wenn Sie eine vollständige Landingpage von Grund auf neu gestalten, ist ein Seitenersteller die bessere Wahl. Sie erhalten vorgefertigte Vorlagen und mehr Styling-Optionen für jedes Symbol.

Sie können die folgenden Schnelllinks verwenden, um direkt zu der gewünschten Methode zu springen:

Methode 1: Feature-Boxen mit Icons über den Block-Editor hinzufügen (kostenlos)

Der WordPress Block-Editor erstellt Seiten aus Blöcken, die einzelne Inhaltsteile wie ein Absatz, ein Bild oder eine Schaltfläche sind.

WordPress 7.0 fügte einen integrierten Icon-Block hinzu, mit dem Sie SVG-Symbole ohne Plugin einfügen können. SVG ist ein Bildformat, das aus Code besteht, sodass Symbole bei jeder Größe scharf bleiben und schnell geladen werden.

Wenn Sie eine ältere Version von WordPress verwenden, finden Sie den Icon-Block nicht im Editor. Sie müssen WordPress aktualisieren, bevor Sie diese Methode anwenden.

Schritt 1: Spalten-Block hinzufügen

Beginnen Sie mit dem Hinzufügen eines Spaltenblocks. Öffnen Sie zuerst die Seite, auf der Sie Ihre Funktionsfelder hinzufügen möchten. Klicken Sie dann auf das Symbol + Block hinzufügen, suchen Sie nach Spalten und klicken Sie auf den Block Spalten, um ihn hinzuzufügen.

WordPress zeigt Ihnen verschiedene Spaltenlayouts. Die Zahlen geben an, wie viel Breite jede Spalte einnimmt. Zum Beispiel erstellt 50 / 50 zwei Spalten gleicher Breite.

Wir wählen 33 / 33 / 33, um drei gleiche Spalten zu erstellen, aber Sie können jedes Layout wählen, das für Ihren Inhalt funktioniert.

Schritt 2: Icons zu Ihren Feature-Boxen hinzufügen

Klicken Sie als Nächstes auf die Schaltfläche + in der Spalte und suchen Sie nach Symbol. Wenn der Icon-Block erscheint, klicken Sie darauf, um ihn hinzuzufügen.

WordPress fügt automatisch ein Info-Symbol zur Spalte hinzu. Klicken Sie auf die Schaltfläche „Ersetzen“, um ein anderes Symbol auszuwählen.

Dies öffnet die Symbolbibliothek. Sie können einen Namen wie Foto oder Geschäft in die Suchleiste eingeben oder durch die verfügbaren Symbole scrollen.

Wenn Sie das gewünschte Symbol gefunden haben, klicken Sie darauf, um es Ihrer Spalte hinzuzufügen.

Sie können das Symbol dann mit den Blockeinstellungen anpassen. Abhängig von Ihrem Theme und Ihrer Einrichtung können Sie die Symbolfarbe, Hintergrundfarbe, Abmessungen und den Rahmen ändern. Sie können auch die Symbolleiste verwenden, um das Symbol zu zentrieren.

Schritt 3: Text zu Ihren Feature-Boxen hinzufügen

Sobald Ihre Symbole platziert sind, klicken Sie auf die Schaltfläche + unter dem Symbol in der ersten Spalte und fügen Sie einen Überschriftenblock für den Funktionsnamen hinzu.

Fügen Sie dann einen Absatzblock darunter hinzu und fügen Sie eine kurze Beschreibung der Funktion ein. Ein oder zwei Sätze reichen normalerweise aus.

Wiederholen Sie den gleichen Vorgang für die anderen Spalten.

Schritt 4: Erstellen Sie weitere Zeilen mit Funktionsfeldern (optional)

Wenn Sie mehr als eine Zeile mit Funktionsfeldern hinzufügen möchten, wählen Sie den Spaltenblock aus und klicken Sie in der Symbolleiste auf das Drei-Punkte-Menü. Wählen Sie dann Duplizieren.

Dadurch wird eine Kopie der gesamten Zeile erstellt. Sie können dann die Symbole und den Text mit den gleichen Schritten wie oben durch neue Inhalte ersetzen.

Schritt 5: Veröffentlichen Sie Ihre Funktionsfelder mit Symbolen

Wenn Sie mit Ihren Funktionsfeldern zufrieden sind, klicken Sie auf die Schaltfläche Speichern oder Veröffentlichen, um sie live zu schalten.

Sie können dann Ihre Website besuchen, um die Funktionsfelder in Aktion zu sehen:

Methode 2: Feature-Boxen mit Icons über einen Seitenersteller hinzufügen

Der Block-Editor eignet sich gut, wenn Sie einer vorhandenen Seite einen Funktionsbereich hinzufügen möchten. Wenn Sie jedoch eine vollständige Landingpage gestalten und mehr Kontrolle über Layout und Styling wünschen, bietet Ihnen ein Drag-and-Drop-Seitenersteller mehr Flexibilität.

Wir verwenden SeedProd für diese Methode, da wir es auf unseren eigenen Websites verwenden. Die meisten Drag-and-Drop-Seitenersteller wie Elementor bieten ein Icon-Box-Element und eine integrierte Icon-Bibliothek. Weitere Informationen finden Sie in unserem SeedProd-Testbericht.

Schritt 1: Installieren und Einrichten des Seitenerstellers

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Nachdem Sie das Plugin aktiviert haben, gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein. Sie finden Ihren Schlüssel, indem Sie sich bei Ihrem SeedProd-Konto anmelden.

Schritt 2: Wählen Sie eine Landingpage-Vorlage

Gehen Sie dann zu SeedProd » Landing Pages und klicken Sie auf „+ Neue Landing Page hinzufügen“.

Geben Sie dann einen Namen für Ihre Seite ein. SeedProd verwendet diesen Namen auch, um die Seiten-URL zu erstellen, aber Sie können die URL bei Bedarf bearbeiten.

Auf dem nächsten Bildschirm wählen Sie eine Vorlage aus. Jede Vorlage kann per Drag & Drop angepasst werden, aber die Auswahl einer Vorlage, die Ihrem Ziel entspricht, kann Ihnen einige Zeit sparen.

Für diese Anleitung verwenden wir die leere Vorlage. Fahren Sie mit der Maus darüber und klicken Sie auf das Häkchensymbol, um sie auszuwählen.

Klicken Sie dann auf „Speichern und mit der Bearbeitung der Seite beginnen“.

Schritt 3: Erstellen Sie Ihre Funktionsfelder mit Symbolen

Da wir mit einer leeren Vorlage beginnen, besteht der erste Schritt darin, ein Layout auszuwählen. Wählen wir hier das Layout mit einer Spalte, um den Kopfbereich über Ihren Funktionsfeldern zu gestalten.

Sie können dann den Überschriftenblock aus dem linken Menü in die Seite ziehen. Wählen Sie den Block aus, um seinen Text zu bearbeiten und seine Formatierung mit den Optionen im linken Bereich anzupassen.

Wiederholen Sie den Vorgang mit dem Textblock.

Sie können den Header auch anpassen, indem Sie ein Hintergrundbild hinzufügen oder seine Formatierung ändern. Für weitere Optionen klicken Sie auf die Registerkarte „Erweitert“, um Abstände anzupassen, einen Rahmen hinzuzufügen, Animationseffekte hinzuzufügen und mehr.

Sobald Sie mit dem Header fertig sind, können Sie die Funktionsfelder erstellen. Ziehen Sie den Spaltenblock aus dem linken Bereich in den Editor und platzieren Sie ihn direkt unter dem Header-Bereich.

Danach können Sie ein Layout auswählen. In diesem Beispiel verwenden wir die Option mit drei gleichen Spalten.

Ziehen Sie dann den Icon Box-Block aus dem linken Menü in die erste Spalte.

Der Block enthält ein Standard-Symbol, eine Überschrift und Beispieltext, die Sie anpassen können.

Um das Symbol zu ändern, suchen Sie den Abschnitt Symbol/Bild im linken Bedienfeld. Fahren Sie dann mit der Maus über das aktuelle Symbol und klicken Sie auf die Schaltfläche, um es zu ersetzen.

Dies öffnet die Symbolbibliothek. Sie können nach einem bestimmten Symbol suchen oder die verfügbaren Optionen durchsuchen. Wenn Sie eines gefunden haben, das Ihnen gefällt, klicken Sie darauf, um es Ihrer Feature-Box hinzuzufügen.

Sobald Sie ein Symbol ausgewählt haben, klicken Sie darauf, um seine Einstellungen im linken Menü zu öffnen. Hier können Sie die Ausrichtung, Größe und Farbe ändern.

Schritt 4: Passen Sie den Inhalt Ihrer Funktionsfelder an

Wählen Sie als Nächstes den Text in Ihrer Icon Box aus, um seine Einstellungen im linken Menü zu öffnen.

Sie können die Beispielüberschrift und -beschreibung durch Ihren eigenen Feature-Text ersetzen. Sie können auch Links hinzufügen oder die Textausrichtung und -farbe ändern.

Wiederholen Sie diese Schritte für die anderen Spalten und fügen Sie jeder eine andere Ikone und einen anderen Feature-Text hinzu.

Schritt 5: Veröffentlichen Sie Ihre Landingpage

Wenn Sie eine weitere Zeile mit Feature-Boxen hinzufügen möchten, fahren Sie mit der Maus über den Abschnitt und klicken Sie auf die Schaltfläche Zeile duplizieren. Ersetzen Sie dann die Symbole und den Text durch Ihre neuen Inhalte.

Sie können auch den Rest Ihrer Landingpage anpassen, indem Sie Bilder, Call-to-Action-Schaltflächen oder andere Blöcke hinzufügen. Der Vorgang ist ähnlich: Ziehen Sie den gewünschten Block in den Editor und passen Sie ihn im linken Bedienfeld an.

Wenn Sie mit Ihrer Landingpage zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“ und wählen Sie dann „Veröffentlichen“, um sie live zu schalten. Sie können die Landingpage jetzt in Aktion sehen:

FAQs zu Funktionsfeldern mit Symbolen

Hier sind einige häufig gestellte Fragen zum Hinzufügen von Feature-Boxen mit Symbolen in WordPress:

Wie füge ich Icons in WordPress hinzu?

Wenn Sie WordPress 7.0 oder höher verwenden, können Sie den integrierten Icon-Block verwenden, mit dem Sie die WordPress-Symbolbibliothek nach Namen durchsuchen können. Für größere Icon-Sets wie Font Awesome benötigen Sie ein Plugin oder einen Page Builder mit eigener Icon-Bibliothek.

Wie füge ich benutzerdefinierte Icons zu WordPress hinzu?

Der Icon-Block zeigt nur Symbole aus der WordPress-Bibliothek an, sodass Sie keine eigenen darüber hochladen können. Stattdessen können Sie Ihr Symbol als PNG-Datei mit dem Image-Block hochladen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Feature-Boxen mit Icons in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Anpassen von Farben auf Ihrer WordPress-Website und zu Möglichkeiten, eine mobilfreundliche WordPress-Website zu erstellen, lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.