> 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 Experience Sites-Seiten auffällige Nachrichten mit Überschriften, Bildern und Textinhalten anzeigt.

Verwenden Sie sie, um neue Funktionen anzukündigen, wichtige Aktualisierungen zu teilen, Aktionen hervorzuheben oder Portalbenutzer mit markengerechten Mitteilungen zu begrüßen. Kombinieren Sie Text, Bilder, Symbole und Call-to-Action-Schaltflächen, um aufmerksamkeitsstarke Ankündigungen am oberen Rand von Seiten zu erstellen.

Perfekt für Portal-Startseiten, Ankündigungsbereiche, Funktions-Highlights oder überall dort, wo Sie Kunden oder Partnern, die Ihre Site 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="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-bf96d5a1aa7519e2b16ede8f3bb4704a3f621fee%2F2024-02-14_20-48-00.png?alt=media" alt=""><figcaption></figcaption></figure>

## Konfiguration

### Titel und Inhalt hinzufügen

Das Konfigurieren von Titel und Inhalt ist ein unkomplizierter Vorgang, der die Wirksamkeit Ihres Banners erheblich beeinflusst.

**Titel und Inhalt hinzufügen**

**1. Verwendung des benutzerdefinierten Eigenschaftseditors:**

* **Inhalte eingeben**: Sie können Titel und Inhalt schnell direkt in den im Avonni-Banner-Komponenten bereitgestellten benutzerdefinierten Eigenschaftseditor eingeben. Dieser Ansatz ist benutzerfreundlich und effizient und ermöglicht schnelle Aktualisierungen und Bearbeitungen.

**2. Textformatierungsoptionen:**

* **Übernahme vom Site-Design**: Die Avonni-Banner-Komponente ermöglicht es, dass Titel und Inhalt Textstile von den Design-Einstellungen der Experience-Cloud-Site übernehmen. Dadurch wird Konsistenz auf Ihrer gesamten Site gewährleistet und ein stimmiges Erscheinungsbild bewahrt.
* **Benutzerdefinierte Formatierung**: Sie können unten im benutzerdefinierten Eigenschaftseditor die dedizierte Avonni-Formatierungsanpassung für speziellere Anforderungen verwenden. Mit dieser Option können Sie die Formatierung für Titel und Inhalt manuell festlegen, unabhängig vom Gesamtdesign der Site.
* **Vorteile der benutzerdefinierten Formatierung**: Benutzerdefinierte Formatierung ist besonders nützlich, um das Banner hervorzuheben, wichtige Nachrichten zu betonen oder wenn das Banner einen eigenen Stil haben soll, der sich vom Rest der Site 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 links aus für ein traditionelles Layout.
* **Rechts:** Richten Sie Ihren Text rechts 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 Botschaft aufzupeppen und das Nutzerengagement zu erhöhen.

* **Verbessern Sie Ihr Banner mit Video**
  * Fügen Sie ein Videoelement 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 Anklicken damit interagieren können.
* **Zusätzliche Videoeinstellungen**
  * Wählen Sie, ob Ihr Video beim Laden des Banners automatisch abgespielt wird.
  * Lassen Sie das Video in einer Endlosschleife wiederholen.
  * Entscheiden Sie, ob die Steuerelemente des Videoplayers angezeigt oder ausgeblendet werden sollen.
  * Steuern Sie die Geschwindigkeit, mit der das Video abgespielt wird.
  * Legen Sie die Ausgangslautstärke für das Video fest.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-f011ba9c8a4d4574a472e293f9eea608e7934091%2F2024-02-14_20-53-10.png?alt=media" alt=""><figcaption></figcaption></figure>

### Hinzufügen eines Hintergrundbildes

Diese Funktion ist praktisch, um einen visuell auffälligen ersten Eindruck zu erzeugen, und kann verwendet werden, um das Erscheinungsbild des Banners mit dem allgemeinen Branding oder Design der Site abzustimmen.

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

**1. Manuelles Hochladen:**

* 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 Grundlage von Site-Ausdrücken generiert werden.
* Diese Methode ermöglicht eine Anpassung des Banners in Echtzeit basierend auf Benutzerinteraktionen, Site-Daten oder bestimmten 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 stellt eine praktische Möglichkeit dar, hochwertige und relevante Grafiken auszuwählen, die bereits Teil des Inhalts-Repositorys der Site sind.

