Advanced Info Banner

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.

Magnesites Block Advanced Info Banner
So sieht es aus, wenn Du das Advanced Info Banner als Gutenberg-Block einfügst. 

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. 

Willst Du loslegen?

Erstelle Deine Webseite – ganz einfach und ohne Vorkenntnisse. ​Du kannst Dich ganz auf die Inhalte konzentrieren. Die Technik übernehmen wir. Für welchen Bereich möchtest Du eine Webseite erstellen?

Magnesites ist ein Angebot der Magnecon GmbH

Scroll to Top
Cookie Consent Banner von Real Cookie Banner