# Anlegen der Startseite

# Startseite anlegen

Für die Startseite wird ein neues Layout angelegt und nach Wunsch werden Inhalte hinterlegt. Wir geben dir hierzu gerne Tipps wie es stimmig aussieht. Auf dieser Seite erfährst du wie wir die Startseite unserer Live Demo „Möbel Max” angelegt haben

# Neues Layout anlegen

1. Navigiere nach „Inhalte -> Erlebniswelten”
2. Klicke oben rechts im Bildschirm auf „Neues Layout anlegen”
3. Wähle im Modal „Landingpage” in „voller Breite” aus
4. Gebe z.B. den Namen „Homepage” oder „Startseite” an
5. Klicke „Layout erstellen”

# Blöcke hinterlegen

Dieser Punkt ist ganz individuell je Shop zu sehen. Wir bauen hier lediglich unsere Demo nach. Es heißt nicht, dass dieses Layout 1:1 übernommen werden muss

Hinterlege die Blöcke so wie es in deinem Shop am Besten aussieht. Wir haben bei der „Möbel Max” Demo folgenden Aufbau:

1. image: Bilder -> Bild, zentriert
2. image-three-colum: Bilder -> Drei Spalten, zentriert
3. text: Text -> Text
4. text: Text -> Text
5. image: Bilder -> Bild, zentriert (Mobile only)
6. image: Bilder -> Bild, zentriert
7. product-slider: Commerce -> Produkt-Slider
8. text: Text -> Text
9. image: Bilder -> Bild, zentriert (Mobile only)
10. image: Bilder -> Bild, zentriert
11. product-slider: Commerce -> Produkt-Slider
12. image: Bilder -> Bild, zentriert
13. text-teaser-section: Text & Bild -> Zwei Spalten, zentriertes Bild & Text
14. text: Text -> Text

# Abstände anpassen

1. Setze die Abstände für jeden Block wie in „Block Abstände” beschrieben
2. Nach jedem Abschnitt, z.B. oberen Bereich mit den Bildern zu dem darunter liegenden Text Bereich „Zeitlose Eleganz Entdecken Sie den Stuhl Manny” den Abstand nach unten verdoppeln. Also Unterer Abstand 40px

# Bilder optimieren

Damit die Bilder anspruchsvoller aussehen, haben wir diese in den beiden Demos mit den in „Block Abstände” definierten CSS-Klassen ergänzt

Wir haben sämtliche Bilder auf der Seite mit den Klassen cms-custom-helper-theme-image-with-hover cms-custom-helper-theme-image-with-shadow ausgestattet

1. Bearbeite die oberen beiden Bilder-Reihen indem du einen der Blöcke per Mausklick anklickst
2. Im rechtsbündigen Erlebniswelten Menü nun die Block Einstellungen öffnen
3. Unter „Layout -> CSS-Klassen” die CSS-Klassen cms-custom-helper-theme-image-with-hover cms-custom-helper-theme-image-with-shadow hinterlegen
4. Wiederhole dies bei den anderen Bildelementen

# Individuelle HTML Blöcke

In diesem Abschnitt behandeln wir die individuellen Bereiche wie z.B. „Zeitlose Eleganz Entdecken Sie den Stuhl Manny”. Hierfür sind Text-Bereiche notwendig, in denen wir custom HTML schreiben. Dazu kannst du dir die unten zur Verfügung gestellten Templates einbauen

1. Lade aus der Liste unten einen der HTML-Codes herunter
2. Füge den HTML-Code nun in dem Bearbeitungsmodus vom Text-Editor hinzu
3. Editiere sämtliche mit dem [] getagten Bereiche in den HTML-Codes:
   • [HEADLINE]
   • [SUB-HEADLINE]
   • [DESCRIPTION-TEXT]
   • [MORE-DETAILS-LINK]
   • [MORE-DETAILS-BUTTON-TEXT]
   • [IMAGE-LINK]
   • [BRAND-IMAGE-LINK-1] (bzw. [BRAND-IMAGE-LINK-{i}])
   • [MANUFACTURER-1-TITLE] (bzw. [MANUFACTURER-{i}-TITLE])
4. Speichere und schaue im Storefront ob alles wie gewünscht ist

Hinweis: Bilder können ganz wie gehabt über „Inhalte -> Medien -> Erlebniswelten” hochgeladen werden und die Links dann im HTML Code verbaut werden

Als Alternative zu dem HTML-Code empfehlen wir Plugins zu verwenden, die die Erlebniswelten ergänzen: Erlebniswelten Erweiterungen - Shopware Store