Karussellbanner carousel-banners

Ermitteln Sie Hotspot- und Imagemap-Variablen (nur für Kunden, die Experience Manager Assets und Dynamic Media verwenden).

Ermitteln Sie zunächst die von der vorhandenen Schnellansichtsimplementierung verwendeten dynamischen Variablen, damit Sie die Hotspots und Imagemap-Daten beim Erstellen von Karussellbannern in Adobe Experience Manager Assets korrekt eingeben können.

Optional: Erstellen Sie eine Viewer-Vorgabe für Karussellsets bei Bedarf.

Wenn Sie ein Administrator sind, können Sie das Verhalten und das Erscheinungsbild des Karussells anpassen, indem Sie eine eigene Karussell-Viewer-Vorgabe erstellen. Der größte Vorteil besteht darin, dass diese benutzerdefinierte Viewer-Vorgabe für mehrere Karussells wiederverwendet werden kann. Benutzer haben jedoch auch die Möglichkeit, das Verhalten und das Erscheinungsbild des Karussells direkt bei der Erstellung anzupassen. Diese Methode ist der bevorzugte Ansatz, wenn Sie ein spezifisches Design für ein bestimmtes Karussell wünschen.

Laden Sie ein Bildbanner hoch.

Laden Sie Bildbanner hoch, die interaktiv sein sollen.

Erstellen Sie Karussellsets.

In Karussellsets navigieren Benutzer durch Bannerbilder und klicken auf Hotspots oder Imagemaps, um auf relevante Inhalte zuzugreifen.

Um ein Karussellset in Assets zu erstellen, klicken Sie auf Erstellen und wählen Sie dann Karussellsets aus. Fügen Sie den einzelnen Folien Assets hinzu und klicken Sie auf Speichern. Sie können das Erscheinungsbild und Verhalten des Karussells auch direkt im Editor bearbeiten.

Fügen Sie Hotspots oder Imagemaps zu einem Bildbanner hinzu.

Fügen Sie einem Bildbanner mindestens einen Hotspot oder eine Imagemap hinzu und weisen Sie allen von ihnen eine Aktion wie einen Link, eine Schnellansicht oder ein Experience Fragment zu. Nachdem Sie Hotspots oder Imagemaps hinzugefügt haben, schließen Sie diese Aufgabe ab, indem Sie das Karussellset veröffentlichen. Durch das Veröffentlichen wird der Einbettungs-Code erstellt, den Sie kopieren und auf die Landingpage Ihrer Website anwenden können.

Siehe (Optional) Anzeigen einer Vorschau für Karussellbanner – Optional. Bei Bedarf können Sie eine Darstellung des Karussellsets anzeigen und dessen Interaktivität testen.

Veröffentlichen Sie die Karussellbanner.

Sie veröffentlichen ein Karussellset wie jedes andere Asset. Gehen Sie in Assets zum Karussellset, wählen Sie es aus und klicken Sie auf Veröffentlichen. Durch Veröffentlichen eines Karussellsets wird die URL und die Einbettungszeichenfolge aktiviert.

Führen Sie einen der folgenden Schritte aus:

• Hinzufügen eines Karussellbanners zu Ihrer Website-Seite Sie können Karussellbanner-URLs oder Einbettungs-Codes hinzufügen, die Sie auf die Website-Seite kopiert haben.

  • Integrieren Sie das Karussellbanner in eine Schnellansicht. Wenn Sie ein Drittanbietersystem für Web Content Management verwenden, müssen Sie das neue Karussellbanner mit der vorhandenen Schnellansichtsimplementierung auf Ihrer Website integrieren.

• Fügen Sie Ihrer Website in Experience Manager ein Karussellbanner hinzu. Wenn Sie Experience Manager Sites-Kunde sind, können Sie das Karussellset der Seite in Experience Manager direkt hinzufügen, indem Sie die interaktive Medienkomponente verwenden.

Gehen Sie in Assets zu dem Ordner, in dem Sie das Karussellset erstellen möchten, und dann zu Erstellen > Karussellset.

Wählen Sie auf der Karussellbanner-Editorseite Hier tippen, um die Asset-Auswahl zu öffnen aus, um das Bild für die erste Folie auszuwählen.

Führen Sie auf der Karussellbanner-Editorseite eine der folgenden Aktionen aus:

• Klicken Sie oben links auf Folie hinzufügen.

