Custom CSS - How and Why It's Used in Sections

Divi is an incredible builder and you can certainly do a ton of things with its built-in settings. 

We're sure we'll see the introduction of even more new settings in time, but for now, we believe it does not (yet) have the ability to configure the necessary settings to create a particular interface design or effects. 

So by including Custom CSS in a seperate Code Module or labeled within the Row, Column or Module, you can learn how we've used various CSS properties to achieve a desired effect. 

Or you can  simply remove the Code Module and take control of the design yourself.

Please note: Custom CSS is used sparingly and currently over 82% of all DiviWP sections don't rely on any custom CSS.  

Custom CSS is only used in places where it is necessary to achieve a desired affect or an optimal responsive user experience and where the Divi Builder was unable to do it alone. 

Support: You can rest assured that support is always on-hand and we'll be able to guide you as far as possible should you require assistance with any custom CSS we have included in our layouts, templates or sections. 

There are two cases where custom CSS can be identified in Page Layouts, Templates or Sections:

  1. Positioned in a separate Code Module and clearly labeled
  2. Added to the admin labels for any Row, Column or Module

When you are editing in the Visual Mode and building on the front-end of your website, Custom CSS Code Modules or Custom CSS configured within a Row, Column or Module is not visible. 

For most users and use-cases this is perfectly acceptable as you can still make your changes to various settings, toggle between the desktop, tablet and mobile views and publish your page to achieve the look in the demos. 

Interactive Sections (3-7 only) are the exception because those rely on jQuery to hide or show elements. The Visual Builder renders the jQuery code on the front-end making it impossible to view the hidden Sections, Rows or Modules. For those sections you will need to access the Layer View or Wireframe Mode to edit them.

Accessing the  Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure.

Case 1 Example: Positioned in a separate Code Module and clearly labeled

Here's an example taken from the Listing 1 Page Layout via the Layer View (Learn more about the Layer View here)

Note: Each module starts with what it is and then describes the html hierarchy of the elements in use. 

For example, the image module, listed last in the screenshot above, and labeled "Image .diviwp-listing-height-100 315x315" is describing:

  • An image module
  • With a custom class name diviwp-listing-height-100  
  • And with suggested image dimensions of 220x220 (WxH) proportions (these are suggested, you may of course use your own image dimensions)

Above the image module, you'll a see Code Module labeled "CSS Code for .diviwp-listing-height-100 to maintain image 100% height to container row"

The Code Module admin label is describing what the CSS properties within it's module are targeting and describes what it is used for. 

In this case, the code module contains css that is targeting the classname .diviwp-listing-height-100 and applying CSS properties to maintain the image height 100% to it's parent column, thereby preserving the "card" design of the row at various responsive breakpoints. 

Here's the result of the design at various breakpoints:

Notice how the image maintains it's proportional height to the card row and also crops to a perspective that maintains an aspect ratio of 16:9. This allows any image to be uploaded and dynamically resized correctly to the fill the correct height proportionately. 

Note: This does not produce a new image file, it merely uses an aspect-ratio friendly CSS trick for tablet and mobile breakpoints. 

Can I edit these labels?

Of course! You can edit the admin labels for any Section, Column, Row or Module. You can even reset the admin label to its default setting.

Changing or reseting the label will not affect the Section, Column, Row or Module in any way. 

What if I don't want to use any Custom CSS?

You may remove any Custom CSS module within the layout by simply deleting the code module or by going into the Row, Column or Module Settings → Advanced → Custom CSS and removing it.

This may result in a sub-optimal user experience as the design may not look as polished across mobile, tablet and desktop screen sizes. 

Here are a few use-cases using the example above:

In the example above, a larger sized image is used (400x400) and because the image needs to retain it's original proportions it results in white-space below the image (the setting "Show Space Below The Image" in the image module is toggled off). 

Notice how the space below the image doesn't make the card design feel "polished".  

Here's the same row in tablet view. 

Notice how much vertical space the image takes up unnecessarily - that's crazy huge! We had to zoom out 50% just to make sense of it! 

A few alternative solutions you might be interested in or want to try yourself to mimick this image effect:

  • Upload different images for Desktop, Tablet and Mobile views in the builder. 

We don't like this solution because it triples the amount of work you're doing for yourself, having to create the images and then upload them individually for each change. 

  • Duplicate the row and make the "Desktop" row invisible and the "Tablet" row visible.

We don't like how this solution doubles your time to make a change. Any change you make to the first row, you'll have to remember to make for the second. We like striving for a " single source of truth"  as far as possible.

  • Use the image as a background image of it's parent column and leave the column empty

The card design in the template is optimized for usability so the ability to click on the image is important. You can't click on background images. 

You might say that you can set the  column to be clickable which would "mimic" the same effect as having a clickable image. This is true and is an alternative option, however, setting the background image in the column is not an intuitive editing experience for users who might be updating the layout on a regular basis. There are also SEO sacrifices such as the background image not being indexed for Google Image.

Case 2 Example: Added to the admin labels for a Row, Column or Module

If Rows or Columns have Custom CSS configured within their  Settings → Advanced → Custom CSS editor, it is mentioned in the row or column title.

Here's an example:

The second opened Row label is describing how the 2nd Column in the Row has Custom CSS flexbox properties enabled. 

The Column label mentions the custom css flexbox for easy reference.

Side Note: We have a tutorial on understanding the basics of flexbox and how you can use it with Divi which will be published soon!

Back to the example above, if we click on the  Settings → Advanced → Custom CSS editor, here's what we'd see.

In this particular example, enabling the use of: 

  • display: flex;
  • flex-direction: row; 
  • align-content: flex-start;

...on the Column Main Element enables us to order modules side-by-side on the same row in the column. 

Side note: For those of you curious, the "-" prepended to the property e.g -ms-flex-wrap: wrap in the custom css are known as vendor prefixes which allows designers to target all browser variations to make sure they are fully supported. This article is a good primer on prefixes if you're interested, and check out autoprefixer.github.io if you're looking for an excellent tool.

Can I move the CSS in the Custom CSS Code Module into Divi's Theme Options, My Theme's Customizer or my child theme? 

Of course! 

All you'd need to do is copy the custom css classes and their properties and paste them into one of the options above. 

Just remember to delete the opening and closing <style> tags or <script> tags if you're moving any custom javascript.