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.
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:
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.