Hero Builder — Live Configurator

Hero Builder HTML Template

Compatible with Skilljar's HTML sections in pages, courses, and lessons.

Hero Builder Widget

Build a fully custom hero section for the top of your Skilljar catalog page. Background and content position are controlled independently, so you can mix any background style with any text placement. Copy the finished code into the HTML source editor when you're ready.

Layout Presets

Quick layouts (sets position, size, spacing & background)

Eyebrow (optional)

Headline

Subheadline (optional)

Button label (optional)

Button URL

Content image URL (optional)

Background image URL

Colors

Preset themes

Text

Eyebrow accent

Button bg

Button text

Hover bg

Hover text

Typography

Font family

Content Layout

Horizontal position

Vertical position

Content max-width px

Content Image

Image position

Background

Background style

Background color

Font Sizes

Eyebrow px

Headline px

Subheadline px

Size

Minimum height px

Section Padding (px)

Top

Bottom

Left & right (px — min 30 unless centered)

Section Margin (px)

Top

Bottom

Content Spacing — below each element (px)

Below eyebrow

Below headline

Below subheadline

Live Preview

✓ Saved

Extend this template with AI Prompts

Your config handles the basics. Use these prompts to extend the template with features the configurator can't do. Paste your generated code + one of these prompts into Claude or ChatGPT.

Before you paste a prompt: grab the AI context file from Lesson 1 of the AI with Skilljar course and paste it into your AI chat. This will teach it the Skilljar HTML, CSS, and JS rules.

✦

Add a background video

Here is an HTML hero section template with a background image. Replace the background image with a looped, muted, autoplaying background video using this URL: [YOUR_VIDEO_URL]. Keep the existing overlay/tint and text on top. Return only the updated HTML.

Copy

✦

Add a search bar to the hero

Here is an HTML hero section template. Below the subheadline and above the button, add a rounded search input with a magnifying glass icon and placeholder text "Search courses...". Style it to match the existing color scheme. Return only the updated HTML.

Copy

✦

Add a secondary button

Here is an HTML hero section template. Next to the existing button, add a second outlined button with transparent background, 2px border in the text color, and the same text color. Label it "[Secondary Label]" and link it to "[URL]". Return only the updated HTML.

Copy

✦

Add a scroll-down indicator

Here is an HTML hero section template. At the bottom center of the section, add a small bouncing down-chevron icon that smooth-scrolls to the next section on click when the following section has id="next-section". Return only the updated HTML.

Copy

Live Preview

Paste into the HTML source editor on your Skilljar catalog page