How to Escape Custom CSS in Divi Modules: A Guide to Advanced Styling

It is like an Escape Room for CSS code.

Divi is an extremely flexible theme that certainly enables you to build some awesome sites, but they seemingly confine you to a box when you want to add some more complex CSS directly into a Divi Module.

Fear no more, because your friends here at Divi Engine have a pretty neat trick to teach you that helps you bust out of these claustrophobic confines and lets you add just about any level of complex CSS directly to a Divi module.

Strap in for this quick journey into something that will become part of your normal dev routine.

 

Welcome to this tutorial on escaping custom CSS in Divi modules and adding more complex styles directly within your modules. If you’ve ever used the custom CSS field on the “Advanced” tab in Divi, you know that it can be both a blessing and a curse. While it’s a great way to add simple styles to your modules, it quickly becomes limiting when you want to add more advanced styling, such as keyframe animations or references to other classes. This is where this tutorial comes in – we’ll show you how to escape the custom CSS jail and level up your design.

In this tutorial, we’ll share a quick and simple trick that will let you build awesome complex module interactions. We’ll also show you how to add more advanced styling directly within your modules, using techniques like keyframe animations and references to other classes. Whether you’re a beginner or an experienced Divi user, this tutorial will provide you with the tools and techniques you need to take your website design to the next level. So let’s get started!

Video Tutorial

Overview of custom CSS in Divi modules

Adding custom CSS to a Divi module is a great way to add unique styles to your website that aren’t available through the built-in options. Divi makes it easy to add custom CSS to a module using the custom CSS field on the “Advanced” tab.

To add custom CSS to a Divi module, simply navigate to the module you want to add the custom CSS to, and open the module settings by clicking the gear icon. Then, click on the “Advanced” tab and scroll down until you see the “Custom CSS” field.

In this field, you can add any CSS code that you want to apply to the module in various designated classes.

For example, if you wanted to change the font color of a blurb module title to green, you could add color: green; in the Blurb Title tab of the Custom CSS area.

Divi Custom CSS on Advanced Tab
Once you’ve added your custom CSS, click “Save & Exit” to apply the changes to your module. You should now see the custom styles applied to your module.

While the custom CSS field is a great way to add simple styles to your modules, it can quickly become limiting when you want to add more advanced styling. In the next section, we’ll explore ways to escape the custom CSS jail and add more complex styles directly within your modules.

Why Escaping custom CSS in Divi modules is a good idea?

While the custom CSS field on the “Advanced” tab of Divi modules is a great way to add simple styles to your website, it can feel like trying to build a skyscraper with a toy hammer when you want to add more advanced styling. You start with grand visions of a website that will make your competitors green with envy, but before you know it, you’re stuck in a custom CSS jail, unable to make your designs a reality.

The custom CSS field is like a fussy cat – it’s great when it’s behaving, but as soon as you want it to do something more complex, it’ll start scratching and hissing at you. It’s limited to simple styles, and if you want to add more advanced styling, such as keyframe animations or references to other classes, you’ll quickly realize that you’re going to need a bigger hammer.

Luckily, there are ways to escape the custom CSS jail and add more complex styles directly within your modules. In the next section, we’ll show you how to modify the HTML or PHP code of your modules to remove or override custom CSS, and add more advanced styling to your website. So put down that toy hammer, and let’s get to work!

Adding complex CSS to Divi modules

}

That is it. A single curly brace will escape the CSS in the area you are working in. I know you were waiting for some long drawn-out process, but that is really it.

The easiest way to think of this is that there are invisible opening and closing curly braces in that text box where you can add your custom CSS.

Invisible curly braces

Using the new Bing to write CSS code for Divi

Just head over to Bing and slide down to reveal the chat option. Alternatively you can just click chat in the header navigation and you are ready for some action.
New Bing with ChatGPT
All I did was give it the prompt that described what I wanted the button to do. Now, it should be mentioned that you might have to engineer the prompt a bit to get exactly what you want by asking following up questions.

Practical Example using the Generated CSS

Now that you have used the new fancy Bing, it is time to put all the things we learned to work.

We have our generated code.
We have our new trick to add more complex CSS.

So, let’s go add it!

Adding the escaped CSS to a Divi button module.
Note the first } to escape the CSS for the module, then the omission of the closing one.

Congrats, you just hacked Divi CSS.

Conclusion

In conclusion, we hope this tutorial has provided you with the knowledge and tools to add more complex CSS directly within your Divi modules, without the need to modify HTML or PHP code. By using the custom CSS field on the “Advanced” tab, you can add more advanced styling, such as keyframe animations and references to other classes, to your Divi modules with ease.

We also introduced the concept of using the new Bing with ChatGPT to generate code for use on Divi theme websites. With ChatGPT, you can generate CSS, HTML, and PHP code that can be used to customize your Divi website in unique and exciting ways. We even recently did a tutorial on that called Streamline Your Web Development with ChatGPT: A Tutorial on Using ChatGPT to Write Code for a Divi Site πŸ˜‰.

With the techniques and tools covered in this tutorial, you can take your Divi website design to the next level and create a website that truly stands out. So go forth and unleash your creativity, and remember – there’s no limit to what you can achieve with Divi!

written by

Robey Joyce

Business Development Manager

You probably have heard his voice in our tutorial and documentation videos – but he does quite a bit more here at Divi Engine. Robey also works to help bring our products to awesome folks just like yourself.

0 Comments

Submit a Comment

Explore more from Divi Engine