Hinzufügen von Feature-Boxen mit Symbolen in WordPress

Feature-Boxen heben die wichtigsten Verkaufsargumente eines Produkts oder einer Dienstleistung hervor. Sie sind auch eine gute Möglichkeit, neuen Kunden die Funktionen vorzustellen, damit sie entscheiden können, ob das Produkt oder die Dienstleistung das Richtige für sie ist.

Im Laufe der Jahre haben viele unserer Partnermarken Featured Boxes verwendet, um die Funktionen ihrer Produkte hervorzuheben. Sie finden sie zum Beispiel auf den WPForms und MonsterInsights Websites.

Unserer Erfahrung nach gibt es 2 Möglichkeiten, sie in WordPress einzufügen. Sie können den Block-Editor verwenden und die Funktionen in verschiedenen Spalten auflisten. Oder, wenn Sie nach etwas Ansprechenderem und Attraktiverem suchen, dann können Sie einen Page Builder verwenden, um Seiten mit benutzerdefinierten Feature-Boxen zu gestalten.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihrer WordPress-Website Feature-Boxen mit Symbolen hinzufügen können.

Was sind Feature-Boxen mit Symbolen?

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

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

In der folgenden Abbildung können Sie sehen, wie WPForms Feature-Boxen verwendet, um die größten Verkaufsargumente des Plugins hervorzuheben.

Sie können sogar eine Schaltfläche mit einer Handlungsaufforderung hinzufügen, damit die Nutzer mehr über eine bestimmte Funktion erfahren können.

In diesem Sinne zeigen wir Ihnen, wie Sie in WordPress Funktionsfelder mit Symbolen hinzufügen können. Verwenden Sie einfach die unten stehenden Links, um direkt zu der gewünschten Methode zu gelangen:

Methode 1: Hinzufügen von Feature-Boxen mit Symbolen mit dem WordPress-Block-Editor (kein Plugin erforderlich)

Sie können Feature-Boxen mit Symbolen zu Ihrer WordPress-Website hinzufügen, indem Sie den Standard-Inhaltseditor und den Spaltenblock verwenden. Das bedeutet, dass Sie kein neues WordPress-Plugin installieren müssen, es ist also eine schnelle und einfache Methode.

Öffnen Sie zunächst die Seite, auf der Sie einen Funktionsblock hinzufügen möchten. Klicken Sie dann auf das Symbol „+“ für das Hinzufügen eines Blocks.

Geben Sie anschließend „Spalten“ in das Suchfeld ein.

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

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

Als Beispiel wählen wir den Spaltenblock ’33/33/33′, da wir damit drei Spalten mit gleicher Breite erhalten, aber Sie können jedes beliebige Layout verwenden.

Danach sind Sie bereit, den Spalten Symbole hinzuzufügen.

Am einfachsten geht das mit Icon-Fonts, also größenveränderlichen Symbolen, die Ihre Website nicht ausbremsen. Wir empfehlen die Verwendung von Font Awesome, da sie eine der größten Sammlungen kostenloser Icons haben.

Sobald Sie Icon-Fonts in Ihr WordPress-Theme eingefügt haben , können Sie diese ganz einfach mit einem Shortcode in Ihren Spalten anzeigen.

Klicken Sie einfach auf das „+“-Symbol in 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, wobei Sie „bus“ durch den Namen des gewünschten Symbols ersetzen müssen:

[icon name="bus"]

Eine vollständige Liste der verfügbaren Icons finden Sie in der Font Awesome Icon-Bibliothek.

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

In der folgenden Abbildung sehen wir zum Beispiel ein Symbol mit der Bezeichnung „Adressbuch“.

Sie können diesen Namen nun in den Shortcode einfügen.

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

Wenn Sie es vorziehen, ein Bild aus der WordPress-Mediathek zu verwenden, können Sie einen Bildblock anstelle einer Symbolschriftart hinzufügen.

Klicken Sie dazu einfach auf „+“ in der ersten Spalte und fügen Sie dann einen „Image“-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.

Wenn Sie alle Symbole hinzugefügt haben, fügen Sie als Nächstes den Text in das Funktionsfeld ein.

Klicken Sie dazu auf die Schaltfläche „+“ innerhalb des Spaltenblocks. Fügen Sie dann einen Absatzblock hinzu.

Danach geben Sie Ihren Text einfach in den Absatzblock ein.

Sie können Symbole und Text zu den anderen Spalten 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 dann auf die drei Punkte in der Symbolleiste. Sie können dann „Duplizieren“ wählen.

Dadurch wird eine Kopie des Spaltenblocks erstellt.

Folgen Sie nun einfach dem oben beschriebenen Prozess, um der zweiten Zeile Inhalte hinzuzufügen.

Wenn Sie mit dem Funktionsfeld zufrieden sind, können Sie der Seite weitere Inhalte hinzufügen, z. B. ein Bild des Produkts oder Kategorien und Tags.

Klicken Sie einfach auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um den Funktionskasten in Betrieb zu nehmen.

Sie können nun Ihre Website, Ihren Blog oder Ihren Online-Shop besuchen, um das Funktionssymbolfeld in Aktion zu sehen.

Hier ein Beispiel dafür, was die Besucher Ihres WordPress-Blogs sehen werden.

Methode 2: Hinzufügen von Feature-Boxen mit Symbolen mit einem Page Builder Plugin (empfohlen)

Wenn Sie ein einfaches Funktionsfeld erstellen möchten, ist der WordPress-Blockeditor eine gute Wahl. Wenn Sie jedoch ein fortschrittlicheres Feld mit einem vollständig benutzerdefinierten Design erstellen möchten, benötigen Sie ein Seitenerstellungs-Plugin.

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

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

Hier sehen Sie ein Beispiel für eine Feature-Box, die mit den vorgefertigten Blöcken und Symbolen von SeedProd erstellt wurde.

Als Erstes müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

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

Sie können diese Informationen finden, 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 trotzdem 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.

In dieser Anleitung verwenden wir die „Leere Vorlage“, aber Sie können jede beliebige Vorlage verwenden.

Um eine Vorlage auszuwählen, fahren Sie einfach mit dem Mauszeiger darüber und klicken Sie auf das Symbol „Häkchen“.

Daraufhin erscheint 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. Sie könnten zum Beispiel Ihre WordPress-SEO verbessern, indem Sie einige relevante Schlüsselwörter einfügen.

Klicken Sie anschließend auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“.

Dadurch wird die Vorlage im SeedProd-Seiteneditor mit Drag-and-Drop-Funktion geöffnet.

Gestalten Sie Ihre Feature Box

Da Sie die leere Vorlage verwenden, müssen Sie zunächst ein Layout auswählen. Klicken Sie dazu einfach auf eines der Spaltenlayouts.

Suchen Sie anschließend im linken Menü den Block „Icon“.

Sie können diesen Block nun auf die erste leere Spalte ziehen und ablegen.

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

Um das Symbol zu ändern, klicken Sie es an und wählen Sie dann die Schaltfläche „Bild auswählen“.

Daraufhin wird die Symbolbibliothek mit Hunderten von Symbolen angezeigt, aus denen Sie wählen können. Sie können die Suchleiste verwenden, um nach einem bestimmten Symbol zu suchen, oder die gesamte Liste durchsuchen.

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

Zum Anpassen des Symbols klicken Sie auf das Symbol, um es auszuwählen.

Sie können dieses Symbol nun über die Einstellungen im linken Menü anpassen, z. B. die Ausrichtung, Größe und Farbe ändern und vieles mehr.

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

Hier können Sie die Abstände ändern, einen Rahmen hinzufügen und sogar CSS-Animationseffekte hinzufügen.

Fügen Sie anschließend einen „Text“-Block unter dem Symbol ein.

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

Um Text hinzuzufügen, markieren Sie den Block durch Anklicken. Sie können dann in den kleinen Texteditor im linken Menü eingeben.

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

Um die anderen Spalten anzupassen, befolgen Sie einfach die gleichen Schritte wie oben.

Wenn Sie eine weitere Reihe von Merkmalskästchen mit Symbolen hinzufügen möchten, fahren Sie mit der 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 Funktionsfelder mit Symbolen zu erstellen.

Sie können dann neue Symbole und Texte hinzufügen, indem Sie das oben beschriebene Verfahren befolgen.

Sie können die Seite weiter bearbeiten, indem Sie weitere Blöcke hinzufügen und diese Blöcke im Menü auf der linken Seite anpassen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“. Sie können dann „Veröffentlichen“ wählen, um die Seite zu aktivieren.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu erfahren, wie Sie in WordPress Funktionsfelder mit Symbolen hinzufügen können. Vielleicht interessiert Sie auch unser Leitfaden zum Anpassen von Farben auf Ihrer WordPress-Website und zum Erstellen einer mobilfreundlichen WordPress-Website.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.