Elementor 3.12’s UI: Love It or Change It!
When Elementor 3.12 introduced its new UI design, the bold Elementor Pink took center stage. As expected, the design sparked a flood of mixed reactions.
For some, it was a refreshing upgrade. For others, it was just okay. And for a notable group, it wasn’t appealing at all.
But here’s the beauty of customization: you’re not stuck with Elementor’s default colors! With a few simple adjustments, you can tailor the editor’s UI to align with your preferences or branding. In this guide, I’ll show you how to take full control of Elementor’s editor colors—no plugins required.
Why Customize Elementor’s Editor Colors?
Colors are a deeply personal choice. While Elementor’s pink branding works for many, it might not match your style or your clients’ brand identity. By customizing the editor colors, you can:
- Personalize the design workspace.
- Align the UI with your brand colors.
- Create a clean, cohesive editor experience.
No Plugins? No Problem
As always, I prioritize lightweight solutions that don’t add unnecessary bloat to your website. For this customization, we’ll use two simple snippets of code:
- A PHP snippet to load custom styles for the editor.
- A CSS snippet to refine the look of the editor and preview interface.
Step 1: Customizing the Editor
There are two customization options: Light Mode and Dark Mode. While this method doesn’t include automatic detection, switching between modes is straightforward once you know where to look.
Using just a small amount of code, you can transform Elementor’s default UI into a workspace that feels uniquely yours.
By following this guide, you can ditch the default pink and create a branded, user-friendly editing environment. Let’s make Elementor work for you!
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);Tools You’ll Need for Customizing Elementor’s Editor Colors
For this tutorial, I recommend using the Code Snippets plugin. The free version is more than sufficient for our needs. Alternatively, you can opt to use a child theme. If you’re new to child themes or are using Hello Theme by Elementor, check out this guide for step-by-step instructions.
Once you’ve added the PHP snippet, the only step left is to insert your preferred color hex codes where you see the placeholder /* add your color here */ in the CSS.
Pro Tip: Test as You Go
To ensure your customized colors look exactly how you want, I recommend adding one color at a time. This approach allows you to see the specific changes each color adjustment makes, helping you achieve a polished, cohesive design.
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);
}Easy Steps to Customize Elementor’s Editor UI
You can effortlessly implement this snippet by copying and pasting it into your Customizer or the Editor. Navigate to Site Settings (accessible via the top-left menu in Elementor) and insert the snippet into the Custom CSS section.
Quick Edits for a Personalized UI
This snippet has only three parts you’ll need to adjust. Simply follow the instructions in the comments within the code, add your preferred color hex codes, and you’re all set to go!
Create a Branded Elementor Experience
By using these snippets, you can design a unique, branded editor UI tailored to your preferences. You can even save this setup as a template, making it easy to replicate across any Elementor-based site you build in the future.
Prefer a Video Tutorial?
For a detailed walkthrough, check out the video below, where I guide you step by step to create and implement your customized Elementor Editor UI!