The Headline element allows you to add text content to your page, helping to convey information clearly and effectively. Whether you are adding descriptions, instructions, or general content, the Headline element provides various customization options to match your site’s style and enhance readability.

Adding a Headline #

To integrate a headline into your page, simply drag and drop the Headline element into your desired location within the editor’s workspace. Once placed, you can customize its appearance, font, and other attributes to align with your design preferences.

General Settings #

Element Name #

On the left side of the screen, you will 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.

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.

Mobile and Desktop Font Size #

To change the font size for mobile and desktop devices, adjust the size bars for each 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.

Font Weight #

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

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.

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 capitalizing the first letter of each word. This enables you to achieve the desired visual style and presentation for your content.

Letter Spacing #

By utilizing the letter spacing option, you can customize 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.

Color Options #

• Background Color: To change the background color of your headline, simply click on the content you want to adjust, then choose the desired color.
• Color: When a text is not in bold form, you can only adjust its colors here.
• Link Text Color: If you have a link added to this element, you can only edit the link color here. To add a link to your text, highlight the text and then click on the chain strand icon.
• Icon Color: If an icon is added to this element, you can edit the icon color here. Only the icon color will change regardless of the position it is placed.

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

Icon #

Adding an icon to 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 are looking for a particular icon, utilize the search bar to refine the options, making it easier to find the perfect visual element to enhance your content.

Styles #

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: These four 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 will 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 customization.
• Border Style: Choose from three different border styles: Solid, Dashed, and Dotted.
• Border Width: Increase the border thickness by increasing its width.
• Border Color: Click on the color icon and select from the available color options or customize a color 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: Choose which corner of the border to curve. Select either top, bottom, or all edges.

Text Align #

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

Shadow #

• Box Shadow: Add a shadow effect to the entire headline element. Adjust the shadow’s blur, spread, and color to create depth.
• Text Shadow: Apply a shadow effect to the text itself, making it stand out against the background.

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.

Custom Class #

Adding a Custom Class is an easy 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.

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 much more to create a more engaging user experience.

With its wide range of customization options from font-weight and typography to advanced settings like animations and borders, you can create headlines that are not only visually appealing but also perfectly aligned with your brand.

Frequently Asked Questions #

How do I add a Headline element to my page? #

Drag and drop the Headline element into your desired location in the editor’s workspace, then customize its appearance and font.

Can I set different font sizes for mobile and desktop? #

Yes. Adjust the separate size bars for mobile and desktop, and toggle between views in the top left corner to preview each format.

How do I change the color of a link inside a headline? #

Use the Link Text Color option. To add a link first, highlight the text and click the chain icon, then edit the link color.

How do I make a headline appear with animation? #

Under Animations, choose an Entrance Animation such as Fade, Slide, or Bounce so the headline appears dynamically when the page loads.

How can I control letter and line spacing? #

Use the Letter Spacing option to adjust the distance between characters and the Line Height feature to change the element box height.

How do I add a custom color to a headline? #

If your preferred color is not listed, enter the color code in the provided field and click the add color button.