48 Stunden in Palermo
Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …
Weiterlesen →Tutorial: eine Magazin-Startseite
Dieses Tutorial baut Schritt für Schritt eine Startseite im Magazin-Stil auf: großer Aufmacher, ein Fokus-Raster, ein Hauptbereich mit Sidebar und ein Newsletter-Aufruf. Bearbeitet wird das Template home des aktiven Designs (Admin → Design).
Schritt 1 — Aufmacher (Hero)
Der hero-Block eröffnet die Seite mit Titel, Unterzeile und Handlungsaufforderungen. Untergeordnete button-Blöcke werden zu Schaltflächen.
hero
headline: Das Reisemagazin
sub: Langsame Geschichten aus nahen und fernen Orten — sorgfältig erzählt und fotografiert.
button variant=primary
label: Aktuelle Ausgabe
href: #
button variant=ghost
label: Themen
href: #Ergebnis ↓
Das Reisemagazin
Langsame Geschichten aus nahen und fernen Orten — sorgfältig erzählt und fotografiert.
Schritt 2 — Werbebanner
Direkt unter dem Aufmacher folgt ein Werbeplatz. Der ad-Block lädt seinen Code aus den Einstellungen; ist keiner hinterlegt, erscheint ein Platzhalter.
ad slot=header format=leaderboardErgebnis ↓
Anzeige
728 × 90 — Ihr Banner
Schritt 3 — „Im Fokus" als Raster
Ein grid ordnet die Titelgeschichte (breite Zelle) neben kleineren Beiträgen an. cell span=2 lässt eine Zelle zwei Spalten überspannen.
grid cols=3 gap=large
cell span=2
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ea580c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237c2d12%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3Espan%202%3C%2Ftext%3E%3C%2Fsvg%3E
paragraph
text: Eine schmale Spalte daneben.
paragraph
text: Zelle A
paragraph
text: Zelle B
paragraph
text: Zelle CErgebnis ↓
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3Espan%202%3C%2Ftext%3E%3C%2Fsvg%3E)
Eine schmale Spalte daneben.
Zelle A
Zelle B
Zelle C
Schritt 4 — Hauptbereich mit Sidebar
Der Kern eines Magazins: eine Beitragsliste neben einer Sidebar. with-sidebar teilt den Bereich; alles außer dem sidebar-Block bildet die Hauptspalte. Die Sidebar ist hier dynamisch — sie zeigt automatisch die neuesten Beiträge und die Kategorien.
with-sidebar side=right width=280
heading level=2
text: Aus der Redaktion
posts excerpt=18
sidebar sticky
recent-posts count=4
category-list
ad slot=sidebar format=rectangleErgebnis ↓
Schritt 5 — Newsletter-Aufruf
Ein cta-Block schließt die Seite mit einer klaren Handlungsaufforderung ab.
cta
title: Keine Ausgabe verpassen
sub: Der Newsletter fasst die besten Geschichten des Monats zusammen.
button variant=primary
label: Abonnieren
href: #Ergebnis ↓
Das Ergebnis
Alle Bausteine zusammengesetzt ergeben die fertige Magazin-Startseite:
section
hero
headline: Das Reisemagazin
sub: Langsame Geschichten aus nahen und fernen Orten.
button variant=primary
label: Aktuelle Ausgabe
href: #
ad slot=header format=leaderboard
section
heading level=2
text: Im Fokus
grid cols=3 gap=large
cell span=2
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ea580c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237c2d12%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3ETitelgeschichte%3C%2Ftext%3E%3C%2Fsvg%3E
heading level=3
text: 48 Stunden in Palermo
paragraph
text: Streetfood, Barock und das Meer — ein intensives Wochenende.
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230d9488%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23134e4a%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EKaffee%3C%2Ftext%3E%3C%2Fsvg%3E
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237c3aed%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234c1d95%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EAnalog%3C%2Ftext%3E%3C%2Fsvg%3E
with-sidebar side=right width=300
heading level=2
text: Neueste Geschichten
posts excerpt=20
sidebar sticky
recent-posts count=4
category-list
ad slot=sidebar format=rectangle
cta
title: Keine Ausgabe verpassen
sub: Der Newsletter fasst die besten Geschichten des Monats zusammen.
button variant=primary
label: Abonnieren
href: #Ergebnis ↓
Anzeige
728 × 90 — Ihr Banner
Im Fokus
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3ETitelgeschichte%3C%2Ftext%3E%3C%2Fsvg%3E)
48 Stunden in Palermo
Streetfood, Barock und das Meer — ein intensives Wochenende.
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EKaffee%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EAnalog%3C%2Ftext%3E%3C%2Fsvg%3E)
Die Beitragslisten und Sidebar-Widgets füllen sich automatisch mit den veröffentlichten Inhalten — das Template bleibt unverändert, egal wie viele Beiträge hinzukommen.