### Eigenschaften

**Titel** definiert die Hauptüberschrift des Banners und lenkt sofort die Aufmerksamkeit auf Ihre Hauptbotschaft. **Untertitel** ergänzt sie mit einer prägnanten Unterüberschrift oder Beschreibung für zusätzlichen Kontext, und **Inhalt** bereichert das Banner mit ausführlichem Text – einem umfassenden Einblick, einer Erläuterung oder einem Call-to-Action. Ihre Textstile (Überschrift 1–4 oder Absatz 1–2) werden auf der Registerkarte „Stil“ festgelegt.

**Horizontale Ausrichtung des Inhalts** passt die horizontale Positionierung des Inhaltstextes an – `links`, `zentriert`, oder `rechts`.

**CMS-Hintergrund** und **Hintergrund-URL oder Ausdruck** legt das Hintergrundbild des Banners fest – verwenden Sie CMS-Inhalte oder einen direkten Weblink.

**CMS-Medien** und **Medien-URL oder Ausdruck** fügt ein Multimedia-Element (Video, Audio oder anderes) neben oder als Teil des Banners hinzu. **Medien als Hintergrund anzeigen** setzt das Medium als Hintergrund des Banners für ein immersives Erlebnis, während der Text im Vordergrund bleibt, und **Medienposition** legt dessen Platzierung fest (oben links, zentriert, rechts usw.).

**Überlagerungsfarbe** fügt eine Farbüberlagerung hinzu, um die Lesbarkeit zu verbessern, die Stimmung zu setzen oder sie an Branding-Farben anzupassen.

