Advanced heading block allows you to add a combination of a heading and a sub-heading with a separator in between.
How To Add The Advanced Heading Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Advanced Heading block or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get one header and a text element.
%20(1).png?alt=media&token=80367a4f-41ff-4168-905b-55a62e5bd2e8)
How To Configure The Advanced Heading Block #
General #
Alignment – Adjust the alignment of the content to left, right, or center. You can choose different alignments for tablet and mobile devices.
Heading – Toggle button to display/hide heading.
Subheading – Toggle button to display/hide subheading.
Separator – Toggle button to display/hide separator between heading and subheading.
Heading tag – Select the HTML tag for heading as H1, H2, H3, H4, H5, H6.
%20(1).png?alt=media&token=1c5f48a8-97e9-4d14-88eb-4632e9fac71f)
How To Style The Advanced Heading #
Typography #
Under the Typography tab, options for font family, font size, font–weight, line-height, letter spacing, and color are available for Heading and Sub-Heading.
You can set responsive Heading font size for Mobile and Tablet view.
%20(1).png?alt=media&token=f40f5bdb-34fe-4570-b6b1-0233db690967)
Colors and Decorations #
Heading Color- You can set the color of the heading.
Subheading Color- You can set the color of the subheading color.
Heading Text Decoration- You can choose from options like underline, overline, and line through to decorate your header.
Subheading Decoration- You can choose from options like underline, overline, and line through to decorate your subheader.
%20(1).png?alt=media&token=75fbdab6-2e6a-44ef-af2e-24561cf3af4b)
Separator #
Position – You can select the position of the separator from here.
Style – You can select the style of the separator between heading and subheading as solid, dotted, dashed, etc. You can also choose to hide it.
Thickness – You can adjust thickness to the separator from here.
Width – You can adjust the width of the separator in pixel or % from here.
Color – You can choose the color of the separator from here.
%20(1).png?alt=media&token=770d9eeb-d9b5-4862-a059-b3fb225dbb01)
Spacing #
Spacing tab offer options to customize the spacing for the block.
Heading Bottom Spacing – Adjust the bottom margin of the heading. Separator Bottom Spacing – Adjust the bottom margin of the separator. Text Bottom Spacing – Adjust the bottom margin of the subheading.