• Wählen Sie in der Mitte der Seite Hier tippen, um die Asset-Auswahl zu öffnen.

Klicken Sie zur Auswahl von Assets, die Sie in das Karussellset aufnehmen möchten. Die ausgewählten Assets sind mit einem Häkchen versehen. Wenn Sie fertig sind, wählen Sie in der oberen rechten Ecke der Seite Auswählen.

Mit der Asset-Auswahl können Sie nach Assets suchen, indem Sie ein Keyword eingeben und auf Zurück tippen/klicken. Sie können auch Filter anwenden, um Ihre Suchergebnisse genauer abzustimmen. Sie können nach Pfad, Sammlung, Dateityp und Tag filtern. Wählen Sie den Filter und klicken Sie in der Symbolleiste auf das Symbol  Filter. Ändern Sie die Ansicht, indem Sie das Symbol „Ansicht“ tippen und dann Spaltenansicht, Kartenansicht oder Listenansicht wählen.

Weitere Informationen finden Sie unter Arbeiten mit Selektoren.

Fügen Sie weitere Folien hinzu, bis Sie alle gewünschten Bilder für das Karussellset ausgewählt haben.

(Optional) Führen Sie einen der folgenden Schritte aus:

• Ziehen Sie bei Bedarf Folien, um die Anordnung der Bilder im Bildset zu ändern.

• Um ein Bild zu löschen, wählen Sie es aus und klicken Sie in der Symbolleiste auf Folie löschen.

• Um eine Vorgabe anzuwenden, klicken Sie oben rechts auf die Dropdown-Liste mit den Vorgaben. Wählen Sie anschließend eine Vorgabe aus, um sie auf das ganze Set anzuwenden.

Um eine Folie zu löschen, wählen Sie die Folie aus und klicken Sie dann in der Symbolleiste auf Folie löschen. Um eine Folie zu verschieben, wählen Sie das Symbol zur Neuanordnung aus und halten und verschieben Sie das Element an die gewünschte Position.

Nachdem Sie die Bilder in den Folien hinzugefügt haben, können Sie einen Hotspot, eine Imagemap oder beides in die Bilder einfügen. Siehe Hinzufügen von Hotspots oder Imagemaps zu einem Bildbanner.

Sie können das visuelle Design und das Verhalten von Karussellsets ändern. Wählen Sie die Registerkarten Verhalten und Erscheinungsbild aus und nehmen Sie Anpassungen am Aussehen des Karussellbanners oder am Verhalten bestimmter Komponenten vor. Weitere Informationen zum Verwenden des Viewer-Editors finden Sie unter Verwalten von Viewer-Vorgaben.

* Dauer der Anzeige eines Bildes. Standardmäßig wird jedes Bild 9 Sekunden lang angezeigt.
* Animation. Standardmäßig ist jeder Folienübergang eine Überblendung. Sie können dies zu einem Folienübergang ändern.
* Stil der Schaltflächen. Benutzende können die Banner durchlaufen, indem sie auf die jeweiligen Punkte oder Zahlen klicken. Sie können ändern, wo die Set-Indikatoren angezeigt werden (und ob es sich um einen numerischen oder Punktstil handelt), und auch ihre Größe bestimmen.
* Ändern Sie den Hervorhebungsstil einer Bildkarte oder des Symbols für Hotspots.
* Bevor Sie eine Viewer-Vorgabe bearbeiten, wählen Sie den Stil aus, auf dem die Vorgabe basieren soll. Wenn Sie keinen Stil auswählen, bevor Sie mit dem Bearbeiten der Viewer-Vorgabe beginnen, werden alle Ihre Änderungen verworfen, wenn Sie zu einer anderen Vorgabe wechseln.

Sie können auch eine Vorschau des Karussellbanners anzeigen. Siehe (Optional) Anzeigen einer Vorschau für Karussellbanner.

Klicken Sie auf Speichern, wenn Sie fertig sind.

Gehen Sie in Assets zu dem Karussellset, das interaktiv werden soll.

Wählen Sie das Karussellset aus und klicken Sie auf Bearbeiten. Der Karussell-Viewer-Editor wird geöffnet.

Wählen Sie die Folie aus, die interaktiv sein soll.

Wählen Sie nahe der linken oberen Ecke der Seite Hotspot oder Imagemap aus.

Führen Sie einen der folgenden Schritte aus:

