How to use the Area widget properly?
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

Widget Area

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?

  1. 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.
  2. Styling
    You can quickly apply a common style to many elements by changing properties of an Area that holds them together.
  3. 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. 
  4. Copying many elements at once
    By copying an Area containing items, all its content will also be copied.
  5. 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.



Inhertiance hierarchy

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!


Now you know how to use Area Widget on your website

Remember about:

  • By hiding/deleting an area containing items, all its content will also be hidden / deleted