The Heading Block lets you organize your site’s headings and subheadings, introducing new sections and organizing the page’s content. Moreover, it makes the website more readable by humans and search engines.
After you have chosen the Heading Block, you’ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:
General #
It provides the following customization options for the Heading Block.
General #
- Text Alignment – It sets the position of the Heading to be on the Left, Center, and Right. Moreover, you can set the position of the heading to be different on various devices (Desktop, Tablet, and Mobile).
- Preset – It applies the styling effect to the Heading. Currently, the Heading block provides two styling layouts.
- HTML Markup – This option changes the heading tag. Under the HTML Markup option, select the required markup for the heading to be in H1 – H6.
SubHeading #
The settings work for the content that appears below the heading.
- Enable – Switch the Toggle to the right area to enable the subheading. Enabling the option will display the SubHeading.
- Text – Inside the Text box, you can add the text/content you want to display as the subheading.
Style #
Under the style option, you’ll find the following options available:
Heading #
The options work for the Heading and provide the following options:
- Text Color – It allows you to change the color of the Heading Text on Normal and Hover Mode.
- Border Color – It allows you to change the color of the heading Border in Normal and Hover modes.
- Typography – It allows you to control the Heading Typography, such as Font Family, Weight, Font size, Line height, and other related styling properties. The options are listed below:
- Font Family – The option allows you to choose the appropriate Font Family for the heading block.
- Weight – It refers to the thickness or boldness of the heading text.
- Size – It controls the font size of the heading text.
- Line Height – It manages the space above and below the heading text.
- Letter Spacing – It controls the amount of space between characters in the heading text.
- Style – Using the property, you can set the heading text to be Italic or Oblique.
- Transformation – It changes the case of the text, such as lowercase, uppercase, and Capitalized.
- Decoration – The styling is applied to the heading block to make it more visually appealing. The options include underline, overline, and line through.
SubHeading #
The options work for the Subheading and provide the following options:
- Text Color – It allows you to change the color of the Subheading Text on Normal and Hover Modes.
- Background Color – It sets the background color of the subheading in the Normal and Hover Modes.
- Padding – It adjusts the space of the subheading.
- Border – It customizes the Border area added around the Heading and comes with the following options:
- Type – You can set the border type as Solid, Dotted, Dashed, Double, etc. Moreover, select None if you do not want to add any borders for the heading block.
When you select None, you will be given the following option:
- Radius – It allows you to fix the radius value to make the round corners for the column border.
- Box Shadow – When you enable the Box Shadow option, you will get the following customization options:
- Color – It allows you to select the appropriate box-shadow color for the section block.
- Horizontal-X – It displays the box shadows in the horizontal position.
- Horizontal-Y – It displays the box shadows in the vertical position.
- Blur – You can set up the blur value of the box shadows appearing.
- Spread – The shadow’s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site’s requirements.
- Position – You can set the position of the box shadows as Inset or Outline.
However, if you select the border type to be other than none, two more options will be added. The option is listed below:
- Color – It allows you to choose the appropriate border color for the heading
- Size – It provides the option to select the border size.
Note – You can apply the border settings option differently for Normal and Hover Modes.
Advanced #
The Advanced section consists of four options for the Heading block.
Spacing #
Under the spacing section, you can find the following options available:
- Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
- Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
Z-Index #
It allows you to set the priority of the Heading block according to the site requirement.
Responsive Condition #
Using the option, you can enable/disable displaying the block on various screen sizes:
- Hide on Desktop – It hides the Heading block on the Desktop.
- Hide on Tablet – It hides the heading block on the Tablet.
- Hide on Mobile – It hides the Heading block on Mobile.
Advanced #
Under the option, you can set the Block HTML, CSS ID, and Classes for the block. The available options are listed below:
- Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is Div; however, you can use another element such as Address, Article, Aside, etc.
- CSS ID – It allows you to set specific IDs to style this particular Heading block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
- Additional CSS Class(es) – It allows you to add a CSS Class(es) to your block, letting you write custom CSS to style this particular block. On a page, there might be two heading blocks, and you want to make some changes to one heading block but leave another heading block untouched. In this case, you can define the CSS classes for the one heading block you want to make changes to.
Moreover, you can add more than one class separately by commas.
For example, if you want to change the heading color of the heading block, you can add the class heading-color under the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:
h2.heading-color{
color:#000000;
}Adding the code will change only this particular Heading block.
