Erwecke die Aufmerksamkeit der Besucher, indem du auffällige visuelle Effekte zu Bild-Blöcken hinzufügst.

Du kannst Effekte zu Bild-Blöcken auf deiner Website hinzufügen, um deinen Bildern ein individuelleres Aussehen zu verleihen. Einige Effekte fügen eine Animation hinzu, sodass sich das Bild immer bewegt, während andere nur angezeigt werden, wenn der Besucher durch diesen Abschnitt deiner Website scrollt. Wie du diese Effekte anwendest, hängt davon ab, ob du das Bild in einem Abschnitt des Kreativen Editors oder des Klassischen Editors hinzugefügt hast.

Bevor du loslegst

• Bildeffekte fügen Animationen zu einzelnen Bildern hinzu. Wenn du Version 7.1 verwendest, kannst du Animationen auf deine gesamte Website anwenden, indem du Animationen für die gesamte Website aktivierst.
• Animationen auf einzelnen Bild-Blöcken überschreiben Animationen für die gesamte Website.
• Durch das Hinzufügen von Bildeffekten zu bearbeiteten .gif-Dateien werden diese in statische .jpg-Dateien konvertiert.
• Bevor du deiner Website visuelle Effekte hinzufügst, solltest du dir unsere Ressourcen zur Barrierefreiheit ansehen. 

Effekte auf Bild-Blöcke im Kreativen Editor anwenden

Nachdem du ein Bild zu einem Bild-Block in einem Abschnitt des Kreativen Editors hinzugefügt hast, doppelklicke auf das Bild, um dessen Editor zu öffnen. Dann:

1. Klicke auf Design und dann auf Bildeffekt.
2. Wähle einen Effekt aus dem Menü. Alle Änderungen, die du an dem Effekt vornimmst, werden in deiner Website-Vorschau angezeigt.
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.

Bildeffekt-Stile

Du kannst aus diesen Bildeffekten wählen:

• Keine – Kein Effekt, abgesehen von der Einstellung der Overlay-Deckkraft
• Liquid – Verleiht dem Bild einen Welleneffekt
• Filmkörnung – Fügt dem Bild ein animiertes statisches Overlay hinzu
• Parallax – Das Bild bewegt sich, wenn Besucher scrollen
• Gebrochene Linien – Bricht das Bild durch ein Muster aus geraden Linien
• Gebrochene Kreise – Bricht das Bild durch ein Muster von Kreisen

Passe deinen Effekt im Details-Menü an, indem du auf einen Bildeffekt und dann auf das Einstellungssymbol klickst.

Klicke im Details-Menü auf eine beliebige Kategorie, um das Drop-down-Menü zu erweitern und weitere Optionen anzuzeigen, wie z. B.:

• Die Größe und Form des Effekts anpassen
• Bearbeitung der Geschwindigkeit und Richtung von Effekten mit Bewegung, z. B. Liquid

Je nach Art des Bildeffekts werden unterschiedliche Einstellungen angezeigt, mit denen du die Kernkomponenten des Effekts ändern kannst. Um mit einer zufälligen Konfiguration von Einstellungen zu experimentieren, klicke auf das Zufällig-Symbol, wenn du einen Effekt auswählst, oder klicke im Details-Menü des Effekts auf Zufällig ändern.

Wir empfehlen, jeden Effekt zu testen, um ein besseres Gefühl dafür zu bekommen, wie er aussieht und wie er für deine Website funktioniert.

Effekte auf Bild-Blöcke im Klassischen Editor anwenden

Nachdem du ein Bild zu einem Bild-Block in einem Abschnitt des Klassischen Editors hinzugefügt hast, doppelklicke auf das Bild, um dessen Editor zu öffnen. Dann:

1. Klicke auf Design und dann auf Animationen.
2. Wähle einen Effekt aus der Liste aus, der auf das Bild und den Text angewendet werden soll. Wenn du eine Option auswählst, wird auf der Seite eine Vorschau davon angezeigt.

Block-Animationsstile

Wähle aus den folgenden Einstellungen aus, um den gesamten Block zu animieren:

• Keine – Keine Animation, auch wenn Animationseinstellungen für die gesamte Website vorhanden sind
• Website-Standard – Die für die gesamte Website geltenden Animationseinstellungen werden für den Block übernommen
• Einblenden – Block wird eingeblendet
• Hochgleiten – Block gleitet nach oben
• Horizontal geschnitten – Block wird in horizontalen Schichten geladen
• Vertikal geschnitten – Block wird in vertikalen Schichten geladen
• Nach oben kippen – Block wird mit einer Aufwärtsneigung herangezoomt
• Nach unten kippen – Block wird mit einer Abwärtsneigung herangezoomt
• Fokussieren – Block erscheint zunächst verschwommen und wird dann scharf gestellt
• Kollidieren – Bild und Text gleiten von einer Seite aus nach innen
• Enthüllen – Das Bild und der Text gleiten von der Mitte nach außen.
• Benutzerdefiniert – Lege Animationen für Bild und Text unabhängig voneinander fest

Klicke auf Benutzerdefiniert, um das Bild und den Text unabhängig voneinander zu animieren, und wähle aus den folgenden Einstellungen:

• Keiner
• Einblenden
• Hochgleiten
• Herabgleiten
• Von links gleiten
• Von rechts gleiten
• Fokussieren

Hier ist ein Beispiel für einen Collage-Bild-Block mit diesen Einstellungen:

• Animation – Benutzerdefiniert
• Bildanimation – Von rechts gleiten
• Textanimation – Von links gleiten

Fehlerbehebung

Wenn Bildeffekte auf deiner Website nicht angezeigt werden, beachte Folgendes:

• ​​Wenn keiner deiner Inhalte animiert wird, stelle sicher, dass du einen unterstützten Browser verwendest.
• Bildeffekte werden nur auf Browsern und Geräten angezeigt, die das Tool WebGL unterstützen, das den Grafikprozessor deines Geräts nutzt. Auf get.webgl.org kannst du testen, ob dein Browser dies unterstützt. Wenn ein Browser WebGL nicht unterstützt, bleibt der Abschnittshintergrund statisch.

Tipp: Wenn du eine Website der Version 7.1 hast, können deine Besucher einige animierte Funktionen über ihre Geräteeinstellungen ausschalten. Dadurch sehen sie beim Besuch deiner Website weniger Animationen. Wenn Mac-Benutzer beispielsweise die Bildschirmbewegung auf dem Gerät reduziert haben, werden Animationen, die du für Bild-Blöcke oder Hintergrundbildeffekte aktiviert hast, für diese Besucher ohne Bewegung angezeigt.

Andere Animationen und Effekte

Abhängig von deiner Website-Version und wo du Effekte hinzufügst, kannst du Alternativen wie Banner-Bilder, Hintergrundvideos oder Abschnittshintergrundbilder verwenden, um ähnliche Effekte und Animationen auf deine Bilder anzuwenden.

Um mehr über die einzelnen Typen zu erfahren, besuche die verlinkten Anleitungen.