Divi Design Settings and Advanced Module Settings
Divi Design Settings and Advanced Module Settings
Whenever you edit aModule,RoworSection, you will notice that in the configuration pop-up window there are three tabs:
Tab Content
Design tab
Advanced Tab
TabContent
Everything you need to create amazing designs in Divi and get the most out of each module is on the tabContent.
However, if you want to have even more control over the appearance of the module, you can go to the tabDesign.If you are a developer and prefer to use your own codeCssinstead of the design controls offered by the Design tab, you can go even further by entering the tabAdvanced.When used together,There is nothing that cannot be customized.
TabDesign
Design configurations vary from module to module.
We have incorporatedall possible design optionsthat you might need within the tabDesign.
Because of the large number of configurations available in certain modules, they have been organized intodrop-down menus with labelswhich makes it easy to switch between the different groups of options.
You will also find asearch boxvery practical at the top, which makes it easy to quickly find a specific design option.
To locate and use design settings: Edit amodule module module,row roworsectionexisting (or create a new one), the configuration pop-up window will open, click on the tabDesignto deploy all visual customization options.
From this tab, you can do virtuallyof everything. Available configurations will vary depending on thetype of modulethat you're editing.You will normally find options to adjust:- Typography: text size, spacing between letters, line height, etc.
- Spacing: custom values ofmarginandfilling (padding)
- Colors: text color, overlay color, column background colors, among others
- In addition, you will find a lot ofunique adjustmentsfor specific elements according to the module
Leveraging all these design options lets you create something trulysingle and customized.
TabAdvanced
On the tabAdvanced, you can add aCustom CSS IDor aCssto apply your own CSS code from the filestyle.cssof yourtheme child.
If you want to avoid the need and complication of creating child themes, you can apply CSS directly to individual modules on specific pages using the drop-down menu optionsCustom CSS.
Here we have broken down all the structural elements of the module and offer you text fields where you can write your own CSS properties directly.
You can apply CSS to specific parts of the module from this dashboard.
For example: Apply custom CSS directly to aBlurb module icon, ca pseudo-element::afterdirectly from theDivi Visual Builder
You can also control thevisibilityof an element (section, row, module) using the optionVisibilityor modifying the behavior of the element, such as making itsticky(sticky) on the page, among many other functions.
Popular Articles
How to Create an App for Restaurants (with or without Delivery)
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...APPS: Radio
The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...APPS: Audio & Music
How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...QR Promotions
This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...
Related Articles
The Divi Video Slider Module
How to add, configure and customize the Divi Video Slider module. < The Divi Video Slider module is a simple way to display a collection of videos on your website. You can display a portfolio of videos, training videos, tutorials and more. ...The Divi Fullwidth Slider Module
How to add, configure and customize Divi full width slider module. Divi Full Width Slider Modulecan show calls to impact action, highlight important content from your website such as a popular page or publication, and divide textual content for ...The Divi Email Optin Module
How to add, configure and customize the Divi email subscription module <br> Divi Email Subscription Modulesimplify the process of increasing your email subscribers by offering attractive registration forms and easy ...The Divi Post Slider Module
How to add, configure and customize the Divi Publications Slider module. < The Divi Post Slider Modulecan display recent blog posts, reviews, featured projects, inspiring quotes, upcoming events and more. They can be large, small, fixed ...Getting Started with the Divi Builder
What is the Divi Visual Builder? Divi is a modern visual builder for WordPress that does not require programming and works by drag-and-drop. With Divi, you can create stunning websites from scratch without writing a single line of code (unless you ...