Elementor Sticky Effekt: Ein kurzes und detailliertes Tutorial

5. Juni 2024
Lesedauer: 3 Minuten

Inhalt

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. Ich erstelle alle meine Webseiten mit dem Elementor Page Builder* Das Tutorial ist speziell für diesen Page Builder ausgelegt.

Das Video zum Beitrag:

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Schritt 1: Spalten/Container erstellen

2 elementor sticky effekt
Elementor Sticky Effekt: Ein kurzes und detailliertes Tutorial 8

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
Elementor Sticky Effekt: Ein kurzes und detailliertes Tutorial 9

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
Elementor Sticky Effekt: Ein kurzes und detailliertes Tutorial 10

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
Elementor Sticky Effekt: Ein kurzes und detailliertes Tutorial 11

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
Elementor Sticky Effekt: Ein kurzes und detailliertes Tutorial 12

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
Elementor Sticky Effekt: Ein kurzes und detailliertes Tutorial 13

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.

eca53f56af1e4b6caead355ed6b00b12

Deine Steffi

Hier Weiterlesen

Du möchtest keinen Blog Beitrag mehr verpassen?

In meinem Newsletter viel:mehr insights bekommst du einen Blick hinter die Kulissen und bekommst die neuesten Blog-Beiträge direkt in dein Postfach.

Aktueller Beitrag

Elementor Sticky Effekt
Webdesignerin-stefanie-friedel

Hi, ich bin Steffi

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

Blume

Inhalt

Blume

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 ❤

Webdesignerin-stefanie-friedel

Hi, ich bin Steffi

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

Blume

Du brauchst unterstützung bei Brand- und Webdesign?

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 ❤

Keyword-Stuffing

Keyword-Stuffing bezeichnet eine übermäßige und unnatürliche Verwendung von Keywords in einem Text oder auf einer Webseite, um das Ranking in Suchmaschinen künstlich zu verbessern.

>>> Mehr erfahren

Lass uns kennenlernen und dein Projekt besprechen

Vorname *
E-Mail Adresse *
Wie lange gibt es dein Business schon? *
Nachname *
Business Name (Optional)
Website (optional)
FÜR WELCHE PROJEKTART INTERESSIERST DU DICH? *
Beschreibe hier deinen bedarf: *
Wann soll dein Projekt abgeschlossen sein? *
Du hast sonstiges gewählt, was möchtest du mit mir besprechen? *
Wie bist du auf viel:mehr design aufmerksam geworden? *
Wieso möchtest du mit Viel:Mehr Design zusammenarbeiten?
Gibt es noch etwas das du mitteilen möchtest?

Der Website Masterplan inkl. Launch-Rabatt bis 28.02.25.