Elementor Animationen verbessern (kostenlos + ohne Plugin)

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 Erweitert – Bewegungseffekte – Eingangsanimationen

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.

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

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

Der CSS Code (copy & paste)

 /* Verbesserte Eingangsanimationen. Füge diesen Code einfach in ein "Custom CSS" Feld ein. Mehr Elementor Tricks auf https://robert-leitinger.com/ */

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInRight {
    animation-name: fadeRight
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInUp {
    animation-name: fadeUp
}

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*