Infoboxen sind heute ein gängiges Instrument für Websites, die wichtige Informationen klar und ansprechend vermitteln müssen. Wenn Sie die Aufmerksamkeit auf eine bestimmte Werbeaktion lenken, den Betrachter auf wichtige Details und Hinweise aufmerksam machen oder Ihre Nutzer zu fruchtbaren CTAs ermutigen möchten, bieten Infoboxen eine einfache Lösung, um Ihre Botschaften hervorzuheben.
Infoboxen gliedern nicht nur wichtige Informationen in kleinere, leicht zu lesende Abschnitte, sondern spielen auch eine wichtige Rolle bei der Benutzerführung. Mit zusätzlichen Infoboxen wird es für Sie einfacher, Ihre Besucher durch die wichtigsten Punkte zu führen, ohne sie zu überwältigen und in einem organisierten, sauberen und freundlichen Format.
Wenn Sie hier sind, um diesen Artikel zu lesen, dann sind Sie bereits mit dem Konzept der Infoboxen vertraut oder lernen sie gerade zum ersten Mal kennen. Vielleicht geht Ihnen aber noch eine Frage durch den Kopf, nämlich wie Sie eine Infobox erstellen. Deshalb haben wir eine Schritt-für-Schritt-Anleitung vorbereitet, die Sie durch die Grundlagen der Erstellung von Infoboxen in WordPress führt. Wir stellen Ihnen zwei verschiedene Ansätze vor, damit Sie sich für die am besten geeignete Option entscheiden können. Also, warum warten? Kommen wir gleich zur Sache.
Methode 1: Verwendung der Säulenblöcke
Der Spaltenblock im Gutenberg-Editor ist eine einfache Möglichkeit, Infoboxen zu erstellen, wenn Sie dies ohne die Hilfe von Plugins tun möchten. Er ermöglicht es Ihnen, grundlegende Inhalte in einem strukturierten Format anzuordnen. Hier sehen Sie, wie Sie eine Infobox mit diesem Ansatz einrichten:
Schritt 1: Hinzufügen eines Spaltenblocks zum Editor
Erstellen Sie einen neuen Beitrag oder eine neue Seite in WordPress und öffnen Sie sie im Gutenberg-Editor. Fügen Sie einen Spaltenblock hinzu, indem Sie auf die Schaltfläche "+"-Symbol und wählen Sie dann "Säulen" aus den Blockoptionen.
Wählen Sie nun eine Layout mit einer einzigen Spalte oder mit mehreren Spalten, je nachdem, wie Sie die Infobox gestalten möchten. Um es Anfängern leichter zu machen, haben wir uns für eine einzelne Spalte entschieden, um unsere Infobox zu erstellen.
Schritt 2: Verschiedene Blöcke zum Hinzufügen von Inhalten hinzufügen
Als Nächstes fügen Sie dem Spaltenblock Inhalte hinzu, um ein optisch ansprechendes Informationsfeld zu erstellen. Klicken Sie auf die "+"-Symbol um Ihren bevorzugten Block hinzuzufügen. Dies wiederum führt Sie zur Gutenberg-Blockbibliothek. Wir beginnen zum Beispiel mit einem Bild oben auf unserer Infobox. Suchen Sie also nach dem Bild Block in der Bibliothek und wählen Sie ihn aus. Fahren Sie mit dem Hochladen Ihres Bildes aus der Mediathek fort oder laden Sie es von Ihrem Gerät hoch.
Sobald Sie Ihr Bild hochgeladen haben, können Sie die Ausrichtung Ihres Bildes und passen Sie die Größe des Bildes. Sie können das Bild links, mittig oder rechts ausrichten. Hier haben wir das Bild in der Mitte ausgerichtet, aber die Größe beibehalten.
Jetzt brauchen wir eine passende Überschrift, um unser Bild hervorzuheben. Zum Hinzufügen einer Überschrift Block zu erstellen, wählen Sie zunächst das Bild aus, woraufhin sich die Symbolleiste öffnet, und wählen Sie von dort aus den übergeordneten Block aus.
Sobald Sie den übergeordneten Block ausgewählt haben, wird der + Symbol erscheinen. Drücken Sie also das +-Symbol, suchen Sie nach dem Überschrift Block und klicken Sie ihn an. Fügen Sie weitere Texte in den Überschriftenblock ein und richten Sie sie so aus, wie Sie es wünschen.
Wenn Sie fertig sind, wiederholen Sie das vorherige Verfahren zum Hinzufügen von Blöcken. Hier haben wir einen Absatzblock und eine Tastengruppe einer nach dem anderen. Wählen Sie zunächst die Absatzblock und fügen Sie den erforderlichen Text hinzu. Richten Sie diese Texte so aus, wie Sie es für notwendig halten.
Die nächste Aufgabe sind Schaltflächen. Suchen Sie die Schaltflächenblöcke in der Bibliothek, wählen Sie den Block aus und fügen Sie Texte für die Schaltfläche hinzu.
Sobald Sie fertig sind, Ihre Tasten ausrichten wie Sie es wünschen und dann Links hinzufügen zu Ihrer Schaltfläche.
Schritt 3: Anpassen des gesamten Blocks
Mit den Anpassungsoptionen können Sie verschiedene Aspekte für ein ausgefeiltes Erscheinungsbild einstellen. Wählen Sie Ihr gesamter Spaltenbereich indem Sie auf das Spaltensymbol in der Symbolleiste klicken. Nun können Sie mit der Anpassung beginnen, indem Sie die Breite der Spalte, um sicherzustellen, dass sie gut in Ihr Seitenlayout passt.
Als Nächstes gehen Sie zum Registerkarte "Stile. Von hier aus können Sie die Farbe der Texte, Links und Hintergründe; Sie können die Typografie und passen Sie den Block Abmessungen.
Wenn Sie weiter nach unten scrollen, finden Sie die Einstellungen zum Hinzufügen von Block-Abstand und Grenze und Schatten.
Wir haben die Text- und Hintergrundfarbe geändert, die Polsterung verändert und einige Ränder und Radien eingeführt. Sobald die Infobox veröffentlicht ist, werden wir das Endergebnis haben.
Methode 2: Verwendung des Tableberg-Plugins
Das Plugin Tableberg, das in erster Linie für die Erstellung von Tabellen verwendet wird, kann auch für die Gestaltung von Infoboxen mit einem strukturierten Format genutzt werden. Hier erfahren Sie, wie Sie eine Infobox mit Tableberg erstellen:
Schritt 1: Installieren und Aktivieren des Tableberg-Plugins
Gehen Sie zu Ihrem WordPress-Dashboard, navigieren Sie zu Plugins > Neu hinzufügen, Suche nach "Tischberg," und klicken Sie Jetzt installieren. Klicken Sie nach der Installation auf Aktivieren Sie um das Plugin zu aktivieren.
Schritt 2: Erstellen einer neuen Tabelle
Klicken Sie auf die + Symbol aus Ihrem Editor und suchen Sie nach dem Tischberg Plugin aus der Bibliothek. Sobald Sie es gefunden haben, klicken Sie darauf.
Nun müssen Sie die Anzahl der Spalten und Zeilen für Ihre Infobox auswählen. Hier werden wir eine einspaltige Box erstellen; deshalb haben wir ausgewählt 1 Zeile und 1 Spalte.
Schritt 3: Inhalt zur Tabelle hinzufügen
Wie bei der ersten Methode beginnen wir mit dem Hinzufügen von Bildern in unserem Infokasten. Drücken Sie die + Symbol, suchen Sie nach dem Bildblockund fügen Sie es zu Ihren Beiträgen hinzu. Laden Sie dann das Bild von Ihrem Gerät oder Ihrer Mediathek hoch.
Auch hier gilt: Wenn Sie die Ausrichtung und Größe anpassen müssen, tun Sie das Gleiche wie in der Abbildung unten gezeigt.
Als nächstes fügen wir den Text nach dem Bild ein, indem wir eine Absatzblock. Klicken Sie auf das +-Zeichen, suchen Sie den Absatzblock und fügen Sie ihn hinzu. Wenn Sie meinen, dass eine Änderung der Ausrichtung erforderlich ist, nehmen Sie diese vor.
Die letzte Aufgabe ist das Hinzufügen von Schaltflächen. Wählen Sie die übergeordneter Blockfinden Sie die + Symbol, suchen Sie nach Tastenund fügen Sie es dem Editor hinzu.
Sobald Sie dies erledigt haben, Text hinzufügen zu Ihren Schaltflächen, prüfen Sie die Angleichungen Ihrer Schaltfläche und Links hinzufügen dazu.
Schritt 4: Anpassen der Tabelle
Nachdem Sie die Tableberg-Box mit Ihrem Inhalt eingerichtet haben, können Sie fortfahren, die Box als Ganzes anzupassen und zu gestalten. Aber denken Sie daran, dass Sie auch jeden einzelnen Block, den wir hier verwendet haben, anpassen können. Für den Moment bleiben wir bei der gesamten Tabelle.
Klicken Sie zunächst auf die Schaltfläche Tischberg-Symbol in der Symbolleiste, um das gesamte Feld auszuwählen. Schieben Sie dann zum Registerkarte "Einstellungen und stellen Sie die Breite der Box an das Layout Ihrer Seite oder Ihres Beitrags anpassen.
Gehen Sie dann zum Registerkarte "Stile zum Anpassen der Box'.s Hintergrundfarbe, Auffüllung, Rand und Abstand.
Wenn Sie weiter nach unten scrollen, finden Sie weitere Optionen zum Ändern der Tabelle, Innen- und Spaltenrahmen, globale Schriftfarbe und mehr.
So können Sie eine perfekte Infobox erstellen. Wenn Sie mehr als eine Infobox benötigen, ändern Sie einfach die Anzahl der Spalten und Zeilen und folgen Sie dann demselben Verfahren.
Schlussfolgerung
Und schon ist Ihre Tableberg-Infobox perfekt gestylt. Mit nur wenigen Änderungen kann Ihr Inhalt von gewöhnlich zu auffällig werden und die Aufmerksamkeit genau dorthin lenken, wo sie benötigt wird. Die Anpassungsmöglichkeiten sind endlos, also lassen Sie Ihrer Fantasie freien Lauf. Experimentieren Sie mit Farben, spielen Sie mit Rändern und fügen Sie den letzten Schliff hinzu, der jede Box zu einem visuellen Genuss macht. Lassen Sie Ihre Infoboxen nicht nur Informationen vermitteln, sondern auch Ihrer gesamten Website einen Hauch von Flair verleihen.
