The Frontis Heading Block allows you to design and customize the headings and subheadings. They are informative and look great. You can add collaborative features, and they work well on various devices. 

Now, let’s proceed to the next section of this document to learn more about the heading block and its features.

Adding Frontis Advanced Heading Block 

To add the Frontis advanced heading block, navigate to the page or post where you want to insert the advanced heading. Then, click the + (plus) icon at the top of the left side of the screen.

The Frontis menu bar interface will appear. Search the Advanced Heading in the search box or select from the menu bar.

After inserting the Advanced Heading blocks, follow the steps below;

• Click on the Document Overview button, and then you will see the blocks list view on the right side.
• Click on the block, and all the control tabs will show  (Basic, Style, Extra).

Basic section

• Presets: The presets heading refers to a pre-designed heading segment. You can modify or personalize the heading with a simple click. We offer 3 presets (including the default). You have the option to select any one of them.
• Element Visibility: The element visibility section allows you to add a subheading, a separator, and an icon. To do so, simply enable the button.
• Alignment: Alignment refers to the position of text or data within a specified space or column. You can flexibly align your headings – left, center, or right.
• Subheading Switcher Button: The subheading switcher button allows you to show or hide the subheading on your page. After enabling the switch, a sub-heading section will appear to you. You can change the sub-heading’s position, sub-heading’s tag (H1- H6, P, Span), and add text in the text section.
• Separator: The separator is just a line that helps break up different sections. The separator feature lets you add a divider in the heading section in this context.
• To add the separator, simply enable the “Show Separator” button. After enabling the separator switch, a separator section will appear. Here, you can choose its position (top or bottom) and style (solid, dashed, dotted, double, or zigzag).
• Icon: The icon switcher button lets you show or hide the icon on your page. After enabling the switch, the icon section will appear. You can change the icon image or disable it from this section.

Style Section

Style > Heading

• Typography: You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height from here.
• Text Shadow: The text shadow is usually used to create the shadow around the text. It has three values: Horizontal offset (X), Vertical offset (Y), and Blur. You can also change the text shadow color from here.
• Text stroke: If you need to add a stroke (outline) around the text, you can easily do it with the Text Stroke feature. You can also change the Text Stroke Color and value as your work demands.
• Text Color: The text color feature lets you change the color of your text. 
• Background Color: Here, you can change the background color of the heading.
• Background Image and Active Line:  This feature lets you change the color of your Background image. You can add an active line here and customize it. This feature also allows you to change the color of the line height and the line weight of the before and after lines. 
• Border: You can set a border, border color, and border style in this section. If you don’t need any border, leave it in the none option. 
• Border radius: Border radius allows you to customize the border corners for roundness.
• Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.
• Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.
• Before and after switcher: The before and after switcher lets you show or hide the switcher on your heading. After enabling the switch, a switcher section will appear. Here, you can customize the Width, Height, Gap, Border Stroke, Border Style, Border Color, and Border Radius.  

Style > Sub-Heading

The typography section allows customization of the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height. You can add a text shadow or text stroke here. 

The subheading section lets you change the text color, border color, background color, and image, as well as add borders, padding, and margins.

Style > Separator

This feature allows you to add a separator to your heading. You can customize the separator’s color, height, width, and spacing from here.

Style > Icon

The icon section allows you to add an icon to your heading and customize the icon’s size, background size, icon color, and background color. You can add a border and customize the border color and border radius here.

Extra section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible: The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area and adjust the border color and border radius. This option allows you to apply a box shadow to the heading.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches allow you to show or hide the heading on various devices.

Custom CSS: If you are an expert or have coding knowledge, you can add Custom CSS in this section to make it responsive.