Funnel Elements | SuperCoach CRM

Funnels

Created by: Emma Johnston

Last Updated: January 11, 2024

Text / Content AI / Images / Image Slider / Image AI / SVG / Divider / Buttons / Order Forms / Forms and Surveys / Video / FAQs / Calendars / Progress Bar / Social Icons / Countdown / Reviews / Map

Funnel Elements

You can add a variety of elements to a funnel page including headings, paragraphs, bullet lists, images, forms, payment forms, calendars, surveys, and buttons.

ADDING ELEMENTS

To add an element to a new page, first add a new section and a row and then click on the orange + Add Element button. When adding additional elements, you can select an existing element and press the + icon at the bottom of orange box or you can click on Add Elements icon in top menu bar.

MOVING ELEMENTS

To move an existing element up or down, select the element and click on the arrows in the top left corner of the orange box. To drag an existing element to a different place on the place, hold down the Drag icon in the top right corner of the orange box and move the element to its new location (and then release).

CLONING ELEMENTS

To clone an existing element, select the element and click on the Clone icon in the top right corner of the orange box. Cloning existing elements, such as text, is usually faster than adding a new elements (as the settings for that element also clone).

DELETING ELEMENTS

To delete an existing element, select the element and click on the Trashcan icon in the top right corner of the orange box. This will immediately delete the element.

UNDO/REDO

If you make a mistake (such as accidentally deleting a element), you can press undo on the right hand side of the top menu bar.

MANAGING ELEMENTS

You can also manage sections, rows, columns or element, by clicking the Layers icon in the top menu bar. Here you have the options to can reorder, hide or show, edit, clone and delete. This can be especially useful when a section, row or column has no padding and you cannot select it easily.

Element Options

CUSTOMIZING ELEMENTS

Clicking on a element will bring up a settings menu on the right-hand side, allowing to completing customize that element. Depending on what has been selected there will be a General tab and an Advanced tab, each giving different options. Options will include background images, background colors, padding, margin, fonts, font size and font colors, shadows, borders, text transforms. You can set a redirect action on a form, survey, button, calendar, etc.

VIEW/ADD COLORS

To view the funnels colors, click on any element to bring up Color Options in the General tab and click on the filled circle. To add a new color, click on Add Custom One. Type in the hex code and press Add Color to save.

To update an existing color, first click on the color and then choose Update. Add the new hex code and press Update Color. Updating a custom color will update all the elements on the page that use that color.

To delete an existing color, first click on the color and then choose Delete and click OK to confirm. Deleting a color will make any elements on the page that had that color transparent.

TRANSPARENCY

To change the transparency of a custom color, click on the filled square next to the hex code to open additional settings and either use the vertical slider or change the alpha value.

Adding Text

TYPOGRAPHY

To change the default heading and paragraph fonts for the page, click on Typography icon in the top menu bar. To change the headline and/or paragraph font, click on the font name and then choose a font from the dropdown list. If you know the name of the font you want to choose, you can type the first letter or two to jump down the list. Click here for a full list of fonts available.

TEXT FORMATTING

To change the formatting of specific elements of text (such as making the text bold or adding a hyperlink), drag you mouse along the required text and then select the option from the grey menu that appears a next to the text.

Keyboard shortcuts can also be used.

TEXT PADDING

TOP TIP: We recommend adding at least 10px of padding left and padding right to headings and paragraphs so the text isn't touching the edge of the screen on mobile.

HEADINGS, SUBHEADINGS AND PARAGRAPHS

To add a heading, subheading or paragraph, select Headline, Sub-headline or Paragraph from the elements menu. By default, the font for heading and subheadings will be the headline font set in Typography, and the font for paragraphs will be the Paragraph font. Once added, click on the element to bring up the settings menu.

In the General tab, you can change the background color, opacity, text shadow, letter spacing, mobile and desktop text alignment, mobile and desktop font size, typography font, and color options (for each style of formatting), list icon, padding and margins. In the Advanced tab, you can add a border (which brings up options to change the border radius). You can change the line height and transform the text case.

NOTES: If any of your headings or subheadings contains a long word, such as 'accountability' or 'congratulations', we recommend checking the word fits on mobile and changing the mobile font size if needed.

BULLET LIST

If your paragraph text contains a bullet point list, this must be added a separate element. To add a bullet list, select Bullet List from the elements menu. By default, the font will be the headline font set in Typography. Once added, click on the bullet list to bring up the settings menu.

NOTES: The default Line Height for bullet lists is 1. We recommend changing this to at least 1.5 (or whatever you have set for your paragraph font). You may also want to change the Typography Type to Content Font.

Content AI

CONTENT AI COSTS

Content AI is a premium feature that is charged based on words generated. The first 500 words are free, but, after that, the pricing is $0.15 per 1000 words generated.

