Sie sehen sich Hilfeinhalte der folgenden Version an:

Mit Karussellbannern können Marketingexperten die Konversionsrate steigern, indem sie auf einfache Art Drehbanner mit Promo-Inhalten erstellen, die auf beliebigen Bildschirmen bereitgestellt werden können.

Das Erstellen und Ändern von Inhalten auf Werbebannern kann zeitaufwendig sein und Ihre Fähigkeit beeinträchtigen, neue Inhalte schnell zu veröffentlichen oder zielgerichteter zu gestalten. Mit Karussellbannern können Sie Drehbanner schnell erstellen oder ändern, interaktive Elemente wie die Hotspots zur Verknüpfung von Produktdetails oder ähnlichen Ressourcen hinzufügen und auf beliebigen Bildschirmen bereitstellen. Dadurch sind neue Promo-Inhalte schneller auf dem Markt verfügbar.

Karussellbanner sind Banner, die durch die Bezeichnung CAROUSELSET gekennzeichnet sind:

Auf Ihrer Website kann ein Karussellbanner wie folgt aussehen:

Hier können Sie durch die Bilder navigieren (durch Klicken auf die Zahlen). Zusätzlich drehen sich die Folien automatisch basierend auf einem Intervall, das Sie anpassen können. Bilder, die Sie im Karussellbanner einfügen, unterstützen sowohl Hotspots als auch Imagemaps, in denen Benutzer auf einen Hyperlink tippen oder klicken oder auf ein Schnellansichtsfenster zugreifen können.

In diesem Beispiel hat der Benutzer auf eine Imagemap geklickt oder getippt und das Schnellansichtsfenster für Handschuhe aufgerufen:

Schnellstart: Karussellbanner

