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)

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

­čÄë Insider-Tipps zu den Themen k├╝nstliche Intelligenz, WordPress, SEO & Online Business
Hier bekommst du Zugang zu exklusiven Inhalten und profitierst von weiteren Vorteilen (z.B. spezielle Rabattaktionen, 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 - Experte f├╝r Online Marketing, KI und SEO
├ť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