AX - Banner

Übersicht

AX - Banner ist eine Experience Cloud-Komponente, die prominente Meldungen mit Überschriften, Bildern und Textinhalten auf Experience Sites-Seiten anzeigt.

Verwenden Sie sie, um neue Funktionen anzukündigen, wichtige Updates zu teilen, Aktionen hervorzuheben oder Portalbenutzer mit gebrandeten Nachrichten zu begrüßen. Kombinieren Sie Text, Bilder, Symbole und Call-to-Action-Schaltflächen, um aufmerksamkeitsstarke Ankündigungen oben auf Seiten zu erstellen.

Perfekt für Portal-Startseiten, Ankündigungsbereiche, Funktions-Highlights oder überall dort, wo Sie Besuchern Ihrer Site — Kunden oder Partnern — wichtige Informationen übermitteln müssen.

Diese Komponente nutzt Slots für erweiterte Anpassungen, wodurch sie ideal für LWR-Sites ist. Aura-Sites unterstützen dieses Maß an Anpassung nicht.

---

Konfiguration des Avonni-Banners

Titel und Inhalt hinzufügen

Die Konfiguration von Titel und Inhalt ist ein einfacher Vorgang, der die Wirksamkeit Ihres Banners erheblich beeinflusst.

Titel und Inhalt hinzufügen

1. Verwendung des Custom Property Editors:

• Eingabe von Inhalten: Sie können den Titel und den Inhalt schnell direkt im Custom Property Editor eingeben, der innerhalb der Avonni Banner-Komponente bereitgestellt wird. Dieser Ansatz ist benutzerfreundlich und effizient und ermöglicht schnelle Aktualisierungen und Änderungen.

2. Optionen zur Textgestaltung:

• Übernahme vom Site-Theme: Die Avonni Banner-Komponente erlaubt es, dass Titel und Inhalt Textstile aus den Theme-Einstellungen der Experience Cloud-Site übernehmen. Dies sorgt für Konsistenz auf Ihrer Site und erhält ein einheitliches Erscheinungsbild.

• Benutzerdefinierte Gestaltung: Für spezifischere Anforderungen können Sie die dedizierten Styling-Anpassungen von Avonni am unteren Rand des Custom Property Editors verwenden. Diese Option ermöglicht es Ihnen, das Styling für Titel und Inhalt manuell festzulegen, unabhängig vom allgemeinen Theme der Site.

• Vorteile der benutzerdefinierten Gestaltung: Benutzerdefiniertes Styling ist besonders nützlich, um das Banner hervorzuheben, Schlüsselbotschaften zu betonen oder wenn das Banner einen vom Rest der Site abweichenden, eigenen Stil haben soll.

Horizontale Ausrichtung des Inhalts festlegen

• Zentriert: Platzieren Sie Ihren Text in der Mitte des Banners für ein ausgewogenes Erscheinungsbild.

• Links: Richten Sie Ihren Text linksbündig für ein traditionelles Layout aus.

• Rechts: Richten Sie Ihren Text rechtsbündig für ein einzigartiges Design aus.

Medienelement definieren

Die Avonni Banner-Komponente beschränkt sich nicht auf Text und statische Bilder. Integrieren Sie Video in Ihr Bannerdesign, um Ihre Botschaft aufzupeppen und die Nutzerbindung 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 zentriert, oben rechts, links, unten links, unten zentriert, unten rechts.

  • Optional können Sie Ihr Video klickbar machen, damit Nutzer 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 wiederholt in einer Schleife abspielen.

  • Entscheiden Sie, ob die Videoplayer-Steuerelemente angezeigt oder ausgeblendet werden sollen.

  • Steuern Sie die Geschwindigkeit, mit der das Video abgespielt wird.

  • Legen Sie die Anfangslautstärke für das Video fest.

Hinzufügen eines Hintergrundbildes

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

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 eignet sich ideal für benutzerdefinierte Grafiken, Firmenlogos oder spezifische Marketingmaterialien, die bereits vorbereitet und lokal gespeichert sind.

2. Generiert mit einer Experience Cloud Site Expression:

• Das Hintergrundbild kann dynamisch anhand von Site-Expressions generiert werden.

• Diese Methode ermöglicht eine Echtzeit-Anpassung des Banners basierend auf 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 stellt eine bequeme Möglichkeit dar, qualitativ hochwertige und relevante Grafiken auszuwählen, die bereits Teil des Inhaltsrepositoriums der Site sind.

Interaktionsmöglichkeiten

Klickbares Banner

Eine der wichtigsten interaktiven Funktionen der Avonni Banner-Komponente ist die Möglichkeit, klickbar zu sein. Dies verwandelt passive Betrachter in aktive Teilnehmer und ermutigt sie, sich intensiver mit dem Inhalt zu beschäftigen.

Implementierung von Interaktionen

Um Ihr Banner klickbar zu machen, schalten Sie zuerst den klickbaren Schalter ein. Verwenden Sie dann den Abschnitt "Link To", um auszuwählen, was passiert, wenn jemand auf das Banner klickt. Dadurch können Sie coole Funktionen zu Ihrem Banner hinzufügen.

Definition von Interaktionen

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 und auf die spezifischen Bedürfnisse und Ziele der Site zugeschnitten ist.

Interaktionstyp	Beschreibung
Toast anzeigen	Zeigt nach dem Klick eine kurze, informative Nachricht an. Ideal zur Bestätigung von Aktionen oder zur Bereitstellung von Kontext.
Navigieren	Leitet Benutzer beim Klicken auf eine andere Seite oder Ressource weiter. Geeignet, um zu verwandten Inhalten oder Ressourcen zu führen.
Warnmodal öffnen	Zeigt nach einem Klick Informationen oder Warnungen in einem Warnmodal an. Nützlich für wichtige Ankündigungen.
Flow-Dialog öffnen	Initiiert einen Salesforce-Flow in einem Dialog und ermöglicht komplexe Interaktionen. Hilft beim schrittweisen Anleiten von Prozessen.
Bestätigungsdialog öffnen	Löst nach der Interaktion einen Bestätigungsdialog aus. Unverzichtbar für Aktionen, die eine Benutzerbestätigung oder -anerkennung erfordern.

---

Spezifikationen

🎛️ Eigenschaften

Einstellung	Beschreibung
Titel	Definieren Sie die primäre Überschrift des Banners, um sofortige Aufmerksamkeit auf Ihre Hauptbotschaft zu lenken.
Titel-Textstil	Passen Sie das Erscheinungsbild Ihres Titels mit verschiedenen Textstilen an: Überschriften: Wählen Sie aus Überschriften der Stufen 1 bis 4 für unterschiedliche Betonungsgrade. Absätze: Wählen Sie Absatzstile 1 oder 2 für den passenden Ton und die passende Hervorhebung.
Untertitel	Begleiten Sie Ihren Titel mit einem prägnanten Untertitel oder Beschreiber, der zusätzlichen Kontext oder einen Teaser für den folgenden Inhalt bietet.
Untertitel-Textstil	Passen Sie das Erscheinungsbild Ihres Untertitels mit vordefinierten Textstilen an: Überschriften: Wählen Sie je nach Wichtigkeit aus Überschriften 1 bis 4. Absätze: Wählen Sie Absätze 1 oder 2, um Ihren Titel zu ergänzen.
Inhalt	Bereichern Sie Ihr Banner mit ausführlichem Text, der umfassende Einblicke, Erklärungen oder Handlungsaufforderungen bietet. Hier können Sie tiefer in die Einzelheiten Ihrer Botschaft eintauchen.
Horizontale Ausrichtung des Inhalts	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 Ihrem Gesamtdesign in Einklang steht.
CMS-Hintergrund	Nutzen Sie Inhalte aus Ihrem Content-Management-System als Hintergrund für Ihr Banner, um Konsistenz und einfache Aktualisierungen zu gewährleisten.
Hintergrund-URL	Definieren Sie einen spezifischen Weblink, um das Hintergrundbild für Ihr Banner zu beziehen und Ihrem Inhalt visuellen Kontext oder Verstärkung zu geben.
Media-URL	Verlinken Sie mit einem 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.
Medium als Hintergrund anzeigen	Wählen Sie, Ihr Medium als Banner-Hintergrund festzulegen, um ein immersives Multimedia-Erlebnis zu ermöglichen und gleichzeitig den Textinhalt in den Vordergrund zu rücken.
Medienposition	Bestimmen Sie die räumliche Anordnung Ihres Mediums im Banner — zentriert, links, rechts oder eine andere benutzerdefinierte Positionierung, die Ihr Layout ergänzt.
Overlay-Farbe	Fügen Sie Ihrem Banner eine Farbüberlagerung hinzu, die nützlich sein kann, um die Lesbarkeit zu verbessern, Stimmung zu setzen oder sich an Markenfarben anzupassen.
Klickbar	Machen Sie Ihr Banner zu einem interaktiven Element. Sobald aktiviert, kann das gesamte Banner als klickbares Element fungieren, Benutzer zu einem angegebenen Link weiterleiten oder eine definierte Aktion auslösen.

