After reading this article you’ll know how to:
Use the drag-and-drop functionality
Work with some layout components
Position components within a page
Before working with this topic, make sure you’ve already set up your first application and learned how to create pages. In this brief tutorial, we will dive deeper into using various components and building the layout of your home page.
Open your Betty Blocks application and go to the page builder. The page builder uses a drag-and-drop functionality that enables you to build pages, you can fill these with various kinds of content. The sidebar on the left contains different components to create your page. In this tutorial, we will go through the first steps you need to take in order to build the home page for your application.
Take a look at your sidebar and you’ll see the components divided into categories:
And other kinds of components. For now, we will need the following components:
Layout: 1 Column and 3 Columns
Navigation: Navigation bar
Content: Media, Title, Text
Button: Open page
If you want to learn more about these types of components, go to the Page builder component section article.
First, we start with placing the navigation bar on top of the page. Go to the ‘Navigation’ components section and drag the navigation bar component onto the page’s canvas.
After that, we will place columns onto the page’s canvas to form a carcass for filling the page out with content. Take one column and drag it onto the page, repeat that action again and add one more, then do the same with the triple column component and put it underneath those two single columns.
Now we can proceed to fill columns. Pick up the media component and drag it to the column below the app bar. Click on it once and paste the URL of your picture into the source field.
A similar procedure goes with adding a text component below the image. Drag the text component onto the column and click on it once it has been added. In the sidebar, fill out the content field with the text you want to be shown on your page.
Now we will create one of the custom cards that will lead the user to one of the project’s future pages:
An overview of using the layout components can be found in this article.