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

Betrachten Sie jede erfolgreiche Geschäftswebsite, und Sie werden wahrscheinlich Feature-Boxen mit Icons sehen, die ihre wichtigsten Angebote hervorheben.

Es ist ein bewährtes Designmuster, das wir unzählige Male verwendet haben, weil es funktioniert. Es hilft Besuchern, schnell zu erkennen, was Ihr Unternehmen besonders macht, ohne große Textblöcke lesen zu müssen.

Nachdem wir viele WordPress-Benutzer bei der Verbesserung ihrer Websites unterstützt haben, wissen wir, dass die Erstellung dieser professionell aussehenden Feature-Boxen mühsam erscheinen mag.

Aber hier ist, was die meisten Leute nicht erkennen: Sie müssen kein Designer oder Entwickler sein, um schöne Feature-Boxen zu Ihrer Website hinzuzufügen.

In dieser Anleitung zeigen wir Ihnen die einfachsten Möglichkeiten, Feature-Boxen mit Symbolen in WordPress zu erstellen. Ich

Was sind Feature-Boxen mit Icons?

Die meisten Leute werden nicht jedes einzelne Wort auf Ihrer WordPress-Website lesen, besonders wenn eine Seite sehr textlastig ist.

Stattdessen werden Besucher die Seite scannen, um die gesuchten Informationen schnell zu finden. Das bedeutet, dass Sie wichtige Informationen auf eine Weise präsentieren müssen, die scannbar und ansprechend ist, weshalb so viele Websites Feature-Boxen verwenden.

Im folgenden Bild sehen Sie, wie WPForms Feature-Boxen verwendet, um die wichtigsten Verkaufsargumente des Plugins hervorzuheben.

Sie können sogar einen Call-to-Action-Button hinzufügen, damit Benutzer mehr über eine bestimmte Funktion erfahren können.

Mit diesen Worten zeigen wir Ihnen, wie Sie Feature-Boxen mit Symbolen in WordPress hinzufügen. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Feature-Felder mit Symbolen mithilfe des WordPress Block Editors hinzufügen (kein Plugin erforderlich)
• Methode 2: Feature-Boxen mit Icons mit einem Page Builder Plugin hinzufügen (empfohlen)

Methode 1: Feature-Felder mit Symbolen mithilfe des WordPress Block Editors hinzufügen (kein Plugin erforderlich)

Sie können mit dem Standard- Inhaltseditors und dem Spaltenblock Feature-Boxen mit Icons zu Ihrer WordPress-Seite hinzufügen. Das bedeutet, dass Sie kein neues WordPress-Plugin installieren müssen, was eine schnelle und einfache Methode ist.

Um zu beginnen, öffnen Sie die Seite, auf der Sie eine Feature-Box hinzufügen möchten. Klicken Sie dann auf das Symbol „+“ zum Hinzufügen eines Blocks.

Geben Sie als Nächstes 'Spalten' in das Suchfeld ein.

Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zur Seite hinzuzufügen.

WordPress zeigt nun alle verschiedenen Spaltenblöcke an. Die Zahlen geben an, wie viel Platz jede Spalte im Block einnimmt. Zum Beispiel erstellt '50/50' zwei Spalten, die jeweils 50 % der verfügbaren Breite einnehmen.

Als Beispiel wählen wir den Spaltenblock '33/33/33', da dieser uns drei Spalten mit gleicher Breite bietet, aber Sie können jedes Layout verwenden, das Sie möchten.

Danach können Sie Symbole zu den Spalten hinzufügen.

Der einfachste Weg, dies zu tun, sind hervorgehobene Icon-Schriften, bei denen es sich um skalierbare Symbole handelt, die Ihre Website nicht verlangsamen. Wir empfehlen die Verwendung von Font Awesome, da sie eine der größten Sammlungen kostenloser Icons haben.

Sobald Sie Icon-Schriftarten in Ihr WordPress-Theme eingefügt haben, ist es einfach, sie mit Shortcodes in Ihren Spalten anzuzeigen.

Klicken Sie einfach auf das '+'-Symbol der 'Spalte' und geben Sie 'Shortcode' ein. Wenn der richtige Block angezeigt wird, klicken Sie darauf, um ihn zu Ihrem Layout hinzuzufügen.

Danach können Sie den folgenden Shortcode eingeben, aber stellen Sie sicher, dass Sie 'bus' durch den Namen des Symbols ersetzen, das Sie verwenden möchten:

