#hero-1..5 — course hero layouts

The top of a course page is its hero — the large banner presenting the title, description, and key details. The theme ships five distinct hero layouts, and you choose which one a course uses with a single internal tag, #hero-1 through #hero-5. This lets you vary the look across courses without editing any templates.

The five layouts each suit different content:

#hero-1   Two-column: details left, media right   (default)
#hero-2   Centered: large title over a pattern background
#hero-3   Image-forward: feature image with overlaid details
#hero-4   Compact bar with a stats row (lessons, level, duration)
#hero-5   Video hero: the first content video plays inline on click

Apply exactly one #hero-* tag to the course landing post. If you omit it, the theme falls back to #hero-1, the two-column default, so a course always renders a sensible hero even untagged. The choice is purely presentational and can be changed at any time by swapping the tag.

Pick the layout to match the course's assets and emphasis. Use #hero-3 or #hero-1 when you have a strong feature image; note that image-forward layouts depend on #show-image (see the image-visibility doc) to actually display the picture. Use #hero-2 for a clean, text-led course with no hero image. Use #hero-4 when you want to foreground the stats — number of lessons, level, and duration — as the main draw. Use #hero-5 for video-first courses, where the opening lesson's video becomes the hero and plays inline.

Because the hero tag interacts with the image-visibility tags, decide them together: an image-forward hero with #hide-image will simply fall back to an icon or gradient. To apply, add the chosen #hero-* tag in Ghost Admin and publish. Experiment freely — swapping the tag re-renders the hero with no other changes needed. The next docs cover the lesson-type and image-visibility tags that round out presentation.