How to Build a Website for Your Band: A Beginners Guide

How to Build a Website for Your Band: A Beginners Guide

Reading time 18-20 mins

The idea of building a website for your band can be daunting at first.

But do not fear, as it's not as difficult as you think.

With the help of WordPress and the Elementor Page Builder plugin, I'm going to show you how to build a website for your band in just over an hour.

You don't need to know code or to be even that tech-savvy, as I break down the process for you step by step, with easy to follow guides and helpful images.

You can impress your band-mates with your new-found skills and tell them they owe you a pint, as you saved them a few quid by not having to get a professional in to do it for you.

Having your own website has its perks as I covered in a previous blogpost.

In this blog, I will show you how to...

1. Choose a Hosting Site

2. Set up WordPress

3. Pick a Theme

4. Create a Basic Site Using the Elementor Page Builder

5. Structure Your Permalinks

But before we dive in...

Check out your new website for your band ↓↓

Step 1 - Hosting

The first thing you have to consider when setting up a website for your band is what hosting site you're going to use. There are many to choose from.

Black Knight, WP Engine, Green Geeks or Blue Host if you're in America.

They're all good.

Nonetheless, I'm using a hosting site called Site Ground, and here's why.

  • It's recommended by WordPress
  • It has something like a 98% satisfaction rating
  • They're currently offering 60% off their hosting packages.

 

Click here to get your discount 

Step 2

Next thing to consider is which plan best suits you. You have 3 to choose from.

how-to-create-a-wordpress-site-with-this-easy-step-by-step-guide

I recommend the GrowBig Plan. As the title suggests, it gives you room to grow as you start to attract more people to your website.

In saying that, if you are just starting out and you're a bit strapped for cash, you do get a lot a bang for your buck with the StartUp Plan.

The choice is yours.

Below is a list of features each plan provides.

how-to-create-a-wordpress-website-with-this-easy-step-by-step-guide

Step 3

For this next step, you can choose to get a new hosting account or upgrade an existing account to a higher hosting plan.

As we've already chosen what package we wanted (unless you changed your mind) we're gonna stick with, Get a New Hosting Account.

If you already have an existing domain and you want to use that, click on I Already Have a Domain. 

If not, click on Register a New Domain.

how-to-create-a-wordpress-website-with-this-easy-step-by-step-guide

Step 4

Review & Complete.

Just enter your personal details and your payment information and you're nearly there.

I'll look away for this one 😉

how-to-create-a-wordpress-website-with-this-easy-step-by-step-guide

Step 5

Screenshot 2019-05-01 at 00.53.22

Hosting Services

 

We've chosen our plan already but we can change it again here if we like.

It also gives us a location option. That's not our location but rather the location of the servers.

There are four options

  • Chicago
  • London
  • Netherlands
  • Singapore

 

If you plan on targeting an American audience choose Chicago. If you're Planning on targeting an Audience in Europe, choose London or the Netherlands, whichever one is closest to you.

Extra Services

Siteground offers us two addons here in the form of Domain Privacy and SG Site Scanner.

Without Domain Privacy, your personal information like your home address or email is available to the online public.

If it's within your budget I'd recommend it.

If you keep your website up to date and use the right plugins, your website should remain secure without having to purchase the SG Site-Scanner.

Wordfence, Securi and Ninjafirwall are some of the most popular WordPress plugins for security and I would suggest downloading and activating one of them as soon as you have your website up and running.

Well, that's it for the hosting side of things.

If you're happy with everything, just click on pay now and you're done.

how-to-create-a-wordpress-website-with-this-easy-step-by-step-guide

Step 6

If you come this far, well done.

We can now move on to the customer area, where we can set up our new site.

Ok, hit install WordPress.

You'll then get a drop-down window where you'll need to create new login details. Or if you're already signed up to WordPress, you can use those login details.

1305-646x600

Step 7

Next, choose what enhancements you wish to add to your account - if you want to add any.

When you're ready to move on with this step - click on the Complete Setup button.

