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.

Double-Opt-In und DSGVO (du erhÀltst im Anschluss noch eine E-Mail, um die Anmeldung zu bestÀtigen). Mit dem Absenden dieses Formulars stimmen Sie der Verarbeitung der hier eingegebenen Daten zu. Mehr Informationen dazu in der 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 & profitieren
Hier bekommst du Zugang zu exklusiven Inhalten und profitierst von weiteren Vorteilen (z.B. spezielle Rabattaktionen rund um WordPress und SEO Tools, etc.)

Double-Opt-In und DSGVO (du erhÀltst im Anschluss noch eine E-Mail, um die Anmeldung zu bestÀtigen). Mit dem Absenden dieses Formulars stimmen Sie der Verarbeitung der hier eingegebenen Daten zu. Mehr Informationen dazu in der DatenschutzerklÀrung.

Robert Leitinger
Ü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 ➔

Weitere BeitrÀge lesen:

*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.

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 des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Mehr Infos: DatenschutzerklÀrung.
Ü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.