Sub-Headline Customization Guide

General Settings

Adding subheadings to your content is a simple task. Just drag the sub-headline element into the desired location within your editor. Once it's in place, you can modify the settings to suit the look and feel you're going for. This process will help improve the structure and readability of your page.

Element Name/Title

The edit toolbar is situated on the left-hand side of the editor. At the top of your screen, you'll see the default element name, which you can change for easier identification as you work on your page structure.

Background Color

To adjust the background color of your sub-headline, click on the element you wish to modify and select your preferred color. If you can’t find the exact shade you need, you can add a custom color by inputting the color code and clicking “add color.”

Opacity

To modify the transparency of the content within your element box, use the opacity setting. Options range from full transparency to different levels of fading (e.g., light, half, heavy). This feature helps you create a distinctive visual effect.

Text Shadow

If you'd like to give your text more dimension, you can apply shadows using the shadow thickness tool. This lets you create subtle or strong shadows that enhance the depth and visual impact of your content.

Letter Spacing

Adjust the spacing between characters with the letter spacing tool. This helps you control how compact or spread out your text appears, ensuring a polished and professional look.

Text Alignment

You can modify the alignment of your text (left, right, center, or justified) to fit your page layout. Proper alignment ensures your content looks clean and organized.

Font Size for Mobile and Desktop

To change the font size for different devices, simply adjust the size sliders for each content element. You can switch between mobile and desktop views to see how the edits will appear on both platforms.

Typography Type

Select from various fonts to match your brand’s style. You can either use the default fonts in the settings or browse through additional typography options via the drop-down menu.

Icons

Incorporate icons into your content to make it more engaging. Use the available icons or search for a specific one to match your content needs.

Color Customization

• Regular Text Color: Change the text color here if it isn’t bold.

• Bold Text Color: Adjust the color of bolded text through this option.

• Italic Text Color: Modify the color of italicized text in this setting.

• Underline Text Color: Change the color of underlined text here.

• Link Text Color: Customize the color of any links in your content.

• Icon Color: Adjust the color of any icons you’ve added to the page.

Spacing Options

Use padding and margin adjustments to fine-tune the layout of your content. Toggle the bars for left, right, top, or bottom spacing to position elements as needed.

Advanced Border Settings

• Border Style: Choose between solid, dashed, or dotted borders.

• Border Width: Adjust the thickness of your border by modifying the width.

• Border Color: Select a color to match the style of your border.

• Border Radius: Curve the edges of your border by increasing the radius. You can even choose which edges to curve (top, bottom, or all).

Line Height

Increase the height of the element box using the line height slider for better spacing and clarity.

Text Transform

Change how the text appears by transforming it to uppercase, lowercase, or capitalizing each word.

Visibility

Control whether your page content appears on desktop, mobile, or both devices. This allows you to optimize your content for various platforms.

Custom Class

For more advanced customization, add a Custom Class to your elements and use CSS to style or alter their behavior.

CSS Selector

Easily copy the CSS Selector for any element on your page by clicking the copy icon, enabling quick identification and modification in your CSS files.