Startseite Komplette Struktur
Startseite: Komplette Struktur f\u00fcr „Zwei auf 4 R\u00e4dern“
Diese Anleitung zeigt dir, wie du die perfekte Startseite f\u00fcr deinen Reiseblog aufbaust â Abschnitt f\u00fcr Abschnitt.
\ud83d\udccd Abschnitt 1: Hero-Sektion (ganz oben)
Element: Custom HTML Block
Inhalt: Verwende den Code aus Beitrag „Startseite Hero“ (ID 134)
Einstellungen:
- Volle Breite: Ja
- Hintergrund: Header-Bild + Farbverlauf
- Text: Wei\u00df, zentriert
- Buttons: „Unsere Reise“ (Terrakotta) und „Reisetagebuch“ (transparent mit wei\u00dfem Rahmen)
H\u00f6he: 60-80 VH (Viewport Height)
\ud83d\udcdd Abschnitt 2: Neueste Geschichten
Element: Kadence Post Grid Block
Einstellungen:
- Anzahl: 3 Beitr\u00e4ge
- Layout: Grid (Raster)
- Spalten: 3 (Desktop), 2 (Tablet), 1 (Mobile)
- Zeige: Beitragsbild, Titel, Auszug, Datum, Kategorie
- Orderby: Datum (neueste zuerst)
\u00dcberschrift: „Neueste Geschichten“ (H2, zentriert, Petrol #1B3A4B)
Einleitungstext: „Hier findest du unsere aktuellen Berichte von unterwegs â von der Vorbereitung bis zu den ersten Etappen unserer Weltreise.“ (zentriert, Grau #555)
\ud83c\udf0d Abschnitt 3: Was dich hier erwartet
Element: 4-Spalten Grid mit Icons/Boxen
Layout: 4 Boxen nebeneinander (Desktop), 2 (Tablet), 1 (Mobile)
Inhalt pro Box:
- Reisetagebuch â Pers\u00f6nliche Geschichten aus jedem Land
- Wohnmobil & Technik â Fahrzeug, Ausbau, Energieversorgung
- Reiseziele & Routen â Tipps zu L\u00e4ndern, Grenzen, Stellpl\u00e4tzen
- Unterwegs â Visa, Budget, Sicherheit, Internet
Design:
- Hintergrund jeder Box: #F9F8F6 (Off-White)
- Border-Radius: 8px
- Shadow: 0 2px 15px rgba(0,0,0,0.08)
- Padding: 2rem
- \u00dcberschrift: Petrol (#1B3A4B), 1.3rem, fett
- Text: Grau (#555), 1rem
\ud83d\udce7 Abschnitt 4: Newsletter-Anmeldung
Element: Custom HTML Block (oder Newsletter-Plugin Block)
Inhalt: Verwende den Code aus Beitrag „Newsletter-Anmeldung Code“ (ID 204)
\u00dcberschrift: „Keine Etappe verpassen“ (H3, Petrol)
Text: „Trag dich in unseren Newsletter ein und erhalte Reisebriefe, neue Routen und ehrliche Erfahrungen direkt aus dem Wohnmobil.“
Formular:
- Feld 1: Name (Text)
- Feld 2: E-Mail (Email)
- Button: „Anmelden“ (Terrakotta #D97B4E)
- Hinweis: „Kein Spam. Jederzeit abbestellbar.“
Design:
- Hintergrund: #F9F8F6
- Border-Left: 4px solid #D97B4E (Terrakotta)
- Padding: 2rem
- Max-Breite: 600px, zentriert
\ud83d\udcf1 Abschnitt 5: Social-Media-Links
Element: Custom HTML Block
Inhalt: Verwende den Code aus Beitrag „Social Media Links Code“ (ID 205)
\u00dcberschrift: „Folge uns“ (H3, Petrol)
Text: „Begleite uns auch auf Social Media f\u00fcr t\u00e4gliche Updates, Stories und Fotos von unterwegs.“
Buttons:
- Instagram (Gradient: Orange-Pink-Rot)
- YouTube (Rot #FF0000)
- Facebook (Blau #1877F2) â optional
Wichtig: Ersetze [dein-handle] und [dein-kanal] durch deine echten Social-Media-Adressen!
\ud83d\uddfa\ufe0f Abschnitt 6: Unsere Route (Karte)
Element: Custom HTML Block (iframe)
\u00dcberschrift: „Unsere Route“ (H2, zentriert, Petrol)
Einleitung: „Folge unserer Weltreise auf der interaktiven Karte â von Start bis Ziel und allen Etappen dazwischen.“ (zentriert, Grau)
Inhalt: Google My Maps iframe (siehe Beitrag ID 207)
Beispiel-Code:
<iframe src="https://www.google.com/maps/d/embed?mid=DEINE_MAP_ID" width="100%" height="580" style="border:0; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);" allowfullscreen="" loading="lazy"></iframe>
Design:
- Breite: 100%
- H\u00f6he: 500-600px
- Border-Radius: 8px
- Shadow: 0 4px 20px rgba(0,0,0,0.1)
\ud83c\udf89 Abschnitt 7: Begleite uns (Abschluss)
Element: Call-to-Action Box
Hintergrund: Farbverlauf Petrol (#1B3A4B zu #2C5263)
\u00dcberschrift: „Begleite uns“ (H2, wei\u00df, zentriert)
Text: „Diese Website w\u00e4chst mit jeder Etappe. Trag dich gerne in unseren Newsletter ein oder folge uns auf Social Media, um keine neue Geschichte zu verpassen.“ (wei\u00df, zentriert, max. 600px)
Padding: 3rem oben/unten
Border-Radius: 12px
\ud83d\udee0\ufe0f Umsetzung in WordPress
Schritt-f\u00fcr-Schritt:
- \u00d6ffne die Seite „Startseite“ im WordPress Editor
- L\u00f6sche vorhandenen Inhalt (falls vorhanden)
- F\u00fcge Abschnitt f\u00fcr Abschnitt hinzu:
- Abschnitt 1: Custom HTML (Hero-Code aus ID 134)
- Abschnitt 2: Kadence Post Grid Block
- Abschnitt 3: 4-Spalten Grid (Kadence Row Layout oder Columns Block)
- Abschnitt 4: Custom HTML (Newsletter-Code aus ID 204)
- Abschnitt 5: Custom HTML (Social-Media-Code aus ID 205)
- Abschnitt 6: Custom HTML (Google Maps iframe)
- Abschnitt 7: Custom HTML oder Cover Block (CTA Box)
- Speichern und Vorschau pr\u00fcfen
\u2705 Checkliste vor Ver\u00f6ffentlichung
- [ ] Hero-Bild korrekt angezeigt?
- [ ] Alle Buttons klickbar?
- [ ] Newsletter-Formular funktioniert?
- [ ] Social-Media-Links korrekt?
- [ ] Karte wird geladen?
- [ ] Mobile Ansicht gepr\u00fcft?
- [ ] Ladezeit im akzeptablen Bereich?
\ud83c\udfaf Tipps f\u00fcr optimale Performance
- Bilder komprimieren: Max. 200KB pro Bild
- Lazy Loading: F\u00fcr alle Bilder aktivieren
- Caching: Caching-Plugin installieren
- CDN: Optional f\u00fcr schnellere Ladezeiten weltweit
Viel Erfolg beim Aufbau deiner perfekten Startseite! \ud83d\ude80