In diesem Artikel zeigen wir dir, wie du ganz einfach Animationen und Overlays auf deiner Website hinzufügst.
Inhaltsangabe
Animationen
Animationen im Webdesign sind ein geeignetes Mittel, um die Aufmerksamkeit deiner Besucher zu erregen oder einen bestimmten Teil deiner Seite hervorzuheben. Im Website Builder findest du eine Auswahl an nützlichen Animationen, die mit ein paar Klicks schnell angewendet werden können und erstaunliche Ergebnisse liefern können.
Um eine Animation zu einem Element hinzuzufügen, öffne das Einstellungspanel eines Elements durch einen Doppelklick. Wechsel dann zum Style-Reiter und stelle sicher, dass Element ausgewählt ist. Scrolle dann runter zum Abschnitt Animation.
Hier findest du unterschiedliche Animationstypen:
- Nicht animieren
- Ein- & Ausblenden
- Ein- & Ausblenden
- Auf- & Zuklappen
- Rein- & Rauszoomen
- Von links nach rechts bewegen
- Von rechts nach links bewegen
- Von oben nach unten bewegen
- Von unten nach oben bewegen
- Aufmerksamkeitserreger
- Pulsieren
- Blinken
- Als Overlay öffnen
Sobald du einen Animationstyp gewählt hast, erscheinen andere Einstellungen. Wenn du bspw. Von links nach rechts bewegen auswählst, siehst du die folgenden Einstellungen:
- Initial: Was soll die Ausgangsposition des Elements sein?
- Element ausgeblendet
- Element eingeblendet
- Dauer: Wie lange soll die Animation dauern?
- Verzögerung: Soll die Animation verzögert starten?
- Auslöser: Wie soll die Animation gestartet werden?
- Kein automatischer Auslöser
- Bei Seitenaufruf
- Element in Sichtbereich gescrollt
Wenn du eine Animation aufgesetzt hast, kannst du sie über den Vorschau-Button im Animation-Abschnitt testen.
Wenn du die gleichen Animationseinstellungen bei weiteren Elementen nutzen möchtest, kannst du auf Kopieren klicken, das nächste Element öffnen und dort auf Einfügen klicken. Dann werden die Einstellungen des ersten Elements komplett auf das zweite Element übertragen ohne, dass du alles manuell und einzeln hinterlegen musst.
Du kannst Elemente mit Animationen ganz einfach an dem Stern-Icon erkennen, dass du beim Hovern über das Element, im Navigator oder in der Breadcrumb sehen kannst. Mit einem Klick auf den Stern werden dir auch direkt die Animationseinstellungen im linken Panel geöffnet.
Overlay/Pop-up erstellen
Der Website Builder bietet eine Vielzahl von nützlichen Animationen. Dazu gehört die Funktion Overlay, die du in den Einstellungen jedes Elements findest. Es gibt auch Section-Templates, die als vordefinierte Overlays fungieren und die du an deine Bedürfnisse anpassen kannst. Um diese zu finden, klicke einfach auf Marketing in der linken Content-Sidebar des Website-Builders.
Du kannst die Section-Templates mit den vordefinierten Einstellungen überall auf Ihrer Website einfügen. Für eine bessere Übersicht empfehlen wir jedoch, Overlays am Ende deiner Seite einzufügen, wenn sie nur beim ersten Besuch auf der Seite erscheinen sollen. Das ist übersichtlicher.
Wenn du ein passendes Section-Template gefunden hast, kannst du es per Drag & Drop an der gewünschten Stelle auf deiner Website einfügen. Öffne mit einem Doppelklick das Einstellungspanel, wechsel zu Style > Element und scrolle runter zu Animation.
Hier hast du verschiedene Möglichkeiten, diesen Container zu animieren. Wenn du bspw. das Overlay öffnen möchtest, wenn ein Besucher die Website besucht, wähle Als Overlay öffnen.
- Beim Overlay-Container behalte die Einstellung Als Overlay öffnen und wähle den Auslöser Kein automatischer Auslöser
- Dann öffne mit einem Doppelklick das Einstellungspanel für den Button, der das Overlay öffnen soll
- Wähle in dem Panel den Reiter Verlinken
- Klicke auf Element
- Dadurch wird automatisch der Element-Picker aktiviert, mit dem du ein Element auf der Website auswählen kannst. In diesem Fall den Overlay-Container.
Kommentare
0 Kommentare
Zu diesem Beitrag können keine Kommentare hinterlassen werden.