So fügen Sie in Elementor für Webdesign eine Hintergrundüberlagerung hinzu

Elementor ist ein führendes Seitenerstellungs-Plugin für WordPress, das Webdesign einfacher als je zuvor macht. Eine seiner herausragenden Funktionen ist die Option „Hintergrundüberlagerung“. Durch die richtige Nutzung der Funktion können Sie die Attraktivität und Ästhetik Ihrer Website auf die nächste Stufe heben.

Elementor bietet Ihnen mehrere Hintergrund-Overlay-Optionen. In diesem Artikel zeigen wir Ihnen eine Schritt-für-Schritt-Anleitung zu jeder dieser Optionen. Kommen wir also zum Artikel zum Hinzufügen einer Hintergrundüberlagerung in Elementor für das Webdesign.

Was ist eine Elementor-Hintergrundüberlagerung?

Eine Hintergrundüberlagerung ist eine halbtransparente Ebene, die über einem vorhandenen Hintergrundbild, Muster oder einer vorhandenen Farbe hinzugefügt wird. Sie können die Überlagerung mit verschiedenen Farben, Deckkraft, Farbverläufen und sogar Mustern anpassen, um visuell beeindruckende Effekte zu erzielen.

Das Hintergrund-Overlay ist eine Kernfunktion des Elementor-Plugins, das integriert ist. Sie können es sowohl für die kostenlose als auch für die Premium-Version verwenden. Diese Funktion ist besonders nützlich, wenn Sie Bilder mit geringer Qualität verwenden oder Text über einem beliebigen Hintergrund anzeigen.

Arten von Elementor-Hintergrundüberlagerungen

Grundsätzlich gibt es drei Arten von Hintergrundüberlagerungen, die Sie in Elementor hinzufügen können. Sie sind:

1. Einfarbige Überlagerung : Es wird lediglich eine einfarbige Überlagerung zu einem Webabschnitt oder -element hinzugefügt. Sie können diese Überlagerung anpassen, indem Sie eine Volltonfarbe und deren Deckkraftstufe auswählen.

2. Farbüberlagerung mit Farbverlauf : Mit dem Farbverlauf können Sie dem Hintergrund eines beliebigen Webabschnitts oder -elements mehrfarbige Überlagerungseffekte hinzufügen. Ich hoffe, Sie wissen bereits, was ein Farbverlauf ist. Oder warten Sie, wir besprechen es später in diesem Beitrag.

3. Bildüberlagerung : Mit dieser Funktion können Sie ein Bild mit einer Volltonfarbe, einer Textur oder einem Muster überlagern, um dessen Attraktivität zu steigern.

Besondere Hinweise Informationen zur Elementor-Hintergrundüberlagerung

Mit der Option „Hintergrundüberlagerung“ in Elementor können Sie Überlagerungen nur zum Widget-Hintergrund hinzufügen, nicht zum Inhaltshintergrund.

Sie benötigen ein zusätzliches Plugin wie HappyAddons, um den Overlay-Effekt direkt zum Inhaltshintergrund hinzuzufügen .

Wenn Sie also sowohl Elementor als auch HappyAddons auf Ihrer Website haben, können Sie die passende Hintergrund-Overlay-Option überall dort verwenden, wo Sie sie benötigen. Lassen Sie uns die Methoden erkunden.

Methode eins: So fügen Sie Overlays zum Widget-Hintergrund in Elementor hinzu

Wie bereits erwähnt, gibt es drei Arten von Hintergrundüberlagerungen, die Sie in Elementor hinzufügen können. Wir zeigen Ihnen nun, wie Sie alle diese Arten von Hintergrundüberlagerungen zu Elementor-Widgets hinzufügen.

Typ 01: Fügen Sie dem Elementor-Widget eine einfarbige Hintergrundüberlagerung hinzu

Ich hoffe, Ihr Abschnitt und Ihr Inhalt sind fertig. Klicken Sie im gesamten Abschnitt auf das Symbol „Container bearbeiten“ .

Gehen Sie zur Registerkarte Stil . Sie erhalten zwei Optionen: Hintergrund und Hintergrundüberlagerung . Mit diesen beiden Optionen können Sie Hintergrundüberlagerungen zu Elementor hinzufügen.

Öffnen Sie beispielsweise „Hintergrund“ . Wählen Sie das Pinselsymbol aus. Unten finden Sie die Option „Farbe“ , mit der Sie dem Hintergrund eine Volltonfarbe hinzufügen können.

Sie können sehen, dass wir eine Farbe für die Hintergrundüberlagerung des Widget-Bereichs ausgewählt haben.

Typ 02: Fügen Sie dem Elementor-Widget eine Hintergrundüberlagerung mit Verlaufsfarbe hinzu

Wählen Sie das Widget erneut aus. Gehen Sie zur Registerkarte Stil . Erweitern Sie die Option Hintergrund .

Wählen Sie neben dem Hintergrundtyp die Option „Verlauf“ aus . Darunter werden weitere Farboptionen angezeigt.

Wählen Sie nun eine Primär- und Sekundärfarbe aus, um Ihre Farbverlaufspalette zu erstellen. Sie werden sehen, dass die Farben als Hintergrundüberlagerung über Ihrem Widget angezeigt werden.

So können Sie Hintergrundüberlagerungen mit Farbverlauf für Ihren Widget-Hintergrund erstellen. Es gibt viele andere Optionen in Gradient. Ich hoffe, Sie können sie selbst erkunden und nutzen.

Typ 03: Fügen Sie dem Elementor-Widget eine Bildhintergrundüberlagerung hinzu

Für Bildüberlagerungen können Sie Bilder und einen einfarbigen Kragen kombiniert verwenden. Durch die Verwendung einer Volltonfarbe in Kombination mit dem Bild können Sie einen perfekten Kontrast erzeugen, sodass der darüber liegende Inhalt besser sichtbar ist. Mal sehen, wie das geht.

Gehen Sie zur Registerkarte Stil . Erweitern Sie die Option „Hintergrundüberlagerung“ . Klicken Sie auf die Option Bild . Sie können ein Bild auswählen und hinzufügen, sei es vom lokalen Laufwerk oder aus der Medienbibliothek.

Sie können sehen, dass wir der Hintergrundüberlagerung ein Bild hinzugefügt haben. Wählen Sie anschließend eine geeignete Position aus , damit diese perfekt zum Inhalt passt.

Erweitern Sie die Option Hintergrund . Wählen Sie als Nächstes eine passende Volltonfarbe aus , die zum Bild passt. Sie werden sehen, dass über dem Bild eine Ebene hinzugefügt wurde.

Gehen Sie zur Option Hintergrundüberlagerung .

Rufen Sie den Mischmodus auf, indem Sie im Elementor-Bedienfeld nach unten scrollen. Klicken Sie auf das Symbol auf der rechten Seite. Es öffnet sich eine Liste mit Mischmodi.

Wählen Sie eine Stimmung aus, die Ihnen gefällt, indem Sie alle Mischungsstimmungen in der Liste erkunden. Sie werden den Effekt auf dem Bild sehen.

Sie können sehen, dass die Hintergrundüberlagerung und die Textfarben nahezu ähnlich sind. Aus diesem Grund haben wir die Textfarbe geändert, um einen Kontrast zwischen ihnen zu schaffen und den Text gut lesbar zu machen.

So können Sie dem Hintergrund des Elementor-Widgets eine Hintergrundüberlagerung hinzufügen.

Methode Zwei: So fügen Sie in Elementor Überlagerungen zum Inhaltshintergrund hinzu

Der Vorgang des Überlagerns des Inhalts mit dem Hintergrund ist genau der gleiche wie bei der oben beschriebenen Methode. Dies ist eine kostenlose Funktion des HappyAddons-Plugins . Wenn Sie noch nicht viel über das Plugin wissen, erkunden Sie, was HappyAddons ist.