how-to-create-a-wordpress-website-with-this-easy-step-by-step-guide

Step 8

And there you have it.

Congratulations you've created your first website for your band.

Welcome to WordPress 🙂 - Did you know 30% of all websites are built using WordPress?!

How to Build a Website for Your Band: A Beginners Guide
How to Build a Website for Your Band: A Beginners Guide

2. Login & Pick A Theme

Now that we have set up a WordPress account we need to log in with our new username and password we just created.

With SiteGround, when you install WordPress and login for the first time you will be prompted with a start now window.

They automatically install a plugin on your site to help you get your WordPress site up and running which is cool.

It will ask you to pick your theme. The theme we will be using for this tutorial is OCEANWP.

OceanWP is the most highly rated WordPress theme out there. It is quick to load and has lots of room for personalisation, unlike most other free themes.

Tip: You can delete this plugin once you're finished with the set-up.

Check out the official SiteGround video below.

What is the Elementor?

Elementor is a page builder plugin for WordPress.

This is what we're are going to use to build our site.

There are many ways to build pages with Elementor, but for this lesson, we are going to build our bands' website using Blocks.

Blocks is a quick and easy way to build a professional-looking website.

No need to know code, nor to have a background in web design anymore. With Elementor you can literally build a website in minutes.

Unlike full themes, Blocks offers more flexibility and freedom to personalise your website any way you please, by simply dragging and dropping elements and sections wherever you want them.

It's that easy.

Have a quick look at the video below for an introduction to blocks.

To add the plugin, go to your Dashboard view.

On the left-hand side of the dashboard click on Plugins and Add New.

add-new-plugin

Next, type in Elementor into the Search Box. Hit Install Now and then Activate the Elementor Page Builder Plugin.

add-plugin-wordpress

3. Setting Up WordPress

Once installed, hover over your site name in the top left-hand corner of the screen (Next to the little home icon). Then Click on View Site.

You should see something like this...

hello-world-post
comments-widget

Because we are using Elementor we don't want any of these posts (Hello World!) or widgets (recent posts, comments) clogging up our screen. (You can add them again later)

You want to have a blank canvas to work with when you begin to build your site. 

So to delete the widgets, we need to go back to our dashboard view and click on Appearances, which is located on the left-hand side of your screen and then click on Widgets.

 

archives-sidebar-widget

Next, hit the drop-down arrow and delete the widgets one by one.

Next up is to delete the Hello World Post.

In the same Dashboard view, click on Posts. Then check the box and delete (Trash).

trash-post-wordpress

Now once we've done that, we're going to click on View Site again (top left-hand corner of your screen, next to the home icon).

You should see something like this...

wordpress-full-width

Tagline

Now you're probably wondering why mine says Alternative Rock Band and yours does not!

Don't worry, I'll show you how to change that now.

The first thing to do is to click on Customise at the top left of your screen.

Then within the customise theme section, hit on Site Identity.

As you can see from the image below, this is where you change the Site Title and the Tagline.

icon-tab-publish

Another cool thing you can do here is to add a site icon. Just upload your logo and it will appear as an icon next to your site name in the tabs like so.

wordpress-icon-tab

How to build a website - Pages

Ok, so the next up is to create our Home, About and Contact pages for your artist website.

To do that we need to go back to the Dashboard view.

Go to Pages and hit Add New.

 

pages-add-new-website

This is where you enter the name of your page. In this case, we're going to enter HOME. 

Next thing you want to do is scroll down to the Ocean WP settings we're going to change a few things.

add-title-wordpress

Under Content Layout, we're going to change this from the default setting to a 100% Full Width

When that's done, click on Title and Disable the Display Page Title. This way you won't have the name of your pages coming up across your screen.

Repeat this step for your About and Contact pages.

disable-title-wordpress

You might notice we've freed up more space as the Alternative Rock title is no longer there. 

Now we need to add the pages we created to our site.

Menu

To do that, we're going to click on Customise, then Menu then Create New Menu.

We're going to name the menu Main Menu.

Check the Main box under Locations Menu. This is where we want our menu to appear on our page.

