Subheadings are an effective way to organize your content. Simply click and drag the sub-headline element into the appropriate area within your editor’s workspace. Once positioned, you can effortlessly modify its settings to achieve the desired appearance and structure for your page, enhancing readability and organization.

Adding a Sub-Headline #

To add a sub-headline to your page, drag and drop the Sub-Headline element into your preferred spot within the editor’s workspace. After placing it, you can customize its appearance, font, and other settings to match your design style and enhance your page’s layout.

General Settings #

Element Name/Title #

The edit toolbar for the selected element is located on the left side of the editor. At the top of the screen, the default name or title for the editing option is displayed, which you can rename for easier navigation as you build your funnel page.

Typography Type #

Choosing the right typography is essential for creating visually appealing content. You can select a headline or content font from the settings or browse a range of custom typography fonts from the drop-down menu. This feature enables you to choose a font that reflects your brand’s personality or enhances your content’s overall appeal.

Mobile and Desktop Font Size #

To change the font size for mobile and desktop devices, modify the size bars for each text or content element. Switch between mobile and desktop views at the top left corner of your funnel builder to preview how your edits will appear on each platform.

Font Weight #

The font-weight option allows you to adjust the thickness of your text, giving it a bold or lighter appearance. It is useful for emphasizing key points and making certain elements stand out.

Opacity #

To customize the transparency level in your element box content or text, utilize the opacity adjustment feature. You can choose from various levels of fading, such as None (completely opaque), Light, Half, and Heavy Fade.

Line Height #

You increase the height of the Element box by adjusting the size bar.

Text Transform #

In the Text Transform, you can decide to change the text to Uppercase, Lowercase, or just capitalize each word.

Letter Spacing #

The letter spacing feature provides you with the ability to control the spacing between each character in your text. By adjusting this setting, you can choose to have letters closer together or spaced farther apart, creating a customized look and feel for your content.

Color Options #

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

If you cannot find the desired color, you can add custom colors by entering the color code and clicking the add color button.

Icon #

Icons are an effective way to communicate your message visually and capture your audience’s attention. To add icons to your page, simply select from the various available options provided. If you have a particular icon in mind, you can also utilize the search bar to narrow down your options and find the specific icon you require.

Styles #

Spacing Option #

There are different spacing options available to adjust your content. Depending on the Edit option you are working on, the settings will only apply to that option. For example, if you are editing a particular Row (the BLUE box), only content in that Row will follow the settings you make.

• 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: You can adjust the top or bottom margin of your content by toggling its bars.

Border Options #

• Border: You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up.
• Border Style: There are three different styles for your border: Solid, Dashed, or Dotted.
• Border Width: When you increase the border width, it increases the thickness of the border.
• Border Color: To change the color of the border, click on the color icon.
• Border Radius: Adjusting the radius of your border curves the edges; the higher the number you select, the curvier it becomes.
• Radius Edge: You can decide the corner of the border you want to curve, either all edges, Top only, or bottom edge only.

Text Align #

To adjust the position of your text within your content, utilize the text-align editing option. This feature provides you with the ability to move your text to various locations, including left, center, right, or justified, according to your preference.

Shadows #

• Box Shadow: This feature allows you to add a shadow effect around the element, giving it depth and a visually distinct appearance.
• Text Shadow: Adjust the degree of shadowing applied to your text, allowing you to create a subtle or more pronounced effect as desired so your content stands out.

Visibility #

The Visibility feature provides you with the ability to control how your page appears on different devices, whether desktop or mobile. By selecting the corresponding options, you can choose to make your page visible on desktop, mobile, or both devices.

Custom Class #

To enhance the functionality and appearance of your content, you can add a Custom Class to your page elements. This feature allows you to define a specific class name, which can be used to modify its styling or behavior through custom CSS code. To add a Custom Class, simply fill in the designated field with your desired class name.

CSS Selector #

The process of copying a CSS Selector is made simple and efficient. Identify the reference number of the element you want to modify and copy its corresponding CSS Selector directly to your clipboard by locating the copy icon on the right side of the desired reference number and clicking on it.

Animations #

Entrance Animation #

To add entrance animations to your text or content, select from the available animation options. This feature allows elements to appear dynamically on your page, making the content more engaging.

Subheadings are a useful tool to enhance the structure and readability of your page. By adjusting their settings, from typography and color to spacing and animations, you can create visually appealing and well-organized content that aligns with your brand’s style.

Frequently Asked Questions #

What is the Sub-Headline element used for? #

The Sub-Headline element helps organize your content and improve readability by adding structured secondary headings to your page.

How do I add a Sub-Headline? #

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

Can I use a custom font for my sub-headline? #

Yes. Under Typography Type, you can select a headline or content font from settings or choose a custom typography font from the drop-down menu.

How do I emphasize a sub-headline? #

Adjust the Font Weight to make the text bolder, and optionally add a Text Shadow or Box Shadow for added depth and emphasis.

Can I align the sub-headline text? #

Yes. Use the Text Align option to position the text left, center, right, or justified.

How do I apply custom styling to a sub-headline? #

Add a class name in the Custom Class field for CSS targeting, or copy the element’s CSS Selector using the copy icon next to its reference number.