Skip to main content
Building a page using widgets

Using widgets to speed up your page-building experience.

Updated over a week ago

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.

Widget view within the page builder

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

Adding widgets to you page canvas

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 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

Did this answer your question?