CONTENT AI

When adding text to a funnel, you can use Content AI to generate text.

1. Double click in the text box to bring up the text editor menu and click on the AI icon.

2. Add a brief content description and select a post length (small is around 60 words, medium is around 150 words, large is around 400 words, or custom is up to 900 words). You can also click on Additional Options to select a writing tone and set the number of variations you want the AI to generate (from 1 to 5).

3. Press Generate.

4. On the next window, press copy to add a variation to the Chosen Content box on the right hand side, and edit as required. Press Continue to add the generated text to the funnel.

Adding Images

IMAGES

To add a single image, select Image from the elements menu. There is also the option to add an Image Feature. Once added, click on the image to bring up the settings menu.

To change the image, scroll to Image Options in the General tab and click on the Picture icon. Choose whether you want to Upload from Media Library (which includes using images that are already in your Media Library) or Create Using AI. If you choose the media library option, you then need to either select the required image from your media, upload a new image or search for free images on Pixabay and Unsplash. Click here for more information on how to use the Media Library.

In the General tab, you can change the padding and margins, background color, image file, width and height (see notes), alt text and image actions. In the Advanced tab, you can change the image radius, image border, image shadow, and image effects (color or grayscale).

NOTES: It is best practice to it is best practice to only define the width of images so that they resize proportionally on mobile.

COMPRESSING IMAGES

It is very important to resize and compress images so that your pages load quickly. Large, uncompressed images will dramatically slow down the page load time.

Unless your image is transparent, use JPEG images, not PNG images. PNG images have a significantly larger file size than other formats. Always compress your images before you upload them to your site or funnel. You can use a tool such as tinypng.com to compress your images. The site uses smart lossy compression techniques to reduce the file size of your JPEG and PNG files. The effect is nearly invisible, but it makes a very large difference in file size!

OPTIMISING IMAGES

In the funnel settings, always toggle on Image Optimisation for better page speed.

Adding Image Slider

IMAGE SLIDER

To add multiple images, select Image Slider from the elements menu. Once added, click on the image slider to bring up the settings menu.

You can add, rearrange and delete images in the Slides section in the General tab. You can

and click on the Picture icon. Choose whether you want to Upload from Media Library (which includes using images that are already in your Media Library) or Create Using AI.

Content AI Images

IMAGE AI COSTS

Content AI is a premium feature that is charged based on images generated. The price is $0.096 per image generated (so $10 will give you about 105 images).

IMAGE AI

When adding an image, you can choose to Create Image Using AI. Content AI will generate realistic images and art from a description in natural language.

1. In the popup window, add a realistic description for the image. Avoid using symbols in the description or words like discount or sale. You can generate an example, if you need.

2. Select number of variations you want the AI to generate (from 1 to 4).

3. Choose your image style (such as filmic, photo, dreamlike, digital art or poster). Press See All for additional style options.

5. Click Generate to create the image(s).

6. Choose the variation that you want to use and press Continue.

To access previously generated content, go to Automation > Content AI to learn more details and see the various content generated.

Adding SVG Graphics

SCALABLE VECTOR GRAPHICS

SVGs can be used for graphics such as icons or logos. They have a much smaller file size than image file, they are sharper and you can change their color.

To add a scalable vector graphic, select SVG from the elements menu. Once added, click on the image to bring up the settings menu. To change the image, scroll to SVG Options in the General tab and click on the Picture icon. Select the required image from your media or upload a new file.

In the General tab, you can change alignment, margins, width and height (see notes), and svg actions. You can also open the SVG Editor, where you can change the color of the graphic.

One of our favorite icons sites is Flaticon. You filter the results to make it easier to find the style you want, and then you search by collections (so your icons match each other). When downloading the icon, choose the SVG option. Please note that, unless you have a premium subscription, attribution is required in the page footer.

Divider Line

DIVIDER

To add a divider line, select Divider from the elements menu. Once added, click on the line to bring up the settings menu. In the General tab, you can change the padding and margins, line color, alignment, width, height (thickness) and style. In the Advanced tab, you can set visibility.

NOTES: The line width applies to both desktop and mobile. If you have changed the desktop line to 20%, for example, to match the width of a title, this will look quite different on mobile.

Adding Buttons

ADD A BUTTON

To add a button, select Button from the elements menu. Once added, click on the button to bring up the settings menu. In the General tab, scroll down to Text Options to change the wording on the button. Next, set the Button Actions (such as next step, open popup or website url).

In the General tab, you can also change the button background color, opacity, text shadow, letter spacing, text alignment, box shadow, mobile and desktop font size, font, icons (before and after), color options (for each style of formatting), and padding and margins. In the Advanced tab, you can transform the text case, adjust the width, add button animation effects, add a button shadow, and change the visibility. There is also a Themes tab where you can select a pre-made template design.

