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.