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.
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.
Next thing to consider is which plan best suits you. You have 3 to choose from.
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.
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.
Review & Complete.
Just enter your personal details and your payment information and you're nearly there.
I'll look away for this one 😉
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
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.
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.
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.
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.
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?!
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.
Next, type in Elementor into the Search Box. Hit Install Now and then Activate the Elementor Page Builder Plugin.
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...
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.
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).
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...
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.
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.
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.
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.
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.
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.
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.
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?!
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.
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.
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.
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.
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.
To change the colour of the logo, go back to the main Header menu and click on Logo. Hit Select Colour to change.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Once we have all the blocks installed, we can now start adding our own images, links and text.
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.
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.
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.
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.
Now we need to create a link for the call-to-action button (Catch Us Live).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 😉
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.
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.
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.
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,
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
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.
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