How to Properly Select Entire Divi Module for CSS Overrides?

Tagged: , , ,

Author Posts

iamblued October 13, 2016 at 4:58 pm

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

Hello all!

I am quite new to the world of CSS and to WordPress for that matter. I’ve been blown away with what I’ve been able to smash together within Microthemer with my limited knowledge to get the desired effect in a number of places with the site I’m working on.

However, I’m stumped on how to select an entire Divi Module (in this case it’s a Fullwidth Post Title Module) and make the following changes:
* Add a transparent overlay above the module’s background image but behind the text
* Have the CSS changes automatically apply to all uses of the Divi Fullwidth Post Title Module

I’ve selected a number of different elements to test with (see image below), but the best I’ve been able to accomplish is get the overlay behind the text but not fully cover the module’s background image.

For reference, this is the page I’m trying to modify: http://www.outwestbindery.com/project/the-complete-works-of-ralph-waldo-emerson-cloth-reback-2015/ and the module in question sits right below the top menu and has text that says “The Complete Works of Ralph Waldo Emerson…”

Here's a picture of the element and available selectors

I’d appreciate any guidance anyone can provide. Thanks so much for reading.

P.S Is there not a search function for the forums? Apologies in advance if this question has already been answered.

Sebastian October 17, 2016 at 2:29 pm

Hey,

It’s great to hear that you’ve made progress with Microthemer!

I think you should be able to target the full width title with the following selector:

.et_pb_section_0.et_pb_section

I determined this by right-clicking your site in Chrome and choosing ‘Inspect’. Here’s a screenshot:

title inspect

However, you should be able to get Microthemer to target this container element.

  1. Double-clicking the title.
  2. This will probably target an inner h1 element, or another inner element.
  3. Click the Inspector tab on the selector wizard.
  4. Click the up arrow on the directional controls several times until the blue highlighting covers the full title area, not just the text. If the highlighting covers too large an area, you have gone too far. Click the down button or start from point 1 again.
  5. You should see the following text in the file below the directional controls when you have got to the right point: <div class=”et_pb_section et_pb_fullwidth_section  et_pb_section_0 et_pb_with_background et_section_regular”>…</div>
  6. Then go back to the Targeting tab and select whichever list option you prefer, which may be the default option.
  7. Click the create selector button to finish creating your selector.

If that doesn’t work, I’d be happy to have a go on your site if you can send me login details via this secure contact form?

The forum should be searchable using an embedded Google search widget (highlighted in yellow below). If you’re not seeing it, could you try disabling ad blocker for this site?

https://themeover.com/wp-content/uploads/2016/10/search-box.gifseach box - google search

Thanks!
Sebastian

You must login or register to reply to this topic.