{"id":14397,"date":"2018-08-17T12:29:21","date_gmt":"2018-08-17T12:29:21","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=14397"},"modified":"2018-08-17T12:29:21","modified_gmt":"2018-08-17T12:29:21","slug":"elementor-doppelbelichtung-effekt-fuer-website-hintergruende","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/elementor-doppelbelichtung-effekt-fuer-website-hintergruende\/","title":{"rendered":"Elementor: Doppelbelichtung-Effekt f\u00fcr Website-Hintergr\u00fcnde"},"content":{"rendered":"

Der bezaubernde Effekt\u00a0aus der Analogfotografie l\u00e4sst sich jetzt nicht nur\u00a0mit Softwares zur Bildbearbetung simulieren. Mit dem Elementor Page Builder\u00a0bekommst du\u00a0eine\u00a0M\u00f6glichkeit, die Doppelbelichtung auf\u00a0deiner Homepage ohne Photoshop zu erreichen.<\/p>\n

Die von Fans erstellten Filmplakate sehen oft besser aus als professionelle Poster, die normalerweise vor dem Release pr\u00e4sentiert werden. Wahrscheinlich liegt die Ursache darin, dass\u00a0Fans 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\u00e4ngst f\u00fcr alle - sowohl f\u00fcr Profis als auch f\u00fcr Hobby-Designer -\u00a0verf\u00fcgbar.\u00a0<\/span>Was haben\u00a0attraktive Filmposter mit unserem heutigen Thema zu tun?<\/span><\/p>\n

Es ist so, dass f\u00fcr\u00a0<\/span>Filmplakate eine Unzahl von verschiedenen Design-Techniken verwendet wird.\u00a0Die Doppelbelichtung geh\u00f6rt zu besonders\u00a0sch\u00f6nen Effekten, die einen bleibenden Eindruck hinterlassen. Es handelt sich dabei um <\/span>die <\/span>\u00dcberlagerung<\/span>\u00a0bzw. Verschmelzung zweier Bilder. D<\/span>ieser Effekt\u00a0kann nicht nur\u00a0<\/span>d<\/span>i<\/span>e<\/span> Essenz des<\/span> Films<\/span> auf interessante Weise wiedergeben, sondern auch eine Website aufh\u00fcbschen.\u00a0<\/span>Inspiriert von der Foto- und Filmkunst nutzen viele Webdesigner die Doppelbelichtung, um Hintergr\u00fcnde ansprechend zu gestalten. <\/span><\/p>\n

\"\"<\/p>\n

Die Doppelbelichtung\u00a0l\u00e4sst sich in Photoshop sowie in anderen <\/span>Bildbearbeitungsprogramm<\/span>en ausf\u00fchren. Wenn du Elementor zur Layouterstellung verwendest, dann kommst du ganz ohne diese Softwares aus.\u00a0Die Funktionalit\u00e4ten von diesem\u00a0Page Builder wurden vor kurzem erweitert, sodass du verschiedene Effekte direkt auf Seiten erzielen kannst. Da du\u00a0zwischen Programmen hin- und her nicht mehr wechseln musst, sparst du dir m<\/span>it Elementor WordPress Themes<\/a>\u00a0etwas Zeit.\u00a0<\/span><\/p>\n

Atemberaubender Hintergrund\u00a0in ein paar Klicks<\/h3>\n

Als erster Schritt solltest du <\/span>das Dashboard aufrufen. W\u00e4hle <\/span>Pages > Add New <\/b>und klicke auf <\/span>Edit with Elementor<\/strong> (Mit Elementor bearbeiten). Stelle sicher, dass\u00a0dein Elementor-Plugin aktualisiert wurde. Denn diese Design-Funktion ist f\u00fcr die alte Version nicht verf\u00fcgbar. <\/span><\/p>\n

Dr\u00fccke auf den dunkelroten Button Add Section<\/strong> (Abschnitt hinzuf\u00fcgen) und stelle im Block Layout<\/strong> die Contentbreite auf \"Full Screen\" und die H\u00f6he auf \u201cMin Height\u201d. Bewege den Schieberegler, um die\u00a0optimale Gr\u00f6\u00dfe f\u00fcr\u00a0deinen Bildschirm zu bestimmen.<\/span><\/p>\n

\"\"<\/p>\n

Gehe zum Tab Style<\/strong> und rufe den Abschnitt Background<\/strong> auf. W\u00e4hle \u201cClassic\u201d als Hintergrundtyp und lege das Hauptbild fest. Du sollst die Position auf \u201cCenter Center\u201d, das Attachment auf \u00a0\u201cScroll\u201d, die Wiederholung auf \u201cNo-repeat\u201d und die Gr\u00f6\u00dfe auf \u201cCover\u201d setzen.\u00a0Du\u00a0<\/span>kannst nat\u00fcrlich mit all diesen Einstellungen\u00a0je nach deinem Belieben herumspielen.<\/span><\/p>\n

\"\"<\/p>\n

\u00dcber die Option Background overlay<\/strong>\u00a0sollst du weitere Einstellungen vornehmen. W\u00e4hle\u00a0das zweite Bild f\u00fcr\u00a0deine Doppelbelichtung und\u00a0wende\u00a0die gleichen Einstellungen wie beim\u00a0Hauptbild an (<\/span>Hintergrundtyp, Position usw.). \u201cOpacity\u201d regelt das Ma\u00df der Tranzparenz. Bewege den Schieberegler, bis der\u00a0gew\u00fcnschte Effekt erreicht wird (die mittlere Deckkraft sieht am besten aus). Der Mischmodus <\/span>\u201cBlend mode\u201d erlaubt\u00a0Eigenschaften\u00a0einer Ebene mit den <\/span>Farben der darunterliegenden zu verbinden.\u00a0\u00a0<\/span>Ich habe hier \"Overlay\" gew\u00e4hlt, aber du kannst auch andere Varianten ausprobieren, um zu sehen, welche f\u00fcr deinen Hintergrund am besten passt.<\/span><\/p>\n

\"\"<\/p>\n

CSS-Filter-Einstellungen helfen dir, <\/span>das Endergebnis noch ein wenig zu versch\u00f6nern. Weichzeichner, Helligkeit, Kontrast, S\u00e4ttigung und voila - dein Hintergrund ist fertig. Bei Bedarf kannst du den Text , Icons oder\u00a0weitere Elemente hinzuf\u00fcgen.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

In diesem Tutorial-Video auf Englisch siehst du die beschriebenen Schritte live.\u00a0<\/span><\/p>\n