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

Getting Started with Builder

The Getting Started series guides you through building a page in Builder totally from scratch. By the end of the series, you'll have built a beautiful page with a hero, columns, and quick, but sophisticated design elements. You'll learn how to:

  • Build sections of a page from scratch
  • Build what you see using alignment, columns, and styles
  • Make your page look great on all devices

What you'll build

You'll build a whole page from the top down with a wide hero image, copy, a button, and a layout that looks and behaves like a modern site that invites confidence in the brand.

Prerequisites

To follow along in Builder, make sure you have the following:

  • An evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.
  • A Builder account. If you're just trying Builder out, you can do everything in this series with a free account.

Getting started building a hero

This first video in the Getting Started with Builder series shows you how to:

  • Create a page
  • Create a full-width hero image at the top of your page
  • Add copy and a button to the image


This video demonstrates the whole process. Below the video is a list of the steps. Each section also has a quick video below it to isolate the required steps.

Create a new page

  1. In Builder, on your Content tab, click the +New button, give your new page a name, and click Create Page.
  2. Choose the Blank page rather than one of the Templates.

Add a photo and text

  1. Into the +Add Block section on your new page, drag a Box from the Insert tab.
  2. Now drag an Image block into the Box you just added. Edit the Image block to choose your photo.
  3. Once your photo appears, drag a Text block onto it. This will contain the large headline. You'll notice the image shrinks to the height of your new Text block.
  4. Click your Image and on the Style tab, give your image a min-height. Make it 500px in this instance.
  5. Change the font size to 50px and the color to a contrasting color. Here we made it white.
  6. Center your Text box vertically by selecting it, then choosing the center vertically icon in the Align section of the Style tab.
  7. For the subhead, drag another Text box onto your picture. On the Style tab, make the text 25px. In the Align section of the Style tab click the Up arrow to push this subhead up.
  8. To bring the header and subhead together now, select the header, and click the Down arrow this time.

Add a button

  1. To add your button, drag the Button block from the Insert tab onto your photo just under the subhead. You'll notice the Button is full width.
  2. Select the Button, and on the Style tab choose the button background color. Here we chose white, so we also changed the font color to black.
  3. Change the Button's padding using the Style tab. Make it about 65px on the left and 65px on the right. Change the max-width to 300px.
  4. Next, also in the Style tab, click the center horizontally icon. Now to move it up, click the up arrow icon.
  5. The video shows you how you can also change the margins to move the Button a bit more.
  6. If you want to match the Everlane button's style, you can increase the border radius from the Style tab's Border section.

Next steps

Now that you've created a hero with copy and a button, head over to the next step to learn how to make the next section of the page:

Getting Started with Builder: Step 2

Was this article helpful?