Mit dem Gutenberg-Block Info Banner werden verschiedene Informationen in einer Kombination aus Bild und Text präsentiert. Darüber hinaus verfügt dieser Magnesites Block über einen Call-To-Action-Button oder Social-Media-Icons zur Weiterleitung auf interne oder externe Seiten. Hier findest Du eine Live-Demo des Info Banners.
Das Info Banner einfügen #
Du findest diesen Block im Bereich “Magnesites Blocks” in der Liste der Gutenberg-Blöcke unter Info Banner. Wie Du ihn einfügst und wie Du mit Gutenberg-Blöcken umgehst, kannst Du in diesem Handbuch-Eintrag nachlesen.
Inhalt des Info Banners anpassen #
In das oberste Eingabefeld ➔“Titel” schreibst Du eine aussagekräftige Überschrift. Hier solltest Du in wenigen Worten vermitteln, um was es geht.
Im Eingabefeld ➔“Text” hast Du Platz für ausführlichere Informationen. Beschränke Dich aber auch hier am besten auf wenige, kurze Sätze.
Zum Schluss entscheidest Du, ob dieser Magnesites Block Deine in dem Bereich “Einstellungen” zugewiesenen Social-Media-Kanäle als Icons darstellen soll. Alternativ kannst Du einen Call-to-Action-Button verwenden. Hierfür musst Du einen ➔“Button Text” und eine ➔“Button URL” angeben.
Layout des Info Banners anpassen #
Für die Anpassung des Layouts musst Du zunächst Grundsatzentscheidungen fällen: Soll dieser Magnesites Block über ein Hintergrundfoto verfügen? Und in welcher Breite soll das Info Banner auf der Webseite dargestellt werden?
Die Breite des Info Banners legst Du im Auswahlfeld ➔“Breite” fest. Der Magnesites Block kann über die volle Bildschirmbreite angezeigt werden oder im Standard mit Freiraum links und rechts neben dem Block.
Entscheidest Du Dich für ein Foto, aktivierst Du diese Funktion über das Auswahlfeld ➔“Hintergrundfoto”. Per Klick auf den Button ➔“Bild hinzufügen” öffnet sich Deine Mediathek, aus der Du ein Bild in den Gutenberg-Block laden kannst. Wie Du mit der Mediathek arbeitest, darüber erfährst Du mehr in diesem Handbuch-Eintrag. Damit der Text über dem Foto lesbar bleibt, empfiehlt sich außerdem die Einstellung der ➔“Farbüberlagerung” und der ➔“Deckkraft”.
Für die Anpassung des Layouts stehen Dir außerdem eine ganze Reihe an Auswahlfeldern zur Verfügung, mit denen Du die Farbwahl für alle Elemente dieses Magnesites Blocks bestimmen kannst. Es stehen hier die im Bereich “Einstellungen” definierten Farben (Hauptfarbe, Zweitfarbe und Zusatzfarbe) sowie die Farbe Dunkelgrau zur Auswahl.
