Guide Editor Overview

The Guide Editor is where you build and configure your interactive guides. It opens automatically when you create a new guide or click an existing one in the GuideForms → Guides list. This page walks through every part of the editor so you know where everything lives.

Editor layout

The editor uses a dynamic multi-column layout that adapts based on what you’re working on:

When you switch away from the Steps tab to Settings, Design, or another tab, the steps panel collapses and the workspace takes the full width, giving you more room to work with the configuration panels.

The header bar

A fixed top bar spans the full width of the editor. On the left side, you’ll find a back button that returns to the guides list plus the name of the currently active section (Steps, Settings, Design, etc.). On the right side, there are three elements:

• Guide title — An inline text field where you name your guide. This title is used in the admin only; visitors never see it.
• Save Draft — Saves the current state without changing the guide’s status. The button text changes to “Saving…” while the request is in progress.
• Publish / Update — Sets the guide status to published and saves. The label reads “Publish” for new or draft guides and “Update” for already published guides.

There is no auto-save. All changes are held in memory until you click one of the save buttons. If you navigate away without saving, unsaved changes will be lost.

The six editor tabs

Each icon in the left menu opens a different section of the editor. Here’s what you’ll find in each one:

1. Steps

This is where you build the actual guide flow. The steps panel lists every step in order, and clicking a step opens its editor in the workspace. You can:

• Add a step — Click the add button to open the Step Picker, which lets you choose from three step types: Cards, Slider (Pro), or Lead Form (Pro).
• Reorder steps — Drag the handle on any step to move it up or down in the flow.
• Edit a step — Click a step to select it. The workspace shows its title, subtitle, more-info text, a “skippable” checkbox, and any type-specific fields (card options, slider range, form fields).
• Delete a step — A delete button at the bottom of each step’s editor removes it from the guide.

For a full breakdown of each step type, see Cards Step Type, Slider Step Type, and Lead Form Step Type.

2. Settings

Global settings for the guide. This tab has two configuration cards:

• Basic Settings — Guide title and subtitle (shown to visitors as an intro), target post type (posts, pages, products, or any custom post type), and filter combination mode (AND or OR).
• Progress Display — Toggle the progress indicator on or off, choose its style (bar, dots, or steps), and optionally show a live result count with a customizable template string.

3. Design

Full visual customization of how the guide looks on the frontend. Six cards cover every aspect:

• Layout — Choose between full-width or boxed card container.
• Background — Set a two-color gradient with direction, or use a background image with adjustable opacity.
• Colors — Primary, secondary, background, and text colors.
• Typography — Font family and spacing density (compact, comfortable, spacious).
• Buttons — Style (filled, outlined, ghost) and border radius.
• Cards — Style (bordered, elevated, flat), border radius, shadow, and hover effect.

4. Results

Controls how the filtered results page looks after a visitor completes the guide:

• Layout — Grid or list, number of columns per breakpoint (desktop, tablet, mobile), results per page, and pagination style (load more, infinite scroll, or numbered).
• Content — Toggle featured image, choose image aspect ratio (1:1, 4:3, 16:9, 3:2), show or hide meta data, and add custom meta fields to display.
• Call to Action — CTA label text and style (button, link, or whole-card clickable).
• Summary & Messages — Show a selection summary, customize the “no results” message, and add a “start over” button.

5. Integrations

Connect a guide to external services. This tab dynamically shows only the integrations you’ve activated in GuideForms → Settings → Integrations. Each integration gets a toggle switch and per-guide configuration fields (list selection, tags, webhook URL, etc.). If no integrations are activated, the tab shows a link to the global integrations page.

Integrations are a Pro feature. See Integrations Overview for setup instructions.

6. Conditions

Create conditional rules to show or hide steps based on earlier answers. Each rule has a When section (which cards or slider values trigger it) and a Then section (which steps to hide). You can combine multiple triggers with AND/OR logic.

Conditions are a Pro feature. See Conditional Logic for details.

Guide statuses

A guide has two possible statuses:

• Draft — The default status for new guides. Draft guides are not visible on the frontend, even if their shortcode or block is on a published page.
• Published — The guide is live and will render wherever it’s embedded. Click Publish (or Update) to set this status.

You can switch a published guide back to draft at any time from the guides list page.

Navigating between steps

To edit a step, make sure the Steps tab is active in the icon menu, then click the step you want to work on in the steps panel. The workspace updates immediately to show that step’s fields. When you add a new step via the Step Picker, it’s automatically selected for editing. If you delete the currently selected step, the workspace returns to an empty state — click another step to continue editing.

Next steps

Now that you know the editor layout, dive into the individual step types to start building:

• Cards Step Type — Visual selection cards with images, labels, and filter mapping.
• Slider Step Type — Numeric range sliders for prices, distances, ratings, and more.
• Lead Form Step Type — Capture visitor contact info with custom form fields.