Templates are designed to help ConvertFlow users get their campaigns launched quickly and easily.
It's important that the template be designed in a way that's easy for other ConvertFlow users to customize to match their brand.
Whether templates are for private use or are being made public in ConvertFlow's template directory, ensure the templates are easy to edit for everyone else by following these usability best practices when designing and building templates in ConvertFlow:
Never use custom code
Build the templates without using any custom HTML, CSS, or Javascript, that way other ConvertFlow users can customize the template without coding. Most ConvertFlow users aren't programmers, and the ones who can code are using ConvertFlow to have a "no-code" workflow for their entire team.
Start with builder templates
ConvertFlow has 100s of builder templates for funnel steps, sections, and elements that cover the majority of scenarios, and are built to be easy to customize.
Before creating from scratch, look for a relevant essential template to start with.
These essential templates already have plenty of best practices implemented for you and have lots of tedious formatting work already done-for-you.
Use the right element type
ConvertFlow has many element types for different types of content. The objective is to make editing as fast and easy for the user to edit, in the most official way. Don't do clever stuff when there's a way to do it with best practices.
The best way to do this is to check to see if there's an element type you can use.
Instead of uploading an image for an icon, use the icon element
Incorrect:
Correct:
Instead of showing review stars as images, use a text element with ★ star characters
Incorrect:
Correct:
Instead of creating multiple steps each with a survey, use the quiz element with multiple questions
Incorrect example of a quiz built with separate funnel steps, each with a survey element:
Correct example of a quiz built using the quiz element, which has multiple questions in one quiz element:
Use the products element instead of section/row columns for product feeds
Incorrect example, where the products are displayed using section columns and content elements:
Correct example, using the products feed element:
Use theme settings for styles
ConvertFlow's theme tab lets you adjust theme styles for content. By using theme styles, ConvertFlow users don't have to adjust fonts, colors, text sizing, etc. for each element individually.
Only use element-styling when you need to override the theme style.
Incorrect example, the headline element uses its own font family styling (this setting can be unset for the element by clicking the unset icon):
Correct example, the headline uses the respective theme style (H1, in this case):
For text styling, use design settings instead of the WYSIWYG text editor
The text editor allows for controlling styles for the text you highlight, overriding theme settings and element settings. While this is useful for highlighting a single word, for example, it's the incorrect way to style text.
Incorrect:
Correct:
Use max width settings instead of line breaks
To wrap text, use the max width setting instead of breaking text with line breaks (enter key).
Incorrect:
Correct:
Use color-agnostic backgrounds
When adding background images to a campaign, anticipate that other ConvertFlow users may have a different color scheme for their brand. Try to use background images that can work with any color scheme, so other users can change the background colors to match their brand and not have to replace the background image:
Image resolution 2x actual size
Optimize uploaded images for retina screens by uploading files with 2x the pixel resolution of what you expect the image to display as live. ConvertFlow will automatically compress and resize images wider than 2000px to 2000px for better load performance for visitors. For more information on image management, please head to this article →
Mobile optimize the content
It's easy to forget, but making sure to switch the builder to "mobile" device view to adjust the padding and positioning of the elements will ensure they're displayed nicely on mobile devices.
Don't create separate content for desktop and mobile
Sometimes mobile optimization seems easier if you create separate content for desktop and mobile.
This is confusing for users when editing templates, will often be missed, creates double the work for them, and should almost always be avoided when building templates.
Avoid negative margins for positioning
While you can set negative margins in ConvertFlow, it should generally avoided for template development because it often makes content hard to select.
Keep things uniform and aligned
When positioning content, try to keep spacing uniform.
If you have a centered headline with 20px of padding on the left, make sure the padding on the right is also 20px, to make sure it is actually centered.
Also, keep content spacing uniform across sections.
Incorrect example, where the logo isn't aligned with the text:
Correct example, where the logo is uniform with the text:
Use section and column padding to position multiple elements
If you have multiple elements in a column, use the column spacing to position all of the elements, rather than using the spacing settings of each element.
Incorrect example, where each element has 50px left padding:
Correct example, where the column has 50px left padding:
Default to using the padded section
Sections have a setting to control the maximum width for the container that the columns are within. Default to using the "padded" setting so content is uniform on screens larger than laptops.
Incorrect:
Correct:
No row-ception
Avoid unnecessary layers of nested rows, to reduce the complexity of the content for the user to edit.
Use thoughtful placeholder copy
Templates need content to serve as a placeholder.
To populate this content, here are some ideas:
Give ConvertFlow users an idea of what to write where by making headlines serve as a copywriting guide.
Use AI writing tools like ChatGPT to generate sample content.
For longer paragraph text, use the Lorem Ipusm generator.
Use the official example logos
Don't want to spend time thinking up a clever example company logo for a template?
Use one of the example logos that we use for official templates →
Use royalty-free stock images without license limitations
Use the stock photos from the Unsplash tab when uploading photos.
Never use stock photos from Google, which are potentially licensed.
You can also generate images using AI tools like ChatGPT and Midjourney.
Never steal assets from real companies
Just don't do it, whether it's images, website content or logos.
When drawing inspiration from a real company, find similar royalty-free stock images and use pseudo-copy that may imply the template is inspired by a real website, but isn't using their material or trademarked logo.
ChatGPT makes it really easy to make a similar looking photo using an prompt like make another version of this photo
