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.
Benefits of using the Area widget on your website
- 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.
Best practices - when to use Area?
- 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.
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.
Editing elements using Area Widget is possible thanks to the Inheritance mechanism that allows you to pass properties from the element higher in the hierarchy to its descendants. Changes made on the elements individually will have a higher priority than those applied on the Area.
How to group elements and manage the Area widget?
Open BOWWE Builder and select Area widget from the left side panel.
Place the AREA on your site in a relative or absolute way.
Choose widgets you want to group and insert them into the Area.
Now select the AREA widget where you placed the items - use the Hierarchy Bar at the bottom or the Widget Tree.
Click on the paintbrush icon and go to the Widget Styles.
By changing the styles and settings of the AREA widget, you will affect all the elements it contains (you can test it, for example, by changing the padding of the AREA).
Click SAVE and PUBLISH to save and publish all changes at your website!
- By hiding/deleting an area containing items, all its content will also be hidden / deleted