Du möchtest in Elementor ein rundes Bild erstellen, zum Beispiel für ein Profilbild, ein Teammitglied oder ein Design-Element. Standardmäßig zeigt Elementor Bilder jedoch immer eckig an. Mit einer einfachen Einstellung im Editor kannst du dein Elementor Bild in wenigen Sekunden rund machen.
So erstellst du ein rundes Bild in Elementor
Ein rundes Bild in Elementor zu erstellen ist schnell erledigt. Du brauchst dafür keine Plugins und auch kein CSS. Die Einstellung findest du direkt im Bild-Widget.
1. Öffne die Seite im Elementor Editor
Gehe im WordPress-Backend zu der Seite oder dem Beitrag, den du bearbeiten möchtest.
Klicke anschließend auf „Mit Elementor bearbeiten“, um den Elementor Editor zu öffnen.
2. Füge ein Bild-Widget ein oder wähle dein Bild aus
Ziehe das Bild-Widget aus der linken Widget-Liste in deine Section.
Falls bereits ein Bild auf der Seite vorhanden ist, kannst du einfach direkt auf dieses Bild klicken.
Dadurch öffnet sich automatisch die Bearbeitung für dieses Bild-Widget.
3. Wechsle zum Tab „Stil“
In der linken Elementor-Seitenleiste siehst du oben die drei Bereiche:
Inhalt
Stil
Erweitert
Klicke auf „Stil“, um die Design-Einstellungen für das Bild zu öffnen.
4. Stelle den Eckenradius auf 50 %
Scrolle im Tab Stil zum Feld Eckenradius.
Standardmäßig steht die Einheit rechts auf px.
Klicke auf px und ändere die Einheit auf %.
Gib anschließend 50 ein.
Elementor rundet damit automatisch alle vier Ecken des Bildes gleichmäßig ab. Das Bild wird dadurch kreisförmig dargestellt.
Wichtig: Diese Methode funktioniert nur sauber, wenn dein Bild quadratisch ist. Zum Beispiel 800 × 800 px oder 600 × 600 px.
Wenn dein Bild rechteckig ist
Ist dein Bild zum Beispiel 800 × 600 px, entsteht mit 50 % kein perfekter Kreis, sondern eine ovale Form.
In diesem Fall kannst du das Bild trotzdem rund darstellen:
- Klicke auf das Bild-Widget
- Gehe zu Stil
- Setze eine feste Breite und Höhe in px (z. B. 300 × 300 px)
- Stelle darunter Objektanpassung auf Ausfüllen
Elementor schneidet das Bild dann passend zu und zeigt es im runden Container korrekt an.
Diese Methode funktioniert auch mit rechteckigen Bildern zuverlässig.
Alternative Lösung: Rundes Bild mit CSS
Wenn du mehr Kontrolle haben willst oder das runde Bild per CSS lösen möchtest, geht das ebenfalls direkt in Elementor. Das ist vor allem dann praktisch, wenn du den Effekt gezielt technisch steuern willst.
So funktioniert es mit CSS
Öffne zuerst das Bild-Widget in Elementor und gehe dann auf Erweitert. Wenn du Elementor Pro nutzt, findest du dort den Bereich Benutzerdefiniertes CSS.
Füge dort diesen Code ein:
selector img {
border-radius: 50%;
}
Damit wird das eingefügte Bild rund dargestellt.
Wichtig bei dieser Methode
Auch diese CSS-Lösung funktioniert nur dann perfekt, wenn dein Bild quadratisch ist. Ist das Bild rechteckig, wird es trotz border-radius: 50% eher oval als rund.
Dann brauchst du zusätzlich eine feste Breite und Höhe sowie eine passende Objektanpassung. Zum Beispiel so:
selector img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 50%;
}
Damit bekommt das Bild eine feste quadratische Fläche und wird sauber rund zugeschnitten.
Die normale Einstellung im Elementor Editor reicht in den meisten Fällen völlig aus. CSS ist eher dann sinnvoll, wenn du das Bild ganz gezielt anpassen willst oder mit festen Größen arbeitest.
Wenn du nur schnell ein rundes Bild in Elementor erstellen willst, bist du mit der normalen Einstellung im Tab Stil meistens schneller am Ziel.
Typische Probleme
Beim Erstellen eines runden Bildes in Elementor treten immer wieder die gleichen kleinen Probleme auf. Die folgenden Punkte lösen die häufigsten Ursachen.
Bild wird oval statt rund
Wenn dein Bild oval aussieht, liegt das fast immer am Seitenverhältnis des Bildes.
Ein Bild mit 800 × 600 px oder 1200 × 800 px ist rechteckig. Wenn du darauf 50 % Eckenradius anwendest, entsteht automatisch eine ovale Form.
Die einfachste Lösung ist ein quadratisches Bild, zum Beispiel 800 × 800 px.
Alternativ kannst du im Bild-Widget eine feste Breite und Höhe einstellen und anschließend Objektanpassung → Ausfüllen wählen. Elementor schneidet das Bild dann passend zu.
Bild wird abgeschnitten
Wenn dein Bild rund dargestellt wird, kann es passieren, dass wichtige Bereiche abgeschnitten werden. Das liegt daran, dass der Kreis einen Teil des Bildes ausblendet.
Das passiert besonders häufig bei Porträts oder Gruppenbildern.
Die Lösung ist einfach: Wähle ein Bild, bei dem sich das Motiv mittig im Bild befindet.
Bild wird nicht mittig angezeigt
Manchmal ist das runde Bild zwar korrekt, sitzt aber nicht mittig in der Section.
Klicke dafür auf das Bild-Widget und gehe zu Inhalt → Ausrichtung.
Stelle dort Zentriert ein.
Alternativ kannst du auch im Container oder in der Spalte die Ausrichtung auf Mitte setzen.
Bild bleibt eckig
Wenn sich nichts verändert, hast du meistens nicht das Bild-Widget ausgewählt.
Achte darauf, dass im Elementor Panel links wirklich „Bild“ ausgewählt ist. Wenn dort Container oder Section steht, wirken sich die Einstellungen nicht auf das Bild aus.
Wähle also direkt das Bild aus und stelle dann den Eckenradius auf 50 %.
Elementor rundes Bild erstellen: Kurz zusammengefasst
Ein rundes Bild in Elementor erstellst du, indem du im Bild-Widget den Eckenradius auf 50 % stellst und die Einheit von px auf % umstellst. Am saubersten funktioniert das mit quadratischen Bildern. Bei rechteckigen Bildern kannst du eine feste Breite und Höhe in px setzen und die Objektanpassung auf „Ausfüllen“ stellen.
