Heading

The Heading block is a versatile element designed for use within the Multicolumn section of a theme. It allows users to add and customize headings with various styles, enhancing both the visual appeal and functionality of a webpage. Key features include options for text alignment, heading types, and button configurations, providing flexibility to match your design needs.

Users can enhance their headings by adding icons and captions, offering additional context or visual cues. The block also supports subheadings, allowing for more detailed information to be displayed alongside the main heading. Button settings offer customization for style, layout, and position, ensuring optimal placement and functionality across devices.

Practical usage examples include creating prominent section headers with call-to-action buttons, adding icons for visual enhancement, and ensuring responsive button placement for improved user experience. By leveraging these settings, the Heading block can significantly enhance the overall design and usability of your theme.

Overview #

The Heading block is designed to be used within the Multicolumn section of a theme. It allows users to add and customize headings with various styles and settings, enhancing the visual and functional aspects of a webpage. This block offers flexibility in text alignment, heading types, and button configurations.

Key components and functionality #

Text alignment

This setting allows you to adjust the alignment of the text within the Heading block. You can choose from various alignment options to best fit the design of your page.

Icon

The icon setting lets you add an icon to your Heading block, enhancing its visual appeal or providing additional context. The icon can be customized further with color settings.

Caption

The caption setting provides a space for additional text below the main heading, which can be used to give more information or context to the heading.

Heading

The heading setting is the main text of the block. By default, it is set to Heading. You can customize this text to suit your needs.

Heading type

This setting allows you to choose the HTML tag for the heading, ranging from paragraph (<p>) to heading levels (<h1> to <h6>). The default is set to h2.

Subheading

The subheading setting allows you to add a secondary line of text below the main heading, providing additional information or context.

Button settings

The button settings provide options to customize the appearance and functionality of buttons within the Heading block.

1. Button icon: Add an icon to the button for visual enhancement.
2. Button text: Customize the text displayed on the button.
3. Button URL: Set the URL the button will link to.
4. Open link in a new tab: Choose whether the link opens in a new tab. The default is false.
5. Button style: Select from styles such as primary, secondary, extra large, plain, small, and small secondary.
6. Button layout: Choose the layout of the button, such as icon left, icon right, or icon only.
7. Button position: Decide whether the button appears above or below the content. The default is above.
8. Button position mobile: Similar to button position, but specifically for mobile devices. The default is above.
9. Display full width mobile: Option to display the button at full width on mobile devices. The default is false.

Visibility settings

This setting allows you to control the visibility of the Heading block on different devices. Options include not hiding, hiding on desktop, or hiding on mobile, with the default set to do not hide.

Available in sections #

• Multicolumn

Usage examples #

1. Creating a section header: Use the Heading block to create a prominent section header with a subheading and a call-to-action button. Customize the text alignment and heading type to match your design.

2. Adding icons to headings: Enhance your headings by adding relevant icons. This can be particularly useful for sections that require visual cues, such as feature highlights or service offerings.

3. Responsive button placement: Utilize the button position settings to ensure that call-to-action buttons are placed optimally for both desktop and mobile users, improving user experience and engagement.

By leveraging these settings, you can create visually appealing and functional headings that enhance the overall design and usability of your theme.