# Listing

### Übersicht

Das Listing ist das zentrale Element jeder [Kategorieseite](https://docs.atloss.de/academy/fachbegriffe/kategorieseite). Hierin werden alle mit der Kategorie verknüpften Artikel in Form von [Produkt Boxen](https://docs.atloss.de/theme-konfiguration/erlebniswelten/produkt-box) nebeneinander dargestellt. Jede Produkt Box verlinkt dabei auf die jeweilige [Produkt Detailseite](https://docs.atloss.de/academy/fachbegriffe/produkt-detailseite). Durch die folgenden Konfigurationsoptionen kannst du das Listing weiter auf deine Bedürfnisse anpassen.

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FxHzwfVWf5zqjYTmv2wl6%2Ferlebniswelten-listing.webp?alt=media&#x26;token=bcb8b223-4999-441a-8f79-634a06ad4cea" alt=""><figcaption><p>Listing unseres Kunden <a href="https://donari.de/">https://donari.de/</a></p></figcaption></figure>

### Produkte pro Zeile

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FvxHdl9vvHQFuazt1PZ96%2Ferlebniswelten-listing-produkte-pro-zeile.webp?alt=media&#x26;token=80c7b9fc-16d1-4520-8b06-fc1921e09add" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In dieser Sektion kannst du die Anzahl aller Produkte pro Zeile für jedes Endgerät spezifisch anpassen.
{% endhint %}

### Produkte pro Zeile (Sidebar-Layout)

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FyieSOig8FEPNtFxR0eID%2Ferlebniswelten-listing-produkte-pro-zeile.webp?alt=media&#x26;token=31557014-b09a-4dec-b93e-bd7e46b7f683" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Dieser Abschnitt ermöglicht dir die Anzahl der Produkte pro Zeile Endgerät spezifisch für Sidebar-Layouts zu definieren.
{% endhint %}

### Abstände

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FeKb9fDGVIoSqOYCWMUKI%2Ferlebniswelten-listing-abstaende.webp?alt=media&#x26;token=4258e78a-1c3e-4026-a714-45c8c0222734" alt=""><figcaption></figcaption></figure>

<details>

<summary>Spaltenabstand (in px)</summary>

Definiere den Abstand zwischen den Produkt Boxen im Listing.

</details>

<details>

<summary>Spaltenabstand für Smartphones (in px)</summary>

Definiere den Abstand zwischen den Produkt Boxen im Listing für Smartphones.

</details>

<details>

<summary>Unterer Abstand der Produkt Box (in px)</summary>

Lege den unteren Abstand der Produkt Box innerhalb des Listings fest. Je größer der Wert, desto größer der Zeilenabstand des Listings.

</details>

<details>

<summary>Unterer Abstand der Produkt Box für Smartphones (in px)</summary>

Lege den unteren Abstand der Produkt Box innerhalb des Listings für Smartphones fest. Je größer der Wert, desto größer der Zeilenabstand des Listings.

</details>