Elementor 3.12 rolled out its new UI design flashing that signature Elementor Pink! And then the storm of comments thundered in!
Here’s the thing with a color palette – Colors are subjective, and the responses to the new UI update were very diverse. Some loved it. Some thought meh, and then others were clearly not a fan.
So, why not change the colors in Elementor’s editor UI? It’s really not that difficult with the right snippets of code. You can even make this personal for all your sites and create your own branded editor experience. We don’t need to be limited to Elementor’s brand color choices. And in this post, I’ll show you how to do just that.
How we are changing Elementor’s editor colors
First, no plugins required! If you follow my videos, you know I’m keen to always find solutions first without plugins to keep our sites light and clean.
We’ll be adding 2 snippets of code, and I’ll walk you through them step by step. The first snippet is going to be a PHP snippet that includes the CSS for the editor colors. And the second snippet is a CSS snippet for the preview and builder colors.
Step 1: Customizing the Editor
There are 2 versions of the code snippets to add – a light mode and a dark mode. Note – This will not auto-detect. But changing from one to the other is simple once you know where to look.
We need to add this PHP snippet of code for Dark Mode:
/* Editor in Dark Mode - Add to functions.php in a child theme or use Code Snippets */
add_action('elementor/editor/wp_head', function () {
echo '<style>
.elementor-panel
#elementor-panel-saver-button-publish:not(.elementor-disabled) {
border-color: currentColor;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
/* start editing here*/
/* Editor Background */
--e-a-bg-default: /* add your color here */;
/* Header and Footer Areas*/
--e-a-dark-bg: /* add your color here */;
--e-a-dark-color-txt: /* add your color here */;
--e-a-dark-color-txt-hover: /* add your color here */;
/* Update Button and toggles */
--e-a-btn-bg-primary: /* add your color here */;
--e-a-btn-bg-primary-hover: /* add your color here */;
--e-a-btn-bg-primary-active: /* add your color here */;
/* Widget Colors On Hover - Note widget colors same as background colors by default */
--e-a-bg-hover: /* add your color here */;
--e-a-bg-active: /* add your color here */;
/* Widget Border Color */
--e-a-border-color: /* add your color here */;
/* Search In Focus */
--e-a-border-color-focus: /* add your color here */;
/* Text Selector Background Color */
--e-a-bg-primary: /* add your color here */;
/* text color */
--e-a-color-txt: /* add your color here */;
/* Link Hover and Global Style Active Icon Color */
--e-a-color-primary-bold: /* add your color here */;
/* Info Link Color*/
--e-a-color-info: /* add your color here */;
/* Border Color in Widget Elements*/
--e-a-border-color-bold: /* add your color here */;
/* Selected Controls in Widget Editor - background color */
--e-a-bg-active-bold: /* add your color here */;
}
}
</style>';
}, 100);
For Light Mode:
/* Editor in Light Mode - Add to functions.php in a child theme or use Code Snippets */
add_action('elementor/editor/wp_head', function () {
echo '<style>
.elementor-panel
#elementor-panel-saver-button-publish:not(.elementor-disabled) {
border-color: currentColor;
}
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
/* start editing here*/
/* Editor Background */
--e-a-bg-default: /* add your color here */;
/* Header and Footer Areas*/
--e-a-dark-bg: /* add your color here */;
--e-a-dark-color-txt: /* add your color here */;
--e-a-dark-color-txt-hover: /* add your color here */;
/* Update Button and toggles */
--e-a-btn-bg-primary: /* add your color here */;
--e-a-btn-bg-primary-hover: /* add your color here */;
--e-a-btn-bg-primary-active: /* add your color here */;
/* Widget Colors On Hover - Note widget colors same as background colors by default */
--e-a-bg-hover: /* add your color here */;
--e-a-bg-active: /* add your color here */;
/* Widget Border Color */
--e-a-border-color: /* add your color here */;
/* Search In Focus */
--e-a-border-color-focus: /* add your color here */;
/* Text Selector Background Color */
--e-a-bg-primary: /* add your color here */;
/* text color */
--e-a-color-txt: /* add your color here */;
/* Link Hover and Global Style Active Icon Color */
--e-a-color-primary-bold: /* add your color here */;
/* Info Link Color*/
--e-a-color-info: /* add your color here */;
/* Border Color in Widget Elements*/
--e-a-border-color-bold: /* add your color here */;
/* Selected Controls in Widget Editor - background color */
--e-a-bg-active-bold: /* add your color here */;
}
}
</style>';
}, 100);
For this tutorial, I’m using Code Snippets. The free version works perfectly for this. You can also use a child theme. To learn more about a child theme for Hello by Elementor check out this article.
Once you’ve added the PHP snippet, you only need to add your color hex code where you see the ‘/* add your color here */‘ in the CSS.
I suggest taking your time, adding 1 color at a time to get a feel of what change each makes.
Step 2: The Preview and Builder
We need to add this snippet of CSS.
/* The Preview and Builder Colors - Add to the Customizer or Elementor Site Settings Custom CSS */
:root {
/* Edit Here */
/* Primary Color */
--brand-color: /* add your color here */;
/* Hover Color */
--brand-color-hover: /* add your color here */;
/* Active Border Color */
--brand-color-active: /* add your color here */;
/* do not edit below */
--e-p-draggable-color: var(--brand-color);
--e-p-border-column: var(--brand-color);
--e-p-border-column-hover: var(--brand-color-hover);
--e-p-border-column-invert: #0c0d0e;
--e-p-border-section: var(--brand-color);
--e-p-border-section-hover: var(--brand-color-hover);
--e-p-border-section-invert: #0c0d0e;
--e-p-border-con: var(--brand-color);
--e-p-border-con-hover: var(--brand-color-hover);
--e-p-border-con-active: var(--brand-color-active);
--e-p-border-con-invert: #0c0d0e;
--e-p-border-widget: var(--brand-color);
--e-p-border-widget-hover: var(--brand-color-hover);
--e-p-border-widget-active: var(--brand-color-active);
--e-p-border-widget-invert: #0c0d0e;
--e-a-btn-bg-primary: var(--brand-color);
--e-a-btn-bg-primary-hover: var(--brand-color-hover);
--e-a-btn-bg-primary-active: var(--brand-color-active);
}You can copy and paste this snippet in either your customizer or in the editor, go to Site Setting (the menu in the top left corner ), and paste it into the Custom CSS.
There are only 3 parts of the code to edit here. Just follow the instructions in the code comments and add your color hex code, and you’re good to go!
Create Your Own Branded Elementor UI
With these code snippets, you can create your own unique and branded experience. And then, create a template so you can quickly add to any site you build with Elementor.
How About a Video Tutorial?
Check out the video I created below to better walk through the process and set up your own customized and branded Elementor Editor UI!
