# AX - Galerie

## Übersicht

**AX - Galerie** ist eine Experience Cloud-Komponente, die Bilder und Inhalte auf Experience-Sites-Seiten in vier Layout-Stilen anzeigt: Karussell (Slideshow), Registerkarten (organisierte Abschnitte), Raster (mehrspaltig) oder Galerie (Bildpräsentation).

Verwenden Sie sie, um Produktfotos, Projektportfolios, Fallstudienbilder, Ressourcensammlungen oder andere visuelle Inhalte anzuzeigen, die Portalbenutzer durchsuchen müssen. Konfigurieren Sie den Layout-Stil, die Navigation und die Bildquellen in Experience Builder ohne Code.

Perfekt für Produktkataloge, visuelle Portfolios, Bildbibliotheken, Vorher/Nachher-Präsentationen oder überall dort, wo Ihr Portal ansprechende Bild- oder Inhaltsanzeigen benötigt

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJToiKLlnA4RZIeE7I0Ni%2F2024-02-07_21-13-18%20(1).gif?alt=media&#x26;token=76515588-cbb1-4dcc-9004-5001d1189ff5" alt=""><figcaption></figcaption></figure>

***

## Erste Schritte

Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Galeriekomponente zu erlernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen.

{% @arcade/embed flowId="QrGyk84126ycSIM6P0oX" url="<https://app.arcade.software/share/QrGyk84126ycSIM6P0oX>" %}

***

## Mit Salesforce-Daten verbinden

Die Datenquelle ist der Ort, an dem Sie den Inhalt Ihres Karussells definieren. Es gibt zwei Haupttypen von Datenquellen: **Manuell** und **Abfrage**.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F81HTiPtGZjjWPmHbMDF5%2F2024-02-07_21-14-11.png?alt=media&#x26;token=2179494c-b3d0-4570-b763-3f336626fb55" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Datenquellentyp</th><th width="248.33333333333331">Beschreibung</th><th>Wann verwenden</th></tr></thead><tbody><tr><td><strong>Manuelle Datenquelle</strong></td><td>Beinhaltet die manuelle Eingabe von Daten für Galerieelemente. Nützlich für statische Inhalte oder vordefinierte Elemente.</td><td>Ideal für Inhalte, die sich nicht häufig ändern, oder für eine schnelle Einrichtung mit bestimmten Elementen.</td></tr><tr><td><strong>Abfrage-Datenquelle</strong></td><td>Ermöglicht das Abrufen von Daten über eine Abfrage, wobei verschiedene Datensätze/Datenpunkte aus Salesforce abgerufen werden.</td><td>Ideal für komplexe Datenabrufe oder wenn die Quelle ermittelt wird.</td></tr></tbody></table>

## **Eine Variante festlegen**

### **Karussell**

Die Karussell-Variante bietet eine dynamische, ansprechende Möglichkeit, Ihre Inhalte, Bilder oder Karten zu präsentieren. Sie wurde entwickelt, um Elemente nacheinander in einem Slideshow-Format anzuzeigen, was sie zu einer ausgezeichneten Wahl macht, um hervorgehobene Inhalte, Produktbilder oder wichtige Ankündigungen zu präsentieren.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FSDPeJtaR0mY1bFLE2Dic%2F2024-02-07_21-17-09.png?alt=media&#x26;token=76edae56-e5be-4800-9299-e0ce0c69c213" alt=""><figcaption></figcaption></figure>

**Wann verwenden:** Nutzen Sie die Karussell-Variante, wenn Sie:

* die Aufmerksamkeit der Benutzer mit einer visuell ansprechenden Präsentation gewinnen möchten.
* mehrere Elemente oder Bilder platzsparend anzeigen möchten.
* rotierende Banner oder hervorgehobene Inhaltsbereiche auf Ihrer Website erstellen möchten.

**Funktionen:**

* **Navigationssteuerelemente:** Navigieren Sie durch das Karussell mit intuitiven Steuerelementen wie Pfeilschaltflächen oder Pagination-Punkten.
* **Autoplay-Option:** Stellen Sie das Karussell so ein, dass die Elemente automatisch durchlaufen werden, mit der Möglichkeit, die Wiedergabe zu pausieren und fortzusetzen.
* **Anpassbares Erscheinungsbild:** Passen Sie das Aussehen und die Wirkung des Karussells an das Design Ihrer Website an, indem Sie Elemente wie Übergangseffekte und Anzeigedauer anpassen.

### **Tabs**

Die Registerkarten-Variante führt einen organisierten, tabellarischen Ansatz für die Inhaltspräsentation ein. Diese Variante ist ideal für die Kategorisierung von Informationen und bietet ein klares, strukturiertes Layout, das es Benutzern ermöglicht, schnell zu navigieren und auf verschiedene Inhaltsbereiche zuzugreifen.

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXPjifQ0PqC8J5k1SVBrq%2F2024-02-07_21-18-03.png?alt=media&#x26;token=88201252-88f4-4360-8cf7-135bab8bf714" alt=""><figcaption></figcaption></figure>

**Wann verwenden:** Erwägen Sie die Registerkarten-Variante, wenn Sie:

* kategorisierte Informationen in einem klaren, segmentierten Format präsentieren müssen.
* Benutzern ermöglichen möchten, einfach zwischen verschiedenen Inhaltsbereichen zu wechseln, ohne die Seite zu verlassen.
* Inhalte wie Produktspezifikationen, Servicekategorien oder Informationsregisterkarten benutzerfreundlich organisieren möchten.

**Funktionen:**

* **Segmentierter Inhalt:** Organisieren Sie Ihre Inhalte in klar definierten Registerkarten, damit Benutzer verschiedene Bereiche leicht finden und anzeigen können.
* **Benutzerfreundliche Navigation:** Ermöglichen Sie Benutzern, nahtlos zwischen den Registerkarten zu wechseln, um eine reibungslose und intuitive Interaktion sicherzustellen.
* **Anpassbares Design:** Passen Sie das Erscheinungsbild der Registerkarten an Ihr Branding und die Ästhetik Ihrer Website an, indem Sie Elemente wie Registerkartenbeschriftungen, Layout und Farbschemata ändern.

### **Raster**

Präsentiert Inhalte in einem strukturierten, mehrspaltigen Layout. Jedes Element belegt eine Zelle innerhalb des Rasters.

**Wann verwenden:** Ideal für die Anzeige einer Sammlung von Elementen, bei denen eine gleichmäßige Gewichtung gewünscht ist, z. B.:

* Produktlisten
* Profile von Teammitgliedern
* Vorschauen von Blogbeiträgen

**Funktionen**

* Anpassbare Anzahl von Spalten
* Möglichkeit, den Abstand (Gap) zwischen Elementen festzulegen
* Optionen für Bilder, Titel, Beschreibungen und Call-to-Action-Schaltflächen innerhalb jeder Rasterzelle

### **Galerie**

Ein visuell ausgerichtetes Layout, das Bilder prominent hervorhebt.

**Wann verwenden:** Am besten geeignet für die Hervorhebung bildbasierter Inhalte, wie z. B.:

* Fotografie-Portfolios
* Produktgalerien
* bildzentrierte hervorgehobene Inhalte

**Funktionen**

* Fokus auf große, hochwertige Bilder
* Optionen zum Einfügen von Bildunterschriften oder Lightbox-Funktionalität zum Vergrößern von Bildern
* Potenzial für kreative Layouts und Hover-Effekte

## Interaktionen

Der Abschnitt "Verknüpfen mit" bestimmt, was passiert, wenn ein Benutzer auf ein Element in Ihrer Avonni-Galerie klickt. Verwenden Sie dies, um Benutzer zu Detailseiten zu leiten, neue Inhalte zu öffnen oder andere Aktionen auszulösen.

**Beispiel:**

* Präsentieren Sie beispielsweise hervorgehobene Häuser in einer Galerie und ermöglichen Sie Benutzern, auf jedes Bild zu klicken, um weitere Details auf einer separaten Seite anzuzeigen.

***

## Darstellung gestalten

Entdecken Sie die Styling-Attribute für die Avonni-Galerie, die jeweils darauf ausgelegt sind, die visuelle Darstellung Ihrer Inhalte zu verfeinern, unabhängig davon, ob Sie die Karussell- oder Registerkarten-Variante verwenden:

<figure><img src="https://4175360472-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtiBUANZLlzY5aTG4C29z%2F2024-02-07_21-18-53.png?alt=media&#x26;token=5eb49b41-6c43-4f90-bc97-acc5b1fabce7" alt=""><figcaption></figcaption></figure>

1. **Größe:** Passen Sie die Gesamtabmessungen der Galerie an, damit sie perfekt in Ihr Layout passt.
2. **Rahmen:** Passen Sie den Rahmenstil, die Breite und die Farbe an, um Ihre Galerieinhalte wirkungsvoll einzurahmen.
3. **Beschriftung:** Gestalten Sie den mit jedem Element verbundenen Beschriftungstext für Klarheit und Hervorhebung.
4. **Titel:** Ändern Sie den Titeltext für jedes Galerieelement, damit er hervorsticht oder zum Thema Ihrer Website passt.
5. **Passen Sie das Erscheinungsbild des Hauptinhaltsbereichs in jedem Galerieelement an, um eine** stimmige visuelle Darstellung sicherzustellen.
6. **Medien:** Passen Sie an, wie Medien (Bilder oder Videos) angezeigt werden, damit sie das Gesamtdesign Ihrer Galerie ergänzen.
7. **Slideshow-Element:** Gestalten Sie einzelne Elemente im Karussell, einschließlich Hintergrund, Ausrichtung und Abstand.
8. **Titel des Slideshow-Elements:** Passen Sie das Erscheinungsbild der Titel innerhalb jedes Karussellelements an, um sofortige Wirkung und Wiedererkennung zu erzielen.
9. **Beschreibung des Slideshow-Elements:** Um die Lesbarkeit zu verbessern, passen Sie Schriftart, Größe und Farbe der Beschreibungen in Karussellelementen an.
10. **Slideshow-Bild:** Für visuelle Konsistenz passen Sie die Größe und den Rahmen der Bilder im Karussell an.
11. **Aktiver Slideshow-Indikator:** Gestalten Sie den Indikator für das aktuell angezeigte Element, damit er hervorsticht und unterscheidbar ist.
12. **Inaktiver Slideshow-Indikator:** Passen Sie die Indikatoren für nicht aktive Elemente an, um eine reibungslose Navigation durch das Karussell zu gewährleisten.
13. **Navigationsschaltfläche der Slideshow:** Passen Sie das Erscheinungsbild der Navigationsschaltflächen an, damit sie benutzerfreundlich sind und zum Stil Ihrer Galerie passen.
14. **Registerkarte:** Gestalten Sie einzelne Registerkarten, um aktive und inaktive Inhaltsbereiche zu unterscheiden.
15. **Rahmen der Registerkarte:** Passen Sie den Rahmen jeder Registerkarte für eine klare Segmentierung und visuelle Attraktivität an.
16. **Rahmen der aktiven/überfahrenen Registerkarte:** Gestalten Sie den Rahmen aktiver oder mit der Maus überfahrener Registerkarten, um Benutzer visuell durch ihre Interaktionen zu führen.
17. **Hintergrund der Registerkarte:** Passen Sie die Hintergrundfarbe oder das Hintergrundbild von Registerkarten an das Gesamtthema Ihrer Website an.
18. **Beschriftung der Registerkarte:** Passen Sie Schriftart, Größe und Farbe der Registerkartenbeschriftungen an, um Klarheit und visuelle Harmonie zu gewährleisten.
19. **Untertitel der Registerkarte:** Passen Sie das Erscheinungsbild von Registerkartenuntertiteln an, um zusätzliche Kontextinformationen oder Angaben stimmig bereitzustellen.

***

## Anwendungsbeispiele

### Beispiel 1: Kunden-Nachrichtenkarussell

{% @arcade/embed flowId="pOjxSsq8rQ3YgZFvjMgr" url="<https://app.arcade.software/share/pOjxSsq8rQ3YgZFvjMgr>" %}

Halten Sie Ihre Kunden informiert und engagiert, indem Sie Ihre neuesten Artikel direkt auf Ihrer Experience Cloud-Startseite präsentieren. Die AX-Galeriekomponente macht es einfach, ein dynamisches, bildreiches Nachrichtenkarussell anzuzeigen, das automatisch aktualisiert wird, sobald neue Inhalte veröffentlicht werden.

***

#### **Was Sie erreichen werden**

* **Frische Inhalte auf einen Blick:** Stellen Sie Ihre neuesten Knowledge-Artikel auf der Startseite mit Bildern dar, damit Besucher kein Update verpassen.
* **Müheloses Browsen:** Lassen Sie Kunden Unternehmensnachrichten in einem klaren, strukturierten Karussell-Layout durchblättern.
* **Gezielte Filterung:** Zeigen Sie nur News-Artikel an, indem Sie ein benutzerdefiniertes Auswahlfeld nutzen, sodass das Karussell fokussiert und relevant bleibt.

***

#### **Bevor Sie beginnen**

* **`ImageId__c` Feld:** Erstellen Sie auf dem Knowledge-Objekt ein Textfeld, um die Content-Document-ID des Bildes jedes Artikels zu speichern.
* **`Type__c` Feld:** Erstellen Sie auf dem Knowledge-Objekt ein Auswahlfeld, um Artikel zu kategorisieren, und stellen Sie sicher, dass der **News** Wert vorhanden ist und auf Ihre Artikel angewendet wird.

***

#### **So richten Sie es ein**

{% stepper %}
{% step %}

#### **Fügen Sie die Komponente zu Ihrer Seite hinzu**

* Ziehen Sie die **AX-Galerie** Komponente auf die gewünschte Seite in Experience Builder.
  {% endstep %}

{% step %}

#### **Passen Sie die Komponentenanzeige an**

* Legen Sie den **Titel** auf `Nachrichtenkarussell`.
* Legen Sie den **Beschriftung** auf `Durchsuchen Sie unsere wöchentlichen Artikel`.
* Legen Sie den **Anzahl der Spalten** auf `3`.
  {% endstep %}

{% step %}

#### **Richten Sie Ihre Datenquelle ein**

* Erstellen Sie eine neue Abfrage in der Datenquellenkonfiguration.
* Wählen Sie **Knowledge** als Objekt (stellen Sie sicher, dass Sie die zweite Knowledge-Option in der Liste auswählen).
* Fügen Sie einen Filter hinzu: **Type\_\_c entspricht** `News`.
* Legen Sie die Sortierreihenfolge auf **Erstellungsdatum, absteigend** fest, damit Ihre neuesten Artikel immer zuerst angezeigt werden.
  {% endstep %}

{% step %}

#### **Konfigurieren Sie die Datenzuordnung**

* Ordnen Sie **Titel** dem Knowledge `Titel` Feld zu.
* Ordnen Sie **Medienquelle** auf `ImageId__c` um Artikelbilder zu laden.
* Legen Sie den **Wiedergaberate** auf `5`.
  {% endstep %}

{% step %}

#### **Sehen Sie sich Ihre Arbeit in der Vorschau an**

* Verwenden Sie die Vorschau von Experience Builder, um zu bestätigen, dass Ihr Karussell die richtigen Artikel, Bilder und das richtige Layout anzeigt, bevor Sie veröffentlichen.
  {% endstep %}
  {% endstepper %}

***

### Beispiel 2: Kundenproduktgalerie

{% @arcade/embed flowId="aIu9ZNuteXdewe19LJL0" url="<https://app.arcade.software/share/aIu9ZNuteXdewe19LJL0>" %}

Bieten Sie Ihren Kunden eine visuell überzeugende Möglichkeit, Ihren Produktkatalog zu entdecken, direkt von Ihrer Startseite aus. Durch die Kombination der AX-Galeriekomponente mit Ihren Produktdaten können Sie ein auffälliges Karussell erstellen, das hervorgehobene Produkte präsentiert und Besucher direkt zu Produktdetailseiten führt.

***

#### **Was Sie erreichen werden**

* **Eine visuelle Produktpräsentation:** Präsentieren Sie hervorgehobene Kopfhörer in einem reichhaltigen, bildstarken Karussell, das zum Durchstöbern einlädt.
* **Nahtlose Navigation:** Ermöglichen Sie Kunden, mühelos direkt vom Karussell zu den einzelnen Produktdetailseiten zu wechseln.
* **Ein kuratiertes Startseiten-Erlebnis:** Heben Sie die wichtigsten Produkte hervor, indem Sie nur Ihren hervorgehobenen Katalog auf der Startseite anzeigen.

***

#### **Bevor Sie beginnen**

* **`Type__c` Feld:** Erstellen Sie auf dem Product2-Objekt ein Auswahlfeld und stellen Sie sicher, dass der **Headphone** Wert vorhanden ist, damit Sie das Karussell auf die richtigen Produkte filtern können.
* **`ContentDocumentId__c` Feld:** Erstellen Sie auf dem Product2-Objekt ein Textfeld, um die Bild-URL für jedes Produkt zu speichern.

***

#### **So richten Sie es ein**

{% stepper %}
{% step %}

#### **Fügen Sie die Komponente zu Ihrer Seite hinzu**

* Ziehen Sie die **AX-Galerie** Komponente auf die gewünschte Seite in Experience Builder.
  {% endstep %}

{% step %}

#### **Passen Sie die Komponentenanzeige an**

* Legen Sie den **Titel** auf `Produkte-Karussell`.
* Legen Sie den **Beschriftung** auf `Durchsuchen Sie unsere hervorgehobenen Produkte!`
* Legen Sie den **Anzahl der Spalten** auf `3`.
  {% endstep %}

{% step %}

#### **Richten Sie Ihre Datenquelle ein**

* Erstellen Sie eine neue Abfrage in der Datenquellenkonfiguration.
* Wählen Sie **Produkt** als Objekt.
  {% endstep %}

{% step %}

#### **Konfigurieren Sie die Datenzuordnung**

* Ordnen Sie **Titel** zu `Produktname` Feld zu.
* Ordnen Sie **Medienquelle** auf `ContentDocumentId__c` um das Bild jedes Produkts anzuzeigen.
* Legen Sie den **Wiedergaberate** auf `5`.
  {% endstep %}

{% step %}

#### **Sehen Sie sich Ihre Arbeit in der Vorschau an**

* Verwenden Sie die Vorschau von Experience Builder, um zu bestätigen, dass Ihre Produkte, Bilder und das Karussell-Layout wie erwartet angezeigt werden, bevor Sie veröffentlichen.
  {% endstep %}
  {% endstepper %}