Kurz gesagt, HappyAddons ist ein aufregendes Add-on zum Elementor-Plugin. Es verfügt über mehr als 120 zusätzliche Widgets und mehr als 20 Funktionen. Mit ihnen können Sie die Einschränkungen von Elementor überwinden und Ihrer Website weitere spannende Funktionen hinzufügen.

Wo sind also die Hintergrund-Overlay-Optionen in HappyAddons? Wählen Sie das Inhalts-Widget aus . Gehen Sie zur Registerkarte „Erweitert“ . Auf dieser Registerkarte werden die Optionen „Hintergrund“ und „Hintergrundüberlagerung“ angezeigt.

Sie können sehen, dass die Namen dieser beiden Optionen und die Namen der beiden Optionen von Elementor genau gleich sind. Und auch ihr Arbeitsablauf ist derselbe. Lassen Sie uns den Prozess untersuchen.

Typ 01: Fügen Sie dem hinzugefügten Inhalt eine einfarbige Hintergrundüberlagerung hinzu

Wählen Sie das Inhalts-Widget aus . Gehen Sie zur Registerkarte „Erweitert“ im Elementor-Bedienfeld. Erweitern Sie die Option Hintergrund .

Wählen Sie eine Volltonfarbe . Sie werden sehen, dass die Farbe auf den Hintergrund des Inhalts angewendet wurde.

Typ 02: Fügen Sie dem hinzugefügten Inhalt eine Hintergrundüberlagerung mit Verlaufsfarbe hinzu

Wählen Sie wie bei der oben beschriebenen Methode unter „Hintergrund“ die Option „Verlauf“ aus . Legen Sie eine Primär- und Sekundärfarbe fest. Die Farbpalette wird hinter dem Inhalt auf der Elementor-Leinwand angezeigt.

Typ 03: Fügen Sie dem hinzugefügten Inhalt eine Bildhintergrundüberlagerung hinzu

Wählen Sie das Inhalts-Widget aus . Gehen Sie zur Registerkarte „Erweitert“ .

Erweitern Sie die Option „Hintergrundüberlagerung“ . Klicken Sie auf den Bildbereich .

Sie können ein Bild von Ihrem lokalen Laufwerk oder Ihrer Medienbibliothek hinzufügen, wie in der oben beschriebenen Methode beschrieben. Ich hoffe, Sie können es auch hier tun.

Jetzt wurde die Textfarbe geändert, um den Textinhalt vom Hintergrund hervorzuheben. Ich hoffe, dadurch ist der Inhalt nun besser und besser lesbar geworden.

So können Sie Ihren Inhalten in Elementor Bildhintergrund-Overlays hinzufügen.

Hinweis: Elementor-Plugins verlangsamen Websites normalerweise etwas. Es gibt jedoch viele Möglichkeiten, solche Websites zu beschleunigen. Entdecken Sie, wie Sie die Website-Geschwindigkeit optimieren können.

Letzte Anmerkungen!

Das Hinzufügen eines Hintergrund-Overlays ist heutzutage bei den meisten professionellen Website-Designern gängige Praxis. Es handelt sich um eine einfache Webdesign-Funktion, die jedoch enorme Möglichkeiten bietet, Ihre Webabschnitte und Inhalte wunderschön und spannend zu gestalten.

Vor Jahren war es wirklich sehr schwierig, Hintergrund-Overlays mit den Sprachen HTML und CSS zu erstellen. Aber Elementor hat es flexibler gemacht, was mit dem HappyAddons-Plugin noch viel weiter verbessert wurde. Wenn Sie dem Blogbeitrag folgen, können Sie nun hoffentlich fesselnde Überlagerungen des Hintergrunds und Inhalts Ihrer Website erstellen.

Sollten Sie immer noch Probleme mit dieser Funktion haben, kontaktieren Sie uns bitte über das Kommentarfeld oder die Live-Chat-Option. Wir werden uns umgehend mit einer praktikablen Lösung bei Ihnen melden.