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 die Bildquellen für Hintergrundbilder in Elementor als Text auf Bild legen 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 Bilder 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 in Elementor den Text über dem Bild 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

Ich kann nicht alle neuen Elementor-Blöcke oder deren Updates testen, daher kann es noch Umgebungen geben, in denen ISC keine Bildquellen anzeigen kann. Solltest du einen weiteren finden, dann melde dich bitte. Aktuell bekannt sind mir nur:

• Elementor Slider

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.