Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Popular Tutorials

>

How to Make a Hero Block

Making a Hero Block

This tutorial guides you through building an image that spans the whole viewport with some copy and a button on top of the image.

Skill set: Basic

Area: UI only

Length: 3 minutes

  • Youʻll need a Builder account.
  • An evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.

In this document you'll build a hero that looks like this:

In the Visual Editor, open the Insert tab and drag an Image block onto the blue work area of your page.

Click the blue Edit button over the image and click Choose Photo. Select a photo to use.

Select the Image in the work area, then open the Style tab.

On the Style tab, under Width select Full Page Width.

On the Insert tab, drag a Box block onto the image. The Box is shown here:

Next, select the image, and on the Style tab, set the Min Height to 500px.

Then drag a Text block into that box.

Select the text, and on the Style tab, select a Text Color. We chose white.

Next, with the text still selected, change the font size. Here it's 45px.

With the Text block selected, you can change the width and background color from the Style tab. Here the max width is 500px, the background color is a dark brick, and the text padding is 20px all around. You can fiddle with these values to get the look you want.

With the Box that holds the text block selected, make sure the Center Horizontally icon is blue, meaning it has been set. If not, click it to center the box.

To add the button, on the Insert tab drag a Button block into the box directly under the text.

Now style the button. With the Button selected, give it a Max Width of 200px.

To center the Button horizontally, click the center horizontally icon at the top of the Style tab.

You can double check your layers by opening the Layers tab. They should look like this:

If your layers are different, you can drag them above, below, or into any other layer until yours look like the layers above.

You should have an image with a box in it, with a text block inside it. The button is also inside that box.

Once your Layers are correct, you can move the button and text up and down. You can change the vertical alignment by selecting the box and clicking the appropriate alignment icon.

The screenshot below shows the three vertical alignment options on the Style tab.

👉 Tip: If you have trouble selecting the box, you can select it in the Layers tab, then move over to the Styles tab to apply the alignment.

That's it. You now have a Hero with a button that links to another page. Future enhancements could be to turn the Hero into a Template or Symbol if you want to reuse it.

To learn more of what you can do in Builder, check out the other tutorials in the Video Library or build out a page with more sections and techniques in the Getting Started.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy