Bildquellen zu Elementor Hintergrundbildern hinzufügen

Der Elementor Page Builder erlaubt es dir, Bilder in verschiedenen Positionen einzufügen. Neben dem Beitragsbild und Bildern im Inhalt, kannst du auch Hintergrundbilder zu Sektionen, Containern und Absätzen ergänzen.

Image Source Control unterstützt alle diese Bildpositionen, so dass du auch Bildquellen für Hintergrundbilder in Elementor anzeigen kannst.

Diese Seite enthält Details zur Implementierung von Bildquellen für Elementor-Hintergründe und wie du diese stylen kannst.

Bildquellen für Elementor aktivieren

Image Source Control funktioniert mit Beitragsbildern und Bildern in Beitragsinhalten, auch, wenn diese mit Elementor hinzugefügt wurden.

Die Unterstützung für Hintergrundbilder muss jedoch explizit gewählt werden. Aktiviere dazu die Option Elementor unter Einstellungen > Bildquellen^(?) > Verschiedene Einstellungen.

Diese Option wird nur angezeigt, wenn Elementor aktiviert ist.

Bildquellen in Elementor

Elementor legt Bildquellen in der Mediathek ab. Hier findest du auch die Felder, um Bildquellen zu verwalten. Weitere Details dazu unter Verwende die Medienübersicht.

Styling des Overlays

Das Overlay für Bildquellen von Hintergrundbildern wird wahrscheinlich anders aussehen als das von Bildern im Inhalt. Aufgrund der Vielzahl an Layouts, die Elementor zur Verfügung stellt, haben wir zu diesem Zeitpunkt auf die Anpassung des Overlays verzichtet und liefern es ohne Styling aus.

Unten findest du Beispiele für eigenes CSS um das Overlay selbst anzupassen.

Wenn du eigene CSS-Regeln erstellst die für andere Nutzer interessant sein könnten, dann schick Sie uns und wir veröffentlichen sie hier ebenfalls.

Zeige das Overlay in Sektionen unten rechts an

.elementor-section .isc-source-text {
    position: absolute;
    bottom: 0;
    right: 0;
}Code-Sprache: CSS (css)

Bekannte Einschränkungen

Wie bereits erwähnt, stylen wir das Overlay für Hintergrundbilder nicht. Die Option Position der Beschriftung über dem Bild wird daher ebenfalls ignoriert.

Die Option Overlay > Enthaltene Bilder wird insofern ignoriert, als dass Overlays für Hintergrundbilder unabhängig von ihrer Position in oder außerhalb des Beitragsinhaltes angezeigt werden.

Das Overlay und die Beitrags-Quellenliste tauchen nicht in der Bearbeitungsansicht von Elementor auf.

Verschachtelte Elemente mit verschiedenen Hintergrundbildern zeigen nur einen Overlay mit einer Bildquelle an. Beispiel: ein Container mit einem Hintergrundbild enthält einen Absatz mit einem weiteren Hintergrund.

Links in Overlays funktionieren nicht, wenn das Element mit dem Hintergrund bild selbst ein Link (<a> Tag) ist. Das ansonsten invalide HTML würde dazu führen, dass das Overlay auseinanderbricht.