How to Build and Publish Websites and Funnels in Sparkforge

Sparkforge ships two site builders: Funnels for guided sequences (lead magnets, booking flows, checkouts) and Websites for open-ended sites (homepages, multi-page brochures, online stores). Both use the same editor, so anything you learn in one applies to the other.

Funnels vs. Websites

• Split Testing: Funnels only. Run A/B variations on a page.
• eCommerce (Online Store): Websites only.
• Page View UI: Slightly different navigation between funnel steps and website pages.

For everything else — templates, elements, mobile editing, domains, SEO — they behave identically.

Start from a template

When you create a new site, pick from the template library or start blank. After choosing a template, click Edit on any page to open the site builder.

Funnel AI

For new funnels, the Funnel AI option generates a template based on your industry and design preferences. Five generations are free; additional generations cost $0.99 each.

The site builder

Pages are built from four nested objects, largest to smallest:

1. Sections (green) — full-width containers.
2. Rows (blue) — horizontal groupings inside a section.
3. Columns (pink) — vertical splits inside a row.
4. Elements (orange) — actual content (heading, image, button, form, calendar, etc.).

You need at least one section, one row, and one column before you can drop in an element. You can't nest sections in sections, rows in rows, or columns in columns. Enhanced Drag & Drop will auto-create the structure when you drop an element on the canvas.

Add an element

Click Add Element in the top right. Use Quick Add Search with related keywords (e.g., headline for Heading, booking for Calendar, slider for Image Slider). Drag the element to the spot you want.

Edit an element

Hover an element and click the gear icon, or click the element directly to open the right-side settings panel. Settings include padding, margin, visibility, plus General and Advanced tabs.

• Padding adds space inside the object.
• Margin adds space outside the object.

Move, clone, delete

Hover an element to reveal the toolbar. Use the up/down arrows or drag-and-drop to reposition. Click the clone icon to duplicate (settings included) or the trash to delete. Undo/Redo lives in the top right.

Reorder columns in a row

1. Hover the row to reveal column boundaries.
2. Drag the column left or right.
3. Drop when the placement indicator shows the target.
4. Check tablet and mobile views to confirm responsive order.

Site-wide settings

Tracking Code, Custom CSS, Typography, Background

Set site-wide tracking scripts (header/footer), custom CSS, default fonts and colors, and background image or color. Section-level backgrounds override site-level.

Pop Ups

Trigger popups on a button click, time delay, or exit intent. Configure them under Pop Up settings and edit content the same way you edit a page.

SEO Meta Data

Set the title, description, and image that appear in search results and on social shares. Do this for every page that will be indexed.

Mobile editing

Toggle Mobile Mode in the top toolbar. By default, every element is visible on both mobile and desktop. Use Visibility settings to make objects mobile-only or desktop-only when the same layout doesn't work on both.

Mobile tips

• Finish desktop first, then adjust mobile.
• For navigation menus, build a Global Section with mobile-only visibility.
• For images that don't scale well, duplicate the section, set one mobile-only and one desktop-only, then style each independently.

Versions, Save, Publish

• Versions — restore a previous saved version.
• Preview — view the page as a visitor would.
• Save — store an unpublished draft. Visitors don't see it until you publish.
• Publish — push the saved version live.

Page settings

Under the three-dot menu on a page, set the page name and URL path. Path example: sparkforge.com/about — the /about is the path. Each page in a site needs a unique path.

Site Settings

• Name — internal label, not shown to visitors.
• Domain — the domain assigned to the site. Required for visitors to load the page.
• Path — default path for the site root.
• Favicon — small icon shown in browser tabs. Paste a shareable image URL.
• Head/Body tracking code — site-wide scripts.
• Payment mode — Test (Stripe test cards) or Live for transacting pages.
• Image Optimization — auto-resize images for faster loading. Leave on.
• Optimise Javascript — lazy-hydrate external JS for better performance.
• GDPR Compliant Fonts — strip Google fonts when GDPR requires it. Consult counsel.
• Chat Widget — deploy site-wide or copy the code to specific pages.

Attach a product to a page

Order forms need an attached Sparkforge product. On Websites, click the three dots on the page and select Products. On Funnels, select the step, then Products in the top right.

Stats and sales

Stats show page views, opt-ins, sales, and earnings. Sales show every transaction; for Version 2 sites, transactions live under Payments > Orders and Transactions.