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 locked in a wrapper, 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 wanna have a quick and stylish result.
Widgets are built by ourselves or the developers we work together with and should be branded in style from the get-go. Therefore dragging and dropping these items on our page should give us that look and feel we want straight out of the box.
Creating a page using widgets
When opening your page, you will see the widget segment on the top or your component tab, some widgets might already be available for you based on the Betty Blocks widget set, 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. |
 |
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. |
|
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.
 |
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 List component with an icon has 30 options in total, the list with icon widget has 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