Mit Illustration und Schaltflächen

Übersicht

Das Avonni-Banner Die Komponente wurde entwickelt, um die Aufmerksamkeit der Benutzer mit ansprechenden 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 Abspielen eines Videos öffnet, und einer weiteren Schaltfläche, die den Benutzer auf eine andere Seite weiterleitet.

Live-Ergebnis

Interaktiver Schritt-für-Schritt-Konfigurationsleitfaden

Hinzufügen des Banners

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. Legen Sie das Medium fest:

   • Suchen Sie in den Banner-Einstellungen die Option, ein Bild oder eine Illustration hinzuzufügen (CMS-Medium ODER Medien-URL)

   • Laden Sie die gewünschte Illustration hoch oder wählen Sie sie aus und positionieren Sie sie links- oder rechtsseitig im Banner (mithilfe des Attributs Medienposition)

Konfiguration der Schaltflächen

1. Schaltfläche zum Öffnen eines Videomodals hinzufügen:

   • Ziehen Sie das Avonni-Layout, um eine Anordnung mit 2 Spalten zu erstellen, und fügen Sie Schaltflächen in jede Spalte ein.

   • Ziehen Sie die Avonni-Button-Dialog-Komponente.

   • Passen Sie die Einstellungen der Schaltfläche an (Beschriftung, Variante, Ausrichtung).

   • Beschriften Sie die Schaltfläche entsprechend, z. B. "Video ansehen".

   • Klicken Sie auf die Schaltfläche, um das Modal zu öffnen.

   • Ziehen Sie innerhalb des Modals den Videoplayer mithilfe des Avonni-Video-Komponente (im dialogContent-Bereich)

   • Konfigurieren Sie die Avonni-Video-Komponente.

2. 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, z. B. "Mehr erfahren".

   • Konfigurieren Sie die Navigations-Interaktion im Abschnitt 'Link zu', indem Sie die Zielseite für die Weiterleitung der Benutzer angeben.

Beispielimplementierung

Angenommen, Sie erstellen ein Werbebanner für die Einführung eines neuen Produkts:

1. Illustration:

   • Sie fügen auf der linken Seite des Banners eine auffällige Illustration des neuen Produkts hinzu, um Aufmerksamkeit zu erregen.

2. Videomodal-Schaltfläche:

   • Die erste Schaltfläche lautet "Demo ansehen". Sie ist so eingestellt, dass ein Modaldialog geöffnet wird, in dem ein Produktdemo-Video eingebettet ist. Sie können dafür das Avonni Button Dialog verwenden.

3. Weiterleitungs-Schaltfläche:

   • Die zweite Schaltfläche, "Produktdetails", leitet beim Klicken zu einer Seite weiter mit weiteren Informationen zum Produkt.

4. Stil und Test:

   • Stilisieren 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 die Benutzer zu einer Seite führen, die die im Banner begonnene Erzählung fortsetzt.