Elementor – Full Site Editing feature| Elementor Free

Share This Post
Share on facebook
Share on linkedin
Share on twitter
Share on email
Share on reddit
Share on whatsapp


Hello and welcome back to today’s blog post on Elementor new feature. Elementor is one of the the best and most popular word press page builder. You can build your website without even writing single line of code. It’s basically a drag and drop builder with elegant interface and robust feature. Let’s checkout new feature of elementor that will enable you to design website header, footer and content all in one place. 

Introducing Full Site Editing: design the header, footer, and content - all in one place!

Even in 2020, editing a site is still divided and all over the place.
You edit the header, back to the dashboard screen, then the content page, then the header again, switch over to the footer. Sheesh!

elementor full site editing feature
elementor full site editing feature

As a designer, you can now enjoy a seamless experience of designing the entire page, header to footer included, all from one screen. It will save you time, effort, and a lot of redundant clicks.

When designers work, they often need to get into the flow, after having their creative juices flowing. In this upcoming version we offer a unified experience in one place, without any interruptions to your workflow mid way to switch to another screen and allowing you to design the site top to bottom. At the same time, we maintained the distinction between the different site parts: header, single, content and footer, so you know exactly what you are editing at each point of the design process.

After you start using the new Full Site Editing feature, you’ll be able to quickly switch between the different site parts. It’s a huge UX improvement, and we hope it will do wonders for your workflow.

How It Works?

While editing a page, hover over the area you wish to change and click on the orange handle to edit that site part (header, single post, single page, footer, etc…).

Done editing a certain area? Save your changes and continue to the next one.

elementor custom CSS rules
elementor custom CSS rules

Meet Custom CSS Rules for your entire site.

Speaking of full site editing, here’s another related time-saver feature that will give you extra flexibility.

One of our most requested features we get is the ability to set Custom CSS globally. With Elementor Pro v2.9, you can add custom CSS rules which will apply to your entire site.

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

Elementor New Dynamic Tag Support: Dynamic Colors

elementor dynamic tag support
elementor dynamic tag support

The third addition to version 2.9 pro also relates to a global design feature – dynamic content. If you recall, with Dynamic Content, you can create advanced websites like directories and catalogs without coding. This is done by taking content from custom fields and other sources, and dynamically displaying it on the page.

Until now, dynamic tags were restricted to textual and numeric inputs. With the new ‘Dynamic Color’ option, you can embed dynamic color values in any widget that has a color field. The new Color Dynamic control supports ACF color fields as well as Custom field keys.

Want to create an Ecommerce site where the product pages change color according to which product page is viewed? With this feature, you can!

Wrapper HTML Tags – Set <header>, <footer>, <aside>, <main> or <article> wrapper tags to your site parts

Until today, when creating a header, footer or a regular page template using Theme Builder, you could only set HTML tags per section. Because most content you create with Elementor consists of several sections, it made it difficult to assign one HTML tag across a whole area.

From now on, you can set HTML tags per theme part. Assign your entire header with 

 tag, your entire content area with 
 tag and your footer with 

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

How to Install the Beta Version

If you still haven’t enabled beta testing in Elementor, please follow these steps:

  • Go to Elementor > Tools > Versions.

  • Enable the beta tester feature.

  • Go to the Dashboard > Updates and update to the latest beta version.

Leave a Reply

More To Explore
COBOL Tutorial
Machine Learning
COBOL Tutorial – COBOL Programming Tutorial. Free Curso de COBOL 60+

COBOL programming tutorial is design for absolute beginners. In this tutorial, cover most of the programming topic such as COBOL PERFORM STATEMENTS, COBOL REDEFINES Statements, COBOL Program Structure etc. Let’s get started with today’s COBOL Tutorial.

Python Installation Guide, Install Python on Linux, Install Python on Mac
How To Guide
Step wise Guide to install python in just 5 mins | Python made Easy

Hello and welcome back to another exciting tutorial on “Python Installation”. In this tutorial, you’ll get a glimpse of “Installing Python on different platform” such as Windows, Mac or Linux. Let’s begin our “Install python on any platform” with Python Installation on Windows.


Table of Content