How to use the Area widget properly?

Each website consists of many elements that work together. Often, there are so many items that editing the settings for each of them separately can take a long time.

The Area widget was created for editing many elements at the same time. Its task is to collect elements that are relative to each other and combine them into a group. Such grouped widgets can then be quickly and conveniently edited by changing only the Area settings.

In this tutorial, you will learn how to add an Area to your website and use it effectively.

Faster and more efficient website building
By grouping a lot of items, you'll be changing their settings at once.
Easier page editing
The Area widgets are very easy to manage. Rebuilding or updating a page built with Area widgets is much simpler than a page without them.
Saving a lot of time
Web design standards are constantly changing. Over time, you will have to refresh your website even slightly, e.g. add a few new elements to it. To be able to quickly and conveniently change the settings and appearance of your website in the future, use the Area while building it.

Grouping elements
An Area is used to create a block-level container that can hold other widgets. It’s useful for organizing elements and grouping them together.
Styling
You can quickly apply a common style to many elements by changing properties of an Area that holds them together.
Creating a layout
One of the best practices in building a website from scratch is to add Area before applying other widgets onto the page. It helps in creating an overall structure and layout.
Copying many elements at once
By copying an Area containing items, all its content will also be copied.
Moving many elements at once
If you want to quickly change the position of many elements, select the Area that groups them and drag it to a different location on the page.