Dies ist der erste Absatz eines Blog-Posts. Er simuliert exakt was Workflow v2 aus Notion liefern wird: reines HTML ohne inline-Styles, ohne Bootstrap-Farben, ohne Elementor-Widgets. Nur saubere semantische Tags im .dynamic-blogpost Wrapper.
Was du aus diesem Test lernen solltest
Diese Sektion testet die Hauptüberschrift. Sie sollte in Poppins SemiBold, mit sichtbarem Gold-Unterstrich, und klarer Größe (36px Desktop) erscheinen. Der Absatztext darunter ist in Nunito Sans 20px mit 1.65 Line-Height.
Ein zweiter Absatz zur Demonstration der Leseweite (680px). Auf breiten Screens ist der Text zentriert in einer lesbaren Spaltenbreite. Das ist der Apple/Medium-Standard für komfortables Lesen über mehrere Sätze und Paragraphen hinweg ohne dass das Auge zu weit springen muss.
Eine Unter-Überschrift
H3 ist eine Stufe kleiner (32px Desktop) und hat einen dezenteren Gold-Unterstrich. Die Hierarchie zu H2 muss sofort erkennbar sein.
- Erster Punkt: Mit fettem Label und normalem Fließtext dahinter. Wird vom Leser als Aufzählung mit Link wahrgenommen.
- Zweiter Punkt: Ohne externe Verweise, nur Text. Listen-Marker sollten goldfarben sein.
- Dritter Punkt: Testet ob mehrere Gold-Links in einer Zeile sauber rendern ohne die Typografie zu zerschießen.
Das ist eine Callout-Box
Ein Callout wird für wichtige Hinweise verwendet. Er hat einen Gold-Border links, einen dezenten Gold-Tint im Hintergrund, und die H2 innen ist kleiner als eine Standalone-H2 (22-28px). Links in Callouts bleiben gold, aber strong-Labels sind weiß (nicht gold-überladen).
- Punkt in Callout: Labels weiß, Links gold.
- Zweiter Punkt: Konsistent.
Zweite Haupt-Sektion
Eine zweite H2 testet den Abstand zwischen Sektionen. Margin-Top 80px sollte ausreichend Luft geben ohne übertrieben zu sein.
Ein Zitat ist ein Blockquote-Element. Es hat einen Glass-Morphism-Hintergrund, einen 4px breiten Gold-Border-Left, und großzügiges Padding. Zitate sind visuelle Pausen im Text die Aufmerksamkeit lenken.
Die Gold-Box
Die gold-box ist stärker betont als der Callout. Sie hat einen Gold-Gradient-Background und wird für Key-Facts oder besondere Hervorhebungen verwendet. Der H2 innen ist goldfarben (nicht weiß).
- Erster Key-Fact
- Zweiter Key-Fact
- Dritter Key-Fact mit Link zur Startseite
Abschluss
Der letzte Absatz testet den Übergang zum Ende. Wenn dieser Post auf https://freivonx.de/vorlage-test-v822/ sauber aussieht, ist die Vorlage für Workflow v2 fertig und alle 18 Legacy-Posts können darüber regeneriert werden.
