Block: Julia Cover
Block: Julia Cover
Der Julia Cover-Block ermöglicht es, ein Bild mit einem Text-Overlay zu kombinieren. Der Text liegt dabei über dem Bild. Für verschiedene Bildschirmgrößen (Breakpoints) können unterschiedliche Bilder hinterlegt werden — so werden Mobilgeräte, Tablets und Desktop-Bildschirme mit dem jeweils passenden Bild versorgt.
Der Block ähnelt dem WordPress-Standardblock „Cover“, bietet aber zusätzlich die Möglichkeit, pro Bildschirmbreite ein eigenes Bild zu verwenden.
Block einfügen
- Klicke im Editor auf das +-Symbol, um einen neuen Block einzufügen.
- Suche nach „Julia Cover“ oder wähle den Block aus der Kategorie Julia Blocks.
- Der Block erscheint im Editor mit einer leeren Vorschau und dem Block-Header „Julia Cover“.
Bilder hinzufügen
Nach dem Einfügen des Blocks werden beim Anklicken des Blocks sechs Bildfelder sichtbar — eines für jeden Breakpoint.
| Bildfeld | Greift ab |
|---|---|
| Mobile | Standard (< 768 px) |
| Tablet | ≥ 768 px |
| Tablet-L | ≥ 1024 px |
| Laptop | ≥ 1280 px |
| Desktop | ≥ 1440 px |
| Large | ≥ 1920 px |
Hinweise:
- Nur das Mobile-Bild ist Pflicht. Alle anderen Felder sind optional. Ist ein Feld leer, wird automatisch das nächstkleinere vorhandene Bild verwendet.
- Empfehlung: Für Mobilgeräte ein hochkant oder quadratisches Bild, für Desktop ein Querformat.
So fügst du ein Bild ein:
- Klicke auf Bild auswählen im gewünschten Bildfeld.
- Die WordPress-Mediathek öffnet sich.
- Wähle ein vorhandenes Bild aus oder lade ein neues hoch.
- Bestätige mit Auswählen.
Das Bildfeld zeigt anschließend eine Vorschau des Bildes. Über den Button Bild entfernen kannst du das Bild wieder löschen.
Text-Overlay bearbeiten
Unterhalb der Bildfelder befindet sich der Text-Overlay-Bereich. Standardmäßig enthält er einen Überschrift-Block (H2) und einen Absatz-Block.
- Den Text kannst du direkt im Editor bearbeiten — wie bei jedem anderen WordPress-Block.
- Du kannst weitere Blöcke hinzufügen (z. B. einen Button), indem du auf das +-Symbol im Overlay-Bereich klickst.
- Blöcke können per Drag-and-drop umsortiert werden.
Overlay-Position wählen
Du kannst bestimmen, wo der Text auf dem Bild erscheint. Wähle dazu unter Position des Overlays eine der sieben Optionen:
| Option | Beschreibung |
|---|---|
| Mitte | Zentriert über dem Bild (Standard) |
| Oben Links | Oben links |
| Oben Mitte | Oben zentriert |
| Oben Rechts | Oben rechts |
| Unten Links | Unten links |
| Unten Mitte | Unten zentriert |
| Unten Rechts | Unten rechts |
Hinweis: Im Editor ist die Position optisch nicht als Bildvorschau sichtbar — sie wirkt sich erst im Frontend aus. Prüfe das Ergebnis über die WordPress-Vorschau-Funktion (oben rechts im Editor).
Ergebnis im Frontend
Im Frontend rendert der Block ein <picture>-Element, das je nach Bildschirmbreite das passende Bild lädt. Der Text-Overlay liegt absolut über dem Bild — an der gewählten Position.
Alt-Text
Der Alt-Text des Bildes wird automatisch aus den Metadaten des Mobile-Bildes übernommen, wie er in der WordPress-Mediathek hinterlegt ist. Stelle sicher, dass das Mobile-Bild in der Mediathek einen aussagekräftigen Alt-Text hat.
Häufige Fragen
Was passiert, wenn ich kein Mobile-Bild hinterlege, aber ein Tablet-Bild?
Der <picture>-Block zeigt kein Fallback-<img>. Hinterlege immer mindestens das Mobile-Bild.
Kann ich beliebige Blöcke in den Overlay-Bereich einfügen?
Ja — du kannst Überschriften, Absätze, Buttons, Listen und viele andere Blöcke hinzufügen.
Wirkt sich die Positions-Einstellung schon im Editor aus?
Nein. Die gewählte Position ist erst im Frontend oder in der Vorschau sichtbar.