Mobile-first design: The editor displays a mobile preview by default
because most funnel traffic comes from mobile devices. Your funnels
automatically work on all screen sizes.
Editor Interface
The Visual Editor has three main areas that work together:
Left Panel - Screens & Elements
Screens Tab- View all screens in your funnel
- Add new screens or groups
- Reorder by dragging
- See screen thumbnails
- Browse element categories
- Drag elements onto canvas
- Search for specific elements
- Access specialized components
Center - Canvas
Your live preview area:- Mobile device frame
- Real-time updates
- Interactive preview
- Visual feedback
Right Panel - Properties
Configure selected items:- Screen settings and metadata
- Element properties and styling
- Actions and triggers
Core Concepts
Version History
The Visual Editor automatically saves your work and maintains a complete version history. Access it using the version dropdown (e.g., “v12”) in the top toolbar.
- Auto-save: Changes are saved automatically as you work
- Version tracking: Each save creates a new version (v1, v2, v3…)
- Restore any version: Click the restore arrow to rollback to any previous save
- Current indicator: Shows which version you’re currently editing
- Timestamps: See exactly when each version was saved
Made a mistake? Use history to restore a previous version, then republish
to make it live. This is your safety net for any editing errors.
Screens
Screens are individual pages in your funnel. Each screen has its own URL path like/funnel-slug/screen-id. Always use descriptive screen IDs
(e.g., ‘welcome’, ‘benefits’, ‘checkout’) for clean URLs and better
analytics tracking.
Set screen types for analytics tracking:
- Default: Standard content screens
- Auth: Login or registration
- Checkout: Payment processing
- Finish: Success or confirmation
- Paywall: Pricing presentation
- Upsell: Additional offers
Screen types are for analytics only. They don’t change functionality
but help track conversion metrics like “Start to Paywall” rates.
Elements
Elements are the building blocks of your screens. Drag them from the left panel onto your canvas to build your funnel. Common Elements:- Text: Headlines, paragraphs, lists
- Button: Primary call-to-action
- Options: Single/multiple choice questions
- Image: Photos, graphics, logos
- Input: Form fields for data collection
- Checkout: Payment processing
- Visual styling (colors, fonts, spacing)
- Content (text, images, placeholders)
- Behavior (actions, conditions)
Actions & Triggers
Actions define what happens when users interact with elements. Triggers determine when actions execute.Common Actions
- Navigate to next/specific screen
- Show or hide elements
- Purchase a product
- Scroll to element
Trigger Examples
- Button click
- Option selected
- Timer completion
- Purchase success/failure
Different elements have different available triggers. A button has
“on press” while a timer might have “on timeout”. Check each element’s
documentation for specific triggers.
Building Your Funnel
Basic Workflow
1
Add screens
Start with screens for your funnel flow. Click “Add screen” to create
new pages for your journey.
2
Design with elements
Drag elements onto each screen. Build your layout with text, images,
buttons, and forms.
3
Configure actions
Set up navigation and interactions. Most commonly, buttons navigate
to the next screen.
4
Set screen types
Mark screens appropriately (Paywall, Checkout, etc.) for analytics
tracking.
5
Preview and test
Use Preview mode to test your funnel with sandbox payments before
going live.
Working with Groups
Groups organize screens and enable progress tracking: Organization- Group related screens (e.g., “Quiz Questions”, “Checkout Flow”)
- Collapse groups for cleaner navigation
- Reorder entire groups at once
- Each group becomes a progress point
- Users see completion as they advance
- Visual feedback improves conversion
Example: Three groups with 3 screens each shows 3 dots in the progress
bar. Completing group 2 fills the second dot.
Navigation Flow
How Screens Connect
Unlike traditional page builders, funnel screens aren’t directly linked. Instead, they follow a sequence with navigation controlled by actions. Default Flow:- Screens appear in the order shown in left panel
- “Navigate to next screen” action follows this order
- Users progress linearly through the funnel
- Use “Navigate to [specific screen]” for branching
- Create conditional navigation based on user choices
- Build dynamic paths with personalization
Dynamic Navigation
Create intelligent funnels that adapt to users:Navigate based on user responses:
Best Practices
Screen Naming
Use descriptive IDswelcomeinstead ofscreen1quiz-question-1instead ofqq1pricing-comparisoninstead ofpc
- Clean, readable URLs
- Clear analytics reports
- Easier debugging
- Better team communication
Design Tips
Keep it simple- One clear action per screen
- Minimize cognitive load
- Guide users forward
- Design for thumbs
- Keep forms short
- Test on real devices
- Optimize images
- Minimize elements
- Reduce complexity
Conversion Optimization
Clear progression- Show progress bars
- Number your steps
- Set expectations
- Minimize required fields
- Use smart defaults
- Enable autofill
- Add testimonials
- Show security badges
- Include guarantees
Preview vs Production
Understanding the difference helps you work efficiently:For testing and development:
- Instant updates
- Sandbox payments (test cards)
- Debug information
- No real transactions
- Faster builds
Keyboard Shortcuts
Speed up your workflow with shortcuts:- Cmd/Ctrl + Z: Undo
- Cmd/Ctrl + Shift + Z: Redo
- Cmd/Ctrl + C: Copy element
- Cmd/Ctrl + V: Paste element
- Delete: Remove selected element
- Cmd/Ctrl + S: Save changes
Remember to save: The editor doesn’t auto-save. Press Cmd/Ctrl + S
regularly or click the Save button to preserve your work.
Frequently Asked Questions
Do funnels work on desktop?
Do funnels work on desktop?
Yes, funnels work perfectly on desktop browsers. However, they’re
optimized for mobile users since that’s where most traffic comes
from. The mobile-first design ensures the best experience for the
majority of your visitors.
Can I use custom HTML/CSS?
Can I use custom HTML/CSS?
Yes, the Raw HTML element allows custom code. However, most funnels
can be built entirely with visual elements, which is recommended
for reliability and performance.
Can I copy elements between screens?
Can I copy elements between screens?
Yes, copy (Cmd/Ctrl + C) any element and paste (Cmd/Ctrl + V) on
another screen. This maintains all settings and styling.
Do changes save automatically?
Do changes save automatically?
No, you need to manually save your work. Press Cmd/Ctrl + S or click
the Save button regularly. Make sure to save before closing the editor
or your changes will be lost.
Can multiple people edit at the same time?
Can multiple people edit at the same time?
No, the editor doesn’t support real-time collaboration yet. Only one
person should edit a funnel at a time to avoid conflicts. Coordinate
with your team to prevent overwriting each other’s work.
Next Steps
Ready to build? Explore these areas:- Element Reference - Detailed element documentation
- Actions & Triggers - Configure interactions
- Publishing Guide - Go live with your funnel
- Localization - Multi-language funnels