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.

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.

Using the new Bing to write CSS code for Divi

Practical Example using the Generated CSS

We have our generated code.

We have our new trick to add more complex CSS.

So, let’s go add it!

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!