Headline

The Headline element allows you to add text content to your page, helping to convey information clearly and effectively. Whether you're 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/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 Color

To change the background color of your headline, simply click on the content you want to adjust, then choose the desired color. 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.

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.

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.

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.

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.

• Desktop View

• Mobile view

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.

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

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're 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.

Color Options

• Color: When a text isn't in bold form, you can only adjust its colors here
• Link Text Color: If you have a link added to this page, you can only edit the link color 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 Color: If an icon is added to this page, you can only edit the icon color here. Only the icon color will change regardless of the position it's 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: 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.

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.

Advanced Settings

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.

Border Options

Border 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: 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 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: 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 capitalizing 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

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.

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.