Mit dem Gutenberg-Block Hero Image werden Webseitenbesucher auf einer Seite mit einer Kombination aus Bild und Text angesprochen. Darüber hinaus ist das Hero Image für die Erstellung einer individuellen Startseite ein besonders geeigneter Block. Live-Demo ansehen.
Den Hero-Image-Block einfügen #
Du findest diesen Block im Bereich “Magnesites Blocks” in der Liste der Gutenberg-Blöcke unter Hero Image. Wie Du ihn einfügst und wie Du mit Gutenberg-Blöcken umgehst, kannst Du in diesem Handbuch-Eintrag nachlesen.
Bild des Hero Images anpassen #
Per Klick auf den Button ➔“Bild hinzufügen” öffnet sich Deine Mediathek, aus der Du ein Bild in den Gutenberg-Block laden kannst. Ein Bild muss zur Nutzung in der Mediathek liegen. Dies ist ein Pflichtfeld. Das Bild muss in der Breite über mindestens 1.500 Pixel und in der Höhe über mindestens 600 Pixel verfügen. Wie Du mit der Mediathek arbeitest, darüber erfährst Du mehr in diesem Handbuch-Eintrag.
Über das darunterliegende Auswahlfeld ➔“Titelbild Positionierung” bestimmt Du die horizontale und vertikale Ausrichtung des Bildes.
Mit dem Auswahlfeld ➔“Höhe” definierst Du, ob das Hero Image über den halben oder über den ganzen Bildschirm angezeigt werden soll.
Inhalte des Hero Images definieren #
Im obersten Eingabefeld ➔“Titel” schreibst Du kurz und bündig, worum es inhaltlich geht. Diese Überschrift ist ein Pflichtfeld.
Im zweiten Eingabefeld ➔“Untertitel” hast Du Platz für eine zweite, kleine Überschrift (Untertiel). Fasse Dich am besten auch hier kurz.
Um die Farbauswahl der Hero Image Text-Balken anzupassen, musst Du in den Bereich ➔“Einstellungen” in das Modul “Text & Schriftarten” wechseln. In diesem Magnesites Block werden standardmäßig die Hauptfarbe für den Titel-Balken und die Zweitfarbe für den Untertitel-Balken verwendet.
Sind die Inhalte definiert, kannst Du abschließend über die Auswahlfelder ➔“Ausrichtung horizontal” und ➔“Ausrichtung vertikal” die Positionierung der Text-Balken innerhalb des Hero Image Blocks festlegen. Hier sollte unbedingt darauf geachtet werden, dass die Positionierung der Inhalte und die Ausrichtung des Bildes ein stimmiges Gesamtbild ergeben.
