When saving Elementor widgets as global widgets, there are often times in a design where I want to use a global widget in a specific part of the design, but there is part of the global widget I would like to change. For example, it could be a form where the fields are all the same, but in one section the form field backgrounds need to be one colour, and in another section the form field backgrounds need to be another colour. Unfortunately, there is no way to change individual styles on an instance of a global widget, but it can be done with some code.
In this tutorial, I demonstrate how to style an individual instance of a global widget without affecting all other instances of the global widget. This can be done by applying a CSS class to the parent container of a global widget and then selecting the global widget via the class and changing specific styles on it with CSS. If you would like the code used in this video, click the link below to my blog post about this topic, where you can copy and paste it to your website.
.blue-button .elementor-button {
background-color:#00d2fe!important;
}
.blue-button .elementor-button:hover {
color:#fff!important;
background-color:#0086B2!important;
}
