Elementor Integration – Targeting A Whole Section

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 1 week, 5 days ago.

Author Posts

fgriffin125

I know I can assign a section a class in Elementor and I see that Mircothemer sees that class and I can Target on that class. I can easily change the background color and a few other things about the Section. However, for example, if that Section had:

H2 Heading Text
A Paragraph
A Call To Action Button

How would I change all those Elementor Widgets in MicroThemer at the Section Level without having to Target them individually?

If you had a video showing how that’s done it would be even better!

Thanks!


Sebastian

If you could send me a link the page you’re working on I can advise you more specifically. But for now, I can try to provide some general advice. This is an interesting question. It’s hard to answer in brief other than to say “It depends what you’re trying to do, you might have to target them individually“.

For instance, if you tried to change the text color of the 3 inside elements and found that this didn’t work, or only worked for e.g. the paragraph, it’s probably because Elementor sets the text color more specifically. In CSS, there is a concept of ‘specificity’, which governs which styles override other styles. I’ve written a tutorial about CSS specificity.

Another CSS concept is inheritance, which relates directly to your question. Some style values are inherited, others aren’t. Color is, padding isn’t for instance. But styles inherited from parent elements, like your Elementor section, are easily overriden. If Elementor sets a color style for a button, that will override any color you set on the section element. So to override Elementor’s style, you need to target the inside elements directly.

It’s possible to target multiple elements with a single selector using Microthemer. This is shown in the targeting video, which is accessible from Microthemer’s Help menu at the top right of the interface. And with a bit of manual editing you can target totally unrelated elements like headings and buttons by creating comma separated selectors (see video demo). However, before I go into too much detail about that, could you describe what changes you would like to make to all three elements inside your Elementor section?

Thanks,
Sebastian


fgriffin125

Thank you, Sebastian. I think you’re right, it’s an issue with specificity and inheritance. When I target individual items I have complete control. Since these are Elementor templates that I’m working on it won’t be too bad to have to target at a lower level for certain elements. I think I watched that video but I watch it again.

As you suggested, it was only certain things that I couldn’t change at the Section Level. One of the items that I didn’t have control over at the Section Level was Transformation of text. When I targeted at a lower level I had no problems with Transformations.

I think I need to just gain some experience with Microthemer at this point. I believe the combination of Elementor and Micothemer is a “game-changer”.

Thank you for your support!

Frank


Sebastian

Hey Frank,

You’re welcome. Great to hear the Elementor integration is useful to you! I’m here if you have any further questions.

Cheers,
Sebastian

You must login or register to reply to this topic.