> 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/experience-components/ax-banner.md).

# AX - Banner

## Übersicht

**AX - Banner** ist eine Experience-Cloud-Komponente, die auf Seiten von Experience Sites auffällige Nachrichten mit Überschriften, Bildern und Textinhalten anzeigt.

Verwenden Sie sie, um neue Funktionen anzukündigen, wichtige Updates zu teilen, Aktionen hervorzuheben oder Portal-Benutzer mit gebrandeten Nachrichten willkommen zu heißen. Kombinieren Sie Text, Bilder, Symbole und Call-to-Action-Buttons, um aufmerksamkeitsstarke Ankündigungen oben auf den Seiten zu erstellen.

Perfekt für Portal-Startseiten, Ankündigungsbereiche, Feature-Highlights oder überall dort, wo Sie Kunden oder Partnern, die Ihre Website besuchen, wichtige Informationen mitteilen müssen.

{% hint style="danger" %}
Diese Komponente [nutzt Slots](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#understanding-slots) für erweiterte Anpassungen und ist damit ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht.
{% endhint %}

<figure><img src="/files/f8a4fc4a9796a56f1d287f6e9b4edcb49513c39c" alt=""><figcaption></figcaption></figure>

***

## Konfigurieren des Avonni Banner

### Hinzufügen von Titel und Inhalt

Das Konfigurieren von Titel und Inhalt ist ein unkomplizierter Prozess, der die Effektivität Ihres Banners erheblich beeinflusst.

**Hinzufügen von Titel und Inhalt**

**1. Verwendung des benutzerdefinierten Eigenschaftseditors:**

* **Eingabe von Inhalt**: Sie können Titel und Inhalt schnell direkt in den benutzerdefinierten Eigenschaftseditor eingeben, der in der Avonni-Banner-Komponente bereitgestellt wird. Dieser Ansatz ist benutzerfreundlich und effizient und ermöglicht schnelle Aktualisierungen und Bearbeitungen.

**2. Optionen zur Textgestaltung:**

* **Übernahme vom Site-Design**: Die Avonni-Banner-Komponente ermöglicht es, dass Titel und Inhalt Textstile aus den Einstellungen des Experience-Cloud-Site-Designs übernehmen. Dies gewährleistet Konsistenz auf Ihrer gesamten Website und sorgt für ein stimmiges Erscheinungsbild.
* **Benutzerdefinierte Gestaltung**: Sie können die von Avonni bereitgestellte dedizierte Stil-Anpassung am unteren Rand des benutzerdefinierten Eigenschaftseditors für spezifischere Anforderungen verwenden. Diese Option ermöglicht es Ihnen, die Gestaltung für Titel und Inhalt manuell festzulegen, unabhängig vom allgemeinen Design der Website.
* **Vorteile der benutzerdefinierten Gestaltung**: Eine benutzerdefinierte Gestaltung ist besonders nützlich, um das Banner hervorzuheben, wichtige Nachrichten zu betonen oder wenn das Banner einen markanten Stil haben soll, der sich vom Rest der Website unterscheidet

### Horizontale Ausrichtung des Inhalts definieren

* **Zentriert:** Platzieren Sie Ihren Text in der Mitte des Banners für ein ausgewogenes Erscheinungsbild.
* **Links:** Richten Sie Ihren Text linksbündig aus für ein traditionelles Layout.
* **Rechts:** Richten Sie Ihren Text rechtsbündig aus für ein einzigartiges Design

### Medienelement definieren

Die Avonni-Banner-Komponente ist nicht auf Text und statische Bilder beschränkt. Integrieren Sie Video in Ihr Bannerdesign, um Ihre Nachricht aufzuwerten und die Nutzerbindung zu erhöhen.

* **Verbessern Sie Ihr Banner mit Video**
  * Fügen Sie ein Video-Element hinzu, um Ihr Banner dynamischer und ansprechender zu gestalten.
  * Positionieren Sie Ihr Video für die beste visuelle Wirkung. Wählen Sie aus diesen Optionen: rechts, oben links, oben mittig, oben rechts, links, unten links, unten mittig, unten rechts.
  * Optional können Sie Ihr Video anklickbar machen, sodass Benutzer durch Klicken damit interagieren können.
* **Zusätzliche Videoeinstellungen**
  * Wählen Sie, ob Ihr Video automatisch abgespielt wird, wenn das Banner geladen wird.
  * Lassen Sie das Video in einer Endlosschleife wiederholt abspielen.
  * Legen Sie fest, ob die Steuerelemente des Videoplayers angezeigt oder ausgeblendet werden sollen.
  * Steuern Sie die Geschwindigkeit, mit der das Video abgespielt wird.
  * Legen Sie die Startlautstärke für das Video fest.

<figure><img src="/files/30fd2fbe6ed801a403f74080dd4a13b954bf6a32" alt=""><figcaption></figcaption></figure>

### Hinzufügen eines Hintergrundbildes

Diese Funktion ist praktisch, um einen visuell beeindruckenden ersten Eindruck zu erzeugen, und kann verwendet werden, um das Erscheinungsbild des Banners an das gesamte Branding oder Thema der Website anzupassen.

Hintergrundbilder können auf drei verschiedene Arten hinzugefügt werden:

**1. Manueller Upload:**

* Benutzer können eine Bilddatei direkt von ihrem Gerät hochladen.
* Diese Option ist ideal für benutzerdefinierte Grafiken, Firmenlogos oder bestimmte Marketingmaterialien, die bereits vorbereitet und lokal gespeichert sind.

**2. Generiert mithilfe eines Experience-Cloud-Site-Ausdrucks:**

* Das Hintergrundbild kann dynamisch auf Basis von Site-Ausdrücken generiert werden.
* Diese Methode ermöglicht eine Anpassung des Banners in Echtzeit auf Grundlage von Benutzerinteraktionen, Site-Daten oder spezifischen Kriterien, die innerhalb der Experience-Cloud-Site definiert sind.

**3. Aus CMS-Medien:**

* Benutzer können ein Bild aus dem integrierten Content-Management-System (CMS) auswählen.
* Diese Option bietet Zugriff auf eine Bildbibliothek und ermöglicht eine bequeme Auswahl hochwertiger und relevanter Grafiken, die bereits Teil des Inhalts-Repositorys der Website sind.

### Interaktionsmöglichkeiten

**Anklickbares Banner**

Eine der wichtigsten interaktiven Funktionen der Avonni-Banner-Komponente ist die Möglichkeit, anklickbar zu sein. Dadurch werden passive Betrachter zu aktiven Teilnehmern und werden dazu angeregt, sich intensiver mit den Inhalten zu beschäftigen.

<figure><img src="/files/85dcece985d3d915169a7e22d68ebeef8521d1b0" alt=""><figcaption></figcaption></figure>

**Interaktionen implementieren**

Um Ihr Banner anklickbar zu machen, aktivieren Sie zuerst den Schalter für Anklickbarkeit. Verwenden Sie dann den Abschnitt „Link zu“, um auszuwählen, was passiert, wenn jemand auf das Banner klickt. So können Sie Ihrem Banner coole Funktionen hinzufügen.

<figure><img src="/files/ad2a5434c8e31af7cdf0c4d730c3bdd0672444d0" alt="" width="365"><figcaption></figcaption></figure>

**Interaktionen definieren**

Wenn ein Benutzer auf das Banner klickt, kann die Komponente eine vordefinierte Interaktion auslösen. Dieses Maß an Anpassung stellt sicher, dass die Benutzererfahrung interaktiv ist und auf die spezifischen Anforderungen und Ziele der Website zugeschnitten ist.

<table><thead><tr><th width="184.5">Interaktionstyp</th><th>Beschreibung</th></tr></thead><tbody><tr><td><a href="/pages/10aecdd5043e8103c1952dd90b35f50658d205ce">Toast anzeigen</a></td><td>Zeigt nach dem Klick eine kurze, informative Nachricht an. Ideal zum Bestätigen von Aktionen oder zum Bereitstellen von Kontext.</td></tr><tr><td><a href="/pages/27601c148bfd08af0046d50953828075f4f36243">Navigieren</a></td><td>Leitet Benutzer beim Klicken zu einer anderen Seite oder Ressource weiter. Geeignet, um zu verwandten Inhalten oder Ressourcen zu führen.</td></tr><tr><td><a href="/pages/168929c17756989aa5e91ef14cdd6635119d2bc9">Warn-Modal öffnen</a></td><td>Zeigt nach einem Klick Informationen oder Warnungen in einem Warnmodal an. Nützlich für wichtige Ankündigungen.</td></tr><tr><td><a href="/pages/5f55666610675ce93aa81a7dc3a55f92360de3d1">Flow-Dialog öffnen</a></td><td>Startet einen Salesforce-Flow in einem Dialog und ermöglicht komplexe Interaktionen. Hilft bei der schrittweisen Anleitung von Prozessen.</td></tr><tr><td><a href="/pages/d99a3630d29f061f6c513ee3dbcb52060977ef1a">Bestätigungsdialog öffnen</a></td><td>Löst nach der Interaktion einen Bestätigungsdialog aus. Unverzichtbar für Aktionen, die eine Benutzerbestätigung oder -kenntnisnahme erfordern.</td></tr></tbody></table>

***

## Spezifikationen

{% tabs %}
{% tab title="🎛️ Eigenschaften" %}

<table><thead><tr><th width="264">Einstellung</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>Titel</strong></td><td>Definieren Sie die primäre Überschrift des Banners und lenken Sie die Aufmerksamkeit sofort auf Ihre Hauptnachricht.</td></tr><tr><td><strong>Titeltextstil</strong></td><td><p>Passen Sie das Erscheinungsbild Ihres Titels mit verschiedenen Textstilen an:</p><ul><li><strong>Überschriften</strong>: Wählen Sie je nach gewünschter Betonung zwischen den Überschriftenebenen 1 bis 4.</li><li><strong>Absätze</strong>: Wählen Sie die Absatzstile 1 oder 2, um den passenden Ton und die richtige Hervorhebung zu erzielen.</li></ul></td></tr><tr><td><strong>Beschriftung</strong></td><td>Ergänzen Sie Ihren Titel mit einem kurzen Untertitel oder einer Beschreibung, die zusätzlichen Kontext oder einen Teaser für den folgenden Inhalt bietet.</td></tr><tr><td><strong>Beschriftungstextstil</strong></td><td><p>Passen Sie das Erscheinungsbild Ihrer Beschriftung mit vordefinierten Textstilen an:</p><ul><li><strong>Überschriften</strong>: Wählen Sie je nach Wichtigkeit zwischen den Überschriften 1 bis 4.</li><li><strong>Absätze</strong>: Wählen Sie Absätze 1 oder 2, um Ihren Titel zu ergänzen</li></ul></td></tr><tr><td><strong>Inhalt</strong></td><td>Bereichern Sie Ihr Banner mit detailliertem Text und bieten Sie einen umfassenden Einblick, eine Erklärung oder einen Call-to-Action. Hier können Sie tiefer in die Einzelheiten Ihrer Nachricht eintauchen.</td></tr><tr><td><strong>Horizontale Ausrichtung des Inhalts</strong></td><td>Passen Sie die horizontale Positionierung Ihres Inhaltstextes an. Ganz gleich, ob Sie ein linksbündiges, zentriertes oder rechtsbündiges Layout bevorzugen, diese Eigenschaft stellt sicher, dass Ihr Inhalt mit Ihrer allgemeinen Design-Philosophie übereinstimmt.</td></tr><tr><td><strong>CMS-Hintergrund</strong></td><td>Nutzen Sie Inhalte aus Ihrem Content-Management-System als Hintergrund für Ihr Banner und sorgen Sie so für Konsistenz und einfache Aktualisierungen.</td></tr><tr><td><strong>Hintergrund-URL</strong></td><td>Definieren Sie einen bestimmten Weblink als Quelle für das Hintergrundbild Ihres Banners und schaffen Sie so einen visuellen Kontext oder eine visuelle Aufwertung für Ihren Inhalt.</td></tr><tr><td><strong>Medien-URL</strong></td><td>Verlinken Sie ein Multimedia-Element, das Sie neben oder als Teil Ihres Banners präsentieren möchten. Dies kann ein Video, Audio oder ein anderes interaktives Medium sein.</td></tr><tr><td><strong>Medien als Hintergrund anzeigen</strong></td><td>Wählen Sie, dass Ihr Medium als Hintergrund des Banners festgelegt wird, sodass ein immersives Multimedia-Erlebnis entsteht, während der Textinhalt im Vordergrund bleibt.</td></tr><tr><td><strong>Medienposition</strong></td><td>Legen Sie die räumliche Anordnung Ihrer Medien auf dem Banner fest, sei es zentriert, links, rechts oder eine andere benutzerdefinierte Positionierung, die Ihr Layout ergänzt.</td></tr><tr><td><strong>Overlay-Farbe</strong></td><td>Fügen Sie Ihrem Banner eine Farbüberlagerung hinzu, die nützlich sein kann, um die Lesbarkeit zu verbessern, die Stimmung festzulegen oder sich an Branding-Farben anzupassen.</td></tr><tr><td><strong>Anklickbar</strong></td><td>Verwandeln Sie Ihr Banner in ein interaktives Element. Sobald es aktiviert ist, kann das gesamte Banner als anklickbares Element fungieren und Benutzer zu einem angegebenen Link weiterleiten oder eine definierte Aktion auslösen.</td></tr></tbody></table>
{% endtab %}

{% tab title="🏞️ Medienattribute" %}

| Einstellung                   | Beschreibung                                                                                                                                                                                      |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Automatische Wiedergabe**   | Lassen Sie Ihre Medien automatisch abgespielt werden, wenn die Seite geladen wird, und bieten Sie so ein sofortiges Multimedia-Erlebnis.                                                          |
| **Schleife**                  | Aktivieren Sie, dass Ihre Medien in einer Endlosschleife abgespielt werden und am Ende automatisch neu starten.                                                                                   |
| **Steuerelemente ausblenden** | Wählen Sie, die Steuerelemente des Mediaplayers auszublenden, um ein saubereres Erscheinungsbild zu erzielen, sodass die Medien ohne Unterbrechungen durch den Benutzer abgespielt werden können. |
| **Wiedergaberate**            | Passen Sie die Geschwindigkeit an, mit der Ihre Medien abgespielt werden. Dies kann hilfreich sein, um das Tempo des Inhalts je nach Benutzerpräferenz oder gestalterischer Absicht anzupassen.   |
| **Lautstärke**                | Steuern Sie die Audiopegel Ihrer Medien, um sicherzustellen, dass sie dem Nutzererlebnis entsprechen, das Sie bieten möchten, sei es dezente Hintergrundmusik oder dominante Audio-Narration.     |
| {% endtab %}                  |                                                                                                                                                                                                   |

{% tab title="🎨 Erscheinungsbild" %}

{% endtab %}
{% endtabs %}

### **Hinweis**

**Objektanpassung**:

* **`füllen`**: Dehnt das Bild, um den Container auszufüllen, was es möglicherweise verzerrt.
* **`enthalten`**: Behält das Seitenverhältnis des Bildes bei und passt es ohne Beschneidung in den Container ein.
* **`abdecken`**: Behält das Seitenverhältnis des Bildes bei, kann jedoch einige Teile beschneiden, um sicherzustellen, dass der Container vollständig abgedeckt wird.
* **`keine`**: Das Bild wird in seiner ursprünglichen Größe angezeigt, unabhängig von der Containergröße.
* **`verkleinern`**: Vergleicht den Unterschied zwischen `keine` und `enthalten`, und liefert eine kleinere konkrete Objektgröße.

**Rahmenstile:**

* **`keine`**: Es wird kein Rahmen angezeigt.
* **`durchgezogen`**: Eine durchgehende, ununterbrochene Linie bildet den Rahmen. Es ist der gängigste und unkomplizierteste Stil.
* **`gestrichelt`**: Der Rahmen erscheint als eine Reihe kurzer Liniensegmente oder Striche.
* **`gepunktet`**: Der Rahmen besteht aus einer Reihe runder Punkte.
* **`doppelt`**: Für den Rahmen werden zwei parallele durchgezogene Linien verwendet. Der Zwischenraum zwischen den beiden Linien ist transparent oder entspricht dem Hintergrund.
* **`Rille`**: Der Rahmen sieht aus, als wäre er in die Seite eingraviert, wodurch ein 3D-Effekt entsteht. Der Effekt hängt vom Wert der Rahmenfarbe ab.
* **`erhaben`**: Das Gegenteil von Rille; es sieht so aus, als käme es aus der Seite heraus und erzeugt einen weiteren 3D-Effekt. Das visuelle Ergebnis wird von der Rahmenfarbe beeinflusst.
* **`eingelassen`**: Der obere und linke Rahmen werden schattiert dargestellt, sodass das Element in die Seite eingebettet erscheint, während der rechte und untere Rahmen hervorgehoben sind.
* **`herausstehend`**: Das Gegenteil von eingefasst; der rechte und untere Rahmen werden schattiert, während der obere und linke Rahmen hervorgehoben sind, wodurch die Illusion entsteht, dass das Element aus der Seite heraustritt.

**Schriftstil**:

* **`normal`**: Zeigt Text in einem standardmäßigen, nicht kursiven Schriftstil an.
* **`kursiv`**: Zeigt Text in kursiver Schrift an und neigt die Zeichen nach rechts.

**Horizontale Ausrichtung**:

* **`links`**: Richtet den Inhalt an der linken Seite des Containers aus.
* **`zentriert`**: Zentriert den Inhalt horizontal innerhalb des Containers.
* **`rechts`**: Richtet den Inhalt an der rechten Seite des Containers aus.


---

# 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/experience-components/ax-banner.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.