Building a page layout

Create a simple page layout using some of the essential page builder components.

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.

We've also created a video about some of the principles that come with designing a 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:

Layout
Navigation
Content
Button
Data
Form

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.

Building a page layout: adding navigation bar and 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.

Building a page layout: adding media component

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.

Building a page layout: adding text component

Now we will create one of the custom cards that will lead the user to one of the project’s future pages:

First, take the text component and place it into the column
Next goes the media component. Drag it below the text component.
Find the open button and drag it to the right of the media component. For now, we can choose the ‘Add without configuration’ option.
Click on the text component and type the text into the content field.
Lastly, click once on the media component and paste the URL of your image.

Building a page layout: adding media components

An overview of using the layout components can be found in this article.