Mit Illustration und Schaltflächen

Übersicht

Die Avonni Banner Die Komponente ist darauf ausgelegt, die Aufmerksamkeit der Benutzer mit überzeugenden 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 Ansehen eines Videos öffnet, und einer weiteren Schaltfläche, die den Benutzer auf eine andere Seite weiterleitet.

Live-Ergebnis

Interaktiver Schritt-für-Schritt-Konfigurationsleitfaden

Banner hinzufügen

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. Medien festlegen:

   • Suchen Sie in den Banner-Einstellungen nach der Option, ein Bild oder eine Illustration hinzuzufügen (CMS Media ODER Media-URL)
   • Laden Sie die gewünschte Illustration hoch oder wählen Sie sie aus und positionieren Sie sie auf der linken oder rechten Seite des Banners (über das Attribut Media Position)

Schaltflächen konfigurieren

1. Eine Schaltfläche zum Öffnen eines Video-Modals hinzufügen:

   • Ziehen Sie das Avonni-Layout, um ein Layout mit 2 Spalten zu erstellen und in jeder Spalte Schaltflächen hinzuzufügen.
   • Ziehen Sie die Avonni-Button-Dialog-Komponente.
   • Passen Sie die Einstellungen der Schaltfläche an (Beschriftung, Variante, Ausrichtung)
   • Beschriften Sie die Schaltfläche passend, zum Beispiel mit „Video ansehen“.
   • Klicken Sie auf die Schaltfläche, um das Modal zu öffnen.
   • Ziehen Sie innerhalb des Modals den Videoplayer mithilfe der Avonni-Video-Komponente (im dialogContent-Bereich)
   • Konfigurieren Sie die Avonni-Video-Komponente.
2. Eine 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, zum Beispiel „Mehr erfahren“.
   • Konfigurieren Sie die Navigationsinteraktion im Abschnitt „Link To“, indem Sie die Zielseite für die Weiterleitung des Benutzers angeben.

Beispielimplementierung

Angenommen, Sie erstellen ein Werbebanner für eine neue Produkteinführung:

1. Illustration:

   • Sie fügen auf der linken Seite des Banners eine auffällige Illustration des neuen Produkts hinzu, um Aufmerksamkeit zu erregen.
2. Schaltfläche für das Video-Modal:

   • Die erste Schaltfläche lautet „Demo ansehen“. Sie ist so eingestellt, dass sie einen Dialog öffnet, in dem ein Produkt-Demo-Video eingebettet ist. Dafür können Sie die Avonni Button Dialog dafür verwenden.
3. Weiterleitungsschaltfläche:

   • Die zweite Schaltfläche, „Produktdetails“, wenn sie angeklickt wird, navigiert zu einer Seite mit weiteren Informationen über das Produkt.
4. Gestaltung und Testen:

   • Gestalten 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 Benutzer zu einer Seite führen, die die Geschichte des Banners fortsetzt.