🏞️ Medienattribute

🎨 Erscheinungsbild

Hinweis

Object Fit:

• füllen: Dehnt das Bild, um den Container auszufüllen, wodurch es möglicherweise verzerrt wird.

• einpassen: Bewahrt das Seitenverhältnis des Bildes und passt es in den Container ein, ohne es zuzuschneiden.

• abdecken: Bewahrt das Seitenverhältnis des Bildes, kann jedoch Teile abschneiden, um sicherzustellen, dass der Container vollständig abgedeckt ist.

• keines: Das Bild behält seine Originalgröße unabhängig von der Größe des Containers.

• verkleinern: Vergleicht den Unterschied zwischen keines und einpassenund liefert eine kleinere konkrete Objektgröße.

Rahmenstile:

• keines: Es wird kein Rahmen angezeigt.

• durchgehend: Eine fortlaufende, ununterbrochene Linie erzeugt den Rahmen. Es ist der gebräuchlichste und einfachste Stil.

• gestrichelt: Der Rahmen erscheint als eine Reihe kurzer Liniensegmente oder Striche.

• gepunktet: Der Rahmen besteht aus einer Reihe runder Punkte.

• doppelt: Zwei parallele durchgehende Linien werden für den Rahmen verwendet. Der Raum zwischen den beiden Linien ist transparent oder entspricht dem Hintergrund.

• rinnenförmig: Der Rahmen wirkt, als wäre er in die Seite eingearbeitet und erzeugt ein 3D-Erscheinungsbild. Der Effekt hängt vom Rahmenfarbwert ab.

• gratförmig: Das Gegenteil von „rinnenförmig“ — es wirkt, als käme es aus der Seite heraus und erzeugt einen anderen 3D-Effekt. Das visuelle Ergebnis wird durch die Rahmenfarbe beeinflusst.

• eingelassen: Die oberen und linken Rahmenränder sind so abgeschattet, dass das Element eingebettet wirkt, während die rechten und unteren Ränder hervorgehoben sind.

• vorstehend: Das Gegenteil von „eingelassen“ — die rechten und unteren Ränder sind abgeschattet, während die oberen und linken Ränder hervorgehoben sind, wodurch der Eindruck entsteht, dass das Element aus der Seite herausragt.

Schriftstil:

• normal: Zeigt Text in einem standardmäßigen, nicht-kursiven Schriftstil an.

• kursiv: Zeigt Text in einem kursiven Stil an, bei dem die Zeichen nach rechts geneigt sind.

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.