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:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Schritt 1: Spalten/Container erstellen
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
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
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
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
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
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.
