Welcome to BOWWE Help Center
Bowwe expert customer support team always ready  to help.

Back to all topics

What is Widget Tree and how does it work? 

Correctly created websites consist of many elements that are in a subordinate or superior relationship with each other. This means that certain elements can be subordinate to an element higher in the hierarchy. This builds the correct structure of the site, which is very important. 

 

It can be compared to an off-road vehicle.  A well-built off-road car is durable and built with strong materials. As a result, it will withstand driving in all conditions. The same is true for the structure of your site. A well-built site structure will allow you to achieve better results in every aspect of your site: from page speed, through SEO to sales.

 

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 extensive sub-pages.

 

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

 

SIDENOTE: Understanding the hierarchy between elements is crucial in web design, web development and even digital marketing. Read more about it in our basic tutorials: 

How does Drag-and-Drop work?

Relative and Absolute positioning of website elements

Basics of Web Design: Containers and Common Regions

How does the Widget Tree work?

The Widget Tree is placed next to the SAVE button. 

When you select this Icon, you will see the HTML-compliant structure of the page content.

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 if it’s in the screen's field of view. 

 

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, Widget styles, and Visibility of each element across the sub-page.

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!

You already know how to use the Widget Tree to work more easily with BOWWE!