Typography controls for Containers

[pumadog]

Hello! With the change to flexbox containers the section controls for typography are missed. Please bring them to containers! Controls to set typo colors, link hover behaviour etc. is useful for boxes, dark sections and the like.

[pumadog]

A gentle reminder since I didn't see any progress on that front.

[79ho3ein]

Hi @pumadog

What is the need for this option? For example, you add the heading widget inside the container and customize the heading widget. So why should containers have this option?

[loucasl]

Exactly like @79ho3ein said, and you even have global typography settings as well as global fonts, so what is the need for containers to have typography settings too?

[pumadog]

@79ho3ein @loucasl

1. for text links. Some widgets don't have settings for link colours, hover states and so on. If your global settings are meant for light backgrounds, you can't use them on dark/coloured sections or boxes.
2. for normal text on dark/coloured sections. You can control the single widgets for that, but the workflow is much better if you can adjust the whole section at once.

When Elementor invented the global typo/colour settings the section typo settings were gone as well. But they brought them back soon after.

[black-eye]

It's a pitty this function was removed. Since it seems the devs (and some of the commeners here as well) don't understand what the purpose of this feature should be, let me explain, why this seting is really useful.

In the recent AMA session (https://www.youtube.com/live/2EFfe3vhvCI?app=desktop&feature=share&t=3m25s) this question was answered by the devs and for me it showed a complete misunderstanding what the purpose of this setting is. The main take out was basically "you can change the desired setting for each element individually, so why would you want to do it in the container settings?". Well, the reason is - when you want to set up the whole section the same way. For example:

1. You want all the content of the section (several headings and texts) to be centered.
2. The section backround is set to dark and all the text should be inverted to a light color, including the links.

Yes, sure, you can do it one by one for each widget, but:

1. It's more work. Yeah, I know, I can use copy&paste, but then ...
2. It's more (unnecessary) code and thus bloat.
3. It's against DRY (don’t repeat yourself) principle.
4. It's harder to maintain, because instead of one place you have to change it in multiple places.

So please understand - this has nothing to do with global colors or global typography. It doesn't make any difference, wheather the stuff you have to change for each object is global or not. The point is, that everything what can be set on the parent should be changed once on the parent, not many times on all of it's children.

Hopefully this example helps to explain the reason, why this feature should be brought back.

[79ho3ein]

Thanks for the useful explanation. I hadn't noticed these until now, and now it seems like an important feature.

[dsolimini]

I want to add some support for this good point from @black-eye. And thanks to @79ho3ein for your understanding!

We run a think tank site on elementor. Items like text-heavy call-out boxes and sidebars with dark backgrounds, or more designed and immersive content often need to be tweaked in the way described. The ability to set link color, for example, in a section was perfect for these use cases but is now missing. It's a step back/loss of features for us.

[Henzxon]

Actually I'm the one who asked that question. I assumed that they are aware of the purpose of the typography setting inside the section but when working on section or container with say 15 text elements, you want them to inherit the parent style instead of setting them one by one. I do agree with you that they interpreted the question in a wrong way.

[NicoleS87]

I want to add my voice to this. I have sections that are the same colour as my global colour for links (this is what my client wanted, teal global link colour which is perfect for all sections except for sections with a teal background). The ability to change the colour of the links for just these sections meant that the links were visible. The removal of this feature means that I cannot convert these sections to containers.

This feature existed for a reason, and the removal of it shows a lack of understanding of why it was present in the first place.

[ghost]

Yeah I also want to add my voice to this.

[jamescanuck5]

Took a bit of searching but there's another way to do the same thing. In text editor under the content tab highlight the link text you wish to change the colour and then select the text colour to whatever you want.

[danieliser]

That only applies to the text editor itself, not to other widgets in the same container.

Further this is highly un-optimized. CSS is meant to be written using as little as possible, writing the 2 rules to the parent is drastically more aligned with CSS principles than having 2 rules for every widget in the parent.

Cascading style sheets are meant to do just that, cacscade gracefully from parent -> child, and from stylesheet -> stylesheet with overrides.

Think about it this way, Elementor is likely adding 3-4x the neccesary CSS to accomplish the same appearance, this can lead to much longer load times than really needed.

This change alone won't resolve it entirely, but does deduplicate a ton on many times.

[virtualedgesolutions]

This is considered my only, and yet a very serious drawback to switching to containers. Any update whether or not this will be reintroduced? Also, along the same lines, as @jontng mentioned in the duplicate discussion (https://github.com/orgs/elementor/discussions/21638), changing background colors (or at least background overlay colors) responsively would also be a much appreciated feature!

[dryving]

100% this. For a theme that boasts speed and ease of use for developing websites, it seems odd to have removed this setting. I don't want to have to set each element separately. I want to set the style for a specific container once (if it's different from the global styles) and have it applied to any heading or text block I drop into it like we had with sections. Having the styles cascade from Element > Container > Global fits right with modern CSS and just makes our lives easier.

[danieliser]

Correct, just think about all that duplicate CSS that could be eliminated. One container with 10 elements should take 2-4 lines for font size/color, but instead takes 10x that or more as you then have to do responsive overrides per widget container.

[jamescanuck5]

Typography controls for Containers will not be coming anytime soon, I put a ticket in with Elementor support and this is the reply:

I appreciate your patience.
I received an update from our Tier 3 team.
In the containers, the Typography options are not present because containers can be nested infinitely, unlike sections. This setting can conflict greatly if added to parent or child containers.
So, you can set the link colors Globally inside Site Settings, set them individually per widget-based, and use custom CSS or Global Presets if it helps.
I hope this helps.
Best regards,

[TRECpro]

If a feature creates conflicts I am sure we can work that out. That is a big part of what most people working with WordPress are accustomed to doing

[jontng]

It's the same poor answer I got a year ago....

[WebsiteDons]

In the containers, the Typography options are not present because containers can be nested infinitely, unlike sections. This setting can conflict greatly if added to parent or child containers.,

That certainly makes logical sense, however the ability to add the styling per container should still exist and let the user decide how to apply it. I used inner-section widget in parent sections with typo styling and that made it a child container which could then have its own typo styling.

[NicoleS87]

Hopefully this will help all while we patiently wait for Elementor to make this so much easier for us.

Add this to the parent container CSS (choose your own colours):

/* unvisited link */
selector a:link {
color: white;
}

/* visited link */
selector a:visited {
color: white;
}

/* hover link */
selector a:hover {
color: #005D99;
}

/* active link */
selector a:active{
color: white;
}

This change ensures it only applies the link colour change to the links within the container and not across the whole page.

[Daveden2]

A good page builder should make designing websites easy while also focusing on code maintainability.

I've always recommended styling elements in an order from general to specific, with good reason. You start with overall settings like Site and Page, then move to containers (sections, columns,) and finally individual widgets.

For two good reasons:

1. It reduces CSS specificity issues
2. Improved maintainability: it's easier to style all widgets at once, as pointed out by @Henzxon.

Elementor should seriously consider bringing back the typography settings to containers.
And in the long run, reduce the overall specificity of your CSS selectors. Just take a look at Bricks pagebuilder for inspiration.

[danieliser]

Honestly Elementor should have never considered any mechanism that deferred away from the CSS spec in creating all this duplication in the first place. But Yea, they should make this a priority, since they claim to focus on performance it seems like they are intentionally leaving a lot on the table here.

[danieliser]

I don't understand why this needs so much justification. The answer is right in the name... Cascading Style Sheets insinuates you should be able to apply styles in an optimized way from a parent element and they properly cascade down. In its current state Elementor has completely ignored the C(ascading) part. Its even stranger to hear it used to be there (twice), and keeps getting accidentally (on purpose) removed.

This can be viewed as both a feature for ease of use when managing the same widgets in different containers, such as dark/light that was mentioned before.

But more importantly this should be a tool for optimizing websites CSS reducing the giant amount of bloated duplication that currently is Elementor.

Just think about all that duplicate CSS that could be eliminated. One container with 10 elements should take 2-4 lines for font size/color, but instead takes 10x that or more as you then have to do responsive overrides per widget container.

You could end up with 20-30x more CSS than you need to get the exact same appearance.

[TRECpro]

This feature needs to be added back in. I am going to keep creating support tickets every time I would normally use this feature.

[danieliser]

To all concerned, I cancelled my Elementor Expert plan and spent 2 weeks migrating to Bricks builder.

OMG solved every issue I had with Elementor,

• reduced html on the page by 70%, same with CSS. page speed scores instantly to 99% with proper caching
• improved our workflow, made it so we style reusable classes instead of ID based elements
• can use CSS variables... IN THE EDITOR...
• no triple divs for a single button etc.

Save yourself some headaches, spend a week experimenting with Bricks, but the LTD and quit wasting your time and energy fighting with Elementor to do the stuff it should just do right up front.

Here is a great breakdown of what makes a good Page builder, and unfortunately elementor made all the wrong choices and I can't see a way for them to go back and fix them all now without major pains.

https://automaticcss.com/minimum-builder-requirements/

[pumadog]

@nicholaszein any update on that front? Even if this control was only available in section/outermost containers it would be helpful.

[dbfischer]

Still miss to control typography for containers as it was possible for sections.
It makes no sense to use always custom CSS in a page builder.

[WebsiteDons]

at least add hooks to allow controls injection, just as what's available for the previous sections elements (https://developers.elementor.com/docs/hooks/injecting-controls/). I tried the old hooks and none have any effect on containers or grids

add_action('elementor/element/after_section_end', function($element, $section_id, $args)
{
    if( 'container' === $section_id ) {
        $element->start_controls_section('maax_section_random_bg', [
          'label'=>'Random BG Images',
           'tab'=> \Elementor\Controls_Manager::TAB_STYLE
         ]);
             // typography controls here
        $element->end_controls_section();
    }
},10,3);

[Eetheart]

Can we please get this? It was a feature under Sections, and there is no reason it shouldn't be under Containers.

[joachimBrindeau]

This is really a must-have, I hope Elementor devs change their mind and start allowing us to build in a lean manner.

[toineenzo]

They actually have. Be on the lookout for an announcement this month about Editor V2, which makes this feature possible.