Elementor: Doppelbelichtung-Effekt für Website-Hintergründe

Der bezaubernde Effekt aus der Analogfotografie lässt sich jetzt nicht nur mit Softwares zur Bildbearbetung simulieren. Mit dem Elementor Page Builder bekommst du eine Möglichkeit, die Doppelbelichtung auf deiner Homepage ohne Photoshop zu erreichen.

Die von Fans erstellten Filmplakate sehen oft besser aus als professionelle Poster, die normalerweise vor dem Release präsentiert werden. Wahrscheinlich liegt die Ursache darin, dass Fans im Vergleich zu Grafikern ihre Plakate dann machen, nachdem sie sich den Film schon mehrmals angesehen und alle Details gut erlernt haben. Denn die besten Tools sind längst für alle - sowohl für Profis als auch für Hobby-Designer - verfügbar. Was haben attraktive Filmposter mit unserem heutigen Thema zu tun?

Es ist so, dass für Filmplakate eine Unzahl von verschiedenen Design-Techniken verwendet wird. Die Doppelbelichtung gehört zu besonders schönen Effekten, die einen bleibenden Eindruck hinterlassen. Es handelt sich dabei um die Überlagerung bzw. Verschmelzung zweier Bilder. Dieser Effekt kann nicht nur die Essenz des Films auf interessante Weise wiedergeben, sondern auch eine Website aufhübschen. Inspiriert von der Foto- und Filmkunst nutzen viele Webdesigner die Doppelbelichtung, um Hintergründe ansprechend zu gestalten.

Die Doppelbelichtung lässt sich in Photoshop sowie in anderen Bildbearbeitungsprogrammen ausführen. Wenn du Elementor zur Layouterstellung verwendest, dann kommst du ganz ohne diese Softwares aus. Die Funktionalitäten von diesem Page Builder wurden vor kurzem erweitert, sodass du verschiedene Effekte direkt auf Seiten erzielen kannst. Da du zwischen Programmen hin- und her nicht mehr wechseln musst, sparst du dir mit Elementor WordPress Themes etwas Zeit. 

Atemberaubender Hintergrund in ein paar Klicks

Als erster Schritt solltest du das Dashboard aufrufen. Wähle Pages > Add New und klicke auf Edit with Elementor (Mit Elementor bearbeiten). Stelle sicher, dass dein Elementor-Plugin aktualisiert wurde. Denn diese Design-Funktion ist für die alte Version nicht verfügbar.

Drücke auf den dunkelroten Button Add Section (Abschnitt hinzufügen) und stelle im Block Layout die Contentbreite auf "Full Screen" und die Höhe auf “Min Height”. Bewege den Schieberegler, um die optimale Größe für deinen Bildschirm zu bestimmen.

Gehe zum Tab Style und rufe den Abschnitt Background auf. Wähle “Classic” als Hintergrundtyp und lege das Hauptbild fest. Du sollst die Position auf “Center Center”, das Attachment auf  “Scroll”, die Wiederholung auf “No-repeat” und die Größe auf “Cover” setzen. Du kannst natürlich mit all diesen Einstellungen je nach deinem Belieben herumspielen.

Über die Option Background overlay sollst du weitere Einstellungen vornehmen. Wähle das zweite Bild für deine Doppelbelichtung und wende die gleichen Einstellungen wie beim Hauptbild an (Hintergrundtyp, Position usw.). “Opacity” regelt das Maß der Tranzparenz. Bewege den Schieberegler, bis der gewünschte Effekt erreicht wird (die mittlere Deckkraft sieht am besten aus). Der Mischmodus “Blend mode” erlaubt Eigenschaften einer Ebene mit den Farben der darunterliegenden zu verbinden.  Ich habe hier "Overlay" gewählt, aber du kannst auch andere Varianten ausprobieren, um zu sehen, welche für deinen Hintergrund am besten passt.

CSS-Filter-Einstellungen helfen dir, das Endergebnis noch ein wenig zu verschönern. Weichzeichner, Helligkeit, Kontrast, Sättigung und voila - dein Hintergrund ist fertig. Bei Bedarf kannst du den Text , Icons oder weitere Elemente hinzufügen. 

In diesem Tutorial-Video auf Englisch siehst du die beschriebenen Schritte live. 

War diese Anleitung hilfreich? Solltest du Bemerkungen oder Fragen haben, schreibe einen Kommentar zu diesem Beitrag!