Bilder in Divi einzufügen geht ganz einfach mit dem Bildelement. So gehst du vor:
Bild hinzufügen
- Klicke im Divi-Builder auf das Symbol, um ein neues Modul hinzuzufügen.
- Wähle das „Bildelement“ aus der Liste der Module aus und klicke auf das Symbolbild.
- Es öffnet sich die Mediathek. Wähle ein Bild aus oder lade ein neues Bild hoch, falls es noch nicht in der Mediathek vorhanden ist.
Bild-Einstellungen im Reiter „Design“
Nach dem Hinzufügen kannst du die Gestaltung des Bildes im Bereich „Design“ des Bildelements anpassen.
Ausrichtung:
- Hier kannst du die Bildausrichtung festlegen: linksbündig, zentriert oder rechtsbündig.
Breite:
- Du kannst die Breite des Bildes anpassen, zum Beispiel auf 50 Prozent der verfügbaren Breite, wo nun die Bildausrichtung einen Unterschied macht.
Zwischenräume und Abstände:
- Passe zum Beispiel die Außenabstände an, um das Bild weiter oben oder unten zu platzieren.
Rand und abgerundete Ecken:
- Gib dem Bild eine Umrandung und wähle die Umrandungsfarbe aus.
- Du kannst auch die Ecken abrunden, indem du die Verlinkung der Ecken-Bearbeitung aufhebst und spezifische Werte für einzelne Ecken festlegst.
Schatten und Filter:
- Füge dem Bild einen Schatten hinzu, um einen 3D-Effekt zu erzielen.
- Verwende einen Filter, um den Farbton, die Sättigung oder die Helligkeit des Bildes anzupassen. Du kannst das Bild auch in Schwarz-Weiß umwandeln, einen Sepia-Effekt hinzufügen oder das Bild auf Wunsch transparent erscheinen lassen.
Bild-Einstellungen im Reiter „Transformieren“
Unter dem Punkt „Transformieren“ findest du folgende Funktionen:
Bildrotation und Verzerrung:
- Drehe das Bild, stelle es schräg oder verzerre es, falls dies zum Design passt.
Animationen:
- Wenn du möchtest, kannst du dem Bild eine Animation hinzufügen. Sei jedoch sparsam mit solchen Effekten, da sie die Nutzerin ablenken und von Google gegebenenfalls negativ bewertet werden können. Sinnvoll kann eine Animation hingegen sein, wenn du den Fokus auf das Element lenken möchtest.
Bild-Einstellungen im Reiter „Erweitert“
Zu den erweiterten Funktionen gehören Sichtbarkeit, Bedingungen und Attribute. Hier kannst du festlegen, falls das Bild nur zu bestimmten Zeiten sichtbar sein soll. Oder weise dem Bild CSS-Klassen zu und ergänze benutzerdefiniertes CSS, um das Bild noch individueller zu gestalten.
Probiere die verschiedenen Funktionen aus und finde heraus, welche für dich sinnvoll sind. Viel Spaß beim Gestalten deiner Bilder!
