Using basic components

In this article, I’ll explain everything about a couple of basic components and their settings. Each component has its own settings with options, so I’ll explain them to you one by one.

Robert van Boesschoten

Published: 10-06-2020

Last updated: 27-08-2020

Row

The Betty Blocks default component set doesn’t contain a row component. This is because when a column is dragged onto the canvas, a row is automatically added with it. The row can be selected by clicking on the arrow that pops up when the column is selected. Once the row is selected, you will see its settings and options in the sidebar. A row’s settings consists of a width, height, background color, and margin. These settings can be managed in the sidebar. Every setting has its own options that can be displayed as different input fields like in the picture to the right.



Column

Columns are a bit like rows, but then vertically aligned. You can place two columns in a row for example, or even three or more. Columns (together with rows) are mainly used to create a certain layout for your page. Inside of these columns you can place other components like a form or an image with some text below it.

A big difference between a column and a row is that a column has way more options to manage. A column’s width is very important when it comes to responsiveness. By default all the column width options are set to `Flexible`, this will give a flexible width to the columns depending on how much space there is available and divide them evenly. It is also possible to give a fixed height to the column. You can also align the content within your columns horizontally and vertically.


Text

The default component set contains a Title component and a Text component. These two components actually are exactly the same, named a Text component. The difference is that the Title component automatically has the `Title 2` type selected, and the Text component has the `Body 1` type selected. The text type can be found in the component's settings and contains a lot more text types besides `Title 2` and `Body 1`.
You can enter text in the multiline field named content, and even add a variable to it. The text will be shown in the preview and in the rendered page, while the variable’s value will only be shown in the rendered page. In the preview you will only see the name of the variable.



Button

The Button component has many options to offer. Let’s start with the button variant, the button variant is in what format the button will be displayed. There are four variants; `Text`, `Outlined`, `Icon`, and `Contain` which is selected by default. Below the variant setting, you’re able to set the button text for your button. Just like the Text component, you can insert a variable as the button text.

Below the button text setting, you’ll see a buttongroup named link to with three options; `Internal page`, `External page`, and `Action`. This setting is used to redirect the user to an internal or external page, or even trigger an action when the button is clicked. Right below you can select a page, enter a URL, or select an action based on the selected option in the link to setting.
There are also a couple of settings that let you change the appearance of the button. For example, you can enable the full width checkbox to make the button’s width as wide as its parent component or choose a size yourself. It is also possible to change the color of the button text and button itself. And if you wish to add an icon to your button, this can be done as well by selecting one from the icon dropdown!



Image

The Image component lets you display an image by entering the image’s URL into the image url input field. Besides the image url, you can also enter some text in the image alternative text input field which will appear when the image fails loading on the rendered page.
You can also set the width and height of an image, this can be done by entering a value in the width and height input fields and selecting an option right next to it.



These were five basic components that are available in the Betty Blocks default component set. If you want to know more about basic concepts of the Page Builder, feel free to check out the Explaining basic concepts article!