Part One:
Introduction to CSS

What is CSS

CSS stands for Cascading Style Sheets, with emphasis on the word cascading. CSS is a development syntax that, when written and applied to an HTML element, will give the element a new look and feel.

If you think of HTML as the content and general structure of the website, then think of CSS as the design style that influences various aspects of these elements. CSS styling can enhance various web elements such as color, style, font size, margins, padding and much more.

CSS is written or compiled in an Integrated Development Environment (IDE), such as Sublime or Brackets. CSS can also be written using a text editor.

A OVERVIEW OF BASIC CSS TERMINOLOGY

1. CSS commands are two-fold. CSS is comprised of: 

1. The selector: this defines which HTML element in your website you’d like to style, and
2. The declaration: this is the actual styling itself, broken down further into:
   • The property: this is the aspect of the HTML element you’d like to change (i.e. would you like to change the color, font-size, border-width of the element),
   • The value: this is the style variation you’d like to apply (i.e. the color property becomes green or blue, the font-size property becomes 12px or 20px etc.)

The use of the word ‘cascading’ in CSS relates to the order in which commands are executed. In CSS, commands are run from the bottom up. In other words, commands written at the top of a CSS file (stylesheet) can be overridden by another command issued further down, either in the same stylesheet or in another linked CSS file.

It is important to give consideration to the order of things when writing CSS. Without diverting too much, as we’ll cover this later, it’s worth noting that another level of prioritization can be added to an element using either CSS Classes or IDs. Classes and IDs are selectors that can be used to diversify elements and the styling thereof even further. If you’re familiar with the Divi Builder, you would have noticed ‘CSS Class’ or ‘CSS ID’ in the Advanced tab.

We’ll return to these and other CSS terms and concepts later in The Divi CSS and Child Theme Guide.

Why You Should Learn CSS

Even though Divi requires no knowledge of code, designers will find their websites a step above the rest by gaining an understanding of CSS.

Divi’s out-of-the-box aesthetic is generally appealing, although some users may want to create a more unique look and feel for their website. The modules of the Divi Builder can be styled and customized using in the various settings in the Design tab. Beyond this, the Custom CSS tabs offer the ability to add CSS styling to each module. While this may suffice for small tweaks, if you’re looking to create a particular look and feel for your website, or wish to add more personalization, you’ll need to become familiar with CSS.

While there are hundreds of articles written about CSS in the general sense, there aren’t all that many that have been adapted specifically for use with the Divi framework or Divi plugin.

CSS for Divi

Our goal with The Divi CSS and Child Theme Guide is to make sure that Divi users understand the basic underlying principles of CSS. If you are a Divi user, it should be a priority to learn the ins and outs of the syntax in relation to the HTML elements used in the Divi framework.

What we will learn

The eBook aims to give you a deeper understanding of CSS as a syntax. It’ll discuss:

• Divi child themes and using stylesheets
• Adding custom CSS to your Divi website
• CSS selectors and Divi-specific CSS
• Troubleshooting CSS
• CSS resources

Like anything in life, learning a new skill can be overwhelming in the beginning, but if you’re ready for the challenge, you’ll transform the nature of your business for the better.

Not only will learning CSS help your immediate web design projects, but it’ll also have a serious, positive impact on your career. You’ll be able to accept more challenging web builds and charge more for your services.

Learn CSS with Divi Space

If you’re ready to become a rockstar Divi designer, learning CSS is the next step, and who better to learn this incredible skill set with than Divi Space!

BUILD POWERFUL WEBSITES

Created to help Divi users excel in their craft, the Divi Space online course, Transforming Divi with CSS & jQuery, will give learners deep insight into the fundamentals of CSS and jQuery to be able to begin building visually striking and functionally powerful Divi websites.

As well as learning core CSS and jQuery principles, specifically for use with the Divi theme, the Transforming Divi with CSS and jQuery online course will also take learners through the step-by-step process of building a website from start to finish. Here, learners will see these two powerful code bases, CSS and jQuery, in action.

Upon completion of the course, students will become a Certified Divi Frontend Developer, equipped with the skills to build exceptionally powerful and unique Divi websites. With the accreditation, learners will receive both a digital certificate as well as a badge that can be displayed on their website.

Learn more about our Transforming Divi with CSS & jQuery online course and kickstart your web design career!

Part Two:
Child Themes

An Introduction to Child Themes

Before diving into CSS, it’s important to mention that it is deemed as best practice to use a child theme when building a Divi website. The details and functionings of child themes will be described in detail later in this guide, for now, simply note that the use of child themes in development is considered best practice.

Child themes are comprised of a series of files. CSS edits are stored in a stylesheet. Using a child theme entails setting up a stylesheet to house all of your styling edits. This way, site edits will be preserved and won’t be overwritten when a theme update rolls around. This concept is explained in detail further in this guide.

WHEN YOU DON’T NEED A CHILD THEME

If you know for certain that you won’t be making any customizations to your Divi website, then you don’t need to worry about using a child theme. For those wanting to skip the child theme step but still preserve their site changes, Divi allows users to add CSS in a number of areas:

• CSS can be added to the Custom CSS area in the Divi Theme Options > General tab
• Quick, simple aesthetic changes can be added to the sections, rows and individual modules themselves (in the Advanced > Custom CSS tab of each)
• Each page, project or post can be individually styled using the Divi Builder Settings console

For further reading, visit the WordPress Codex and read through the literature on Child Themes.

Build a Divi Child Theme for Free!

If you’re ready to create a blank child theme for your Divi website, check out the Divi Space Child Theme Builder. Free to use, the Divi Space Child Theme Builder makes creating a blank Divi child theme quick and easy. To create a child theme, all you need to do is enter information relating to your Divi site, download the child theme and install it. To build a Divi child theme, use the Divi Space Child Theme Builder now!

What is a Child Theme?

“A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.” – WordPress Codex

Before unpacking what a child theme is, it’s important to understand what a parent theme is and also the relationship between the two entities.

PARENT THEME

Intricately developed by either an agency, company or individual, a parent theme comes fully packaged with all of the relevant code files and WordPress-ready functionality required for building a website. Any theme that you purchase via a theme marketplace such as Envato Market, or from a vendor such as Elegant Themes, would be deemed as a parent theme. If you’re a Divi user, then Divi itself will be the parent theme.

CHILD THEME

A child theme is a separate entity to the parent theme that can be created or purchased via third- party developers.

HOW A CHILD THEME WORKS

A child theme uses a series of various .php functions and WordPress optimized commands and hooks to call on the full functionality of the parent theme. This process is called enqueueing the parent theme. This basically means that the child inherits its functionality from the parent theme, and essentially “piggybacks” off of it.

When WordPress runs, it first looks to the files present in the child theme and executes the code it finds. If the files are not present in the child theme, it executes the commands found in the parent theme.

If you’ve created a header.php or footer.php file within a child theme, WordPress would execute the code found in the child theme. The only file that WordPress doesn’t prioritize child over parent for, is the functions.php file. In this regard, WordPress executes the code found in both files.

Although the child theme is given the space to take on a life of its own, it still only exists because of the parent theme, and only works if the relationship is set up correctly. This is why enqueueing the relevant functions must be done so with care.

Why Do I Need to Use a Child Theme?

Using a child theme gives you the space to make powerful aesthetic or functional changes to your Divi website. Technically, these changes can be made to the core files of the parent theme, but this is extremely risky as:

• You might break something in the code, and
• Theme updates will wipe out all of your edits.

Making use of a child theme ensures that you can make site updates in a 100% fool-proof and safe manner, and too, enjoy some time-saving conveniences for your later web builds by copying code between stylesheets.

CODE BREAKS

If you’ve ever looked at Divi’s core theme files, you’re bound to notice the millions of lines of code. For really advanced WordPress users, editing this code might be relatively easy, but for the general populace who aren’t 100% code savvy, who WordPress and Divi were made for, these lines and lines of code can be overwhelming.

Code is written in such an intricate manner that something as simple as adding a punctuation mark in the incorrect place will completely throw the entire operation off, rendering your theme, and website, broken.

If you want to tinker around with code, be it CSS or PHP related edits, using a child theme will grant you this space. With a child theme, you can play around to your heart’s content without creating any vulnerabilities in the core (parent) theme’s files.

THEME UPDATES

At various stages along the way, theme development agencies or creatives will decide to update their themes. These may be major updates such as theme version updates, or smaller ones such as bug fixes and minor improvements.

During a theme update, the theme developers will reassess the current version of the code present in the theme, and, if required, will make relevant changes or additions where deemed fit. As soon as the theme’s code is updated by the theme developer and is updated by the theme user, the parent theme files are essentially reset, and any code edits present will be overwritten. If you have made code changes to the parent file, you’re guaranteed to lose all changes and edits you’ve made.

Child themes solve this dilemma. If updates occur to the parent theme, your child theme will not be affected as it runs as a separate entity. As your child theme would have enqueued the parent theme, the relevant updated code will still reflect in the parent theme, but will not overwrite any changes set within the files of your child theme.

CONVENIENCE

With Divi’s versatile and robust nature, making aesthetic enhancements to a website is easy. Various modules can be assembled, each with a collection of different settings to style their appearance and function.

While styling each individual module is a good method for some, particularly users who require an easy- insert-and-edit option, others may find this process tedious as keeping track of the small nuances set within each individual model can be a pain. Small CSS tweaks can easily be added to the Divi Theme Options console, but using a child theme and the respective files make this process much easier.

How to Create a Child Theme

Setting up a child theme for a Divi website is simple. You could either use our child theme builder, purchase our Aspen Roots child theme, use a premium child theme, or, create your own. Each of these methods will suffice for building websites with Divi.

1. USE A CHILD THEME BUILDER

The Divi Space Child Theme Builder is a free, nifty tool that is incredibly easy to use. To create a child theme, all you have to do is enter your details in the text area boxes provided and all of the relevant files will be generated for you.
Once complete, your child theme will be sent to you via mail. After you’ve downloaded the child theme, simply upload the .zip file to your theme console on the WordPress dashboard, following the installation and activation of the parent (Divi) theme.

2. USE A PLUGIN

To make the process even easier, you could create a child theme by using a plugin. We recommend using the One-Click Child Theme plugin. After download and install, One-Click Child Theme will appear as another menu item within the Appearance tab on your WordPress Dashboard. Once here, simply give your child theme a new name and description and click “Create Child”. Once complete, you’ll have a blank child theme running on your Divi website.

3. USE THE ASPEN ROOTS CHILD THEME

Another extremely easy way to create a child theme is to use our Aspen Roots child theme. The Aspen Roots child theme ships with all of the already scripted files, including style.css, functions.php, footer.php, which will, after activation, automatically install to your WordPress website. The Aspen Roots child theme can be purchased from our store here

4. USE A PREMIUM DIVI CHILD THEME

If you’re looking to speed up your Divi web development process, a premium child theme may be the perfect solution for you. As well as the main child theme files, functions.php and style.css, premium child themes come complete with all of the bells and whistles already complete.

With premium child themes, both the web design and development is already complete. From layout design to element styling, font and color selection, and in most cases, animations too, practically every detail of the web design and development process is taken care of, all the user has to do is enter their original content.

Divi Space offers a collection of premium child themes for Divi. Spanning all categories, including entertainment, e-commerce, various forms of business and more, our child themes ship with a plethora of highly advanced features including online stores, forums, events calendars and much more.

To speed up your web development process, look no further than our high-quality, top-rated premium Divi child themes. As well as premium child themes, we offer a free Divi child theme called Divi All Purpose. Divi All Purpose has been designed to help brands and businesses create a single display or brochure website with very little effort. Versatile and designed to cater to a span of industries, business types, brand identities and objectives, Divi All Purpose can be downloaded for free here.