So schaffen Sie einen schnellen Einstieg:

  1. Ermitteln von Hotspot-Variablen (nur für Kunden, die AEM Assets und dynamische Medien 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 AEM Assets korrekt eingeben können.

    Hinweis:

    Wenn Sie AEM Sites- oder eCommerce-Kunde sind, können Sie die integrierte Funktion verwenden, um zu den Produktseiten zu navigieren und die vorhandenen SKUs im Produktkatalog zu suchen. Sie müssen keine Hotspot- oder Imagemap-Variablen manuell eingeben. Weitere Informationen finden Sie unter Einrichten von eCommerce.

    Wenn Sie AEM Assets und dynamische Medien verwenden, geben Sie Daten für Hotspots und Imagemaps manuell ein und fügen Sie dann die veröffentlichte URL oder den Einbettungscode in Ihrem Drittanbietersystem für Web Content Management ein.

  2. Optional: Erstellen Sie eine Viewer-Vorgabe für Karussell-Sets 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.  Dies ist der bevorzugte Ansatz, wenn Sie ein spezifisches Design für ein bestimmtes Karussell wünschen.

  3. Laden Sie ein Bildbanner hoch.

    Laden Sie Bildbanner hoch, die interaktiv sein sollen.

  4. Erstellen Sie ein Karussell-Set.

    In Karussell-Sets navigieren Benutzer durch Bannerbilder und klicken/tippen auf Hotspots oder Imagemaps, um auf relevante Inhalte zuzugreifen. 

    Um ein Karussell-Set in Assets zu erstellen, klicken Sie auf Erstellen und wählen Sie dann Karussell-Sets. Fügen Sie den Folien dann Bilder hinzu und klicken Sie auf Speichern. Sie können das Erscheinungsbild und das Verhalten des Karussells auch direkt im Editor ändern.

  5. Fügen Sie Hotspots oder Imagemaps in einem Bildbanner hinzu.

    Fügen Sie mindestens einen Hotspot oder eine Imagemap in einem Bildbanner hinzu und weisen Sie jedem eine Aktion wie einen Link oder eine Schnellansicht zu. Nachdem Sie Hotspots oder Imagemaps hinzugefügt haben, schließen Sie diese Aufgabe ab, indem Sie das Karussell-Set veröffentlichen. Durch das Veröffentlichen wird der Einbettungscode erstellt, den Sie kopieren und auf die Einstiegsseite Ihrer Website anwenden können.

    Siehe Anzeigen einer Vorschau für ein Karussell-Set – Optional. Bei Bedarf können Sie eine Darstellung des Karussell-Sets anzeigen und dessen Interaktivität testen.

  6. Veröffentlichen Sie Karussell-Sets.

    Sie veröffentlichen ein Karussell-Set wie jedes andere Asset. Navigieren Sie in den Assets zum Karussell-Set, wählen Sie es aus und tippen oder klicken Sie auf Veröffentlichen. Durch Veröffentlichen eines Karussell-Sets wird die URL und die Einbettungszeichenfolge aktiviert.

  7. Führen Sie einen der folgenden Schritte aus:

Wenn Sie Karussell-Sets bearbeiten müssen, finden Sie weitere Informationen unter Bearbeiten von Karussell-Sets. Zusätzlich können Sie die Eigenschaften von Karussell-Sets anzeigen und ändern.

Ermitteln von Hotspot- und Imagemap-Variablen

Ermitteln Sie zunächst die von der vorhandenen Schnellansichtsimplementierung verwendeten dynamische Variablen, damit Sie die Hotspots oder Imagemap-Daten beim Erstellen von Karussell-Sets in AEM Assets korrekt eingeben können.

Beim Hinzufügen von Hotspots oder Imagemaps zu einem Bannerbild in AEM Assets müssen Sie jedem Hotspot und jeder Imagemap eine SKU und optional zusätzliche Variablen zuweisen. Mithilfe dieser Variablen werden Hotspots oder Imagemaps später Schnellansichtsinhalte zugeordnet.

Hinweis:

Wenn Sie AEM Sites- und/oder AEM eCommerce-Kunde sind, können Sie diesen Schritt überspringen.  Sie müssen keine Hotspot- oder Imagemap-Variablen manuell ermitteln. Sie können die Integration mit eCommerce für die Produktintegration verwenden. Weitere Informationen finden Sie unter Einrichten von eCommerce. Darüber hinaus können Sie die interaktive Komponente verwenden und in Ihre Webseite einfügen.

Wenn Sie AEM Assets- oder Medien-Kunde sind, veröffentlichen Sie den URL- oder Einbettungscode, integrieren Sie ihn dann in Ihrem Drittanbieter-Content Management System und ermitteln Sie Hotspots und Imagemaps manuell.

Es ist wichtig, die Anzahl und den Typ der Variablen, denen Hotspot- oder Imagemap-Daten zugewiesen werden sollen, korrekt zu ermitteln. Jeder Hotspot bzw. jede Imagemap, der/die einem Bannerbild hinzugefügt wird, muss genügend Informationen enthalten, um das Produkt im vorhandenen Backend-System eindeutig zu identifizieren. Gleichzeitig sollten Hotspots oder Imagemaps nicht mehr Daten enthalten als unbedingt notwendig. Dies würde die Dateneingabe unnötig erschweren und bei der Verwaltung von Hotspots und Imagemaps könnten leichter Fehler auftreten.

Es gibt verschiedene Möglichkeiten, den für Hotspot- oder Imagemap-Daten zu verwendenden Variablensatz zu ermitteln,

Manchmal ist es ausreichend, IT-Experten zu konsultieren, die für die vorhandene Schnellansichtsimplementierung verantwortlich sind. Diese kennen wahrscheinlich den Mindestsatz an Daten, die erforderlich sind, um die Schnellansicht im System zu ermitteln. In den meisten Fällen ist es jedoch auch möglich, einfach das vorhandene Verhalten des Front-End-Codes zu analysieren.

Der Großteil der Schnellansichtsimplementierungen verwendet das folgende Modell:

  • Der Benutzer aktiviert ein Benutzeroberflächenelement auf der Website. beispielsweise, indem Sie auf die Schaltfläche für eine Schnellansicht klicken.
  • Die Website sendet eine Ajax-Anforderung an das Back-End, um bei Bedarf die Schnellansichtsdaten oder -inhalte zu laden.
  • Die Schnellansichtsdaten werden in den Inhalt übersetzt, um für das Rendern auf der Webseite vorbereitet zu werden.
  • Schließlich zeigt der Front-End-Code diesen Inhalt visuell auf dem Bildschirm an.

Dann werden unterschiedliche Bereiche der vorhandenen Website besucht, auf denen die Schnellansichtsfunktion implementiert wird, die Schnellansicht wird ausgelöst und die Ajax-URL, die durch die Webseite zum Laden der Schnellansichtsdaten oder -inhalte gesendet wurde, wird erfasst.

Normalerweise müssen Sie keine speziellen Debugging-Tools verwenden. Moderne Webbrowser verfügen über Web-Inspektoren, die dafür ausreichend sind. Die folgenden Webbrowser beispielsweise umfassen Web-Inspektoren:

  • Um alle ausgehenden HTTP-Anforderungen in Google Chrome anzuzeigen, drücken Sie F12, um den Bereich für Entwicklertools zu öffnen, und klicken Sie dann auf die Registerkarte „Network“.
  • In Firefox können Sie entweder das Firebug-Plug-in durch Drücken auf F12 aktivieren und dessen Netzwerk-Registerkarte verwenden oder das integrierte Inspektor-Tool und dessen Netzwerk-Registerkarte einsetzen.

Wenn die Netzwerküberwachung im Browser aktiviert ist, lösen Sie die Schnellansicht auf der Seite aus.

Suchen Sie nun die Schnellansichts-Ajax-URL im Netzwerkprotokoll und kopieren Sie die aufgezeichnete URL für die zukünftige Analyse. In den meisten Fällen werden beim Auslösen der Schnellansicht zahlreiche Anforderungen an den Server gesendet. Normalerweise ist die Schnellansichts-Ajax-URL die erste in der Liste. Sie weist einen Teil oder Pfad mit einer komplexen Abfragezeichenfolge auf und ihr MIME-Typ lautet entweder text/html, text/xml oder text/javascript.

Während dieses Vorgangs müssen Sie verschiedene Bereiche der Website mit verschiedenen Produktkategorien und -typen besuchen. Grund dafür ist, dass Schnellansichts-URLs möglicherweise Teile aufweisen, die für eine bestimmte Website-Kategorie häufig vorkommen, sich aber nur ändern, wenn Sie einen anderen Bereich der Website besuchen.

Im einfachsten Fall ist der einzige variable Teil der Schnellansichts-URL die Produkt-SKU. In diesem Fall ist der SKU-Wert der einzige Datenteil, den Sie benötigen, um dem Bannerbild Hotspots oder Imagemaps hinzuzufügen.

In komplexen Fällen hat die Schnellansichts-URL allerdings mehrere verschiedene Elemente zusätzlich zur SKU, wie Kategorie-ID, Farbcode, Größencode usw. In diesen Fällen ist jedes Element eine separate Variable in der Hotspot- oder Imagemap-Datendefinition innerhalb der Karussellbanner-Funktion.

Im Folgenden finden Sie einige Beispiele für Schnellansichts-URLs und die resultierenden Hotspot- oder Imagemap-Variablen:

Einzelne SKU, befindet sich in der Abfragezeichenfolge.

Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:

  • http://server/json?productId=866558&source=100

  • http://server/json?productId=1196184&source=100

  • http://server/json?productId=1081492&source=100

  • http://server/json?productId=1898294&source=100

Der einzige variable Teil der URL ist der Wert des Abfrageparameters productId= und es ist offensichtlich ein SKU-Wert. Daher müssen nur die SKU-Felder der Hotspots oder Imagemaps mit Werten wie 866558, 1196184, 1081492, 1898294 ausgefüllt werden.

Einzelne SKU, befindet sich am URL-Pfad.

Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:

  • http://server/product/6422350843

  • http://server/product/1607745002

  • http://server/product/0086724882

Der variable Teil befindet sich im letzten Abschnitt des Pfads und wird zum SKU-Wert der Hotspots oder Imagemaps: 6422350843, 1607745002, 0086724882.

SKU und Kategorie-ID in der Abfragezeichenfolge.

Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:

  • http://server/quickView/product/?category=1100004&prodId=305466

  • http://server/quickView/product/?category=1100004&prodId=310181

  • http://server/quickView/product/?category=1740148&prodId=308706

In diesem Fall enthält die URL zwei unterschiedliche Teile. Die SKU wird im Parameter prodId gespeichert, während die Kategorie-ID im Parameter category= gespeichert wird.

Bei den Hotspot- oder Imagemap-Definitionen selbst handelt es sich um Paare. Sie bestehen aus einem SKU-Wert und einer zusätzlichen Variablen mit dem Namen categoryId. Die resultierenden Paare lauten wie folgt:

  • Die SKU ist 305466 und die categoryId ist 1100004.

  • Die SKU ist 310181 und die categoryId ist 1100004.

  • Die SKU ist 308706 und die categoryId ist 1740148.

Hochladen von Bildbannern

Wenn Sie bereits die Bilder hochgeladen haben, die Sie verwenden möchten, fahren Sie mit dem nächsten Schritt Erstellen von Karussell-Sets fort. Beachten Sie, dass die im Karussell verwendeten Bilder nach dem Aktivieren von dynamischen Medien hochgeladen werden müssen. 

Informationen zum Hochladen von Bildbannern finden Sie unter Hochladen von Assets.

Erstellen von Karussell-Sets

So erstellen Sie ein Karussell-Set:

  1. Navigieren Sie in Assets zu dem Ordner, in dem Sie das Karussell-Set erstellen möchten, und klicken Sie auf Erstellen > Karussell-Set.

  2. Der Karussell-Banner-Editor wird geöffnet. Tippen Sie, um die Asset-Auswahl zu öffnen und das Bild für die erste Folie auszuwählen. Weitere Informationen finden Sie unter Arbeiten mit Selektoren.

  3. Wählen Sie das erste Bild aus und klicken oder tippen Sie auf das Häkchen, um es auszuwählen. Es wird im Karussell-Banner-Editor als Folie 1 angezeigt.

  4. Um weitere Folien für das Karussell hinzuzufügen, klicken Sie auf Symbol Folie hinzufügen. Wählen Sie das gewünschte Bild aus und klicken oder tippen Sie auf das Häkchen. Fügen Sie weitere Folien hinzu, bis Sie alle Bilder für das Karussell ausgewählt haben.

    Um eine Folie zu löschen, tippen oder klicken Sie auf die Folie und tippen und klicken Sie auf Folie löschen in der Symbolleiste. Um eine Folie zu verschieben, tippen Sie auf das Symbol zur Neuanordnung und halten und bewegen Sie das Element an die gewünschte Position.

  5. 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.

  6. Sie können das visuelle Design und das Verhalten von Karussell-Sets ändern, indem Sie auf die Registerkarten „Verhalten“ und „Darstellung“ tippen oder klicken und Anpassungen am Aussehen des Karussellbanners oder am Verhalten bestimmter Komponenten vornehmen. Weitere Informationen zum Verwenden des Viewer-Editors finden Sie unter Verwalten von Viewer-Vorgaben.

    Hinweis:

    Für Karussellbanner sollten Sie folgende Elemente anpassen:

    • Dauer der Anzeige eines Bildes Standardmäßig wird jedes Bild für 9 Sekunden angezeigt.
    • Animation. Standardmäßig sind alle Folienübergänge Überblendungen. Sie können einen anderen Übergang auswählen.
    • Stil der Schaltflächen Benutzer können die Banner durchlaufen, indem sie auf die jeweiligen Punkte oder Zahlen tippen. Sie können ändern, wo die Set-Indikatoren angezeigt werden (und ob es sich um einen numerischen oder Punktstil handelt). Sie können auch ihre Größe bestimmen.
    • Ändern des Markierungsstils einer Imagemap oder des Symbols für Hotspots

    Ausführliche Anweisungen und weitere Informationen zum Viewer-Editor finden Sie unter Besondere Überlegungen für Karussellbanner.

    Sie können in einer Vorschau anzeigen, wie das Karussellbanner aussehen wird. Siehe Anzeigen einer Vorschau für das Karussell-Set.

  7. Klicken Sie OK, wenn Sie fertig sind.

Hinzufügen von Hotspots oder Imagemaps in einem Bildbanner

Sie können einem Banner Hotspots oder Imagemaps mithilfe des Karussell-Set-Editors hinzufügen.

Beim Hinzufügen von Hotspots oder Imagemaps können Sie sie als Schnellansichts-Popup-Anzeige oder als Hyperlink definieren. Vergessen Sie nicht, Ihre Arbeit zu speichern, wenn Sie einem Bild Hotspots oder Imagemaps hinzufügen. Die Optionen „Rückgängig“ und „Wiederholen“ in der Nähe der oberen rechten Ecke der Seite werden während der aktuellen Erstellungs-/Bearbeitungssitzung unterstützt.

Wenn Sie die Erstellung des Karussellbanners abgeschlossen haben, können Sie optional eine Vorschau anzeigen, um das Karussellbanner aus der Perspektive der Kunden zu sehen.

Siehe (Optional) Anzeigen einer Vorschau für Karussellbanner.

Hinweis:

Wenn Sie einem interaktiven Bild oder einem Bild für ein Karussellbanner Hotspots hinzufügen, werden die Hotspot-Informationen immer am selben Metadatenspeicherort gespeichert, der relativ zum Speicherort des Bildes ist, unabhängig davon, ob es sich um ein interaktives Bild oder um ein Karussellbanner handelt. Das bedeutet, dass Sie dasselbe Bild zusammen mit den definierten Hotspot-Daten in beiden Viewern einfach wiederverwenden können.

Beachten Sie jedoch, dass Karussellbanner Imagemaps auf Bildern unterstützen, die auch Hotspots enthalten können. Bei interaktiven Bildern wird dies dagegen nicht unterstützt. Dies sollten Sie beachten, wenn Sie ein interaktives Bild oder ein Karussellbanner mit demselben Bild erstellen möchten. Stattdessen sollten Sie separate Kopien desselben Bildes verwenden, um interaktive Bilder und Karussellbilder zu erstellen.

Hinweis:

Wenn Sie interaktive Bilder mit Hotspots bearbeiten, um das Bild zu beschneiden, werden die Hotspots entfernt.

So fügen Sie einem Bildbanner Hotspots hinzu:

  1. Navigieren Sie in Assets zu dem Karussell-Set, das interaktiv sein soll.

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

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

  4. Klicken oder tippen Sie in der Nähe der linken oberen Ecke der Seite auf Hotspot oder Imagemap.

  5. Tippen oder klicken Sie auf den Bereich, in dem sich der Hotspot befinden soll. Wenn Sie eine Imagemap erstellen, können Sie den Imagemap-Bereich auch durch Klicken und Ziehen festlegen. Sie können die Größe der Imagemap anpassen, indem Sie auf die Ecken klicken und 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 entfernen, wählen Sie im Dropdown-Menü Karten und Hotspots den Namen des zu entfernenden Hotspots aus und klicken oder tippen Sie dann auf das Papierkorbsymbol neben dem Menü.

  6. Geben Sie im Textfeld „Name“ den Namen des Hotspots oder der Imagemap 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 bei späteren Änderungen leichter erkennen. 

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

    • Tippen Sie auf Schnellansicht.
      • Wenn Sie AEM Sites- oder eCommerce-Kunde sind, tippen oder klicken Sie auf das Produktauswahlsymbol (Lupe), um die Seite „Produkt wählen“ zu öffnen. Tippen oder klicken Sie auf das Produkt, das Sie verwenden möchten, und tippen Sie auf das Häkchen in der rechten oberen Ecke der Seite, um zum Karussellbanner-Editor zurückzukehren.
      •  Wenn Sie kein AEM Sites- oder eCommerce-Kunde sind, gehen Sie wie folgt vor:
        • Lesen Sie Ermitteln von Hotspot-Variablen, da Sie diese Variablen vielleicht definieren müssen. 
        • Anschließend geben Sie den SKU-Wert manuell ein. Geben Sie im Textfeld „SKU-Wert“ die Bestandseinheit (Stock Keeping Unit, SKU) des Produkts ein. Hierbei handelt es sich um einen eindeutigen Bezeichner 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, tippen Sie auf Generische Variable hinzufügen. Geben Sie im Textfeld eine zusätzliche Variable an. Beispielsweise ist „category=Mens“ eine hinzugefügte Variable.
        • Weitere Informationen finden Sie unter Arbeiten mit Selektoren.
    • Tippen Sie auf Hyperlink.
      • Wenn Sie AEM Sites-Kunde sind, tippen oder klicken Sie auf das Symbol zur Site-Auswahl (Ordner), um zu einer URL zu navigieren.
      • Wenn Sie Einzelkunde sind, geben Sie im Textfeld „HREF“ den vollständigen URL-Pfad zu einer verknüpften Webseite 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.

    Sie können in einer Vorschau anzeigen, wie das Karussellbanner aussehen wird. Siehe Anzeigen einer Vorschau für das Karussell-Set.

  8. Tippen Sie auf Speichern.

  9. Tippen Sie auf Schließen, um zur Seite „Assets“ zurückzukehren.

  10. Veröffentlichen Sie das Karussell-Set. Durch das Veröffentlichen wird der Einbettungscode oder die URL erstellt, den/die Sie auf der Webseite verwenden können. Wenn Sie ein AEM Sites-Kunde sind, können Sie Ihrer Webseite das Karussell-Set direkt hinzufügen.

    Informationen hierzu finden Sie im Thema über das Veröffentlichen von Assets.

    Siehe Hinzufügen eines Karussell-Sets zur Einstiegsseite Ihrer Website.

Bearbeiten von Karussell-Sets

Sie können verschiedene Bearbeitungsaufgaben an Assets in Bildsets direkt in der Benutzeroberfläche ausführen, genau wie bei der Bearbeitung beliebiger anderer Assets. Außerdem können Sie die folgenden Aktionen in Karussell-Sets durchführen:

  • Fügen Sie einem Karussell-Set Folien hinzu. Siehe auch Arbeiten mit Selektoren.
  • Ändern Sie die Anordnung der Folien im Karussell-Set.
  • Löschen Sie Assets im Karussell-Set.
  • Löschen Sie das Karussell-Set.
  • Fügen Sie Hotspots und Imagemaps hinzu oder ändern Sie diese. Siehe auch Arbeiten mit Selektoren.

So bearbeiten Sie ein Karussell-Set:

  1. Navigieren Sie zum Karussell-Set und klicken Sie darauf, um es zu öffnen, oder wählen Sie das Karussell-Set aus und klicken Sie auf das Stiftsymbol auf der Miniaturansicht.

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

    • Um eine Folie hinzuzufügen, klicken Sie auf das Symbol „Folie hinzufügen“ , navigieren Sie dann zu dem Asset, das Sie dieser Folie hinzufügen möchten, und tippen oder klicken Sie auf das Häkchen.
    • 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, klicken Sie auf die Hotspot- oder Imagemap-Symbole und lesen Sie Hinzufügen von Hotspots und Imagemaps.
    • Um Hotspots oder Imagemaps zu bearbeiten, verschieben Sie den Hotspot oder die Imagemap auf der entsprechenden Folie an eine neue Position und nehmen Sie bei Bedarf Änderungen am Erscheinungsbild, Verhalten und den Aktionen vor.
    • Um eine Folie zu löschen, wählen Sie diese aus und tippen oder klicken Sie auf Folie löschen.

    Hinweis:

    • Um ein ganzes Karussell-Set zu löschen, navigieren Sie zum Karussell-Set, wählen Sie es aus und wählen Sie Löschen.
    • Sie können die Bilder in einem Bildset bearbeiten, indem Sie zum Set navigieren, links in der Leiste auf Mitglieder des Sets klicken und dann auf das Stiftsymbol eines einzelnen Assets klicken oder tippen, um das Bearbeitungsfenster zu öffnen.
    • Wenn Sie interaktive Bilder mit Hotspots bearbeiten, um das Bild zu beschneiden, werden die Hotspots entfernt.

     

(Optional) Anzeigen einer Vorschau für Karussellbanner

Mithilfe der Vorschau können Sie eine Darstellung des Karussellbanners aus der Perspektive der Kunden anzeigen und die Hotspots und Imagemaps des Karussellbanners testen, um sicherzustellen, dass sie sich wie erwartet verhalten.

Wenn das Karussellbanner Ihren Vorstellungen entspricht, können Sie es veröffentlichen.
Siehe Einbetten des Video- oder Bild-Viewers auf einer Webseite.
Siehe Verknüpfen von URLs mit einer Webanwendung..
Siehe Hinzufügen von Assets aus dynamischen Medien zu Seiten.

Um eine Vorschau für ein Karussellbanner anzuzeigen, verwenden Sie entweder den Karussell-Editor (bevorzugte Methode) oder die Viewer-Liste.

So zeigen Sie eine Vorschau für Karussellbanner über den Karussell-Editor an:

  1. In Assets navigieren Sie zu einem vorhandenen Karussellbanner, das Sie erstellt haben, und tippen Sie darauf, um das Banner zu öffnen.

  2. Tippen oder klicken Sie auf Bearbeiten.

  3. Wählen Sie in der Liste der Viewer-Vorgaben in der rechten Ecke der Symbolleiste einen Viewer, um das Karussellbanner auszuwählen.

  4. Tippen oder klicken Sie auf Vorschau.

  5. Tippen Sie auf die Hotspots oder Imagemaps im Bild, um die verbundenen Aktionen zu prüfen.

So zeigen Sie eine Vorschau für Karussellbanner über die Viewer-Liste an:

  1. In Assets navigieren Sie zu einem vorhandenen Karussellbanner, das Sie erstellt haben, und tippen Sie darauf, um das Banner zu öffnen.

  2. Klicken Sie in der linken oberen Ecke der Seite „Vorschau“ auf das Symbol „Inhalt“.

  3. In der Viewer-Liste tippen Sie auf den Namen der Viewer-Vorgabe, die Sie für das Karussellbanner verwenden möchten.

  4. Tippen Sie auf die Hotspots oder Imagemaps im Bild, um die verbundenen Aktionen zu prüfen.

Veröffentlichen von Karussellbannern

Sie müssen das Karussell veröffentlichen, um es zu verwenden. Durch Veröffentlichen eines Karussell-Sets werden die URL und der Einbettungscode aktiviert. Außerdem wird das Karussell in der Cloud für dynamische Medien veröffentlicht, die in ein CDN für skalierbare und leistungsfähige Bereitstellung integriert ist. 

Hinweis:

Wenn Sie ein vorhandenes interaktives Bild mit Hotspots für Ihr Karussellbanner verwenden, müssen Sie das interaktive Bild separat veröffentlichen, nachdem Sie das Karussellbanner veröffentlicht haben. 

Wenn Sie ein bereits vorhandenes und veröffentlichtes interaktives Bild ändern, das Sie in einem Karussellbanner verwenden, müssen Sie das interaktive Bild veröffentlichen, bevor die Änderungen im Karussellbanner sichtbar werden. 

So veröffentlichen Sie Karussellbanner:

  1. In AEM tippen oder klicken Sie auf das AEM-Logo und tippen oder klicken Sie auf Assets

  2. Navigieren Sie zum Karussell-Set und wählen Sie das Set aus, indem Sie den Mauszeiger über die Miniaturansicht bewegen und auf das Häkchen tippen oder klicken.

  3. Tippen oder klicken Sie auf Veröffentlichen in der Symbolleiste.

Hinzufügen eines Karussellbanners zu Ihrer Website

Nachdem Sie Bannerbilder hochgeladen haben, um ein Karussell zu erstellen, dem Banner Hotspots und/oder Imagemaps hinzugefügt und das Karussell-Set veröffentlicht haben, können Sie es jetzt einer vorhandenen Website hinzufügen.

Hinweis:

Wenn Sie AEM Sites-Kunde sind, können Sie das Karussellbanner Ihrer Seite direkt hinzufügen, indem Sie die interaktive Medienkomponente auf Ihre Seite ziehen. Siehe Hinzufügen von Assets aus dynamischen Medien zu Seiten.

Wenn Sie jedoch nur AEM Assets verwenden, können Sie das Karussellbanner manuell der Einstiegsseite Ihrer Website hinzufügen, wie im folgenden Abschnitt beschrieben.

  1. Kopieren Sie den Einbettungscode des veröffentlichten Karussell-Sets.
    Siehe Einbetten des Video- oder Bild-Viewers auf einer Webseite.
  2. Fügen Sie den Einbettungscode, den Sie aus AEM Assets kopiert haben, auf Ihrer Webseite ein.
    Der kopierte Einbettungscode ist responsiv und sollte sich automatisch an den Einbettungsbereich der Seite anpassen.

Integrieren des Karussellbanners in eine vorhandene Schnellansicht

Hinweis: Dieser Schritt ist nur anwendbar, wenn Sie nur AEM Assets verwenden. 

Der letzte Schritt in diesem Prozess ist die Integration des Karussellbanners in eine vorhandene Schnellansichtsimplementierung auf Ihrer Website. Jede Schnellansichtsimplementierung ist einzigartig. Daher ist ein spezifischer Ansatz erforderlich, wofür höchstwahrscheinlich die Unterstützung einer Front-End-IT-Person nötig ist.

Die vorhandene Schnellansichtsimplementierung stellt normalerweise eine Kette von untereinander verknüpften Aktionen dar, die auf der Webseite in der folgenden Reihenfolge stattfinden:

  1. Ein Benutzer löst ein Element auf der Benutzeroberfläche Ihrer Website aus.
  2. Der Front-End-Code ruft anhand des in Schritt 1 ausgelösten Benutzeroberflächenelements eine Schnellansichts-URL auf.
  3. Der Front-End-Code sendet mithilfe der in Schritt 2 abgerufenen URL eine Ajax-Anforderung.
  4. Die Back-End-Logik gibt dem Front-End-Code die entsprechenden Schnellansichtsdaten oder -inhalte zurück.
  5. Der Front-End-Code lädt die Schnellansichtsdaten oder -inhalte.
  6. Optional wandelt der Front-End-Code die geladenen Schnellansichtsdaten in eine HTML-Darstellung um.
  7. Der Front-End-Code zeigt ein modales Dialogfeld an und rendert den HTML-Inhalt auf dem Bildschirm für den Endbenutzer.

Diese Aufrufe stellen möglicherweise keine unabhängigen öffentlichen API-Aufrufe dar, die durch die Webseitenlogik in einem beliebigen Schritt aufgerufen werden können. Vielmehr handelt es sich um einen verketteten Aufruf, in dem der jeweils nächste Schritte in der letzten Phase (Callback) des vorherigen Schritts ausgeblendet ist.

Sobald das interaktive Karussellbanner Schritt 1 und teilweise Schritt 2 ersetzt, sofern ein Benutzer auf einen Hotspot oder eine Imagemap im Karussellbanner klickt, wird eine solche Benutzerinteraktion durch den Viewer verarbeitet. Der Viewer gibt ein Ereignis an die Webseite zurück, das die gesamten Hotspot- oder Imagemap-Daten enthält, die zuvor hinzugefügt wurden.

In einem solchen Ereignishandler nimmt der Front-End-Code Folgendes vor:

  • Er lauscht am Ereignis, das durch das Karussellbanner ausgegeben wird.
  • Er erstellt eine Schnellansichts-URL anhand der Hotspot- oder Imagemap-Daten.
  • Er löst den Schnellansichts-Ladevorgang vom Back-End aus und rendert die Schnellansicht auf dem Bildschirm, um sie anzuzeigen.

Der von AEM Assets zurückgegebene Einbettungscode verfügt über einen einsatzbereiten Ereignishandler, der auskommentiert ist.

Daher ist es nur erforderlich, die Auskommentierung des Codes aufzuheben und den Platzhalter-Handlertext durch den Code zu ersetzen, der für die bestimmte Webseite spezifisch ist.

Der Prozess der Erstellung der Schnellansichts-URL ist im Prinzip das Gegenteil des Prozesses, der verwendet wird, um die zuvor erläuterten Hotspot-und Imagemap-Variablen zu ermitteln.

Siehe Ermitteln von Hotspot- und Imagemap-Variablen.

Der letzte Schritt besteht darin, die Schnellansichts-URL auszulösen, und für das Aktivieren des Schnellansichtsbereichs ist höchstwahrscheinlich die Unterstützung einer Front-End-IT-Person aus Ihrer IT-Abteilung erforderlich. Sie verfügt am ehesten über das entsprechende Fachwissen, um die Schnellansichtsimplementierung aus dem entsprechenden Schritt entsprechend auszulösen, um über eine einsatzbereite Schnellansichts-URL zu verfügen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie