Having an engaging heading that communicates the right message is not enough today. Additionally, headings need to look great in order to be effective.
To that end, DiviGear has brought together the Advanced Heading Module so that you can create visually appealing headings with minimal effort.
In this article, we will explore the features the DiviGear Advanced Heading module offers you.
Add the Heading
After selecting the Advanced Heading Module, the Advanced Heading Settings window will come into view. The window has three tabs: Content, Design, and Advanced.
To add the heading of your choice, expand the content section that is under the content tab.
As you can see, there are three fields for heading input-
- Title Prefix: This is where you put the first part of your heading.
- Title Infix: Write the middle part of your heading here.
- Title Suffix: The rest of the heading will go here.
All three parts of the heading can be customized separately, which we will be showing in the next section.
Customize the Heading – Content
DiviGear Advanced Heading Module offers extensive options to customize headings to your liking. Let’s explore all the options the module offers specifically in the content tab.
Divider
You can add a divider to separate the heading from the rest of the content. Expand the Divider section and toggle the “Use Divider” option to “Yes” to enable the divider.
- Divider Position: Choose if the divider will be at the top or the bottom.
- Divider Line Style: Pick the style of the divider. You use a default line or go for dotted, dashed, etc.
- Divider Line Color: Select the color of the divider.
- Divider Thickness: Adjust the thickness of the divider line.
- Divider Border Radius: Change the sharpness of the border of the divider.
- Divider Max Width: Increase or decrease the width of the divider line.
- Divider Alignment: Set the placement of the Divider.
- Use Divider Icon: Toggle this option to “Yes” to use an icon in the divider. You also have the option to choose from a wide range of options for the icon.
- Divider Icon Alignment: Change the placement of the divider icon.
- Divider Icon Color: Pick a different color for the icon.
- Divider Icon Background Color: Set a different background color for the icon.
- Icon Circle: Toggle this option to “Yes” to make the icon background a circle.
- Divider Icon Size: Specify the size of the icon.
- Divider Image: Toggle this option to “Yes” to use an image instead of an icon.
- Divider Image Max Width: Adjust the size of the image.
- Divider Image Alignment: Change the placement of the image within the divider line.
- Divider Image Background Color: Select a different background for the image.
- Image Circle: Make the image background into a circle.
Divider Line Background
Add a background to the divider line. You have the option to use a simple color, color gradient, or an image.
Prefix, Infix, and Suffix Background
Add a different background for all three parts of the heading. You can choose a solid color, a gradient of colors, or an image as the background.
Link
Link your advanced heading to a URL. You can also choose if the link will open in a new tab or the same tab.
Background
Change the background of the entire module.
Customize the Heading – Design
In the design tab, there are more features that you can use to customize the heading.
Title
- Title Heading Level: Select the HTML tag for the heading text.
- Title Font: Choose from a variety of font styles for the heading text.
- Title Font Weight: Determine the thickness of the font.
- Font Style: The heading font can be made italic, uppercase, underlined, or struck through. You can also choose the color and style of the underline if you choose to underline or strikethrough your title.
- Title Text Alignment: Set the placement of the heading text.
- Title Text Color: Select a different color for the text.
- Title Text Size: Adjust the appropriate text size.
- Title Letter Spacing: Define how much space there should be between each letter of the heading.
- Title Line Height: Define the distance between each line of the heading.
- Title Text Shadow: This allows you to add a shadow effect to your heading and lets you customize different aspects of it.
Dual Text
- Use Dual Text: By enabling this option, you can add a dual text effect to your heading.
- Custom Text: Enable this option to use a different text as the dual text effect.
- Custom Text Input: Input the custom dual text in this field.
- Dual Text Margin: Customize the margin for the dual text.
- Dual Text Padding: Add paddings to the dual text.
- Dual Text Font: Select from a variety of font styles for the dual text.
- Dual Text Font Weight: Specify the dual text‘s font thickness.
- Dual Text Font Style: The dual text can be made italic, uppercase, underlined, or struck through. You may also choose the color and style of the underline and the strikethrough.
- Dual Text Text Alignment: Determine the placement of the dual text.
- Dual Text Color: Select a different color for the dual text.
- Dual Text Size: Select the appropriate size for the dual text.
- Dual Text Letter Spacing: Determine how much space should be left between each letter in the dual text.
- Dual Text Line Height: Specify how far apart the lines of dual text should be.
- Dual Text Shadow: Adds a shadow effect to your dual text and lets you customize different aspects of it.
Prefix
- Display Element: Choose to display your heading prefix via block or inline text. You can also set different display elements for different devices.
- Max Width: If you choose the block element to display the prefix, you can set a maximum width for the block.
- Alignment: Select the placement of the block element.
- Enable Clip: By enabling this option you can use a clip effect in your heading prefix.
- Enable Background Clip: If have a background for the prefix, you can choose to have a clip effect for the background too.
- Fill Color: Pick a different fill color for the clip effect.
- Stroke Color: Pick a different color for the stroke for the clip effect.
- Stroke Width: Adjust how wide you want the stroke of the prefix.
- Prefix Font: Decide which font you wish to use for the prefix.
- Prefix Font Weight: Set the font thickness of the prefix.
- Prefix Font Style: You can choose to display the prefix in italics, uppercase, underlining, or striking through. You may also choose the color and style of the underline and strikethrough.
- Prefix Text Alignment: Decide where the prefix should be placed.
- Prefix Text Color: Choose a different color for the prefix.
- Prefix Text Size: Choose the appropriate text size for the prefix.
- Prefix Letter Spacing: Specify how much space should be left between each letter of the prefix.
- Prefix Line Height: Determine the distance between the lines of the prefix.
- Prefix Text Shadow: Adds a shadow effect to the prefix text and allows you to customize different aspects of it.
- Box Shadow: Adds a shadow effect to the prefix and its background.
Infix
Same options as the Prefix section.
Suffix
Same options as the Prefix section.
Border
The sharpness of the heading’s corners and the width, color, and style of its border can be adjusted.
Custom Border
This section lets you customize the border of the prefix, infix, and suffix separately. You can change the width, color, and style of their border as well as the sharpness of the border corners.
Sizing
You can adjust the width, height, and alignment of the heading module.
Spacing
This section has all the options to let you set padding and margin for the prefix, suffix, infix, divider container, divider line, and divider icon and image separately. It also allows you to set the padding and margin to the heading and the module itself.
Box Shadow
Lets you add a box shadow to the entire heading module and customize it.
Transform
Change the heading module’s size, position, orientation, angle, and origin.
Customize the Heading – Advanced
This is a default Divi tab for adding custom CSS codes, scroll effects, and more.
Have Any Questions Left?
For any further assistance you may need with the DiviGear Advanced Heading module, please contact our support team at support@divigear.com.
