The FunnelFox Visual Editor is a powerful WYSIWYG (What You See Is What You Get) interface for building web funnels. Drag and drop elements, configure actions, and create sophisticated conversion flows without writing code.
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:
Visual Editor interface showing screens panel, canvas, and properties panel

​
Left Panel - Screens & Elements

Screens Tab
  • View all screens in your funnel
  • Add new screens or groups
  • Reorder by dragging
  • See screen thumbnails
Elements Tab
  • 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.
Version history panel
History features:
  • 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
Each element has properties you can customize:
  • 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
Progress Bars
  • 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.

​
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:
  1. Screens appear in the order shown in left panel
  2. “Navigate to next screen” action follows this order
  3. Users progress linearly through the funnel
Custom Flow:
  • 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:
If user selected "Yearly" → Go to yearly pricing screen
If user selected "Monthly" → Go to monthly pricing screen

​
Best Practices

​
Screen Naming

Use descriptive IDs
  • welcome instead of screen1
  • quiz-question-1 instead of qq1
  • pricing-comparison instead of pc
Benefits of good IDs
  • 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
Mobile-first always
  • Design for thumbs
  • Keep forms short
  • Test on real devices
Fast loading
  • Optimize images
  • Minimize elements
  • Reduce complexity

​
Conversion Optimization

Clear progression
  • Show progress bars
  • Number your steps
  • Set expectations
Reduce friction
  • Minimize required fields
  • Use smart defaults
  • Enable autofill
Build trust
  • 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
Use for all testing before going live.

​
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

​
Next Steps

Ready to build? Explore these areas: