🎥 How to use the drag-and-drop funnel builder

In this guide, you'll see the anatomy of the CTA builder and how it can help you craft beautiful on-brand CTAs for every marketing campaign.

Steps

Once you're in the CTA builder, the first thing you may notice is the CTA steps on the right. Think of "steps" in the builder like slides in a presentation in your favorite presentation app, except it's interactive for visitors on your website.

In ConvertFlow, lots of the CTAs you build may have multiple steps, to guide visitors down a conversational path and present the right message to visitors each step of the way.

Breaking down your CTAs, forms, and surveys into multiple steps is one of the most effective ways to increase engagement with your marketing campaigns. Here's why:

  • Multi-step CTAs have your visitors make "micro-commitments", helping you create momentum and convert higher
  • Multi-step CTAs are more interactive and engaging content than long forms with lots of fields or long content blocks
  • Multi-step CTAs help you personalize the message for visitors each step of the way and even deliver the right offer based on the questions you ask
  • Multi-step CTAs help you segment leads into the right contact segments based on the steps they've engaged and answers they've entered

In the builder panel, under the "Steps" tab, you can manage the steps of your CTA. You can add, delete, arrange, edit and duplicate steps.

When you click to edit a step, you'll be able to give it a name for referencing this step in the builder and in your CTA conversion reporting.

There are also advanced options like adding your own javascript/CSS to load when that step is reached, as well as adding skip logic to progress returning visitors to the right steps, based on any condition criteria you set.

Sections

Each step is made up of "sections", which are content blocks that can have various column layouts. 

Once you click on the section's settings icon in the builder, the builder panel will then show section settings.

In the section settings, you'll find multiple dropdowns to toggle. You can toggle "Section Background" to adjust the background color, background image, and/or background video of the section.

Toggle "Column Layout" and you can split your section into 2, 3, or 4 columns with various column sizes.

Below the "Column Layout" dropdown, you'll find drop downs for each of the section's columns, where you'll be able to control that column's padding, background color, background image, and more. 

You can also click directly on the column to automatically go to that column's settings in the section settings panel.

With each column having its own background style options, each column can cover the section's background in its own way, helping you design more visually engaging CTA sections.

Themes

Use the theme tab to control the default style for the CTA container and all element types. Then, fine-tune your content with element-level design controls. 

Save your brand fonts from your website's settings, for quick access to your most used fonts from within the builder. Moving forward, dynamic templates will not only automatically be personalized with your brand colors, but also with your brand fonts.

Pro tip: Your existing CTA content currently uses element-level design controls, which override any theme styles. To switch to the theme style for that element, unset design options by either removing the value or selecting "Theme Default".Elements

Each section column can have multiple "elements" that you can add, to display the CTA content you desire.

Hover your mouse over any column and click the green plus + icon to add more elements to the column.

There are lots of types of elements you can use when crafting CTAs:

  • Headline elements are text elements that are already styled for you to display headline text
  • Text elements are content blocks that can be styled however you'd like
  • Form elements allow users enter to enter information into fields, and that contact info is sent to your integrated marketing tools. Learn how to use forms â†’
  • Button elements help you prompt visitors to click through to a page URL, another step in the CTA or an entirely separate CTA (button to overlay for example). Learn how to use buttons â†’
  • Survey elements help visitors answer questions with predefined answers, which can be sent to your connect integrated marketing tools. Learn how to use surveys â†’
  • Image elements display images you upload to ConvertFlow
  • Video elements display YouTube, Vimeo, and Wistia videos responsively. Alternatively, video elements can display any iframe source you specific
  • Row elements help you contain other elements inside boxes that can have their own styles and column layouts, helping you make complex content like pricing boxes, etc.
  • Divider elements help you add stylized horizontal and vertical divider lines within your content
  • Timer elements let you display a countdown timer until an expiration time, with an action at the end. Learn how to use timers →
  • Progress bar elements visualize progress through multi-step CTAs and towards shopping cart thresholds. Learn how to use progress bars →
  • List item elements let you quickly create bullet points with repeating visuals, such as numbered lists, alphabetical lists, lists with icons, emojis and more. Tutorial →
  • Collapse elements let you display content within collapse titles that can be toggled. Tutorial →
  • Tab elements let you display content within tab containers that can be toggled. Tutorial →
  • HTML elements allow you to add your own custom HTML to your CTAs, which will inherit your theme style when displayed on your website

Positioning elements

Elements can be positioned by dragging them and dropping them inside columns. They can also be ordered by clicking the "Move Up/Down" buttons in the builder toolbar.


Managing elements

Once you've selected an element, the top toolbar buttons will then apply to that element once it's selected, allowing you to use buttons to arrange them up/down, duplicate the element, or remove the element.

Editing elements

If you double-click on text elements, such as headlines, paragraph content, and button text, you use the text editor to customize the content and style words.

Pro tip #1: Want more text style control? Click to the bottom right to switch to HTML mode and customize the styles to your liking.

Pro tip #2: Using the "Personalize" text option, you can add merge tags to your text elements to display info on people you've already collected. You can also use URL parameter merge tags for dynamic text replacement.

Pro tip #3: When setting the font family of your text, hover over the fonts to see a live preview from Google Fonts.

Element settings

Once you've selected an element, the element's settings will be available in the builder panel. You can add spacing and control the outer alignment of the element.

Forms, buttons, and surveys have additional settings that can be adjusted.

Optimizing for mobile devices

At any time while using the builder, you can switch between a desktop and mobile canvas, by clicking the device toggle in the toolbar.

While ConvertFlow's CTA content is mobile responsive, meaning it should look fine by default, it helps to be able to control the positioning of these responsive elements for desktop and mobile separately.

By switching to the mobile canvas, you can apply mobile-specific padding and outer alignment settings to your elements.

Also, for elements and sections, you have the option to disable or enable them entirely for desktop or mobile, allowing you to create separate content for visitors using different devices, as displayed in the screenshot above.

CTA container settings

In the builder panel, there's always an option to adjust the CTA's container settings. Just click "Settings" at the top right.

Here you can adjust the style of the CTA container, such as the size of the CTA, and you can adjust the backdrop color for popups.

CTA profiles

Your CTAs can also display ConvertFlow's official user profile widget. Enable this by toggling the option, choosing the user in your account that you want to display a profile for in the CTA, and adjusting its style.

To display a different user profile than the ones available on your dropdown options, you'll need to create a new user in the ConvertFlow account. In order to have the user profiles show in the dropdown options in the builder, the user will need to add a name and photo from their own session. Please refer to the Inviting team and client users help doc for details on how to create users in your account.

Displaying one of your team member's user profiles can greatly help increase engagement from visitors, especially if they're following your personal brand.

Saving and publishing your work

As you're making changes, make sure to hit the blue "Save" button to the top right to save your work. On Macs, you can click command+s to save your work. 

If you try to leave with unsaved changes, ConvertFlow will remind you.

Lastly, once you've saved your changes, you'll be able to then "Publish" those changes live. Having the ability to publish changes only when you want allows you to stage new changes for live campaigns.

Note: This doesn't control whether the CTA displays live on your website. That's controlled on the "Launch" page of your CTA.