Process Cards

What It Does

Displays numbered process steps as cards that stick to the top of the screen as you scroll, creating an engaging way to walk visitors through your workflow.

When to Use It

• How It Works sections explaining your service process
• Onboarding flows showing steps to get started
• Project methodology explanations
• Order/purchase process breakdowns
• Implementation guides or setup instructions

How to Add This Module

1. In the page builder, find "VN Process Cards V2" 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

Process Cards

A repeater where you add each step (minimum 3, maximum 6, starts with 4).

Setting	What It Does	Options
Card Title	The heading for this process step	Text (e.g., "Discovery Call")
Card Content	Rich text describing what happens in this step	Rich text editor

Style Tab

Title Styles

Setting	What It Does	Options
Heading Level	HTML tag for SEO purposes	H2, H3, H4, H5, H6
Heading Size	Visual size of the title	Extra Small, Small, Default, Large
Heading Color	Color of the title text	Black, White, Primary

Content Styles

Setting	What It Does	Options
Text Color	Color of the body content	Black, White
Text Size	Size of the body text	Extra Small, Small, Medium, Large, Extra Large

Counter Styles

Setting	What It Does	Options
Counter Size	Size of the numbered badges	Small (32px), Default (40px), Large (48px)

Sticky Behavior

Setting	What It Does	Options
Enable Sticky Behavior	Cards stick as user scrolls (disabled on mobile)	On/Off (default: On)
Sticky Offset	Distance from top when card is stuck	0 to 200 pixels (default: 80px)

Example Setups

Example 1: Service Process (4 Steps)

1. Add 4 process cards:
   • Card 1: Title: "Discovery", Content: "We start by understanding your business goals and challenges through a detailed consultation."
   • Card 2: Title: "Strategy", Content: "Our team develops a customized approach tailored to your specific needs and objectives."
   • Card 3: Title: "Implementation", Content: "We execute the plan with precision, keeping you informed at every milestone."
   • Card 4: Title: "Optimization", Content: "We continuously refine and improve based on results and feedback."
2. In Style > Title Styles:
   • Heading Level: H3
   • Heading Size: Default
3. In Style > Sticky Behavior:
   • Enable Sticky Behavior: On
   • Sticky Offset: 80px

Example 2: Simple 3-Step Onboarding

1. Add 3 process cards:
   • Card 1: Title: "Sign Up", Content: "Create your account in under 2 minutes with just your email."
   • Card 2: Title: "Configure", Content: "Set up your preferences and connect your existing tools."
   • Card 3: Title: "Launch", Content: "You're ready to go! Start using the platform immediately."
2. Keep descriptions short and action-oriented
3. In Style > Counter Styles:
   • Counter Size: Large (for emphasis)

Example 3: Detailed Methodology (6 Steps)

1. Add 6 process cards with longer descriptions
2. Use bullet points in Card Content for detailed steps
3. In Style > Sticky Behavior:
   • Sticky Offset: 100px (account for navigation height)

Tips

• Use 3-5 steps for best readability - more than 6 becomes overwhelming
• Keep card titles to 1-3 words for scannability
• Start each title with an action verb when possible (Discover, Plan, Build, Launch)
• Use consistent content length across all cards for balanced appearance
• The sticky behavior creates an engaging scroll experience on desktop
• Sticky behavior automatically disables on mobile for better usability
• Adjust Sticky Offset if you have a fixed navigation bar to prevent overlap
• Number badges appear automatically - no need to type "Step 1" in your titles