Elementor Sticky Effekt: Ein kurzes und detailliertes Tutorial

5. Juni 2024
Lesedauer: 3 Minuten
1 elementor sticky effekt

Ich werde häufiger gefragt, wie ich den Bewegungs Effekt erstellt habe, den ich in meinem Portfolio Bereich verwendet habe.Deshalb gibt es hier dieses kurze Tutorial und ich zeige dir, wie ich das gemacht habe.

Schritt 1: Spalten/Container erstellen

2 elementor sticky effekt

Erstelle jetzt erstmal zwei Spalten(oder Container) für diese Ansicht. Und platziere deine Inhalte. Wir wollen, dass die Inhalte auf der rechten Seite ganz normal weiter Scrollen und auf der linken Seite sollen die Elemente innerhalb der Spalte mitlaufen.

Schritt 2

Möglichkeit 1: Sticky Inhalte

Wenn du nur ein Element hast, was du feststellen möchtest, kannst du den Inhalt direkt in die linke Spalte ziehen. Diese Variante eignet sich, wenn du z.B. nur ein Bild hast oder eine Überschrift.

Möglichkeit 2: Sticky Container

3 elementor sticky effekt

Sobald du mehrere Inhalte in der Spalte mitlaufen lassen möchtest, brauchst du einen Container. Platziere den Container in der Spalte und die Inhalte in dem Container.

Schritt 3: Sticky Einstellung

4 elementor sticky effekt

Klicke als nächstes auf “Einstellungen” “Bewegungseffekt” dort kannst du auswählen, dass Inhalte “Sticky” also festgestellt werden sollen. Dort wählen wir “oben”.

Schritt 4: In Spalte bleiben

5 elementor sticky effekt 1

Schritt eins wäre erfüllt, der Container läuft mit, aber noch läuft der Container über die komplette Seite. Um das zu verhindern wähle wieder im Bereich “Einstellung > Bewegungseffekt “ den Schalter bei “in Spalte bleiben” an.

Schritt 5: Abstand zum Bildrand einstellen

6 elementor sticky effekt

Der letzte Schritt der noch fehlt ist der Abstand zum oberen Bildrand. Momentan bleibt der Container direkt am oberen Bildrand stehen, was zur Folge hat, dass die Navigationsleiste oberhalb des Containers rutscht. Um das zu verhindern, stellen wir unter “Erweitert > Bewegungseffekt” im Bereich “Auslassen” ein, wie viel Pixel zum oberen Bildrand Abstand eingehalten werden sollen. In meinem Fall waren es 100 (pixel). Durch rumprobieren findest du dort die Richtige zahl.

Schritt 6: Mobile anpassung

7 elementor sticky effekt

Die letzte Möglichkeit ist die Einstellung der Mobilen Ansicht. Du kannst im Bereich “Erweitert > Bewegungseffekt” einstellen, bei welchem Gerät du den “Sticky Effekt” anwenden möchtest. Durch klicken, kannst du die Geräte entfernen, für die der Sticky Effekt nicht gelten soll.

Bei der Mobilen Ansicht (Smartphone), ergibt dieser Sticky Effekt idr. keinen Sinn, da wir dort nur eine Spalte zur verfügung haben. Für die Tablet Variante würde ich eventuell entscheiden.

Hast du auch einen Effekt, den du gerne Umsetzen möchtest, aber du weißt nicht wie du es lösen solltest? Oder du hast noch weitere Fragen zu diesem Effekt?

Kommentier gerne auf Youtube unterhalb des Videos und vielleicht ist das nächste Video schon dein Effekt.

Deine Steffi

Hier Weiterlesen

Herzlich Willkommen in
meinem Inner Circle

Hier wirfst du einen Blick hinter die Kulissen und erhältst wertvolle Tipps rund um Design & Business und bekommst alle Infos zu neuen Angeboten & freien Kapazitäten. 
Wenn du einmal monatlich vielmehr insights erhalten möchtest, trage dich hier ein:

Aktueller Beitrag

Elementor Sticky Effekt
Stefanie Friedel1

Hi, ich bin Steffi

Ich bin Brand & Webdesign Mentorin und teile in meinem Blog Strategien und Design-Tipps für dein Business. 

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Glossar
Webdesignerin

Hi, ich bin Steffi

Ich arbeite seit 2009 als Designerin und gebe auf meinem Blog Strategie, Business und Design-Tipps für dich.

Inhalt

Werbehinweis(*)

Hierbei handelt es sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalte ich eine kleine Provision. Ich verwende solche Links ausschließlich, wenn ich selbst mit dem Tool arbeite, absolut überzeugt davon bin und von Herzen empfehlen möchte.  Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst unterstützt mich dabei bei meiner Arbeit.  Danke ❤

Glossar

Plugin

Eine Erweiterung für Webseiten, die zusätzliche Funktionen hinzufügt, ohne den Kern der Website zu verändern oder umfangreiche Programmierkenntnisse zu erfordern.

>>> Mehr erfahren

Website-Checkliste

Hole dir die
Website-Checkliste

Trage dich jetzt in meinen Newsletter ein