Divi Blog Module Advanced Tab

You already notice three tabs in the settings: Content, Design, and Advanced. Everything you need to create awesome Divi blog Layouts and take full advantage of the module can be found in the Content & Design tab. However, if you want even more control over the appearance of the module then you can venture into the Design tab. If you are a developer and you want to use your CSS instead of using the design controls in the Design tab, then you can venture further into the Advanced tab. When combined, there is nothing that canโ€™t be customized.

CSS ID & Classes Options #

Here you can add a custom CSS ID or CSS Class to target and apply your CSS into the module.

CSS ID: Assign a unique CSS ID to the element which can be used to assign custom CSS styles from within your child theme or from within Diviโ€™s custom CSS inputs.

CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child theme or from Diviโ€™s custom CSS inputs.

Custom CSS Option #

In Divi blog module there are many custom CSS areas you can target and set your CSS code there. In each field, you have the option to choose a device if you would like to give separated CSS according to your device. You can also give different CSS with hover or without.

You can target around 17( ๐Ÿ“ฑ๐Ÿ  ) particulars area. In each CSS input box, there is a sign โ€œ?โ€ which will tell you which class is been targeted.

Visibility Option #

Like any other divi module, the Divi blog module also has a visibility option. You can hide your chosen modules on specific devices. These devices and their respective sizes (viewport width) are as follows:

Desktop: 981px or bigger
Tablet: 980px and not smaller than 767px
Phone: 767px or less

Horizontal Overflow๐Ÿ“ฑ๐Ÿ : Here you can control element overflow on the X-axis. If set to scroll, content that overflows static widths or heights will trigger a browser scrollbar. If set to hidden, the content overflow will be clipped.
Resource: 3 Helpful Ways to Use Overflow Options in Divi

Vertical Overflow๐Ÿ“ฑ๐Ÿ : Here you can control element overflow on the Y-axis. If set to scroll, content that overflows static widths or heights will trigger a browser scrollbar. If set to hidden, the content overflow will be clipped.

Z Index๐Ÿ“ฑ๐Ÿ : Here you can control element position on the z-axis. Elements with higher z-index values will sit atop elements with lower z-index values.
Resource: Details on z index

Transitions #

If you are using any animation or hover effect, this duration, delay, and curve will define your transition length, time, and way. This is also available in all modules.

Position #

Here you can take full control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.

Scroll Effect #

Scroll Effects are customizable animations that react to your visitors as they scroll up and down the page. This feature is available on every Divi module and works the same for all.

Submit a Comment

Your email address will not be published. Required fields are marked *