pixel

Two things you need to get into a bar, and two things you need to understand to build in Divi.

When you need to apply custom styling in Divi, figuring out when and how to use ID and CLASS selectors is the first step.

ID Selectors
Start with a # (hash), like #id-selector
Can be set on only one unique element
Only one can be set per element
Are perfect for styling the odd duck

CLASS Selectors
Start with a . (dot), like .class-selector
Can be set on multiple elements
Multiple classes can be set per element
Are perfect for styling a re-used element

Example of Using ID Selector

You’re using the blurb module across a 3 column row, but one of your blurbs has a bit more text and it throws off the alignment. You can add an ID under CSS ID and make your custom settings in Divi Settings Custom CSS.

#shrink-blurb-words {
font-size: .7em;
}

In the more recent versions of Divi this type of use is deprecated, as each element has within Divi the ability to set custom CSS right in the module. Usually this works, however there can be some specific cases where the old way may be necessary.

Example of Using CLASS Selector

You’re using the Person module to display a number of employees, and you want them all to have round images. You can use the class “et_pb_team_member_image” to set a border-radius: 50%; on all of the Person module images.

.et_pb_team_member_image {
border-radius: 50%;
}

Suppose you are using the Person module in multiple ways, and only on one set of Persons do you want the photo to be round. You could add the CSS class “round-head” to the Divi settings for the Person modules, and make your custom settings in Divi Settings Custom CSS for the class.

.round-head .et_pb_team_member_image {
border-radius: 50%;
}

I’m sure you’re crafty enough to notice that I strung together two classes there. Why? Because when you set a custom CLASS in Divi, it applies to the entire module, and we want to select the Image element descendant of that module.

Hope this helps! Feel free to post questions!

CSS 101- What are ID and Class-

[sale_products per_page="8" orderby="menu_order" columns="0" order="ASC"]
Russell Mann
Russell Mann has been developing websites since 1997 on a number of platforms, starting with notepad.exe and Front Page. He built a custom CMS before it was cool, trading up to community source platforms like Drupal and WordPress. Lately he's been building everything in Divi, including sub work for everything from his family's businesses to Silicon Valley firms.
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This