Heading

Overview #

The Heading section is designed to provide pre-styled headings for structured page layouts. This is crucial for maintaining a consistent design and improving SEO by ensuring proper use of heading tags. The section allows for customization of text alignment, heading types, and additional elements like icons and buttons.

Key components and functionality #

Text alignment

This setting allows you to adjust the alignment of text within the Heading section. Options typically include left, center, and right alignment, enabling you to tailor the presentation to fit the overall design of your page.

Icon

The icon setting lets you add a visual element to your Heading, enhancing its appearance and drawing attention. You can specify the icon to be used, providing additional context or branding to the heading.

Caption

The caption setting allows you to add a subtitle or additional text beneath the main heading. This can be used to provide more information or context to the heading, enhancing the user's understanding of the section's purpose.

Heading

The main heading text can be customized to suit your needs. By default, it is set to Heading, but you can change this to any text that fits your content.

Heading type

This setting allows you to choose the HTML tag for your heading, ranging from paragraph (p) to various heading levels (h1 to h6). The default is h2, which is commonly used for subheadings.

Subheading

The subheading setting provides an option to include a secondary heading or additional text, offering more detail or context to the main heading.

Button settings

• Button icon: Add an icon to your button for visual enhancement.
• Button text: Customize the text displayed on the button.
• Button link: Specify the URL the button will link to.
• Open link in a new tab: Choose whether the button link opens in a new tab. The default is false.
• Button style: Select from various styles such as primary, secondary, extra large, plain, small, and small secondary.
• Button layout: Determine the layout of the button, such as icon left, icon right, or icon only.
• Button position: Decide whether the button appears above or below the content. The default is above.
• Button position mobile: Similar to button position, but specifically for mobile devices. The default is above.
• Display full width mobile: Choose whether the button should span the full width on mobile devices. The default is false.

Usage examples #

1. Creating a page title: Use the Heading section to create a prominent page title with a subheading for additional context. Align the text to the center for a balanced look.

2. Adding a call-to-action: Incorporate a button with an icon and link to guide users to another page or section. Customize the button style to match your theme.

3. Enhancing visual appeal: Add an icon to your Heading to draw attention and provide a visual cue related to the content.

By utilizing these settings, you can create a visually appealing and functional Heading section that enhances the user experience and supports your site's design goals.