Title

Modified on Tue, 10 Sep at 6:26 PM

Headlines are Bold Text That Serve as Eye-Catching Page Headers.

Headlines, formatted in bold, act as prominent page titles to capture the reader’s attention. To incorporate a headline into your design, simply drag the headline element into the editing area. Once positioned, the settings can be adjusted to suit your design needs and convey your message clearly.

General Settings

To add a headline, drag and drop the element into the editor’s workspace, where you can manage its settings.

Element Name/Title

On the left side, the toolbar displays the editing options for the selected element. The element’s default name appears at the top, but you can rename it for easier navigation as you build your page.

Example

Background Color

To modify the background color of your headline, click on the element, then select the desired shade. If the color you want is not listed, you can input a custom color code and add it to your palette.

Example

Opacity

You can control the transparency of your headline by adjusting the opacity settings. Options range from fully opaque to varying levels of fade, such as Light, Half, and Heavy Fade. This feature helps you create the desired visual effect for your design.

Example

Text Shadow

To add a shadow effect to your text, adjust the intensity of the shadow according to your preference. This enhances the visual impact of your headline, making it stand out more effectively.

Example

Letter Spacing

By modifying the letter spacing, you can control the space between characters in your headline. Use this option to create the perfect balance between aesthetics and readability.

Example

Text Alignment

The text alignment feature lets you position your text to the left, center, right, or justify it across the page. This flexibility helps in arranging your content for optimal readability and visual flow.

Example

Mobile and Desktop Font Size

Adjust the font size for mobile and desktop by using the size bars for each element. You can preview the changes by switching between mobile and desktop views at the top left of your editor.

Example

Typography Type

Select a font style from the dropdown menu. You can choose from the default headline or content fonts, or switch to a custom font from the dropdown for a unique look.

Example

Icons

To insert an icon into your design, browse through the available selection or use the search bar to find a specific icon. Icons add a visual element that can complement your content.

Example

Color Options

Text Color: Adjust the color of non-bold text here.
Bold Text Color: Control the color for bold text.
Italic Text Color: Highlight your text, click the italic icon, and then change the color here.
Underline Text Color: To underline text, select it, click the "U" icon, and change its color.
Link Text Color: Highlight the text and click the chain icon to insert a link, then adjust the link color.
Icon Color: Change the color of any icon you’ve added to your content.

Example

Spacing Options

You can control the spacing of specific elements. These adjustments affect only the selected content.

Padding: Use the toggle bars to move content left, right, top, or bottom.
Margin: Adjust the top and bottom margins using the corresponding toggle bars.

Example

Advanced Settings

Border Options: In this section, you can add or remove borders, choose between solid, dashed, or dotted styles, adjust the width, and select a border color that fits your branding.

Example

Radius: This option allows you to curve the edges of the border by adjusting the radius value.
Radius Edge: Choose which edges to curve—top, bottom, or all.

Example

Line Height

Modify the height of the element box by sliding the bar left or right to decrease or increase height. This lets you control how much space your content takes up.

Text Transform

Use the Text Transform feature to switch your text between uppercase, lowercase, or capitalize the first letter of each word.

Example

Visibility

To manage how your page appears on different devices, use the Visibility settings to control whether your content is shown on desktop, mobile, or both.

Example

Custom Class

Enter a custom class name to apply personalized styling, ensuring your content has a unique appearance.

Example

CSS Selector

To duplicate a CSS selector, click the copy icon next to the reference number, allowing you to reuse it quickly.

Example