Create a grid-based hero section for a homepage.
A homepage hero section gives you the opportunity to immediately engage your site visitors through imagery, text, and call to action buttons (CTAs). You can do all of this even quicker by using a grid to arrange your content.
In this lesson, you’ll learn how to create a grid-based hero section using the following:
The grid is the main structure of your hero section.
To add a Grid to your page:
By default, the Grid displays 2 rows and 2 columns, which is what we’ll use for this example.
Save your Grid and name it:
To add or remove columns in the future, you can do that in the Edit Grid menu:
Note: The content inside determines the Grid’s dimensions. For instance, if you add content, the Grid dimensions adjust automatically.
Set the Grid dimensions to match the height of the viewport:
Add an image to give visitors more insight to your business.
First, add a Div block to the Grid:
Set a Background image on the Div block you just created:
Cover the Div block with the Image instead of tiling:
When you set the Image to cover the Div block this allows you to resize the Image or span it across 2 columns or rows. This also keeps the center point of the Image in the center of your layout.
Contain all your hero section content in a content block.
First, create the content block:
Let’s add an H1 Heading, a Paragraph, and 2 different Buttons inside the Div block you just created.
To make it easier to drag your content into the Home hero content Div block (or any specific location in your page):
By default, the Heading is an H1. Double click the Heading to edit it, and type your new text (e.g., “We make homes look beautiful”).
To keep things organized, give your Heading a class (e.g., “Major heading”).
Now that the Heading has a class, let’s style it:
Change the Heading color:
Let’s add more content to the content block. Add a Paragraph:
Add Buttons to the content block:
Change the color of your Button to maintain design consistency:
Let’s create some breathing room for the content you’ve just added.
Add Margin to the bottom of the Heading:
Because you already added a class of “Button,” you can copy/paste that Button element to create a total of 2 Buttons:
Note: If you make changes on the Button class, it’ll affect both Buttons at once because they have the same class (e.g., “Button”).
For instance, if you add Margin to the right edge of one Button, the Margin increase occurs on both Buttons:
An overlapping layout means some of your Grid elements overlap one another. In this example, let’s make the content block overlap the Background image.
Choose the Home hero content Div block.
Because its Position is set to Auto, it takes up the first available cell in the Grid — the upper right cell.
Let’s place it in the bottom right cell of the Grid:
Let’s do the same thing on the Home hero Image:
To make your content visible over the Image, change the Div block background color:
Adjust the sizing or number of rows and columns in your Grid:
Currently row height is set to Auto. Let’s change this to a specific size:
By setting each row to 1 FR, the rows each take up 50% of the viewport height using flexible FRs.
Repeat the above steps to change the row height. If you keep the top row at 1 FR, but set the bottom row back to Auto, the top row takes up all the available space, and the bottom row’s height automatically adjusts based on the content inside.
Press Done to finish editing the Grid.
Now, let’s adjust the content to make it look more appealing.
Change the Heading Margin:
Change the Paragraph Margin:
You can also control spacing of the elements inside the content block — your Heading, Paragraph, and Buttons:
Adjusting the Body (All pages) tag prepares your site and saves you time. For example, changing the Font with the Body (All pages) tag selected, affects the default Font for elements across your project.
The Body element is the top level element of any page. To update the Body (All pages) tag:
Let’s update the Font for the Body (All pages) tag:
Unitless line height is useful because it scales the Font’s line height with the Font size. Learn more about Unitless line height.
Any text elements without previously set overrides inherited the changes you made from the Body (All pages) tag.
And now you’ve got a hero section — you hero, you!