Elementor – Full Site Editing feature| Elementor Free

topictrick
topictrick

Table of Contents

Introduction.

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.

Learn More
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!

Learn More

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.

Learn More

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.