Mit dem Gutenberg-Block Dual Info Banner werden verschiedene Informationen mit einer Kombination aus Bild, Text sowie Social-Media-Icons oder einem Call-to-Action-Button dargestellt. Zur Live-Demo dieses Blocks.
Das Dual Info Banner einfügen #
Du findest diesen Block im Bereich “Magnesites Blocks” in der Liste der Gutenberg-Blöcke unter Dual Info Banner. Wie Du ihn einfügst und wie Du mit Gutenberg-Blöcken umgehst, kannst Du in diesem Handbuch-Eintrag nachlesen.
Inhalt des Dual Info Banners anpassen #
Über die Eingabefelder ➔“Titel” und ➔“Text” kannst Du eine aussagekräftige Überschrift und eine kurze Beschreibung hinzufügen.
Hier bestimmt Du außerdem, ob Social-Media-Icons oder ein Call-to-Action-Button angezeigt werden soll: Entscheidest Du Dich für die “Social Links” (Icons), werden die in dem Bereich “Einstellungen” zugewiesenen Social-Media-Kanäle mit Icons dargestellt. Fällt die Wahl auf den “Button”, definierst Du einen ➔“Button Text” und eine ➔“Button URL”.
Layout des Dual Info Banners einstellen #
Für die Anpassung des Layouts gilt es zunächst eine Grundsatzentscheidung zu fällen: Soll dieser Magnesites Block über einen farbigen Hintergrund oder über ein Bild als Hintergrund verfügen?
Entscheidest Du Dich für ein ➔“Hintergrundfoto”, kannst Du per Klick auf den Button ➔“Bild hinzufügen” Deine Mediathek öffnen. Aus dieser lässt sich dann das Bild in den Gutenberg-Block laden. Wie Du mit der Mediathek arbeitest, darüber erfährst Du mehr in diesem Handbuch-Eintrag. Damit die Inhalte über dem Foto lesbar bleiben, solltest Du die ➔“Farbüberlagerung” und die ➔“Deckkraft” einstellen.
Entscheidest Du Dich gegen ein ➔“Hintergrundfoto”, musst Du Farben für ➔“Hintergrundfarbe”, ➔“Textfarbe”, ➔“Titel Hintergrundfarbe”, ➔“Titel Textfarbe”, ➔“Button Hintergrundfarbe” und ➔“Button Textfarbe” definieren. Hier hast Du die Auswahl aus den im Bereich “Einstellungen” hinterlegten Farben (Primärfarbe, Zweitfarbe, Zusatzfarbe), Weiß und verschiedenen Grautönen.