Adding Pages to Menu

Now to start adding items by hitting the ADD ITEMS button.

Add the pages you need. For us, that's Home (Custom Link), About and Contact. You can add as many as you like but for this tutorial, this will do just fine. Click Publish.

Now you should see your pages appear in the top right of your screen. Pretty cool right?!

Menu Items Added

Our website has is starting to come together nicely.

There are a few little things more we can do to jazz it up before we start using the Elementor Page Builder, which I will show you now.

Ok, click back and back again.

Then click on Homepage Settings.

homepage-settings

We want to have a Static Homepage.

If you have a blog as I do, have it on blog posts. That way it will show my latest blog post rather than a static homepage.

But in this case, we want to check Static Page and we want our Home Page to be the page we named Home.

You can go ahead and click Publish.

Colour

You might have noticed that when you hover over your sites name and your pages, it changes to the colour blue, which is a cool effect.

wordpress-typography

In saying that, for the purpose of this tutorial, let's change it to a different colour. I am using the colour code #efa700, but you can choose any colour you like. 

Ok, let's start with the logo.

Click on the Header Menu and then hit Logo.

You can change the colour from blue to whatever works for you. 

Click on Publish, go back to the Header Menu and click on Menu and do the same and publish.

hover-colour

For the purpose of this tutorial, we're going to change the background to black and the logo and menu items to white.

To this Click on Header in the Customisation View and hit General.

Within the General Menu, you can change the Background Colour of our Header. In our case, we're changing it to black.

You can also get rid of the bottom border here (The white line beneath the menu items) if you please. I am going to leave it checked for now.

header-bottom-colour
How to Build a Website for Your Band: A Beginners Guide

To change the colour of the logo, go back to the main Header menu and click on Logo. Hit Select Colour to change.

How to Build a Website for Your Band: A Beginners Guide
logo-colour-theme

The same applies to the Menu Items also. Go back to the main Header menu, click on Menu and change the Link Colour as highlighted in the image below.

link-colour-theme

Typography

Additionally, you can also change the Typography if you like?! I'll show you that real quick before we move on to the next stage.

After you've click Publish and come out of the Header Menu, go into Typography.

Next click on Logo.

font-family

As you can see you can change the font of your logo under Font Family. Pretty straight forward.

I just chose one at random here, but spend time going through them to see which one best suits your genre of music and image of the band.

Under Text Transform, you can choose to make your Logo all Uppercase which I have done here to make it stand out a bit more.

It's also a good idea to space the letters out a bit more from each other. 2 seemed to work well for me here but mess around with the slider to get the desired result.

Top Bar

Ok, there's one more thing we need to do now (maybe two) before we start editing with Elementor and that's to disable the top bar.

disable-top-bar-screenshot

In the Customisation Menu, click on Top Bar, then General and then uncheck Enable Top Bar, and you will no longer see the bar above your logo. We won't need that.

Search

Furthermore, for this demonstration, we won't need the search menu, so I will show you how to get rid of that. 

If you're building a substantial website with numerous pages filled with content, the search menu will help with navigation.

search-icon-disable-screenshot

To disable the search menu icon, Click on Header in the Customisation Menu and click on Menu. Then scroll down the to Search Icon Style and in the drop-down menu, change it from Drop-Down to Disable

You should no longer see the search icon. 

wordpress-junkies-website

Super stuff getting this far.

Now to start building our website using Blocks with the Elementor Page Builder.

This is the fun part 🙂

You'll see now how quickly we can build a professional-looking website with WordPress using the Elementor plugin.

4. Building a WordPress Site with Elementor Blocks

Ok, so the first thing we're going to do it to go back into the Dashboard view and click on Pages.

We're going to start building our Home Page first, so under Home hit Edit With Elementor.

edit-with-elementor

So here we have an almost blank canvas to start working with.

As I said, there are many ways to build pages using Elementor but for this tutorial, we're going to build our WordPress site using Blocks.

how-to-build-a-website-for-your-band-elementor