BUTTON BORDER RADIUS

To make a button round, change the Border Options in the Advanced tab to Full Border. To create round corners, edit the Border Radius to a value larger than 0px. You can apply the border radius to all edges, the top edges only or bottom edges only. If you also want to change the button Border, you can set the style, width and color. Otherwise, you can change the Border back to No Border.

Adding Forms and Surveys

FORM AND SURVEYS

To add a form or survey, select Form or Survey from the elements menu. Survey is found lower down in the elements menu in the Custom sections of the elements menu. Select the form (or survey) from the dropdown list in the popup window. This list will contain all of the forms that have been created in Sites > Forms. Click here for more information about creating forms.

Once added, click on the form to bring up the settings menu. In the General tab, scroll down to Button Actions to define the Redirect Action. The default redirection action is set to use the action from the form builder (as set by the Action on Submit). For surveys, this redirect action won't happen until the contact has completed the whole survey.

To change the current form to a different form, go the General tab. Just above the Button Actions section, click on the down chevron next to the form name to expand the drop down menu. Either select the required new form from the list or, if you know the name of the form, you can search by typing in the form name.

In the General tab, you can also change the padding and margins. in the Advanced tab, you can change the visibility. If you want to change the appearance of the form, you need to do that in the form builder. Click here for more information about formatting forms.

Adding Videos

VIDEO AND HOSTED VIDEO

To add an video, select Video from the elements menu. Once added, click on the video to bring up the settings menu. In the General tab, scroll down to Video Type and select the video source.

For externally hosted videos, such as YouTube or Vimeo, add the Video URL and select the whether you want the video to autoplay and/or display the controls. Note that you can use hyperlinks and custom values/custom fields for the URL.

For internally hosted videos, select Hosted Video. Click Select Video to select a video from the media library (or upload a new file) and click Select Thumbnail to select an image from your media library. Go to Playback Controls and select the playback options (such as autoplay, allow play/pause, speed control, show pending time, full screen toggle, progress bar).

In the General tab, you can also change the padding and margins, background color, box shadow and video width. In the Advanced tab, you can change the border and border radius, and set the visibility.

NOTES: Hosted video can be in any of the mainstream video formats as long as it is under 4GB. According to regulations, autoplay videos must start muted. This policy is controlled by the browser manufacturers and cannot be changed.

PICTURE IN PCITURE MODE

For hosted videos, there is also the option to Enable PiP Mode on Scroll. As your users scroll down on the page the video will follow them down the page so they can keep watching as they scroll.

GATED VIDEO

If only want viewers who have opted in to be able to watch the video, you can toggle on Redirect Unregistered Visitors. Once that has been toggle on, select the step you want to use for contacts to opt in.

HOSTED VIDEO AUTOMATIONS

You can trigger automations when a contact watches all or part of a particular video.

1. Click on Automation > Workflows and click the green + Create New Workflow button in the top right of the screen.

2. Choose an option for the type of Workflow you wish to create, such as Start a Workflow from Scratch, and click the + Create New Workflow button again to enter the builder. Add a workflow name and press Save.

3. Click Add New Workflow Trigger and select Video Tracking. In Add Filters, select the Funnel, Video or Video Duration. You can add a second filter if needed.

4. Click the + to add a new event to the workflow, such as Send Email or Send Internal Notification. Choose and customize the action in the menu on the right.

5. Add any other required steps.

6. Press Save and toggle on Publish

Adding FAQs

ADDING FREQUENTLY ASKED QUESTIONS

You can add frequently asked questions as text. There is also the option of adding an FAQ with expandable questions.

To do this, select FAQ from the elements menu. Once added, click on the FAQ box to bring up the settings menu.

To edit the first question, click on List Item 1 in the FAQ List in the General tab but then edit the text on the funnel page. You can also deselect Show Image or, if you want to have an image, you can select the image file.

To edit the second question, click on List Item 2 and edit that text on the funnel page...and so on. You can also rearrange questions, add new questions, clone questions and delete questions in the FAQ List.

FORMATTING FREQUENTLY ASKED QUESTIONS

In the General tab, you can change overall design by selecting the FAQ Type (separated, contained, or simple). In the Advanced tab, there are several options to change the design on the questions.

Under Custom Options, you can change icons that open and close the sections, and the position of the icon. You can choose whether multiple items can be expanded at same time and whether you want the first question to be expanded when the funnel is first loaded. You can add button to expand/collapse all questions. You can also change the line height of the text.

Under Color Options, you can change the color and background color for the titles when they are open and when they are closed. You can change the title color and background color, the link text color and the color of the separation line. You can also format the expand/collapse button if you have added one.