5. CREATE YOUR OWN CHILD THEME

It’s easy to create a child theme for Divi. All you’ll need is the correct tools and a bit of patience. If you’re interested in exploring and understanding what goes into a child theme, i.e. which file serves which purpose and so on, it might be a good idea to try out the process and gain even more knowledge for your web development practices.

We’ve broken down the process of building a child theme into a step-by-step guide in the following section.

How to Create a Divi Child Theme From Scratch

Building a child theme from scratch is a simple process. All a child theme is, is a series of files, typically, a:

• functions.php file,
• style.css file, also called a stylesheet, houses all of the website’s aesthetic enhancements,
• any other particular files you’d like to include unique code in, that’ll override the code in the main parent
  theme files.

To create the files required for the child theme, you’ll need either an IDE (integrated development environment) or a text/source code editor.

The source code editor, TextEdit (Mac) or TextEditor (PC), will come already installed on your computer, while the IDE’s will need to be downloaded from the internet and installed on your computer. Two of the most popular, standard editors are Brackets and Sublime. Both are free to download, easy to use and include color cues to make code easy to script up and identify.

Before diving in and creating each file, you’ll need to allocate a theme directory for the child theme within the WordPress installation.

CREATE A CHILD THEME DIRECTORY

The child theme directory will be the folder that’ll house all of the files of your child theme.

To begin, create a new folder on your computer and name it something related to your project. The child theme directory should be named something easily identifiable, something that can easily relate to your client. When naming the child theme directory folder, do not include spaces between the words, instead, use hyphens or remove spacing altogether, ie. Divi-Child-Theme or DiviChildTheme.

As you create the individual files, add them to the child theme directory. Once all of the files have been added, you can then add the child theme to your website, described in detail in the How to Install a Divi Child Theme? section.

STYLE.CSS

To create the stylesheet for your child theme, create a new file in your IDE or Text Editor and save the file as ‘style.css’. Then, copy the code below, paste it into the file and rename the theme name and author information based on your needs. Be sure to change the various details and replace with your own.

In the stylesheet description, the most important things to note are the “Theme Name” and “Template” sections:

• The Theme Name (the actual name of your child theme) becomes the display name within the Appearance > Themes of the WordPress theme selector
• The Template (which must always be labeled here as ‘Divi’) tells WordPress which theme it should use as the parent.

FUNCTIONS.PHP

The most important file in the child theme is the functions.php file as it will enqueue the parent theme (Divi). To begin, open the IDE or text editor. Copy the code below and paste it into the functions.php file.

Make sure to relabel the correct paths to both the parent and child theme folders. Once you have amended all of the above details to fit your deliverables, save the file as functions.php within the child theme folder.

SCREENSHOT.JPG

It’s recommended to add an image of your or your client’s logo or a similar graphic into the child theme folder. Create an image with the dimensions 880×660 px and save it as screenshot.jpg.

Include this image in the child theme folder along with the functions.php and style.css files. When your child theme is installed and activated, this image will display as the graphic in the Appearance > Themes section of the theme selector.

How to install Divi Child Theme?

Once you have created a child theme, either via the Divi Space online builder, plugin or have constructed one ground up using one of the editors, you’ll need to install it. Make sure that the Divi theme is already installed and activated.

There are a number of ways in which you can add the child theme to your Divi website.

LOCAL SITE / DEVELOPMENT ENVIRONMENT

If you’re working on a localhost server, navigate to the relevant folder in your directory, i.e. wp-content > themes. Here, you’ll see a folder containing all of the Divi files (installed as the parent). Simply drag and drop the child theme folder here, in the Themes folder, at the same level as the Divi theme file.

Now, log into the WordPress website and navigate to Appearance > Themes. Here, you’ll see the child theme package already installed. Click Activate and the child theme will begin working.

LIVE WEBSITE

If you’re working on a live website, you’ll need to access the theme files via the server. You can either do this using FTP, by manually working through the server or by creating a zip file of the theme package.

• If you’re using an FTP client (such as FileZilla or CyberDuck), create a new connection between the website’s server and your computer. Find the root folder of the website in the server connection panel and navigate until you find the WordPress > Themes folder. Add the child theme folder here.
• If you’re manually navigating through the server, log into the server via the hosting company’s portal and search for a section named File Manager or something similar. Again, search through the files in the root folder until you find the WordPress > Themes folder and add the child theme folder here.
• A final method is to add the child theme from the WordPress website itself. To do so, zip the child theme folder and upload it via the Appearance > Themes > Add New section within the WordPress website.

Once the child theme has been installed, it’ll need to be activated. To do so, navigate to the Appearance > Themes section of the WordPress website and click Activate.

Premium Divi Child Themes

Thanks to the nature of the Divi community, there are a number of incredible designers and developers that are creating ready-made child themes for Divi. If you’re looking to bypass the entire design process of a web build then purchasing a ready-made child theme would be perfect for you.

Not only do the premium Divi child themes help you save plenty of time, but all of the legwork is already done for you. From UX planning to aesthetic design, font selection and more, all of the bells and whistles are already crafted. All that’s required is for you to add your relevant text and image content.

We have a number of beautifully designed, highly functional Divi child themes on available through our store. If you’re looking to create an attractive website in a short space of time, browse our collection of Divi child themes.

Part Three:
6 Ways to Add CSS to Divi

6 Ways to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. These methods include:

1. Inline CSS added to the content section of a module
2. Custom CSS Box in the Divi Theme Options dashboard
3. Advanced options tab of the sections, rows and individual modules
4. Divi Builder Page Settings of an individual page
5. Divi child theme style.css file
6. With a Custom CSS and JavaScript plugin

DEMO SETUP

To illustrate the different ways of adding CSS to Divi, we’ve set up the following demo. Here, a single row with four columns holds a single text module. Each text module is filled with a paragraph of Lorem Ipsum.

The front end displays as such:

Add CSS to Divi Using Inline CSS

Any module within the Divi theme that has a content area (i.e. a place where custom text can be entered such as the text module, blurb module etc.) will allow for inline styling.

To add inline styles to a section of an element, you’ll need to target the element itself and add the < style > attribute, thereafter you can add any number of styling properties that relate to the specific element you’re trying to target and style.

To add inline CSS to a module in the Divi Builder (provided it has a content area), open the WYSIWYG Text editor, not the WYSIWYG Visual editor.

Next, assign a tag to the element. In this case, we’ll assign a < p > tag to make it paragraph text, and apply the < style > attribute. Once the style tag has been added, you can add various properties and values.

In this example, we’ll take the first text the first text module and style the text to have a heavier font weight and a different color (blue).

PROS AND CONS OF USING INLINE STYLING

PROS:

CONS:

Add CSS to Divi Using the Divi Theme Options Custom CSS

A popular way to add CSS to Divi is by using the Custom CSS box in the Divi Theme Options dashboard. To locate the Custom CSS box navigate to Divi > Theme Options and scroll all the way down the page until you see the Custom CSS box.

If you have a small handful of styling edits, the Divi Theme Options Custom CSS box is a great place to add CSS for your website. If you have many edits, it is better to use a stylesheet.

For the next example, we’ll take the second text module in our four column layout and style it by increasing the font and changing the color. If you know exactly which element you are targeting, you can enter the CSS directly into the text area. To find the exact property that you need to target, you can open the specific Divi module, navigate to the Advanced tab and click in the Main Element area. The name of the property will automatically pop up just above the text area.

Simply copy that selector, head over to the Divi Theme Options Custom CSS box, paste in the selector’s name and add the desired styling. Click Save Changes.

In the event that your Divi module has more than one element, for example, the Blurb module includes an image, a heading and paragraph text as the content, you’ll need to be a bit more specific as to which element you’re targeting in the module. In such cases, to explicitly target the paragraph text, you’ll need to add the ‘p’ selector.

Pros and cons of using the Divi Theme Options

PROS:

Add CSS to Individual Divi Modules using the Advanced Tab CSS

The next place that you can add CSS is in the Advanced Tab section of the individual module, row or section.

First, let’s cover the individual module’s Advanced options. Within the module’s Advanced tab, you’ll find:

• CSS ID and Classes: Here you can enter unique class or ID names that can be used to add even more layers of unique styling
• Custom CSS: Composed of the before, main element and after boxes. The before and after areas are for pseudo-elements, to add additional elements either before or after the content. The main content box is where the styling of the specific module should go.
• Visibility: Here you can decide whether the module should be hidden or shown on various devices
• Transitions: This lets you assign additional transition effects to animations, as set in the Design tab

Note, each module in the Divi builder is composed of different elements, and so will present a different set of options in the Advanced tab.

To add CSS to the individual module, open up the module itself by clicking on the hamburger menu, navigate to the Advanced tab and scroll down until you see the Main Element box. Here, add the various CSS styling, but note, you only have to enter the property and the value – you do not need to specify the selector.

Going a step further, you can also add CSS styling to the various rows and sections. While the sections don’t have too many styling options, the rows do.

To view the various styling options, click on the row’s hamburger menu, navigate to the Advanced tab and start scrolling to see all of the entry options.

Similar to the individual module’s Advanced tab, you’re able to add custom IDs and classes as well as CSS to the element itself (before, main and after), except that now, these are all offered based on how many columns are present in the Section.

To add CSS styling to a specific column, navigate to the Advanced tab and search for the Main Element box of the column itself, then enter the relevant CSS.

Adding CSS into the modules and rows can be useful for quick, simple edits, but beyond small changes that are going to stay the same forever, adding CSS this way isn’t really recommended.

If you’re going to be working on a website regularly, changing up the aesthetic or adding new content, using the module or row CSS may present a few problems down the line as trying to keep track of hundreds of lines of CSS entered into various modules scattered across a website can be confusing.

PROS AND CONS OF USING THE ADVANCED TAB CSS

PROS:

CONS:

Add CSS to Divi Using the Divi Builder Page Settings

Another way for Divi users to add CSS to their website is to use the Divi Builder Page Settings.

Great for quick changes that only apply to a single page or a small handful of pages, the Divi Builder Page Settings console lets users adjust variables on specific pages, post or project layouts, without having to adjust individual modules.

Any CSS code added to the Divi Builder Page Settings will only apply to the single page, post or project itself. An incredibly useful tool, the Divi Builder Page Settings replaces the need to write out very complicated, highly targeted CSS.

Within the Divi Builder Page Settings, there is a Custom CSS box. To access this Custom CSS box, click on the hamburger menu at the top of the Divi Builder and the Custom CSS box will pop up.

As well as the Custom CSS box, additional per-page customization options within the Divi Builder Page Settings include:

• Enabling split testing
• Adding a custom color picker palette per page
• Setting the pages’ gutter width, default light and dark text colors, and section and content background colors

To demonstrate the Divi Builder Page Settings, a second text module is added and assigned the H1 tag.

At this point, open up the Divi Page Settings console, scroll to the Custom CSS box and enter the relevant CSS styling. Note, here it is important to specify the selector that you’d like to target.

The Page Settings box is great for making simple changes to a single page, post or project layout, for example making headings on certain pages stand out, setting styling for images etc..

When it comes to making landing pages, maintenance mode pages or coming soon pages, the Divi Page Settings console is helpful as you can easily hide the page header, footer and bottom bar with minimal effort.

Pros and cons of using the Divi Builder Page

PROS:

CONS:

Add CSS to Divi Using a Stylesheet

In our opinion, the best way to add CSS to the Divi theme is by using a child theme and a unique stylesheet.

The concept of a child theme and using in conjunction with your Divi website was covered in Part Two of this guide, but as a quick recap:

• A child theme is a series of files that, when added together, form a ‘secondary theme’ to a parent theme,
• Using a child theme in development is repeatedly recommended as best practice as it’ll safeguard your web design efforts,
• A child theme can be made in various ways, such as using a plugin, the Divi Space Child Theme Builder or building one from scratch, as outlined in Part Two of this guide.

In our opinion, going this route – of creating a child theme and adding CSS styling to a stylesheet – is the best method for web development as it is extremely convenient having all code styling in one easy to locate place, and not spread across various spaces throughout the website’s pages and modules.

Another benefit of using a child theme and a stylesheet for CSS is that you have the ability to enqueue multiple stylesheets. This is particularly useful for large websites that have deep levels of customization in place.

PROS AND CONS OF USING A DIVI CHILD THEME AND EDITING THE STYLE.CSS FILE

PROS:

CONS:

If you’d like to build a child theme for your Divi website in just a few seconds, we recommend using our Divi Space Child Theme Builder.

Read our step by step guide to creating a child theme with the Divi Space Child Theme Builder.

Add Custom CSS and JavaScript with a Plugin

Another useful way of adding CSS is by using a plugin such as the Custom CSS and JavaScript Developer Edition. Going a step further, the plugin allows you to add CSS as well as JavaScript code to your website.

The Custom CSS and JavaScript Developer Edition plugin has a number of incredible features, including:

• Automatic text formatting and syntax highlighting. This is particularly useful for users that are new to CSS and who may make a mistake from time to time
• An easy to use code editor that includes automatic text formatting and syntax highlighting
• The ability to minify CSS and JavaScript files for the removal of unnecessary characters in code files in order to increase website performance
• Preview and publish states to help the web design process
• A handy revision history feature to save progress at set periods
• The ability to use multiple files for large web builds
• SCSS compatibility for advanced developers already making use of SASS CSS
• The ability to import and export files between web builds to save time and speed up development

After the plugin has been installed and activated, the plugin adds two new editor consoles, Custom CSS and Custom JavaScript, to the WordPress website.

For a thorough breakdown of Custom CSS and Custom JavaScript, read the article How to Add Custom CSS and JavaScript to your Divi Website with a Plugin.

Compatible with all WordPress themes, buy the Custom CSS and JavaScript Developer Edition plugin today.

Pros and cons of using the Custom CSS and Custom JavaScript plugin:

PROS:

CONS:

In Summary

There are many ways to add custom CSS to the Divi theme, the trick is to find the method that feels the most comfortable and suits your Divi design habits the best.

As mentioned above, we recommend going the child theme add stylesheet route, even if it is a bit more tricky to manage in the beginning. If you decide to add CSS to the modules, pages or content areas as inline CSS, we recommend possibly keeping a note of this so that if and when you return to a website, you don’t spend hours trying to figure out where certain CSS is being served from.

Part Four:
Divi Selectors

CSS Selectors

The following CSS selectors have been identified for use exclusively for the Divi Theme and Page Builder.

CSS is made up of three main parts. If you inspect any element on a web page you’ll see these three components straight away:

The selector is the exact series of classes, pseudo-classes, ID’s and elements used to target any on-screen element.

The selector can target a myriad things at once, as in the example above where all ‘img’ elements (image) are being targeted. At the same time, the selector, can be very specific and target an individual element or a small selection of elements.

The property is the ‘what’ you’d like to change with CSS. It could be a single aspect of an element, such as the color, or it could be collection of aspects such as height, color, border-radius, scale, angle and more.

The value is the ‘change how?’ of the CSS. You can change the size of an element with pixels, percentages or viewport measurements, or the color of an element by setting various hex codes. These two examples are the tip of the iceberg in terms of what can be changed and how it’ll display. A quick Google search for ‘CSS properties’ will show you a number of sites where you can find the properties and values used in CSS, however, the selectors used in any theme or plugin are partly created by the developers. As a result, the process of writing CSS for a particular theme or plugin should be very specific. This guide is a catalog of selectors for the Divi Theme and Page Builder.

Sections, Rows & Columns

Sections

Sections are the largest part of the page builder. Rows and modules go inside them.
.et_pb_section { }

Rows

Rows make up the content inside a section, top to bottom.
.et_pb_row{ }

Columns

Columns make up rows, from left to right. Within the page builder, you’re given the choice of 1, 2, 3, 4, 5 or 6 columns in any row.

To target all of the columns at once you can use:
.et_pb_column_inner { }

Or you could target columns only IF there are three of them, like this:
.et_pb_column.et_pb_column_1_3 { }

Or only IF there are two of them like:
.et_pb_column.et_pb_column_1_2 { }

The last number in the class changes to the number of columns there are.

What if you don’t want your changes to be so broad?

If you’d like your changes to affect only certain modules within a row, this is how you can make your CSS more specific.

To limit the changes you’re making to a single section, set a new section class in the module settings.

Then you can replace the ‘section selector’ with the class you have created, and your CSS changes will only affect that section.

You can place a custom section or row class in front of all of the CSS selectors in this book (with the exception of the header and footer selectors) to make the changes more specific.

For example, .et_pb_blurb could be changed to .front-page-blurbs.et_pb_blurb and that would mean only sections where ‘front-page-blurbs’ was added to the custom class options, would be affected. Keep this in mind when using any of the selectors listed in this book.

Header and Footer

1. MAIN HEADER BEFORE SCROLL
#main-header { }

2. MAIN HEADER AFTER SCROLL
#main-header.et-fixed-header { }

3. LOGO
#Logo { }
4. TOP NAVIGATION
#et-top-navigation { }

5. MAIN MENU LIST ITEM
#top-menu li a { }

6. MAIN MENU DROP DOWN ARROW
#top-menu .menu-item-has-children > a:first-child:after { }

7. SEARCH ICON
#et_search_icon:before { }

8. TOP HEADER
#top-header

Top Header – Secondary Menu

1. PHONE ICON
#et-info-phone:before { }

2. PHONE NUMBER
#et-info-phone { }