Let's get started

Click on the Folder Icon next to the plus sign in the centre of your screen to get started.

In the next screen, you will have a choice of Blocks, Pages and Templates at the top of the page. As you already know we're gonna click on the Blocks Option.

how-to-build-a-website-for-your-band-blocks-elementor

As you can see, there's a lot of different kind of blocks available to you. Headers, Footers e.t.c. Where going o start at the top and work our way down. 

Top (Hero)

In the Category drop-down menu, where gonna select Hero.

This is where we draw people in and try to get them to take action on our page. For example, buy tickets or sign up to a newsletter.

hero-section-website-how-to-build-a-website-for-your-band

Great! There's a Hero section called Sounds Of The Future which already has a music player built-in. Looks good, so let's choose that to get started.

Just scroll to the bottom of the image and click Insert.

You can jump between full-screen mode and edit mode by clicking on the arrow in the middle left of your screen.

See image below.

how-to-build-a-website-for-your-band-hero-image

About

Next thing we'll need is an About section. Every band needs a good bio.

So back in edit mode, repeat the same process again.

Click on the Folder Icon, then select Blocks from the top page menu.

Now in the Category drop-down menu, select About.

how-to-build-a-website-for-your-band-about

I kind of like this one in the middle. It goes well with our dark Hero section.

So let's select that one and insert it onto our page.

Not so bad, lots of room for a good-sized band photo and a bio.

Gallery

Now we need to grab ourselves a Gallery block. Gotta have some images on our bands' website.

The same process again.

No need to pick a category this time, just start scrolling till you come across the Grid Gallery Slide I have highlighted in the image below and hit insert.

gallery-select

Video

Let's have a look and see if there are any sections with a video player. 

In the edit mode, click on the Folder Icon, then select Blocks.

I think I seen one in the Hero section earlier so let's go back to that.

Yes, there's one there just under Sounds Of The Future (Moon landing).

Looks good, so let's click on that and insert it onto our page.

how-how-to-build-a-website-for-your-band-video

Ok, os you can see our website is starting to come together nicely.

All we need now is a section for our tour dates and a contact page and we're good to go.

Tour Dates

The only thing is, there isn't a tour date block ready available, so I'm going to show you a way to work around this.

In the Category drop-down menu click on the Team option.

If you scroll down to the bottom you will see the dark Meet Our Team Block I have highlighted in the screenshot below.

Ok let's insert that for now and I'll come back to it later.

how-how-to-build-a-website-for-your-band-tour

Contact

Last but not least our Contact page. Extremely important if you want to get them bookings in.

So let's have a look in the Contact section of the Category drop-down menu to see what we can find.

There are not a lot of free options for contacts that would work for our page.

There are some great ones there with maps if you have a small business and you want people to find you.

But as we're building a website for a band we'll just go with the one I've highlighted in the image below for now.

Now if we have a look at our site, we can see all the elements we need are there. So next up is to start editing and personalising our website.

how-to-build-a-website-for-your-band-contact

Once we have all the blocks installed, we can now start adding our own images, links and text. 

Home Page

Let's just assume your band has a few tour dates coming up and they're not fully sold out.

So what we want users to do when visiting the website is to purchase tickets.

The first thing we're going to do is to change Sounds of the future to We're Going On Tour.

how-to-build-a-website-for-your-band-a-begginers-guide

So in edit mode, hover over Sounds of the future and click the pencil in the top right-hand corner of the box.

You will see now on the left of your screen where you can edit the text.

So in the Title box, you can go ahead and change that to We're Going On Tour.

ow-to-build-a-website-for-your-band-a-begginers-guide

Call-To-Action

As you can see we have three options to choose from in edit mode.

Content   - Where we can change the text etc.

Style - Where we can change the colour & Font.

Advanced - Where we can move the margins and add padding.

In Content mode, we can change the call-to-action button from Read More to Catch Us Live.

In Style mode, we can click on Hover which I have highlighted in the screenshot above and change the colour of the button when we hover over it with the mouse. 

Ok, you can hit Update.

