Adding Custom CSS in DIVI Webpages.
Divi! One of the most popular Theme Builder comes with flexible tools to develop incredible website in few clicks. It has some functionality which attract not only learner or bloggers but also Website Designer / Developers. Implementing our own CSS is among such feature of Divi which make Normal Users or I.T. Professional use Divi again & again.
You can’t only add custom CSS using Divi Theme Builder to Single Web Page but can also embed it from Multiple Pages to particular Module’s smallest part & many more. This make Divi really versatile and user-friendly WordPress page builder. Divi comes with Built-in Custom CSS Inputs which allows Users to add Advanced Responsive CSS codes.
Here we have listed down several ways to add or embed custom CSS to pages created using Divi Theme, as well as illustrate where to add custom CSS is convenient & where you can use embed CSS which will make your Website load faster.
Divi has several ways to Additional CSS on our website never mind if its Section, Row or a single module. we can’t list them all but have listed most used methods which will surely make your work run smoothly.
- Embed Inline CSS in module’s content.
- Add CSS in Advanced tab of the modules, Rows or Section.
- Using Theme Customizer to Add CSS.
- Embed CSS in Divi Builder of page or Blog Settings.
- Inserting Code module in Page for including CSS.
- Appending “style.css” file of Divi child theme.
- Including CSS in Custom CSS Box of Divi Theme Options dashboard.
Where not to Add CSS.
If you haven’t installed any of Divi Child Theme that mean you are using core DIVI theme then don’t ever add your CSS to style.css file (Appending “style.css” file of Divi child theme). You don’t have to worry in case of using Divi Child Theme you may alter & add custom CSS in style.css. It is because DIVI overwrite style.css file whenever Divi is updated.
Why Some CSS doesn’t work in Divi.
1. Incorrect CSS
CSS code you have used might contain some syntax errors check weather you have closed all opening parentheses or else use CSS Checking tool to check your CSS code syntax. Some tools are listed below
2. Class or Id is used Incorrect or doesn’t exist.
You may have delete or recreated module, row & section using Divi’s Front End Editor later on you forget to give it a Class / Id or have given another name. Cross check your structure in such case.
3. Cache Memory.
Nowadays Web hosting uses Cache Memory to load your website faster & reduce duplicate CSS Loading. Some Wordpess site has Plugins to manage Cache. While designing Webpages this cache is not cleared frequently result in old CSS is rendered even though you have altered it many time. So while designing your website, it’s better to disable cache system. Once everything is running smoothly enable it again.
0 Comments
Trackbacks/Pingbacks