Heading

Author: Sarah Pham 4738 views

The Heading element helps you create clear and visually appealing titles that guide visitors through your page content. With customizable options for font size, color, alignment, and heading levels (H1–H6), it ensures your design matches your brand style while improving readability and SEO structure.

1. How To Access Heading Element

To add the Heading element, please follow these steps:

Step 1: In Ecomposer Editor, please click on elemeny
Step 2: click on the “Basic” drop-down to display the basic elements, then select the “Heading” element to display element variations.
Step 3: Drag and drop your desired “Heading” element variation into the page editor. Now you can start configuring that element.

2. How To Configure For Heading Element

The Heading element gives you plenty of options to design a clear and attractive title for your page.

To get started, just click on the Heading element you’ve added. Then:

Go to the Content tab to edit the text, choose how it’s aligned, and pick a heading level (H1, H2, H3, etc.).
Open the Design tab to style your heading — you can change the font size, color, spacing, and more to match your store’s look.

2.1. Content tab

Insert Link: Configure a link for the entire heading. You can either paste the URL directly here or click the settings icon to access advanced options:
– Link: Paste a custom URL or select one from available sources.
– Link title: Used to improve accessibility and SEO.
– Open in new tab: Enable this option to open the link in a new browser tab.
– Add nofollow: Adds the rel="nofollow" attribute to the link.
– Custom attributes: Add any additional HTML attributes to the link element.

HTML Tag: Allows you to define the header level from H1 to H6. Once a tag is selected, it will be rendered on the front end as the corresponding H1 to H6 HTML element. Using the correct heading tag helps structure your content properly and improves your store’s SEO by signaling content hierarchy to search engines.

Use Tooltip: Use Tooltip to provide additional information about the meaning of the Heading. When customers hover over the tooltip icon, they will see the content you’ve added, which can help clarify or expand on the topic.

2.2. Design Tab

Text tab: It includes Alignment, Typography, Text Color, Text Gradient, Border, Text Shadow and Spacing.

Alignment: The Alignment setting controls how your heading text is positioned within its container. You can choose from Left, Center, Right, or Justify alignment. It’s also possible to reset the value or set different alignments for each device (desktop, tablet, mobile) using the device icons.
Typography: This option allows you to control the text style of your heading. It includes two tabs:
– Global tab: Uses the predefined typography styles from your Site Settings, keeping your design consistent across the store.
– Customize tab: Allows you to manually fine-tune your text with options such as Font Family, Font Size, Font Weight, Text Transform, Font Style, Text Decoration, Line Height, and Letter Spacing.
You can also reset to default styles or set styles for specific devices by clicking the device icon.
Text Color: This option allows you to change the color of the heading text. You can choose a color that matches your store’s branding or helps the heading stand out on the page.
Text Gradient: Apply a gradient effect to your heading text for a more dynamic look. Instead of a solid color, your text smoothly transitions between two or more colors, helping it stand out visually.
Text Border: Add a border around your heading text to create a distinct or highlighted look. You can customize the border style, color, width, and spacing for the best visual effect.
The Text Shadow : Add a shadow to your heading text to create depth, improve readability, or add a creative touch. You can control the color, blur level, and position (horizontal and vertical offsets).
The Text Spacing: Adjust the spacing around your heading text, including margin and padding. You can set different spacing values for Desktop, Tablet, and Mobile by using the device icons, ensuring your heading looks perfect on all screen sizes.