Process Timeline Split

What It Does

Creates a full-height two-column layout where the left side stays fixed (sticky) while visitors scroll through a numbered process timeline on the right side.

When to Use It

• Detailed process explanations requiring context and steps
• Methodology pages where you want to explain "why" while showing "how"
• Service breakdowns with an overview and step-by-step details
• Product tours combining a value proposition with feature walkthrough
• Landing pages that need an immersive, scroll-driven experience

How to Add This Module

1. In the page builder, find "Process Timeline Split" 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

Left Column (Body Stack)

The sticky content area that stays visible as users scroll.

Setting	What It Does	Options
Enable Sticky Vertical Centering	Keep left column centered while scrolling through timeline	On/Off (default: On)
Vertical Position	Where content sits when sticky	Top (25%), Center (50%), Bottom (75%)

Show/Hide Elements

Setting	What It Does	Options
Show Icon Heading	Display small icon heading above main heading	On/Off
Show Main Heading	Display the primary heading	On/Off
Show Body Content	Display the description text	On/Off
Show Toggles	Display collapsible FAQ sections	On/Off
Show Button	Display call-to-action button	On/Off

Icon Heading (when enabled)

Setting	What It Does	Options
Heading Text	Small text above main heading	Text
Icon	Icon displayed next to the heading	Icon picker

Main Heading

Setting	What It Does	Options
Heading Text	Primary heading (e.g., "Our Process")	Text
Heading Level	HTML tag for SEO	H1, H2, H3, H4, H5, H6
Uppercase	Display heading in all caps	On/Off
Heading Color	Text color	Black, White, Primary

Body Content

Setting	What It Does	Options
Content	Rich text description	Rich text editor
Text Color	Color of body text	Black, White
Text Size	Size of body text	XS, S, M, L, XL

Toggles (when enabled)

Setting	What It Does	Options
Toggle Items	Collapsible FAQ or detail sections	Repeater with heading and content

Call-to-Action Button

Setting	What It Does	Options
Button Text	Text on the button	Text (default: "Get Started")
Button Link	Where the button goes	Link picker
Button Style	Visual style	Gradient, Primary, Secondary, Outline
Button Size	Size of button	Small, Medium, Large

Spacing

Setting	What It Does	Options
Stack Gap	Space between elements in left column	XS, S, M, L, XL
Padding	Padding around the left column content	None, Uniform, or Custom per side

Right Column (Process Timeline)

The scrollable timeline with numbered steps.

Timeline Items

A repeater for each step (minimum 1, maximum 10, starts with 3).

Setting	What It Does	Options
Step Image	Optional image for this step	Upload or select from file manager
Step Heading	Title for this timeline step	Text
Step Description	Detailed description	Rich text

Counter Styling

Setting	What It Does	Options
Counter Size	Size of step number badges	Small, Medium, Large
Counter Color	Background color of badges	Color picker
Counter Position	Where numbers appear	Left Side, Right Side, Above Content

Style Tab

Layout Settings

Setting	What It Does	Options
Column Gap	Space between left and right columns	XS, S, M, L, XL, 2XL
Mobile Stack Breakpoint	When columns stack vertically	Small Mobile (480px), Tablet (768px), Small Desktop (1024px), Never Stack
Mobile Stack Order	Order when stacked on mobile	Body Stack First, Timeline First
Container Height	Height of the entire module	Auto, Full Viewport (100vh), Full Small Viewport (100svh), 75% Viewport

Design Settings

Setting	What It Does	Options
Background Style	Background color or gradient	White, Light Gray, Dark, Gradient, etc.

Module Padding

Setting	What It Does	Options
Desktop Block Padding	Top/bottom padding on desktop	None to 2XL
Desktop Inline Padding	Left/right padding on desktop	None to 2XL
Mobile overrides	Different padding for mobile	Same options

Example Setups

Example 1: Service Process Page

1. Left Column:
   • Icon Heading: "How We Work"
   • Main Heading: "Our Proven Process"
   • Body Content: "We've refined our methodology over 10 years to deliver consistent results for every client."
   • Button: "Schedule a Call"
2. Right Column Timeline (4 steps):
   • Step 1: "Discovery" - Initial consultation details
   • Step 2: "Planning" - Strategy development
   • Step 3: "Execution" - Implementation process
   • Step 4: "Delivery" - Final handoff
3. Style:
   • Container Height: Full Small Viewport (100svh)
   • Background Style: White

Example 2: Product Methodology

1. Left Column:
   • Show Icon Heading: Off
   • Main Heading: "Built Different"
   • Body Content: Brief value proposition
   • Show Toggles: On (add 2-3 FAQ items)
   • Button: "Try It Free"
2. Right Column Timeline (5 steps):
   • Add your product workflow steps
   • Include screenshots as Step Images
3. Style:
   • Column Gap: XL
   • Container Height: Auto

Example 3: Mobile-First Design

1. Configure content as needed
2. Style > Layout Settings:
   • Mobile Stack Breakpoint: Tablet (768px)
   • Mobile Stack Order: Timeline First (show process first on mobile)
   • Container Height: Auto (let content determine height)

Tips

• The sticky left column creates an engaging "scroll story" experience on desktop
• Use Container Height: 100svh for a full-screen immersive section
• Keep left column content concise - it should be scannable while scrolling
• Add images to timeline steps to break up text-heavy processes
• Use the Icon Heading for category labels like "Our Process" or "How It Works"
• Toggle sections in the left column are great for FAQs related to the process
• On mobile, both columns stack vertically - choose the order that makes sense for your content
• Counter Position "Left Side" works best for left-to-right reading flow
• Use Medium or Large Counter Size for better visibility