> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/tutorials/components/banner/with-illustration-and-buttons.md).
# Mit Illustration und Buttons
## Übersicht
Die [Avonni Banner](/experience-cloud/experience-cloud-de/experience-components/ax-banner.md) Die Komponente ist darauf ausgelegt, die Aufmerksamkeit der Benutzer mit ansprechenden visuellen Elementen und interaktiven Schaltflächen zu gewinnen.
Hier erfahren Sie, wie Sie ein Banner mit einer Illustration links oder rechts, einer Schaltfläche zum Öffnen eines Dialogs zum Ansehen eines Videos und einer weiteren Schaltfläche, die den Benutzer zu einer anderen Seite weiterleitet, konfigurieren.
Live-Ergebnis
## Interaktiver Schritt-für-Schritt-Konfigurationsleitfaden
{% @arcade/embed url="" flowId="Q5libBUKTVUpYqPkUrGJ" %}
### Banner hinzufügen
1. **Platzieren Sie die Banner-Komponente:**
* Ziehen Sie im Experience Builder die Avonni-Banner-Komponente auf Ihre Seite an die Stelle, an der das Banner angezeigt werden soll.
2. **Medien festlegen:**
* Suchen Sie in den Banner-Einstellungen nach der Option zum Hinzufügen eines Bildes oder einer Illustration (CMS-Medien ODER Medien-URL)
* Laden Sie die Illustration, die Sie verwenden möchten, hoch oder wählen Sie sie aus, und positionieren Sie sie auf der linken oder rechten Seite des Banners (mithilfe des Attributs Medienposition)
### Schaltflächen konfigurieren
3. **Fügen Sie eine Schaltfläche hinzu, um ein Video-Modal zu öffnen:**
* Ziehen Sie das Avonni-Layout, um ein Layout mit 2 Spalten zu erstellen und in jeder Spalte Schaltflächen hinzuzufügen.
* Ziehen Sie die Avonni-Button-Dialog-Komponente.
* Passen Sie die Einstellungen der Schaltfläche an (Beschriftung, Variante, Ausrichtung)
* Beschriften Sie die Schaltfläche passend, z. B. „Video ansehen“.
* Klicken Sie auf die Schaltfläche, um das Modal zu öffnen.
* Ziehen Sie im Modal den Videoplayer mit dem [Avonni-Video-Komponente](/experience-cloud/experience-cloud-de/experience-components/ax-video.md) (im Bereich dialogContent)
* Konfigurieren Sie die Avonni-Video-Komponente.
4. **Fügen Sie eine Schaltfläche hinzu, um zu einer Seite weiterzuleiten:**
* Fügen Sie in der anderen Spalte des zuvor erstellten Avonni-Layout-Banners eine zusätzliche Schaltfläche hinzu.
* Beschriften Sie diese Schaltfläche mit einem Call-to-Action, z. B. „Mehr erfahren“.
* Konfigurieren Sie die [Navigationsinteraktion](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md#overview) im Abschnitt „Link To“, indem Sie die Zielseite für die Weiterleitung des Benutzers angeben.
## Beispielimplementierung
Nehmen wir an, Sie erstellen ein Werbebanner für eine neue Produkteinführung:
1. **Illustration:**
* Sie fügen links im Banner eine auffällige Illustration des neuen Produkts hinzu, um Aufmerksamkeit zu erzeugen.
2. **Schaltfläche für den Videodialog:**
* Die erste Schaltfläche lautet „Demo ansehen“. Sie ist so eingestellt, dass sie einen modalen Dialog öffnet, in den ein Produkt-Demovideo eingebettet ist. Sie können dazu die [Avonni Button-Dialog](/experience-cloud/experience-cloud-de/experience-components/ax-button-dialog.md) dafür verwenden.
3. **Weiterleitungsschaltfläche:**
* Die zweite Schaltfläche, „Produktdetails“, leitet beim Klicken [zu einer Seite weiter](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md#named-page) mit weiteren Informationen über das Produkt.
4. **Stil und Testen:**
* Gestalten Sie das Banner und die Schaltflächen passend zum Branding Ihres Unternehmens.
* Testen Sie beide Schaltflächen, um sicherzustellen, dass eine das Video korrekt öffnet und die andere wie erwartet weiterleitet.
5. **Veröffentlichen:**
* Nachdem Sie bestätigt haben, dass alles reibungslos funktioniert, veröffentlichen Sie Ihre Änderungen.
### Tipps für mehr Effektivität
* Stellen Sie sicher, dass die Illustration relevant ist und die Botschaft des Banners verstärkt.
* Das Video sollte kurz, ansprechend und informativ sein.
* Die Schaltfläche „Mehr erfahren“ sollte Benutzer zu einer Seite führen, die die Geschichte des Banners fortsetzt.
---
# 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://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/tutorials/components/banner/with-illustration-and-buttons.md?ask=&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.
.gif?alt=media)