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.