• Hotspots: Klicken Sie auf dem Bild auf eine Stelle, an der der Hotspot angezeigt werden soll.
• Imagemaps: Wählen Sie das Bild aus und ziehen Sie dann von oben links nach unten rechts, um den Bereich für die Imagemap zu erstellen. Sie können die Größe der Bildkarte anpassen, indem Sie die Ecken ziehen.

Ziehen Sie den Hotspot oder die Imagemap ggf. an eine neue Position. Fügen Sie weitere Hotspots oder Imagemaps nach Bedarf hinzu.

Um einen Hotspot oder eine Imagemap zu löschen, klicken Sie auf die Registerkarte Aktionen. Wählen Sie unter der Überschrift Karten und Hotspots im Dropdown-Menü Ausgewählter Typ den Namen des Hotspots oder der Imagemap aus, den oder die Sie entfernen möchten. Klicken Sie auf das Papierkorb-Symbol neben dem Menü und dann auf Löschen.

Geben Sie im Namenstextfeld den Namen des Hotspots oder der Bildkarte ein. Dieser Name wird auch in der Dropdown-Liste Karten und Hotspots angezeigt. Wenn Sie einen Namen angeben, können Sie den Hotspot oder die Imagemap einfach erkennen, sollten Sie später Änderungen vornehmen.

Führen Sie einen der folgenden Schritte auf der Registerkarte Aktion aus:

• Wählen Sie Schnellansicht aus.

  • Wenn Sie Experience Manager Sites- und E-Commerce-Kunde sind, wählen Sie das Produktauswahlsymbol (Lupe) aus, um die Seite „Produkt wählen“ zu öffnen. Wählen Sie das Produkt aus, das Sie verwenden möchten, und wählen Sie dann das Häkchen in der rechten oberen Ecke der Seite aus, um zum Karussellbanner-Editor zurückzukehren.

  • Wenn Sie kein Experience Manager Sites- oder E-Commerce-Kunde sind, gehen Sie wie folgt vor:

    • Lesen Sie Ermitteln von Hotspot-Variablen, wenn Sie diese Variablen definieren müssen.

    • Geben Sie anschließend manuell den SKU-Wert ein. Geben Sie im Textfeld „SKU-Wert“ die Bestandseinheit (Stock Keeping Unit, SKU) des Produkts ein. Hierbei handelt es sich um eine eindeutige Kennung für die jeweiligen von Ihnen angebotenen Produkte oder Services. Der variable Teil der Schnellansichtsvorlage wird automatisch mit dem eingegebenen SKU-Wert ausgefüllt, sodass das System den Hotspot, auf den getippt wird, mit der Schnellansicht einer bestimmten SKU verbinden kann.

    • (Optional) Wenn andere Variablen in der Schnellansicht vorhanden sind, die Sie verwenden müssen, um ein Produkt weitergehend zu identifizieren, wählen Sie Generische Variable hinzufügen. Geben Sie im Textfeld eine zusätzliche Variable an. Beispielsweise ist „category=Men“ eine hinzugefügte Variable.

    • Weitere Informationen finden Sie unter Arbeiten mit Selektoren.

• Wählen Sie Hyperlink aus.

  • Wenn Sie Experience Manager Sites-Kunde sind, klicken Sie auf das Symbol zur Website-Auswahl (Ordner), um zu einer URL zu gehen.

    note note
    NOTE
    Die URL-basierte Verknüpfungsmethode ist nicht möglich, wenn Ihr interaktiver Inhalt über Links mit relativen URLs verfügt, insbesondere über Links zu Seiten in Adobe Experience Manager Sites.

  • Wenn Sie Einzelkunde sind, geben Sie im Textfeld „HREF“ den vollständigen URL-Pfad zu einer verknüpften Web-Seite an.

Vergessen Sie nicht anzugeben, ob der Link auf einer neuen Browser-Registerkarte (empfohlener Standard) oder auf derselben Registerkarte geöffnet werden soll.

Weitere Informationen finden Sie unter Arbeiten mit Selektoren.

