Mit dem Gutenberg-Block Advanced Info Banner werden Informationen mit einer Kombination aus Bild, Text und verschiedenen Icons, die auf interne oder externe Seiten leiten können, transportiert. Hier findest Du diesen Block als Live-Demo.
Das Advanced Info Banner einfügen #
Du findest diesen Block im Bereich “Magnesites Blocks” in der Liste der Gutenberg-Blöcke unter Advanced Info Banner. Wie Du ihn einfügst und wie Du mit Gutenberg-Blöcken umgehst, kannst Du in diesem Handbuch-Eintrag nachlesen.
Inhalt des Advanced Info Banners anpassen #
Per Klick auf den Button ➔“Bild hinzufügen” öffnet sich Deine Mediathek, aus der Du das Bild in den Gutenberg-Block laden kannst. Wie Du mit der Mediathek arbeitest, darüber erfährst Du mehr in diesem Handbuch-Eintrag.
Über die Eingabefelder ➔“Headline” und ➔“Description” kannst Du eine aussagekräftige Überschrift und eine Beschreibung hinzufügen. Fasse Dich bei beiden Texten am besten kurz.
Im Bereich “Icons Entry” empfiehlt es sich, zwei bis sechs Symbole zu nutzen, mit denen Du auf interne und externe Seiten weiterleiten kannst. Hier findest Du für jeden Anlass das passende Icon. Zum Hinzufügen eines Icons musst Du auf ➔“Eintrag hinzufügen klicken”. Wähle anschließend ein Symbol aus und hinterlege einen ➔“Icon Title” sowie einen ➔“Icon Link”.
Hintergrund des Advanced Info Banners einstellen #
Für die Anpassung des Hintergrunds musst Du zunächst eine Grundsatzentscheidung fällen: Soll der Bereich, wo sich Texte und Icons befinden, über einen farbigen Hintergrund oder über ein Bild als Hintergrund verfügen?
Entscheidest Du Dich für eine ➔“Farbe”, kannst Du aus den im Bereich “Einstellungen” hinterlegten Farben (Primärfarbe, Zweitfarbe, Zusatzfarbe) wählen.
Entscheidest Du Dich für ein ➔“Foto”, kannst Du ein Hintergrundfoto über den Button ➔“Bild hinzufügen” aus der Mediathek hochladen. Damit der Text über dem Foto lesbar bleibt, empfiehlt sich außerdem die Einstellung der ➔“Farbüberlagerung” und der ➔“Deckkraft”.
Layout des Advanced Info Banners festlegen #
Für die Anpassung des Layouts stehen Dir verschiedene Möglichkeiten der farblichen Gestaltung zur Verfügung: Du kannst hier aus Primärfarbe, Zweitfarbe, Zusatzfarbe, Weiß und Dunkelgrau auswählen. So lassen sich ➔“Titelhintergrund”, ➔“Textfarbe”, ➔“Iconfarbe” und ➔“Icon Backgroundcolor” einstellen.
Insbesondere die Icons sollten gut zu erkennen und die Schriftfarbe gut leserlich sein, damit die Leute auch klicken. Mehr Informationen zu den Farbeinstellungen findest Du in diesem Handbuch-Eintrag.
