Elementor Trennlinie animieren
Elementor bietet beim Aufbau einer Webseite Abschnitte, Spalten und Elemente, auf neueren Seiten übernehmen Container diese Rolle. Bearbeitest du einen Abschnitt oder Container, kannst du im Stil-Tab eine sogenannte Trennlinie hinzufügen. Hier gibt es verschiedene Designs, zum Beispiel Berge, Tropfen, Pyramide oder auch Wellen.
Schon einige Male habe ich mich gefragt, wie man diese Elemente animieren kann. Schließlich sieht eine bewegte Welle (als Trennlinie) auf einer maritimen Website ziemlich cool aus.
Die Lösung sind wenige Zeilen CSS: Du fügst dem Abschnitt eine Trennlinie hinzu und animierst sie anschließend mit einer kleinen Keyframe-Animation. Den fertigen Code und die genauen Schritte zeige ich dir in diesem Beitrag, mit und ohne Elementor Pro.
Setup: Plugins und Theme
Für diese Anleitung nutze ich eine WordPress-Installation mit dem Kadence Theme und Elementor. Das Theme spielt für die Animation der Trennlinie keine Rolle, es funktioniert mit jedem klassischen WordPress Theme.
Elementor Trennlinie animieren
1. Webseite mit Elementor öffnen und einen Abschnitt auswählen
Im ersten Schritt öffne ich eine Webseite mit Elementor, damit ich diese bearbeiten kann. Auf der Webseite sollte schon Inhalt sein, der in mehrere Abschnitte gegliedert ist (sonst wird es mit der Trennlinie zwischen den Abschnitten schwer). Nun wählt man den Abschnitt an, dem die Trennlinie hinzugefügt werden soll.
2. Unter Abschnitt bearbeiten auf Stil klicken und Trennlinie hinzufügen
Jetzt in der linken Bearbeiten-Spalte auf den Reiter Stil klicken. Unter Trennlinie Form kann nun ausgewählt werden, ob die Trennlinie den ausgewählten Abschnitt nach oben oder nach unten abgrenzen soll. In meinem Beispiel entscheide ich mich für Trennlinie oben und wähle unter Typ die Trennlinienform Wellen aus. Zudem lege ich noch eine Farbe für die Trennlinie fest.
Hervorragend, die Trennlinie ist angelegt. Nun muss diese noch animiert werden. Hierfür müssen ein paar Zeilen CSS Code ergänzt werden.
3. Für die Animation den CSS Code hinzufügen
Jetzt gilt es den folgenden CSS Code unserer Webseite hinzuzufügen:
body { overflow-x:hidden; }
.elementor-shape-bottom,
.elementor-shape-top
{
animation: wave 8s cubic-bezier( 0.45, 0.45, 0.63, 0.53) infinite;
width: 220%;
}
@keyframes wave {
0% { margin-left: 0; }
50% { margin-left: -1200px; }
100% { margin-left: 0px; }
}Wenn du Elementor Pro verwendest, ist das Hinzufügen des Codes super einfach. Nutzt du Elementor in der kostenfreien Variante, dann können wir den Code auch hinzufügen, allerdings etwas umständlicher, indem wir auf den Customizer zurückgreifen.
CSS Code mit Elementor Pro hinzufügen
Lesetipp
Du möchtest wissen, ob Elementor Pro für deine Zwecke geeignet ist? Dann lies jetzt: Elementor Pro: Wann lohnt sich der Kauf?
Wie schon gesagt, ist das Hinzufügen von zusätzlichem Code mit Elementor Pro ein Kinderspiel. Klicke einfach unter Abschnitt bearbeiten auf den Reiter Erweitert und füge dann unter Eigenes CSS den Code ein.
Voilà, Trennlinie ist animiert.
Da wir den Code direkt eingefügt haben, während der entsprechende Abschnitt ausgewählt ist, wird die Trennlinie ausschließlich für diesen Abschnitt animiert.
CSS Code im Customizer hinzufügen (kostenfreie Elementor Variante)
In der kostenfreien Variante von Elementor ist das Feld für individuelles CSS gesperrt, es bleibt der Pro-Version vorbehalten. Ist aber halb so wild: Wir verlassen Elementor und öffnen den Customizer (Dashboard › Design › Customizer). Bei einem guten WordPress Theme kannst du dort unter Zusätzliches CSS eigenen Code hinterlegen. Füge den Code dort ein. Alternativ funktioniert auch ein Code-Snippets-Plugin, falls dein Theme keinen Customizer mehr anbietet.
Ist dies erledigt, dann klicke im Customizer auf den Button veröffentlichen. Anschließend sollte die Elementor Trennlinie animiert sein.
Da der CSS Code im Customizer hinzugefügt wurde, gilt die Animation nun für alle Trennlinien; soll heißen: Alle Trennlinien deiner Website sind nun gleichermaßen animiert.
Fazit
Mit Elementor ist es wirklich ziemlich einfach, die Trennlinien zu animieren beziehungsweise diese in Bewegung zu versetzen. Gerade bei maritimen Webseiten sorgen bewegte Wellen-Trennlinien für das gewisse Extra, vorausgesetzt es wird mit den Animationen nicht übertrieben. Doch dies liegt bekanntermaßen auch immer im Auge des Betrachters.
Das Schöne: Elementor Pro wird nicht zwingend benötigt, um die Trennlinien zu animieren. Auch mit der kostenfreien Variante von Elementor können Trennlinien mit einer Animation versehen werden, indem der entsprechende CSS Code im Customizer des Themes hinzugefügt wird.
Nichtsdestotrotz macht das Arbeiten mit Elementor Pro an vielen Stellen mehr Spaß und bietet auch deutlich mehr Funktionen als die kostenfreie Variante von Elementor. Sollten dich die Vorteile der Pro-Version interessieren, dann gelangst du hier zur Website von Elementor.
Du wünschst dir solche Design-Details auf deiner Website, möchtest sie aber nicht selbst umsetzen? Dann sieh dir das WordPress Webdesign von One Step Webdesign an: Wir gestalten deine Website mit durchdachten Animationen und einem stimmigen Gesamtbild.
Häufige Fragen zur animierten Elementor Trennlinie
Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.
