> For the complete documentation index, see [llms.txt](https://docs.pixeleyes.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pixeleyes.de/anleitungen-instructions/deutsch/dokumentation-unserer-shopware-6-plugins/cms-widgets-fur-die-erlebniswelten/gemeinsame-einstellungen-rahmen-textausrichtung.md).

# Gemeinsame Einstellungen: Rahmen, Textausrichtung

Viele Felder tauchen bei mehreren Elementen identisch auf. Um Wiederholungen zu vermeiden, werden sie hier einmal zentral erklärt – die Element-Kapitel verweisen bei Bedarf hierher.

## Abstand (Padding & Margin)

Fast jedes Element hat im Reiter **Allgemein**:

* **Innenabstand** – Abstand zwischen Element-Rand und Inhalt (CSS-Padding, z. B. `24px`).
* **Außenabstand** – Abstand zum vorherigen/nächsten Element (CSS-Margin).

## Rahmen (Ein/Aus + Farbe)

Bei allen Karten- und Box-Elementen (z. B. Kontakt-Teaser, USP-Icon-Textbox, Rezensionen, Text-Karte, Preis-Karte, Team-Mitglied, Download-Karte, Bild-Text-Karte) gibt es:

* **Rahmen anzeigen** – Schalter, standardmäßig **aus**.
* **Rahmenfarbe** – Farbwähler, erscheint nur wenn der Rahmen aktiviert ist. Der Standardwert übernimmt automatisch die Rahmenfarbe Ihres Theme-Buttons; Sie können aber jederzeit eine eigene Farbe wählen.

Der Rahmen umschließt bei Grid-/Listen-Elementen (USP-Icon-Textbox, Rezensionen) immer nur die **äußere Box** – nicht die einzelnen Einträge innerhalb.

## Textausrichtung

Bei allen Elementen mit Titel **und** Text/Beschreibung steht eine dreistufige Ausrichtung zur Verfügung:

* **Links** (Standard)
* **Mittig**
* **Rechts**

## Bild-Ladeverhalten & Bild-Animation

Bei allen Elementen mit Bild(ern):

### Bild-Ladeverhalten

* **Lazy (verzögert)** – Standard. Das Bild lädt erst, wenn es in den sichtbaren Bereich scrollt (besser für die Ladezeit).
* **Eager (sofort)** – lädt das Bild sofort; sinnvoll für Bilder, die direkt sichtbar sind (z. B. im ersten Bildschirmbereich/„above the fold").

### Bilder-Animation

Ein dezenter Einblend-Effekt beim Erscheinen im Viewport:

* Keine Animation (Standard)
* Eine von 7 Varianten, z. B. Einblenden, Hochschieben, Zoomen

## Titel-Typ (Überschriften-Ebene)

Wo ein Titel konfigurierbar ist, kann zusätzlich die HTML-Ebene gewählt werden: **H1–H6** oder **Div** (kein semantisches Überschriften-Tag).

{% hint style="info" %}
Wichtig für Barrierefreiheit und SEO: Pro Seite sollte es in der Regel nur ein H1 geben.
{% endhint %}

## Link-Ziel

Bei allen Buttons und klickbaren Elementen (Button-Element, CTA-Karte, Hero-Banner, Bild-Text-CTA, Text-Karte, Preis-Karte, Einzelbild, Countdown-Banner …) steht ein einheitliches Link-Ziel-Feld zur Verfügung.

**Art der Verlinkung:**

| Option           | Ziel                                                          |
| ---------------- | ------------------------------------------------------------- |
| Keine Verlinkung | Element ist nicht klickbar                                    |
| URL              | frei eingebbare Adresse (intern oder extern)                  |
| Kategorie        | interne Verlinkung auf eine Kategorie-Seite                   |
| Produkt          | interne Verlinkung auf eine Produktseite                      |
| E-Mail           | öffnet das Mailprogramm (`mailto:`)                           |
| Telefonnummer    | initiiert einen Anruf (`tel:`) auf Mobilgeräten               |
| Popup            | öffnet ein Modal mit frei einstellbarem Titel + Inhalt (HTML) |
| Datei            | verlinkt eine hochgeladene Datei (z. B. PDF) zum Download     |

Zusätzlich: **Link in neuem Tab öffnen** (Schalter).

## Button-Stil & Button-Größe

Wo ein Button konfigurierbar ist (Bootstrap-Klassen):

* **Button-Stil**: Primär, Sekundär, Success, Danger, Warning, Info, Light, Dark, Link – jeweils auch als Outline-Variante.
* **Button-Größe**: Klein, Normal, Groß.

## Icon-Größe & Spalten (Grid-Elemente)

Bei Icon- und Karten-Rastern (USP-Icon-Textbox, Icon-Liste, Rezensionen):

* **Spalten** getrennt einstellbar für **Mobil**, **Tablet hoch**, **Tablet quer** und **Desktop** – so lässt sich das Raster auf jedem Gerät sauber anpassen.
* **Icon-Größe** – Mindesthöhe/-breite der Icons in px.