Are you looking to add custom CSS to Divi theme pages? If yes, continue reading this article. This guide will help you learn how to style your pages using CSS with different methods.
Divi is one of the widely used themes in WordPress, and it also comes with many customizations. This also includes various ways to add custom CSS on posts and pages.
In Divi, you can add custom CSS, change the CSS for individual modules, and customize the CSS for all the modules in general. In this quick blog post, I will show you how to add custom CSS to Divi theme pages.
Let’s dive into the guide!
What is CSS & Why Add it to Divi Theme?
CSS stands for “Cascading Style Sheets”.
CSS is a style sheet language that is used to develop the presentation of web page content. It deals with the layout, style, and appearance of a web page. It can be used in HTML to apply styling to the elements in your webpage. They can also be used to style the text and the background of your web page.
The main purpose of CSS is to separate page content from the design and layout of the page. The style sheet is then linked to the HTML document. Whenever the page is loaded in a web browser, the style sheet will be referenced, and the CSS will determine how the page will look.
Divi comes with many built-in customization features and options that allow you to change the style or look of your website and for many people, these options are more than enough. However, some website owners need more complicated customizations on their websites that are not available within the Divi theme builder. So, in this case, they can add custom CSS to Divi theme pages.
How to Add Custom CSS to Divi Theme
There are multiple methods that you can use to add custom CSS to the Divi theme, and in case you don’t have access to the divi theme, you can use our exclusive divi discount code to get 10% OFF on your purchase.
Now back to the post; all the methods we’re going to share in this article are easy to use and don’t need any extra WordPress plugins.
Here are the methods with easy-to-follow steps:
Method 1: Inline CSS
Divi allows you to add CSS to any post or page as inline text.
Inline CSS is written directly in the page’s HTML structure. By using it, you don’t have to go anywhere on the website; you can add all your codes directly to the page content.
To add Inline CSS, navigate to the Text Module and switch to the Text tab and there you will see the HTML structure of your page as shown in the above image.
In the Text tab, you can add various CSS and HTML codes to style your page. For example, if you want to change the color of text, then you can use CSS style: “<style=”color:#e03574;”>your text goes here</style>”.
You can refer to the above image to see what the inline CSS looks like.
While using inline CSS, you should keep in mind that all the code should be used under <style> HTML tag. If not, then the code will not work, and you will not see any change in your content.
Method 2: Divi Theme Options
Another way to add CSS is to use Divi’s in-built theme options. It is one of the widely used and popular methods to add CSS as it makes it easy to store all your CSS in a single place. Moreover, the code added under theme options will affect the whole website at once.
The best part of using this method is that your code will not get overwritten whenever Divi updates its version. You will also get numbers at every line of code and also various colors for different codes which makes it easy to format the code.
To use it, navigate to “Divi > Theme Options” and scroll down till the end of the page and you will find a “Custom CSS” box as shown in the above image, where you can add your code.
Method 3: Divi Code Module
Divi offers various modules that you can add to your page. One of them is the Code module. It allows you to add CSS and also HTML and JavaScript to the page. The formatting of the code module is similar to Divi Theme Options, and also your CSS code should be wrapped under “<style></style>”.
This method of adding CSS is perfect for codes like shortcodes, embed codes, iframes, and more. As an example, one of our posts on how to add a YouTube video background uses a code module.
To start using it, simply open any post or page and insert the Code module. Next, paste or write the code in the given box as shown in the above image. Finally, save and publish the page.
Method 4: WordPress Theme Customizer
WordPress allows you to add custom CSS to the default theme customizer. This is one of the easiest ways that you can use to insert code that will affect the entire site.
By using it, you will get a numbered code field and highlighted code syntax. This method is recommended when you want to make live changes on your site.
The process of adding custom CSS using this method is very easy. Simply, navigate to “Appearance > Customize” and go to “Additional CSS”. Here, you can add your custom CSS code as shown in the above image.
Method 5: Divi Advance Tab
The Advance tab of Divi’s row, column, modules, and section allows you to add custom CSS. The Advance tab of each has various boxes to add CSS including Before, Main Element, After, CSS ID, and Classes. For example, you can see the above image for Section’s Advance Tab that you can find by navigating to “Advanced > CSS”.
The drawback of this method is that the fields do not have any numberings or color formatting. Also, by using the Advance tab, you can only add a few CSS customizations. If you are looking to add more complex CSS, then you should refer to other methods in this guide.
Method 6: Divi Page Settings
Every page in Divi has settings where you can find an option to add custom CSS. But, CSS added using this method only affects that specific page and not the entire site.
To start using this method, open any page from your WordPress dashboard and click on the Settings icon as shown in the above image.
After clicking on the settings icon, you will see a popup screen where you have to navigate to “Advanced > Custom CSS” as shown in the above image.
Here, you can add your custom CSS. The best part is that you will get numberings and color formatting while adding your custom CSS code.
Method 7: Divi Theme Stylesheet
This method is one of the most common and widely used for adding custom CSS to Divi. Basically, in this method, you will add CSS to the Divi theme’s stylesheet.
To find the style sheet, navigate to “Appearance> Theme File Editor” select “Divi” as your theme, and select “style.css” as shown in the above image. Here, you can add your custom CSS code that will affect the entire site.
This method is only recommended if you want to add too advanced CSS – but if you are looking to add very basic CSS then you can consider other methods mentioned above.
💡 Recommended Readings…
Frequently Asked Questions (FAQs):
If you still have questions in your mind then are some common and frequently asked questions by users:
Q1. Can you add a custom code to Divi?
Yes, you can definitely add custom code to Divi. The Divi builder allows you to add CSS, JavaScript, and even PHP to posts, pages, and the entire site.
Q2. How do I add custom CSS to Divi?
You can add custom CSS to Divi theme pages by using different methods. I have listed all of them in the above guide, or you can check them below:
- Inline CSS
- Divi Theme Options
- Divi Code Module
- WordPress Theme Customizer
- Divi Advance Tab
- Divi Page Settings
- Divi Theme Stylesheet
Q3. Where are the custom CSS code modules in the theme options?
You can find the custom CSS box by navigating to “Divi > Theme Options,” and at the end of the page, you will find a box to enter the custom CSS.
Q4. Can I add custom CSS to Divi without plugins?
Yes, sure. You can add custom CSS to Divi without using any plugin. Also, in this guide, I have not used any WordPress plugin to add custom CSS to the Divi theme page.
Wrapping Up!
Hopefully, you have learned how to add custom CSS to Divi theme pages by reading this guide. Now that you know how to write CSS code and add it to your Divi theme, you can customize your website to look just the way you want it to.
If you have any questions, please don’t hesitate to comment below. Thanks for reading and have a great rest of your day!
