Introducing Theme Style: We’re Bringing Global Theme Design Into Elementor

Get ready, The first stage of global styling is here! Elementor Version 2.9 brings a new way to set global headings, backgrounds, images, buttons and more.

Design consistency. All web designers and creators strive to achieve it, but maintaining it is a challenging matter, especially if you continuously add new content to your site. 

The more pages we build, the harder it is to keep the same level of consistent design. 

Not deviating from our chosen style gets even more challenging if we take into account client changes. Imagine if you complete a big project, and your client decides to change one of the heading colors. 

Is this a catastrophe waiting to happen? Don’t worry, Elementor to the rescue! 💪

Introducing Theme Style. A set of new controls that replaces theme and code for setting global theme styles, this way saving you a lot of time.

Among the key benefits of this feature:

  • Make style changes across your site without coding.
  • No need for the theme customizer. Change theme settings from within Elementor.
  • Maintain consistent design across the whole site.
  • Set the default style of plugin elements and Elementor widgets  (for Elementor widgets to be effected, remember to first disable default global colors and fonts).

Break from theme & code chains! The first stage of global design is here. #NoTheme #NoCode #WordPress #Elementor

#NoCode

Elementor Removes Another Coding Hassle

Why does your site design change, and sometimes even break, when you switch to a different theme?

This happens because when you install any WordPress theme, it creates a layer of design styles and rules. Any new element you introduce to your site may inherit those style settings.

The new Theme Style we created eliminates this challenge, by taking over the global design layer previously handled by the theme.

Theme Style is a new menu that appears when you click on the menu icon in the top left of the panel. It includes settings that allow you to control your entire site design globally.

Set a certain style under Theme Style, and it will change the relevant HTML tag and apply the style across your website. In fact, any new element you add to your site will adopt this HTML tag style by default.

#NoTheme

Forget Editing Your Theme in Different Interfaces. Use Elementor Instead!

As a theme user, you might have experienced the frustration of not being able to change the style of a certain element. I bet thousands of users fuss over changing a simple H1 heading color. With Theme Style, this frustration is finally over. You can now set default styling for:

  • Images
  • Form fields
  • Buttons
  • Headings
  • Links
  • Text
  • Backgrounds
  • and more…

Before, you had to turn to code or to your theme settings in order to set different default styles. With Theme Style, simply set it all in one place, and it will affect all the images in your site instantly.

Theme Style is modular, meaning that only the settings you change are affected, and the rest of your site’s styles remain the same.

Made a change and it wasn’t to your liking? No problem! Theme Style works with the Revisions and History controls, so you can undo / redo any changes, and can always revert back to an earlier version of your site design.

Revamped Lightbox

Show Your Images, Videos & Galleries With New and Improved Capabilities

Theme Style is expected to take the spotlight of this release, but the changes that we have made to our Lightbox are definitely worth your attention. We are introducing several new capabilities to image and video lightboxes, so you can showcase your media in a much better way than before.

The new features of lightbox include:

  • Title & description – Add an informative title, description, alt tag, or caption to your images, so visitors get a better idea about the message of each image.
  • Zoom & full screen – Once you zoom-in on an image, you’ll be able to pan the view and scroll across the different areas of that image. You can also open the image lightbox or video lightbox and display your content in full-screen mode, without the distraction of the browser window.
  • Share & download – We added share capabilities that can appear in the lightbox window. The user can choose to share the image on Twitter, Pinterest, and Facebook. There’s also an option to download it to the computer.
  • Responsive Lightbox for Mobile – All the functionality we’ve mentioned also works on mobile. Visitors can zoom, pinch and open the media in full screen. They are also able to share them from their phones.

Custom Link Attributes

Add Advanced HTML Attributes to Your Links

Custom Link Attributes have always been an enhancement that users have asked us to add to Elementor’s link control. With it, you can add various properties to your site links and extend the capabilities of Elementor even more than before.

  • Want to allow your visitors to download PDF files on a single button click?
  • Implement relations SEO properties (noopener, noreferrer…)?
  • Maybe utilize Google’s new attribution for sponsored links and user-generated content? (rel=”sponsored” and rel=”ugc” released by Google this past September)

To allow you to do so, we’ve added Custom Link Attributes to Elementor’s Link Options, so you can insert your custom HTML link attributes to your <a> elements and display them to your site visitors.

Please note that you won’t be able to add JS-based attributes (like ‘onclick’) to your links for security reasons.

panel changes

New UI Improvements

If you’ve already installed the new version, you might have spotted some of the improvements we made to our editor panel. We’ve streamlined the dynamic content indicator, added Pro widgets visibility to the editor, and made a few other changes to improve the UI of our panel for more consistency in terms of how controls look and behave in the editor.

These changes are part of the continuous effort we are making to improve the overall user experience while helping our users discover the capabilities of our toolset for building professional websites.

Buttons, form fields, headings... Finally, you can set your site's default styling with Elementor's Theme Style!

Game-Changing Spoiler

What's Coming Next

