Skip to content
  • There are no suggestions because the search field is empty.

Building a page using widgets

Using widgets to speed up your page-building experience.

After reading this article you'll know:

  • What a widget is

  • The benefit of using widgets

  • How to create a page using widgets

Before working with this topic, ensure you've set up your first application and know how to create pages.

What is a widget?

A widget behaves just like a component, you can drag and drop them onto your canvas, but unlike components, widgets may feel like a segment of your page, already containing layout features and some styling, allowing you to build your pages much faster.

A widget consists of components that have been grouped together, with limited options available. Learn how to create your own widgets with our Building a widget article.

Using widgets

When building pages using only components, it can be a bit much from time to time.

Of course, we love the amount of detail a component can provide for us, but most of the time we don't need it and want a quick and stylish result.

Widgets can be installed into your application via the block store, this is where you can find sets, developed by either Betty Blocks or developers that have shared their widget set with you or your organization. 

Creating a page using widgets

When opening your page, you will see the widgets segment on the top of your component tab, some widgets might already be available for you, otherwise follow the link to the block store to install a new set in your application.
A regular set of widget will help you speed up building your pages, as they come in all kinds of shapes and sizes, think of a page layout, header image with text, or card components.

 

Drag and drop the widgets onto your canvas, try out different options and play around with the settings to create pages to your liking.

Widgets can be dropped in areas with a blue dotted line, these are the dropzones. Keep in mind that there are also segments where you can't drop a widget, these areas will show a blue layover. When the widget is released, it will appear underneath the blue segment.

 

Showing the dropzones in widgets

After your widgets are in place, configure the widget options to your liking by clicking on the widget, and changing the settings that have been made available to you.
Configuring a widget using its various options

 

Once done with your page, press the compile (play) button in the top left corner of your page and see the live result of your creation.

The Betty Blocks compile button

Value

With widgets, it will be easier to build a page.

  • You don’t need to know how to use components, how to combine them, and where to configure options

  • You need less clicks, as you have a limited set of options available

    • Example: A custom hero banner with text has 52 options in total, the hero (centered) widget has only 6 options!

  • Widgets can be offered in a specific style. So for the builder, it will be much easier to design a page that automatically has the style of your own company