> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/bilder-und-buttons-auf-website-seiten-animieren.md).

# Bilder und Buttons auf Website-Seiten animieren

Eine dezente Animation kann den Blick auf ein Bild, einen Button oder einen kurzen Hinweis lenken. Sie ist ein Gestaltungsmittel – keine Voraussetzung dafür, dass Besucherinnen und Besucher eine Seite bedienen können. Ein wichtiger Button muss deshalb immer auch ohne Bewegung eindeutig erkennbar und anklickbar sein.

Diese Anleitung erklärt den belegten Ablauf für einzelne Seitenelemente. Bilder und Buttons sind typische Beispiele; dieselben Schritte gelten auch für andere einzeln auswählbare Elemente im Seiteneditor.

## Was du mit Animationen erreichst

Du bestimmst, wie ein ausgewähltes Element erscheint oder auf einen Mauszeiger reagiert. Die Einstellungen liegen direkt im Seiteneditor und zeigen die Wirkung sofort in der Arbeitsansicht. So kannst du vor dem Veröffentlichen prüfen, ob die Bewegung zu deiner Seite passt.

Die Originalansichten zeigen zwei getrennte Bereiche:

* **Eingangsanimation**: Das Element erhält einen Effekt, sobald es beim Durchsehen der Seite in den sichtbaren Bereich kommt.
* **Hover-Animation**: Das Element reagiert, wenn jemand mit dem Mauszeiger darüberfährt.

Ein Hover-Effekt ist auf einem Smartphone nicht auf dieselbe Weise nutzbar wie mit Maus oder Trackpad. Verwende ihn daher nur als zusätzliche Rückmeldung – nicht als einzigen Hinweis darauf, dass ein Button gedrückt werden kann.

## Vor dem Start

Du brauchst:

* eine vorhandene Website- oder Funnel-Seite, die du bearbeiten darfst;
* ein Bild, einen Button oder ein anderes Element auf dieser Seite;
* nach der Änderung etwas Zeit für einen Test in der Vorschau und auf der veröffentlichten Seite.

Lege die Animation erst an, wenn Inhalt, Text und Ziel eines Buttons feststehen. Sonst testest du denselben Effekt nach jeder Inhaltsänderung erneut.

## Seite und Element öffnen

1. Öffne unter **Websites und Leadgewinnung** die gewünschte Website oder den gewünschten Funnel.
2. Öffne das Projekt und wähle in der Liste der Seiten oder Schritte die Seite aus, die du gestalten möchtest.
3. Starte den Seiteneditor über die Bearbeiten-Aktion. In der Originalansicht ist dafür im Auswahlmenü der Eintrag **Edit in a New Tab** zu sehen.
4. Klicke im Editor genau auf das Bild oder den Button, den du bewegen möchtest. Das gewählte Element wird markiert und seine Einstellungen erscheinen rechts.
5. Öffne rechts den Reiter **Animations** beziehungsweise **Animationen**.

**Wichtig:** Die Einstellung gehört nur zum aktuell ausgewählten Element. Wenn sich nichts verändert, prüfe zuerst, ob wirklich der Button oder das Bild markiert ist – nicht der umgebende Abschnitt.

## Einen Effekt auswählen

Im Bereich **Animationen** findest du den Einstieg für die Eingangsanimation und für Hover-Effekte. Wähle zunächst nur einen einfachen Effekt aus und beobachte die direkte Vorschau im Editor.

Die sichtbare Auswahl enthält unter anderem diese Effektfamilien:

| Effektfamilie     | Wirkung in einfacher Sprache                                         | Sinnvoll für                                                  |
| ----------------- | -------------------------------------------------------------------- | ------------------------------------------------------------- |
| **Fade**          | Das Element blendet ein. Varianten können aus einer Richtung kommen. | ruhige Überschriften, Bilder und Hinweise                     |
| **Slide**         | Das Element schiebt sich in die Ansicht.                             | kurze Inhaltsblöcke, wenn die Richtung den Aufbau unterstützt |
| **Bounce**        | Das Element kommt mit einer federnden Bewegung an.                   | sparsame Akzente, nicht für viele Elemente zugleich           |
| **Zoom**          | Das Element vergrößert sich beim Erscheinen.                         | ein einzelnes wichtiges Bild oder ein kurzer Hinweis          |
| **Light Speed**   | Das Element bewegt sich schnell seitlich in die Ansicht.             | seltene, deutlich dynamische Akzente                          |
| **Infinite loop** | Der gewählte Effekt wiederholt sich fortlaufend.                     | nur zurückhaltend für unkritische Gestaltungselemente         |

Die Oberfläche zeigt je nach Bereich eine Aktion wie **Clear** oder die Auswahl **None**. Damit entfernst du den Effekt wieder.

Eingangs- und Hover-Effekte liegen in getrennten Bereichen. Richte zunächst einen einzigen Effekt in dem Bereich ein, den du gerade testest. Wählst du anschließend in demselben Bereich einen anderen Effekt aus, ersetzt er die bisherige Auswahl. Die Originalansichten zeigen zum Beispiel einen Fade- oder Slide-Effekt für ein Bild und einen separaten Hover-Effekt wie **Elevate** oder **Wobble** für einen Button.

## Bewegung gezielt anpassen

Nachdem du einen Effekt ausgewählt hast, öffne **Adjust Animation**. Dort stehen vier sichtbare Einstellungen zur Verfügung:

| Einstellung  | Belegter Bereich                       | Was sie praktisch verändert                                                      |
| ------------ | -------------------------------------- | -------------------------------------------------------------------------------- |
| **Scale**    | 0,5× bis 2×                            | Die Größe, mit der das Element seine Bewegung beginnt. 1× ist die normale Größe. |
| **Duration** | 0,1 bis 3 Sekunden                     | Wie lange die Bewegung dauert. Eine kurze Dauer wirkt zurückhaltender.           |
| **Delay**    | bis 5 Sekunden                         | Wie lange das Element wartet, bevor die Bewegung beginnt.                        |
| **Easing**   | Linear, Ease In, Ease Out, Ease In Out | Wie die Bewegung beschleunigt oder abbremst.                                     |

Bei einer Verzögerung bleibt das Element während der Wartezeit ausgeblendet und wird erst sichtbar, wenn die Animation startet. Setze eine Verzögerung deshalb nur bewusst ein. Ein zu langer Wert kann dazu führen, dass Besucherinnen und Besucher den Eindruck haben, ein Inhalt fehle.

Für einen ruhigen Einstieg sind diese Entscheidungen oft leichter als lange Wertetests:

* Wähle eine kurze Dauer statt einer auffälligen, langsamen Bewegung.
* Starte ohne Verzögerung und ergänze sie nur, wenn mehrere Elemente absichtlich nacheinander erscheinen sollen.
* Verwende **Ease Out**, wenn eine Bewegung am Ende sanft auslaufen soll.
* Verwende **Linear**, wenn die Bewegung gleichmäßig bleiben soll.

## Speichern, veröffentlichen und prüfen

1. Sieh dir den gewählten Effekt direkt im Editor an.
2. Speichere die Seite über die Speichern-Aktion im Editor.
3. Veröffentliche die Seite nach dem Speichern.
4. Öffne die veröffentlichte URL in einem privaten Browserfenster oder auf einem Gerät, auf dem du nicht im Editor angemeldet bist.
5. Prüfe die Seite auf einem großen Bildschirm und auf einem Smartphone.
6. Kontrolliere besonders, ob der Button ohne langes Warten sichtbar, lesbar und anklickbar bleibt.

## Was nach der Veröffentlichung passiert

Die Animation wird Teil der veröffentlichten Seite. Bei einer Eingangsanimation erscheint das Element mit dem gewählten Effekt, sobald es beim Durchsehen der Seite in den sichtbaren Bereich kommt. Bei einer Hover-Animation reagiert es auf einen Mauszeiger. Die Bearbeitung im Editor ändert nicht automatisch andere Bilder oder Buttons auf der Seite; jedes Element wird einzeln ausgewählt und eingestellt.

## Realistisches Beispiel: Fokus auf den Kontakt-Button

Eine Dienstleistungsseite hat oben einen Button **„Gespräch anfragen“**. Er soll Aufmerksamkeit bekommen, ohne vom Inhalt abzulenken.

1. Öffne die Startseite im Seiteneditor und wähle nur diesen Button aus.
2. Öffne **Animationen** und wähle eine dezente Eingangsanimation aus der Familie **Fade**.
3. Öffne **Adjust Animation**.
4. Setze eine kurze Dauer, lasse die Verzögerung zunächst bei 0 und wähle einen sanft auslaufenden Bewegungsverlauf.
5. Speichere und veröffentliche die Seite.
6. Öffne die Seite auf dem Smartphone und am Desktop. Der Button muss sofort verständlich bleiben und darf nicht von anderen Seitenelementen verdeckt werden.

Wenn die Bewegung den Button wichtiger wirken lässt, ohne dass andere Inhalte unruhig werden, ist die Einstellung passend.

## Grenzen und typische Fehler

### Der Effekt ist im Editor sichtbar, auf der veröffentlichten Seite aber nicht

Speichere die Änderung zuerst im Editor und veröffentliche die Seite anschließend erneut. Prüfe die veröffentlichte Seite in einem privaten Browserfenster, damit nicht eine ältere lokale Ansicht angezeigt wird.

### Ein Inhalt erscheint zu spät

Kontrolliere den Wert bei **Delay**. Während dieser Wartezeit bleibt das Element verborgen. Verringere den Wert oder setze ihn auf 0, wenn der Inhalt direkt sichtbar sein soll.

### Die Seite wirkt unruhig

Entferne nicht benötigte Effekte über **Clear** beziehungsweise **None** und behalte nur einen klaren Schwerpunkt. Besonders wiederholte Effekte sollten nicht für wichtige Hinweise, Formulare oder zentrale Buttons eingesetzt werden.

### Der Hover-Effekt hilft auf dem Smartphone nicht

Das ist erwartbar: Ein Smartphone hat keinen Mauszeiger. Stelle sicher, dass Farbe, Text und Größe des Buttons bereits ohne Hover-Effekt klar zeigen, dass er gedrückt werden kann.

### Du findest die Einstellung nicht

Wähle das konkrete Bild oder den konkreten Button direkt auf der Arbeitsfläche aus. Erst dann zeigt die rechte Seitenleiste die elementbezogenen Reiter und die Animationseinstellungen an.

## Kurz-Check vor dem Veröffentlichen

* Ist wirklich nur das gewünschte Element ausgewählt?
* Passt der Effekt zum Zweck der Seite?
* Ist der Inhalt trotz Animation sofort verständlich?
* Ist die Verzögerung bewusst gewählt?
* Funktioniert der Button ohne Mauszeiger und ohne Bewegung?
* Hast du die veröffentlichte Seite auf Desktop und Smartphone geprüft?


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/bilder-und-buttons-auf-website-seiten-animieren.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.