HeroCMS
Kostenlos testen
Referenz

HeroML

Deutsch English

Tutorial: a magazine home page

This tutorial builds a magazine-style home page step by step: a large lead, a focus grid, a main area with a sidebar and a newsletter call to action. You edit the home template of the active design (Admin → Design).

Step 1 — the lead (hero)

The hero block opens the page with a title, a subtitle and calls to action. Nested button blocks become buttons.

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: #
Result ↓

Das Reisemagazin

Langsame Geschichten aus nahen und fernen Orten — sorgfältig erzählt und fotografiert.

Aktuelle Ausgabe Themen

Step 2 — ad banner

An ad slot follows right below the lead. The ad block loads its code from the settings; if none is configured, a placeholder appears.

ad slot=header format=leaderboard
Result ↓

Step 3 — a “featured” grid

A grid places the cover story (a wide cell) next to smaller posts. cell span=2 makes a cell span two columns.

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 C
Result ↓

Eine schmale Spalte daneben.

Zelle A

Zelle B

Zelle C

Step 4 — main area with sidebar

The heart of a magazine: a post list next to a sidebar. with-sidebar splits the area; everything except the sidebar block forms the main column. Here the sidebar is dynamic — it automatically shows the latest posts and the categories.

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=rectangle
Result ↓

Aus der Redaktion

48 Stunden in Palermo

Jun 2, 2026 · Lena Vogt

Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …

Weiterlesen →

Die neue Welle des Kaffees

May 28, 2026 · Ben Roth

Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …

Weiterlesen →

Step 5 — newsletter call to action

A cta block closes the page with a clear call to action.

cta
  title: Keine Ausgabe verpassen
  sub: Der Newsletter fasst die besten Geschichten des Monats zusammen.
  button variant=primary
    label: Abonnieren
    href: #
Result ↓

Keine Ausgabe verpassen

Der Newsletter fasst die besten Geschichten des Monats zusammen.

Abonnieren

The result

All building blocks combined make the finished magazine home page:

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: #
Result ↓

Das Reisemagazin

Langsame Geschichten aus nahen und fernen Orten.

Aktuelle Ausgabe

Im Fokus

48 Stunden in Palermo

Streetfood, Barock und das Meer — ein intensives Wochenende.

Neueste Geschichten

48 Stunden in Palermo

Jun 2, 2026 · Lena Vogt

Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …

Weiterlesen →

Die neue Welle des Kaffees

May 28, 2026 · Ben Roth

Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …

Weiterlesen →

Analog fotografieren im Piemont

May 19, 2026 · Mara Kern

Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …

Weiterlesen →

Keine Ausgabe verpassen

Der Newsletter fasst die besten Geschichten des Monats zusammen.

Abonnieren
The post lists and sidebar widgets fill automatically from the published content — the template stays the same no matter how many posts are added.