WordPress is an immense website builder where the web developer gets reliable options for their website customization. Divi is one of the popular WordPress themes with the most wonderful features which are easy to interact with and work with. In this guide, I will discuss how to add CSS for Efficiency.
In Divi, there are Six different ways to add CSS –
1. Inline Style.
2. Advanced Settings.
3. Code Module.
4. Page Settings.
5. Custom CSS Box.
6. Child Theme.
1. INLINE STYLE
The Inline style where the User can write CSS directly into the Text part in every module(such as Text module, Blurb module, Call to Action, etc) by switching from Visual to Text tab which only affects the particular text. When you open the Module Settings, you will see the Visual tab.
Next, switch to Text and add the CSS code using the Style Tag as per your wish:
2. ADVANCED SETTINGS
Another place where I can add Custom CSS at the module level is the Advanced Settings option. This option is preset in every Module Settings and just limited to that particular module.
To access these settings, you will need to go to Module Settings > Advanced > Custom CSS. Here you can add Custom CSS for whole modules or for a specific element in the module. It also has the option to add pseudo content using After and Before:
3. CODE MODULE
There is a unique module for coding which is Code Module, in the Code Module you can code the CSS and Javascript by adding their respective tags such as <style></style> and <script></script>. This module will help you to add custom codes, embedding scripts, iframes, and more to the webpage. The code I’ll add in the Code module will only work on that particular page.
4. PAGE SETTINGS
One more option where I can add code on the page level is using Page Settings/Post Settings. You can access Page Settings by clicking on the Cog icon:
Next, go to the Advanced tab and place the CSS in the Custom CSS area. The code you added in this area will only work on that particular page:
5. CUSTOM CSS BOX
Theme Options is one more place where I’ll add Custom CSS globally. The code added here will work on all the pages. So you should always make sure that whenever you are placing CSS here – first assign a Custom Class to that module/row/section and use it to write CSS code. That way the CSS Code will not affect all the modules on the site.
You will need to go to WordPress Dashboard > Divi > Theme Options and add the CSS in the Custom CSS area:
6. CHILD THEME
As you know Theme Options is the best place to add all the global CSS code, it is the best alternative to put all the CSS in the Child Theme style.css (if you are already using it). The code you added in Child Theme will only work as long as the Child theme is active. You activated the parent, the changes in style.css will not be applied.
To edit the style.css file, you can go to Dashboard > Appearance > Theme Editor.
After that make sure the Child Theme using the option in the top right corner and edit the style.css file:
0 Comments