> 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/anleitungen/components/banner/with-illustration-and-buttons.md).

# Mit Illustration und Schaltflächen

## Übersicht

Die [Avonni Banner](/experience-cloud/experience-cloud-de/experience-components/ax-banner.md) Die Komponente ist darauf ausgelegt, die Aufmerksamkeit der Benutzer mit überzeugenden visuellen Elementen und interaktiven Schaltflächen zu gewinnen.

So konfigurieren Sie ein Banner mit einer Illustration, die links oder rechts ausgerichtet ist, einer Schaltfläche, die einen Dialog zum Ansehen eines Videos öffnet, und einer weiteren Schaltfläche, die den Benutzer auf eine andere Seite weiterleitet.

<figure><img src="/files/a415c3fc9a5d8cb95adf7d2c2af0702156a94843" alt=""><figcaption><p>Live-Ergebnis</p></figcaption></figure>

## Interaktiver Schritt-für-Schritt-Konfigurationsleitfaden

{% @arcade/embed url="<https://app.arcade.software/share/Q5libBUKTVUpYqPkUrGJ>" 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 erscheinen soll.
2. **Medien festlegen:**
   * Suchen Sie in den Banner-Einstellungen nach der Option, ein Bild oder eine Illustration hinzuzufügen (CMS Media ODER Media-URL)
   * Laden Sie die gewünschte Illustration hoch oder wählen Sie sie aus und positionieren Sie sie auf der linken oder rechten Seite des Banners (über das Attribut Media Position)

### Schaltflächen konfigurieren

3. **Eine Schaltfläche zum Öffnen eines Video-Modals hinzufügen:**
   * 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, zum Beispiel mit „Video ansehen“.
   * Klicken Sie auf die Schaltfläche, um das Modal zu öffnen.
   * Ziehen Sie innerhalb des Modals den Videoplayer mithilfe der [Avonni-Video-Komponente](/experience-cloud/experience-cloud-de/experience-components/ax-video.md) (im dialogContent-Bereich)
   * Konfigurieren Sie die Avonni-Video-Komponente.
4. **Eine Schaltfläche zum Weiterleiten auf eine Seite hinzufügen:**
   * 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, zum Beispiel „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

Angenommen, Sie erstellen ein Werbebanner für eine neue Produkteinführung:

1. **Illustration:**
   * Sie fügen auf der linken Seite des Banners eine auffällige Illustration des neuen Produkts hinzu, um Aufmerksamkeit zu erregen.
2. **Schaltfläche für das Video-Modal:**
   * Die erste Schaltfläche lautet „Demo ansehen“. Sie ist so eingestellt, dass sie einen Dialog öffnet, in dem ein Produkt-Demo-Video eingebettet ist. Dafür können Sie 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“, wenn sie angeklickt wird, [navigiert zu einer Seite](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md#named-page) mit weiteren Informationen über das Produkt.
4. **Gestaltung und Testen:**
   * Gestalten Sie das Banner und die Schaltflächen so, dass sie zum Branding Ihres Unternehmens passen.
   * 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 Effektivität

* Stellen Sie sicher, dass die Illustration relevant ist und die Botschaft des Banners unterstützt.
* 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/anleitungen/components/banner/with-illustration-and-buttons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.