Headline and Text Elements in Funnel and Website Builder
The funnel and website builder gives four different options under the Text Section for adding text to your funnel pages. This article will cover the headline, sub-headline and paragraph elements. For more information about bulleted lists, visit the article, Bullet List Element in Funnel and Website Builder.
In This Article:
The videos cover the headline element specifically, however, except for headline hierarchy, the sub-headline and paragraph elements have the same options and option layout as the headline element.
Adding a Text Element
To add a text element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Select your desired text element, headline, sub-headline, paragraph and drag into the spot on the page.
Styling the Headline
The element will appear in the font set under the Typography icon in the top menu bar. Headlines and sub-headlines will appear with the Headline font and paragraph elements will appear with the content font.
You can customize the look of the headline using the formatting bar that appears when you edit the text and through the options panel on the right hand side. The videos below cover the options available in each place.
Text Toolbar Styling
When you highlight words or a whole text element, a formatting toolbar will appear. This is especially helpful if you want a few words to have a different style from the rest of the element. The options are listed in order of the toolbar from left to right.
AI Option and Wallet Charges
There are AI options in the toolbar, including to generate text, simplify, make longer or shorter. Please be aware that the AI features are a paid option and will incur wallet charges.
Heading Hierarchy
If you are using the Headline element, there will be a Heading selector. This is used to give a headline hierarchy. Heading 1 is the largest and most important text. Heading 2 is slightly smaller and following down. The sizing will be adjusted as you move between heading levels. However, these sizes can be adjusted, and styling is not locked into these sizes.
Font Options
There is a font dropdown that can be used if you have highlighted a few words and want those to be in a different font.
Color Options
There is a color box that can be used if you have highlighted a few words and want those to be in a different color. Once you have selected the color square, you will be able to choose from Brand Colors, Default Colors and the Custom Colors. You can access Custom Colors by clicking on the arrow next to Default Colors and selecting Custom Colors.
Other Styling Options
You can bold, italicize, underline, strikethrough words by highlighting the selected words and clicking the related buttons.
Adding Links
You can highlight text and choose the icon that looks like a horizontal line between two parentheses. The popup will allow you to add a link URL and choose to open links in the current or new window.
Removing Formatting
Use the "T with strikethrough" to remove all formatting and return to standard formatting.
Custom Values and Additional Formatting
The box with the cursor through it will allow you to select and add custom values. More details about using custom values in the funnel builder can be found in the article Adding Dynamic Text to Funnel Pages.
Three Dots at the Right
Clicking the three dots at the right side of the formatting bar will bring up options for using a subscript or superscript in your text.
Text Options Panel
To access all text options, click on the text element and the options panel will appear on the right hand side. The name of the type of element will be at the top so you know you are in the right place and element.
General Tab
- You can rename the element under Element Name for easier identification in the layers panel and other areas with element names.
- You can set your background color. Select the color square and you will be able to choose from Brand Colors, Default Colors and the Custom Colors. You can access Custom Colors by clicking on the arrow next to Default Colors and selecting Custom Colors.
- You can adjust opacity, letter spacing, and text alignment.
- You can customize your text alignment, font size, weight, typography and font.
- You can choose an icon to be shown right before the text.
- You can set the color for the element and color for the icon if you chose one.
- The last option is to manage the margin and padding for spacing adjustments. Margin will add spacing outside of the element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
Mobile-Specific Settings
Some options have a mobile version that can be customized separately. If this is available, there will be a desktop icon next to the name of the setting with an arrow next to the icon. Clicking on the arrow will allow you to select the other view and you can change the setting on the other view.
Animation Options
Selecting the animation tab will allow you to preview entrance animations and select an animation that will be applied to the text when the page is opened.
Advanced Options
- Under the advanced tab you can add box and text shadows to add more depth to your text. These have different settings to make it more/less prominent, adjust placement and adjust colors.
- You can add borders from the advanced tab and add a border radius to round the corners of the element.
- You can also modify the line height or the space between lines.
- Text transform will allow you to make the text all uppercase, all lower case, etc.
- Custom classes and CSS selectors can be used for CSS changes.