Courses → Intro to the call-to-action builder

Intro to the call-to-action builder

Jonathan Denney

Co-Founder & CTO of ConvertFlow

Intro to the call-to-action builder

This is the ConvertFlow call-to-action builder.

From here, we can customize templates and create calls-to-action of all types, using a mobile responsive visual builder that is fast and easy to use.

We’ve built the ConvertFlow builder for marketers to be able to create, personalize and launch campaigns quickly using a visual interface, without coding or waiting on developers.

This means design controls are streamlined for efficiency, while still giving you plenty of granular settings to creating on-brand CTAs, pages and content experiences.

Customizing a template is a breeze. Just click on something to select it. With it selected, you can now control it using the toolbar at the top of the builder.

Click on the toolbar buttons to move your selected element up or down, to duplicate it, or to remove it from the builder.

You’ll also notice in the panel to the right, settings specific to what you selected are now accessible and controllable.

Editing text is easy, just double click on it to start editing the content visually right within the text editor.

To drag-and-drop something, hold down the mouse on it and move your mouse around the builder.

You’ll see grid lines to show you where your element will drop into place, maintaining a responsive grid layout that’s automatically optimized for all devices.

To see how your CTA looks on mobile, just click the mobile device icon to preview your content at smartphone width. When you’re ready to switch back, just click the desktop device icon.

As you make changes, if you make a change that you don’t like, just click the “undo” icon to revert the change. Or, if you delete something and you want to bring it back, click the “redo” icon.

And once you’re done making changes, click the blue “save” button to save your work.

With some changes saved, you’ll see the green “publish” button activate, which you can click to stage when your saved changes go live.

The publish button is extra useful when making edits to a call-to-action that’s already placed on your website, so you can save your work before having them go live.

While the ConvertFlow CTA builder is fast and easy to use, just by pointing and clicking around, it’s a powerful tool that can give you marketing superpowers once you dive a little bit deeper.

Here’s a quick anatomy of the builder:

Steps

The first thing you’ll notice once you’ve chosen a CTA template and have entered the builder, is the multi-step layout of the builder, and the step manager to the right.

“Steps” are the funnel steps of your call-to-action, so you can build engaging multi-step funnels.

For example, a “step” could be another step of a lead form, another question of a quiz, or another page within a landing page funnel.

Your CTAs will always have at least one step, and when you’re ready to add another, you can either click “Add Step” to build a step from scratch, or click the duplicate icon in the steps manager to duplicate an existing step.

Add as many steps to your CTA as you’d like to, to create all kinds of conversion funnels.

Sections

Each step is made up of “sections”. These are blocks that are positioned top to bottom, and you can also add as many sections to a step as you please by clicking “Add Section”.

Each section can have it’s own style and layout. Just click on a section’s settings icon to toggle the section’s settings in the builder panel.

Here you’ll find setting groups such as “Section Background”, where you can adjust the background color and background image of the entire section.

Next you’ll see “Section Layout”, where you can control how many columns are displayed within the section, how the section is padded, and whether the section displays on desktop or mobile.

Section Columns

Each section can have up to 4 columns laid out horizontally. By selecting a different column layout, you can see your changes reflected instantly in the builder.

To style a section column, click on the column’s settings icon to toggle the column settings group within the section settings, or if you already have the section settings open, scroll down and you’ll see a dropdown for the first column through the fourth.

Click the column you’d like to edit, and you’ll find that column’s settings. Here you can give the column inside padding to your liking, you can control it’s visibility on mobile, you can give it it’s own background overlay color and image, as well as control the column’s border style.

Each column within a section can be styled separately, helping you craft visually appealing sections.

Elements

Within each column are “elements”. These can be dragged-and-dropped within section columns.

And once selected, you can use the toolbar to move elements up and down, to duplicate the element, or remove it from the builder.

You can add as many elements as you’d like to each column. To add a element, click the green plus icon with the column, and then select the element type you’d like to add.

The different elements you can add are:

  • Headline elements are text elements that are already style 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
  • 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.
  • HTML elements allow you to add your own custom HTML to your CTAs, which will inherit your theme style when displayed on your website

Each element type has their own settings for you to control.

For headline, text, image and custom HTML elements, you’ll find outer spacing and positioning settings in the builder panel.

For buttons, you’ll find button styling settings, redirect URL settings, button click actions and more.

For forms elements, you can toggle form fields, create and map custom fields, control the form layout, field sizing, etc. as well as control what happens when someone submits the form.

For survey elements, you can add multiple choice options, style how it looks, control selection outcomes, add images choices, and more.

Last, row elements let you add nested sections inside of other columns, so you can build more complex blocks and layouts, such as pricing boxes, encapsulated forms and more.

As you can see, by adding section columns, and positioning elements within the columns, we can visually build out response content to be displayed in any call-to-action type.

Whether you’re building a simple website form, a promotional popup or a multi-step page funnel, your workflow is streamlined using the same intuitive builder across for all of your calls-to-action.

Integrations

As you add forms and surveys to your CTA steps, ConvertFlow makes it easy to integrate these with your preferred email service provider, or ESP for short.

If you haven’t already connected your ESP, just click to the integrations page, choose your ESP, enter your details and then head back to the builder.

For forms, ConvertFlow automatically maps the default fields like first name, last name, email etc. to your email provider, so you can start building your list fast.

However, you can also add custom fields, such as drop downs, radio buttons, paragraph fields and more.

Each of these fields can be mapped to the custom field’s you’ve added to your email service provider. Just select from your fields in the drop down.

The same applies to surveys. Above your survey options, select the custom field you want ConvertFlow to send the survey response to in your email provider.

For forms, surveys and buttons, by clicking the “Confirmation actions” button, you can control what happens when someone completes.

You can display another step of the CTA, redirect to a URL, show a thank you message, or even trigger another ConvertFlow CTA.

Once you’ve set your action, you can add automations to segment contacts in your email provider. Add automations to apply tags, add subscribers to sequences, and more.

Personalization

Instead of treating every visitor the same, you can personalize what happens for visitors as they engage with your CTA, based on their survey responses, field selections and more.

To do this, click to “Add a conditional action”. For each conditional action you add, you can use conditions to display different outcomes to different people.

For example, instead of jumping to step 2 of a survey, if the person has answered the first step’s question with a specific response, you can jump them to step 3 instead.

You can also run specific automations for only those who meet the conditions, such as applying additional tags based on their question answers and more.

Now, what happens if someone doesn’t complete a multiple step form or survey?

By adding skip logic to steps from the steps manager, you can skip returning visitors to where they left, or skip certain visitor segments to specific steps, to greatly increase your completion rate.

By using the personalization tools, you can send your visitors down personalized paths and display different outcomes, based who they are and how they respond.

And by adding merge tags to your content from the text editor, you can personalize the content for each visitor with their contact info, their field selections and more.

Quick recap

In the call-to-action builder, you can add multiple steps. Each step can have multiple sections, which can have different column layouts.

Inside each column, you can add different types of elements such as text, images, boxes, and forms.

And with ConvertFlow’s built-in personalization rules, you can define conditional paths to personalize each visitor’s experience, helping you collect more data and convert higher.

The possibilities are endless.

With the design controls and personalization abilities of ConvertFlow’s visual builder, you can create, personalize and launch new campaigns fast and easy, without coding or developers.

And that’s a brief overview of the ConvertFlow call-to-action builder.

Next Lessons In Course