> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/german/plain-jane-interactive/sections-and-features/hero-section.md). # 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 *** ### 🧩 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:** * 📧 **Schreiben Sie uns eine E-Mail an:** * 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.openspaces.design/german/plain-jane-interactive/sections-and-features/hero-section.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.