Feature Request: Edit styling of multiple objects at the same time through Grouping or assigning a Class

[sydneymvo]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

Frequently, I have to apply the exact same styles to multiple objects. Even though I can copy and paste the styles, this still takes time. Examples are:

• Creating a row of "Features" for a SaaS website, where there are three Icon Boxes in a row, each featuring a different icon and content but styled the exact same. In this case, stylings would be margin, padding, icon size, typography, coloring, and responsive settings.
• Building a grid of "Our Team" for an "About Us" webpage, where containers are inside a display: grid container. Each container inside the grid contains an Image, a Text Editor, and an Icon List. Being able to edit every child Container, Image, Text Editor, and Icon List as a grouped set of objects would be great
• Styling columns or rows in a container at the same time

Describe the solution you'd like.

Two options, each functioning essentially the same but applied through slightly differing mechanics:

1. Grouping

Through the Navigator tab, select multiple modules by holding down Shift and clicking the selected modules. Right-click the selected objects, then select Group Objects. Grouping objects will act the exact same as a real-time Copy & Paste Styling function, sharing the same settings between grouped objects.

Any changes made to any object in a group would apply to all grouped objects

Right click to Release Object from Group to remove one object from the group or Release Group to deactivate the entire group (a popup should appear to warn against full ungrouping).

2. Classes

In Class assignment, you can select an object and, under the Advanced styling tab, either select a premade Class or create a new one in a dropdown. Once a class has been applied to an object, the name of the Master Object will populate beside the dropdown that shows the Class name, from which the shared styles are determined. By clicking on the Master Object name, it will automatically select the Master Object (as if clicking on the module from the Navigator tab).

Unless a specific style has been Released from the Class Style (see description below), all stylings for a Classed module will be determined by the Master Object. All linked styles for objects with the same class that are not the Master Object are locked, unless that style has been released. Only changes to the Master Object apply to all objects in that class.

The only reason for the differentiation with the Master Object in Classes and Grouped Objects is that there may be a backend reason to only allow one object to be edited in order to make it easier to apply these styles to a collection of modules. I have no idea. I'm just a UI designer...

In both cases:

The shared styles are the same that are applied from the Copy & Paste Style function that already exists.

Any styles that are controlled by the Group or Class appear in an alternate style with an icon to the left of the style label. For example, a grouped object with styled margin settings would show the Margin label italicized with a yellow-colored button-like icon (sewing button, like a circle with 4 small circles inside it to signify grouping). Clicking on the icon would change the icon to gray and remove the italicized style on Margin, which would then release that specific style from the group styling. By releasing a style from the grouped setting, you can edit that specific style in a way that differs from the style set by the grouping. Hovering over the icon or style title ("Margin") would show a tooltip that says something like, "Release from Group Styling."

Releasing a style from a group is done through each responsive state. By releasing a style from a grouped styling on Tablet view, the desktop and mobile view would continue to stay grouped.

Groupings and Classes are page-specific and are not shared among pages, as this feature would be negated by templated modules.

Similar to Photoshop's Linking Layers feature, when you have selected a Grouped object, all objects grouped together will show the Grouping icon next to them in the Navigator tab, but the icon will not appear when an object in that group is not selected.

Describe alternatives you've considered.

Currently, I use the Copy > Paste Style function, but it can really be annoying to edit. Recently, I created a grid of "cards" in a display: Grid container that contained 16 unique containers, each with an Icon and Headline inside the container. Every Icon, Headline, and (child) Container was styled the exact same, but I kept having to make changes to one, then apply them to every other object in the grid to keep up with my Client's requested changes ("make the icons smaller. Wait no bigger. Can I see the titles in blue? No, go back to green. What if the background was tan? Let's go back to white.") On top of this, I made this change to grids across 3 different pages. Even with hotkeys it was just aggravatingly repetitive to make changes then copy & paste them to teach object over and over again.

I have also tried creating one object then simply duplicating it, but with the way clients love to pixel-push, it's not feasible to create one perfect iteration of a group of modules to then duplicate it to create the others without expecting changes at some point.

Additional context

A similar feature is available in Webflow, which I stopped using after they made major changes to their platform that no longer supported my business. Even with Webflow catering to people more familiar with front end development or even just CSS styling, I think this feature will be a great way to increase efficiency when designing with Elementor.

Right now, I think Elementor has an incredible ability to create novel and unique design. What it lacks is the ability to churn out design quickly, particularly with the depth to which you've given options to style everything from small modules to entire page templates. Any way I can speed up my working process will be an incredible boon.

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.