In diesem Abschnitt

Verwenden von Animationen auf Ihrer Homepage-Baukasten-Website

Möchten Sie den Inhalt Ihrer Website optisch aufwerten? Fügen Sie Ihrer Website Animationen hinzu!

Mit Animationen erwecken Sie Ihre Homepage-Baukasten-Website mit ansprechenden visuellen Effekten zum Leben. Öffnen Sie einfach die Einstellungen einer Komponente, wählen Sie einen Animationseffekt aus und sehen Sie sich die Vorschau an. Jede Komponente kann eine eigene Animation haben, die Sie an Ihren Stil anpassen können. So haben Sie unzählige Möglichkeiten, Ihrer Homepage-Baukasten-Website eine persönliche Note zu verleihen und sie wirklich hervorstechen zu lassen.


Warum sollte ich Animationen auf meiner Website verwenden?

Animationen können auf vielfältige Weise und für verschiedenste Zwecke eingesetzt werden. Sie können sie nutzen, um die Aufmerksamkeit auf bestimmte Elemente zu lenken oder die Interaktion mit Elementen (wie Buttons oder Social-Media-Links) zu fördern. Sie können sie auch kreativ einsetzen, um Ihre Website-Inhalte lebendiger und ansprechender zu gestalten. Unabhängig vom Ansatz sind Animationen ein wirkungsvolles Mittel, um eine persönliche und professionell gestaltete Website zu erstellen.

Möchten Sie einige der Effekte in Aktion sehen? Schauen Sie sich das GIF unten an. Auf dieser Website haben wir verschiedene Effekte auf Texte, Buttons und Container angewendet.

GIF showing a website with added animations in the preview.


Hinzufügen von Animationen zu den Komponenten Ihres Homepage-Baukastens

Sie können den folgenden Komponenten Ihres Homepage-Baukastens Animationen hinzufügen:

  • Text
  • Bilder
  • Boxen und Container
  • Buttons
  • Symbole
  • Social-Symbole
  • Logos

Sie können auf die Animationseinstellungen zugreifen, indem Sie auf die Registerkarte Bearbeiten klicken, die oben oder unten an einer Komponente angezeigt wird, wenn Sie darauf klicken. 

Hier ist ein Beispiel, bei dem wir einem Textabschnitt Animationseffekte hinzufügen:

  1. Wählen Sie die Komponente aus und klicken Sie oben oder unten auf Text bearbeiten.
  2. Klicken Sie im schwebenden Menü auf Animation.
  3. Schieben Sie den Schalter Animationen hinzufügen auf „EIN“.
  4. Unter Animationseffekt können Sie aus dem Dropdown-Menü einen Effekt auswählen. Wählen Sie zwischen EinblendenEinschieben oder Hüpfen.
  5. Wenn Sie „Einblenden“ oder „Einschieben“ auswählen, haben Sie außerdem die Möglichkeit, eine Animationsrichtung auszuwählen. Dies ist die Richtung, aus der die Animation auf dem Bildschirm erscheint. Im Dropdown-Menü können Sie zwischen Mitte, oben, unten, links oder rechts wählen.
  6. Sie können die Geschwindigkeit der Animation wählen. Sie kann schnell (300 ms), mittel (600 ms) oder langsam (1000 ms) sein.
  7. Wählen Sie, ob eine Verzögerung erfolgen soll und, falls ja, wie lange sie dauern soll.
  8. Speichern Sie Ihre Änderungen und überprüfen Sie die Animation in der Vorschau. Sie wird nicht im Editor abgespielt.
  9. Wiederholen Sie den obigen Vorgang mit anderen Komponenten, zu denen Sie Animationen hinzufügen möchten.

Hinweis: Eine Animation wird nur einmal pro Seitenaufruf abgespielt. Das bedeutet auch, dass sie nicht erneut angezeigt wird, wenn ein Website-Besucher auf einer Seite zurückscrollt.

Screenshot that shows the properties panel and floating menu of a component. The floating menu has the Animation menu open, and numbered dots point out the different settings mentioned in the description above the screenshot.