[icon name="bus"]

Um eine vollständige Liste der verfügbaren Icons anzuzeigen, gehen Sie einfach zur Font Awesome Icon-Bibliothek.

Wenn Sie ein Symbol finden, das Ihnen gefällt, klicken Sie darauf, um den Namen dieses Symbols anzuzeigen.

Im folgenden Bild sehen wir zum Beispiel ein Symbol namens „address-book“.

Sie können diesen Namen jetzt zum Shortcode hinzufügen.

Um mehr über die Arbeit mit Shortcodes zu erfahren, lesen Sie bitte unseren Leitfaden für Anfänger zum Hinzufügen eines Shortcodes in WordPress.

Wenn Sie lieber ein Bild aus der WordPress-Mediathek verwenden möchten, können Sie stattdessen einen Bildblock hinzufügen, anstatt eine Icon-Schriftart zu verwenden.

Klicken Sie dazu einfach in der ersten Spalte auf „+“ und fügen Sie dann einen „Bild“-Block anstelle eines Shortcode-Blocks hinzu.

Sie können nun ein Bild aus der Mediathek auswählen oder eine neue Datei von Ihrem Computer hochladen.

Sobald Sie alle Ihre Symbole hinzugefügt haben, besteht der nächste Schritt darin, dem Feature-Feld Text hinzuzufügen.

Klicken Sie dazu auf die Schaltfläche „+“ im Spaltenblock. Fügen Sie dann einen Absatzblock hinzu.

Geben Sie danach einfach Ihren Text in den Absatzblock ein.

Sie können den anderen Spalten Symbole und Text hinzufügen, indem Sie den gleichen Vorgang wiederholen.

Möchten Sie, dass Ihre Feature-Box mehrere Zeilen hat?

Klicken Sie einfach auf den Spaltenblock und wählen Sie dann die drei Punkte in der Werkzeugleiste aus. Sie können dann 'Duplizieren' auswählen.

Dies erstellt eine Kopie des Spalten-Blocks.

Folgen Sie nun einfach demselben Prozess wie oben beschrieben, um Inhalte zur zweiten Zeile hinzuzufügen.

Wenn Sie mit der Feature-Box zufrieden sind, können Sie weitere Inhalte zur Seite hinzufügen, wie z. B. ein Bild des Produkts oder Kategorien und Tags.

Um die Feature-Box live zu schalten, klicken Sie einfach auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“.

Sie können nun Ihre Website, Ihren Blog oder Ihren Online-Shop besuchen, um die Feature-Icon-Box in Aktion zu sehen.

Hier ist ein Beispiel dafür, was die Leute sehen werden, wenn sie Ihren WordPress-Blog besuchen.

Methode 2: Feature-Boxen mit Icons mit einem Page Builder Plugin hinzufügen (empfohlen)

Wenn Sie eine einfache Feature-Box erstellen möchten, ist der WordPress-Block-Editor eine gute Wahl. Wenn Sie jedoch eine fortgeschrittenere Box mit einem vollständig benutzerdefinierten Design erstellen möchten, benötigen Sie ein Page-Builder-Plugin.

SeedProd ist der beste WordPress Page Builder auf dem Markt, mit dem Sie benutzerdefinierte Seiten mit einem Drag-and-Drop-Editor erstellen können.

Es verfügt über mehr als 300 professionell gestaltete Vorlagen, mit denen Sie schnell schöne Seiten erstellen können. Es verfügt auch über eine ganze Bibliothek von Icons, die Sie mit einem einzigen Klick zu Ihren Feature-Boxen hinzufügen können.

Hier ist ein Beispiel für eine Feature-Box, die mit den fertigen Blöcken und Icons von SeedProd erstellt wurde.

Wir haben gesehen, wie unsere Partner-Marken dieses Tool zur Erstellung ihrer Websites verwendet haben, und sie hatten eine ausgezeichnete Erfahrung. Details finden Sie in unserem SeedProd-Testbericht.

Das erste, was Sie tun müssen, ist das SeedProd-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserem Leitfaden für Anfänger, wie Sie ein WordPress-Plugin installieren.

Nach der Aktivierung gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein.

Diese Informationen finden Sie, indem Sie sich in Ihr SeedProd-Konto einloggen.

Wählen Sie eine professionell gestaltete Vorlage

Um zu beginnen, gehen Sie zu SeedProd » Landing Pages und klicken Sie auf 'Neue Landing Page hinzufügen'.

