What is Widget Tree and how does it work? | BOWWE Tutorial

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.

Log in to BOWWE.
Open your site in the BOWWE Builder.
From the right panel of widgets, expand the MULTIMEDIA tab and select the GALLERY widget.

Drag the widget and drop it wherever you want on the page.


Now configure the Gallery settings.

How to set up a Gallery on your site?

When you drop a gallery, you will automatically see the Settings panel. Here you can configure the following parameters:
Gallery name - For your internal use. Not visible to users.
Picture size - Matches appropriate thumbnail sizes to all images in the Gallery. The better the match between the displayed image and the actual image size, the better the thumbnail’s quality.
Ratio - Determines the aspect ratio of your images.

Layout - gives a consistent layout to all images in your Gallery.


Pagination type - determines how to switch between next images when all of them cannot be displayed on the screen at the same time.


Picture spacing - specifies the size of the spacing between images in your Gallery, both vertically and horizontally.


Detail view - specifies how you want the images to appear when you click on them. 

  • Gallery details: compact shows the whole photo which can be zoomed in and wide fills the whole width.
  • Show thumbs option shows thumbnails on the slider, under the photos, inside the pop-up.
  • Gallery descriptions: displays a mask with a description attached to the photo. You can select it to display always, only when hovering the mouse or never.

How to add images to the Gallery?

You may add images using the Select image button.
You may add a description to the images using the pen icon.
You may remove images from the gallery using the trash can icon.

To add a video, click the ADD MOVIE button.

SIDENOTE: You can upload videos no larger than 50 MB to the Gallery. Also, keep in mind that putting a lot of heavy files in the Gallery may reduce its loading speed.


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

Remember about:

 In addition to Portfolio, you can put on the Customer Reviews page. You will build even greater trust of potential customers in your company.
Use only high-quality photos in the Portfolio. Find out where to get them here!
Update Portfolio min. 1 a week. You will achieve higher rankings in search engines!

Dedicated to you

Didn't find the answer?

No matter what your problem is. We are here to help you find a solution.