**Anklickbar** verwandelt das gesamte Banner in ein interaktives Element, das Benutzer weiterleitet oder eine definierte Aktion auslöst (konfigurieren Sie dies unter [Interaktionen](#interactions)).

### Medienattribute

Wenn das Banner Medien enthält, steuern diese Einstellungen die Wiedergabe. **Automatische Wiedergabe** startet sie automatisch, wenn die Seite geladen wird. **Wiederholen** spielt sie nach Erreichen des Endes kontinuierlich erneut ab. **Steuerelemente ausblenden** hält die Steuerelemente des Players verborgen für ein klareres Erscheinungsbild. **Wiedergaberate** passt die Geschwindigkeit an, mit der die Medien wiedergegeben werden. **Lautstärke** steuert die Audiopegel, von dezenten Hintergrundklängen bis hin zu dominanter Sprachausgabe.

## Interaktionen

**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 ermutigt, sich intensiver mit den Inhalten zu beschäftigen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-3d9fc84708dc88163a34feee353a9a233c36509e%2F2024-03-16_11-16-16.png?alt=media" alt=""><figcaption></figcaption></figure>

**Interaktionen implementieren**

Um Ihr Banner anklickbar zu machen, aktivieren Sie zunächst den Schalter für „anklickbar“. Verwenden Sie dann den Abschnitt „Link zu“, um auszuwählen, was beim Anklicken des Banners geschieht. So können Sie Ihrem Banner coole Funktionen hinzufügen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-18022913b2d9754a42a890b024ed0c27f3557b62%2F2024-03-16_11-17-42.png?alt=media" 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 Site zugeschnitten ist.

<table><thead><tr><th width="184.5">Interaktionstyp</th><th>Beschreibung</th></tr></thead><tbody><tr><td><a href="/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/show-toast.md">Toast anzeigen</a></td><td>Zeigt nach dem Klick eine kurze, informative Nachricht an. Ideal zur Bestätigung von Aktionen oder zur Bereitstellung von Kontext.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md">Navigieren</a></td><td>Leitet Benutzer beim Anklicken zu einer anderen Seite oder Ressource weiter. Geeignet, um zu verwandten Inhalten oder Ressourcen zu führen.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-alert-modal.md">Alarm-Modalfenster öffnen</a></td><td>Zeigt nach einem Klick Informationen oder Warnungen in einem Alarm-Modalfenster an. Nützlich für wichtige Ankündigungen.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-flow-dialog.md">Flow-Dialog öffnen</a></td><td>Startet einen Salesforce-Flow in einem Dialog und ermöglicht komplexe Interaktionen. Hilft bei der Führung durch schrittweise Prozesse.</td></tr><tr><td><a href="/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-confirm.md">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>

## Styling

{% tabs %}
{% tab title="Größe" %}
Steuert die Abmessungen des Banners.
{% endtab %}

{% tab title="Rahmen" %}
Steuert den Bannerrahmen (Farbe / Größe / Stil / Radius).
{% endtab %}

{% tab title="Außenabstand" %}
Steuert den äußeren Abstand um das Banner.
{% endtab %}

{% tab title="Innenabstand" %}
Steuert den inneren Abstand des Banners.
{% endtab %}

{% tab title="Titel" %}

* **Farbe / Schriftgröße / Schriftstil / Schriftstärke:** Formatiert den Titeltext.
* **Horizontale Ausrichtung:** Richtet den Titel aus.
  {% endtab %}

{% tab title="Untertitel" %}

* **Farbe / Schriftgröße / Schriftstil / Schriftstärke:** Formatiert den Beschriftungstext.
  {% endtab %}

{% tab title="Inhalt" %}

* **Farbe / Schriftgröße / Schriftstil / Schriftstärke:** Formatiert den Inhaltstext.
* **Horizontale Ausrichtung / Breite:** Steuert die Inhaltsausrichtung und -breite.
  {% endtab %}

{% tab title="Hintergrund" %}

* **Farbe:** Legen Sie die Hintergrundfarbe fest.
* **Bild-Objektanpassung:** Steuert, wie das Hintergrundbild das Banner ausfüllt.
  {% endtab %}

{% tab title="Medien" %}

* **Objektanpassung:** Steuert, wie das Medium seinen Bereich ausfüllt.
  {% endtab %}
  {% endtabs %}

### **Hinweis**

**Objektanpassung**:

* **`füllen`**: Streckt das Bild, damit es in den Container passt, wodurch es möglicherweise verzerrt wird.
* **`einpassen`**: Behält das Seitenverhältnis des Bildes bei und passt es in den Container ein, ohne es zuzuschneiden.
* **`abdecken`**: Behält das Seitenverhältnis des Bildes bei, kann jedoch einige Teile zuschneiden, um sicherzustellen, dass der Container vollständig abgedeckt wird.
* **`keine`**: Das Bild hat unabhängig von der Containergröße seine ursprüngliche Größe.
* **`verkleinern`**: Vergleicht den Unterschied zwischen `keine` und `einpassen`, und liefert eine kleinere konkrete Objektgröße.

**Rahmenstile:**

* **`keine`**: Es wird kein Rahmen angezeigt.
* **`durchgezogen`**: Eine durchgehende, ununterbrochene Linie bildet den Rahmen. Das ist der häufigste und einfachste Stil.
* **`gestrichelt`**: Der Rahmen erscheint als 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 Raum zwischen den beiden Linien ist transparent oder entspricht dem Hintergrund.
* **`Rille`**: Der Rahmen sieht aus, als wäre er in die Seite eingearbeitet, wodurch ein 3D-Effekt entsteht. Der Effekt hängt vom Wert der Rahmenfarbe ab.
* **`Kante`**: Das Gegenteil von Rille: Es sieht aus, als würde er aus der Seite hervortreten, wodurch ein weiterer 3D-Effekt entsteht. Das visuelle Ergebnis wird von der Rahmenfarbe beeinflusst.
* **`eingelassen`**: Der obere und der linke Rahmen werden schattiert, sodass es wirkt, als wäre das Element in die Seite eingebettet, während der rechte und der untere Rahmen hervorgehoben werden.
* **`erhaben`**: Das Gegenteil von eingelassen: Der rechte und der untere Rahmen werden schattiert, während der obere und der linke Rahmen hervorgehoben werden, wodurch die Illusion entsteht, dass das Element aus der Seite hervortritt.

**Schriftstil**:

* **`normal`**: Zeigt Text in einem standardmäßigen, nicht kursiven Schriftstil an.
* **`kursiv`**: Zeigt Text in kursiver Darstellung 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.