Uncovering the Cover Block in WordPress
Einleitung
Der Cover Block in WordPress ist ein vielseitiges Werkzeug, das sich hervorragend für die Erstellung von Headern, Banner-Displays, Call-to-Actions und mehr eignet. Mit dem Cover Block kannst du Text und andere Inhalte über einem Bild oder Video platzieren. Im Folgenden erfährst du, wie du den Cover Block effektiv nutzen kannst, um ansprechende Designs zu erstellen.
Wichtige Funktionen und Einstellungen
Der Cover Block ist ein Container-Block, der andere Blöcke aufnehmen kann. Beim Hinzufügen eines Cover Blocks zu deiner Seite kannst du ein Bild oder Video von deinem Computer oder aus der Mediathek hochladen. Alternativ kannst du die Option „Ausgewähltes Bild verwenden“ wählen, um das Cover als ausgewähltes Bild deiner Seite oder deines Beitrags festzulegen. Durch Klicken auf die farbigen Kreise kannst du eine Überlagerungsfarbe hinzufügen, die später in den Seitenleisten-Einstellungen aktualisiert werden kann.
Beim Einfügen eines Bildes aus der Mediathek fügt WordPress automatisch eine Überlagerungsfarbe hinzu, die das Bild ergänzt. Nach dem Einfügen wähle den Cover Block in der Listenansicht aus und ändere die Ausrichtung über die Block-Werkzeugleiste auf volle Breite. Du kannst auch die Position des Inhalts anpassen, z. B. oben links oder in der Mitte. Zudem kannst du den Cover Block auf volle Höhe umschalten und bei Bedarf einen Duotone-Filter hinzufügen. In den Seitenleisten-Einstellungen kann die Option „Fixierter Hintergrund“ für einen Parallax-Effekt ausgewählt werden. Die Option „Hintergrund wiederholen“ ist nützlich, wenn ein Bild nicht die Größe des Raumes füllt, den es einnehmen soll. Der Fokuspunktauswähler hilft, den wichtigsten visuellen Punkt eines Bildes zu bestimmen, insbesondere für die mobile Ansicht. Vergiss nicht, Alt-Text hinzuzufügen, um den Zweck des Bildes für Screenreader und SEO zu beschreiben. Unter „Stile“ kannst du die Überlagerungsfarbe bearbeiten und deren Deckkraft anpassen. Zudem kann Padding hinzugefügt werden, um mehr Platz um den Inhalt im Cover Block zu schaffen.
Beispiel: Banner
Um ein Banner zu erstellen, füge zunächst einen Cover Block hinzu und wähle ein Bild aus der Mediathek. Ändere die Ausrichtung auf volle Breite und positioniere den Inhalt im oberen mittleren Bereich. Füge dann Text hinzu, zum Beispiel „Erkunde die Berge“, und passe die Textgröße auf eine benutzerdefinierte Größe an, z. B. „4 rem“. Ändere das Erscheinungsbild des Textes auf „mittel“.
Um die Textausrichtung zu ändern, wickle den Absatzblock oder Text in einen Gruppenblock ein und deaktiviere „Innere Blöcke verwenden Inhaltsbreite“. Danach ändere die Ausrichtung des Gruppenblocks auf volle Breite. Wähle den Cover Block aus, öffne „Stile“ und setze die Überlagerungsdeckkraft auf 50 %. Füge bei Bedarf Padding hinzu. Schließe die Listenansicht in den Seitenleisten-Einstellungen, um das Design abzuschließen. Prüfe auch, wie es auf mobilen Geräten aussieht.
Wenn das Bild nicht beschnitten werden soll, ändere das Seitenverhältnis. Öffne „Stile“, scrolle zu „Seitenverhältnis“ und wähle ein klassisches 3×2-Seitenverhältnis. So bleibt das Bild auf mobilen Geräten unbeschnitten und behält seine Proportionen bei.
Beispiel: Parallax-Effekt
Für einen Parallax-Effekt füge einen Cover Block hinzu und wähle ein Bild aus der Mediathek. Ändere die Ausrichtung auf volle Breite und aktiviere die volle Höhe des Blocks. Wähle in den Seitenleisten-Einstellungen „Fixierter Hintergrund“, um den Parallax-Effekt zu erzeugen. Dupliziere den Block über die drei vertikalen Punkte in der Block-Werkzeugleiste.
Füge ein neues Bild hinzu und öffne die Listenansicht, um beide Cover Blocks auszuwählen und in einen Gruppenblock zu integrieren. Um den Abstand zwischen den Bildern zu entfernen, öffne die Stile des Gruppenblocks, gehe zu „Blockabstand“ und setze ihn auf null. Beachte, dass diese Einstellung je nach verwendetem Theme möglicherweise nicht sichtbar ist.
Weitere Optionen
Der Cover Block kann auch für andere Designs verwendet werden, wie z. B. Call-to-Actions für Portfolio-Websites. Besuche das Musterdirektorium, um großartige Muster zu finden, die mit dem Cover Block erstellt wurden. Ein Beispiel ist die Verwendung eines Header-Musters für eine Website eines Eulenschutzgebiets mit Logo und Seitentitel oben links und dem Navigationsmenü oben rechts. Auch hier ist eine mobile Ansicht verfügbar.