Step By Step Documentations

The content tab consists of several options like content, divider, individual background and many more. Let’s go through one by one.

Content #

Under content, there are three input fields for your title or heading. Those are named as prefix, infix and suffix title. You can use single or multiple at a time. For example:

Only prefix, infix, or suffix
Combination of two from three
And all three.

Divider #

If you would like to use a divider all you need is to turn ON the divider option. Once you turned it on it will show a bunch of options to design your divider.

Divider position: You have two options to put your divider to the top or bottom of your heading. By default it in the bottom.

Divider line style: Just a single line cant give you a diverse design option. So we kept Divider line style where you can select 6 more styles for your line. Your selection will define what kind of border to display.

Default – Defines a solid border
Dotted – Defines a dotted border
Dashed – Defines a dashed border
Double – Defines a double border
Groove – Defines a 3D grooved border. The effect depends on the Divider Line Color
Ridge – Defines a 3D ridged border. The effect depends on the Divider Line Color

Divider Line Color: Define the color of your Divider according to your design.

Divider hight 📱 : Divider hight will define the thickness of your divider. You can set different thicknesses on different devices by just clicking on the mobile icon. 

Divider Border Radius📱🠝: You can customize the radius of the border corners. With this, you can easily rounded corners to the divider. 

Divider Max Width📱🠝: With this, you can define the maximum width of the divider.

Divider Alignment: It allows you to align your divider in three different positions Horizontally. It will also depend on your column structure. The column structure will prevent it from stretching out to the edges of its container.

Use Divider Icon: Turn in ON if you would like to use an icon into your divider. After turning it on it will come up with a whole lot of new design options for your divider.

Icon: Select the icon from the list of the icon.

Divider Icon Alignment: Align your icon in any three different positions Horizontally.

Divider Icon Color🠝: Define your icon color from here. You can select a different color for on hover.

Divider Icon Background Color🠝: You can choose a background for your icon as well. 

Icon Circle: By default icon is square but you can make it circle by just clicking here.

Divider Icon Font Size📱🠝: Define the size of your icon from here. 

Use Divider Image: Instead of the icon if you would like to use the image you can turn this option on and it will reveal options for the image in between you divider. Add an image by clicking on the + add image button and design it with

Divider Image Max Width 📱🠝: You can resize your size with this particular option.

Divider Image Alignment: Like icon, you can align your image in any three different positions Horizontally.

Divider Image Background Color🠝: You can choose a background for your image. It works great when the image is transparent. 

Image Circle: By default image is square but you can make it circle by just clicking here.

Divider Line Background #

Let’s introduce another cool feature for your divider. We named it a divider line background. Here you can choose the Background color🠝, Gradient background, and image as background. With the image in the background, you also can use-

Background image size🠝(Cover, fit or actual)
Background Image Position🠝(9 different positions)
And regular Background image repeat option🠝

Tips: If you are using a divider line color with a default divider line style your divider line background will not show up because it’s underneath it.

Prefix Background #

Background Color🠝: Set a background color on your prefix. The background of the prefix is the total size of the element, including padding. You can set different colors on hover.

Use a gradient background: Instead of a single color, you can use a gradient as well. You will have all the options like selecting two different colors, gradient type linear or radial, Gradient direction, etc. You can also use gradient above background Image.

Background Image: You have also an option to use a background image instead of colors. Here you will have some other options like Background Image Size🠝, Background Image Position🠝, Background Image Repeat🠝.

Infix Background #

Like Prefix Background you will have all the options in Infix Background.

Suffix Background #

Like Prefix Background you will have all the options in Suffix Background.

Link #

You can link your whole Module to any URL and can select the module target the same window or a new to open it.

Background📱🠝 #

Adjust the background style of the element by customizing the background color, gradient, and Image. This background applicable to your whole module. If you would like to set a full background for the row or section you need to set that from the raw or section setting.

Here you can Add background-color

You also can add a background gradient.

Except that you can add a background image with plenty of options like parallax effect, image size, background image position, etc. just like regular image background option of Divi module.

Admin Label #

Advanced Heading Module can be given a custom label so that it does not need to only display as “Module-Type” on your page builder. You can use any name that convenient for you.

📱 This means this option can be customized according to devices. You can select a different setting for desktop, tablet & Mobile.
🠝 This means this has a hover effect.

Submit a Comment

Your email address will not be published.