• Wählen Sie Experience Fragment aus.

  • Wenn Sie AEM Sites-Kunde sind, klicken Sie auf das Suchsymbol (Lupe), um die Seite „Experience Fragment“ zu öffnen. Wählen Sie das Experience Fragment aus, das Sie verwenden möchten, und wählen Sie dann Auswählen in der rechten oberen Ecke der Seite aus, um zur Hotspot-Verwaltungsseite zurückzukehren.
    Weitere Informationen finden Sie unter Experience Fragments.

  • Legen Sie die Breite und Höhe des Experience Fragment fest, so wie es im Banner angezeigt werden soll.

    note note
    NOTE
    Die Tools zur Freigabe in Social Media werden im Karussellbanner nicht unterstützt, wenn Sie den Viewer in ein Experience Fragment einbetten.
    Um dieses Problem zu vermeiden, erstellen Sie Viewer-Vorgaben, die keine Tools zur Freigabe in Social Media aufweisen. Mit diesen Viewer-Vorgaben können Sie sie erfolgreich in Experience Fragments einbetten.

Sie können auch eine Vorschau des Karussellbanners anzeigen. Siehe (Optional) Anzeigen einer Vorschau für Karussellbanner.

Wählen Sie Speichern aus.

Veröffentlichen Sie das Karussellset. Durch das Veröffentlichen wird der Einbettungs-Code oder die URL erstellt, den/die Sie auf der Web-Seite verwenden können. Wenn Sie ein Experience Manager Sites-Kunde sind, können Sie Ihrer Web-Seite das Karussellset direkt hinzufügen.

Siehe Veröffentlichen von Assets.

Siehe Hinzufügen eines Karussellsets zur Landingpage Ihrer Website.

Führen Sie einen der folgenden Schritte aus:

• Bewegen Sie den Mauszeiger über ein Karussellset-Asset und klicken Sie auf Bearbeiten (Stiftsymbol).

• Bewegen Sie den Mauszeiger über ein Karussellset-Asset und wählen Sie in der Symbolleiste Auswählen (Häkchensymbol) und dann Bearbeiten aus.

• Wählen Sie ein Karussell-Set-Asset aus und klicken Sie dann links oben auf der Seite auf Bearbeiten (Stiftsymbol).

Um das Karussell-Set zu bearbeiten, führen Sie einen der folgenden Schritte aus:

• Um eine Folie hinzuzufügen, wählen Sie das Symbol Folie hinzufügen aus, navigieren Sie dann zu dem Asset, das Sie der Folie hinzufügen möchten, und wählen Sie das Häkchen aus.
• Um die Folien neu anzuordnen, ziehen Sie eine Folie an eine neue Position (wählen Sie das Symbol für die Neuanordnung aus, um Elemente zu verschieben).
• Um einen Hotspot oder eine Imagemap hinzuzufügen, wählen Sie die Hotspot- oder Imagemap-Symbole aus und lesen Sie Hinzufügen von Hotspots und Imagemaps.
• Um das Erscheinungsbild und das Verhalten des Karussellsets zu bearbeiten, wählen Sie die Registerkarte Erscheinungsbild oder Verhalten aus und legen Sie dann die gewünschten Optionen fest.
• Um Hotspots oder Imagemaps zu bearbeiten, wählen Sie auf der entsprechenden Folie einen Hotspot oder eine Imagemap aus und nehmen Sie die erforderlichen Änderungen auf der Registerkarte Aktionen vor.
• Um eine Folie zu löschen, wählen Sie sie aus und klicken Sie in der Symbolleiste auf Folie löschen.
• Um eine Vorgabe anzuwenden, klicken Sie oben rechts auf der Seite auf die Dropdown-Liste Vorgaben und wählen Sie eine Viewer-Vorgabe aus.
• Um ein ganzes Karussellset zu löschen, gehen Sie zum Karussellset, wählen Sie es aus und klicken Sie auf Löschen.

Gehen Sie in Assets zu einem vorhandenen Karussellbanner, das Sie erstellt haben, und klicken Sie darauf, um das Banner zu öffnen.

Wählen Sie Bearbeiten aus.

Wählen Sie in der Liste der Viewer-Vorgaben in der rechten Ecke der Symbolleiste einen Viewer aus, um eine Vorschau des Karussellbanners anzuzeigen.

Wählen Sie Vorschau.

Wählen Sie die Hotspots oder Imagemaps im Bild aus, um die verbundenen Aktionen zu testen.

Kopieren Sie den Einbettungs-Code des veröffentlichten Karussellsets.
Siehe Einbetten des Video- oder Bild-Viewers auf einer Web-Seite.

Fügen Sie den Einbettungs-Code, den Sie aus Experience Manager Assets kopiert haben, auf Ihrer Web-Seite hinzu.
Der kopierte Einbettungs-Code ist responsiv und passt sich daher automatisch an den Einbettungsbereich der Seite an.