To start you can create a new page or edit an existing one.

Let’s start building #

Now it’s time to get your hands “dirty” – so we’ll start by building what’s called a “Hero section”.  Hero sections are big prominent elements, usually found at the top of the page. They’re designed to attract visitors and keep them on your site.

A good hero section starts with a great image, video, or slideshow. In this case, we’ll start with a photo. If you want to follow along, you can click the image below and save it to your desktop, for use as the background image. 

Add new section #

The first thing we’ll need to do is create a container to hold your hero section.

1. Click the  icon to create a layout for your container. (Clicking the folder icon would start the process of importing a template, but we’re going to build this section from scratch).
2. Now we need to select a container structure. For now, we’ll keep it simple and use one container – however, we still need to choose if the container will have a row or column structure. In our case, the elements are going to be arranged vertically, so we’ll choose the column layout. 

Okay, now it’s time to shine. Let’s add the image to your Hero section. There are several ways to add an image to a container but, in this case, we’ll add the image as a background This way we’ll make sure the image fills up the entire container. 
When you created the new container, The panel on the left side of the screen should have turned into an Edit Section panel.  If it didn’t, click the dot icon in the blue tab above the container. 

We want our hero section to take up the entire screen, so we’ll keep the content width set to Boxed with a Width of 1140 PX and a Min. Height of 540PX. (Learn more about the different measuring units). 

The text in our Hero section is in the middle of the screen, so let’s set Justify Content and Align Items to Center.

Add background image #

Now it’s time to add the background image. For containers, the background image can be found in the Style tab. 

Select the Style tab and choose the Classic background type.

Once you’ve done that, you’ll be able to add an image by clicking the image icon.
This will open your media library. In WordPress, the best practice is to add media through the media library so that’s what we’ll do. 

To add the image you downloaded to your media library click Upload Files and then Select Files.

Navigate to the file you selected and click Open. This will add the image to your media library. Although it’s optional, the best practice is to add Alt Text and a caption. This will help your SEO and make your site more accessible. Then click Insert Media.

We’ll change the following options:

1. Position of the background image: Center-Center
2. Attachment: Scroll
3. Repeat: No-repeat
4. Size: Cover

 Now one big image will cover the entire section.

Add heading #

Let’s add the text to our hero section.
In this case, we are using two different styles of text so we’ll use two Heading widgets.

 Click the widget icon so that you can select a widget. 

Drag and drop a Heading widget into the container.

1. In the Content tab, enter “My dealer page” into the Title box.
2. Change the Alignment to Center.

Now, we need to style the heading.

1. Click the Style tab.
2. Change the Text Color of the text to #F8F812 (Learn more about picking colors).
3. Change the Typography to:
   1. Family: Montserrat 
   2. Size: 22PX
   3. Weight: 400
   4. Transform: Normal
   5. Style: Normal
   6. Decoration: None
   7. Line Height: 26PX

Add a button #

Finally, we’ll add a button that will quickly convert interested visitors into customers by taking them straight to a registration page. To do this:

1. Drag a Button widget under the second header.
2. In the Content tab change the Text to “see pricing>”
3. Change the Alignment to Center. 
4. Go to the Style tab.
5. Change the Typography to:
   1. Family: Archivo
   2. Size: 18PX
   3. Weight: 800
   4. Transform: Uppercase
   5. Style: Normal
   6. Decoration: None
   7. Line Height: 1EM
6. Change the Text Color to #1B252F.
7. Change the background color to #F8F812.
8. In the Padding section, click the lock icon to unlink the values.
9. Change the values to:
   1. Top: 20
   2. Right: 55
   3. Bottom: 20
   4. Left: 55

When you finish with your page design, click Publish to save your page.