Explore the page builder’s capabilities by building a more advanced home page with a hero image.
After reading this article you’ll know how to:
-
Unite the navigation bar with the hero image
-
Create custom cards using box components
-
Build the component hierarchy
-
Align, position, and space page elements
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:
Creating a hero header
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!
Layout and navigation bar
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 ↑).
-
Extend its width to the full-size
-
Set the height to ‘100%’
2. Come back to the column and go to its alignment options.
-
Set the vertical alignment to the top.
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.
-
Click on the one below and tick a Stretch option to extend it to the bottom.
4. Duplicate the top box and open the component tree view in a more convenient side view. Here you can drag the components.
-
Take one of the smaller boxes and place it at the bottom of your page.
-
The top and bottom boxes with serve as the header and footer, you can rename them.
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.
Filling the hero header
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:
-
Drag a column to a box in the middle.
-
Then add a title component to the column.
-
Change the font, its color, and title type to your liking.
Here we used the custom font called Popins.
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.
Designing 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:
-
Choose the box that unites all components on the page
-
Set its background color to light and its opacity to 50, for example.
2. Here, we prepare our cards to nicely hover over the hero header:
-
Take a box component and place it just below the hero header.
-
Go to the options and set the inner space to ‘None’,
-
Then choose the relative positioning with the top position set to -40.
-
Place the 3 columns component into the box.
3. Take another box and place it inside a column.
-
Go to its background options and set the background color to white
-
Make the box corners a bit rounder by changing the border radius to 8 pixels.
-
Delete the rest of the columns as we don’t really need them.
4. Now we are going to create a small header within this new card-looking box:
-
Drop a couple of new boxes inside our primary one. As usual, you can just use the copy button.
-
Place one of the new boxes into a top one: change the alignment of the parent top box to 'Left' and set the inner space to 'None'. The child box should run to the left of the parent box.
-
Add one more new box to the parent (header) box and stretch it.
-
Finally, drag and drop the icon component into the smaller box at the top.
5. Time to make a nice-looking icon for our card header.
-
Change the icon itself to the appropriate one and change its color to 'Primary', for example
-
Go to its parent box: set the alignment to 'Centre'
-
In styling options, set the height and width to 40 pixels to make the box ideally square
-
Then change the background color to 'Light' (with 50% opacity)
-
Set the border radius to at least 50% to make it circle.
6. To make a title, drop a text component into a second top box:
-
Come up with a name for it
-
Choose the alignment that looks good for you
-
Make sure the inner space is set to 'S'.
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:
-
Choose the right inner space size for their parent box, so that the buttons stay in the same line as our title and text
-
Take a new box and place it between the buttons, set its width to 12 pixels, and make it transparent. It is filling the space between the buttons now.
-
Edit the look of your buttons using the options in the Styles tab: we made them a bit more rounded and different colors so that they can look primary and secondary.
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.
