The Headline element lets you add text to your page, whether that's descriptions, instructions, or general content. There are various customisation options to match your site's style and improve readability.

Adding a Headline

To add a headline, drag and drop the Headline element into position within the editor. Once placed, you can customise its appearance, font, and other settings to suit your design.

General Settings

Element Name

On the left side of the screen, you'll find the edit toolbar for the selected element. The top of the screen shows the default name for the option you're working on, which you can rename for easier navigation as you build your funnel page.

Typography Type

Change the typography font by selecting an option from the dropdown menu. You can choose from the headline or content font selected in settings, or choose default text and pick a new typography font from the dropdown.

Mobile and Desktop Font Size

To change the font size for mobile and desktop, adjust the size bars for each text or content element. Switch between mobile and desktop views in the top left corner of your funnel builder to see how your changes look in each format.

Font Weight

Adjust the font weight to get the look you want. You can choose from thin, regular, bold, or extra-bold options to match your design.

Opacity

Adjust transparency using the opacity settings. You can choose from None (completely opaque) through to Light, Half, and Heavy Fade. This lets you create the visual effect you're after for your content.

Line Height

The Line Height feature lets you adjust the height of an element box. Slide the size bar left or right to decrease or increase the height. This gives you more control over your design and helps with visual presentation.

Text Transform

Text Transform lets you convert your text to uppercase, lowercase, or capitalised (first letter of each word). Use it to match your content's presentation to your overall design.

Letter Spacing

Use the letter spacing option to adjust the distance between individual characters in your text. Click on the feature and make your adjustments to get the appearance and readability you want.

Color Options

  • Background Color: To change the background colour of your headline, click on the content you want to adjust, then choose the colour you want.
  • Color: When text isn't in bold, you can only adjust its colour here.
  • Link Text Color: If you've added a link to this element, you can only edit the link colour here. To add a link to your text, highlight it and click the chain strand icon.
  • Icon Color: If an icon is added to this element, you can edit the icon colour here. Only the icon colour will change, regardless of where it's positioned.

If you can't find the colour you need, add a custom colour by entering the colour code in the space provided and clicking the add colour button.

Icon

Adding an icon is straightforward. Browse the available icons and choose one that suits your needs. If you're looking for something specific, use the search bar to narrow down the options.

Styles

Spacing Option

There are several spacing options for adjusting content. The changes only apply to the specific part of the page you're editing. For instance, if you're editing a particular Row (the blue box), the settings will only affect the contents within that Row.

  • Padding Left, Right, Top, and Bottom: These four (4) different toggle bars move the content to either the left, right, top, or bottom depending on the toggle bar you click on.
  • Margin Top and Bottom: To change the top or bottom margins of your content, use the toggle bars for Margin Top and Bottom.

Border Options

In the Advanced Settings section, you'll find Border Options.

  • Border: You can select from various border types or choose to remove borders altogether. After choosing a border, the border settings will appear for customisation.

  • Border Style: Under the Style option, you can choose from three different border styles: Solid, Dashed, and Dotted.

  • Border Width: Under the Width option, you can increase the border thickness by increasing its width.

  • Border Color: To change the border colour, click on the colour icon and select from the available options or customise a colour that matches your branding.

  • Border Radius: Adjusting the Radius option curves the edges of the border. The higher the number you select, the more curved the border becomes.

  • Radius Edge: With the Radius Edge option, you can choose which corner of the border to curve. Select either top, bottom, or all edges.

Text Align

Text alignment lets you position your text left-aligned, centred, right-aligned, or justified. Use it to arrange your content to match your design and make it easy to read.

Shadow

  • Box Shadow: Add a shadow effect to the entire headline element. Adjust the shadow's blur, spread, and colour to create depth.

  • Text Shadow: Apply a shadow effect to the text itself, making it stand out against the background.

Visibility

Controlling visibility across devices is straightforward. Choose whether your page appears on desktop, mobile, or both under the Visibility settings. This lets you tailor your content to suit how your audience is browsing.

Custom Class

To add a Custom Class, enter the class name in the Custom Class field. This lets you apply your preferred styling, giving your content a unique appearance.

CSS Selector

To duplicate a CSS Selector, find the copy icon to the right of the reference number you want to copy. Click it to get an exact copy of that selector.

Animations

Entrance Animation

Add an entrance animation to your sentence to make it appear dynamically when the page loads. Choose from effects like Fade, Slide, Bounce, and more to create a more engaging user experience.

With a wide range of customisation options, from font weight and typography to advanced settings like animations and borders, you can create headlines that are visually appealing and aligned with your brand.