Introducing Full Site Editing: Design Your Header, Footer & Content All From One Place

In these challenging times of COVID, our team perseveres to help web creators work better. The new Pro version does just that, optimizing the most common web design tasks, like being able to edit your entire site with fewer clicks!

Version Pro 2.9 comes with not one but three new features related to global site editing. These features include full site editing, dynamic colors, and global custom CSS.

global editing

Full Site Editing From One Place

Do you enjoy to build an entire website without code with Elementor’s Theme Builder?

Now, we’re taking it to the next level, making the Theme Builder an even better alternative to themes when it comes to designing WordPress sites.

Introducing Full Site Editing. Switch between editing your header, footer, and content with a simple click of a button.

With full site editing, you can now switch between editing different parts of your site with a simple click

How it works

  1. Inside Elementor, click on the header area to edit it.
  2. Next, click on the content area to edit the page content.
  3. Finally, click on the footer area to make changes to the footer.

That’s it! You can finally access the different parts of your site with a simple click!

When designers work, they often need to get into the flow, after having their creative juices pumping. Providing this cohesive experience will remove switching between screens and will let you design your site from one place, top to bottom.

Don’t worry about editing the wrong section. The visual color distinction between the different site components will make sure you know exactly what you are editing at any given moment.

Dynamic colors

Apply Colors Across Multiple Places

Speaking of simplifying your workflow…

Ever wanted to create an Ecommerce site where the various product pages change color without having to manually set colors in the editor?

With the new Dynamic Color feature, you can!

If you recall, Dynamic Content is a handy feature that allows you to create advanced websites like directories and catalogs without coding.

You can now add colors to the list of dynamic elements Elementor offers. Besides text, numbers and images, you can now embed dynamic color values in Elementor pages. This feature is available within any widget that has a color field.

How it works

  1. Create a custom color picker field for posts in ACF, or using a different solution.
  2. Create several posts and give each a unique color through the field you added.
  3. Build a single post template for the posts.
  4. Use the dynamic color tag to link any areas in the single template to the color picker field.

Now you should show the colors you defined appear in each of the posts.

There are so many use cases for this feature. Imagine a page template where the heading, background color and button are all set with the same dynamic color, pulled from a custom field in your post or page. Once you change it in the backend, the frontend will change too.

You could then implement that template across potentially hundreds of landing pages, each automatically getting its own unique color palette.

If you create a template for an online business card, you can apply the template across hundreds of business cards, each card getting a different color.

Global CSS

Set Custom CSS Rules Across Your Site

We already covered designing your entire site from one place and implementing colors from one place.

What about defining custom CSS rules from one place? With Elementor Pro v2.9, you can add custom CSS rules which will be applied to your entire site.

Want to customize CSS rules that Theme Style’s basic rules don’t cover (e.g. hover for headings or active states for links)? Add it under Theme Style > Custom CSS, and it will instantly be applied to your entire site. Moreover, you’ll always know where to find it, along with other global CSS rules you decide to set.

This was a highly requested feature, and we are happy to solve it for the many users looking for global custom CSS in Elementor.

Simply enter the Theme Style menu and open the Custom CSS section. Simple as that!

SEO & Accessibility

Improve Your Site’s SEO With Semantic HTML5 Tags

You can improve your site’s SEO by addressing Semantic HTML5.

Specially-named containers can help search engines identify how our pages are arranged, according to SearchEngineLand.

Until now, you were limited to setting these HTML tags to Sections. I’m referring to tags like header, footer, main and so on. This made it hard to assign one HTML tag across a whole area, since most areas were made up of several sections.

From now on, you can set HTML tags per theme part. Assign your entire header with the `<header>` tag, your entire content area with the `<main>` tag and your footer with `<footer>` tag. You can use these settings to add any other tag that is in our options (aside, nav and so on)

By assigning a relevant HTML tag for each theme element, you improve accessibility and HTML semantics, as well as improve your on-page SEO.

Hundreds of pages with different colors, controlled by one template? This can only be done with Elementor's Dynamic Color feature #nocode

Fighting Piracy

Like many WordPress companies, Elementor suffers from piracy. Unlicensed use of Elementor Pro not only affects Elementor, but our users as well. It has an impact on support, on developing new features and on other services we provide.

From this version on, Elementor Pro users who have never activated their license for the site, won’t be able to drag and drop the Pro widgets. This is part of our ongoing fight against piracy, and we hope this measure will help us reduce the abuse of Elementor Pro.

Pulling Out All the Stops Towards Global Design

Elementor Pro 2,9 sets the stage for what’s coming next, and it’s going to be spectacular!

You may have noticed the common thread in the features we introduced, which also continue the same direction of the last release::

  • Full site editing (entire site design, one place)
  • Dynamic colors (multiple colors, one place)
  • Global CSS (site CSS rules, one place)
  • Semantic HTML tags (entire site part… Not exactly one place but still pretty awesome)

All of these features move towards a more global and consistent process of website creation. 

What do you think of the new version? How are you dealing with all that’s happening? Let us know in the comments below.

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

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

