Skip to main content

Divi Module Custom CSS Selectors

Divi Module Custom CSS Selectors is a powerful plugin developed for the Divi theme. Divi Module Custom CSS Selectors expands the number of available Custom CSS selectors located within the Advanced tab of each of the respective Divi Builder modules. The plugin speeds up development time by allowing the developer to bypass complicated CSS writing and using media queries.

Description​

The Divi Module Custom CSS Selectors plugin adds several new selectors to the Custom CSS options in the Advanced tab of each module within the Divi Builder. Instead of writing CSS from scratch, using a browser’s developer tools to identify and test selectors, the Divi Module Custom CSS Selectors plugin brings the selectors to you.

In total, the plugin adds over 500 new selectors to the Divi Builder. Expanding the default number of selectors gives immediate access to individual elements of each module. Each selector also accounts for responsive web design and includes styling options for tablet and mobile devices, removing the need to write media queries in a stylesheet. The Divi Module Custom CSS Selectors plugin is lightweight, and there won’t be a difference in the speed of your site. Coupled with Divi’s built-in speed optimizations, all custom CSS will be combined, minified and stored as a static CSS file for faster page loading.

Requirements​

tip

Divi Module Custom CSS Selectors Plugin to work, you must have installed Divi or Divi Builder from Elegant Themes. If you do not have it you can purchase it here.

Major Features​

  • Add more selectors to each module in the Divi Builder’s Advanced Custom CSS tab
  • Style modules quickly and more effectively without using complicated code
  • Add mobile and tablet styling for each module’s element

Installation​

The Divi Module Custom CSS Selectors plugin is installed via the plugins menu. After the plugin is installed, it creates a new menu item within the Divi menu.

note

This plugin requires the Divi theme or Divi Builder plugin to be installed prior. Please make sure you have installed either of these options before installing the Divi Module Custom CSS Selectors plugin.

To install the Divi Module Custom CSS Selectors plugin, navigate to the Plugin menu and click Add New. Click the Choose File button and select the plugin’s .zip file from your computer. When the plugin has been selected, click Install Now.

Divi Module Custom CSS Selectors - Documentation - Installation - Upload Plugin

Wait for the installation to complete and then click Activate.

Divi Module Custom CSS Selectors - Documentation - Installation - Activate Plugin

Once the plugin is activated, it’ll create its own menu item within the Divi menu.

Divi Module Custom CSS Selectors - Documentation - Installation - Plugin Menu

Clicking on the plugin menu will prompt you to enter your license key. This can be found in your WP Zone account. Log into your account

  • Click on the Membership Details tab, locate the Divi Module Custom CSS Selectors plugin or the Lifetime or Annual Membership and click View Full Details. Copy the license key, return to your website and paste it into the text area. Click Continue.

  • Or, if you are not a member, navigate to the licenses tab, locate the product, copy the license key, return to your website and paste it into the text area. Click Continue.

Divi Module Custom CSS Selectors - Documentation - Installation - License Key

Once your license key has been authorized, you’ll automatically be diverted to the plugin dashboard.

Set-Up​

The Divi Module Custom CSS Selectors plugin has no set-up steps or configuration settings. The plugin dashboard offers information about the plugin.

The About tab offers information about the plugin, including a brief description of CSS fields and how to use them. There are also links to external resources.

Divi Module Custom CSS Selectors - Documentation - Setup - Plugin Dashboard Main

The Addon Tab showcases several of our Divi plugins and child themes that you can purchase.

Divi Module Custom CSS Selectors - Documentation - Installation - Plugin Dashboard Addon

The License Key tab stores the license key.

Using The Plugin​

Once the plugin has been installed it is ready for use. To begin using the plugin, create a new page, post or project and initialize the Divi Builder. Once you have added a module, click on the Advanced tab.

Divi Module Custom CSS Selectors - Documentation - Using the Plugin - Advanced Tab

From the Advanced tab, click the Custom CSS drop-down menu.

Divi Module Custom CSS Selectors - Documentation - Using the Plugin - Custom CSS Tab

Here you'll find the standard Custom CSS selectors, beginning with Before, Main Element and After.

Divi Module Custom CSS Selectors - Documentation - Using the Plugin - Custom CSS Options

As you scroll down, you’ll see a few standard selectors, and then a collection of new ones. The Divi Module Custom CSS Selectors plugin adds several new selectors to each module in the Divi Builder.

Divi Module Custom CSS Selectors - Documentation - Using the Plugin - New Selectors

For example, by default, the blurb module has the following selectors:

  • Blurb Image,
  • Blurb Title and
  • Blurb Content

With the Divi Module Custom CSS Selectors plugin installed and activated, the following selectors are now included:

  • Blurb Container,
  • Blurb Description and
  • Blurb Icon

When writing CSS, you can customize the exact element you need by targeting the specific selector.

Divi Module Custom CSS Selectors - Documentation - Using the Plugin - With Styling

With these new selectors, you can also decide how each element will display on different devices. To set responsive styling, hover over the space to the right of the selector name and you’ll see a series of options display. Click on the second icon, the mobile icon.

Divi Module Custom CSS Selectors - Documentation - Using the Plugin - Devices

Next, the options for Desktop, Tablet and Mobile will arise. Click on one of the other devices and enter your CSS styling for the selector.

Divi Module Custom CSS Selectors - Documentation - Using the Plugin - Tablet

Uninstalling Divi Module Custom CSS Selectors​

To uninstall the Divi Module Custom CSS Selectors plugin, follow the steps below:

  1. Navigate to the Plugins dashboard.
  2. Deactivate the Divi Module Custom CSS Selectors plugin in the plugins list.
  3. Delete the Divi Module Custom CSS Selectors plugin from the plugins list.

Once the plugin is uninstalled, all Divi Module Custom CSS Selectors selectors will be deleted.

Additional Information and Support​

If you are trying to target a module element and you can't see it within the Custom CSS settings, please contact us.

If you experience problems with the Divi Module Custom CSS Selectors plugin, our team of dedicated support staff is ready to help. Here are some steps you can take to speed up the troubleshooting procedure: before contacting support.

If you don’t find what you need there, contact us for help.

Need help with customization or want to buy similar products? If you feel you need to give your website a completely professional finish, or you simply don’t have time to do it yourself, contact us at wpzone.co or send us an email to [email protected], to get our current rates.

If you like our products and would like to purchase similar plugins, please visit our shop page.

Changelog​

See the changelog for the Divi Module Custom CSS Selectors plugin by following this link.