Under Font Options, you can change the font family for the title and text. To change the font size for the title and text, you need to toggle between Change Mobile Font Size and Change Desktop Font Size respectively.

Under Spacing Options, you can change the padding and margins, and in Border and Shadow, you can change the border, border radius and box shadow.

Adding Calendars

CALENDARS

To add a calendar, select Calendar from the elements menu. Select the calendar from the dropdown list in the popup window (or select the calendar group page). This list will contain all of the calendars that have been created in Settings > Calendars. Click here for more information about creating calendars.

In the General tab, you can change spacing options, select a different item and define the Redirect Action (such as Go to Next Step). In the Advanced tab, you can change the visibility.

Adding a Progress Bar

PROGRESS BAR

Adding a progress bar can be particularly useful when you add a step between the first call to action and the confirmation, such as a one time offer upsell page or a waiver form.

Nearly there! Just one last step...

To add a progress bar, select Progess Bar from the elements menu. Once added, click on the progress bar to bring up the settings menu. In the General tab, you can change the wording of the progress bar in the Text Options box.

In the General tab, you can also change the background color, font, and margins. In the Advanced tab, you can change text shadow, style and alignment. You can change the width of filled progress section (as a percentage) and the size (height) of the bar. You can also change the offset color. There are also options to change the progress bar border and add a box shadow. There is also a Themes tab where you can select a pre-made template design.

Adding a Countdown

COUNTDOWN

You may want to add a countdown to indicate a signup deadline or when a program starts. This can be a useful tool for creating urgency. You can also add a timer to indicate a limited-time offer, but it is worth noting that because these have been over-used to create false-urgency, they do not have the same impact as they once did.

To add a date countdown timer or time, select Countdown or Timer from the elements menu. Once added, click on the countdown to bring up the settings menu. In the General Tab, set the End Date, End Time, and Time Zone.

In the General tab, you can also change the countdown color and label color, float (alignment), font, text and subtext (label) font size, and margins. In the Advanced tab, you can change the visibility.

EXPIRATION ACTION URL

Once the countdown timer has expired on a page, you might want to redirect contacts to a different page (indicating that they have missed out because program has started, for example, with information about how they can sign up for your next program). To do this, go the Expire Actions in the General tab, choose Redirect to URL and add the URL of the page.

Reveal and Hide

EXPIRATION HIDE AND SHOW ELEMENTS

You may want to delay the appearance of certain sections and elements in your funnel, or hide them when the timer is complete. This can be done using the Countdown or Timer. To do this, go the Expire Actions in the General tab, choose Show & Hide Elements.

TOP TIP: When you click on an element, you can add a name/title in the General tab in the settings menu. This can be extremely useful if you want to show or hide it as a countdown/timer action as it makes those specific elements much easier to find in a long lime.

REVEALING ELEMENTS

If you want something to pop up after a time delay, you'll need to hide the visibility first. Select the element you wish to hide, go to Advanced in the setting menu and uncheck both desktop and mobile under visibility. If you ever hide something accidentally, you can find it by going to Elements > Manage and click the View icon to toggle between hide or unhide.

Next, in the Show & Hide Element section, choose the element(s) that you want to appear and check the relevant box(es).

HIDING ELEMENTS

If you want something to disappear after a time delay, in the Show & Hide Element section, choose the element(s) that you want to hide and check the relevant box(es).

STEALTH MODE

NOTE: If you don't want the timer to actually display on the page, you can also hide it by unchecking both desktop and mobile under visibility. The timer will still work but it will be in stealth mode!

Adding a Review Widget

REVIEWS

Reviews and testimonials are really important for social proof, improve your trust factor and give your audience that one final push to buy your product or service.

If you have connected Facebook and/or Google Business to SuperCoach CRM, you can display your all of amazing reviews as a widget on your funnel page. To add these, go to either the Launchpad or Settings > Integrations.

To add a review widget, select Reviews from the elements menu. To format the appearance of review widget, go to Reputation > Widgets. Customize the widget by changing layout (including review source and number of reviews shown), content (title and description), theme (light or dark) and appearance (header title, title color, star rating color, and/or background color), and settings.

REVIEW WIDGET CODE

To add the widget to a website hosted elsewhere, go to Settings > Reputation Management and scroll to the bottom of the page, Click Copy Code and paste that code into an HTML block on your site.

Join us in-person for the Coach Catalyst SuperCoach Summit being held on August 24 - 25 in Reston, VA.

CLICK HERE for more details. Use code SUPERCOACHCRM24 to get a $50 discount.

If you have any questions or need support, you can either chat with us clicking on the blue dot in the bottom right corner of the software or you can email us at [email protected]. The support desk is available Monday to Friday, 7:00am - 3:00pm (CDT).

The support desk will be operating with reduced hours from August 20 - 22 and will be closed on August 23 and August 26.