Elementor
✈ Preset Style (Migrated) #30215
Replies: 88 comments
-
|
... does this mean it will be available as build in feature in next update... ? or have to tweak myself? (useful also in my opinion) |
Beta Was this translation helpful? Give feedback.
-
|
We call it "Preset Style" it's something we plan in the future |
Beta Was this translation helpful? Give feedback.
-
|
Will All widgets have this "Preset Style" Feature ? |
Beta Was this translation helpful? Give feedback.
-
|
+1 Preset Style for all the widgets would be a great timesaver. |
Beta Was this translation helpful? Give feedback.
-
|
@arielk "Preset Style" would be amazing. If this is in the works, it would be great if you could import/export all of your styles. |
Beta Was this translation helpful? Give feedback.
-
|
I totally agree with drawcard on the button issue but I'd like to see it taken further. This may be impractical but I'll outline the idea anyway. In fact I purchased the PRO version because I thought this was the way global widgets would work. I would like to see a Global Widget Template (or whatever you want to call it). This would start off by dragging a widget into the GWT (Global Widget Template) library but would only be editable in the library. When an instance of a GWT is created (by dragging it into a section/column) all properties would be the same as the GWT. After that, ANY property of the widget instance could be edited and that would override the value of the GWT. Then, any change to properties of the GWT in the library would affect all widget instances except where a widget instance property had been directly modified. To me this simply looks like base class properties being overridden by a class that extends the original. The advantage of this approach is that it not only satisfies the requirement for the case of the button but it allows any number of properties to be overridden on a per widget instance, for any widget. It would not matter if the property was thought of as content or style. For example an Icon Box GWT could be created, defining the colors, icons, padding, animation etc. Several Icon Box GWT instances would be created and you can select a different icon per instance and maybe one instance also needs a different animation. But still any of the Icon Box GWT properties could be modified and those changes would be applied to every instance except for where a property had been directly modified. |
Beta Was this translation helpful? Give feedback.
-
|
So I just posted a feature request for the same sort thing, sorry I missed this one. Are there plans to implement this any time soon? Here's my original feature request: There's a major issue I have with Elementor that's putting me off adopting it for anything other than quick one page designs. There's no way to set default styles and options to keep things consistent and easy to maintain. I was hoping this would be addressed with the Elementor Pro 2.0 update, seeing how it's bringing many theming like options, but it's not looking likely. What I really want to see is an option to save presets for element options that are saved globally. So have a 'default' preset that's used whenever you drag out a fresh element, as well as a dropdown to select any other presets you have saved. Update a preset = updating that element throughout the whole site. Say I'm building a site for a client and their style doesn't allow for rounded buttons. The best I can do within Elementor is save a styled button as a global element and drag that out and then detach it before editing the label. But now what happens when the client decides they love round stuff and I need to tweak the button design throughout the site? - the answer is going through every single elementor entry and manually editing each button one by one - ouch! Now, if we had global presets this would take me 2 minutes to alter the preset and I'm done. The other thing I'd like is for the Color Picker colors to be globals. Manually changing every element throughout a site when the colors need tweaking would be a nightmare. |
Beta Was this translation helpful? Give feedback.
-
|
@maxwellhibbert it's a good idea - though I wonder how this overlaps with existing frameworks (like Bootstrap or Foundation), where devs set up all the global styles beneath the Elementor CSS stack, to handle base styles. Elementor's solution would have to sit between a given framework, and Elementor itself somehow. I have thought about this problem a bit over the years since my first post... One solution could be to have an additional tab in the Settings section to allow a designer to set variables for common elements (like button radius, drop shadow, fore/back colour etc) which targets the basic Elementor classes, and from there, they can be manually overridden in the editor itself like normal. This could be as simple as an input field that lets devs write the custom CSS they need, or it could be a more simpler panel of sliders like the traditional Elementor UI. But until that gets built, I have been doing 2 things:
.elementor-button-mystyle {
border-radius: 100%;
}
.elementor-heading-mystyle {
border-bottom: 1px solid #aaa;
margin-bottom: 20px;
padding-bottom: 20px;
etc etc.And then specifying those classes for each button / header etc. I create in Elementor (easiest to use Global Widgets for this, to quickly bang out duplicates). That way, if I need to update border radius globally, I can do so without much effort.
Those two solutions are pretty damn ugly and I don't like using them. They are also not very "client friendly" unless the client knows a bit about CSS and Global Widgets. So having a global settings system to handle this would be really awesome. But for now it sorta kinda gets the job done... |
Beta Was this translation helpful? Give feedback.
-
|
@drawcard Hmm elementor already sits separate to theme styles, so I don't think that'll be an issue. The way I see the presets working is to have every available option for that element saved, other than content, so when you load a preset then all of those options are set in the interface - and if you make a change it'll detach, but you could then save as a preset again to make it global. |
Beta Was this translation helpful? Give feedback.
-
|
Oh right. Yeah so you're thinking something like:
Essentially, like how style presets work in Photoshop or Sketch... Pretty cool idea, I wonder if it can be done with JSON or something to store all the preset values for a given element. It'd probably be a bit of an extensive overhaul of how Elementor works unless it could be done with all the cool hooks and stuff coming out in v2.0... |
Beta Was this translation helpful? Give feedback.
-
|
I wonder if, just like we have Global Widgets, we have "Global Styles" too... where these snippets of JSON or whatever could exist, and be called from a dropdown list for every element as overrides. So what that could do is allow global styling not just for "button elements" but for anything across the board matching that variable. Note: This stuff is a bit out of my depth, so I may be talking out my 🐴 but bear with me :) Someone with a better understanding of Elementor can step in and correct me. Let's say I have 30 buttons, 5 flip panels, and 2 HTML panels with black backgrounds set in Elementor. Now I want to make all of those backgrounds orange without manually editing everything.
.elementor-foobar-object {
background-color: black;
}
.elementor-foobar-object-123456789 {
background-color: orange;
}
{
"style-guide-v2": [
"background-color": "orange",
],
}This also creates a new entry in a dropdown on every element to call that JSON and apply it to the element, and if I no longer like it, I simply pick something "Custom Appearance" or something in the dropdown to ignore it. When the CSS is compiled, the JSON values are sucked into the compile and out goes your new style applied to everything: .elementor-foobar-object {
background-color: black;
}
.elementor-foobar-styleguide-v2 {
background-color: orange;
}
/* Individual overrides remain unaffected */
.elementor-foobar-object-123456789 {
background-color: purple;
}
{
"style-guide-v2": [
"background-color": "blue",
],
}Or my client is not sure, so I need to make an orange AND a blue option to choose from: {
"style-guide-v2": [
"background-color": "orange",
],
"style-guide-v3": [
"background-color": "blue",
],
}But wait, I really need to add a whole ton of things in "Style Guide v2" at once and can't be bothered firing up a new Elementor browser tab. Why don't I just write all of that into the JSON right now? Or cut and paste it from my IDE into Elementor's setting panel? {
"style-guide-v2": [
"background-color": "orange",
"font-family": "'Jokerman', 'Curlz', 'Papyrus', Comic-Sans, monospace",
"color": "white",
"margin": "100px 0px 20px -30px",
. . .
],
}You get the picture! TL;DR "Global Styles" could be stored in JSON format to make them easily editable across the board for coders, but easily storable / accessible for regular users. Had to get this down before I forget it all! 😆 |
Beta Was this translation helpful? Give feedback.
-
|
Bonus comment. 🌈 To make the editing easier for everyone, a simple UI could be created to update the JSON file. But the option to Export / Import JSON is there for coders.
|
Beta Was this translation helpful? Give feedback.
-
|
+1 for your solution. to add the thoughts from merged Topic: Reset Elementor's preset to custom preset. #4509 for all kind of css-targets more than GUI-oriented sass/css - solution
Selectiv sync for «global style» |
Beta Was this translation helpful? Give feedback.
-
|
I've had a rethink since I wrote up my original solution, in order to achieve this a bit more quickly. It's probably not as flexible as the JSON solution but it would address the burning issue (controlling button styles). But in future it could work for other things like form styles etc. The original problem I raised, cropped up on a client website again yesterday - we can set default accent colours for buttons (eg. make the backgrounds any colour we want) but we can't do the same for the button text - which always defaults to black. So if we pick an accent colour that's dark, we then either have to write CSS manually to make the text reversed, or hand-edit all the buttons if the text colour was set manually. Which is a total nightmare on a site with hundreds of buttons... So, we currently have this (image below). So why not just write another control for buttons, eg "Default buttons" and then set the necessary style here? There you could set background colour, foreground colour, border radius, box shadow, and all the other goodies. Overrides would still be respected, but at least this provides a good way of setting up the basics.
|
Beta Was this translation helpful? Give feedback.
-
Why can't this be merged? It's been 5 years. |
Beta Was this translation helpful? Give feedback.
-
|
I know it will come at some point, actually already in 2021 according to Elementor's announcement video in the summer, but if not this year the chances are not bad for 2022. So, +1 again.. |
Beta Was this translation helpful? Give feedback.
-
|
Would love to have this feature +1 |
Beta Was this translation helpful? Give feedback.
-
|
When this is implemented I hope that it takes the form of selectable presets, but also a "make default" option so that clients can just drag the components out without having to remember to take additional steps. I've always been looking for and never found a system that is designed with clients in mind. Like a system where you have the developer view but then you put together a kit for the client to use to build their pages using the things you have set up for them so that it easily stays on brand. |
Beta Was this translation helpful? Give feedback.
-
@arielk When is the future? 😅 |
Beta Was this translation helpful? Give feedback.
-
|
Preset Style is actually the same css class in bricks builder? Or I am wrong. |
Beta Was this translation helpful? Give feedback.
-
What do you mean? 👀 |
Beta Was this translation helpful? Give feedback.
-
How does Preset Style work? |
Beta Was this translation helpful? Give feedback.
-
|
This is now possible with "Save as default" since 3.9. As an experiment tho |
Beta Was this translation helpful? Give feedback.
-
In a very first version, yes. But many is missing here.. |
Beta Was this translation helpful? Give feedback.
-
|
Is the preset style the same as the CSS Selectors that exist in the Roadmap? https://elementor.com/roadmap/ |
Beta Was this translation helpful? Give feedback.
-
A part of it I think. |
Beta Was this translation helpful? Give feedback.
-
How about to expand this functionality to have the the widgets Linked with the styles, so if widget uusing the Default Style then by chnaging the style on one widget it will be changed on all of them across the site. |
Beta Was this translation helpful? Give feedback.
-
|
I think you posted in the wrong place. Your request was about having a Global Section, Style Presets are another feature entirely. |
Beta Was this translation helpful? Give feedback.
-
|
Hi there,
|
Beta Was this translation helpful? Give feedback.
and others
-
Each time I make a button, I sometimes need to re-style it to make it match other buttons. Sometimes to get around this I duplicate buttons on the same page, but that doesn't help for copying styles across different pages. I also thought about creating a single button as a template piece, but it seems like a bit of overkill.
So it would be cool to have some sort of way to store the styles for buttons and pick them from a dropdown, to quickly update button styles that are set within Elementor. Maybe it could be treated in the same way that global font styles are set (ie create some styles beforehand in the global styles panel, and then apply them to elements).
Beta Was this translation helpful? Give feedback.
All reactions