Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

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

This video shows you how to build 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

Prerequisites

  • 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:

Adding the image

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.

Adding the text

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.

Adding the button

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.

Next steps

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.


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?