Ein Symbolfeld besteht in der Regel aus einer kleinen Grafik, die mit einem kurzen Text gepaart ist. Mit Icon-Boxen können Sie Dinge wie wichtige Funktionen, Dienstleistungen, Vorteile und Angebote auf visuell fesselnde und aussagekräftige Weise hervorheben.
Sie können auch Icon-Boxen verwenden, um Zeugnisse, Handlungsaufforderungen, Prozessschritte und mehr zu präsentieren. Tischberg ist ein vielseitiges Tabellenerstellungs-Plugin. Mit dem Plugin können Sie ganz einfach wunderschöne und ansprechende Icon-Boxen erstellen.
In den folgenden Teilen dieses Artikels erklären wir Ihnen, wie Sie mit dem Plugin Icon-Boxen in WordPress hinzufügen können. Holen Sie sich das Plugin, indem Sie auf die unten stehenden Links klicken.
Schöne Tische erstellen
Mit Block-Editor
Schritt 01: Hinzufügen des Tableberg-Blocks zum Editor
Fügen Sie die Tableberg-Block in Ihren Editor einfügen, wie Sie es mit jedem Gutenberg-Block tun würden.
Stellen Sie die Anzahl der Zeilen und Spalten entsprechend der Anzahl der Icon-Boxen, die Sie erstellen möchten.
In diesem Tutorial werden wir zum Beispiel drei Symbolboxen erstellen. Wir werden also 3 Spalten und 1 Zeile festlegen.
Sie können die Anzahl der erstellten Boxen sehen. Als Nächstes fügen wir Inhalte hinzu, um Symbolfelder zu erstellen.
Schritt 02: Hinzufügen eines Symbols zu einem Feld/einer Zelle
Tableber ermöglicht es Ihnen, verschiedene Elemente zu seinen Zellen hinzuzufügen, mit denen Sie die Tabellenzellen besonders attraktiv gestalten können. Wir werden sie in diesem Abschnitt erklären.
Hinzufügen einer Hintergrundfarbe zu den Zellen
Wählen Sie die gesamte Tabelle durch Klicken Sie auf die Tischberg-Symbol in der Symbolleiste. Gehen Sie dann auf die Seite Registerkarte "Stile. Auf der Registerkarte sehen Sie die Farboptionen. Legen Sie mithilfe der entsprechenden Option einen Hintergrund für die Tabellenzellen fest.
Anmerkung: Sie müssen zu Beginn die Hintergrundfarbe festlegen, da alle Elemente des Tabellenkastens auf dieser Farbe basieren werden.
Hinzufügen eines Symbols zu einer Box/Zelle
Sie können Blöcke innerhalb der Tabellenzellen wie der Gutenberg-Blockeditor hinzufügen. Klicken Sie auf das Plus-Symbol (+) auf eine Zelle. Suchen Sie und fügen Sie die Icon-Block zur Zelle.
Ändern und Auswählen eines Symbols
Gehen Sie zum Registerkarte Einstellungen in der rechten Seitenleiste, wobei der Symbolblock ausgewählt bleibt. Auf dieser Registerkarte erhalten Sie Optionen für die Größe des Symbols erhöhen, eingestellte Rotationund das Symbol ändern.
Sie können ein Symbol aus der vorhandenen Symbolbibliothek auswählen oder ein Symbol von Ihrem lokalen Laufwerk importieren.
Einfärben des Symbols
Gehen Sie zum Registerkarte "Stile. Setzen Sie die Farbe des Symbols und die Hintergrundfarbe.
Das Layout der Hintergrundfarbe sieht in der Tat nicht gut aus, oder? Wir haben die Lösung für Sie.
Scrollen Sie ein Stück nach unten unter die Registerkarte "Stile". Sie sehen die Polsterung, Rand, und Radius Optionen.
Sie können ein Layout für die Hintergrundfarbe erstellen, indem Sie geeignete Werte eingeben, wie in der Abbildung unten.
Schritt 03: Text in die Zelle/den Kasten einfügen
Kein Symbolfeld ist ohne Textinhalt sinnvoll. Add the Paragraph block unter dem Symbol in der Zelle.
Einen Titel hinzufügen über das Symbolfeld. Nächste, es ausrichten zentral, eine Farbe auswählenund eine Größe festlegen für den Text.
In ähnlicher Weise fügen Sie eine Beschreibung der Icon-Box mit Hilfe der Absatzblock.
Schritt 04: Hinzufügen einer Schaltfläche zur Zelle/Box
Sie können Benutzer durch Hinzufügen einer Schaltfläche zu einer anderen Seite, Dokumentation oder Ressource leiten. Hinzufügen der Knopfleiste zur Zelle.
Nach dem Hinzufügen der Schaltfläche, eine CTA-Kopie hinzufügenändern Sie seine Text- und Hintergrundfarbeund die Kopiergröße erhöhen.
Schritt 05: Leerzeichen zwischen den Blöcken hinzufügen
Die Zelle sieht verstopft aus, richtig? Das liegt daran, dass nicht genug Platz zwischen den Blöcken in der Zelle ist. Aber Sie können dieses Problem leicht lösen.
Markieren Sie die gesamte Zelle. Gehen Sie zum Registerkarte "Stile. Scrollen Sie ein wenig nach unten.
Sie erhalten Zellpolsterung und Block-Abstand Optionen. Mit diesen Optionen können Sie die erforderlichen Abstände zwischen den Blöcken schaffen.
So, Ihre One-Icon-Box ist fertig.
Schritt 06: Duplizieren Sie die Icon Box
Sie können auf dieselbe Weise manuell weitere Symbolboxen erstellen oder die Box duplizieren. Tableberg hat eine interessante Funktion für doppelte Zeilen und Spalten.
Klicken Sie auf die [Pro] Tabelle bearbeiten in der Symbolleiste. Den Rest können Sie selbst erledigen. Eine detaillierte Anleitung finden Sie in diesem Beitrag auf wie man Service-Boxen in WordPress hinzufügt. Wie Sie diese Funktion nutzen können, haben wir in einem späteren Teil dieses Beitrags erklärt.
In der Abbildung unten sehen Sie, dass wir das Symbolfeld dupliziert und seinen Inhalt geändert haben.
Schritt 07: Leerzeichen zwischen den Zellen hinzufügen
Gehen Sie zum Registerkarte "Stile. Scrollen Sie nach unten zu Abstand zwischen den Zellen. Mit dieser Option können Sie Leerzeichen zwischen den Zellen hinzufügen, wie in der folgenden Abbildung dargestellt.
Schritt 08: Entfernen des Zellenrandes
Unter der Registerkarte "Stile" finden Sie die Option Tabelle Randleiste und Inner Border Optionen. Stellen Sie die Grenzwert auf 0 an beiden Stellen. Dadurch werden die Ränder der Zellen entfernt.
So können Sie eine Icon-Box in WordPress erstellen.
Wir schließen!
Wir hoffen, dass Ihnen dieses Tutorial gefallen hat. Wenn Sie die in diesem Leitfaden beschriebenen Schritte befolgen, können Sie ganz einfach Icon-Boxen hinzufügen und anpassen, um sie an Ihre Marke anzupassen und wichtige Informationen effektiv hervorzuheben.
Bevor Sie sich auf den Weg machen, nehmen Sie sich noch ein paar Minuten Zeit, um zu lernen wie man Tabellen in WordPress formatiert.
