Headline

Headline allows you to have your text in Bold form and can be used as headings on a page.

D
Written by Danni Harris
Updated over a week ago

Headline allows you to have your text in Bold form and can be used as headings of a page.

Headlines serve as eye-catching page headings and are typically formatted in bold text to grab the reader's attention. To incorporate a headline into your content, just click and drag the headline element into the designated editing area. Once placed, you can easily tailor its settings to suit your design preferences and convey your message effectively.

General Settings

To add a Headline, drag and drop the Headline in the editor's space to manage the settings.

Element Name/Title

On the left side of the screen, you'll find the edit toolbar for the selected element. The top of the screen displays the default name or title for the editing option you are working on, which you can choose to rename for easier navigation as you build your funnel page.

Background Colour

To change the background colour of your headline, simply click on the content you want to adjust, then choose the desired colour.

If you cannot find your preferred colour, you can add custom colours by entering the colour code into the space provided and clicking the add colour button.

Opacity

Managing the level of transparency in your element box text or content is easily achievable by modifying the opacity settings. You can select from various degrees of fading, ranging from None (completely opaque) to Light, Half, and Heavy Fade (increasing levels of transparency). This allows you to create the desired visual effect for your content, enhancing its overall appeal.

Text Shadow

To add a shadow effect to your text or content, choose the desired intensity of the shadow, whether you prefer it to be subtle or more prominent. This customisation enables you to enhance the visual appeal of your content and create a distinct appearance that captures your audience's attention.

Letter Spacing

By utilising the letter spacing option, you have the ability to customise the distance between individual characters in your text. Simply click on this feature to make adjustments, allowing you to achieve the desired appearance and readability for your content.

Text Align

The text alignment editing feature enables you to effortlessly position your text in various ways, including left-aligned, centred, right-aligned, or justified. This customisation allows you to arrange your content according to your design preferences and ensures an optimal reading experience for your audience.

Mobile and Desktop Font Size

To change the font size for mobile and desktop devices, adjust the size bars for each individual text or content element. Navigate between mobile and desktop views in the top left corner of your funnel builder to view how your edits will appear in each format.

Typography Type

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

Icon

Incorporating an icon into your page is simple with the available icon selection. Browse through the assortment of icons provided, and choose one that suits your needs. If you're looking for a particular icon, utilise the search bar to refine the options, making it easier to find the perfect visual element to enhance your content.

Colour Options

  • Colour When a text isn't in bold form, you can only adjust its colours here

  • Bold Text Colour If a text is in bold form, you can only adjust its colours here.

  • Italic Text Colour You can only edit an italic text colour here. To be able to make an italic text, you have to highlight the text and then click on the Slant "I" icon.

  • Underline Text Colour You can only edit an underlined text colour here. To underline your text, you have to highlight the text and then click on the underlined "U" icon.

  • Link Text Colour If you have a link added to this page, you can only edit the link colour here. To be able to add a link to your text, you have to highlight the text and then click on the chain strand icon.

  • Icon Colour If you have an icon added to this page, you can only edit the icon colour here. Only the icon colour will change regardless of the position in which it is placed.

Spacing Option:

There are several spacing options available for adjusting the content. Depending on which Edit option you are working on, the changes will only be applied to that specific part of the page. For instance, if you are editing a particular Row (the blue box), the settings will only impact the contents within that Row.

  • Padding Left, Right, Top, and Bottom

This Four (4) different toggle bar moves 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.

Advanced Settings

Border Options:

Border In the Advanced Settings section, you will find Border Options. You can select from various border types or choose to remove borders altogether. After choosing a border, the border settings will appear for customisation.

Style

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

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

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

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.

Line Height

The Line Height feature allows you to modify the height of an Element box effortlessly. To make adjustments, simply slide the size bar either left or right to decrease or increase the height, respectively. This provides greater control over your design and ensures optimal visual presentation.

Text Transform

The Text Transform feature offers you the flexibility to modify your text's appearance by converting it to uppercase, lowercase, or capitalising the first letter of each word. This enables you to achieve the desired visual style and presentation for your content, ensuring it aligns with your overall design guidelines.

Visibility

Managing the visibility of your page across different devices is easy. To specify whether your page should be displayed on desktop, mobile, or both, simply choose the desired option under the Visibility settings. This allows you to tailor your content's presentation to suit your target audience's browsing preferences, ensuring an optimal user experience.

Custom Class

Incorporating a Custom Class is a straightforward process. Simply enter the class name you wish to use in the designated Custom Class field. This allows you to apply your preferred styling and design elements, creating a unique and tailored appearance for your content.

CSS Selector

To duplicate a CSS Selector, locate the copy icon situated to the right of the specific reference number you want to replicate. By clicking on this icon, you can effortlessly obtain an exact copy of your desired selector, streamlining your workflow and ensuring consistency in your design elements.

Need more help?
โ€‹
Join us for live daily support - Book now.

Did this answer your question?