3. EMAIL ICON
#et-info-email:before { }

4. EMAIL ADDRESS
#et-info-email{ }

5. FACEBOOK ICON
.et-social-facebook a.icon:before { }

6. TWITTER ICON
.et-social-twitter a.icon:before { }

7. GOOGLE + ICON
.et-social-google-plus a.icon:before { }

8. RSS ICON
.et-social-rss a.icon:before { }

9. TOP HEADER MENU ITEM
#et-secondary-menu > ul > li a { }

10. TOP HEADER DROP DOWN ARROW
#et-secondary-nav .menu-item-has-children > a:first-child:after { }

11. CART
.et-cart-info span:before { }

12. NUMBER OF ITEMS
.et-cart-info span { } .et-social-google-plus a.icon:before { }

Top Header – Navigation

1. TOP NAVIGATION SUB MENU
#et-secondary-nav .sub-menu { }

2. TOP NAVIGATION DROP DOWN LINK
#et-secondary-nav li li a { }

3. TOP NAVIGATION LINK WITH DROP DOWN
#et-secondary-nav .menu-item-has-children > a:first-child { }

Top Header – Sub Menu

1. MAIN MENU DROP DOWN LINK
#top-menu .menu-item-has-children > a:first-child { }

2. MAIN HEADER SUB MENU LINK
#top-menu li li a { }

3. MAIN HEADER SUB MENU
#top-menu .sub-menu { }

Footer

1. FOOTER INFO TEXT
#footer-info p { }

2. FOOTER LINKS
#footer-info a { }

3. FACEBOOK ICON FOOTER
#footer-bottom .et-social-facebook a.icon:before { }

4. TWITTER ICON FOOTER
#footer-bottom .et-social-twitter a.icon:before { }

5. GOOGLE + ICON FOOTER
#footer-bottom .et-social-google-plus a.icon:before { }

6. RSS ICON FOOTER
#footer-bottom .et-social-rss a.icon:before { }

7. ICON CONTAINER FOOTER
.et-social-icons { }

8. BOTTOM LINKS CONTAINER
#footer-bottom .container { }

Mobile Menu

1. MOBILE MENU ICON ( HAMBURGER )
.mobile_menu_bar:before { }

2. MOBILE MENU MAIN LINK
.et_mobile_menu .menu-item-has-children > a { }

3. MOBILE MENU NORMAL LINK
.et_mobile_menu li a { }

4. MOBILE MENU
.et_mobile_menu { }

Accordion

1. OPEN ACCORDION
.et_pb_accordion .et_pb_toggle_open { } (or just .et_pb_accordion to target all accordions)

2. CLOSED ACCORDION
.et_pb_accordion .et_pb_toggle_close { }

3. ACCORDION CLOSED TITLE
.et_pb_accordion .et_pb_toggle_close h5.et_pb_toggle_title { }

4. ACCORDION OPEN TITLE
a.et_pb_accordion .et_pb_toggle_open h5.et_pb_toggle_title { } #footer-bottom .et-social-rss a.icon:before { }

5. ACCORDION CONTENT
.et_pb_accordion .et_pb_toggle_content { }

6. ACCORDION PLUS ICON
.et_pb_accordion .et_pb_toggle_title:before { }

Audio

1. COVER ART
.et_pb_audio_cover_art { }

2. AUDIO MODULE
.et_pb_audio_module { }

3. AUDIO TITLE
.et_pb_audio_module_content h2 { }

4. CONTROLS CONTAINER
.et_pb_audio_module .mejs-container .mejs-controls { }

5. PLAY BUTTON
.et_pb_audio_module .mejs-controls .mejs-play button { }

6. TIMER CONTROL
.et_pb_audio_module .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-handle { }

7. TIME SLIDER
.et_pb_audio_module .et_audio_container span.mejs-time-total.mejs-time-slider { }

8. TIME DISPLAY
.et_pb_audio_module .et_audio_container .mejs-container .mejs-controls .mejs-time span { }

9. MUTE BUTTON
.et_pb_audio_module .mejs-controls .mejs-mute button { }

10. CURRENT VOLUME BAR
.et_pb_audio_module .mejs-horizontal-volume-current { }

11. VOLUME BAR BACKGROUND
.et_pb_audio_module .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal- volume-total{ }

Bar Counters

1. FULL BAR
.et_pb_counters .et_pb_counter_container { }

2. AMOUNT
.et_pb_counters .et_pb_counter_amount { }

3. TITLE
.et_pb_counters .et_pb_counter_title { }

4. COUNTER AMOUNT
.et_pb_counters span.et_pb_counter_amount_number { }

5. ENTIRE MODULE
.et_pb_counters { }

Blog

1. POST
.et_pb_blog_grid .et_pb_post { }

2. POST IMAGE
.et_pb_blog_grid .et_pb_image_container img { }

3. POST TITLE
.et_pb_blog_grid .et_pb_post h2 a { }

4. POST META
.et_pb_blog_grid .et_pb_post .post-meta { }

5. POST META LINKS
.et_pb_blog_grid .et_pb_post .post-meta a { }

6. POST PREVIEW TEXT
.et_pb_blog_grid .et_pb_post p:not(.post-meta) { }

1. FULL WIDTH BLOG
.et_pb_post { }

2. FULL WIDTH BLOG IMAGE
.et_pb_post a img { }

3. POST TITLE
.et_pb_post h2 a { }

4. POST META
.et_pb_post .post-meta { }

5. POST META LINKS
.et_pb_post .post-meta a { }

6. FULL WIDTH POST PREVIEW
.a.et_pb_post p:not(.post-meta) { } h2 a { }

Blurbs

1. ENTIRE BLURB
.et_pb_blurb { }

2. BLURB ICON
.et_pb_blurb .et-pb-icon { }

3. BLURB TEXT
.et_pb_blurb .et_pb_blurb_container { }

4. BLURB TITLE
.et_pb_blurb h4 { }

