Elementor Animationen verbessern (kostenlos + ohne Plugin)

Elementor Animationen verbessern CSS

In diesem Beitrag zeige ich dir, wie du die Animationen von Elementor kostenlos und ohne Plugin mit einem simplen CSS Code deutlich verbessern kannst.

Hier im Video demonstriere ich den Effekt:

Starten wir aber mit einer kurzen Einführung zu den Animationen in Elementor:

Elementor Animationen hinzufügen

Dank der Elementor Eingangsanimationen (welche auch in der kostenlosen Version von Elementor zur Verfügung stehen), kannst du Widgets, Spalten und Abschnitte ganz einfach mit einem Klick animieren.

Du findest die Eingangsanimationen hier:
Tab ErweitertBewegungseffekteEingangsanimationen

Elementor Eingangsanimation einfügen

Am häufigsten genutzt werden dabei sicherlich folgende Effekte:

  • Fade In (Element wird eingeblendet)
  • Fade in Left (Element „fliegt“ von der linken Seite herein und wird gleichzeitig dabei eingeblendet)
  • Fade in Right (Element „fliegt“ von der rechten Seite herein und wird gleichzeitig dabei eingeblendet)
  • Fade in Down (Element „fliegt“ von oben nach unten herein und wird gleichzeitig dabei eingeblendet)
  • Fade In Up (Element „fliegt“ von unten nach oben herein und wird gleichzeitig dabei eingeblendet)

Zusätzlich stehen noch weitere Animationen und auch weitere Einstellungen zur Verfügung.

Zum Beispiel kann die Dauer des Effekts eingestellt werden (Schnell, Normal, Langsam).

Außerdem kann der Effekt verzögert werden (z.B. Verzögerung: 1000 Millisekunden = 1 Sekunde). Konkret würde das bedeuten, dass das Element erst nach einer Sekunde mit dem gewählten Effekt erscheint.

Animationsdauer und Animation verzögern

Elementor bietet dir mit den Eingangsanimationen somit eine einfach Möglichkeit um einzelne Elemente zu animieren, was in vielen Fällen das „Look and Feel“ deiner Seite deutlich aufwerten kann! Wo also liegt das Problem?

Das Problem mit den Eingangsanimationen

Wenn du abseits von Fade In auch schon weitere Eingangsanimationen ausprobiert hast, dann hast du dir vielleicht schon mal gedacht, das sieht nicht gut aus!

Mir ging es zumindest so und in diversen Elementor Communitys hörte man ähnliches – die Eingangsanimationen von Elementor sehen „billig“ aus etc. Und ja dieser Eindruck stimmt (leider), aber keine Sorge, ich präsentiere dir hier auch gleich die Lösung für dieses Problem!

Die Animationen laufen vom Rand bis zum Element

Der Grund warum Animationen wie Fade In Right oder Fade In Left in den meisten Fällen nicht gut aussehen ist einfach: die Animation läuft vom Bildschirmrand bis zum Element. Das Element „fliegt“ also eine weite Strecke über den Bildschirm, was so gut wie nie professionell aussieht.

Die Lösung ist einfach: Mit einem einfachen CSS Code (den du mit Copy & Paste direkt übernehmen kannst), kannst du die Strecke der Animation deutlich verkürzen! Somit wirken die Eingangsanimationen deutlich professioneller und alles andere als „billig“ 🙂

Jetzt zeige ich dir, wie einfach das funktioniert (dauert nur eine Minute):

Animationen mit CSS Code verbessern

Mit folgendem CSS Code kannst du die Eingangsanimationen verbessern. Kopieren den Code einfach und füge ihn dann in dein „Eigenes CSS“ Feld im Customizer von deinem Theme ein (copy & paste).

CSS Code im Customizer hinzufügen

Wenn du Elementor Pro nutzt, kannst du den CSS Code auch einfach in eine CSS Box von Elementor einfügen. Falls du den den Theme-Builder von Elementor Pro benutzt, benutze am besten die Box „Eigenes CSS bei den Website-Einstellungen).

CSS Code in Elementor hinzufügen

Der CSS Code (copy & paste)

Inhalt freischalten (kostenlos)

In meinem kostenlosen Newsletter erhältst du exklusive Inhalte, Elementor Tricks und CSS Codes.

Einfach kostenlos abonnieren und ich schicke dir das Passwort zum Freischalten des folgenden Inhalts.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit widerrufen. Mehr Infos: Datenschutzerklärung.
CSS Code jetzt freischalten
Nutze das Passwort, dass ich dir zugeschickt habe

CSS Code weiter anpassen

Auch wenn du dich nicht mit CSS auskennst, kannst du den Code einfach anpassen: Wenn du möchtest, dann tausche im Code einfach den Wert der Pixel (px) mit anderen Werten aus.

In folgendem Beispiel haben ich die Strecke der Animation von 30 Pixel auf 60 Pixel erhöht:

transform: translate3d(0,30px,0) – transform: translate3d(0,60px,0)

Du kannst aber auch mit Prozent-Angaben arbeiten:

transform: translate3d(0,30px,0) – transform: translate3d(0,5%,0)

Fazit und noch mehr zu Elementor (Tricks, Tutorials, etc.)

Mit diesem einfachen copy & paste CSS Code kannst du deine Elementor Animationen deutlich aufwerten!

Hier findest du weitere Beiträge rund um Elementor:

Nutzt du schon die Pro-Version von Elementor? Hier kannst du dir die Preise ansehen*

Newsletter abonnieren und keinen Beitrag mehr verpassen!
Ich schicke dir eine E-Mail, wenn ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit widerrufen. Mehr Infos: Datenschutzerklärung.

Inhaltsverzeichnis
Weitere Beiträge lesen:
Über den Autor
Robert Leitinger

In den letzten 10 Jahren habe ich mehrere erfolgreiche Online-Projekte umgesetzt.
Im Jahr 2018 folgte die Gründung meiner eigenen Webdesign und Online Marketing Agentur.
Ergänzend zu diesem Blog betreibe ich auch einen YouTube Kanal.

Mehr über mich erfahren

Kennzeichnung & Information: Affiliate Links / Partnerlinks
Bei einem Link, der mit einem Stern gekennzeichnet ist (*), handelt es sich um einen Affiliate Link. Wenn du über diesen Link etwas kaufst, erhalte ich eine kleine Provision. Für dich entstehen dadurch keine Mehrkosten. So kann diese Webseite finanziert werden und sie bleibt frei von externen Werbebanner. Vielen Dank! Weitere Informationen disbezüglich findest du in der Datenschutzerklärung.

Über robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Mehr Infos: Datenschutzerklärung.

TEILEN ist wie TRINKGELD für mich : -)
Vielen Dank!

Inhaltsverzeichnis (scroll down)

Nutzt du schon Elementor Pro?

In meinem Elementor Testbericht erfährst du mehr über die Pro-Version zu Elementor

Über robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden dieses Formulars erteilst Du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Weitere Infos findest du in der Datenschutzerklärung.