Was ist und wie man einen Parallax-Effekt in WordPress hinzufügt
Veröffentlicht: 2021-12-12Jeder, der jemals ein WordPress-Theme nachgeschlagen oder verschiedene Funktionen und Funktionen eines Themas erkundet hat, hat wahrscheinlich etwas namens Parallax Scrolling bemerkt, das unter den Top- Themenfunktionen aufgeführt ist. Nicht jeder weiß, was Parallax Scrolling wirklich ist, und selbst diejenigen, die es auf einer Website erkennen können, wissen wahrscheinlich nicht viel darüber. Aus diesem Grund dachten wir, es wäre eine gute Idee, Ihnen ein wenig mehr über diese beliebte Technik zu erzählen und Ihnen zu zeigen, wie Sie sie mithilfe eines Plugins oder durch die Wahl eines Parallax-WP-Themes auf Ihrer Website haben können . Websites mit Parallax-Scrolling sind aus gutem Grund beliebt, und wenn Sie mit den neuesten Trends in der Online-Welt Schritt halten wollen, müssen Sie einfach alles darüber wissen.
Wenn Sie sich nicht sicher sind, ob Sie Ihrer Website einen Parallax-Effekt hinzufügen möchten, versuchen wir, Ihnen bei der richtigen Entscheidung zu helfen:
- Was ist Parallax-Scrolling?
- So fügen Sie einen Parallax-Effekt mit einem Plugin hinzu
- Beste WordPress Parallax-Themes und -Vorlagen
Es gibt viele Möglichkeiten, WordPress Parallax Scrolling und Parallax als Konzept im Allgemeinen zu definieren. Eine mögliche Definition dafür könnte sein, dass Parallax Scrolling eine Technik ist, bei der der Hintergrund und der Vordergrund beide animiert sind, außer dass sie sich mit unterschiedlichen Geschwindigkeiten bewegen . Der Hintergrund bewegt sich langsamer als die Objekte im Vordergrund, wodurch eine Tiefenillusion entsteht. Die Technik wird häufig in WordPress-Themes verwendet , ist aber offensichtlich keineswegs auf dieses beliebte CMS beschränkt.
Eine kurze Geschichte
Das Wort Parallaxe kommt eigentlich aus der Astronomie. Es beschreibt die scheinbare Verschiebung oder Inkongruenz in Richtung eines Objekts, wenn es aus zwei verschiedenen Blickwinkeln betrachtet wird. Wissen Sie, wie sich Objekte im Weltraum manchmal mit unterschiedlichen Geschwindigkeiten zu bewegen scheinen, weil eines von ihnen näher bei Ihnen ist? Die Dynamik der Vordergrundobjekte erscheint immer schneller und energischer als die Dynamik der Objekte im Hintergrund. Im „echten Leben“ macht das Sinn, denn das wirkliche Leben ist dreidimensional. Aber was ist mit Design? Nun, wir können es wie echtes Leben aussehen lassen, und das ist tatsächlich einer der Haupteffekte, die Designer mit Parallaxe erreichen möchten .
Parallax, wie wir es kennen, wurde erstmals während der goldenen Ära des Videospieldesigns eingeführt, genauer gesagt mit seitlich scrollenden Arcade-Spielen. Sein Zweck bestand darin , der Szene Tiefe und Dynamik zu verleihen und das Storytelling zu verbessern, alles in der Hoffnung, den Spielern ein ansprechenderes und eindringlicheres Erlebnis zu bieten.
Das war Anfang der 1980er Jahre. Wenn Sie in die frühen 2010er Jahre vorspulen, haben Sie die ersten Versuche mit Parallax-Scrolling, die auf das Webdesign angewendet werden. Heute, Jahre später, gibt es fast keinen Menschen auf der Welt, der nicht auf WordPress Parallax Scrolling in der einen oder anderen Form gestoßen ist.
Wie es funktioniert
Es mag kompliziert klingen, aber das Hinzufügen eines Parallax-Effekts zu Ihrer Website ist ziemlich einfach. Parallax Scrolling folgt eigentlich einem sehr einfachen Designkonzept . Sie nehmen den Hintergrund und den Vordergrund und bewegen sie mithilfe von Animationen mit unterschiedlichen Geschwindigkeiten. Wenn ein Benutzer auf der Seite nach unten scrollt, wird der Hintergrund einfach langsamer angezeigt als die Objekte im Vordergrund, die Bilder, Galerien, Videos, Text oder andere Inhalte umfassen können. Das Ergebnis ist, dass alles im Raum zu schweben scheint, anstatt nur dort zu sitzen, fixiert auf den Hintergrund .
Beachten Sie, dass das Parallax-Scrolling-Design von WordPress keine einzige, universelle Technik ist. Heutzutage werden verschiedene Parallax-Designstile verwendet, die meisten basieren jedoch auf der Verwendung mehrerer Schichten . Jeder der Ebenen ist eine Scrollfunktion und eine bestimmte Geschwindigkeit zugewiesen. Danach werden die richtigen CSS- oder HTML-Fixes für verschiedene Browser und Viewer angewendet, um sicherzustellen, dass die richtige Syntax der neuesten Versionen dieser Ressourcen verwendet wird, sonst funktioniert das Ganze einfach nicht gut.
Warum es gut ist
Parallax Scrolling ist heutzutage so immens populär geworden, dass es buchstäblich keine Website auf der Welt zu geben scheint, die es nicht in irgendeiner Weise, Form oder Form verwendet. Das stimmt natürlich nicht, aber Tatsache bleibt – diese Technik ist weit verbreitet, insbesondere in WordPress-Sites . Was macht Parallax Scrolling für Webdesigner so attraktiv?
Die Antwort kann in der Benutzererfahrung liegen. Parallax Scrolling schafft eine dynamische, spannende Art und Weise, wie wir Inhalte auf einer Website wahrnehmen . Es zieht uns an, indem es eine Illusion von Tiefe und Bewegung erzeugt . Parallax ist auch ein großartiges Storytelling-Tool , da es den Benutzer durch verschiedene Inhaltselemente führt. Vorausgesetzt natürlich, Sie verwenden es richtig. Es gibt viele schlechte Beispiele für die Verwendung von Parallaxen. Manchmal fühlt es sich so an, als ob Designer es herausbringen, nur weil sie wissen, wie, obwohl sie nichts dazu zu sagen haben.
Benutzer mögen es, unterhalten zu werden. Und neben bewährten Rezepten wie Videohintergründen, die Sie ganz einfach mit WordPress-Videohintergrund-Plugins hinzufügen können , ist Parallax Scrolling auch eine großartige Möglichkeit, dies zu tun. Es ist auch eine großartige Möglichkeit für Unternehmen, die Zuschauer buchstäblich zu den Teilen ihrer Website zu ziehen, auf die sie sich konzentrieren möchten. Zum Beispiel die Produkt- oder Serviceseiten.
Auf jeden Fall bringt das Scrollverhalten durchaus Überraschungsmomente mit sich. Wenn es richtig gemacht wird, erfreut es den Benutzer, und das ist immer gut für eine Website.
Für Anfänger und fortgeschrittene Benutzer ist die Verwendung eines Plugins bei weitem der beste Weg, um Parallaxe hinzuzufügen. Es gibt so viele ausgezeichnete Parallax-Plugins auf dem Markt und die meisten von ihnen leisten hervorragende Arbeit, um Ihnen dabei zu helfen, Parallaxe zu Ihrer WordPress-Website hinzuzufügen. Für die Zwecke dieses Artikels verwenden wir das Advanced WordPress Backgrounds-Plugin .
Obwohl dieses Tool hauptsächlich zum Hinzufügen eines Parallax-Effekts entwickelt wurde, deckt es viele andere interessante Funktionen ab. Sie können damit beispielsweise einen statischen Hintergrund hinter dem Text hinzufügen . Darüber hinaus können Sie einer bestimmten Zeile auch einen Hintergrund hinzufügen. Wenn Sie einen Absatz durch Hinzufügen eines Hintergrunds färben möchten, können Sie dies mit diesem Plugin mit einem Klick tun.
Installieren des Plugins
Zuerst müssen Sie das Plugin natürlich wie gewohnt installieren und aktivieren . Das erste, was Sie tun müssen, ist, zu Ihrem Backend zu gehen und nach dem Plugin zu suchen. Klicken Sie auf Plugins und dann auf Neu hinzufügen . Geben Sie Advanced WordPress Backgrounds in das Suchfeld ein und klicken Sie, wenn Sie es gefunden haben, auf Installieren . Wenn der Installationsvorgang abgeschlossen ist, klicken Sie auf Aktivieren . Ihr neues Plugin sollte jetzt in Ihrem Plugins-Menü aufgeführt sein.
Verwenden des Plugins zum Hinzufügen von Parallax mit dem klassischen Editor
Um Parallaxe tatsächlich hinzuzufügen, gehen Sie zu der Seite oder dem Beitrag, auf der Sie sie hinzufügen möchten. Sie werden eine neue Schaltfläche in Ihrem Editor bemerken . Wenn Sie mit der Maus darüber fahren, wird angezeigt, dass Advanced WordPress Backgrounds angezeigt wird . Klicken Sie darauf und öffnen Sie ein Popup, in dem Sie verschiedene Werte einstellen und die Einstellungen für Ihren Parallax-Effekt ändern.
Wählen Sie zunächst den Hintergrundtyp aus. In diesem Beispiel verwenden wir ein Bild.
Als nächstes müssen Sie ein Bild auswählen, das Sie verwenden möchten. Aktivieren Sie für ein Bild in voller Breite das Kontrollkästchen Stretch .
Wählen Sie danach den Parallax-Effekt aus. Wir werden uns für Scroll entscheiden . Hier können Sie auch Ihre gewünschte Scrollgeschwindigkeit einstellen.
Neben der Parallaxe ist noch ein Mauseffekt erwähnenswert. Dank dessen können Sie auf dem Bild, das sich unter Ihrem Mauszeiger befindet, einen Zeitlupeneffekt erzeugen . Das Tolle ist, dass Sie Parallax- und Mauseffekte auf demselben Bild kombinieren können. Wählen Sie einfach diejenige aus, die Ihren Bedürfnissen besser entspricht, je nach Ihren spezifischen Bedürfnissen und Zielen.
Die Abmessungen und die Höhe Ihres Parallax-Bildes können unter der Registerkarte Stile eingestellt werden.
Klicken Sie abschließend auf die Schaltfläche Einfügen .
Der folgende Shortcode sollte nun in Ihrem Editor erscheinen:
[nk_awb awb_type=“image“ awb_stretch=“true“ awb_image=“22″ awb_image_size=“full“ awb_parallax=“scroll“ awb_parallax_speed=“0.5″ awb_mouse_parallax=“true“ awb_image_size=“voll“ Ihre Inhalte hier [/nk_awb]
Sie müssen die Wörter „ Ihre Inhalte hier “ durch Ihre tatsächlichen Inhalte (Text, Bild, Video…) ersetzen. Vergessen Sie nicht, auf Speichern zu klicken.
Rufen Sie Ihre Website auf und überprüfen Sie den Beitrag oder die Seite, auf der Sie gerade Parallaxe hinzugefügt haben, um zu sehen, ob alles ordnungsgemäß funktioniert.
Verwenden des Plugins zum Hinzufügen von Parallaxe mit dem Gutenberg-Editor
Dieses Plugin ist auch Gutenberg-freundlich. Um es zu verwenden, klicken Sie auf den Block Background (AWB), um mit dem Hinzufügen des Parallax-Effekts zu beginnen.
Wie jeder andere Block hat auch der Hintergrundblock (AWB) seine eigenen Optionen, die denen im klassischen Editor nahezu entsprechen .
Das Tolle daran ist, dass Sie dem Abschnitt mit Parallax-Effekt Farbe, Bild oder sogar ein Video hinzufügen können. Außerdem können Sie die Größe der Parallaxe durch Hinzufügen von Padding, ihrer Geschwindigkeit oder des Parallax-Typs einstellen. Schließlich unterstützt Gutenberg den zuvor erwähnten Mauseffekt.
Parallax Scrolling ist tatsächlich schwieriger, als es den Anschein hat. Besonders wenn Sie ein WordPress-Anfänger sind , kann Ihnen das Hinzufügen eines Parallax-Effekts zu kompliziert erscheinen. Aus diesem Grund dachten wir, es könnte helfen, wenn wir eine kurze Liste der besten Parallax-WordPress-Themes einführen, die Sie derzeit auf dem Markt bekommen können.
- Basar – Ein modernes, scharfes E-Commerce-Thema
- PlayerX – Ein leistungsstarkes Theme für Gaming und eSport
- Azalee – Thema Modefotografie
- Boston – Corporate Parallax WordPress Theme
- Hypnos – OnePage Parallax WordPress Theme
Modethemen, insbesondere Online-Shops, profitieren am meisten vom Parallax-Scrolling. Tatsächlich ist es aus einer Mode- und Bekleidungswebsite, einem Shop oder einem Blog nicht mehr wegzudenken. Basar ist eines der Themen, die dies anscheinend genau richtig gemacht haben. Dieses wunderschöne Thema enthält einige atemberaubende Seiten , darunter ein wunderschön gestaltetes Lookbook. Die asymmetrische Shopseite ist ideal, um Ihre Produkte so zu präsentieren , dass sie Ihre Besucher auf den Einkauf einstimmen.
Bazaar wird mit dem leistungsstarken Select Core-Plugin, benutzerdefinierten Produkt-Shortcodes, Video-Hintergrundabschnitten, sozialen Widgets und einer anpassbaren Google-Karte geliefert. Das Theme ist natürlich vollständig responsiv und beinhaltet den mächtigen WPBakery Page Builder .
Funktionen, die Bazaar zum besten Parallax-WordPress-Theme machen:
- Glattes Scrollen
- SEO-optimiert
- Übersetzung bereit
- Kostenloses Slider-Revolution-Plugin
- 1-Klick-Demo-Content-Import
Dieses spannende Thema rund um Gaming, Gamer, eSports und Studios ist ein tolles Beispiel für richtig gemachtes Parallax-Scrolling . Die Natur der Spieleindustrie erfordert genau die dynamische und aufregende Benutzererfahrung, die PlayerX bietet .
Neben coolen Parallax Scrolls und Slidern ist PlayerX vollgepackt mit allen notwendigen Features und Funktionalitäten für eine erfolgreiche Gaming-Site . Zu den benutzerdefinierten Elementen gehören hervorragende Infografiken, eine reichhaltige Typografie, Präsentationen für das Team, Testimonials, eine Matchliste sowie eine Streambox.
Alles in allem ist PlayerX ein Theme, das wirklich zeigt, worum es beim Parallax Scrolling geht und wie es verwendet werden sollte .
Funktionen, die PlayerX zum besten Parallax-WordPress-Theme machen:
- Shortcodes für Spiele und Streaming
- Teamkarussell
- Integrierte Suche
- 7 Icon-Font-Pakete
- WooCommerce-kompatibel
Azalea ist ein wunderschönes, anspruchsvolles WordPress-Theme für die Fotografie mit einer Reihe vorgefertigter Homepage-Layouts, von denen eines stark auf Parallax-Scrolling basiert . Azalea ist ideal für die Modefotografie und kann auch für andere Zwecke verwendet werden, von Lifestyle und Beauty bis hin zu Blogs und Shops, in denen Sie Ihre Fotos verkaufen können. Jede der Homepages ist einfach umwerfend, aber wir müssen sagen, dass die Parallax-Seite einen besonderen Charme hat, den die meisten Modefotografen sicherlich zu schätzen wissen.
Azalee ist sehr robust, aber das heißt nicht, dass sie schwer zu handhaben ist. Selbst jemand, der mit WordPress völlig unerfahren ist, sollte es leicht haben, dieses Thema einzurichten und eine sehr erfolgreiche Website für Mode-, Beauty- und Lifestyle-Fotografie zu betreiben.
Funktionen, die Azalea zum besten Parallax-WordPress-Theme machen:
- Passgeschützte Proofing-Galerien
- Parallax-Kurzcode
- Kundenkarussell
- CTA-Shortcode
- 5 Header-Stile
Eine sehr coole Sache an Boston ist, dass Sie zwischen einer einseitigen Website und einem Multipager wählen können . Zusätzlich zu dieser Flexibilität erhalten Sie umfangreiche Anpassungsmöglichkeiten und natürlich einige beeindruckende Parallax-Seiten.
Boston ist ein Parallax-WordPress-Theme, das speziell für Unternehmen, große Unternehmen und Agenturen entwickelt wurde . Egal, ob Sie sich für einen Onepager oder eine mehrseitige Website entscheiden, Sie erhalten eine sehr schicke, professionell aussehende Website, die Parallaxe verwendet, um nicht anzugeben, sondern die Besucher mit einem modernen Ambiente zu beeindrucken. Das Theme wurde basierend auf dem Mobile-First-Konzept entwickelt , das wichtig ist, da Ihre Kunden und Kunden wahrscheinlich die meiste Zeit beim Surfen auf ihren Handheld-Geräten surfen. Oh, und Profi-Benutzer werden erfreut sein zu erfahren, dass es eine speziell für sie entwickelte Version mit weniger Dateien und daher viel leichter gibt.
Funktionen, die Boston zum besten Parallax-WordPress-Theme machen:
- Lightbox-Vorschau
- Twitter Live
- Unbegrenzte Portfolio-Arbeiten
- Flexslider und Revolution Slider
- Arbeitskontakt und Newsletter-Formular
Wenn Sie eine hochfunktionale, umfassende und moderne One-Page-Website suchen, dann ist Hypnos möglicherweise das richtige Thema für Sie. Dieses responsive Theme ist wirklich vielseitig einsetzbar . Sie können es für alles verwenden, von kleinen und mittleren Unternehmen, Agenturen oder Studios bis hin zu Portfolios, Blogs und Shops. Es gibt eine helle und eine dunkle Version, die beide großartig aussehen und hervorragende Parallax-Effekte haben .
Darüber hinaus ist Hypnos sehr intuitiv, bietet exzellenten Kundensupport und eine Vielzahl von Funktionen. Der Seitenersteller, den Sie mit diesem Thema erhalten, enthält benutzerdefinierte Abschnitte, und Sie erhalten unter anderem auch ein sortierbares Portfolio, ein funktionierendes Kontaktformular, einen Revolution Slider und Google-Schriftarten.
Funktionen, die Hypnos zum besten Parallax-WordPress-Theme machen:
- WPML-kompatibel
- SEO-optimiert
- Netzhauttauglich
- Benutzerdefinierter Preloader
- Live-Chat-Unterstützung
Abschließend
Parallax Scrolling verbessert definitiv Ihre WordPress-Website , aber nur, wenn Sie es richtig machen. Das Hinzufügen von Parallaxe nur um Parallaxe zu haben, ist einfach albern. Bei so vielen Websites, die diesen Effekt verwenden, nähern wir uns möglicherweise der Übersättigung und dem Punkt, an dem er abschreckend, veraltet und langweilig wird.
Zweitens muss das Parallax-Scrolling richtig ausgeführt werden . Es muss ohne Störungen laufen, sonst werden Ihre Website-Besucher offensichtlich verärgert.
Drittens kann es sehr verführerisch sein, Parallax-Scrolling zu verwenden, um Ihrer einseitigen Website Leben einzuhauchen.
Viertens: Wenn Sie es geschafft haben, Ihre Besucher mit einem überzeugenden, gut durchdachten Parallax-Scrolling-Effekt zu begeistern, vergessen Sie nicht, ihn zu Ihren Gunsten zu gestalten. Planen Sie Ihre CTAs sorgfältig, um sie noch weiter anzulocken .
Wenn Sie sich für ein Premium Parallax WP-Thema entscheiden, müssen Sie sich natürlich nicht um diese Dinge kümmern, da die Autoren des Themas es für Sie durchdacht haben.
Unterm Strich ist Parallax Scrolling ziemlich genial. Ja, es gibt Möglichkeiten, es zu vermasseln, und ja, es kann zu einer Übersättigung kommen. Dennoch ist es ein leistungsstarkes Tool, um den Website-Traffic zu steigern und Ihre Conversion-Raten zu optimieren. Außerdem sieht es toll aus und verleiht Ihrer Website einen coolen Touch .
Was ist deine Meinung zu WordPress Parallax Scrolling? Wir würden uns freuen, von Ihnen im Kommentarbereich unten zu hören!
Wir hoffen, dass Sie diesen Artikel als hilfreich empfunden haben. Wenn es Ihnen gefallen hat, können Sie sich auch gerne einige dieser Artikel ansehen!
- Beste coole und stilvolle WordPress-Themes
- WordPress-Plugins für Popups, die Ihre Besucher zum Lächeln bringen
- 5+ bildschöne WordPress YouTube-Plugins