Introducing New Color Picker & Dark Mode

Today, we introduce colorful new features to Elementor: Dark Mode, a brand new color picker and improved responsive functionality. All of these features are sure to scale up your workflow experience and get you ready for the new decade ahead, with the best UI in town.

Play Video

Brand New Color Picker

Better Saving, Deleting & Rearranging Colors

Save Unlimited Colors

Keep your favorite colors, and have them follow you across Elementor.

ColorPicker1

Get Rid of Unneeded Colors

Simply drag down a color to delete it from the picker.

ColorPicker2

Rearrange Your Pallete

Move colors around to get the order just right.

ColorPicker3

We’ve built a brand new color picker, that significantly improves how you save and arrange your favorite colors.

If you’ve built Elementor sites before, you know that the color picker is used dozens of times throughout every project. It took a lot of work, but we’ve completely rebuilt our color picker in order to make your workflow more efficient.

From now on, you can save your favorite colors straight from the picker itself. In fact, save a color on any picker across Elementor, and it will automatically sync with every other picker across your site.

Deleting and rearranging colors is also quite intuitive. The familiar drag and drop functionality will let you set the proper order of colors, and the trash is for deleting the colors you don’t need anymore.

What if you REALLY love colors, and want to pick a wide range for your design? No problem! You can save as many colors as you like. Turn your site into a canvas!

Dark Mode

New UI Theme: Party Starts When Lights Go Off

DarkMode1

Hello darkness my old friend, I’d love to design with you again…

I am happy to announce that Elementor now offers a whole new interface appearance – Dark Mode. Elementor’s Dark Mode is not just for you night owls, goths, and Star Wars fans.

There are a lot of practical advantages to using this setting. When you’re designing a dark-themed website, it’s much easier to have a similarly dark editor with a calm and subtle color scheme. It saves your laptop’s battery life, it’s good for the environment, and it has a smooth look and feel to it. Plus, it’s a lot easier on the eyes, so you can work into the wee bit hours of the night building beautiful websites.

Following Apple, Facebook, Google Chrome and soon to be WhatsApp, it’s time Elementor joins the celebration and give users the hottest thing in app UI.

A group that is sure to love this feature are Elementor developers, since most coding is done in dark apps. Guys and gals, this is your chance to put even more efforts into developing spectacular addons for Elementor!

Get this — while you can manually set the editor to dark or light mode, you can also set it to automatic, meaning it will adjust the editor to dark or light according to your native OS setting.

New Responsive Editing

Muted Hidden Elements & Switcher for Responsive Editing

NewResponsive

If you loved the color-related improvements, I’m sure you’ll also dig the improvements we’ve added to responsive design.

For responsive editing, we wanted to offer a way to hide sections, columns and widgets from certain devices, and still have those elements visible while editing.

After hiding an element and switching to the view it’s hidden on, you will see that this element in “muted” mode. This way, you can stay aware of every element on the page, even the hidden ones. 

Want to get a precise layout and hide out the muted elements? Simply click on the ‘Hide Panel’ icon and you will see a preview of what the page looks like to users. 

Another responsive feature we changed was the device switcher.

You know how when you switch from mobile to desktop, the switcher runs horizontally? In many cases, this cause some distortions in the display, and also limited us from extending the switcher. This is why we’ve turned the switcher from a horizontal into a vertical menu. Doing this takes us  a step closer to develop more customized breakpoints which so many users requested.

Template Library Connect

The Future of Elementor Templates Looks Bright

Connect

The Elementor Library was one of the first features we released, and has grown to become one of our most substantial features. Its functionality has expanded to include block and page templates, popups, dynamic templates and more.

As part of our continuous efforts to improve this feature, as of version 2.8, we have added the infrastructure for a smarter library that will incorporate remote access, login capabilities, and a more personalized experience in the future. The Library Login will enable us to add valuable personalization features such as ‘favorites’ and ‘recently used’ views, so you can have easy access to the templates that you really want.

Connecting to the library prevents abuse and helps improve user authentication. If you’re a user who already activated your Elementor Pro license, we have you covered. You’ll have instant access to the library and won’t need to connect.

Elementor 2.8: Hello Dark Mode, My Old Friend!

Elementor Version 2.8

The Last Core Release Before the End of the Decade!

Many of the features listed above, as well as other features added in this version, serve as the foundation for more advanced features coming up in 2020. 

With the features we have lined up, it seems that 2020 is going to be Elementor’s biggest year yet… Stay tuned for some amazing surprises that will rock your web design business!

Now’s the time to try out Elementor Pro, and start the new year with the most powerful site builder in the world, that’s just about to get even better.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 1,044,080 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

