Heading

Author: Sarah Pham 3837 views

The Heading element allows you to add eye-catching titles and highlight important sections on your page. With flexible options for font size, alignment, color, and heading tags (H1–H6), you can easily match your store’s branding and improve content hierarchy for both design and SEO purposes.

1. How to Access Heading Element

Go to Basic Elements and drag the Heading element to your desired section. An edit box will appear, allowing you to configure the heading.

2. Configure Heading

2.1. Content tab

Choose a preset to build faster: Choose a preset to quickly apply a predefined style to your heading.
Heading Text: This option allows you to easily add and style content, including options like bold, italic, underline, inserting links, creating lists, changing text and background colors, clearing formatting, inserting code, and using dynamic sources.

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 option allows you to control how your heading text is positioned within its container. There are four main choices: Left, Center, Right, and Justify. You can also reset the value or set different alignments for each device (desktop, tablet, and mobile) by clicking the device icon.
Typography: This option allows you to control the text style of your heading. It includes two tabs:
– Global tab: Uses the predefined styles from your Site Settings, ensuring consistency across your store.
– Customize tab: Lets you adjust typography manually with options like 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: This option lets you apply a color gradient to the heading text, creating a visually appealing effect. Instead of a solid color, the text displays a smooth transition between two or more colors, helping your heading stand out.
Text Border: This option allows you to add a border around your heading text. You can customize the border style, color, width, and spacing to create a more visually striking or separated title design.
The Text Shadow option allows you to add a shadow effect to your heading text. This helps create depth, improve readability, or add a stylistic touch. You can customize shadow color, blur, and position (horizontal and vertical offset) to match your design.
The Text Spacing option allows you to adjust the spacing around your heading text, such as margin and padding. You can configure different values for Desktop, Tablet, and Mobile by clicking on the corresponding device icons, ensuring your heading looks great on all screen sizes.