Comments

73 Responses

    1. Even just an event post type would be amazing. Even if its not a post just a widget where you can add events like you do tabs and they disappear after the date passes. Would be so useful!

    2. No no no! This sounds like a terrible idea. We can’t have everything built into Elementor. Some things are better left as a separate plugin.

      1. It’s not a bad idea to have a calendar and loads of features in Elementor. It’s more controlled that way instead of lots of plugins.

        Would be great if features could be turned off on each page to save JS and CSS loading where its not needed.

  1. I love Elementor, I practically have like 20 sites generated with it. I think the news that Elementor presents every month is excellent. I would like some unused widgets and options to be disabled as well as how to improve optimization a bit since using Elementor = many nodes in DOM, and a lot of unused CSS 😬

  2. I love you guys. You are perhaps the best team out there in the WordPress community and you are building tools and updates that are exactly the improvements we need. Keep up the good work.

  3. I already want to use dynamic colors, great idea to share the BLOG with a cool layout 🙂
    Semantic will help me a lot!
    Next project : hpod.arruda.work

  4. I miss typo/color control for different sections/widgets. Can’t be that I have to use manual CSS now to ignore general theme styles! How shall we handle for example negative text/links in the footer?

    Apart from that – great enhancements!

  5. Great!
    I hope that Elementor will come with a Dark theme switch widget in combination with dynamic colours…

  6. WELL DONE. Thank you so much for adding the global CSS feature! This has long been one of my major complaints.

  7. So grateful for the incredible work you create so we can create better work. My workflow and creativity have been hugely improved since I adopted Elementor… Thank you for continuing to roll out great new features – it’s like you’re reading my mind! (can’t wait for the playlist module).

  8. But how does the “Fighting Piracy”-thing corresponds with the fact that both Elementor and Elementor Pro are 100% GPL-licensed software?

  9. This looks really good. Thank you. Would you please consider adding Ajax features into Elementor next? Lazy loading for the blog page and WooCommerce product archives is one example.

  10. Since the last release I thought it couldn’t get any better, but you guys already have blown my mind a second time. Really awesome work!! Thank you so much for this!

  11. Already tried in beta version: congrats 😉
    I just tried the following (which quite logically didn’t functionned) define some color at tag level than linking the tag to pages or posts and using the color info to dynamically impact the color. It’s possible to set it up but it doesn’t work … i guess because it’s possible to link more than one tag to a post (or cpt or page)

  12. The header area is still uneditable unless I am in the customize area. I checked and it didn’t have an update. Why doesnt it allow me to edit the header IN the elementor editing area?

  13. I wish that the Global CSS editor was available without having to click into the Theme Style panel. The Global CSS editor should also be accessible directly in the regular Elementor panels.

  14. I really like the new global features. However, I’m not very happy about the header being so accessible. I hand these sites off to clients and I don’t need them messing up their headers and footers. Please keep “easy to use for clients” in mind with updates!

  15. These updates are amazing! You guys keep making this better and better every update, it’s so nice to know I can rely on Elementor as a critical piece to the foundation of my business.

  16. You guys are so incredible. I have never been more happy with an online service. I feel powerful now. Thank you for thinking of everything for us! *hugs*

  17. Thank you for continuing to make Elementor an easy to use tool, as well as all these great features. You guys are the best!

  18. Good job! These are awesome new features. I am just wondering if it’s still possible to edit one single page without changing the whole site around. I came here this morning because I was looking for that information. Did I miss something?

  19. Harry O'Brien says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    When will these be available? Currently using an astra premium starter theme and can’t see or edit the header as shown & described in the first new feature.

  20. Diego Villanueva says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Great job! Will be available that design at the template library? I really love it 🙂

  21. Great – One of the coolest Plugins I ever used. Elementor killed a lot other Plugins just because it is build in. And this feature saves so much time!

  22. Elementor has reached a whole new unimaginable level. Good work guys!

  23. Richard Green says:
    Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.

    Great. I’d still like to see the capacity to preview the site in Tablet Landscape & Mobile Landscape though.
    Not having these options really stops the process of Global Design, when I then have to keep doing @media css for those breakpoints.

  24. I am a novice on all levels. Know a bit of everything but not enough to be confident. I am starting using elementor, but are scared to change everything. Need the knowledge how to change my WooCommerce Storefront and to change it to one of the themes from Elementor. Just to scared to loose all the texting I have made. I also need a guidance in “how to create a new e-commerce site” on a domaine and afterwards move it to the correct romaine.

  25. I am not getting the option to edit a session. Using Elementor Pro v2.9.2

    the yellow tab does not appear, only the normal blue color.
    Should I use the option to insert “template”?I am also not getting the option to edit a session. Use of Elementor Pro v2.9.2

    Não estou conseguindo a opção de editar uma sessão. Uso do Elementor Pro v2.9.2

    não aparece a aba na cor amarela, somente a cor normal azul.
    Devo usar a opção de inserir “template”?

Leave a Reply

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

Want to learn how to build better websites?

Join 1,334,590 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.