After reading this article you’ll know how to:

In the Setting up your page article, we covered the essential elements needed to create a very basic home page. You learned how to set up a page layout using the header and footer template along with such components as columns, boxes, cards, and buttons. This time, we are going to dive a bit deeper into the page builder’s capabilities and build a more advanced home page layout with a large hero header and custom-built cards.

We have this article in video format as well. Check out part 1 - Setting up a new layout for your page here:

Check out part 2 - Creating a hero image for our homepage:

Check out part 3 - Creating custom cards for our home page:

A hero image (or hero header) is a website design term used to describe an oversized image on top of the application page. It is used rather frequently in modern user interface design and demonstrates what your company has to offer. In our use case example, we are going to merge a hero image with the navigation bar component in order to get a visually appealing and user-friendly home page design. Off we go!

Check this video about setting up a new layout:

Create a new page by choosing the option Start from scratch. We want all elements of UI to be extended to the full size of the page, but at the same time, these components should fit all kinds of screens. This is called a fluid layout. In the first two steps, we will use a column to build a foundation for other components, and then create a flexible carcass over it using boxes.

1. Place the column on the new page and go to the row (using the upper arrow ↑).

2. Come back to the column and go to its alignment options.

This way, when we drop new components onto this column they will appear at the top.

3. Drop a box component to a page and duplicate it.

4. Duplicate the top box and open the component tree view in a more convenient side view. Here you can drag the components.

5. Click on each box again, go to styling options, and set the inner space to ‘None’.

6. Everything is almost ready to place a navigation bar on the top. Take the header box and drop it into the middle one so that we can unite the app bar with a hero image. Now we have a ‘one-in-two’ box on top.

7. Then add a box, again setting its inner space to ‘None’ and height to ‘10 vh’, for instance.

Note: VH stands for viewpoint height and it’s used when you want components to occupy the full height of a page (another component).

8. Copy three more boxes. They will be united into one bigger box that will serve as a space for our hero header.

9. Go to the top box and set its height to default. Take a new column and drop it on the top box, and set the column’s inner space to ‘None’.

10. Then take a navigation bar component and place it in the newly added column. By placing these components into a box, we make sure they are flexible enough to fit any kind of device’s screen.

11. You can now set your logo to the navigation bar. In our case, it’s a Betty Blocks logo which will be added via URL source in Logo options. Width is alright in our case, change it if it doesn’t work in yours.

12. Go to the parent box from any of the boxes on the canvas and set its background color to primary. Then go to the navigation bar again, and set it’s background color to transparent.

The complex part of building a layout is behind, now let’s get to filling out the space of our hero header. You can proceed to customize the buttons on the app bar. We haven’t come up with anything too complicated here, and just changed the names and added some icons.

1. Now we will add a welcoming message:

2. Let’s go on and set the two other boxes’ styling to transparent.

3. If you feel like adding one more text to your hero header, just copy the text in the center and play around with the column alignment and spacing.

Note: If spacing doesn’t seem to change anything, remove the fixed height of boxes.

4. After adding one more text element to the hero header and switching to a different logo icon, we can set the background image for our header. To do this, simply copy the URL of a prepared background image from public files and paste it to the background URL of our general box.

5. You may notice that some of the buttons still have the primary color. Click on them one by one and go to styles -> background color. Change the background’s A (alpha - which stands for opacity here) to zero point to make buttons transparent.

Et voilà! Our fine image-based hero header is ready, and we can move on to the next step - custom cards.

While building a basic home page in Setting up your page, we used the card components and placed them below the header and welcome message. For this use case, we will also create some cards but instead of card components, we are going to employ the box components. The reason for doing this is very simple: card components don’t really have enough styling options to be flexible in terms of design.

1. First, let’s make the rest of the canvas a bit darker color:

2. Here, we prepare our cards to nicely hover over the hero header:

3. Take another box and place it inside a column.

4. Now we are going to create a small header within this new card-looking box:

5. Time to make a nice-looking icon for our card header.

6. To make a title, drop a text component into a second top box:

7. Fill in a box in the middle with text using the text component and drop a few buttons to the bottom box.

8. Finally, let’s edit our buttons a little bit:

Note: The best practice here is using the pre-defined styles, similar to how we used the ‘grey_buttons’ style for the second button.

You don’t have to recreate the same boxes for the other two cards. Simply navigate to the parent column of the box and copy it several times. Later you can even reuse them in the same or other applications by saving them as partials or new components.

After a bit of editing, this is what we got as the result. We also recommend having a look at Styling best practices that might give you some pieces of advice on keeping consistency in your user interface design.