Hero-Klassen in Grav CMS
30th Sep 2022 | Adrian Coroi

Das Grav CMS Standardtheme bietet die Möglichkeit Standardoptionen zu überschreiben, indem es den Benutzern erlaubt besondere CSS Klassen für jede Seite festzulegen. Die Theme wird die Kombination der Standardwerte mit dem body_classes-Set zusammenführen. Auf diese Weise können Sie ganz einfach Hero-Klassen hinzufügen, um Ihren Blogbeitrag etwas interessanter zu gestalten.

Body-Klassen

body_classes: "header-dark header-transparent"

Mit dieser Zeile wird sichergestellt, dass auf der Seite body_classes aktiviert sind.

Hero-Klassen

Das Hero-Template erlaubt es, einige Optionen in der Frontmatter der Seite festzulegen. Das wird vom modularen Hero sowie den Blog- und Artikelvorlagen genutzt, um einen dynamischeren Header zu erstellen.

hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large
img_main: road.jpg
hero_align: center

Die Option hero_classes ermöglicht es, eine Vielzahl von Hero-Klassen dynamisch festzulegen, darunter:

• text-lighttext-dark - Steuert, ob der Text je nach Inhalt hell oder dunkel sein soll
• title-h1h2 - Erzwingt eine eng übereinstimmende h1/h2-Titelpaarung
• parallax - Aktiviert einen CSS-gestützten Parallax-Effekt
• overlay-dark-gradient - Zeigt einen transparenten Farbverlauf an, der das darunter liegende Bild weiter abdunkelt
• overlay-light-gradient - Zeigt einen transparenten Farbverlauf an, der das darunter liegende Bild weiter aufhellt
• overlay-dark - Zeigt eine solide transparente Überlagerung an, die das darunter liegende Bild weiter abdunkelt
• overlay-light - Zeigt eine solide transparente Überlagerung an, die das darunter liegende Bild weiter abdunkelt
• hero-fullscreenhero-largehero-mediumhero-smallhero-tiny - Größe des Heldenblocks

Das img_main sollte auf eine Bilddatei im aktuellen Seitenordner verweisen.