Mit dem Gutenberg-Block Info Box werden verschiedene Informationen mit Bild, Text und einem optionalen Call-To-Action-Button transportiert. Live-Demo ansehen.
Die Info Box einfügen #
Du findest diesen Block im Bereich “Magnesites Blocks” in der Liste der Gutenberg-Blöcke unter Info Box. Wie Du ihn einfügst und wie Du mit Gutenberg-Blöcken umgehst, kannst Du in diesem Handbuch-Eintrag nachlesen.
Inhalt der Info Box anpassen #
Im obersten Auswahlfeld ➔“Bild” hinterlegst Du ein Bild oder eine Grafik. Per Klick auf den Button ➔“Bild hinzufügen” öffnet sich Deine Mediathek, aus der Du das Bild oder die Grafik in den Gutenberg-Block laden kannst. Wie Du mit der Mediathek arbeitest, darüber erfährst Du mehr in diesem Handbuch-Eintrag.
Über das Auswahlfeld ➔“Bild: Schatten” kannst Du entscheiden, ob Du mit einem dezenten Schatten einen optischen Akzent rund um das Bild oder die Grafik setzen möchtest. Wird kein Bild ausgewählt, übernimmt Magnesites automatisch das im Bereich “Einstellungen” hinterlegte Platzhalterbild.
Im Eingabefeld ➔“Titel” vergibst Du eine aussagekräftige Überschrift für den Magnesites Block und über das Eingabefeld ➔“Text” hast Du Platz für ausführlichere Informationen. Fasse Dich aber am besten auch hier kurz. Optional kannst Du über ➔“Link” und ➔“Button: Text” einen Call-to-Action hinzufügen.
Farben der Info Box einstellen #
Für die Farbgestaltung der Info Box kannst Du aus den in den Grundeinstellungen hinterlegten Farben (Primärfarbe, Zweitfarbe, Zusatzfarbe), Weiß und unterschiedlichen Grautönen auswählen. So lassen sich ➔“Hintergrund”, ➔“Überschrift: Textfarbe”, ➔“Überschrift: Hintergrundbalken”, ➔“Textfarbe”, ➔“Button: Hintergrundfarbe” und ➔“Button: Textfarbe” einstellen.
Insbesondere der Button sollte 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.
Layout der Info Box festlegen #
Für die Anpassung des Layouts kannst Du über die Positionierung des Bildes innerhalb der Info Box und über die Breite des gesamten Magnesites Blocks entschieden:
Die Breite der Info Box legst Du über das Auswahlfeld ➔“Breite” fest (volle Bildschirmbreite oder im Standard mit Freiraum links und rechts neben dem Block).
Die Positionierung des Bildes legst Du über das Auswahl ➔“Bild Position” fest (rechts oder links).
