{"id":366973,"date":"2023-01-30T10:57:00","date_gmt":"2023-01-30T07:57:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=366973"},"modified":"2023-01-30T11:00:11","modified_gmt":"2023-01-30T08:00:11","slug":"so-fuegen-sie-den-elementor-parallax-effekt-schnell-und-einfach-hinzu","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-fuegen-sie-den-elementor-parallax-effekt-schnell-und-einfach-hinzu\/","title":{"rendered":"So f\u00fcgen Sie den Elementor-Parallax-Effekt schnell und einfach hinzu"},"content":{"rendered":"\n

Der Parallax-Effekt ist oft auf Websites zu sehen, die eine zeitgen\u00f6ssische \u00c4sthetik pflegen. Es verleiht Tiefe und Dynamik und unterstreicht die Moderne der Website<\/strong>. Es gibt eine Vielzahl von WordPress-Themes, die mit Parallax-Effekten ausgestattet sind, aber Sie haben auch immer die M\u00f6glichkeit, selbst einen Parallax-Effekt zu erstellen. Zahlreiche Websites nutzen den Parallax-Scrolling-Effekt<\/a> als leistungsstarkes Tool zur Benutzerbindung und zum Geschichtenerz\u00e4hlen.<\/p>\n

In diesem Artikel zeigen wir Ihnen, wie Sie den Parallax-Effekt mit dem Elementor-Seitenersteller zu Ihrer Website hinzuf\u00fcgen. Elementor ist der einzige Seitenersteller, der mit einer integrierten Elementor-Parallax-Option ausgestattet ist<\/strong>. Alle anderen Builder erfordern die Verwendung einer Art Plugin oder Tool. Bevor wir fortfahren, wollen wir nur sicherstellen, dass Sie verstehen, was der Parallax-Effekt genau ist. In diesem Artikel lesen Sie \u00fcber:<\/p>\n

Was ist der Parallax-Effekt?<\/h2>\n

Der Parallax-Effekt wird erzielt, wenn Elemente im Hintergrund und Elemente im Vordergrund sich unterschiedlich schnell bewegen, wenn der Benutzer scrollt<\/strong>. Genauer gesagt werden die Hintergrundelemente so eingestellt, dass sie sich langsamer bewegen als die Vordergrundelemente, und so wird eine Illusion von Tiefe erzeugt.<\/p>\n<\/p>\n

So finden Sie die Parallax-Effektoption von Elementor<\/h2>\n

Der Seitenersteller von Elementor machte es einfach, einen Parallaxeneffekt hinzuzuf\u00fcgen, indem Sie einer bestimmten Zeile oder Spalte einen Parallaxenhintergrund zuweisen konnten<\/strong>. Oben sehen Sie ein Beispiel f\u00fcr den von Elementor erzeugten Parallax-Effekt.<\/p>\n

Sie k\u00f6nnen einen Elementor-Parallax-Effekt auf eine Zeile anwenden, die keine Informationen enth\u00e4lt<\/strong> \u2013 nur um als bewegtes Bild zu dienen, um die Seite attraktiver zu machen, oder Sie k\u00f6nnen ihn auf eine Zeile anwenden, die einige Informationen enth\u00e4lt, wo sich das Parallax-Bild dahinter befindet Informationen<\/strong>.<\/p>\n

Es ist auch m\u00f6glich, dem gesamten Abschnitt oder der Spalte, die in dem Abschnitt enthalten ist, einen Parallax-Effekt hinzuzuf\u00fcgen.<\/p>\n

Sie finden die Option Parallaxe, indem Sie auf das kleine Symbol klicken, das einem offenen Buch \u00e4hnelt und sich in der oberen linken Ecke der Spalte befindet, die wir zum Hinzuf\u00fcgen von Parallaxe ausgew\u00e4hlt haben<\/strong>. Wenn Sie dem gesamten Abschnitt und nicht der Spalte Parallaxe hinzuf\u00fcgen m\u00f6chten, finden Sie dieselbe Option auch in einem blauen Tab, der in der Mitte der Zeile angezeigt wird, wenn Sie mit der Maus dar\u00fcber fahren<\/strong>. Um auf die Option Parallaxe zuzugreifen, w\u00e4hlen Sie die Option Spalte bearbeiten oder Abschnitt bearbeiten. In unserem Fall bearbeiten wir die Spalte.<\/p>\n

\"So<\/a><\/p>\n

Ein Klick auf die Spalte Bearbeiten \u00f6ffnet ein Men\u00fc auf der linken Seite mit drei Hauptregisterkarten. W\u00e4hlen Sie zun\u00e4chst die Registerkarte Stil<\/strong>. Klicken Sie auf die Option Hintergrundtyp<\/strong>, und das Feld zum Hinzuf\u00fcgen eines Bildes wird angezeigt<\/strong>. Sie k\u00f6nnen ein Bild aus Ihrer Medienbibliothek hinzuf\u00fcgen oder eine neue Datei hochladen.<\/p>\n

\"So<\/a><\/p>\n

Nachdem Sie das Bild f\u00fcr den Parallaxenbereich ausgew\u00e4hlt haben, k\u00f6nnen Sie mit der Anpassung der Bildeinstellungen fortfahren<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

W\u00e4hlen Sie in den Anhangseinstellungen die Option Fixiert<\/strong> aus, da wir das Bild beim Scrollen fixiert verhalten m\u00fcssen. Wenn wir hier Scrollen w\u00e4hlen, bewegt sich das Bild mit dem Hintergrund.<\/p>\n

\"So<\/a><\/p>\n

Die Bildpositionseinstellungen bieten eine gro\u00dfe Auswahl<\/strong>. Sie k\u00f6nnen das Bild wahlweise in der Mitte des Ausschnitts, oben rechts, oben links usw. platzieren \u2013 das Gute daran ist, dass Sie sofort die Vorschau der Bildposition sehen, was die Entscheidung erleichtert.<\/p>\n

\"So<\/a><\/p>\n

Die folgende Option \u201eWiederholen“ wird meistens verwendet, wenn das Bild tats\u00e4chlich ein Muster ist, das wiederholt werden muss<\/strong>, oder wenn das Bild zu klein ist. In unserem Fall hat das Bild die richtige Gr\u00f6\u00dfe, also w\u00e4hlen wir die Standardoption. F\u00fcr den Parallax-Effekt ist eine Bildgr\u00f6\u00dfe von 1920 Pixel am besten \u2013 so nimmt das Bild die Breite des gesamten Ausschnitts ein<\/strong>. Falls die Gr\u00f6\u00dfe Ihres Bildes jedoch nicht optimal ist, k\u00f6nnen Sie es jederzeit mit den Gr\u00f6\u00dfeneinstellungen anpassen<\/strong>. Diese bieten mehrere Optionen, einschlie\u00dflich der benutzerdefinierten Einstellungen, mit denen Sie die Gr\u00f6\u00dfe mithilfe eines Schiebereglers selbst festlegen k\u00f6nnen. Die Vorschau jeder \u00c4nderung, die Sie vornehmen, ist rechts sofort verf\u00fcgbar, sodass Sie jede der Optionen ausprobieren k\u00f6nnen, um zu sehen, welche am besten passt.<\/p>\n

\"So<\/a><\/p>\n

Nachdem Sie alle diese Einstellungen vorgenommen haben, k\u00f6nnen Sie mit dem Men\u00fc \u201eHintergrund\u00fcberlagerung“ fortfahren<\/strong>. Wenn Sie es \u00f6ffnen, werden Sie feststellen, dass alle Optionen die gleichen sind wie im vorherigen Men\u00fc, jedoch mit einigen interessanteren Einstellungen. Dies sind Deckkraft, CSS-Filter und Mischmodus<\/strong>. Mit dem Deckkraft- Schieberegler k\u00f6nnen Sie eine grundlegende Farb\u00fcberlagerung festlegen und mit der Deckkraft spielen, um ihren Effekt zu erh\u00f6hen oder zu verringern<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Mit den CSS-Filtern und dem Mischmodus k\u00f6nnen Sie Photoshop-\u00e4hnliche Effekte auf Ihre Elemente anwenden. CSS-Filtereffekte erm\u00f6glichen grafische Effekte wie Unsch\u00e4rfe oder Farbverschiebungen auf Bildern. Was die Mischmodi anbelangt, bietet Elementor 13 davon: Normal (dies ist die Standardeinstellung und hat keine Mischung), Multiplizieren, Bildschirm, \u00dcberlagern, Abdunkeln, Aufhellen, Farbausweichen, S\u00e4ttigung, Farbe, Unterschied, Ausschluss, Farbton und Leuchtkraft.<\/p>\n

\"So<\/a><\/p>\n

So stellen Sie die H\u00f6he des Parallaxenabschnitts ein<\/h2>\n

Die H\u00f6he des Parallaxenabschnitts kann vom Inhalt des Abschnitts abh\u00e4ngen<\/strong>. Wenn wir beispielsweise das Padding des Inhalts definiert haben oder der Inhalt bereits ein eigenes Default-Padding hat, passt sich die Parallaxe so an, dass sie die gesamte Fl\u00e4che hinter dem Element abdeckt<\/strong>. Um also in diesem Fall die H\u00f6he einzustellen, m\u00fcssen wir eine Anpassung am Element selbst vornehmen.<\/p>\n

\"So<\/a><\/p>\n

Wenn das nicht ausreicht oder wir einen Abschnitt haben, der keinen Inhalt enth\u00e4lt, kehren wir zu den Einstellungen zur\u00fcck und w\u00e4hlen die Registerkarte Erweitert. In den Padding-Einstellungen k\u00f6nnen wir die H\u00f6he einstellen und sehen, wie sie sich sofort in einer Live-Vorschau auswirkt<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

So stellen Sie den Parallax-Effekt in einer Reihe mit mehreren Spalten ein<\/h2>\n

Was passiert, wenn wir zwei oder mehr Spalten in einer Reihe haben und den Elementor-Parallax-Effekt nur in einer der Spalten haben m\u00f6chten? Das Verfahren ist sehr einfach. Gehen Sie in das Optionsmen\u00fc der Spalte, in der Sie den Parallax-Effekt einstellen m\u00f6chten<\/strong>. F\u00fcgen Sie den Hintergrund genauso hinzu, wie Sie es zuvor getan haben, als es nur eine Spalte in einer Reihe gab. Sie k\u00f6nnen die Parallaxenh\u00f6he jedoch nicht einfach durch Anpassen der Polsterung einstellen, es ist notwendig, der Spalte etwas Inhalt hinzuzuf\u00fcgen. Sie k\u00f6nnen den Inhalt entweder in die Spalte mit dem Parallax-Effekt einf\u00fcgen oder Sie k\u00f6nnen den Inhalt in die andere Spalte einf\u00fcgen und dann k\u00f6nnen Sie die H\u00f6he des Abschnitts anpassen, indem Sie die Polsterung im Men\u00fc Erweiterte Optionen anpassen<\/strong>. Wenn Ihnen die Zentrierung des Parallaxenbildes nicht gef\u00e4llt, k\u00f6nnen Sie jederzeit zu den Stileinstellungen zur\u00fcckkehren und seine Position anpassen.<\/p>\n

\"So<\/a><\/p>\n

Mikrointeraktionen und animierte Benutzeroberfl\u00e4chen sind oft die Elemente, die das Benutzererlebnis fesselnd und einpr\u00e4gsam machen. Das ist einer der Gr\u00fcnde, warum der Parallax-Effekt heutzutage auf allen Arten von Websites so beliebt ist. Es erm\u00f6glicht Ihnen, die Details Ihrer Inhalte auf dynamische Weise preiszugeben und gibt dem Benutzer das Gef\u00fchl, die Kontrolle zu haben.<\/p>\n

Der Parallax-Effekt kann viele Aspekte einer Benutzererfahrung wirklich verbessern. Aber es muss nicht richtig und mit einem Zweck getan werden. Parallaxe hinzuzuf\u00fcgen, nur weil es jeder hat, macht \u00fcberhaupt keinen Sinn und k\u00f6nnte die Benutzer sogar ver\u00e4rgern, besonders wenn es nicht zum Inhalt der Website passt.<\/p>\n

Aufnahmequelle: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Der Elementor-Parallax-Effekt kann viele Aspekte einer Benutzererfahrung wirklich verbessern. Erfahren Sie, wie Sie in Elementor einen Parallax-Effekt erzeugen.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-366973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/366973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=366973"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/366973\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=366973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=366973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=366973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}