Building a Hero Section

What You'll Build

A compelling page introduction with a headline, supporting text, and a call-to-action button. This creates an 80/20 layout with content on the left and button on the right.

Before You Start

• Have your page headline ready
• Know what action you want visitors to take (for the button)
• Prepare any supporting copy that explains your value proposition

Step-by-Step Instructions

Step 1: Add the VN Intro Section Module

1. In the page editor, click the Add button in your desired section
2. Search for VN Intro Section
3. Click to add it to your page

What you'll see: A content panel with fields for heading, body text, and button.

Step 2: Enter Your Headline

1. Find the Heading Text field in the Intro Content group
2. Type your main headline
3. Select the appropriate Heading Level (use H1 for the main page title, H2 for section introductions)
4. Choose a Heading Color (black or white, depending on your background)

What you'll see: Your headline appears in the preview with proper styling.

Step 3: Add Your Supporting Copy

1. Locate the Body Copy rich text field
2. Enter 1-3 sentences that explain your value proposition
3. Keep it concise and action-oriented
4. Use the Text Color option if needed (black or white)

What you'll see: Your body text appears below the headline.

Step 4: Configure the Call-to-Action Button

1. Toggle Show Button to ON (enabled by default)
2. Fill in the Button Text (e.g., "Get Started", "Learn More", "Contact Us")
3. Set the Button Link:
   • Click the link field
   • Enter the URL or select a page
   • Choose whether to open in a new tab
4. Select a Button Style:
   • Gradient: Orange gradient outline (recommended for primary CTAs)
   • Primary: Solid filled button
   • Ghost: Transparent with border
5. Choose a Button Size (Small, Medium, or Large)

What you'll see: Your button appears aligned to the right on desktop, below content on mobile.

Step 5: Adjust Spacing (Optional)

1. Switch to the Style tab in the module panel
2. Open Padding controls
3. Choose a padding mode (none, preset, or custom)
4. Adjust top and bottom spacing as needed

Common Settings

Setting	What It Does	Recommended Value
Heading Level	Sets the HTML semantic level	H1 for main page title, H2 for sections
Heading Color	Text color for the headline	Match your background (black on light, white on dark)
Button Style	Visual appearance of the CTA	Gradient for primary actions
Button Size	How large the button appears	Medium (M) for most cases, Large (L) for hero sections
Show Button	Toggle button visibility	ON for pages with clear CTAs

Tips and Best Practices

• Keep headlines under 10 words for maximum impact
• Use action verbs in button text ("Get", "Start", "Discover")
• Limit body copy to 2-3 sentences to maintain scannability
• Use H1 only once per page (typically in your main hero)
• Test how your section looks on mobile devices

Troubleshooting

Problem: Button text is too long and wraps awkwardly. Solution: Shorten your button text to 2-3 words maximum.

Problem: Text is hard to read on the background. Solution: Change the Heading Color and Text Color settings to contrast with your background.

Problem: Section looks cramped or too spread out. Solution: Adjust the Padding settings in the Style tab to add more or less vertical space.

Problem: Button does not appear. Solution: Check that the "Show Button" toggle is enabled in the Intro Content group.