Auf dem nächsten Bildschirm können Sie eine Vorlage auswählen. Sie können alle diese Vorlagen mit dem Drag-and-Drop-Builder von SeedProd anpassen, aber es ist dennoch eine gute Idee, eine Vorlage zu wählen, die Ihren Zielen entspricht.

Alle Vorlagen von SeedProd sind in verschiedene Kampagnentypen unterteilt, wie z. B.  Coming Soon - und Lead-Squeeze-Kampagnen. Sie können die Vorlagen von SeedProd sogar verwenden, um Ihre 404-Seite zu verbessern.

Für diese Anleitung verwenden wir die „Leere Vorlage“, aber Sie können jede beliebige Vorlage verwenden.

Um eine Vorlage auszuwählen, fahren Sie einfach mit der Maus darüber und klicken Sie dann auf das 'Häkchen'-Symbol.

Dies öffnet ein Popup, in dem Sie der Seite einen Namen geben können. SeedProd verwendet den Seitennamen in der URL, aber Sie können diesen Link ändern, wenn Sie möchten. Zum Beispiel möchten Sie möglicherweise Ihre WordPress SEO verbessern, indem Sie einige relevante Schlüsselwörter einfügen.

Klicken Sie danach auf die Schaltfläche „Seite speichern und mit der Bearbeitung beginnen“.

Dies öffnet die Vorlage im Drag-and-Drop-Seiteneditor von SeedProd.

Gestalten Sie Ihre Feature Box

Da Sie die leere Vorlage verwenden, besteht der erste Schritt darin, ein Layout auszuwählen. Klicken Sie dazu einfach auf eines der Spaltenlayouts.

Finden Sie danach den 'Icon'-Block im linken Menü.

Sie können diesen Block jetzt per Drag & Drop in die erste leere Spalte ziehen.

Dies fügt den Icon-Block zu Ihrem Layout hinzu, wobei bereits ein Standard-Icon ausgewählt ist.

Um das Icon zu ändern, klicken Sie darauf und wählen Sie dann die Schaltfläche 'Bild auswählen'.

Dies öffnet die Symbolbibliothek mit Hunderten von Symbolen zur Auswahl. Sie können die Suchleiste verwenden, um nach einem bestimmten Symbol zu suchen, oder die gesamte Liste durchsuchen.

Wenn Sie ein Bild finden, das Sie verwenden möchten, fahren Sie einfach mit der Maus darüber und klicken Sie dann auf die Schaltfläche „+“, um es zu Ihrer Seite hinzuzufügen.

Um das Icon anzupassen, klicken Sie, um es auszuwählen.

Sie können dieses Icon nun über die Einstellungen im linken Menü anpassen, einschließlich der Änderung von Ausrichtung, Größe, Farbe und mehr.

Um weitere Optionen anzuzeigen, klicken Sie auf die Registerkarte „Erweitert“.

Hier können Sie den Abstand ändern, einen Rahmen hinzufügen und sogar CSS-Animationseffekte hinzufügen.

Sobald Sie dies getan haben, fügen Sie darunter einen „Text“-Block hinzu.

Suchen Sie einfach den 'Text'-Block im linken Menü und platzieren Sie ihn dann per Drag & Drop unter Ihrem Symbol.

Um Text hinzuzufügen, klicken Sie, um den Block auszuwählen. Sie können dann in den kleinen Texteditor im linken Menü tippen.

Hier können Sie Links hinzufügen, die Textausrichtung ändern, die Textfarbe ändern und vieles mehr.

Um die anderen Spalten anzupassen, folgen Sie einfach den gleichen Schritten wie oben.

Wenn Sie eine weitere Zeile mit Feature-Boxen mit Icons hinzufügen möchten, bewegen Sie die Maus über den Abschnitt und klicken Sie dann auf die Schaltfläche „Zeile duplizieren“.

Sie können den Abschnitt beliebig oft duplizieren, um schnell weitere Feature-Boxen mit Symbolen zu erstellen.

Sie können dann neue Icons und Text hinzufügen, indem Sie denselben oben beschriebenen Prozess befolgen.

Sie können die Arbeit an der Seite fortsetzen, indem Sie weitere Blöcke hinzufügen und diese Blöcke im linken Menü anpassen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf die Schaltfläche 'Speichern'. Sie können dann 'Veröffentlichen' auswählen, um die Seite live zu schalten.

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 Möglichkeiten, eine mobilfreundliche WordPress-Website zu erstellen sehen.

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.