What is Widget Tree and how does it work?
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!

What is Widget Tree and how does it work? 

Widget Tree is a functionality, allowing you to easily control the structure of your site and make any changes in it. It’s invaluable help when managing a sprawling site with a complex layout.

 

In this tutorial, you’ll find out how the Widget Tree works and how to use it correctly!

What is a Widget Tree and how does it work?

Icon that opens the widget tree is placed next to the SAVE button. 

 

When you select this Icon, the Widget Tree shows you the arrangement and nesting of all the widgets on a given subpage. This tool is not essential for working in BOWWE, but it can make it extremely easy to create pages and find elements that are lost or obscured by other elements.

If you’re looking for a specific element, and you know its container (meaning: the parent-widget that contains the sub-widget you’re looking for), it’ll be much easier for you to find it by selecting its container.
Know that widgets in the Widget Tree are described by their generic names (Area, Button, etc.) To make finding a specific element less of a challenge for you, hovering over an element in the Tree will make it highlighted in the screen's field of view, the same as moving your mouse over elements on the page will highlight them on the Widget Tree.
But what if it's somewhere else? Just double-click that element and the Creator will automatically redirect you to the right place.
The Widget Tree also gives you quick access to the Settings, Styles, and Visibility of each element across the sub-page.
Tip

Hierarchy bar

 

The Hierarchy Bar works similarly to the Widget Tree, except that it doesn’t cover the entire content of a subpage but shows the relation between the selected element and its parents.  If you want to quickly access the elements in the hierarchy, click on the element you want to aim and check its location on the bar at the bottom of the screen.

Hierarchy in BOWWE Builder

Correctly created websites consist of many elements that are in a subordinate or superior relationship with each other. This means that certain elements can take precedence over others, which helps build the correct structure of the site.

 

The hierarchy follows a set of rules to determine which style rules have priority when multiple styles target the same element. Think of it as a rank that controls which properties are ultimately applied to a widget.

Here are the rules of hierarchy based on their relationship in the Widget Tree:

  • Style applied in the parent container will also transfer to all of his children but with the lowest priority
  • Properties added to the widget directly will always have the highest priority, meaning that they will adjust the element accordingly despite changes made on the superior element

What else you should know about the Widget Tree?

The Widget Tree works similarly to the Hierarchy Bar, except that it covers the entire content of a subpage. 

 

Since it presents the entire page in an interactive way, sometimes it may slow down your computer as long as it is active. To test this, go to the Builder, turn on the Widget Tree and observe if you see any difference.

Congratulations!

Now you know how to use the Widget Tree to work more easily with BOWWE!