Bildkarten – oben ein Bild, darunter ein Titel und eine Textzeile – gehören zu den häufigsten Blöcken auf einer Marketingseite. Sie entsprechen dem Elementor-Widget Bild-Box, doch ein paar Details entscheiden darüber, ob das Ergebnis richtig aussieht.
Wann eine Karte zur Bild-Box wird
Ein Container mit genau einem Bild, einer Überschrift und höchstens einem Absatz und ohne weitere Inhaltselemente wird in eine einzige Bild-Box umgewandelt. Dabei gibt es eine bewusste Schutzregel: Enthält die Karte zusätzlichen Text neben Überschrift und Absatz – eine Schrittnummer, ein Badge, einen Preis –, wird die Umwandlung übersprungen und der Block bleibt ein normaler Container. Diesen zusätzlichen Text zu verlieren wäre schlimmer als ein etwas tieferer Baum.
Damit das Bild die Karte wirklich ausfüllt
Die Bild-Box von Elementor zeigt das Bild standardmäßig mit 30 % Breite. Das passt zu einer konvertierten Karte so gut wie nie, daher wird die Anzeigebreite explizit festgelegt – abgeleitet davon, wie breit das Bild im Verhältnis zu seiner Karte ist. Randlose Bilder erhalten 100 %.
Hat das Quellbild mit object-fit: cover eine feste Höhe (oder eine aspect-ratio-Box) gefüllt, wird auch das übernommen: Die gerenderte Höhe und Object Fit = Cover werden in das Widget geschrieben. Der praktische Nutzen zeigt sich im Platzhaltermodus – die Einstellungen sind bereits gesetzt, sodass ein echtes Bild, das Sie später in den leeren Platzhalter ziehen, sofort zugeschnitten wird und die Karte füllt, statt als kleines Vorschaubild anzukommen, das Sie von Hand vergrößern müssen.
Abgerundete Ecken
Abgerundete Kartenecken entstehen meist durch border-radius plus overflow:hidden auf der Karte, wodurch das randlose Bild an der abgerundeten Oberkante beschnitten wird. Da eine abgeflachte Bild-Box keine eigene Overflow-Einstellung hat, erhält das Bild direkt einen passenden Radius und schließt so bündig mit dem abgerundeten Rahmen der Karte ab.
Die eine echte Einschränkung
Die Bild-Box von Elementor hat keine Einstellung für den Innenabstand des Inhalts. Hat Ihr Design ein randloses Bild mit einem Texteinzug von beispielsweise 18 px, lässt sich dieser Einzug im Widget nicht nachbilden – der Innenabstand des Widgets würde auch das Bild einrücken. Der Text sitzt dann nah an der Kartenkante.
Sind Ihnen pixelgenaue Textabstände wichtiger als ein einzelnes aufgeräumtes Widget, lassen Sie diesen Block als Container mit getrennten Bild-, Überschrift- und Text-Widgets; jedes behält seinen eigenen Innenabstand. Das ist ein echter Zielkonflikt zwischen aufgeräumter Struktur und exakten Abständen – gut zu wissen, bevor Sie eine ganze Seite voller Karten konvertieren.
Object Fit braucht eine Höhe, um zu wirken
Ein Detail, das einen ganz bestimmten Ärger erklärt: Die Bild-Box von Elementor hat zwar eine Object-Fit-Einstellung, doch sie greift nur, wenn das Bild zusätzlich eine explizite Höhe hat – so ist das Widget gebaut, und das ist am Quellcode des Widgets in Elementor selbst überprüft, nicht bloß angenommen.
Object Fit allein zu setzen bewirkt also nichts. Die Konvertierung schreibt deshalb entweder beides oder keines von beiden: Füllt das Quellbild mit object-fit: cover eine feste Höhe, werden die gerenderte Höhe und der Fit-Wert als Paar geschrieben.
Wenn Sie das Bild später austauschen und der Zuschnitt nicht mehr funktioniert, prüfen Sie zuerst das Höhenfeld. Wird es geleert, ist Object Fit stillschweigend außer Kraft – und das Widget gibt Ihnen keinen Hinweis, dass beides zusammenhängt.
Warum der Standardwert von 30 % so viel ausmacht
Die Bild-Box von Elementor zeigt das Bild ab Werk mit 30 % Breite, was zu ihrem ursprünglichen Zweck passt – ein Bild in Icon-Größe neben einem Textblock. In einer konvertierten Karte sieht das aus, als wäre die Konvertierung fehlgeschlagen: ein kleines Vorschaubild, das über einer Überschrift schwebt, ganz anders als das randlose Bild in der Quelle.
Die Breite wird deshalb immer explizit gesetzt, berechnet daraus, wie breit das Bild im Verhältnis zu seiner Karte tatsächlich ist. Ein randloses Bild erhält 100 %, ein eingerücktes Bild mit halber Breite die Breite, die es hatte. Eine Kleinigkeit, die entscheidet, ob eine Seite voller konvertierter Karten auf den ersten Blick fertig oder kaputt aussieht.
Pro Seite entscheiden, nicht pro Karte
Die oben beschriebene Einschränkung beim Innenabstand ist ein echter Zielkonflikt, und es lohnt sich, einmal pro Seite zu entscheiden statt Karte für Karte. Konvertieren Sie eine repräsentative Karte auf beide Arten – einmal als Bild-Box, dann noch einmal mit einem zusätzlichen Element in der Karte, damit sie ein Container bleibt – und vergleichen Sie beide nebeneinander in Mobilbreite.
Fällt der Texteinzug so stark auf, dass er Sie stört, nehmen Sie für die ganze Seite den Container-Weg und bleiben Sie dabei. Eine Seite, auf der manche Karten Bild-Boxen und andere Container sind, ist das schlechteste Ergebnis: Sie sieht gut aus, aber bei jeder künftigen Änderung müssen Sie sich merken, was was ist.
Checkliste für Bildkarten
- Laden Sie Bilder zuerst in die Mediathek hoch und verweisen Sie auf echte
https://-URLs – sie werden ohne manuellen Schritt importiert. - Andernfalls verwenden Sie Leere Bildplatzhalter; jeder Platzhalter behält seinen
alt-Text als Beschriftung, damit Sie wissen, welches Bild wohin gehört. - Beschränken Sie die Karte auf Bild + Überschrift + einen Absatz, wenn Sie das Ergebnis als einzelnes Widget möchten.
- Vermeiden Sie per Base64 eingebettete Bilder; sie werden absichtlich durch Platzhalter ersetzt.
- Wenn Sie ein Bild nachträglich austauschen und der Zuschnitt nicht mehr stimmt, prüfen Sie, ob das Höhenfeld noch gesetzt ist – ohne Höhe bewirkt Object Fit nichts.