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.
