Bildkarten – ein Bild oben, darunter ein Titel und eine Textzeile – gehören zu den häufigsten Blöcken auf einer Marketingseite. Sie entsprechen dem Image-Box-Widget von Elementor, aber ein paar Details entscheiden darüber, ob das Ergebnis richtig aussieht.
Wenn eine Karte zu einer Image-Box wird
Ein Container mit genau einem Bild, einer Überschrift und höchstens einem Absatz und keinen anderen Inhaltselementen wird in eine einzige Image-Box umgewandelt. Es gibt eine bewusste Schutzregel: Enthält die Karte zusätzlichen Text über Überschrift und Absatz hinaus – eine Schrittnummer, ein Badge, einen Preis –, wird die Umwandlung übersprungen und der Block stattdessen als normaler Container beibehalten. Diesen zusätzlichen Text zu verlieren wäre schlimmer, als eine etwas tiefere Struktur beizubehalten.
Das Bild die Karte tatsächlich ausfüllen lassen
Elementors Image-Box zeigt das Bild standardmäßig mit 30 % Breite. Das ist fast nie das, was eine konvertierte Karte erfordert, daher wird die Anzeigebreite explizit daraus abgeleitet, wie breit das Bild im Verhältnis zu seiner Karte ist – randlose Bilder erhalten 100 %.
Wenn das Quellbild object-fit: cover verwendet hat, um eine feste Höhe (oder eine aspect-ratio-Box) zu füllen, wird auch das übernommen: Die gerenderte Höhe plus Object Fit = Cover werden in das Widget geschrieben. Der praktische Nutzen zeigt sich im Platzhaltermodus – die Einstellungen sind bereits vorhanden, sodass ein echtes Bild, das Sie später in den leeren Slot ziehen, sofort zugeschnitten wird und die Karte füllt, statt als kleines Vorschaubild anzukommen, das Sie manuell vergrößern müssen.
Abgerundete Ecken
Abgerundete Kartenecken entstehen normalerweise durch border-radius plus overflow:hidden auf der Karte, wodurch das randlose Bild an der abgerundeten Oberkante beschnitten wird. Da eine abgeflachte Image-Box keine eigene Überlaufsteuerung besitzt, erhält das Bild direkt einen passenden Radius, sodass es mit dem abgerundeten Rahmen der Karte übereinstimmt.
Die eine echte Einschränkung
Elementors Image-Box bietet keine Steuerung für den Inhaltsabstand. Wenn Ihr Design ein randloses Bild mit einem Texteinzug von beispielsweise 18 px hat, lässt sich dieser Einzug im Widget nicht nachbilden – der eigene Innenabstand des Widgets würde auch das Bild einrücken. Der Text sitzt dann nahe an der Kartenkante.
Wenn Ihnen pixelgenaue Textabstände wichtiger sind als ein einziges aufgeräumtes Widget, belassen Sie diesen Block als Container mit getrennten Bild-, Überschriften- und Text-Widgets; jedes behält seinen eigenen Innenabstand. Es ist ein echter Kompromiss zwischen struktureller Ordnung und exakten Abständen – gut zu wissen, bevor Sie eine ganze Seite mit Karten konvertieren.
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. - Verwenden Sie andernfalls leere Bildplatzhalter; jeder Slot 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 Ein-Widget-Ergebnis möchten.
- Vermeiden Sie Base64-eingebettete Bilder; sie werden absichtlich zu Platzhaltern verworfen.