Independent Worker — 420 | Construct Website | Landing Page: grid-based hero section

Given that the Header now has a category, let’s customize it:

1. Pick a new font you want to utilize In Design panel > Text > Font
2. Select the font’s Thickness from the dropdown

Modify the Header hue:

1. Activate the Color picker tool in Shades panel
2. Hover above the Backdrop image in the initial Section unit and select a hue from the Picture
3. Tweak the hue as necessary by shifting the Color and Translucency sliders

Let’s append more data to the data block. Append a Section:

1. Open the Include components panel and drag a Section into the Primary title content Section unit
2. Position it beneath the Header you previously included 

Add Buttons to the data block:

1. Drag a Tab from the Include components panel into the Primary title content Section unit
2. Place it beneath the Area you just appended 
3. Twice click the Tab wording to adjust, and rename it (for instance, “Let’s converse”).  
4. Assign a category to the Tab (like, “Button”) 

Modify the hue of your Tab to preserve layout uniformity:

1. Pick the Tab
2. Hit the default hue sample in Design panel > Background> Color
3. Switch it to the hue you employed for your Header

Let’s establish some space for the content you’ve presently appended. 

Append Space to the lower end of the Header:

1. Hit the Header
2. Unlock Design panel > Separation 
3. Set the base Space to 20 px

Considering you already attached a category of “Button,” you can copy/paste that Tab element to produce a sum of 2 Buttons:

1. Evaluate the initial Tab
2. Copy/paste the Tab
3. Twice click the subsequent Tab’s wording and alter it (for example, “View our projects”)

Note: If you modify components of the Tab class, it’ll influence both Buttons at once since they have a similar category (like, “Button”). 

For example, if you insert Space to the right of one Tab, the Space increment happens on both Buttons: 

1. Select one of your Buttons
2. Unlock Design panel > Separation 
3. Set the right Space to 10 px

Design an overlapping layout

An overlapping layout signifies certain of your Grid components overlap each other. In this illustration, let’s form the data block overlap the Backdrop image. 

Select the Primary title content Section unit. 

Since its Placement is configured to Auto, it acquires the first obtainable cell in the Grid — the upper right cell. 

Let’s position it in the bottom right cell of the Grid: 

1. Unlock Design panel > Grid Child > Placement
2. Establish the placement of the Primary title content Section unit to Manual
3. Drag the Section unit to the bottom right cell

Let’s repeat the same process on the Primary title Picture:

1. Elect the Primary title Picture
2. Unlock Design panel > Grid Child > Placement
3. Establish the placement of the Picture to Manual
4. Drag the lower right handle of the Picture across both Grid columns and rows to cover the entire Grid 

To make your data visible over the Picture, alter the Section unit backdrop hue: 

1. Choose the Primary title content Section unit
2. Unlock Design panel > Backgrounds > Color
3. Hit the sample and choose a hue (for instance, white)

Tweak the size or quantity of rows and columns in your Grid: 

1. Evaluate the Primary title segment Section unit (the prime element)
2. Press Enter or click the adjust Grid symbol 

Currently segment height is set to Auto. Let’s alter this to a precise size: 

1. Click the bar that states Auto beside the peak Grid row to display the row sizing menu. 

2. Specify the top row as 1 FR (fraction unit)
3. Repeat the process for the second row 

By assigning 1 FR to each row, they will each occupy 50% of the viewport height using flexible FRs. 

Replicate the above instructions to modify the row height. If you maintain the top row at 1 FR but switch the bottom row to Auto, the top row will utilize all the available space, and the bottom row’s height will adjust automatically based on the content within. 

Click Done to complete editing the Grid. 

Next, let’s enhance the content to improve its appearance.

Adjust the Heading Margin:

1. Select the Heading
2. Access Style panel > Spacing
3. Tap the top Margin and modify it to 0 px
4. Tap the bottom Margin and modify it to 20 px

Tweak the Paragraph Margin: 

1. Select the Paragraph
2. Access Style panel > Spacing
3. Adjust the default bottom Margin to 30 px 

You can also manage the spacing of the elements within the content block — your Heading, Paragraph, and Buttons:

1. Select the Home hero content Div block
2. Access Style panel > Spacing
3. Adapt its padding (the space within an element)
4. Press Shift,and drag inside the Padding control to change all 4 sides to 30 px

Revise the Body (All pages) tag

Modifying the Body (All pages) tag readies your site and saves you time. For instance, altering the Font with the Body (All pages) tag selected influences the default Font for elements across your project. 

The Body element acts as the top-level element of any page. To revise the Body (All pages) tag:

1. Launch the Navigator and choose the Body
2. Click the Selector field and opt for the Body (All pages)tag from the dropdown

Time to adjust the Font for the Body (All pages) tag:

1. Click the Selector field and pick the Body (All pages)tag from the dropdown 
2. Access Typography > Font andchoose a font (e.g., “Source Sans Pro)
3. Modify the Font size to 15 px
4. Alter the Font line Height to a unitless measurement of 1.4 by typing in 1.4 and a hyphen (-)

Using unitless line height is advantageous as it scales the Font’s line height with the Font size. Discover more about Unitless line height. 

Text elements without previously set overrides will inherit the modifications you made from the Body (All pages) tag. 

You are now equipped with an enticing hero section — you hero, you!