94 Responses

  1. yeah. one more step ahead in usability 🙂
    but i’d really love to see the ability for color-picker and external templates especially to be turned off for simple editors and such!! people sadly tend to mess things up if they can …

    1. Yes, there should be an option to disable the editing of the colors for lower roles or maybe even for everyone after a developer setups allowed colors.

  2. Ooooh, Dark UI. Very nice. I’ve been waiting for this for a while as I’m working into the early hours of the night with the lights turned off!

  3. All good stuff here. Thank for you for getting to the color palette, that’ll save a ton of time.

    For the templates piece, seems like that’ll make it easier to organize the components we’ll really use. Having some sort of ability to create a “style guide” would be / will be extremely helpful. Right now, manually tracking where approved components are is kind of painful.

    Would love some more functional support on forms, it’s so close to being able to match the functionality of companies that exist to be just form builders.

    Things like
    – Option to exclude certain domains from submitting (like gmail, yahoo, etc)
    – What a field looks like when you hover over it / click into it
    – multi step forms so that users to make chunking exponentially easier.

    Keep up the good work!

  4. When will Elementor support global styling with a centralised place to alter colours/fonts/spacing across all pages? Currently having to hack together multiple plugins and stylesheets to achieve this.

      1. HUGE thumbs up. This is the single most important thing you can do for my workflow. The templates are pretty … and they are pretty much useless to me as an actual working professional without this long-desired next step.

      2. What Ben said! Global colours is the number one biggest request from me at the moment,followed by other global styles. Game changer once you implement it.

  5. These are great new features. Thanks! I’d still love to see the ability to quick adjust entire color themes on a global level (similar to what Brizy is doing). In other words, the ability to explore color themes on the fly, where every color of the page can be modified in a cohesive way. The ability to make quick global changes would be great.

    Another thing that a lot of users would like to see fixed are the issues with alignment. I constantly am having to manually modify the mobile and tablet views because what looks good on desktop ends up showing squashed, misaligned, and uneven spacings on mobile and tablet view.

    The other problem that many users have mentioned an issue with is the gap indents that are applied to columns, resulting in having to manually apply negative padding and doing math to figure out how to maintain equal custom column gaps. A plugin had to be created by a user to fix this, though having to use another plugin is not optimal since it decreases load times and adds unnecessary bloat.

    I love Elementor, though would love if alignment issues were fixed and it were easier to maintain consistent spacings between sections. I end up spending more time dealing with this than creating my pages. Please address these problems and implement some of the features from Brizy. Thank you.

  6. I follow Derek!
    “Another thing that a lot of users would like to see fixed are the issues with alignment. I constantly am having to manually modify the mobile and tablet views because what looks good on desktop ends up showing squashed, misaligned, and uneven spacings on mobile and tablet view.”

    I also never had to do this, with elementor I always need to fix almost entire pages for tablet and mobile. Never had this before with other builders. (except for very small tweaks)

    DARK MODE, nice!
    Would this make it possible to design two versions for our readers as well? So that they can choose to have the light or dark mode?

  7. I wondered what on earth I had done to cause a dark mode effect in some of my Elementor editions windows?! Haha.😄

    Loving all the new features, especially the enhanced colour management. That is so helpful. Thank you!

    I’m very much looking forward to seeing how Elementor Pro continues to stay ahead of the competition in 2020.

  8. Good story Ben! When will 2.8 be released? 2.7.6 just came out, so I’m excited to get my hands on a stable 2.8.
    Congrats to the team, awesome product! I definitely fell in love with the Elementor builder…
    Thanks guys!

  9. Although I appreciate and value these incremental updates there are some far more pressing issues that needs addressing IMO (a few are mentioned in this thread).

    I can’t wait to see an overhauled template management, more responsive options (breakpoints etc.), and general setting such as fonts, colours, etc. logically organised in the customiser.

    Carry on the great work!
    Thank you

  10. Wow….just I upgraded to 2.7.6…elementor made things easier and faster development. Kudos to elementor team and management. Out team is eagerly awaiting for the 2.8 stable version.

  11. Nice! I’m looking forward to the new features.

    I’ve been using Universal Color Palette for some of these color picker features.

    The muted effect on hidden sections will be cool too. That’s less visually confusing when you have different sections for mobile vs. desktop on the same page.

  12. These look like great new features. I haven’t received the update for my site yet though. It just got the update for version 2.7.6 but not 2.8. Does it take some time to get out to everyone through the WordPress dashboard?

  13. I am a Elementor Pro customer. I assume these features are for the free and paid versions. My question which might seem dumb is how do I obtain this updated version (2.8)?

    The Elementor Pro shows that it is up to date in plugins and the standard elementor plugin is at version 2.7.6 and Elementor at 2.7.3 in the plugins. Thanks!

  14. Hey guys, all good except the new license connect methods. i just receive 100s of emails from our customer asking what happen to their licenses, we need to log in and activate one by one. its not true when you say no need to do anything if its activated by default.

    bad moves. anyone else with the same problem ?

    1. There is no new license connect method. This was added a long time ago. The connect was added to the template library, so if you need to insert a template you need to connect, and only once per user.

  15. Wounder full as always..
    May I ask for:
    1- Page transitions with AJAX on loading.
    2- Push/Pull PopUp entrance & Exit animations.
    3- More User control options not to break developer works

    Thanks.
    Keep the good work ,please.

  16. Really love the new color picker. It’s a long-waited feature finally in Elementor. Nice Job!
    The dark theme also looks nice, but I think the icon color a little dull…. (maybe just me).

  17. The color picker would be nice if it integrated with the theme customizer. For me, font colors for each of the H1-H6 tags is often important so this makes the new color picker useless. I use Central Color Pallete along with Page Builder Framework Pro theme. This works the way it should be with the same color pallete everywhere.

  18. Great update as always! But must admit when I saw the words “Dark mode”, I was kinda hoping for a way to easily DESIGN sites with multiple different styles for light and dark theme, like https://9to5mac.com (see the switch in the menu at top). Any plans for this in the future?

  19. Great Elementor! team, looking forward to see new features.
    Will Santa Claus bring us something new for Christmas? I hope so, because I have been a very good child and the only thing I have put in the letter is improvements for Elementor! I would be willing to pay double for having some extra advantages.
    Many spirits and continue like this team!
    ADVANTAGES NOTE: reduce the DOM, speed in devices, add options of transitions with the mouse, lateral scroll, activate js events, for example make a custom icon activate a slider and many other things that occur to me, but hey, you You’ll know, I just think high.
    good week for all!

  20. This is awesome! I’m having a lot of trouble finding the hide panel icon when it comes to hiding muted elements – can someone guide me to where that is?

    Also, I don’t understand the piece about “you know how when you switch from mobile to desktop, the switcher runs horizontally? In many cases, this cause some distortions in the display, and also limited us from extending the switcher. This is why we’ve turned the switcher from a horizontal into a vertical menu.” It looks the same to me? I’ve run the update – LOVE the dark mode, and the muted elements.

  21. Great thank you. I was wondering, is there any way to change the default colors of a widget? For example, the default design of a Button widget or the List widget. For example, I used 3 List widgets on my product pages and if I want to change the look of something, I have to go and apply it to the other 2 as well (it is not a global widget). Is there any way to change how a widget looks by default?
    Thanks

  22. Very happy customer since day one of Pro.

    Thank you for every improvement.

    My only request that I haven’t seen much interest from others is a character limit on form message fields (text area). So over getting solicitations on my customers forms.

    ….pretty please? <3

  23. I really like the new color editing options, makes the process even easier. Dark mode is a must, good thing to start the new year with 😉

  24. I used to fire my notepad to write the hex code and saved it as the site names, this way I won’t messed up, but wait what? now we can save the code directly in elementor? well that’s fantastic!!

  25. Thank you very much for these fantastic new features!
    It’s a pleasure to work with Elementor!

    Now I have a question:
    Most users use their tablets in landscape format.
    Unfortunately, Elementor can only be used to design tablets in portrait mode.
    Also missing is an optimal design for smaller laptops.
    The ideal solution would be to be able to easily set breakpoints yourself in the free version as well.
    Will there be an update with these features in Elementor?
    Yours sincerely
    Martin

  26. Looks like the new version is less stable – when i want to edit to fast elements are jumping out of the column and the edited elements are sometimes looking unedited in the editor but are o.k. on the site.
    Is this because there is no update yet for the pro version?

  27. Uggh… I really hate that you’ve removed the display of the RGBA color values. Please bring them back! The new interface makes it practically impossible to set a specific percentage value for color opacity.

    Eg. If I need to set precisely 70% opacity such as rgba(255,255,255,0.7) how can this be done now? Previously we could drag the slider and easily see and set a specific RGBA percentage.

    Now with v2.81 you have to guess by the slider location as it now shows an annoying 8 character HEX value instead of rgba, so we see #FFFFFFA6 in the interface but it ends up in the code with a million decimal points as rgba(255, 255, 255, 0.6509803921568628).

    At least give us an option in the settings to choose between the interface showing RGBA or 8-character Hex.

  28. Brand New Color Picker looks very good and I like it but: As I do define my colors in Central Color Palette with HSL(…) definitions, how can I have that color scheme (or RGB, RGBA, …etc) shown in the new version. I would very much like to master this part. Can you help me pls, thks

    1. and may I ask to have transparancy set in decimal as now it is shown in hex (ffx = 1.0 … 00x = 0.0). This is very unusual esp. for noncoders! Please advice on how to, thank you.

  29. Hi Ben,
    Love all of the updates over this past year. You all are doing a great job over there!

    One thing I’d like to see is the ability when I set up the default fonts in settings to set a color as well as the font and weight. I often have clients that will have the main head be one color and secondary heads a different color. It’s a pain to set each of those manually. Of course I could write a global style, but that’s an extra step of course.

    Thanks for all the awesome work!

  30. A few weeks in, I can say the new Dark Mode and Color Picker absolutely rock – so intuitive in the daily work. So awesome!

    Thanks you, Elementor Team, for making our work more easy – every single time!

  31. There is a //BUG// if you want to type a hexa color, it autofills it while writing..

    example:

    type #32f….and its not possible to write, it autofills it to #3322ff….and if you want to change this with delete,its not possible.

    It would be nice to have a eye drop color picker.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 1,044,080 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.