Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time logo
Talk to Us
Contact Sales
Talk to Us










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



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.

Was this article helpful?


Visual CMS

Theme Studio for Shopify

Sign up


Featured Integrations





Get In Touch

Chat With Us




© 2020, Inc.


Privacy Policy

Terms of Service


Get the latest from

By submitting, you agree to our Privacy Policy