When Do You Need Custom CSS in Divi?

Divi covers a huge range of design options without any code. But there are moments when you need something beyond what the design panel offers — a specific hover effect, a custom animation, a unique layout tweak, or a style that targets a deeply nested element. That's where custom CSS comes in.

The good news: Divi makes adding CSS straightforward, and you have several places to do it depending on how broadly you want the styles to apply.

Method 1: CSS in the Advanced Tab (Element-Level)

Every section, row, and module in Divi has an Advanced tab with a custom CSS area. This is the most targeted approach — styles here apply only to that specific element.

  1. Open any module, row, or section's settings.
  2. Click the Advanced tab.
  3. Scroll to the Custom CSS section.
  4. You'll see three fields: Before, Main Element, After — these correspond to CSS pseudo-elements (::before, the element itself, ::after).
  5. Write your CSS properties (without the selector) directly in the Main Element field.

Example: To add a subtle box shadow to a module, enter this in the Main Element field:

box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border-radius: 8px;

Method 2: CSS Classes and IDs

Also in the Advanced tab, you'll find fields for CSS ID and CSS Class. These let you target elements from an external stylesheet or the global custom CSS area.

  • CSS ID: Use for unique elements (only one per page). Target with #your-id in CSS.
  • CSS Class: Use for reusable styles across multiple elements. Target with .your-class in CSS.

Assigning meaningful class names (e.g., hero-section, service-card) makes your custom CSS readable and maintainable.

Method 3: The Theme Customizer Custom CSS Panel

For site-wide styles, go to Appearance → Customize → Additional CSS. This is the right place for:

  • Global resets and overrides
  • Site-wide hover effects on buttons or links
  • Styling WordPress elements (comments, pagination, etc.) that Divi doesn't expose in its settings
  • Targeting your custom CSS classes defined in the Advanced tab

CSS added here persists across theme updates (unlike editing theme files directly) and loads on every page of your site.

Method 4: Divi's Integration Tab (Per-Page CSS)

In the Divi Builder, click the gear icon in the bottom toolbar to open Page Settings. Under the Integration tab, you can add CSS in a <style> block in the <head> section. This is useful for page-specific styles you don't want to add globally.

Practical Examples of Useful Custom CSS in Divi

Make a Button Fully Rounded

border-radius: 50px;

Add this to the button module's Main Element CSS field.

Add a Gradient Overlay to a Section Background

position: relative;

...then in the Before field:

content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, rgba(123,79,219,0.7), rgba(255,107,53,0.4));
z-index: 1;

Animate a Module on Hover

In the Customizer's Additional CSS, with a class of .hover-lift on your module:

.hover-lift {
  transition: transform 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
}

Best Practices for Custom CSS in Divi

  • Use classes, not IDs, whenever possible — they're more reusable and have lower specificity conflicts.
  • Comment your CSS with /* notes */ so you (and others) know what each block does.
  • Avoid !important unless absolutely necessary — it creates a specificity arms race that's hard to unwind.
  • Test on all devices after adding custom CSS — some properties behave differently on mobile.
  • Keep global CSS lean — only add to Additional CSS what truly needs to be global. Page-specific styles belong in the Integration tab.