Make sure you take note of the Global Style section of our panel, because we have great plans to expand it even further.

This is not just ‘another feature’. It’s a massive rethink of how a website design is handled. Having one place to control your entire global site design, all without coding, is a feature I know many of our users have been waiting for. Some of this added functionality will be added to the upcoming Elementor Pro release, so there’s a lot to look forward to.

Theme Style is the perfect match for our Hello Theme, allowing you to customize your theme like never before. Try it out and tell us what you think!

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,384,778 subscribers who stay ahead of the pack.

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

Comments

124 Responses

  1. WOW ELEMENTOR !! WOW!

    This means that it is no longer necessary to use template?
    Hello Theme has any option to disable the styles it brings by default?

    Regards from Spain!

  2. Well done to the Team. This makes everything so much easier and more compact. Elementor keeps on getting better and better. Thank you.

  3. Great, a welcome and long-overdue addition. Can you please include the [Default Colours] and [Default Fonts] tabs at the top of the panel. All the subsequent tabs could inherit those defaults, another time saver.
    Thank you

  4. Awesome news. Over the years I’ve used less and less of OceanWPs features. The last “features” I was using was setting global colours, fonts, etc. Time to test 2.9 with Hello and look to the future!

  5. Upgraded a development site yesterday evening and found out the popup builder is not working anymore (stuck on loading) For other templates, pages, … there is no issue.
    Downgraded to 2.8.5 and popup builder was workng again.

  6. Hi, what’s the status of this update? Update notice isn’t showing up for me and apparently I’m not the only one. It seems you postponed the update to solve the reported bugs, but no official statement was given. Could you please give us some explanation? Thanks

    1. Version 2.9 is full of bugs. The last release candidate RC3 Beta 5 had a bunch and the last comment by the Elementor team was “we fixed most of the problems” before the final release. We then find out that the Popup Builder wouldn’t even open on the final version. How can such an obvious bug get through?

      My guess is that hopefully they realized this was not yet ready for prime time and have delayed the release until it’s ready,

      1. After noticing a conflict from creating new popups with the Popup Builder in v2.9, we rolled back to v2.8.5, the previous stable version, and postponed 2.9 until we issue a fix (which is expected to occur on Sunday at the latest).

        Please remember that if you ever experience an issue with a new version, you can always use our pre-built version control tool to rollback to the latest stable version.

  7. Fantastic! I am just working on a new website and Theme Style looks “the bees knees” (as we say here in OZtralia).

    Now all I need is album functionality and the ability to put more than one image album on the same page in Elementor and I would be over the moon

    I love your tutorial youtube videos, but could the team members making these videos speak a little more slowly please

  8. I’m not seeing the theme style option.

    My site is running Version 2.9.2 of Elementor and version 2.8.4 of Elementor Pro. No updates seem to be offered.

    What am I missing?

  9. Congrats,

    What about theme’s or plugin’s specific css classes (eg. astra theme or woocommerce specific css classes)

    I assume these will be handled the “old” way, right?

    Thx

  10. Hi there, great job on this release!
    Please tell me, is the theme used in the video the Hello theme?

    I’m interested in vertical navigation like the one displayed.
    I am wondering if it is an option in this theme or did you create it your self.

  11. YAAAASSSSS!!! This has been needed for SO long! No more copy and pasting styles to EVERY elements that needs to be uniform. Keep up the good work!

  12. WOW! I was just thinking to design a style guide for my Elementor based theme. Now you released this sensational function. I am thrilled! Elementor is perfect now! 🙂 🙂 🙂

  13. Crazy, i’m mid creating a theme from Elementor Theme builder and this is exactly what is needed without adding additional css. Perfect timing

  14. Great new functionality, thank you! Hopefully one of the next features you’ll plan to build on top of this is allowing us to manage multiple global styles of elements such as buttons and easily apply them 🙂 ? Thanks!

  15. I love the introduction. I be interested to know if there is a negative or positive page speed impact by using this new feature. Anyone with feedback?

  16. now that the latests Elementor update was rolled back, when do you expect anElementor update which includes Theme Style?
    I just want to get on with it and create an absolutely amazing website :-))

    1. Agreed! The charm of a theme is that it can be packaged and duplicated across other sites without having to duplicate the whole website – we’re getting scarily into the realms of combining style with content again- something we’ve been trying to keep at bay for the last couple of decades :/

  17. Just started playing around with this and I love it. I never realized how much I’ve been trying and failing to do this on my own. THANK YOU!

  18. The typography for links applies to every link, including menu items. If you underline your links you cant remove the text-decoration in certain widgets like the WP menu. I’m thinking there should be 2 types of links under typography to avoid custom CSS.

    Also, the typography font family does not seem to be applying to my headers. But that may just be me. The above issue is more fundamental.

  19. Yes yes yes!!!

    This was the only thing that I was missing so far in the combination EM + Hello Theme. Too often I had to use CSS when Hello Theme styles bothered the website style. Great new development guys. Thank you so much :-*

    I am a happy girl!

  20. Would these settings override any past styles we’ve set up individually for a certain element (i.e. buttons), or would style an element we place from here on out?

  21. That’s excellent. As someone who is used to working with stylesheets, one thing that has always bothered me about using Elementor was when you wanted to make a minor change (header font, color, etc), you had to update individual elements over and over across the website. I’m glad to see Elementor incorporating this feature.

  22. 🌟AWESOME! 🌟
    The functionality of Elementor was already GREAT, but now with the added Theme Style feature, Elementor has just leaped to a whole new level of AWESOME! ~ Many thanks to the hard working creative team at Elementor!!! 🥰

  23. 1) Where is the pause control to stop the annoying animations that draw my eye away from the text I want to read? Just adding a pause control would help so much.
    2) What changed when Elementor “added Pro widgets visibility to the editor?”
    Pro widgets have always been listed in the left side “Elements” column. So, where are to Pro widgets visible now when the Pro widgets were hidden before?
    3) WHERE is the default style set for each widget? I cannot find it.
    \Hamberger icon > Theme Style has only:
    Background, Typography, Buttons, Form Fields, and Images.
    I do not see a choice to set a default style for a widget.
    4) Is a DEFAULT widget style different than a GLOBAL widget style?
    5) A more logical place for Default Theme Style settings would be under
    Dashboard > Elementor > Settings.
    It seems illogical that to edit the global settings for every page,
    I must choose a single page to edit, and then access global settings for other pages from that single page.
    6) Dashboard > Elementor > Settings > General has
    disable default colors, and
    disable default fonts.
    That seems a more logical place for global theme settings than to require the user to
    1st go to Dashboard > Elementor > Settings > General to turn off default colors and fonts,
    and THEN edit an individual page to change the global theme settings for all pages.
    7) What are the “and more” that can be set for Theme Style?
    8) Elementor has 4,000,000 active users. Obviously Elementor is highly successful. I am suggesting some ideas to make it better.

  24. Hi there
    This is a fantastic addition.
    I have just one problem, I’ve added a border in theme style and am happy with it but don’t want it applied to my logo – how can I disable a theme style for a particular image/element please?
    Thanks

    Russell

  25. For some reason the theme styling button wasn’t visible after updating Elementor. Going back to a previous version and updating again helped for me…

  26. That’s an awesome feature. Unfortunately it e.g. also affects the mini-cart button. So in order to be more flexible all widgets need to be adjusted since I cannot remove the box-shadow from the mini-cart for example without using the additional css tab.

    Offtopic: Do you plan on making WooCommerce Pages as Cart or Checkout editable as well?

    Thanks for your awesome work. Elementor has come really far!!!

  27. They always think about new tools, more design, more options, but they never think about optimization. Undoubtedly it is the best design tool I know, but for not thinking about optimization I stopped using it. Not everything on the web is focused on design, most of the time and in the rush of time we need more speed than beautiful images.

  28. From Elementor support:

    “Please note the “Theme style” feature is only available in your pages and posts, however, this feature won’t show on section templates or “Theme builder” templates such as header, footer, single post, single pages. As Theme Style is a Global feature we have only implemented it in two places i.e. Pages and Posts, the settings that you will make in the Theme Style feature will affect the various templates that are already created or that you will create in future.”

    Makes no sense. When I’m building a new site I start with the Header and Footer. This means I need to first create/edit a page, use Theme Styler, then Header and Footer. I don’t get the rational for this….

  29. Theme style function seems awesome. But you should aware of this,

    Buttons, form fields, headings… Finally, your can set your site’s default styling with Elementor’s Theme Style!

    Your=You.

    Thanks

  30. when i change button colors using theme style, update it, refresh page, then the colors go back to their orig color….what a waste of time………all my buttons are a horrible grey and i cant change it in theme style”

  31. I have not received any new updates after Elementor Pro 2.8.3. (I also have Elementor 2.9.2 installed) so when can I expect the updates and when can I begin to use this feature?

  32. Definitely a great improvement! Couple of requirements though: variations!!!! For example: primary and secondary button styles. Its part of every design kit nowadays… when you are releasing a better mobile navigation? With off side / full screen navigation? This is my major frustration with elementos up to date. It’s the single thing I reach for others plugin. Thanks.

  33. This will be a great time-saving feature. It would be great if it was possible to populate the settings in the Theme Style section from a pre-designed page as I tend to design the page as I build it and often won’t know the fonts, sizes and colours etc until the page is under way. If this is doable that would be excellent!!

  34. This is great but still lacking many, many features; including support for using global styles in templates… and for primary and secondary buttons, etc. (it’s not uncommon to rely on primary and secondary buttons, for example, in order to guide the customer journey!).

    This is a great start but I think this should have been thought about in a little more detail!

    What we REALLY need is a way of defining class-like entities such as “Button 1”, “Button 2”, etc. so we’re not limited.

    Also – there’s little point having the luxury of editing the header/ footer in Elementor if we can’t as easily inherit any of our theme styles.

Leave a Reply

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

Want to learn how to build better websites?

Join 1,384,778 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.