5. BLURB ICON BORDER
.et_pb_blurb .et-pb-icon-circle-border { }

6. BLURB ICON CIRCLE
.et_pb_blurb .et-pb-icon-circle { }

7. BLURB IMAGE
.et_pb_main_blurb_image { }

Call to Actions

1. ENTIRE CTA MODULE
.et_pb_promo { }

2. CTA TITLE
.et_pb_promo_description h2 { }

3. DESCRIPTION
.et_pb_promo_description p { }

4. CTA BUTTON
.et_pb_promo_button { }

5. CTA BUTTON ON HOVER
.et_pb_promo_button:hover { }

6. CTA ARROW ON HOVER
.et_pb_promo .et_pb_button:after { }

Contact Form

1. CONTACT FORM TITLE
.et_pb_contact_main_title { }

2. NAME
.et_pb_contact_name { }

3. EMAIL ADDRESS
.et_pb_contact_email{ }

4. MESSAGE
.et_pb_contact_message { }
5. CAPTCHA SUM
span.et_pb_contact_captcha_question { }

6. ANSWER
.et_pb_contact_captcha { }

7. SUBMIT BUTTON
.et_pb_contact_submit.et_pb_button { }

8. CONTAINER
.et_pb_contact_form_container { }

Countdown Timer

1. TITLE
.et_pb_countdown_timer .title { }

2. DAYS LEFT
.et_pb_countdown_timer .days p.value { }

3. DAY(S) LABEL
.et_pb_countdown_timer .days p.label { }

4. HOUR(S) LABEL
.et_pb_countdown_timer .hours p.label { }

5. MINUTE(S) LABEL
.et_pb_countdown_timer .minutes p.label { }

6. SECOND(S) LABEL
.et_pb_countdown_timer .seconds p.label { }

7. HOURS LEFT
.et_pb_countdown_timer .hours p.value { }

8. MINUTES LEFT
.et_pb_countdown_timer .minutes p.value { }

9. SECONDS LEFT
.et_pb_countdown_timer .seconds p.value { }

10. SEPARATORS
.et_pb_countdown_timer .sep { }

11. ENTIRE MODULE
. et_pb_countdown_timer { }

Email opt-in

1. MODULE
.et_pb_newsletter.et_pb_subscribe { }

2. TITLE
.et_pb_newsletter_description h2 { }

3. DESCRIPTION
.et_pb_newsletter_description:not(h2) { }

4. NAME
.et_pb_newsletter.et_pb_subscribe #et_pb_signup_firstname { }

5. EMAIL ADDRESS
.et_pb_newsletter.et_pb_subscribe #et_pb_signup_email { }

.et_pb_newsletter.et_pb_subscribe .et_pb_newsletter_button { }

Portfolio

1. OVERLAY
.et_pb_portfolio_image .et_overlay { }

2. IMAGE
.et_pb_portfolio_image img { }

3. PORTFOLIO ICON
.et_pb_portfolio_image .et_overlay:before { }

To override the current logo you need to find a new one and place it between speech marks using the content property like this:
.et_pb_portfolio_image .et_overlay:before { content: “code here” }

To use different icons, read this post that explains the Elegant Themes icon font and how it can be adapted
to suit a designs.

4. TITLE
.et_pb_portfolio_image h3 { }

5. PORTFOLIO META
.et_pb_portfolio_image p.post-meta { }

6. MODULE
.et_pb_fullwidth_portfolio { } /** For full-width portfolio **/ .et_pb_portfolio_grid { } /** For grid portfolio **/

Gallery

1. OVERLAY ICON
.et_pb_gallery_image .et_overlay:before { }

2. GALLERY GRID TITLE
.et_pb_gallery_grid .et_pb_gallery_title { }

3. OVERLAY
.et_pb_gallery_image .et_overlay { }

4. IMAGE
.et_pb_gallery_image { }

Image

1. IMAGE BACKGROUND IN LIGHTBOX
.mfp-bg { }

2. IMAGE IN LIGHTBOX
img.mfp-img { }

3. CLOSE X
.mfp-image-holder .mfp-close { }

4. IMAGE
.et_pb_image { }

Login

1. LOGIN MODULE
.et_pb_login { }

2. TITLE
.et_pb_login h2 { }

3. DESCRIPTION
.et_pb_login .et_pb_newsletter_description:not(h2) { }

4. USERNAME
.et_pb_login #user_login { }

Map

1. MAP MODULE
.et_pb_map_container { }

2. MAP PIN
The pin styling is not set with CSS. Learn how to change the map pin icon by following this tutorial.

Number Counter

1. NUMBER COUNTER
.et_pb_number_counter { }

2. NUMBER
.et_pb_number_counter span.percent-value { }

3. NUMBER COUNTER TEXT
.et_pb_number_counter h3 { }

4. WITH PERCENTAGE
.et_pb_number_counter .percent { }

Person

1. PERSON MODULE
.et_pb_team_member { }

2. IMAGE
.et_pb_team_member_image img { }

3. NAME
.et_pb_team_member_description h4 { }

4. POSITION
.et_pb_member_position { }

5. DESCRIPTION
.et_pb_team_member_description { }

6. FACEBOOK
.et_pb_team_member .et_pb_facebook_icon { }

7. TWITTER
.et_pb_team_member .et_pb_twitter_icon { }

8. GOOGLE +
.et_pb_team_member .et_pb_google_icon { }

9. LINKEDIN
.et_pb_team_member .et_pb_linkedin_icon { }
All social media icons can be targeted at once with: .et_pb_team_member .et_pb_font_icon { }

Pricing Table

1. HEADER SECTION
.et_pb_pricing_heading { }

2. FEATURED TABLE
.et_pb_pricing_table.et_pb_featured_table { }

3. PRICING SECTION
.et_pb_pricing_content_top { }

4. PRICE
.et_pb_pricing_table .et_pb_sum { }

5. PER YEAR
.et_pb_pricing_table .et_pb_frequency { }

