VN Intro Section

What It Does

Creates a clean introduction section with a heading on the left and body text on the right, with an optional button, designed for introducing page sections.

When to Use It

• Starting a new page section with a clear heading and description
• Creating section dividers with context
• Adding a brief overview before detailed content
• Introducing features, services, or content areas

How to Add This Module

1. In the page builder, find "VN Intro Section" in the module list
2. Drag it to where you want it on the page
3. Click on it to open the settings panel

Settings Explained

Content Tab

Intro Content

Heading Settings

Setting	What It Does	Options
Heading Text	The main heading for the section	Any text
Heading Level	HTML heading level for SEO	h1, h2, h3, h4, h5, h6
Heading Color	Color of the heading text	Black, White

Body Copy Settings

Setting	What It Does	Options
Body Content	Rich text description	Formatted text
Text Color	Color of the body text	Black, White
Text Size	Size of the body text	Small, Medium, Large

Button Settings

Setting	What It Does	Options
Show Button	Display the call-to-action button	On/Off
Button Text	Text displayed on the button	Any text
Button Link	Where the button goes when clicked	URL, page, or file
Button Style	Visual appearance of the button	Gradient, Gradient Fill, Primary, Secondary, White, Black, Ghost
Button Size	Size of the button	Small, Medium, Large

Style Tab

Padding

Setting	What It Does	Options
Padding Mode	How to control spacing around content	No Padding, All Sides, Vertical & Horizontal, Individual Sides
Padding Values	Amount of spacing	None, Extra Small, Small, Medium, Large, Extra Large

Example Setups

Example 1: Section Introduction with CTA

1. Drag "VN Intro Section" to your page
2. Set Heading Text to "Our Services"
3. Set Heading Level to "h2"
4. Add body text: "Discover how our comprehensive suite of digital marketing services can help grow your business."
5. Turn ON Show Button
6. Set Button Text to "View All Services"
7. Link the button to your services page
8. Set Button Style to "Gradient"

Example 2: Simple Section Header

1. Drag "VN Intro Section" to your page
2. Set Heading Text to "Case Studies"
3. Set Heading Level to "h2"
4. Add body text describing what users will find in this section
5. Turn OFF Show Button
6. Adjust padding in Style tab for consistent spacing

Example 3: Dark Background Introduction

1. Drag "VN Intro Section" to your page
2. Set Heading Color to "White"
3. Set Text Color to "White"
4. Add your heading and body text
5. Turn ON Show Button
6. Set Button Style to "Ghost (On Black)" or "White"
7. Place this module inside a section with a dark background

Tips

• Use h2 for main section introductions; reserve h1 for the page title only
• Keep body text concise - this is an introduction, not the main content
• The button is optional; only include it when there's a clear action for users to take
• Match heading and text colors to your section's background (Black on light, White on dark)
• This module works well at the start of content sections to provide context before detailed content
• Use consistent heading levels throughout your page for better SEO and accessibility