# Erlebniswelten

## Allgemeine Einführung

Mit der Installation eines Theme erhalten Sie neuen Block-Kategorien und Erlebniswelten Elemente. Alle beginnen mit: Coolbax + Name des Theme und erweitern die Möglichkeiten einer individuellen Gestaltung der Seiten.

<figure><img src="/files/m9xpn8yAM6hociLEgYLG" alt=""><figcaption><p>Neue Block-Kategorien für die Theme</p></figcaption></figure>

Block-Elemente, welche durch das Plugin hinzugekommen sind, erkennen Sie an dem grünen Icon in der rechten oberen Ecke.

<figure><img src="/files/ChO4LpqWv950q4DeqDYc" alt=""><figcaption></figcaption></figure>

### Inhalt von Spalten und Layout ändern

{% hint style="info" %}
Die nachfolgende Anleitung kann auch für den Tausch von Block-Elemente genutzt werden!
{% endhint %}

Um noch vielfältiger Ihre Erlebniswelten zu gestalten, erhalten Sie die Einkaufswelten Elemente:  [Spalten](#coolbax-theme-spalten) und [Layout](#coolbax-theme-layout) hinzu. Sobald diese Elemente auf eine Erlebniswelt gezogen werden, werden standardmäßig die Bereiche mit einem Block-Element: Text gefüllt.

Sollten Sie ein anderes Block-Element vorziehen, gehen Sie mit der Mouse über das Element. Das Element wird markiert und in der rechten Ecke wird das Bearbeitungssymbol (Zahnrad) und das Wechselsymbol (Pfeile) eingeblendet.

<figure><img src="/files/g412g1YgSLTPFfgdsrtq" alt=""><figcaption><p>Beispiel für Wechselsymbol </p></figcaption></figure>

Klicken Sie auf das Wechselsymbol und wählen, im darauffolgenden Fenster das Block-Element aus, welches Sie stattdessen verwenden möchten.&#x20;

{% hint style="info" %}
Auch hier sind die Coolbax Block-Elemente mit dem grünen Icon in der rechten oberen Ecke gekennzeichnet.
{% endhint %}

## Coolbax Theme - Blöcke

{% hint style="info" %}
Inhalte und Einstellungen von Block-Elementen können in den [Kategorien](/coolbax-docs/theme/produkt-einstellungen.md#layout) und [Produkt](/coolbax-docs/theme/produkt-einstellungen.md#layout) Einstellungen unter: Layout individuell angepasst und verändert werden!
{% endhint %}

### Bild Zoom

Dieses Block-Element vergrößert das Bild, wenn die Mouse über dem Element ist. Verlässt die Mouse das Element geht das Bild in seine ursprüngliche Größe zurück.

<figure><img src="/files/0UtuWccpZ9Ru0k9qEpLH" alt=""><figcaption><p>Beispiel für: Bild Zoom</p></figcaption></figure>

<table><thead><tr><th width="374">Einstellung</th><th>Bedeutung</th></tr></thead><tbody><tr><td>Anzeigemodus</td><td><p>Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten).</p><p><br><strong>Standard:</strong> passt sich das Bild bis zu seiner Größe an den Bereich an | <strong>Füllen:</strong> wird der Bereich mit dem Bild komplett gefüllt | <strong>Strecken:</strong> wird das Bild auf die Größe des Bereiches gestreckt.</p></td></tr><tr><td>Vertikale Ausrichtung</td><td>Einstellung gilt beim Anzeigemodus <em>Standard</em> und <em>Strecken.</em> <br>Geben Sie hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.</td></tr><tr><td>Zoom Faktor*</td><td>Bestimmen Sie, um wie viel Prozent das Produktbild vergrößert werden soll.</td></tr><tr><td>Link zu</td><td>Hier können Sie angeben wohin verlinkt werden soll.</td></tr><tr><td>Link in neuem Tab öffnen</td><td>Der Link wird, bei Aktivierung, in einem neuen Tab geöffnet</td></tr></tbody></table>

{% hint style="info" %}
\*Bleiben Sie im positiven Bereich (z. B. 1.2), wird das Bild vergrößert. Verwenden Sie einen negativen Wert (z. B. -1.2) verkleinert sich das Bild um die Prozentzahl
{% endhint %}

<figure><img src="/files/eB5CX7O51Zb4sTemttNY" alt=""><figcaption><p>Block-Element im Backend</p></figcaption></figure>

### Bild Teaser

In diesem Block-Element können ein Banner mit einem Text einfügen. Der Text wird als Zeile über dem Bild dargestellt. Sie können u. a. die Position der Zeile sowie einige Farbanpassungen vornehmen.

<figure><img src="/files/uwWjWxjnS0R7UWNaN6My" alt=""><figcaption><p>Beispiel für: Bild Teaser</p></figcaption></figure>

| Einstellungen im Tap: Inhalt | Bedeutung                                                                                                                                                                                                                    |                                                                         |                                                                                     |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| Anzeigemodus                 | <p>Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten).</p><p><br><strong>Standard:</strong> passt sich das Bild bis zu seiner Größe an den Bereich an                              | <strong>Füllen:</strong> wird der Bereich mit dem Bild komplett gefüllt | <strong>Strecken:</strong> wird das Bild auf die Größe des Bereiches gestreckt.</p> |
| Vertikale Ausrichtung        | <p>Einstellung gilt beim Anzeigemodus <em>Standard</em> und <em>Strecken.</em> <br>Geben Sie hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.</p> |                                                                         |                                                                                     |
| Link zu                      | Hier können Sie angeben wohin verlinkt werden soll.                                                                                                                                                                          |                                                                         |                                                                                     |
| Link in neuem Tab öffnen     | Der Link wird, bei Aktivierung, in einem neuen Tab geöffnet.                                                                                                                                                                 |                                                                         |                                                                                     |
| Text                         | Text welcher auf dem Banner erscheinen soll                                                                                                                                                                                  |                                                                         |                                                                                     |

| Einstellung im Tap: Einstellungen        | Bedeutung                                                                                         |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------- |
| Schriftart\*                             | Welche Schriftart soll genutzt werden (*Schriftart für Text* oder *Schriftart für Überschriften*) |
| Text Ausrichtung                         | Soll der Text linksbündig, zentriert oder rechtsbündig positioniert werden                        |
| Schriftgröße                             | Wie groß sollen die Buchstaben dargestellt werden (Angaben in Pixel)                              |
| Schriftstärke                            | Definieren Sie die Schriftstärke (dünn, normal oder fett) für den Text                            |
| Schriftfarbe (Text)                      | Diese Einstellung ändert die Schriftfarbe für den Text.                                           |
| Auf dem Smartphone (Portrait) ausblenden | Soll die Zeile mit dem Text auf Smartphone-Größe (hochkant) ausgeblendet werden                   |
| Position                                 | Soll die Zeile oben oder unter vom Bildrand dargestellt werden.                                   |
| [Innenabstand](#innen-und-aussenabstand) | Definieren Sie den Abstand zwischen Schrift und Zeilenende                                        |
| [Außenabstand](#innen-und-aussenabstand) | Definieren Sie den Abstand zwischen Zeile und Bild                                                |
| Hintergrundfarbe                         | Geben Sie der Zeile eine Hintergrundfarbe                                                         |

{% hint style="info" %}
\*Die *Schriftart für Text* bzw. *Schriftart für Überschriften* stellen Sie in den [Theme Einstellungen > Typografie & Farben >Typografie](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#schriftart) fest
{% endhint %}

<figure><img src="/files/KCL7nH13tP8VhnZ9NnJW" alt=""><figcaption><p>Block-Element im Backend</p></figcaption></figure>

#### Innen- und Außenabstand

Für den Innen- und Außenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.

* **1 Wert: 10px** = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
* **2 Werte: 10px 5px** = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
* **3 Werte: 10px** **5px 20px**= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
* **4 Werte: 10px** **5px 20px 15px** = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.

### Bild Message

Ähnlich wie im Bild Teaser können Sie auch hier einen Text auf das Bild hinterlegen. In diesem Fall wird der Text in einem rechteckigen Overlay mittig zum Bild ausgerichtet dargestellt. Sie können auch hier u. a. die Position des Overlay sowie einige Farbanpassungen vornehmen.

<figure><img src="/files/jC9Ft35jieyXogDzqPQU" alt=""><figcaption><p>Beispiel für: Bild Message</p></figcaption></figure>

<table><thead><tr><th width="373">Einstellungen im Tap: Inhalt</th><th>Bedeutung</th></tr></thead><tbody><tr><td>Anzeigemodus</td><td><p>Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten).</p><p><br><strong>Standard:</strong> passt sich das Bild bis zu seiner Größe an den Bereich an | <strong>Füllen:</strong> wird der Bereich mit dem Bild komplett gefüllt | <strong>Strecken:</strong> wird das Bild auf die Größe des Bereiches gestreckt.</p></td></tr><tr><td>Vertikale Ausrichtung</td><td>Einstellung gilt beim Anzeigemodus <em>Standard</em> und <em>Strecken.</em> <br>Geben Sie hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.</td></tr><tr><td>Link zu*</td><td>Hier können Sie angeben wohin verlinkt werden soll.</td></tr><tr><td>Link in neuem Tab öffnen</td><td>Der Link wird, bei Aktivierung, in einem neuen Tab geöffnet.</td></tr><tr><td>Headline</td><td>Headline welche auf dem Banner erscheinen soll</td></tr><tr><td>Text</td><td>Text welcher auf dem Banner (unter der Headline) erscheinen soll</td></tr><tr><td>Button</td><td>Button welcher auf dem Banner (unter der Text) erscheinen soll</td></tr></tbody></table>

{% hint style="warning" %}
Wird ein Button verwendet, ist der Link nur im Bereich des Buttons aktiv. Wird kein Button verwendet (Feld bleibt leer) wird der gesamte Bildbereich verlinkt
{% endhint %}

<table><thead><tr><th width="371">Einstellung im Tap: Einstellungen</th><th>Bedeutung</th></tr></thead><tbody><tr><td>Schriftart</td><td>Welche Schriftart soll genutzt werden (<em>Schriftart für Text</em> oder <em>Schriftart für Überschriften</em>)</td></tr><tr><td>Text Ausrichtung</td><td>Soll der Text linksbündig, zentriert oder rechtsbündig positioniert werden</td></tr><tr><td>Schriftgröße</td><td>Wie groß sollen die Buchstaben dargestellt werden (Angaben in Pixel)</td></tr><tr><td>Schriftstärke</td><td>Definieren Sie die Schriftstärke (dünn, normal oder fett) für den Text</td></tr><tr><td>Schriftfarbe (Headline)</td><td>Diese Einstellung ändert die Schriftfarbe für die Headline.</td></tr><tr><td>Schriftfarbe (Text)</td><td>Diese Einstellung ändert die Schriftfarbe für den Text.</td></tr><tr><td><a href="#button-variante">Variante (Button)</a></td><td>Bestimmen Sie das Aussehen des Buttons. </td></tr><tr><td>Größe (Button)</td><td>Bestimmen Sie die Größe des Buttons</td></tr><tr><td>Auf dem Smartphone (Portrait) ausblenden</td><td>Soll das Overlay mit dem Text auf Smartphone-Größe (hochkant) ausgeblendet werden</td></tr><tr><td>Breite</td><td>Wie viel Platz soll das Overlay auf dem Bild einnehmen? (Angaben in Prozent empfohlen)</td></tr><tr><td><a href="#innen-und-aussenabstand-1">Innenabstand</a></td><td>Definieren Sie den Abstand zwischen Schrift und Overlay</td></tr><tr><td><a href="#innen-und-aussenabstand-1">Außenabstand</a></td><td>Definieren Sie den Abstand zwischen Zeile und Bild</td></tr><tr><td>Hintergrundfarbe</td><td>Geben Sie der Zeile eine Hintergrundfarbe</td></tr></tbody></table>

{% hint style="info" %}
\*Die *Schriftart für Text* bzw. *Schriftart für Überschriften* stellen Sie in den [Theme Einstellungen > Typografie & Farben >Typografie](https://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen/typografie-and-farben#schriftart) fest
{% endhint %}

<figure><img src="/files/j8C661Yh7uCZjagXxcbn" alt=""><figcaption><p>Block-Element im Backend</p></figcaption></figure>

#### Button Variante

Der Button kann verschiedene Varianten darstellen. Welche zur Verfügung stehen, finden Sie im Auswahlfeld. Wie diese in der Darstellung aussehen, finden Sie im Handbuch unter: [Theme Einstellungen > Button Style auswählen](/coolbax-docs/theme/theme-einstellungen.md#button-style-auswaehlen). Die Farben für die Buttons haben Sie in den Theme Einstellungen unter: [Typografie & Farben > Buttons](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#buttons) eingestellt

#### **Innen- und Außenabstand**

Für den Innen- und Außenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.

* **1 Wert: 10px** = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
* **2 Werte: 10px 5px** = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
* **3 Werte: 10px** **5px 20px**= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
* **4 Werte: 10px** **5px 20px 15px** = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.

### Bild Overlay

In diesem Block-Element wird der Text, wie beim Bild Message, in einem Overlay dargestellt. In diesem Fall geht das Overlay vom oberen bis unteren Bildschirmrand. Die Breite kann prozentual angepasst werden. Sie können auch hier u. a. die Position des Overlay sowie einige Farbanpassungen vornehmen.

<figure><img src="/files/5rVEGjOip4S0iEVcObei" alt=""><figcaption><p>Beispiel für: Bild Overlay</p></figcaption></figure>

| Einstellungen im Tap: Inhalt | Bedeutung                                                                                                                                                                                                                    |                                                                         |                                                                                     |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| Anzeigemodus                 | <p>Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten).</p><p><br><strong>Standard:</strong> passt sich das Bild bis zu seiner Größe an den Bereich an                              | <strong>Füllen:</strong> wird der Bereich mit dem Bild komplett gefüllt | <strong>Strecken:</strong> wird das Bild auf die Größe des Bereiches gestreckt.</p> |
| Vertikale Ausrichtung        | <p>Einstellung gilt beim Anzeigemodus <em>Standard</em> und <em>Strecken.</em> <br>Geben Sie hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.</p> |                                                                         |                                                                                     |
| Link zu                      | Hier können Sie angeben wohin verlinkt werden soll.                                                                                                                                                                          |                                                                         |                                                                                     |
| Link in neuem Tab öffnen     | Der Link wird, bei Aktivierung, in einem neuen Tab geöffnet.                                                                                                                                                                 |                                                                         |                                                                                     |
| Headline                     | Headline welche auf dem Banner erscheinen soll                                                                                                                                                                               |                                                                         |                                                                                     |
| Text                         | Text welcher auf dem Banner (unter der Headline) erscheinen soll                                                                                                                                                             |                                                                         |                                                                                     |
| Button                       | Button welcher auf dem Banner (unter der Text) erscheinen soll                                                                                                                                                               |                                                                         |                                                                                     |

{% hint style="warning" %}
Wird ein Button verwendet, ist der Link nur im Bereich des Buttons aktiv. Wird kein Button verwendet (Feld bleibt leer) wird der gesamte Bildbereich verlinkt
{% endhint %}

| Einstellungen im Tap: Einstellungen        | Bedeutung                                                                                         |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| Schriftart\*                               | Welche Schriftart soll genutzt werden (*Schriftart für Text* oder *Schriftart für Überschriften*) |
| Text Ausrichtung                           | Soll der Text linksbündig, zentriert oder rechtsbündig positioniert werden                        |
| Schriftgröße                               | Wie groß sollen die Buchstaben dargestellt werden (Angaben in Pixel)                              |
| Schriftstärke                              | Definieren Sie die Schriftstärke (dünn, normal oder fett) für den Text                            |
| Schriftfarbe (Headline)                    | Diese Einstellung ändert die Schriftfarbe für die Headline.                                       |
| Schriftfarbe (Text)                        | Diese Einstellung ändert die Schriftfarbe für den Text.                                           |
| [Variante (Button)](#button-variante-1)    | Bestimmen Sie das Aussehen des Buttons                                                            |
| Größe (Button)                             | Bestimmen Sie die Größe des Buttons                                                               |
| Auf dem Smartphone (Portrait) ausblenden   | Soll das Overlay mit dem Text auf Smartphone-Größe (hochkant) ausgeblendet werden                 |
| Position                                   | Soll das Overlay links oder rechts vom Bildrand positioniert werden?                              |
| Breite                                     | Wie viel Platz soll das Overlay auf dem Bild einnehmen? (Angaben in Prozent)                      |
| [Innenabstand](#innen-und-aussenabstand-2) | Definieren Sie den Abstand zwischen Schrift und Overlay                                           |
| [Außenabstand](#innen-und-aussenabstand-2) | Definieren Sie den Abstand zwischen Zeile und Bild                                                |
| Hintergrundfarbe                           | Geben Sie der Zeile eine Hintergrundfarbe                                                         |

{% hint style="info" %}
\*Die *Schriftart für Text* bzw. *Schriftart für Überschriften* stellen Sie in den [Theme Einstellungen > Typografie & Farben >Typografie](https://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen/typografie-and-farben#schriftart) fest
{% endhint %}

<figure><img src="/files/vuX4q9qv5YX5Fvy6qvEl" alt=""><figcaption><p>Block-Element im Backend</p></figcaption></figure>

#### **Button Variante**

Der Button kann verschiedene Varianten darstellen. Welche zur Verfügung stehen, finden Sie im Auswahlfeld. Wie diese in der Darstellung aussehen, finden Sie im Handbuch unter: [Theme Einstellungen > Button Style auswählen](https://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen#button-style-auswaehlen). Die Farben für die Buttons haben Sie in den Theme Einstellungen unter: [Typografie & Farben > Buttons](https://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen/typografie-and-farben#buttons) eingestellt

#### **Innen- und Außenabstand**

Für den Innen- und Außenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.

* **1 Wert: 10px** = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
* **2 Wert: 10px 5px** = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
* **3 Wert: 10px** **5px 20px**= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
* **4 Wert: 10px** **5px 20px 15px** = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.

### Kontakt Box

Sie haben die Möglichkeit eine Kontakt Box auf den Seiten ihres Shops anzuzeigen. Allgemeine oder spezielle (z. B. zu speziellen Hotline Nummern) Kontaktdaten können individuell hinterlegt werden.

<figure><img src="/files/wS9z5au8609J1ZdodxPr" alt=""><figcaption><p>Beispiel für Kontakt Box</p></figcaption></figure>

| Einstellungen                        | Bedeutung                                                             |
| ------------------------------------ | --------------------------------------------------------------------- |
| [Display Mode](#display-mode)        | Von wo sollen die Inhalte geladen werden?                             |
| Headline\*                           | Wie soll der Inhalt für die Headline sein                             |
| Anschrift\*                          | Möglichkeit zur Hinterlegung einer Adresse                            |
| Öffnungszeiten\*                     | Möglichkeit zur Hinterlegung von Öffnungszeiten                       |
| Telefon, Mobil, Fax\*                | Möglichkeit zur Hinterlegung einer Telefon, Mobil und/oder Fax Nummer |
| E-Mail\*                             | Möglichkeit zur Hinterlegung einer E-Mail Adresse                     |
| Google Maps Link (Link zum Teilen)\* | Möglichkeit auf Google Maps zu verlinken                              |

{% hint style="info" %}
\*Diese Einstellungen sind nur bei der Einstellung: *Display Mode = Daten individuell eingeben* verfügbar
{% endhint %}

<figure><img src="/files/i2VRD1Oo2UzCfNyhEmxR" alt=""><figcaption><p>Block-Element im Backend</p></figcaption></figure>

#### Display Mode

Sie haben zwei Möglichkeiten die Kontaktbox mit Inhalt zu füllen:

* **Daten individuell eingeben:** Bei dieser Auswahl werden die Eingabefelder unter der Auswahl eingeblendet und können ausgefüllt werden. \
  **Vorteil:** Sie können für bestimmte Seiten z. B. unterschiedliche Service Nummern oder Adresse hinterlegen.<br>
* **Daten global aus den Theme Einstellungen holen:** Hier wird der Inhalt aus den Theme Einstellungen: [Produkt Kategorie > Sidebar Kontakt Box ](/coolbax-docs/theme/theme-einstellungen/produkt-kategorie.md#sidebar-kontakt-box)geholt.\
  **Vorteil:** Sie können Änderungen bei Service Nummern oder Adressen global an einer Stelle ändern und müssen nicht jede Shop Seite einzeln durchgehen.

### USP Box

Für besonderen Service oder Eigenschaften Ihres Unternehmens oder Produkte können Sie sogenannte USP verwenden. Sie werden mit einem Icon und einer Headline ausgeliefert. Eine Erklärung unter dem Icon und der Headline ist möglich.

<figure><img src="/files/LHqSYNZVnpm6eJ7wAk15" alt=""><figcaption><p>Beispiel für: USP Box</p></figcaption></figure>

| Einstellungen im Tap: Inhalt | Bedeutung                          |
| ---------------------------- | ---------------------------------- |
| [Icon](#auswahl-der-icons)   | Tragen Sie den Namen des Icons ein |
| Position                     | Position des Icons zur Headline    |
| Headline                     | Inhalt der Headline                |
| Text                         | Inhalt der Erklärung (optional)    |

#### Auswahl des Icon

Für jedes USP können Sie in eigenes Icon wählen. Gehen Sie auf: [Theme Einstellungen > Icon auswählen](https://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen#icon-auswaehlen), suchen sich dort ein passendes Icon aus und kopieren den Namen des Icons. Diesen fügen Sie anschließend in das Feld: *Icon* ein.

| Einstellungen im Tap: Einstellungen | Bedeutung                                                                                                                                                                                                                           |
| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Icon Größe                          | Angabe der Schriftgröße des Icons (in Pixel)                                                                                                                                                                                        |
| Icon Farbe                          | Angabe der Farbe des Icons                                                                                                                                                                                                          |
| Schriftart                          | Hier können Sie die Schriftart des Textes ändern. Die Headline behält die Einstellung aus den Theme Einstellungen: [Typografie & Farben > Schriftart](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#schriftart). |
| Schriftgröße                        | Definition der Schriftgröße für den Text (in Pixel) Headline ist vordefiniert.                                                                                                                                                      |
| Schriftstärke                       | Definition der Strichstärke für den Text? Headline ist vordefiniert.                                                                                                                                                                |
| Schriftfarbe (Headline)             | Auswahl der Schriftfarbe für die Headline                                                                                                                                                                                           |
| Schriftfarbe (Text)                 | Auswahl der Schriftfarbe für den Text                                                                                                                                                                                               |
| Hintergrundfarbe (Container)        | Auswahl der Hintergrundfarbe für den Container                                                                                                                                                                                      |
| Rahmenfarbe (Container)             | Auswahl der Rahmenfarbe für den Container                                                                                                                                                                                           |
| Innenabstand (Container)            | Definieren Sie den Abstand zwischen Schrift und Container                                                                                                                                                                           |

<figure><img src="/files/pBeX6rPtcGI6rz4rXj9c" alt=""><figcaption><p>Block-Element im Backend</p></figcaption></figure>

### Produkt-Box, eine Spalte

Mit diesem Block Element können Sie ein Produkte aus dem Shop, über die gesamte Zeile ausgeben lassen.&#x20;

<figure><img src="/files/lAc1L4vVc7tEHzb7DVnD" alt=""><figcaption><p>Beispiel für: Produkt-Box, eine Spalte</p></figcaption></figure>

| Einstellungen         | Bedeutung                                                                                                                                                                                              |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Produkt               | Auswahl des Produkts aus dem Shop                                                                                                                                                                      |
| Layout-Typ            | Dieser gibt an, wie das Produkt präsentiert werden soll (Standard, Großes Bild, Minimaler Inhalt)                                                                                                      |
| Anzeigemodus          | Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten)                                                                                                           |
| Vertikale Ausrichtung | Einstellung gilt beim Anzeigemodus *Beinhalten* und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt. |

<figure><img src="/files/PINMgKJmqusTwONdVdr5" alt=""><figcaption><p>Block-Element im Backend</p></figcaption></figure>

### Produkt-Box, zwei Spalten

Mit diesem Block Element können Sie zwei Produkte aus dem Shop nebeneinander ausgeben lassen.

<figure><img src="/files/Kb5AaiUaMu1hl9CT3V5u" alt=""><figcaption><p>Beispiel für: Produkt-Box, zwei Spalten</p></figcaption></figure>

| Einstellungen         | Bedeutung                                                                                                                                                                                              |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Produkt               | Auswahl des Produkts aus dem Shop                                                                                                                                                                      |
| Layout-Typ            | Dieser gibt an, wie das Produkt präsentiert werden soll (Standard, Großes Bild, Minimaler Inhalt)                                                                                                      |
| Anzeigemodus          | Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten)                                                                                                           |
| Vertikale Ausrichtung | Einstellung gilt beim Anzeigemodus *Beinhalten* und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt. |

<figure><img src="/files/fU1RIpAaKLSKZMkRXGQL" alt=""><figcaption><p>Block-Element im Backend</p></figcaption></figure>

## Coolbax Theme - Spalten

{% hint style="info" %}
Spalten helfen Ihnen Block-Elemente nebeneinander anzuordnen. Hierfür stehen Ihnen unterschiedliche Möglichkeiten an Spaltenanzahl und Spaltenaufteilung zur Verfügung.
{% endhint %}

### 1 Spalte

Die Spalte zieht sich über die gesamte Bereite der Einkaufswelt.&#x20;

<figure><img src="/files/zV2LQ41HsQEfTcglXo99" alt=""><figcaption><p>Block-Element im Backend für: 1 Spalte (100%)</p></figcaption></figure>

### 2 Spalten

Es gibt drei unterschiedliche Aufteilungen für die Ausführung von 2 Spalten. Die Angaben in Prozente zeigen an, wie viel Platz die jeweiligen Spalten einnehmen.

<div><figure><img src="/files/TnoNLFK5A3LWbbJ0g8dI" alt=""><figcaption><p>Block-Element im Backend für: 2 Spalten (25% 75%)</p></figcaption></figure> <figure><img src="/files/298YSwlWhphIFSnBpeCM" alt=""><figcaption><p>Block-Element im Backend für: 2 Spalten (75% 25%)</p></figcaption></figure></div>

<figure><img src="/files/fvCkeSSwiRiJ5VlwLtbx" alt=""><figcaption><p>Block-Element im Backend für: 2 Spalten (50% 50%)</p></figcaption></figure>

### 3 Spalten

Es gibt vier unterschiedliche Aufteilungen für die Ausführung von 3 Spalten. Die Angaben in Prozente zeigen an, wie viel Platz die jeweiligen Spalten einnehmen.

<div><figure><img src="/files/B2fgrykRYoAT2S989a4v" alt=""><figcaption><p>Block-Element im Backend für: 3 Spalten (25% 50% 25%)</p></figcaption></figure> <figure><img src="/files/xQbXxW0RNhgwMTilwbek" alt=""><figcaption><p>Block-Element im Backend für: 3 Spalten (25% 25% 50%)</p></figcaption></figure></div>

<div><figure><img src="/files/TLSZHvmkDI3v0XTs7Gto" alt=""><figcaption><p>Block-Element im Backend für: 3 Spalten (50% 25% 25%)</p></figcaption></figure> <figure><img src="/files/ZrUJDFOV8ZOKYEudsoZX" alt=""><figcaption><p>Block-Element im Backend für: 3 Spalten (33% 33% 33%)</p></figcaption></figure></div>

### 4 Spalten

Bei der 4 Spalten Aufteilung haben alle Spalten eine Breite von 25%.

<figure><img src="/files/XWomqeEOplNXCpIkyKxZ" alt=""><figcaption><p>Block-Element im Backend für: 4 Spalten (25% 25% 25% 25%)</p></figcaption></figure>

### 6 Spalten

Bei der 6 Spalten Aufteilung haben alle Spalten eine Breite von 16,6%.

<figure><img src="/files/IjkuvhHs9VUxcuQKE5P3" alt=""><figcaption><p>Block-Element im Backend für: 6 Spalten (6 x 16,6%)</p></figcaption></figure>

## Coolbax Theme - Layout

{% hint style="info" %}
Layouts ermöglichen es Ihnen Elemente unabhängig von dem Zeilenprinzip anzuordnen. Hierfür stehen Ihnen mehrere Raster-Layouts zur Verfügung.&#x20;
{% endhint %}

### Layout One

Das Layout One verfügt über 3 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit *umgedreht* gekennzeichnet).

<div><figure><img src="/files/zRG9Nh0wbnwTJZshILz6" alt=""><figcaption><p>Block-Element im Backend für: Layout One</p></figcaption></figure> <figure><img src="/files/HVAwJ4d021TtxMhsKZ2i" alt=""><figcaption><p>Block-Element im Backend für: Layout One umgedreht</p></figcaption></figure></div>

### Layout Two

Das Layout Two verfügt über 3 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit *umgedreht* gekennzeichnet).

<div><figure><img src="/files/Jxj662elIlYKztcFNm22" alt=""><figcaption><p>Block-Element im Backend für: Layout Two umgedreht</p></figcaption></figure> <figure><img src="/files/zfH4IHEeRLb4bf0oj7dk" alt=""><figcaption><p>Block-Element im Backend für: Layout Two umgedreht</p></figcaption></figure></div>

### Layout Three

Das Layout Three verfügt über 4 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit *umgedreht* gekennzeichnet).

<div><figure><img src="/files/fZ40AfQIboZ6qfOjaI5Y" alt=""><figcaption><p>Block-Element im Backend für: Layout Three</p></figcaption></figure> <figure><img src="/files/Zwp3zJJQCKpE9OodNDYV" alt=""><figcaption><p>Block-Element im Backend für: Layout Three umgedreht</p></figcaption></figure></div>

### Layout Four

Das Layout Four verfügt über 4 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit *umgedreht* gekennzeichnet).

<div><figure><img src="/files/rHEdtCK8iOWojyaBpTlQ" alt=""><figcaption><p>Block-Element im Backend für: Layout Four</p></figcaption></figure> <figure><img src="/files/Zc3Dt0L4fKyyxqwXE5JY" alt=""><figcaption><p>Block-Element im Backend für: Layout Four umgedreht</p></figcaption></figure></div>

### Layout Five

Das Layout Five verfügt über 3 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit *umgedreht* gekennzeichnet).

<div><figure><img src="/files/OZQdEydNPWDJGq2lgakK" alt=""><figcaption><p>Block-Element im Backend für: Layout Five</p></figcaption></figure> <figure><img src="/files/Kffcsc7aFeSu7UV6FRva" alt=""><figcaption><p>Block-Element im Backend für: Layout Five umgedreht</p></figcaption></figure></div>

## Coolbax Theme - Kategorien

### Unterkategorien im Listing

Mit diesem Element werden automatisch alle Unterkategorien einer übergeordneten Kategorie ausgegeben. Hierbei kann die Ausgabe  als Schriftzug und oder mit Grafik erfolgen

<figure><img src="/files/aQa0yGvmKXQ5setCtpMQ" alt=""><figcaption><p>Beispiel für: Unterkategorien im Listing</p></figcaption></figure>

{% hint style="info" %}
Für die Darstellung werden die Grafiken verwendet, welche Sie unter: *Kataloge > Kategorien > Allgemein > Menü-Einstellungen > Anzeigebild* hinterlegt haben.&#x20;
{% endhint %}

| Einstellungen im Tap: Inhalt             | Bedeutung                                                               |
| ---------------------------------------- | ----------------------------------------------------------------------- |
| [Darstellungsart](#darstellungsart)      | Auswahl der Darstellungsart der Unterkategorien (Text, Bild, Bild+Text) |
| Rahmen anzeigen                          | Aktivierung zur Anzeige eines Rahmens um die Kategorie Container        |
| Rahmenfarbe                              | Auswahl der Rahmenfarbe für die Kategorie Container                     |
| [Hover Effekt](#hover-effekt) (Rahmen)   | Anzeige eines Rahmens wenn Cursor über einem Kategorie Container ist    |
| [Hover Effekt](#hover-effekt) (Schatten) | Anzeige eines Schattens wenn Cursor über einem Kategorie Container ist  |
| Hintergrundfarbe                         | Auswahl der Hintergrundfarbe der Kategorie Container                    |
| [Innenabstand](#innenabstand)            | Definieren Sie den Abstand zwischen Inhalt und Kategorie Container      |

#### Darstellungsart

Für die Darstellung der Unterkategorien stehen Ihnen drei Möglichkeiten zur Verfügung. Sie können zwischen: Bild, Text oder Bild + Text wählen.

<div><figure><img src="/files/MhqW5oUuIHxzR674m5KE" alt=""><figcaption><p>Beispiel: Bild</p></figcaption></figure> <figure><img src="/files/cgAIQXV01Sg7mjeNxZVU" alt=""><figcaption><p>Beispiel: Text</p></figcaption></figure> <figure><img src="/files/suMmmbgzsI2Cvp1xKo9C" alt=""><figcaption><p>Beispiel: Bild + Text</p></figcaption></figure></div>

#### Hover Effekt

Sie können optisch die Unterkategorien hervorheben, über die sich der Nutzer mit dem Cursor befindet. Hierbei habe Sie die Auswahl zwischen: Schatten, Rahmen oder Rahmen + Schatten.

<div><figure><img src="/files/aZewXSaK6ivzH9FIm2aL" alt=""><figcaption><p>Beispiel: Schatten</p></figcaption></figure> <figure><img src="/files/EXagvEBR6dH6BG9Ss0Gm" alt=""><figcaption><p>Beispiel: Rahmen</p></figcaption></figure> <figure><img src="/files/rMNNDy0tR02d5kNXSrDa" alt=""><figcaption><p>Beispiel: Rahmen + Schatten</p></figcaption></figure></div>

#### Innenabstand

Mit dem Innenabstand können Sie einen Abstand zwischen dem Inhalt des Containers (Bild, Text) und den Rand des Containers definieren

Für den Innenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.

* **1 Wert: 10px** = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
* **2 Wert: 10px 5px** = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
* **3 Wert: 10px** **5px 20px**= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
* **4 Wert: 10px** **5px 20px 15px** = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.

<figure><img src="/files/jcLSdze7iy2Q0YjvCzIi" alt=""><figcaption><p>Beispiel für einen Innenabstand</p></figcaption></figure>

| Einstellungen im Tap: Layout                        | Bedeutung                                                                                 |
| --------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Smartphone (Portrait - XS)                          | Wie viel Unterkategorie sollen in einer Zeile auf dem Smartphone (XS) dargestellt werden? |
| Smartphone (Landscape - SM)                         | Wie viel Unterkategorie sollen in einer Zeile auf dem Smartphone (SM) dargestellt werden? |
| Tablet (Portrait - MD)                              | Wie viel Unterkategorie sollen in einer Zeile auf dem Tablet (MD) dargestellt werden?     |
| Tablet (Landscape - LS)                             | Wie viel Unterkategorie sollen in einer Zeile auf dem Tablet (LS) dargestellt werden?     |
| Desktop (XL)                                        | Wie viel Unterkategorie sollen in einer Zeile auf dem Desktop (XL) dargestellt werden?    |
| Desktop (XXL)                                       | Wie viel Unterkategorie sollen in einer Zeile auf dem Desktop (XXL) dargestellt werden?   |
| [Horizontale Ausrichtung](#horizontale-ausrichtung) | Ausrichtung der Unterkategorien in der letzten Zeile, wenn die Anzahl nicht aufgeht       |

#### Horizontale Ausrichtung

Mit der horizontalen Ausrichtung geben Sie an, wie die Container in der letzten Zeile ausgegeben werden sollen, wenn die Anzahl nicht aufgeht. Sie können zwischen: rechts, Mitte und links wählen.

<div><figure><img src="/files/EUikqd65YSxeLIM5BzyC" alt=""><figcaption><p>Horizontale Ausrichtung: links</p></figcaption></figure> <figure><img src="/files/I5I3fCZChdmk1B0rr0Lf" alt=""><figcaption><p>Horizontale Ausrichtung: Mitte</p></figcaption></figure> <figure><img src="/files/s7nl3HuekSqyunebGVoz" alt=""><figcaption><p>Horizontale Ausrichtung: rechts</p></figcaption></figure></div>

| Einstellungen im Tap: Einstellungen        | Bedeutung                                                                                                                                                                              |                                                                        |                                                                                    |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| Anzeigemodus                               | <p>Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Cover, Stretch).</p><p><strong>Standard:</strong> passt sich das Bild bis zu seiner Größe an den Bereich an | <strong>Cover:</strong> wird der Bereich mit dem Bild komplett gefüllt | <strong>Stretch:</strong> wird das Bild auf die Größe des Bereiches gestreckt.</p> |
| Höhe                                       | Angabe der Höhe des Containers                                                                                                                                                         |                                                                        |                                                                                    |
| Horizontale Ausrichtung                    | Ausrichtung des Bilds in der Horizontalen (nur bei *Anzeigemodus*: *Standard* wirksam)                                                                                                 |                                                                        |                                                                                    |
| Vertikale Ausrichtung                      | Ausrichtung des Bilds in der Vertikalen (nur bei *Anzeigemodus*: *Standard* wirksam)                                                                                                   |                                                                        |                                                                                    |
| Das Bild auf dem Smartphone ausblenden     | Bild wird bei Aktivierung auf dem Smartphone ausgeblendet                                                                                                                              |                                                                        |                                                                                    |
| [Position](#position)                      | Platzierung der Schrift unter oder auf dem Bild                                                                                                                                        |                                                                        |                                                                                    |
| Schriftart                                 | Welche Schriftart soll genutzt werden (*Schriftart für Text* oder *Schriftart für Überschriften*)                                                                                      |                                                                        |                                                                                    |
| Text Ausrichtung                           | Soll der Text linksbündig, zentriert oder rechtsbündig positioniert werden                                                                                                             |                                                                        |                                                                                    |
| Schriftgröße                               | Wie groß sollen die Buchstaben dargestellt werden (Angaben in Pixel)                                                                                                                   |                                                                        |                                                                                    |
| Schriftstärke                              | Definieren Sie die Schriftstärke (normal, fett oder fetter) für den Text                                                                                                               |                                                                        |                                                                                    |
| Hintergrundfarbe                           | Geben Sie der Zeile eine Hintergrundfarbe                                                                                                                                              |                                                                        |                                                                                    |
| Schriftfarbe                               | Geben Sie der Schrift eine Farbe                                                                                                                                                       |                                                                        |                                                                                    |
| [Innenabstand](#innen-und-aussenabstand-3) | Definieren Sie den Abstand zwischen Schrift und Container des Textes                                                                                                                   |                                                                        |                                                                                    |
| [Außenabstand](#innen-und-aussenabstand-3) | Definieren Sie den Abstand zwischen Container des Textes und Bild                                                                                                                      |                                                                        |                                                                                    |
| Pfeil anzeigen                             | Mit Aktivierung wird ein Pfeil nach dem Kategorienamen ausgegeben                                                                                                                      |                                                                        |                                                                                    |

#### Position

Für die Positionierung des Textes haben Sie zwei Möglichkeiten:

<div align="center" data-full-width="true"><figure><img src="/files/DsnUOYwTSDh9J6ocGN2N" alt=""><figcaption><p>Beispiel: unter dem Bild</p></figcaption></figure> <figure><img src="/files/xXxjg527tZL9q59Xl8IO" alt=""><figcaption><p>Beispiel: auf dem Bild</p></figcaption></figure></div>

#### Innen- und Außenabstand

Für den Innen- und Außenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.

* **1 Wert: 10px** = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
* **2 Werte: 10px 5px** = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
* **3 Werte: 10px** **5px 20px**= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
* **4 Werte: 10px** **5px 20px 15px** = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.

<div><figure><img src="/files/NJY8cP6DDFEZpwZWKueq" alt=""><figcaption><p>Beispiel für den Innenabstand</p></figcaption></figure> <figure><img src="/files/rExMgcvYDHLywrRXAo9W" alt=""><figcaption><p>Beispiel für den Außenabstand</p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolbax.gitbook.io/coolbax-docs/theme/erlebniswelten.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.