# Hero-Abschnitt

### **Was Sie lernen werden**

* Wie man den Hero-Bereich hinzufügt und anpasst
* Wie man zwischen Bild- und Videohintergründen wechselt
* Wie man Titel, Überlagerungen und Abstände konfiguriert
* Wie man bis zu 2 Call-to-Action-Schaltflächen hinzufügt und gestaltet

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

***

### 🧩 Abschnittsübersicht

Der Hero-Bereich im Plain Jane Theme ist ein vollbreites Banner, das verwendet wird, um einen mutigen ersten Eindruck in deinem Laden zu erzeugen. Du kannst ein Bild oder ein automatisch abgespieltes Video mit einem Titel und bis zu zwei Call-to-Action-Schaltflächen präsentieren.

> 💡 Tipp: Für beste Ergebnisse verwende hochwertige Bilder oder kurze, stummgeschaltete Videoloops unter 10 MB.

***

### ⚙️ Wie man den Hero-Bereich hinzufügt und anpasst

#### 1. Abschnitt hinzufügen

* Vom Shopify **Theme-Editor**, öffne dein **Startseite**
* Klicken Sie **Abschnitt hinzufügen** und wähle **Hero**
* Ziehen Sie ihn optional an den oberen Rand Ihres Layouts

#### 2. Hintergrundmedien hochladen

Unter **Inhalt & Daten**:

* **Medientyp**: Wähle `Bild` oder `Video`
* **Bild**: Lade hoch oder wähle dein **Erstes Bild**
* **Zweites Bild (optional)**: Wird bei aktiviertem Fallback für Mobilgeräte verwendet
* **Video**: Hochladen `.mp4` Format nur; Autoplay ist stummgeschaltet

> ⚠️ Warnung: Auf iPhones im Energiesparmodus kann das automatische Abspielen von Videos deaktiviert sein.

***

### 🖋️ Text- und Layouteinstellungen

#### Titel

* **Hero-Titel**: Füge deine Nachricht hinzu (z. B. „NEUE ANKÜNFTE“)

#### Layout & Anzeige

* **Hero-Höhe**: Wähle aus `50%`, `75%`, oder `100% der Ansichtsfensterhöhe`
* **Auf Mobilgeräten Bild statt Video verwenden**: Einschalten, um mobiles Video zu überschreiben
* **Auf Mobilgeräten nur ein Bild anzeigen**: Hilft, Layout und Geschwindigkeit zu kontrollieren
* **Auswahl des Mobilbildes**: Wähle aus, welches Bild angezeigt werden soll

#### Inhaltsposition

* Setze den Text und die Schaltflächen auf:
  * `Oben links`
  * `Oben zentriert`
  * `Zentriert`
  * `Unten links`
  * `Unten rechts`

***

### 🎨 Typografie, Farben & Stil

#### Typografie

* **Schriftstärke**: Wähle zwischen `Normal` und `Fett`

#### Farben

* **Titel-Farbe**: Lege eine benutzerdefinierte Hex-Farbe fest (z. B. `#FFFFFF`)

#### Überlagerungen

* **Obere/untere Überlagerungen**: Optionale Verläufe zur besseren Lesbarkeit
* Festlegen:
  * Überlagerungsfarbe
  * Überlagerungshöhe (%) mit Schieberegler

> 💡 Tipp: Verwende ein halbtransparentes Schwarz (`#000000` bei 40%), um den Text hervorzuheben.

***

### 📦 Abstände

Passen Sie die Abstände getrennt für Desktop und Mobil an:

```plaintext
plaintextCopyEditTop Abstand (Desktop): 0px
Abstand unten (Desktop): 20px
Abstand oben (Mobil): 0px
Abstand unten (Mobil): 16px
```

***

### 🔘 Schaltflächen

Du kannst bis zu **zwei Schaltflächen**hinzufügen. Jede Schaltfläche enthält:

#### Inhalt & Daten

* **Schaltflächentext**: Beispiel: `SHOP-KOLLEKTION`
* **Schaltflächen-Link**: Füge eine interne oder externe URL ein

#### Farben

* **Hintergrundfarbe**: (z. B. `#FFFFFF`)
* **Textfarbe**: (z. B. `#000000`)

#### Stil

* **Abgerundete Ecken**: Passe den Randradius in `px`

> ⚠️ Schaltflächenbegrenzung: Du kannst pro Hero-Bereich nur 2 Schaltflächen hinzufügen.

***

### 🧩 Beispiel für Abschnittsstruktur

```
Hero
├── Schaltfläche 
└── Schaltfläche 
```

***

### **Brauchen Sie Hilfe?**

* 💬 **Treten Sie unserer Community auf Discord bei:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Schreiben Sie uns eine E-Mail an:** <support@openspaces.design>
* 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website


---

# 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://docs.openspaces.design/german/readme-1/sections-and-features/hero-section.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.