We actually don't need the other text section so I'm going to get rid of them by right-clicking the mouse and deleting them.

how-to-build-a-website-for-your-band

We're going to the same for the FEATURED text as well.

We don't want to distract the user with too much text.

Ok, that looks good.

how-to-build-a-website-for-your-band

Now we need to create a link for the call-to-action button (Catch Us Live).

So if you have an Eventbrite or a Bandsintown account, you can set up a link to send your fans to that landing page to purchase tickets.

Sounds good right 🙂

To do that, we're going to click on the edit tool of the call-to-action button like we have done before and copy & paste the link to your tickets to where I have highlighted and click update. Simple.

call-to-action-link

To change the Soundcloud link, click on the section and hit the editing tool.

Then under the Content tab just copy & paste your Soundcloud link in.

You can also add a visual player in the drop-down menu which increases the size of the player (see image below).

I'm going to leave it as-is for now. (See Image below for alternative player)

Additionally, you can change the colour of the button if you like, by scrolling down to Controls Colour at the bottom of the menu and changing the colour.

With the Pro version, which will cost you around €50 / year, you have access to the Spotify widget and many more features.

top-block-elementor

About

Ok, so the first thing we're going to do here is the change the image (This works for all images).

To that, click on the image in question and you will see Edit image pop up on the left of your screen.

Simply hover over the thumbnail image and select Choose Image. Now you can replace the image with one from your library or upload one straight from your device.

Additionally, you can change the size of your image. I'm going to change our image from full to medium-large and when that's done hit update.

It all depends on how you want to build your website.

about-section-how-to-build-a-website-for-your-band

Next, I'm going to click on About The Company and Change it to About The Band. That's pretty straight forward.

Underneath About The Band we can give a short description of the group and underneath that is where we can go into more detail.

It's good to have a short bio and a longer bio, so if someones promoting you they can just grab the short bio for their piece.

I'm also going to change the text from grey to white as some people might find that hard to read.

To do that, click on the Style tab which I highlighted below and click on the colour palette next to Text Colour. When you have that done click on update.

about-the-band

Gallery

Let's shorten the Grid Gallery Slide to just Gallery for starters, by clicking on the section and editing it in the Title Box of the Content menu.

I'm also going to get rid of the text section here by right-clicking on the section and pressing delete.

The same applies to the Our Gallery section in grey above the main text. Right-click on that and delete it too. 

gallery-block-elementor

Tour Dates

Firstly we need to click on Connect With Our Team and change that to Tour Dates.

Now as you can see we have six sections in this block which was designed to introduce customers to the team behind the business.

We're going to change these to upcoming events and dates for our tour.

tour-dates

As you can see from the screenshot above, I have used the Job Title for the Date and used the Person's Name for the Name of the Venue.

In the description below I have entered details about the support act and the time slots.

There are also Social Media links below where fans can share an upcoming gig to their profile (Free Promotion).

You can add and remove these by clicking on the Editing Tool in the Icon Section.

Once in edit mode, you can delete an icon by hitting on the X beside the icon name to remove it, or hit the Add Item button if you want to add some more.

You can change the text colour like we did earlier the same way, by hitting on the Style tab and change the colour of the text by clicking on Text Colour.

Like I said before it's how you want to build your website, these are just guidelines. 

tour-dates-section

Additionally, As we have done with our Catch Us Live button earlier, we're going to paste the link of our event into the highlighted area in the image above.

Which I arrived at by clicking on the edit tool in the venue name section (Whelans).

So now, when the user clicks on the venue name, it will bring them to your Eventbrite or Bandsintown page, where they can purchase the tickets.

Furthermore, we want our venue name to stand out from the rest of the text.

To do this, we will change the colour of the text, by clicking on the Style tab and clicking on Text Colour.

Then we're going to click on Typography and scroll down to Transform we're we are going to change the text to Uppercase and repeat the process until we have all 6 venue names changed. 

Typography-tour-dates-section

In addition. you can see I've changed some of the Social Icons to their official colour, to make them stand out a bit more and encourage social sharing.

