Building a Homepage for Your Band Website

08 Feb Step 7: Building a One-Page Homepage

In this post, I’ll show you how to use Visual Composer to create a one-page homepage. I’ll cover how to use both the frontend and backend editors of Visual Composer, cover my own homepage on www.alterheart.com (so you can create a similar design if you like), how to add links to your website menu that will scroll to a section on your page, and where to set your homepage on WordPress.

First up, creating your homepage…

This post is part of a 14-step series on creating a website for your band using WordPress. Click here to go back to the main page

Creating Your Homepage

First, click “Pages” in the WordPress left-hand navigation menu. This will bring you to the Pages area where all the pages you have created will be listed. Click “Add New” in the top left-hand corner:

Add New Page

A new page will be created. Name this “Home”:

One Page Homepage Visual Composer

Now, there are a few ways to build your page using Visual Composer. You can do this on the backend or frontend of your website. Let’s take a look at the frontend way first. Click the blue button that says “Frontend Editor”. You’ll then be directed to the frontend of that page:

One Page Homepage Visual Composer

Here you can start to build your page. Click “Add Element”. A box will then pop up:

One Page Homepage Visual Composer

Here you can select from a list of different elements to add. Let’s start by adding a row. Click “Row” then you’ll see the following page:

One Page Homepage Visual Composer

Click the top “+” button to add an element to that row. That list of elements will pop up again and you can start adding things to this row. Once you’ve added everything to that row, you can add another, and another, and so on.

Below, I added a text block, embedded SoundCloud Player (I show you how to do this in Step 9), photo slider (I show you how to do this in Step 11), etc. You can see how the page starts to come together:

One Page Homepage Visual Composer

Now, I can’t cover everything there is to add in Visual Composer. But, this hopefully gives you a starting point. Mess around with it a bit to get a better idea. Each row will create a different section of that page. You can change the background color of a row, text block, column, etc. If you want to add space between an element, you can use the “Empty Space” element.

You can also edit this page on the backend using Visual Composer. Click “Backend Editor” at the top of the page to get there. You’ll then be taken to the backend editor of the page:

One Page Homepage Visual Composer

Visual Composer on the backend works similar to the way it does on the frontend. You can add rows, columns, elements, etc. by clicking a “+” button. You can then rearrange elements by dragging and dropping them. The above and below screenshots are taken from the homepage on my site, www.alterheart.com. If you want to create a similar look, you can copy the elements.

First, I included a row with a large headline and a button to buy my album (shown in the screenshot above). The background is a professional image of myself.

Then, I followed it up with a row picturing my album cover and a SoundCloud embedded music player for the lead single off that album, “Not Real”:
One Page Homepage Visual Composer

I created a custom graphic to use as the background for that row.

Then, I added a row to include a photo slider:

One Page Homepage Visual Composer

From there is a row to include my email signup form (see how to set that up in Step 13):One Page Homepage Visual Composer

Moving along, I created a row to include a biography for myself and a bit about the project:

One Page Homepage Visual Composer

I used a professional photo of myself for the background.

Finally, I included one last row in order to add a contact form (learn how to add a contact form in step 12):One Page Homepage Visual Composer

Here’s how it all comes together on my site:

The first row:

One Page Homepage Visual Composer

The album and SoundCloud music player row:

Alter Heart Hompage

Alter Heart Hompage

The photo slider row:

Alter Heart Hompage

The newsletter row:

Alter Heart Hompage

The biography row:Alter Heart Hompage

The contact form row:Alter Heart Hompage
Once you have your page built, save and update/publish it to make it live on your website.

Adding Scroll Down Links to Your Menu

To add a link to your website menu that links to one of these rows, first find a row you’d like to link to and click the pencil icon to edit the row settings:

One Page Navigation

A box will pop up for the Row Settings. Scroll down until you find an input box labeled “ID Name for Navigation”. In this box, add a unique identifier for this row. For example, for my photos row, I added “photos”. Make sure there are no spaces in this name and that all the letters are lowercase:One Page Navigation

Save your changes and then update the page.

Then, find “Appearance” in the WordPress left-hand navigation menu and hover over it. A drop down box will appear. Click on “Menus”:

One Page Navigation

This will bring you to the Menus page where you can create your website’s menu. To add an item to the menu, you can use one of the four options in the box to the left.

To add the link we just created, click “Custom Links”. The box will then open up. In the URL input box, put your website domain address, followed by a slash, then a hashtag, and then the name you put in the ID Name input box in the previous step:One Page Navigation

So for example, you can see for the photos row link, I added the following URL:

Home

When someone clicks this link in my menu, instead of bringing them to a new page, it scrolls down to the photos row. You can label this link in the “Link Text” input box when you create it or the “Navigation Label” input box after you create it and when you’d like to edit the name.

One Page Navigation

To save the menu and activate it for your site, scroll to the bottom and check the “Main Menu” checkbox and hit “Save Menu”. The menu will now be live and appear at the top of your site.

Setting Your Homepage in WordPress

Finally, to set the page you created as your actual homepage, find “Settings” in the WordPress left-hand navigation and hover over it. A drop down will appear. Then, click “Reading”. Once you’re on the Reading Settings page, click the radio button that says “A static page” then select your homepage in the drop down box next to “Front page”:

WordPress Reading Settings

Then, save your changes. That page will now be set as your homepage.

That’s it! That was a lot to cover. So if you have any questions, leave them in the comments below and I’ll do my best to answer them. If not, let’s move onto Step 8: Setting Up Your Store.

Or, click here to head back to the main page.

No Comments

Post A Comment