Seitenweite Animationen

Optimiere die Bilder auf deiner Website mit speziellen Stil-Effekten.

Zuletzt aktualisiert: 11. Dezember 2024

Um den Inhalten auf deiner Website beeindruckende visuelle Effekte zu verleihen, aktiviere die Animationen für die gesamte Website, die angezeigt werden, wenn Besucher durch deine Seiten scrollen. Du kannst auch Animationen und andere Bildeffekte zu bestimmen Elementen hinzufügen, z. B. einem Abschnittshintergrund oder Bild-Block.

In dieser Anleitung erfährst du, wie du Animationen für die gesamte Website einrichtest und weitere Bereiche findest, in denen du Effekte hinzufügen kannst.

So erlangst du Zugriff auf diese Funktion

Animationen für die gesamte Website sind in Version 7.1 verfügbar. In Version 7.0 hängt dies von deinem Template ab. Einige 7.0-Templates verfügen über Template-spezifische Animationsoptionen, wie z. B. Blog-Seiten in der Template-Gruppe „Bedford“. Um das Template deiner Website zu finden, besuche Wie lauten die Version und das Template meiner Website?

Bevor du loslegst

  • Animationen in einzelnen Bild-Blöcken, Zitat-Blöcken und anderen Bereichen überschreiben Animationen für die gesamte Website. 
  • Einige Sammlungs-Seiten, wie z. B. Blog-Seiten, Shop-Seiten und Portfolio-Seiten, haben immer subtile Animationen, wenn die Seite geladen wird, selbst wenn Animationen für die gesamte Website deaktiviert sind.
  • Bevor du deiner Website visuelle Effekte hinzufügst, solltest du dir unsere Ressourcen zur Barrierefreiheit ansehen.

Video ansehen

Animationen für die gesamte Website aktivieren

Animationen für die gesamte Website gelten für die meisten Bereiche deiner Website, wobei Effekte in einigen Bereichen stärker ausgeprägt sind als in anderen. Diese Animationen wirken sich hauptsächlich auf die Art und Weise aus, wie Bilder, Text und andere Blöcke beim Scrollen durch eine Seite angezeigt werden. Einige Animationen werden auch angezeigt, wenn ein Besucher mit der Maus über Links und Buttons fährt.

Wir empfehlen dir, einen Animationsstil zu aktivieren und dann zu testen, wie er sich auf verschiedene Seiten deiner Website auswirkt. Probiere jeden Stil aus, bis du den findest, der für deine Inhalte am besten geeignet ist.

So aktivierst du Animationen für die gesamte Website:

  1. Öffne das Animations-Menü
  2. Klicke auf einen Animationsstil.
  3. Wähle eine langsame, mittlere oder schnelle Animationsgeschwindigkeit aus.
  4. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.
Site-wide_animations_appear_as_visitors_scroll_through_your_site_and_elements_load.gif

Animationsstile für die gesamte Website

Wählen Sie aus den folgenden Animationsstilen:

  • Keine – Deaktiviert Animationen für die gesamte Website.
  • Fade – Inhalt wird eingeblendet, wenn er auf der Seite angezeigt wird.
  • Skalierung – Der Inhalt wird von einer kleineren Größe bis zur endgültigen Größe animiert, wodurch ein Zoomeffekt entsteht.
  • Folie – Der Inhalt wird nach oben verschoben, wodurch der Effekt des Bildlaufs auf der Seite betont wird.
  • Clip – Inhalt wird von links Zeile für Zeile angezeigt.
  • Flex – Fügt einzigartige Animationen zu Überschriften, verlinkten Texten, Buttons und Portfolio-Seiten hinzu und fügt beim Mouseover einen Unterstrich zu Primärnavigationslinks hinzu.

Animationen für die gesamte Website entfernen

So deaktivierst du Animationen für die gesamte Website:

  1. Öffne das Animations-Menü.
  2. Wähle Keine aus.
  3. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Andere Bild- und Textanimationen und -effekte

Es gibt andere Animations- und Bildeffekte, die du für bestimmte Elemente auf deiner Website aktivieren kannst. Um mehr über die einzelnen Typen zu erfahren, besuche die verlinkten Leitfäden:

Fehlerbehebung

Wenn auf deiner Website keine Animationen angezeigt werden, beachte bitte Folgendes:

  • Einige Inhalte unterstützen nur den Animationsstil Verblassen. Wenn du einen anderen Stil wählst, werden Inhalte, die diesen nicht unterstützen, mit Ausblendung animiert.
  • Wenn keiner deiner Inhalte animiert wird, stelle sicher, dass du einen unterstützten Browser verwendest.
  • Animationen für die gesamte Website und Abschnittshintergründe sind nur in Version 7.1 verfügbar.
  • In unserem Circle-Blog erfährst du, wie andere Profis Animationen verwenden, um die Websites ihrer Kunden zu verbessern.
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.