Linked duplicate function (Copy/Paste Style)

[peterrath]

My idea is similar to #1467, but slightly different.

We often need to use repeated elements like icon boxes in multiple columns or a description using texts and images beside in multiple rows (sections) like in “Homepage – Agency”. If a setting have to be changed, it should be done one by one for every item.
The only main thing I miss in this great plugin the possibility of using “common html classes” for the similar elements and apply Elementor styling settings (settings that represent CSS properties) only once for all instance of a class. It is also important to be able to override any styling setting in the instances.

THIS IS WORKING NOW IN ELEMENTOR, BUT NOT TRIVIAL AND NOT TOO EASY:

At this moment the Elementor supports this functionality brilliantly but a little bit uncomfortable. The first element of repeated items can be designated as a "base" element and the others can reference to it. The class that contains the “data-id” of the first (base) element (e.g. elementor-element-bga1f0i) can be entered into the “CSS Classes” field of the other elements, thus they has the same class than the base element.
If I change the first (base) element styling, the other elements are instantly changed (because they have the same html class than the base element). It is even possible to override any styling properties in the linked elements.
It can be done for all the embedded elements: section, column and other widgets like title, text editor or e.g. icon box.

This method is working without any problem in the actual Elementor version.
This method is very helpful because often needed to change the settings of groups of elements several times to try more versions of styling and find the best look. This is important to change settings only once and not multiple times for the multiple instances.

MY CONCRETE IDEA:

It may be a simple solution if on the element-settings-list, beside the “Duplicate” button there would be another button (e.g. “Linked Duplicate” or “Clone”), that does the followings:

• copy the element (similarly to the existing duplicate function, but those styling settings that represent CSS properties should be leaved empty or “default” in the copy)
• set the css class of copied base element ( that contain the “data-id” of base element) to the new element (e.g. set elementor-element-bga1f0i class)
• if the element contains embedded elements, then do this also for them recursively (e.g. if I clone a section, then this should be done for the embedded columns and other widgets inside)

I think this solution is simple and efficient, because it uses the force of standard CSS styling, and it is not too far from the existing Elementor functionality (that works properly but not too comfortable).

The drawback of the proposed solution is if the data-id of base element is changed, then the common class will be lost. For example saving an element into a template and add the template to a page changes the data-id.

I'd appreciate such a feature, or a similar one.

[robz0]

Yes I would like to add support to something to copy and paste Styles.
So far, I've not seen the auto updating of elements of the same class as described above (and pasted below). But if this worked it would be the one. Doesn't sound to clumsy. Quite management if the closest one needs to get to coding is giving class names.

THIS IS WORKING NOW IN ELEMENTOR, BUT NOT TRIVIAL AND NOT TOO EASY:

At this moment the Elementor supports this functionality brilliantly but a little bit uncomfortable. The first element of repeated items can be designated as a "base" element and the others can reference to it. The class that contains the “data-id” of the first (base) element (e.g. elementor-element-bga1f0i) can be entered into the “CSS Classes” field of the other elements, thus they has the same class than the base element.
If I change the first (base) element styling, the other elements are instantly changed (because they have the same html class than the base element). It is even possible to override any styling properties in the linked elements.
It can be done for all the embedded elements: section, column and other widgets like title, text editor or e.g. icon box.

This method is working without any problem in the actual Elementor version.

[maxwellhibbert]

Sorry, I didn't catch this open issue in my search before posting. Here's my thinking about the same issue/idea:

Linked Styles for Elements

This is a big problem with Elementor, in my opinion. Duplicating elements is a great feature when you're building out a design, but then if you want to tweak something, you're going to feel some pain.. in the wrist! while you mouse around making the same change to all the duplicates as well - or do you delete the duplicates and recreate them again based on the element you just tweaked? - neither is a good answer. The styles need to be linked somehow, hmmm.... maybe with a class!? lol :) but seriously, elements need linked styles so that updates can be made in one place and it will effect all the other elements that are linked to it.

• The way I see the linking happening, is when an item is duplicated. So maybe a "linked duplicate" button next to the standard duplicate button
• After an item is duplicated, if an change is made to a style property on a linked element (or child of a linked element) the others are also changed
• Maybe when selecting an element with linked styles, it highlights all the linked elements too, in a different colour to the standard blue or yellow, so you know that changes will effect multiple elements.
• And an unlink option to be available on linked elements, to convert them to normal elements.

[black-eye]

+1

[maxwellhibbert]

Hey, finding the hidden elementor class for an item and adding that to others is some nifty thinking @peterrath ! a work around of sorts until something is properly integrated, cheers 🍻

[maxwellhibbert]

It's sad that the feature that was implemented isn't class based like what was discussed here.

[black-eye]

I agree with @maxwellhibbert - this issue was a bit different than the new 2.1.0 copy/paste feature. The stuff discussed here was more of "global styles" approach.
Any plans on adding such a feature in the future?