Banner

Übersicht

Die Avonni Banner-Komponente verbessert Ihre Nachrichten auf Ihrer Experience Cloud-Seite, indem sie Ihnen ermöglicht, reichhaltige Medien und Text prominent darzustellen. Sie können detaillierte Überschriften erstellen, beschreibende Untertitel hinzufügen und zusätzlichen Inhalt einfügen, um Ihre Nachrichten ansprechender zu gestalten.

Sie eignet sich ideal zur Ankündigung neuer Funktionen, zum Teilen von Updates oder zum Vorstellen von Geschichten mit einer ausgewogenen Mischung aus Text und Bildern.

Konfiguration des Avonni-Banners

Hinzufügen von Titel und Inhalt

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

Hinzufügen von Titel und Inhalt

1. Verwendung des Custom Property Editors:

• Eingabe von Inhalten: Sie können den Titel und den Inhalt schnell direkt in den im Avonni Banner verfügbaren Custom Property Editor eingeben. Dieser Ansatz ist benutzerfreundlich und effizient und ermöglicht schnelle Aktualisierungen und Bearbeitungen.

2. Textformatierungsoptionen:

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

• Benutzerdefinierte Gestaltung: Für spezifischere Anforderungen können Sie die Avonni-eigene Stil-Anpassung am unteren Ende des Custom Property Editors verwenden. Diese Option erlaubt es Ihnen, das Styling von Titel und Inhalt manuell festzulegen, unabhängig vom Gesamttheme der Seite.

• Vorteile benutzerdefinierter Gestaltung: Die benutzerdefinierte Gestaltung ist besonders nützlich, um das Banner hervorzuheben, wichtige Botschaften zu betonen oder wenn das Banner einen unverwechselbaren Stil benötigt, der sich vom Rest der Seite unterscheidet

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 festlegen

Die Avonni Banner-Komponente ist nicht auf Text und statische Bilder beschränkt. Integrieren Sie Video in Ihr Banner-Design, um Ihre Botschaft aufzupeppen und die Benutzerinteraktion 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 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 eindrucksvollen ersten Eindruck zu erzeugen, und kann verwendet werden, um das Erscheinungsbild des Banners an das Branding oder Theme der gesamten Seite 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 spezifische Marketingmaterialien, die bereits vorbereitet und lokal gespeichert sind.

2. Generiert mit einer Experience Cloud Site Expression:

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

• Diese Methode ermöglicht die Echtzeitanpassung des Banners basierend auf Benutzerinteraktionen, Site-Daten oder spezifischen Kriterien, die innerhalb der Experience Cloud-Seite definiert sind.

3. Aus dem CMS-Medienbereich:

• Benutzer können ein Bild aus dem integrierten Content-Management-System (CMS) auswählen.

• Diese Option bietet Zugriff auf eine Bibliothek von Bildern und stellt eine bequeme Möglichkeit dar, hochwertige und relevante Grafiken auszuwählen, die bereits Teil des Content-Repositories der Seite sind.

Interaktionsmöglichkeiten

Anklickbares Banner

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

Implementierung von Interaktionen

Um Ihr Banner anklickbar zu machen, schalten Sie zuerst den anklickbaren Schalter ein. Verwenden Sie dann den Abschnitt "Link To", um auszuwählen, was passieren soll, wenn jemand auf das Banner klickt. Dadurch können Sie dem Banner coole Funktionen 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 Seite zugeschnitten ist.

Spezifikationen

Hinweis

Objektanpassung:

• 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 innerhalb des Containers an, ohne es zuzuschneiden.

• abdecken: Bewahrt das Seitenverhältnis des Bildes, könnte aber Teile zuschneiden, um sicherzustellen, dass der Container vollständig bedeckt ist.

• keines: Das Bild behält seine ursprüngliche Größe unabhängig von der Containergröße.

• skalieren-down: Vergleicht den Unterschied zwischen keines und einpassen, und liefert eine kleinere konkrete Objektgröße.

Rahmenstile:

• keines: Es wird kein Rahmen angezeigt.

• durchgezogen: Eine durchgehende, ununterbrochene Linie erstellt 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.

• rillenförmig: Der Rahmen sieht aus, als wäre er in die Seite eingearbeitet und verleiht ein 3D-Erscheinungsbild. Der Effekt hängt vom Randfarbwert ab.

• gratförmig: Das Gegenteil von 'rillenförmig', es sieht so aus, als käme es aus der Seite heraus und erzeugt einen anderen 3D-Effekt. Das visuelle Ergebnis wird von der Rahmenfarbe beeinflusst.

• eingelassen: Die oberen und linken Rahmen sind so schattiert, dass das Element eingebettet in die Seite erscheint, während die rechten und unteren Rahmen hervorgehoben werden.

• hervorstehend: Das Gegenteil von 'eingelassen': Die rechten und unteren Rahmen sind schattiert, während die oberen und linken hervorgehoben werden, was die Illusion erzeugt, dass das Element aus der Seite hervortritt.

Schriftstil:

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

• kursiv: Zeigt Text in einem kursivierten Stil 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.