6. DOLLAR SIGN
.et_pb_pricing_table .et_pb_dollar_sign { }

7. LIST ITEM
.et_pb_pricing_table ul.et_pb_pricing li { }

Or when not available
.et_pb_pricing_table li.et_pb_not_available { }

8. BUTTON
.et_pb_pricing_table_button { }

9. PRICING TITLE
.et_pb_pricing_heading h2 { }

10. BEST VALUE
.et_pb_pricing_table .et_pb_best_value { }

11. PRICING TOP
.et_pb_pricing_content_top { }

12. STANDARD PRICING TABLE
.et_pb_pricing_table { }

Shop

1. PRODUCT
.et_pb_shop .product { }

2. OVERLAY
.et_pb_shop .product .et_overlay { }

And Image
.et_pb_shop .product img { }

3. SALE
.et_pb_shop .woocommerce span.onsale { }

4. PRICE
.et_pb_shop span.amount { }

5. TITLE
.et_pb_shop .woocommerce ul.products li.product h3 { }

6. STAR RATING
.et_pb_shop .woocommerce ul.products li.product .star-rating { }

7. DELETED PRICE
.et_pb_shop .woocommerce ul.products li.product .price del { }

8. NEW PRICE
.et_pb_shop .woocommerce ul.products li.product .price ins { }

How to use your browser’s developer tools

In this part, we’ll be showing you how simple CSS changes can be tested and reviewed using the extremely handy developer tools built into all modern-day web browsers.

Testing Simple CSS Updates with Developer Tools

Now, we’ll take a behind-the-scenes look at the Divi theme to see how CSS can be used to change the look of certain elements.

For this demonstration, we’ve created a standard section comprised of two rows: a single column with a text module followed by three columns of blurbs and buttons.

After adding a number of headings, some dummy text and a few images, the front-end of the section looks like this:

Now, we’re going to assess these front-end elements a bit deeper to figure out the HTML make up.

For this, we’ll be using the web browser’s built-in developer tool. With most modern browsers, you should be able to right-click on a certain web element and select “Inspect” or “Inspect Element” or similar.

• If you are using Google Chrome, navigate to File > View> Developer > Developer Tools.
• If you are using Safari you will need to activate the Develop Menu by selecting the checkbox in Safari’s Advanced preferences, then navigate to Develop > Show Web Inspector.
• If you are using Mozilla Firefox navigate to Tools > Web Developer and select Inspector from the list.

By default, this should appear at the bottom of the page and look something like this.

While inspecting the web page or a certain element therein, the website/host compiles all of the information together and presents the page as HTML. The main window displays all of the HTML, while the right-hand side window shows the CSS applied to the specific element currently selected.

This entire Section created with the Divi Builder in the back end…

… is represented in a single highlighted section as:

Arrows are used to show and hide groups of elements. Clicking on the arrow on the left-hand side will expand to show two green rows. You can see them clearly labeled with CSS Class names.

i.e < div class=“ et_pb_row “et_pb_row_0 ” >

This means that the HTML element, a div, has been assigned the classes of “et_pb_row” and “et_pb_row_0”. Following this element, a second element has been assigned the classes of “et_pb_row” and “et_pb_row_1”.

Now, we can use CSS either to target both rows using the class name of “et_pb_row” or we can target either one of the elements by using the second class name of either “et_pb_row_0” or “et_pb_row_1”.

Targeting Elements with CSS

If you only want your changes to apply to the rows on this page and not the rows on the rest of your site you will need to be more specific. One way to do this would be to assign your own CSS class name to the row that you want to target with CSS.

To do so, return to the back end of the page, select the Row in question and click on the hamburger menu on the top left-hand side of the green row.

Once selected, click the Advanced tab and enter a unique CSS Class name.

Save the changes to the module and page, click Preview and assess the front end. Nothing should change in the page itself. Instead, return to the Inspect Element console and view the same element as before.

Now you will see an additional Class name divispace_example_row has been added to the first row.

Navigate to the right-hand side Inspect Element window and you’ll be able to see the new CSS Class name (highlighted here in yellow).

Before going straight to the stylesheet, you can test your CSS changes right in the Inspect Element console to see what effect it will have on your page. Now, let’s change the background color to yellow.

To do so, use the CSS section of the Inspect Element tool on the right-hand side, click between the open and close curly brackets “{ }” in the CSS section, type the following code and then hit enter.

background-color:yellow;

Instantly you’ll see your original web page transform from this:

… to this.

If you are happy with the change you’ve made to the element, you can copy the entire section of syntax:

divispace_example_row { background-color: yellow; }

And paste it into either the style.css file of your Divi website’s child theme or into the Custom CSS box in the Divi Theme Options console. Read Part Three of this guide for a refresher on the various ways you can Add CSS to Divi.

If you wanted to add the same style change to another row or module element in your website, you would need to add the same unique class name to the next element.

Using the browser’s developer tools to inspect the HTML elements is a great way to test different CSS properties and play around with different styling until you create an effect that suits your style.

These changes are temporary, and as soon as the page is refreshed, the changes will disappear. Nevertheless, becoming familiar with the browser’s Developer Tools is a great way to explore how a website is constructed and how it can be enhanced aesthetically.

As well as experimenting with the CSS on a page of your website by adding, removing or changing a setting, you can also use this handy tool to inspect other website’s elements. Rest assured no one else in the world will see it.

Breaking Down CSS Commands

In the example above, we changed an element’s background color. The CSS is broken down into two parts: the property, in this case “background-color” and the value, “yellow”.

This is but one of the myriad of CSS commands available to web designers to use. For an extensive list of the properties, visit W3 Schools.

CSS is constantly under development, seeing new additions being made all the time. If you’re starting out with CSS, we recommend playing around by testing the effect of various properties and values applied to the Divi Builder modules, and using your browser’s developer tools to assess changes.

We highly recommend playing around on a development or testing site. To set up a development site to play around in, we recommend setting up a local, offline site using Desktop Server.