This is completely optional but I'll show you how to change them.

Hit on the Social Icon Section then hit on the Style tab.

Then click on the Colour drop-down menu and hit Official Colour.

That's it, you should see them change automatically. Now just repeat the process for the rest of them and hit update.

Alternative 

Copy and paste the code from your Eventbrite or Bandsintown page into your website.

Just add a shortcode module with Elementor and paste it in. Simples.

social-link

Video

This we're your best video is going to feature.

The first thing we're going to do here is to change the Business text to Video.

You should have the hang of this now, just click on the section and hit the edit tool in the top-right corner of the box and in the edit section on the left of your screen, edit the text.

Next, change the main text to Check out Our Video.

As you can see we have another call-to-action button here (Read More).

We're going to change this to Watch More, by clicking on the button like before and change the text. Pretty straight forward.

video-block

Moreover, we are going to add our Youtube channel link by copying and pasting it into the link section in the Content menu.

Next up is to change the colour of the call-to-action-button (Read More).

In the Style menu, click on Hover and change the Border colour and Text Colour and hit Update.

To change the video, click on it and copy and paste your Youtube link into the link section in the Content menu.

To change the background image, right-click on the image and hit edit section in the pop-up menu.

In the edit section, go to the Style tab. Click on Background and hover over the image. When choose image appears, click on it and upload your new image. 

Don't forget to hit update 😉

Contact

For the final block, there's not too much to do here but to put in your own email address and add your links to the social icons. 

You can change the colour of the text in the Style menu by clicking on Text Colour and changing it. 

Furthermore, you can delete social icons by clicking on the X, highlighted in the image below. 

In addition, you can change the Hover colour by clicking on the Style tab and scrolling down to Hover Icon and changing the Primary and Secondary Colours. 

contact-form-how-to-build-a-website-for-your-band

About Page & Contact Page

For the About and Contact the page the process is the same.

Exit to Dashboard by clicking on the 3 horizontal lines in the top left of your screen and select Exit to Dashboard.

Then hit Pages in the menu on the left.

First, go to the About page and hit Edit With Elementor.

Then just like we've done with the Home Page, click on the folder icon and go to Blocks.

Then Add the same About Section we added earlier and go through the same process as before.

Only this time we can copy & paste the text over to quicken things up.

edit-with-elementor

Repeat the same process for the Contact Page.

Exit back out to the Dashboard menu and click on pages in the Sidebar menu and click on Edit With Elementor on the Contact Page.

Then click on the folder icon hit on blocks in the above tab and insert the contact block like before.

Then just add the social links and change the email address and you're done.

5. Permalinks

After you build your website, the next thing to do is to structure your permalinks.

Permalinks are structure URLs. For example,

An SEO friendly permalink will look something like this https://example.com/category/postname

WordPress's default permalinks look a little something like this,

https://example.com/?p=342

Which doesn't look too professional!

It doesn't explain what the page is about and users will be less likely to share.

My URL for this post will be will be

https://badgrammrbz.com/blog/how-to-create-a-website-for-your-band

Screenshot_2019-05-21_at_22_15_01

So how do we fix that?

Scroll down to settings in your dashboard sidebar and click on permalinks.

WordPress automatically has Day and Name as a default.

Post Name is the most common structured permalink and one that's highly recommended.

So let's change it from Day and Name to Post Name.

That's it, just save your changes before leaving the page, and your URL structure will change automatically.

Screenshot_2019-05-21_at_22_15_17

Conclusion

Congratulations on building your first website. I hope you found this blogpost helpful and you now have a great website for you and your band.

Now that you have an amazing new website, let's get it verified with Google.

If there are any parts that aren't clear, or maybe there's something you think I overlooked, please feel free to leave me a message in the comment section below.

If you liked this blog post you might like this one on 9 Ways to Promote your Next Gig 

 

Baz McAuley

Baz McAuley, the founder of Badgrammrbaz.com, is an independent musician & digital marketer, specialising in music marketing and promotion.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.