You’ve decided to create your website on WordPress, you bought your hosting and domain (and if not, read my previous post for instructions), and now you’re sitting thinking ‘what next?’. There are thousands of amazing WordPress templates and it may be tempting to spend forever choosing and then customising them.  But if the only reason you need a website is so that you can start selling, why procrastinate by faffing around with your website?

This post will walk you through the process of creating a great website for your service business in less than 2 hours!

Choosing your template – Mesmerize

This is what you see now when you log into your website. Go to ‘Appearance’ and select > ‘Themes’ on the menu on the right.

Click on ‘Add a new theme’

You are now going to see this:

Search for ‘Mesmerize’ theme. Press ‘Install’ and then – after waiting a moment – the button will change into ‘activate’. Press ‘activate’ – and – after waiting another moment – press ‘customize’

You should now see this pop-up about the Companion plugin: select ‘install now’ and then ‘activate’:

Now, go to the menu on the left, click ‘Appearance’ and select: ‘Customize’:

 

You will now see the following banner: select ‘Personal’ and click on ‘import’:

After installing the predesigned site, first, go back to ‘Appearance > Customize’, and then scroll down ‘general settings’:

Select ‘homepage settings’: and make sure you have selected ‘your homepage displays: static page’ (otherwise your homepage will display the blog posts first – and you don’t want this!)

Now go back to Appearance Customizer by pressing the arrow ‘<’ and choose ‘Front Page Header Designs’:

 

This is where we will create a beautiful header like in the model website example!

Scroll down to ‘header preset 5’ on the menu on the right and click ‘activate preset’:

Start from ‘Banner’ Selection:

Now we are going to customise the banner so it looks like the header of our model website:

Let’s start from the TAGLINE:

You can also edit the buttons – we don’t have the signup landing page from your email marketing tool yet, but we will get to that soon.

We will also edit the menu on the top to have the following elements:

1. Home
2. About
3. Work with me
4. Testimonials
5. Blog
6. Contact

Follow the instructions below:

1. Click on the pencil next to the menu on the top-right to customize it
2. Add new pages
3. Add the titles of the extra menu items that we need: testimonials and ‘work with me’. Click ‘Add’ after each one. They should now be appearing on the right.
4. Rearrange the order or the items to match the order above.

Finally, click ‘Publish’ to save the menu.

Now we are going to change the image on the website to your beautiful photo:

Go back to Appearance Customizer and select the top option ‘Hero’, and then ‘Front Page Hero’:

Now, you can select a different photo and customize the overlay!

Customizing overlay:

Overlay is a ‘shadow’ that makes your photo a bit darker / different colour (a bit like an Instagram filter!). It can be very useful if your photo is very bright and you need to ‘darken’ it to make the tagline letters more visible, or you to give your website header a rose tint 😉

After editing the tagline and invitation to download the FREEBIE, and the menu, my website header now looks like that:

Now, we are going to arrange the sections of the homepage after the header image in accordance with our earlier instructions:

• STEP 1: Big, Bold header with 5 fixed elements (your photo, your business tagline, your logo, navigation menu, signup form/button for collecting email addresses)
• STEP 2: Introduction – who are you, what you do, your STORY + your WHY.
• STEP 3: Show testimonials.
• STEP 4: Address your target client + show the value of your services for them (“This programme is for you if…”)
• STEP 5: Present your services/ packages briefly using benefits language.

Return to the customizer and move (by dragging) the ‘about’ section one position up – over the ‘overlappable’ section (which we will use as ‘work with me’).

Now, we are going to remove certain elements from the homepage to clean it up and achieve the layout of our ‘model homepage’:

After deleting ‘features’, delete one ‘content’ section and the ‘team’ section. Rearrange the sections to arrive at the following order:

1. About (Your ‘introduction’ part)
2. Testimonials
3. Content
4. Overlappable
5. Portfolio
6. Cta
7. Contact
8. Latest news

 

About (Your ‘introduction’ part)

Now, let’s focus on customizing the ‘about’ section, which will serve us as your ‘introduction’ part:

As you remember, it should consist of the following elements: Your introduction should include:

1. Greeting + your name: simply “Hi! I’m ….”
2. Your “job title” (who you are, what you do) e.g. “I’m a transformational coach helping ambitious women find their passion in life”
3. Your life NOW.
4. How your life used to look like BEFORE.
5. What happened to transform your life.

Go back to your ‘Content template’ and copy what you wrote in this part into the relevant places in this section (follow instructions on the photo below):

About:  Tell your story in more detail. Don’t spare on emotions – the more personable and authentic you are, the more readers will be able to identify with your story and feel like they ‘know’ you.

Last but not least, let’s add some photos of your fabulous life now:

Make sure you use the ‘crop’ tool to crop the photos to the size of the photo on the template.

Now, the ‘about’ section of the website looks like that:

When you are happy with how the section looks, hit the blue ‘PUBLISH’ button on the top-right again.

Now, let’s work on the ‘testimonials’ section:

1. Change the placeholder text ‘Client Testimonial’ into ‘Praise’
2. Change the corporate-sounding placeholder text ‘Don’t take our word for it – here’s what our clients say:’ to something more personable, e.g. ‘What my clients say about working with me…’
3. Change the placeholder text in the testimonials into real testimonials you got from your clients.
4. Change the stock photos into real photos of your clients (or remove the photos by pressing the bin icon when you hover over them – if you don’t have any of your clients’ photos)

Press the ‘publish’ button again once you are happy.

Now let’s move on to the next panel – ‘Content’ – which will serve us to develop the ‘Address your client’ section of your homepage (STEP 4:  Address your target client + show the value of your services for them).

1. Change the stock photo for another beautiful headshot of yourself or a relevant stock photo – e.g. of a to-do list – you can find plenty of amazing stock photos on Unsplash.com

After you are happy with this section, hit the ‘publish’ button and move to the next section: ‘with me’ in the ‘overlappable’ panel.

TIP: You can also over the ‘Cta’ panel over the ‘Overlappable’ panel to add a bold title and a call to action button encouraging potential clients to book a discovery call with you:

After you are happy with this section, you can hit ‘publish’ and move on to the Portfolio.

‘Portfolio’ is an additional section where you can display your personal photos, or photos from your Instagram with links to each photo (it will build relationship with your potential clients as they will feel they ‘know you’ better and grow your Instagram following at the same time!)

Don’t’ forget to press publish when you are done!

Finally, we have only two sections of the homepage left: contact and excerpts from your blog.

Contact

In order to display the contact form on your homepage, you will need to install a contact form plugin that will generate a shortcode for you to paste here:

To install this plugin: go to ‘plugins’ on the on the main menu on the dashboard (you will need to leave the appearance customizer first!) and click on ‘add new’.

Now select install the plugin on the notice.

After installing the plugin press ‘activate’. Now, go back to the menu > plugins > installed plugins > ‘contact forms by WP’:

Select ‘Create Your First Form’ and then ‘Mesmerize contact form’:

Now simply click ‘submit’.

Add description your form (e.g. ‘Contact form homepage’), then select ‘notifications’ from the menu on the right.

This is an important place – enter your email address so you can get notifications from this contact form!

In the ‘Confirmation’ tab you can even modify the kind of confirmation message the visitors contacting you will receive:

Don’t forget to press ‘SAVE’ once you’re finished.

Then, press ‘EMBED’ and copy the embed code (we will need to paste it in the ‘contact’ panel of the homepage so we can have the contact form displayed there):

Now, let’s go back to our homepage: close the contact forms pop-up, close the form editor with the “X” on the top-right,  go to the WP dashboard menu, select ‘Appearance’ > ‘Customize’ and then select the ‘contact’ panel on the right and press the ‘knob’ icon to customize it. Press the middle of the form to trigger the pop-up, and put the shortcode into it:

Press ‘apply changes’ and you’re done!

Now all you have left is to edit the message encouraging people to contact you;

Now, don’t forget to edit the contact details on the top-bar of the homepage, and add links to your social media profiles. You do it by simply scrolling to the top on the page, pressing on the ‘pencil’ icon, and then editing the text in the panel that appears on the right.

The last panel on your homepage, the ‘Latest-news’ panel, displays your latest blog posts.

Customize the placeholder text to make it more personal and encourage your readers to visit your blog.

This is a great way to build relationship and showcase your expertise in your area!

If you want to remove this panel from your homepage, you can simply press the orange ‘bin’ icon on the menu to the right.

Don’t forget to hit ‘PUBLISH’ to save all the changes!

Editing pages

You have now finished your homepage, congratulations!

We are now going to edit the remaining pages on the menu:

2. About
3. Work with me
4. Testimonials
5. Blog
6. Contact

Let’s go back to the WP dashboard (you need to navigate back from the dashboard to the appearance customizer by pressing the “X” icon on the top-left of the right hand side menu).

Go to ‘Pages’ and select ‘all pages’:

You will now see a list of pages you have created when editing the menu:

Let’s select the ‘About’ page and click ‘edit’.

Past the text you have created earlier, add some photos, upload a ‘featured image’ (this is important for sharing the page e.g. on social media) and press ‘update’.

Rinse and repeat with the other pages.

And that’s basically it – your website is now finished! 🙂

If you want to outsource this activity – you can take advantage of our amazing winter promotion and have a Mesmerize Theme WP website (5-pages) + website copy done for just £ 199! (price of copy alone). Offer valid till the end of January!