Made in Builder.io

Watch 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

The Make a Landing Page series guides you through building a page in Builder 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

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.

Collage of sections of the page you'll create with this Getting Started.

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.

The first video in this 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.

  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.
  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.
  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.

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:

Make a Landing Page with Builder: Step 2


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

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy