Hey in this video I’m going to show you how to create this beautiful website!
It’s a fresh and inspiring website and just makes you want to keep looking around. We love this theme at Websites Made Easy and have gone through hundreds of different themes to find you the best one out there, that is perfect and does everything you’ll need, and more! One which is proven to be successful online and also super quick and easy to set up and get going!
- Disclosure: When you sign up for Hostgator through my coupon code (wordpresshero) I will earn a commission for referring you, at no additional cost to you. This helps us continue to create this awesome content for you.
Just look how beautiful it is, it speaks for itself. It’s easy and it’s going to save you thousands of dollars paying someone else to do it for you, all it takes is some quick easy steps to get this up and running and I’ll show you how every step of the way! Oh and it’s also SUPER cheap to get this up and running It will cost you less than dinner out, it’s the best investment you can make.
And this is perfect for you whether your a freelancer, blogger, small or medium business, a photographer, artist, entrepreneur, whether your just starting out or your more experienced, or maybe your someone who is just keen to have their own professional, responsive website, well this is literally just copy and pasting, dragging and dropping what you want where you want it to be on your site, it’s really easy!
We’ll be using a platform called WordPress which is used worldwide by some of the biggest companies and celebrities such as Forbes, Mashable, Jay Z, eBay, Katy Perry, just to name a few! By the end of this video your going to be a pro at using WordPress and you will have THIS website as your very own, customised to how you want it with your own content. And don’t worry if you haven’t got any images or content we’ll help you out with that a little later!
The look and feel of this website is inspired by multi million dollar businesses, such as Hollister, Android, Coca Cola, Ford and Apple. And as you can see these all have an engaging header here with a big image that draws you in. A great call to action to get you to keep reading and to make that next move. It’s the same with the website that I’m going to show you, you’ll have a full screen header with a beautiful image, and a great call to action. These websites and many others use this method because it works, it’s proven time and again, visitors are instantly engaged and want more, they are far more likely to keep browsing and wanting more of your content, to read your blog posts, watch your videos, buy your products or services, it keeps your audience browsing and enjoying themselves.
And I understand you might feel a little overwhelmed or think you won’t be able to do this, but YOU WILL, because I’ll be showing you every step to creating this, you’ll get the hang of it quickly and you’ll see it’s actually easy! And if you ever need to pause the video please do, have a stretch a breather and then continue with it, it’s very quick to get this done, so are you ready?
Grab a drink and a snack, get comfortable and let’s start creating your website!
I’ve created a simple system that goes through setting up each section of the website so in just 7 easy steps you’ll have your website live on the internet! No gimmicks and no overwhelm, just 7 simple actionable steps! So what will you be doing in the next 7 steps and what can you expect to achieve? Let’s take a look at that now!
Step 1 is all about registering your website address also known as your domain name. You’ll learn what a Domain name is, how to register one, and tips on the best practices when choosing one. Just like buying a house and having an address so friends and family can visit, your website address is there so people can visit your website! We’ve also got a great little coupon code which will reduce the cost even more!
Step 2 is Installing WordPress to your domain name so you can then start creating your website. This is done in a few clicks it’s quick and easy!
In Step 3 your going to be amazed how your new website looks, because we’ll be installing a new theme which will transform the look and feel of your site! And again it takes just a few clicks to do this! You’ll get to know what a theme is and be introduced to your new theme and how to install and activate it, then we’ll take a sneak peek at how it looks.
In Step 4 you’ll start creating the foundations of your website and get it online. You will learn the ins and outs of your new theme, how to find your way around and customise anything you want to make it your own. Your going to have lots of fun in this step watching your website come to life!
Step 5 We’ll create the different sections for your website, such as your About Page and a Contact Page so visitors can carry on the conversation and connect with you. This is a great way to grow your community, it grows trust in your brand and expands peoples awareness for what your doing.
In Step 6 we’ll create a Blog page and an optional extra page that I’ll tell you all about very soon. Having a blog really gives you the opportunity to deeply connect and talk to your audience about the things that matter to them the most - it also builds and establishes the know like and trust factor with them. You can do this by giving your audience regular fresh and relevant content which speaks to their interests and fulfils their wants and needs. If you do this you’ll be well on your way to building a profitable online business. Don’t worry if you haven’t written before or don’t want to, I’ll tell you some great resources that you can use to get this done for you.
And in the final step Step 7 I’m going to give you some of our favourite plugins to use on your new website, and these will be game changing to your success. If you don’t know what a plugin is your in for a great surprise, but basically they are little tools that enhance your websites capabilities! So if a visitor was about to leave, one plugin can activate a popup which gets people to stay on your website or to submit their email address. Another one makes it easy for people to share your content to their social media growing your audience even more! We’ve been researching and testing the best plugins to use and soon you’ll be using them too!
My names Theo I’m the lead content creator here at Websites Made Easy and I can’t wait to get going with this, I’m excited to show you all the goodies coming up, so let’s jump straight in and get started!
Registering your website address
The first step is to register a domain name and get hosting. As you know a domain name is the name of your website, it’s what people type in to visit your site, so for example our domain is websitesmadeeasy.tv. Hosting is just somewhere for your website to live. Like I said earlier it’s just like moving house, your website will have somewhere to live and have an address. And good news, both of these things are super cheap. It’s the best investment you can make for your business!
We use Hostgator to do both of these things, you can get your domain AND hosting with them. We’ve used Hostgator for years because they’re fast, reliable, cheap and they know WordPress. We’ve even got a special coupon code you can use to reduce the cost even more! This will knock 50% off your hosting to get you up and running and saving even more!
So you want to head to Hostgator.com. And when there you now you want to click on Get Started Now. Now we can scroll down and you’ll see 3 different options, Hatchling Plan, Baby Plan, and the Business Plan. The business plan is more expensive than we need, so I’m going to focus of these others two. The Baby plan is perfect if your planning on using more than 1 domain name because it lets you host unlimited domains. The hatching plan is slightly cheaper but you can only have 1 domain with it. For this video I’m going to use the hatchling plan.
On this next page we just need to fill out some information about the domain we want and the hosting. So here is where you choose your domain, all you do is type in the name your after and it will see if it’s available. You can also change it from .com .co.uk .tv or whatever your looking for. I’d recommend staying with .com or something that relates to your business or where you live. If you write a domain and you get a green tick that means it’s available. Think about this carefully, if you need to just pause the video while you come up with that unique domain name, and press play when your ready!
For this website I’m going to have dreamandcreateit for the domain.
The next step is to choose your hosting plan, a username and a security pin. So like before I’ll choose the hatching plan, and choose how long you want your plan, you can choose between a month to month subscription or 3 years, I’m going to do a year for this example as it usually works out cheaper than doing it month to month.
Next you want to fill out your payment information, I’ve already done this so again pause if you need to, and press play once your ready. One thing to make sure is to use a good email address as Hostgator will send you an email with your login details, so make sure it’s a real email address that you can access.
Next is Additional Services, and by default Hostgator adds on a few extra services that we don’t need right now so I’ll make sure these are un selected. You can always get these later on if you need them.
To help you get started with Hostgator, I've got special coupon code for you. This will knock 50% off your hosting to get you up and running and saving even more! You want to enter WordPresshero and then validate it, and it will bring the cost of your hosting right down.
When you sign up for Hostgator through my coupon code I will earn a commission for referring you, at no additional cost to you. This helps us continue to create this awesome content for you 🙂
Now make sure your happy with everything and that you agree with the terms, and click on Checkout Now!
Your all done Congratulations! Your now the proud owner of your own domain name! Next is to Install WordPress on to your domain name, so you can then start building your website. That’s what we’re going to do in step 2!
Getting your website live on the internet!
Hostgator will have sent you some emails so head there now and find these.
Here it is “Account Info” click that to open it, and you’ll see a few links, but the only one you need is the Control Panel link which is this one, so click on that to go to your C Panel. The C Panel is where you can install WordPress to your domain name, as well as do lots more stuff with your website, so log in using the username and password which you chose, and in case you can’t remember they are both in the email you just received. And then log in!
At first this might look a bit overwhelming, it did for me when I first saw it, there’s a lot of different things you can do here, but all you need to do right now is find the Software and Services area. So scroll down and you’ll see it here. Now find Quick Install and click on that. Then you need to find this section on the left called Popular Installs, and click on WordPress here. And click on Install WordPress here.
Ok all you need do now is fill in a few tings here, such as the email address of the person who will be looking after your website, so if this is you, you can put in your email, then the name of that person as well. Give your website a title, and then your name and last name, and click on Install WordPress. Pause the video if you need to and play again when your ready.
Once you’ve installed WordPress you’ll get a success message that it’s complete. Your username and password are here, your going to use these to log in to your website. You’ll also get an email with all of this in as well. When your ready click on this link which will take you to the login or backend of your website, so you can edit and start creating it! So enter your username and password to log in, and we’re in! Your now on your websites dashboard and your the proud owner of an online website, well done for sticking with it this, it’s a huge achievement and the real fun is about to begin!
Installing your brand new website
It’s going to get even more fun and exciting as you start building out your beautiful new website, adding videos and images that really make your content stand out, call to actions to get your visitors to submit their email addresses and consume your content. I’ve got lots of exciting things to show you, so let’s get started!
So this is your Dashboard which you’ll be seeing a lot of and you’ll probably have some messages pop up, like these ones, which you can just close.
And on the left is a toolbar with lots of options, such as Posts, Pages, Appearance, Plugins, Settings and so on, and as you start creating your website you’ll notice more tools appearing here. You’ll be using all these to bring your website to life!
Alright let’s take a quick look at how our website looks right now, straight out of the box. To do this head up here, right click and open it up in a new tab.
Here we go this is how the website looks right now, it’s like the foundations of a house ready to be painted and decorated. We’ll be installing a brand new website theme in a moment which will transform how this looks, in a matter of seconds!
Ok head back to your dashboard, either by clicking on the other tab, or by hovering over here, and clicking on Dashboard.
The first thing is to make sure your website settings are correctly set up so everything functions and works well! So head to Settings here on the left and we’ll quickly go through each of these different areas.
The first one is General.
Here you can set your websites Site Title and Tagline which is good for SEO so use keywords that match what your website or brand is about, this helps google rank your website and put it in front of relevant people searching for the same content. Below that is your WordPress Address, you don’t want to change this, if you do it will stop your website working so don’t touch these.
Below that is your Email Address and make sure you’ve got a good email address here. You can also set the Site Language and Timezone.
This all looks good so now make sure you Save Changes here, whenever you do something you want to make sure to Save.
Next let’s head to Writing.
Everything here looks good, so let’s go to Reading.
Front Page Displays is how you set up your website to either show your latest blog posts on the front page, or a static page like the one that we have here. We’ll be coming back to this a bit later so for now I’ll leave this as it is, and head to Discussion.
Here you want to look at Email Me Whenever, anyone posts a comment, and a comment is held for moderation. And Before a Comment Appears, it has to be manually approved or not. This makes sure your not getting just any comments on your website, and whether you want an email overtime someone comments?
Down here you’ve also got Avatar, and you’ll see an option here called Gravatar. This enables you to have a little photo which people will recognise when you comment, reply or join in the conversation with your audience. You’ve probably seen this before, for example on our YouTube channel here you can see everyone has their own photo.
To set this up is easy all you do is go to Gravatar.com and create a free account, it’s really simple and takes just a minute, then you can upload your photo and it’ll show up on your website just like James’s photo here. So take a minute to do that and I’ll see you in a moment.
Ok great now make sure you Save Changes, and then click on Media.
Everything looks good here so now click on Permalinks.
Here you can set how your website organises it’s pages url. You need to have it set to Post Name, because as you can see this is much easier to read and understand, than the default setting. This will allow search engines to see more clearly what your website is about so it will be ranked higher in search results, and your content will be viewed by the right people who are actively looking for what your product or service is about! When your done click Save.
Awesome we’re all done with those settings! Well done for hanging in there I know going through settings can be a bit boring, but these are so important to get right and so many people don’t realise this. But you’ve got the foundations set and now the real fun begins, your going to transform and start building your website!
Adding a theme
Let’s go back to the dashboard.
Now I want you to go to your Toolbar on the left, and find Appearance, and then click on Themes.
This page shows all the themes you have available. The one which is active right now is here, it’s the twenty seventeen theme which is the default theme for new WordPress websites. See it says Active, that’s the one we just saw. So to add the new theme we’re going to use, all you do is click on Add New here.
Now here is where you can browse thousands of WordPress themes available, and they’re completely FREE. You can filter it by popular themes or featured. But we’ve done the work for you by going through many of these and we’ve found the best one to use, it’s called Sydney!
We’ve worked with so many themes and this has got to be the easiest one we’ve ever used.
And before I started working with James at WME I thought building a website was hard, time consuming, confusing and I didn’t really know the first thing about it. When I started using Sydney I was amazed at how fast and how easy it could be, what used to take months can be done in a single day. And I actually bought myself a theme to use before I knew about Sydney, and it was a great theme, it was fairly easy, but that theme cost me quite a bit of money, and Sydney was even easier. I moved straight to the Sydney theme. Because all of our time is precious we don’t want to sit for weeks creating a website, I know I don’t! So Sydney is definitely the theme to have!
So now all you do is search for it here, type in Sydney, and it’ll come up.
You can click on it for more info, but we know it’s awesome, so all you do is click Install, and then Activate here. All done! Super easy. You can see the Active theme is now the Sydney theme. So let’s go check out how our website looks again, your going to be amazed at the difference!
If you’ve already got the tab open from before just go over to that and refresh the page, if not, hover over here again and open your website. Are you ready?
Wow what a difference hey? Absolutely beautiful. I love how quick it is to do this! Check out this big header image, and the call to action, these really catch your attention!
I’m sure you agree this looks better. It’s a professional, clean, fresh fun website to browse around, your visitors are going to love it. One last thing to do is head back to the dashboard, and you should have a little message saying to install a couple of plugins which go with this theme.
Like I said plugins are basically little tools which enhance the functionality of your site. So click on begin installing plugins, then click this box, click on the dropdown here, select install, and click on this button that says Apply. Now click on this link that says return to required plugins installer.
Now we have to activate these plugins, so like before click on this box to select both of them, tap the dropdown menu, select activate, and click on Apply. Great you’ll also notice you now have more tools in the toolbar which we’ll be using soon! It’s going to be amazing once you’ve finished creating this and you’ve added all your own content to it.
So are you ready for the next step? Your now going to start creating and editing this theme and make it your own, let’s go!
Start Creating Your Website
The first thing we want to do is create our Homepage which is going to be the very first page people land on when they visit your site! So to start head to Pages on the toolbar, and click on All Pages.
This is where you’ll find all your websites pages, at the moment we have a Sample page, If you hover over that you’ll see some options, like Edit and Trash. Let’s delete this default page because we won’t use it, so click on Trash.
Let’s now create a New Page by clicking Add New. This is where you can edit your pages, add content, images and videos. So for the title of this new page I’ll type Home here. And set the template here, as Front Page. Your done, now you want to click on Publish.
A bit later we’ll be adding our websites sections to this page to build this Home page like it looks here.
Let’s create one more page and this time it’s going to be your Blog page. All you do is click on Add New again here. Again give your page a title, and that’s it for this page, now Publish.
Now you need to set your website to show the correct pages when people visit, so go to Appearance on the toolbar, and then Customise.
This area lets you customise your themes settings and your website in general. So you can see you have options for the Title, Tagline, and Logo, Header Area, and options for your Blog, the Fonts used in the website, Colours, as well as lots more. For now I want you to scroll down and find Static Front Page and click that to expand it. Now you’ll see Front Page Displays, and at the moment it’s set to Your Latest Posts, we want it to display A Static Page, so click on that, and you’ll get a couple of drop downs. On Front Page select the Home page we were just on, and for the Posts Page select Blog, and because you’ve made changes you want to make sure to click on Save at the top.
When you make changes you can see them as it happens because this is a live view of your website.
I’d recommend having a separate page open to view your website so it’s full screen and looks exactly like it would if someone visited and this way you can keep checking the changes you make even if your not in this area.
The best way of doing this, is if your using Safari, right click it, and click on New Private Window. This opens a browser window that won’t have any cached settings that might have been saved when you previously visited your website, so you’ll be seeing the changes that are made.
Sometimes WordPress will have a coming soon page that displays by default. So you may not see the website right now.
If this happens you can easily turn it off by going to your Dashboard and you should see a message saying “Your site is currently displaying a coming soon page, once you are ready to launch your site click here” So all you do is click here.
Great you’ve got your Home and Blog pages set and now you can completely customise them! Each page is made up of different sections, and you can move these around, add or remove sections, change colours and much more! We’ll get into all that fun in a moment but first lets start by customising your header area to how you want, with your own images or video and your call to action. Like I showed you earlier this is based on some of the most successful websites in the world by the biggest companies. This works incredibly well to pull people in catch their attention, so they keep browsing and consuming your content.
From the Dashboard go to Appearance, and then Customise.
Customising Header and Slider
Now find the Header Area and click that, and once there click on Header Type.
Make sure Full Screen Slider is selected here, and for Site Header Type change that to No Header. This makes it so other pages on your website don’t show a big header at the top, so your viewers can get right into the information they want.
Now go back and click on Header Slider. This is where you can add and remove each slider, and it gives you options to change the speed between each one, and if you want to stop the text slider.
I’m going to change this to 6000 which is 6 seconds between each slide, and I’m also going to stop the text slider. Next scroll down and find the First Slide options. You can change the image for the slide by removing it, or changing it, and you can change the title and subtitle for that slide here. If you want to use your own image all you do is click on Change Image, and your media browser will appear which contains any images you already have. You can upload your own images by clicking Upload here. So I’ll click Upload, and then select files, choose the image I want to use, and select it, then click Choose Image. That looks amazing! See how easy that was?
Sydney scales your images to the right size so it does it for you automatically it’s great!
Now I want to change the slider text, so for the title I’m going to put Dream it. Create it. And I’m not going to have a subtitle so I’ll remove that.
Ok I’m going to change the other image now, so again I just click on change image, upload, select the image I want, and submit that. And then change the title. Looking great. Feel free to add more images if you want to, I’ll add a couple more and you can add up to 5 if you want.
Once you’ve done that scroll down to the Call To Action Button. This is the button on the header here. You can add a url that you want people to be taken to when they click the button, this could be another page of the website for example. And the text for the button here. I’ve already changed this to Click To Begin so feel free to change this to whatever you feel is appropriate.
The url for this button can be anything, you can leave it as it is if you want, and by default when someone clicks it the page will scroll down to the section underneath, so that’s pretty cool if your going to have a services section or call to action here, it’s a nice little feature. Later we’ll be creating more pages so you can always add the url here.
When you’ve finished remember to click on Save and Publish, remember to always save as you make changes.
Let’s have a look at how to customise this button so it takes someone to another page on your site. Save any changes you’ve made, then come out of customiser by clicking the cross, and then go to Pages and All Pages. Choose any page as an example, and click edit.
The url here is the pages address, this is what you would copy and paste into the buttons url, and this applies to any page on your site. It’s as simple as that!
Ok head back to the customiser by going to Appearance and Customise.
Page Header Image and Menu Style
The next area is Header Media which is where you can upload a video, or Header Image. This header image refers to the other pages on the site, it would give them a little header image at the top. I’m not going to use this because earlier I set headers for other pages to be off, but if you did want to use a header on your contact page or about page, then you can set the image here for that.
It’s the same with Menu Style I’m not going to change anything here, but it’s here in case you want to play around with it. And that’s the beauty of this theme you can play around and see how you like it, what works it’s so simple you can just change it again, you won’t break anything!
So for example here on this website, the menu on the header is transparent, and as you scroll down it follows along as you go down the website, and that’s what Sticky means. If you wanted it to stay at the top of the page you’d choose Static, so when you scroll down it doesn’t move.
These other options change how your menu and logo look on the page, play around and see how you like it, you can’t break anything so don’t worry! Have fun be creative and see what you like.
Customise Area Settings
The next area your going to is the Colours, and here I’ll change the Primary colour which is this one here, the button and a few other elements on the website. At the moment it’s a red, and when you hover over elements like buttons and some images as well they’ll change colour or have a little animation. I’m going to use a nice fresh kind of pastel green colour which will go better with the images I used for the header., it’ll make the button really pop!
Feel free to experiment with colours for your website and what goes with your images. You can use these colours here at the bottom, or use this colour wheel to choose from millions of different colours!
Remember to keep your brand in mind and what your product service and message are about! If you want to use the same colour as I’m using, you can easily type in the colours code. All you do is click on Select Colour underneath Primary Colour, and you change this code here. Click and delete that, and then type in #6fbcc6. Beautiful!
When you’ve got the colour you want remember to save and publish. Your finished customising these settings so we can now go back to the dashboard, click on the cross and it should take you here.
In a moment you’ll start adding and customising your websites sections which is going to be so fun, you’ll see your beautiful website come together really quickly! The first time I did this I was amazed how easy and quick it was, and just the opportunities you have to make the website your own, it looks amazing and it makes you feel like a pro!
Ok so when I was showing you the header area I mentioned you can have a logo at the top. Well in case you don’t have a logo I wanted to show you a great little resource we found that lets you create your own logo in just minutes, completely free! It’s called Logomakr.com. It’s a super simple little tool which is meant to give you a quick logo to use in case you can’t get one done for you, it’s free and couldn’t be easier to use!
So you go to Logomakr.com
This whole area here is where you can create your logo, using a toolbar on the left with shapes, colour wheel and so on.
At the top you can search from thousands of elements to use, for example I’ll do a quick search, and press enter. I get literally hundreds of different images that I can look through. Some of these are already done and ready for you to use too, they’re really great!
I’m going to go with something fun for this example, so all you do is double click on one you like and it’s then placed in your work area. You can change colours using the colour wheel here, as well as add other shapes and images to create something unique.
As I said this is used as a quick fix if you really can’t get a logo created for you, it’s a simple and quick solution.
You need to make it small enough so it fits in the header and you can do that by clicking and dragging these handles to make your logo smaller. You want it to be around 50px by 50px.
You might want to change your logo to white so it pops on the header area, I’ll just leave it as it is for this example.
So then you just click on Save at the top here, wait for it to download and it will be ready for you to use!
You’ll now see two options, one where you can download your logo for free and you need to give credit to the author somewhere on your website, or pay to download it and not give credit, this is entirely up to you, for now I’ll go with the free option, and it downloads!
That’s a free resource for you to use if you don’t have a logo and want to get one done quickly and easily.
If you want a custom logo created for you by a professional that can be geared more towards your brand, I recommend looking at websites like Upwork.com or PeoplePerHour these are great resources to not only get your logo created for you but all kinds of other work.
Yes it’ll be more expensive but how much do you value your business and what your doing? It’s well spending a little bit of money on a professional logo to represent your business or service!
That’s why I gave you both options, so now you have free way of doing it and a paid way.
So lets now upload our logo! Go back to WordPress and the Dashboard, and head to Appearance and Customise. Then find Site Title Tagline and Logo,
Then Select Image, Upload, Select Files, and choose the image you just downloaded. And you’ll see the logo appears right there. It’s replaced the site title and tagline.
Now you know how you can use a logo! For this website I’m not going to use a logo, so I’ll remove it.
Site title and tagline
As you can see the site title and tag line appears there again, but what if I didn’t want the site title and tagline either? There isn’t anything in settings to remove that. But don’t worry I’ve got a quick way to do it!
This is only going to take you a minute or two to do so it’s easy. Save any changes you’ve made, then go back to your dashboard by clicking the cross.
Now we’re going to install a nifty little plugin which allows us to use code called CSS to completely customise our website, it’s like an access all areas to the look and feel of your site, and don’t worry if you’ve never heard of CSS or used it before, I’ll show you exactly what to do, just follow along with me!
First let’s head to Plugins on the toolbar and then Add New. Now search for Simple Custom CSS.
Here it is.
Now click on Install, and then Activate! While your installing plugins let’s quickly find and install another plugin called SiteOrigin Widgets Bundle which goes along with Sydney and lets you use even more tools to create your website. So type that in, making sure SiteOrigin is one word otherwise it won’t show up. Here it is, Install it, and Activate!
Awesome we’ll be using some of those soon, for now we have the Custom CSS Plugin we just installed, you can find it in your toolbar here. So hover over that, and select Add Custom CSS.
Now you should see this page, and it probably looks confusing and a bit weird, and I felt exactly the same when I saw this the first time, but I’ll show you exactly what to do, and it’s actually pretty simple.
This area is where you type in the CSS code which will customise anything you want on your website.
You can ignore all this writing here and just put your cursor below it, at line 12. Now you want to type in the following exactly as I do it, just like this,
When you’ve done it it should look like that. Make sure you’ve got that written correctly with the right brackets, spaces and everything just like I’ve done it, and look out you haven’t done anything where there shouldn’t be, it needs to look identical. If for any reason it doesn’t work just go over this bit again, pause the video as I do it so you can follow along with me.
When your done click on Publish at the top here. You can also give this a title so you remember what this code is for.
What this is going to do is hide the site title and tagline from your website which is going to create a much cleaner nicer looking header.
Let’s go and check how that looks!
That looks great it makes the header much cleaner and tidier looking, it’s easier on the eyes I love it, you don’t want a website with loads of stuff everywhere it’s just not nice looking and people can get easily lost, frustrated and may just leave, so it’s way better to keep things simple.
Ok you’ve just done your header area, now let’s jump into Step 5 and start creating the different sections of the Home page, and allow visitors to follow you on any social media platforms you use!
Step 5 Website sections and social media buttons
Our Services, creating the services
On the website the area we’ll be creating first is the Our Services section which is here just below the header.
Most people get bit this really wrong and they start talking all about themselves or maybe how great they are. But this section is your opportunity to talk about how you can really BENEFIT your audience.
So this comes down to how you speak to the desires, the wants and needs of your audience. How do you solve their pain points? This is what you should be adding here, because your audience is interested in how you can ultimately help them get from A-B, so having that here just below your header is the ideal opportunity to attract people to your brand, products and service.
The way this works is you create each service that you want to be displayed here, in the services area of the toolbar which is here, and actually this applies to your clients section and a few others but we’ll come to that a bit later.
If we go to services now and all services, we can now add our own services.
Click on Add New. And all you do is add a Title for the service here, so I’ll type mine in, and then the description you want in this area.
Now when your ready scroll down here and this lets you use an icon with your service, using an ID. All you do is click here to go to the icons website, you’ll then see a page with hundreds of different icons you can choose from. Depending on the products or service your offering you have a wide choice of different themes and icons. When you’ve chosen one you need to copy the code next to it here, then head back to your WordPress site, and paste that code in here. Notice you can also add a link to the service by adding a url here, so when someone clicks the service this could take them to another page.
Now go to the categories area on the right and we’re going to create one category for all our services, this is going to help us when we add the services section to the website in a moment.
All you do is click on Add New Category, give it a name, I’ll just name mine Services, and press Enter. Now that category is added to the list here, make sure the category is selected, and all you do now is click on Publish.
I’m going to create 2 more services for this section.
You just click here to add a new section, give it a title, description, choose an icon, make sure the category we just created is selected, and publish. Do the same create the rest of your services, I recommend 3 as this looks best for this section, remember to select your category and publish it, and I’ll see you in a moment!
Great now you should have your services created. Head to Services and All Services and you should see this page. I want you to make sure each one of the services you created has the same category. If one doesn’t you can easily change this by clicking on Quick Edit, and having a look here at the category, then changing it to the right one.
Let’s now go and look at our Home page and start creating the different sections! And we’ll start by adding our Services section!
Head to Pages, and All Pages. Then find Home and click on Edit.
This is your Homepage and this is where you’ll be adding all the sections to your website using the PageBuilder plugin that came with Sydney. Make sure your in that by clicking on PageBuilder here.
This is the finished website, and the Our Services section is here, with the Call To Action below it. So here in the page builder you can see it’s the same, the sections are on top of each other just like it looks on the website.
It’s made up of different rectangle areas, and If I move one of these sections up or down, and Update the page. As you can see the section has moved.
Now I’m going to show you the process that we used to create this exact website and once you know the basics you can create anything you want! It’s a beautiful layout and it has everything you need, plus it’s SIMPLE to do and super effective in growing your online business and building loyal customers who love your service or product!
Let’s start creating the website! To create a new section, you’d first add a row by clicking here, and rows can be split into multiple areas by clicking here which enables you to have more than one widget or element inside. This is really powerful and flexible meaning you can create all kinds of website pages and sections you can think of!
Let’s now start adding the sections that make up the Home page! We’ll start with Our Services. So remember I said sections are made up of widgets inside rows? So first thing to do is add a row, so do that now, and make this a 1 column row, and click on Insert. That’s our row in place. Now we want to add the Services widget. So click on Add Widget. And this page has all kinds of widgets you can use, but we’re looking for the Services widget. Here it is, it’s called Services Type A. So click to add that in.
Now you’ll have your first section! Notice if you hover over the row or widget you get options to edit, duplicate or delete.
The spanner here is only to edit the row itself, you need to hover over the widget to edit that.
So hover over the widget and click Edit.
You want to enter a title, so I’ll put Our Services. And If you want to have a button you can enter the text for it here, and a url to another page to send people to. Here I want you to write the category you created for your services, this will make sure all the services you created earlier will show up in the section.
Then click done, and then Update! You’ve just created your first section well done! It’s basically the same process going forward for every section on your website, so let’s jump straight into the next one which is your Call to Action!
If your not familiar with what a call to action is, a call to action is also known as a CTA and is exactly what it means – Your asking someone to take an action somehow, usually something for free and it could be in exchange for their email address or anything you choose. The action you want people to take could be anything: download an ebook, sign up for a webinar, get a coupon, attend an event, etc.. It has to be something that is RELEVANT and gives huge VALUE to your audience, so they can’t resist it and have to have it. Call to Actions are the best ways to collect email addresses, grow your following, get people interested in your product or service and create momentum!
I understand this is something you need to think about, so let’s create this section, and you can always come and edit it once you’ve figured out what you want your call to action to be about.
So back to the PageBuilder. Let’s create the section for our Call to Action. Again add a row, and make it 1 column and insert that. Then add a widget, and your looking for the Sydney Call to Action widget here.
Then edit the widget. You don’t need a title, and you enter your Call to Action here. The buttons title here, as well as a link which the button will take people to once they click it! We’ll be creating the page which people will be taken to later so I’ll leave this for now. Next you want to make sure to have this ticked, so the text is inline with the button. And then click on Done and your finished!
Let’s now check out how your website looks with these two sections!
I’ll refresh the page. Here is the header which is looking great, scroll down, and here are Our Services and below that the call to action! At the moment they’re the same colour so look like one big section but we’ll be changing that in a moment. It’s really coming along I hope your loving the look of your site as much as I am, it’s exciting seeing it come together!
Your also going to make the call to action more compelling and the font stand out, I’m going to show you a great little trick to transform this section, your going to add an image to it which moves as someone scrolls down, your going to love it!
So head back to your Home page, and find the call to action widget. If your sections don’t show up make sure your in the Pagebuilder.
You want to make sure to add the image to the row, so you need to click on edit row and once there click on Design, and find background image. Then select image.
Click on Upload Image and choose the image you want to use, select it. Then click on Done. If you want you can also choose to disable the colour overlay which makes the image darker. And click done again.
Now let’s change the colour of the call to action text so it stands out from our background image. You just on click on edit for the widget, click design and find headings colour, and change that to the colour you want, I’m going to use White.
Then click Done, and then Update! Let’s check out the website!
Refresh the page again. Scroll down, there’s the services, and there’s your call to action. But as you can see it isn’t exactly looking right just yet, so from here click on Edit Page and it’ll take you to the widget, now edit the row, click on Layout, scroll down and find Row Layout and change that to Full Width. Also up here is Top/Bottom Padding which I’ll explain a bit more about in a moment, but basically it’s the space in between each of your sections. This row is 100 by default, so you want to change this to 25. Update and check out how it looks!
That looks so good with the image and white text! See as I scroll up or down the image moves, this is called a Parallax effect and it looks great doesn’t it? It adds so much to your website it brings it to life!
As I said in between each section there’s space. And we call that padding. It’s important to get the padding right in between sections so they all fit together nicely and your website flows well from one to the next. You should check to see when adding your sections that the space in between each one looks good, but we’ll go through this as we add them!
Are you ready for the next section? Let’s jump into the Our Work or Portfolio section!
Our Work Section
So make sure your in the page builder, and you should be familiar with how it works now. You need to add a 1 column Row, make sure the row is where you want it to be in the Pagebuilder, then add your widget inside that row. The widget your looking for is called Portfolio, so find that and add it in.
So this section is ideal to show off more about your business or service, you could be a photographer who wants to show their latest work, or a blogger, an entrepreneur a business owner, whoever you are you can use this section to your advantage. It’s an eye catching and engaging bit of your website that your visitors will love and is a great way to get content in front if them!
Each image in this section is a “Project”, you might have noticed we have projects in the toolbar here. You’ll also create some more categories to keep projects in, which means you can create different projects based on individual interests. We then link the projects to the widget, which displays them in this nice section, and these are the categories here, so when someone clicks on the different categories the images change depending on which category they are in! And each project is it’s own page so you could have more information about the image, if your a photographer maybe the story of how you captured it or the location.
We’ll start by creating the projects, or images for the widget. Remember to Publish because you added your new Portfolio section, and then find Projects in the toolbar, and click on Add New.
All you do is add a title, and then the image you want to use, in the featured image down here. You can use an image you already have or upload one, I’ll upload one, here it is, and it gets placed in there.
If you wanted the image to link to another page you can add that in here, or as I said it will have it’s own page, which you would just add the content for in this area. Then add the category you want that image to be in, and I’m going to create a few new categories to keep these in, and you might want to as well because all your work might not be in the same category, and this will help your viewers find your other work by just clicking on these categories!
Perfect so when your done you just click on Publish.
Alright let’s do the next one, go to Projects and All Projects. There’s your first Portfolio image! Now click on Add New to create the second project!
So again we need to add a title. Then scroll down and add your image by clicking on Featured image and then choosing the image you want to use, or upload one.
As I did before I’m going to upload a new image, find the image I want to use, select it. And you want to be sure your images are the same size so they fit together in the widget, otherwise you’ll get images that are bigger or smaller and it looks cluttered and untidy, you definitely don’t want that.
These images are all 1280 x 720 px, and to do this you can click on edit image here, and this gives you the option to change the size of the image using this little editor.
So when your done select your image and click on Set Featured Image.
Then you want to create the category for this image. As I said each category will have a few projects and you want visitors to understand them, so keep that in mind when naming your categories. I’m going to use the same categories as before for this image.
You can also choose whether you want people to be able to comment or not here.
And there you go! Always remember to publish when your done.
I’m going to create the rest of the projects and categories, 10 is good so they fit in the widget and go across the entire page but add in as many as you’d like, so do the same and I’ll see you in a moment!
Ok you should have a few projects now and some relevant categories, all you do now is head to the Portfolio widget and add in the category names, so let’s do that now!
So go to Pages and All Pages. Then Home and Edit. Find the portfolio widget and edit that.
You want to write the categories that you created in here, write them in one by one, entering a comma after each one, so they look like this. Write in a title if you want to, and choose the number of projects to show. If you want to show them all just leave it as -1. This shows all of your projects. Lastly enter in what you want the button to say, I’ll just leave this as it is. Click Done.
Now click on the spanner for the row, edit, and then change the row layout to full width stretched. As you can see I haven’t used any padding in this section. Keep in mind going forward the padding measurements I’m using work great for me, but technology can sometimes be annoying so you might find it’s a little different on your end. If it looks different just play around with it until the sections look right on your screen.
Now click done, then update!
Ok we’re finished with that section and I can’t wait to have a look, but first let’s get the next section done and you can take a look at how your beautiful website is coming along!
Next up is the Testimonials section, a great little area to show reviews from customers who have enjoyed your product or service. This is another great way to grow the Know Like and Trust factor with your audience. If people see others have enjoyed what your offering already they are much more likely to buy from you, they’ll know its genuine and want to see what all the fuss is about!
This is nice and easy like before, the same as the portfolio widget and services widget. All you do is add new testimonials in the toolbar here. So go there now and click on Add New. Then all you do is add in a name for the person, their testimonial, and an image. You can also add the persons company name or their role here.
Click Publish and your done! Pause the video and create a few testimonials to go with this widget, pause and play again when your ready!
Great you should have some testimonials, so now all you need to do is create the testimonials section, so go to pages and all pages, then home and edit. Now create another Row, and then add in the Testimonials widget.
Now click edit on the widget, add a title, and if you want to show all of your testimonials write -1 here. You can change how long each one shows up for by changing the value here which is in milliseconds, I’ll change this to 6000 which is 6 seconds.
Now click on the spanner to edit the row, click design, and scroll down.
You can add a background image here if you’d like, instead of a white background it would show an image which looks pretty good, it’s up to you though! Just click on select image and choose the image you want to use, or upload your own.
Now go to Layout, put 50 for the Top Bottom padding, and 30 for the bottom margin, and make sure the Row Layout is set to Full Width Stretched.
If you used a background image you need to change the colour of the text for this section, so edit the widget again, and click on design, scroll down, and find headings and font colour. You should change these to a white so it looks great with the new background image.
Now click done and update!
Great your done let’s check out how your website is looking!
So refresh the page, here’s the beautiful header, services section, and wow this is coming along well, look how great this is all looking! See how quick and easy it is to do this? Here’s the Our Work section with the beautiful images, and our testimonials with the background image, fantastic I hope your loving how this is looking it’s coming along nicely! See how the image scrolls when you move up or down, it’s engaging and eye catching your visitors are going to love it!
Let’s keep going and get the next section created!
Latest News Blog Widget
Your now going to create your blog widget which is going to be a great little place for people to see your latest blog posts right on your home page! Right now it won’t show anything until you add in some blog posts which we’ll be doing in a moment, for now though let’s add the section. So you should be a pro at this by now, first add in a row, and then add the Latest News widget. Let’s edit the row and add 70 for the Top Bottom padding.
And that’s all for now we’ll come back to this a little later when we’ve created some posts for this section to show! Remember to Update the page once your done.
Ok the next section I want to show you is a nice little area to have a video and this could be a video about you, your products or service, or anything your offering, it’s a nice way to inspire your visitors and motivate them. Using video is powerful and adds another layer and gives your website more depth.
It’s easy too, in the PageBuilder add a row, and then you want to add a widget, and your looking for the Sydney Video widget. Now all you do is find your video on YouTube or Vimeo. This is a quick video I created and I’ve uploaded it to YouTube. Now you just need to copy the URL here. Then edit the widget and paste that in here.
Let’s see how that’s looking!
Great you can see it’s embedded the video there, but the background is just white, I want to make this much nicer with an image like we did with the call to action. So head to the Row and click on edit, then Design, find background Image, and click on select image. Then find the image you want to use or upload one. Then go to Layout and find Row Layout and set it to Full Width.
Then Update, and let’s have a look!
That’s much better! Doesn’t that look great! Your visitors can now click and play the video right from your home page, super inspiring and a great way to give them more information about you your service or products.
The next section is a nice little area to show the clients you’ve worked with, this is great to build trust and expertise with your audience, and build your Know Like and Trust factor. If they see you’ve got great feedback or have worked with brands or companies they are much more likely to buy from you because they’ll have confidence and trust you more.
This section is just like the Our Services section, you create a client in the clients toolbar on the left here. So go there now and click on Add New.
All you have to do is give this client a title which would probably be your client name, and change the featured image here to an image of your clients logo or business name. You also have the option to add a link here if you want the logo or image to be clickable. It’s just like you did with the services and testimonials. Then click on Publish! It’s that easy!
So do this for any clients you want, and I’ll see you in a moment.
Ok great now you need to make sure the widget is set up properly, so go to Pages and All Pages, find Home and click on edit. Create a row, and add the Client widget to that row.
Now click the spanner for the row, then layout, and change the padding there to 25. And check that is says Full Width for the row layout. You don’t need to change anything else here it’ll automatically bring your Clients in. As I’ve said before the padding I’m doing is perfect for these images and sections, you might want to play around with yours depending on the size of the images you use or how big your sections are. Remember to Update when your done!
Footer and Social Media Buttons
So you’ve now added most of the sections to your homepage, you just have to add your social media buttons! We’ll do this by adding them to our footer which is at the bottom of the page like you can see here. We’ll also be adding a little video and some useful contact info. To do this we’ll head to Appearance, and Widgets.
This is where you can find available widgets to use in your footer and sidebar areas. As you can see you’ve got 3 footer areas, and 1 sidebar area. And in each one we’ll be adding different widgets, so let’s start with Footer 1!
You want to add the video here, so click Footer 1 to expand it, and then you find the widget you want to use on the left, and drag it into that footer area. So we’re looking for the Video widget, which is right at the bottom, here, so I’ll just drag that into the footer area.
There you go, easy as that! Then as you know all you need to do is add your video URL in. To do that click on Add Video, and click Insert from URL, and then paste the videos URL here. This is a great video all about Logomakr which is on our blog, it’s a great little step by step! Then click on Add to Widget and then Save.
That’s your first footer area done! On to Footer 2!
This one is going to have a text widget so we can write in a brief description. So find the Text widget, which is right at the bottom again, next to the video widget.
Then drag that in the footer.
Now write a brief description of what your goals are, or what your offering, or whatever you’d like here. Then again make sure to save.
Next is Footer 3 and in this one we’ll add two widgets, as you can see we have our contact info, and our social media buttons below that.
So first find the Sydney Contact Info widget, here it is, and add it in. For the next widget the SiteOrigin social media buttons, you need to find the little plugin you installed earlier which gave you those extra widgets, do you remember? If you go to Plugins you’ll see Site Origin Widgets, click that, and all you want to do is activate all of these extra widgets, they’re all super useful so it’s good to have all of these to use. Then go back to Appearance and Widgets, and open up Footer 3 again.
Now you should have your Site Origin Social Media Buttons widget, here it is! So just drag that into Footer 3.
Let’s start with the contact info widget and add in your information in the relevant boxes, the email address will be made clickable to make it even easier for people to get in touch with you.
For the social media buttons you can add the networks that you use by selecting them from the dropdown, and adding in the url of your Facebook page Twitter page or whatever your using. This is great because you can customise these buttons to how you want, we’ve gone with a flat minimalistic icon, by choosing Flat in the button theme, Padding as low, and the size as Normal.
Play around and see what works for you it’s a nice little widget that you can customise to how you want.
Then save, and your all done!
Write in customising the sidebar
Let’s take a look at the finished Home page!
This looks amazing I’m really pleased with it I hope you are too! Here is the footer we just created with our social media buttons, video and contact info, this is great!
You should be super proud well done your doing amazing, it wasn’t long ago you only installed WordPress, now look at what you’ve accomplished, it’s going great and in a moment we’ll be jumping into the next step. Just before that let’s now get your Menu up and running at the top of your website, so your visitors have a way to explore your other pages and content, let’s go!
So go to Appearance and Menus. Now you want to click on Create New Menu, give your new menu a name, and click Create Menu. Now you want to add any pages you want into your menu, and here they are on the left. So now you select which ones you want, and click on Add to Menu. You can then click each one and edit them, and move them around to customise the layout of your menu.
Then Save Menu, easy! So do this now set up your menu with the pages you have right now, and you can add the other pages a bit later when you create them. Then remember to save.
Now let’s add the new menu to your website. Head to Appearance and Customise.
You’ll find menus on the left, then Menu Locations and set your new menu as your primary menu.
This will add the menu to the top of the website as you can see, making it easy for people to get around.
By the way I’ve added Home so people can easily get back to this Homepage from any other page on the website. If you have a logo or you’ve chosen to keep your site title and tagline this works the same way, they can click that and it takes them here. So you wouldn’t need this Home menu item if you didn’t want it, but it’s up to you!
Ok step 5 is next and I’m super excited because this is where your going to be creating your Contact Page, About Page, Blog Posts and an exciting extra page which is going to make all the difference to increasing your subscribers and traffic, and growing your business!
Step 5 Your Website Pages
Ok guys you should feel really proud of what you’ve accomplished so far! You’ve just got to set up your About Page, Blog Page, and your Contact Us page. If you want to grab a drink or snack just pause and we’ll carry on when your ready!
About Us Page
Ok so let’s get going, first head to Pages and Add New. Lets create the About Us page. All you have to do is give the page a Title, so About Us, then change the page template to Front Page, and click on Publish. It’s that easy.
Blog and Pages
You’ve already got the Blog page created and your website already knows to publish your posts to your Blog page. So now head to Appearance and Menus to add the new About Us page to your Menu. You want to select it and add it in, and then rearrange it to where you want it to be, and then Save.
If you have a look at your website now the menu displays your pages and you can click to go to that page. Right now they’re not showing anything as we haven’t created any sections yet.
The blog page is set up and working it takes you to the blog page, but unless you have posts it won’t be showing anything.
So the next step with this is to create some blog posts! Head to Posts and I’ll show you exactly how to create a new post for your blog, which remember will also show up on your Blog section on your home page, this is going to look great so let’s jump straight in!
Head to Posts in the toolbar and click Add New to create a new blog post.
This is your page to create any type of blog post you want. You’ll see you’ve got all these tools to use to create your post here. And if you click this button the toolbar expands which gives you extra tools to play around with.
You can add different sized headings, links, bullet points, you can add media such as photos as well as videos, customise text, so use all of these to create your post and make it engaging for your viewers!
The main area here is where you add all your content, you’ve also got some options below that and to the sides. You’ve got different formats here such as image formats, video, links. I’d just stick to the standard format for now though as this works great. You’ve also got featured image, which is the image that shows up above your post like these here.
So you want to add your blog post title here. And for the main content I’ve already got some created for this post so I’m going to paste that in here. If you want to pause while you create your post go ahead and play again when your ready.
You want to make sure to create some categories for your different posts as this makes it much easier for your visitors to find all your other posts related to the one their reading. They are much more likely to find and look at your other content if they can easily click on a relevant category that they’re interested in.
You can also use tags with your posts this is another way for people to find your content and create interest in what your doing. And the last thing to do is add a featured image to your blog post, like I said this is what you see above the post here making it eye catching and much more interesting to look at!
So click on featured image, and either choose one you’ve already got or upload an image, and select it.
Then all you’d do is click Publish, and your all set!
Again just pause the video while you create your post if you need to, and press play when your ready.
By the way if you haven’t got any of your own images we’ve made a great little post which tells you some amazing resources to get 100% free images to use in your posts, you can find it on our blog at websitesmadeeasy.tv/blog/ and it’s in our popular blog posts here, top 31 places to find free images! It’s great I definitely encourage you to go check it out, you’ll find lots of images you can use with your blog posts!
Fantastic you’ve just created your first blog post, congratulations! Your doing amazing getting this all set up, and well on your way to having a very successful website!
Now let’s go check out this new post! So from your Homepage click on Blog.
Awesome there it is! This looks great. Right now this is styled in a classic way, which means the blog posts are laid out like this, and they’ll have big images with a glimpse of the blog post below. You can choose another way which I personally prefer, I’ll show you that now.
If you go to Appearance and then Customise and find the Blog Options section, you can change how your posts look. So If I change the styling to Masonry, Save and Publish, and then refresh the website. The posts will be smaller and it’s easier to see them, it’s up to you how you want it to look, I’ll keep it how it was as I like the look of the larger posts.
I’ve just noticed I’ve still got the default post from when WordPress was installed, so I’ll delete that by going to the Dashboard, Posts and All Posts, click this default post and move to trash.
Go back to Appearance and Customise and I’m going to change one other thing. So Blog Options and find the Excerpt Length. I’ll change this to about 35, this will change the amount of the blog post you see underneath the image. Save and Publish. I think this looks a bit cleaner and keeps the blog organised and tidy.
I’m now going to add 2 more posts just to show you how they all look together, feel free to do the same or do this after watching the video.
Ok the posts are done and I’ve now got 3 blog posts, so if I go to the website and refresh it. My blog posts come up and they’ve been aligned together with their images and a glimpse of the post, with the date you wrote them and so on.
By the way having a blog doesn’t need to be complicated, you just create your posts and they automatically get added onto your blog page for your audience to enjoy. Simple!
It also doesn’t need to be time consuming and keeping an active blog is the best way to grow your presence, your audience, grow trust in your brand and get visitors to keep coming back and checking out what new posts you’ve got, you’ll be seen as a leader in your niche.
So you want to be sure to regularly create new posts, maybe start with one a week and go from there, just be sure to keep it consistent, choose a day which works for you and try and publish a post on that day so your subscribers know they can look forward to a fresh new blog post each week.
Ok guys let’s create the Contact Us page next, I’m also going to quickly create another page called WTC System, this is the extra page and you can name it anything you want, I’m naming it WTC System. It’s another way to get your product or services in front of visitors and a perfect way to collect email addresses. We’ll talk more about that soon but it’s a game changer so don’t miss it!
Contact Page and WTC System Page
So from Pages, click on Add New to create another page, give it a title so this time I’ll write Contact, and change the template to Front Page, and click on Publish.
Ok again I’ll click on Add New, give the page a title, WTC System, I’ll give it the same template, front page, and Publish it.
I’m creating this page to give you an example of what you could do to get a product in front of your audience, or to have a lead magnet, a place to collect emails, and I’ll show you how to do this after we’ve set up the other pages, It’s a really simple way of effectively growing your business, and so many people don’t do this, and then wonder why their business isn’t growing. We’ve got you covered and I’ll show you how to do this step by step!
And in case you don’t know what a lead magnet is, a lead magnet which is also known as your irresistible offer is based on tapping into the wants and needs of your customers, giving them a solution to their problem.
They’re looking around your website for a reason, they have something they want to solve. So what’s your market and what are you trying to achieve? What help are you giving people? For us we’re helping others to create websites and online businesses.
Think about what kind of problems your audience are facing which your products or services can help to solve, and create a lead magnet which they’ll have to have and is going to help them achieve their goals.
This is to attract them to download your lead magnet in return for their email address, which you use to always have a way to be in contact with them, update them with new services or products.
So instead of someone just coming to your website looking around and then leaving and maybe never coming back, you’ve always got a way to get your product or service in front of them again.
And a lead magnet can be anything – you might give away a free PDF on eating healthy and becoming vegetarian, a free report, video series, a guide to grooming your dog, free book or even a free chapter from a book. Depending on your industry, your lead magnet might even be a free trial to a membership area, a software or product demo or even a free consultation. It really depends on what you do and what you’re selling. As long as you’re hitting a pain point and giving people a solution to help fix that, you’ll make it easy for people to say yes to wanting to download your lead magnet, and growing your email list!
About Us Page
Great you’ve got all your pages created so now let’s start adding the sections for your About Us page.
It’s the same as we did with the Homepage, using rows and widgets to create the sections for the page.
So find your About Us page, and click Edit underneath it. You want to make sure your in the Page Builder by clicking the tab here.
If we look at the completed website, and the About Us page, you can see it has a headline About Us, text underneath that, and a nice little video on the right. You’ve got your beautiful looking call to action on this page as well. And your social media buttons at the bottom again in the footer.
So back in the PageBuilder, we’ll start creating this page using the rows and widgets just like before.
For the headline you’ll add a row and you want to make this a 2 column row, and then add a couple of widgets. You should have these widgets activated from earlier, but if not, go to Plugins and SiteOrigin Widgets, and you can Activate all the widgets here that aren’t active yet.
Ok perfect, so we’re looking for the SiteOrigin Editor widget which is kind of like the page editor you used for your blog posts, basically a text editor with some nifty tools. So add that widget in the left column. Then find the Video widget and add that in the right column.
So first edit the widget on the left, and write your title here, this will give the page a nice headline, About Us. And you’ll write your description here so it’s underneath the title. I’ll copy the text from the website I created earlier to save time, and paste it in here. You want to give your visitor enough information about you and what you do, your mission your goals, why you do what you do, but don’t go on and on about how great you are, a lot of people do that and this isn’t the right way to go as it’ll put people off, you want to come across helpful, they need to believe you can help them find what they’re looking for.
To add the video you want to edit the video widget on the right, and just like we did before click on Add Video, Insert from URL and paste your videos address here, click Add to Widget and it gets embedded automatically on your page!
Now edit the video again and click Layout, and put 25 for the top padding and 20 for the left padding, the rest at 0. When you’ve done that click Done.
Next is the call to action, so add a row, and find the call to action widget, here it is.
Just like you did before fill this out with your call to action, button text, and link you want.
You want to edit the row and put 25 for the top bottom padding, and make it full width! Also make sure to add the background image to the row, and make sure your font is white so it stands out against the image!
And your all done with your About page, how quick was that? Make sure you Publish it and let’s check it out!
Very nice I love how clean this looks, and the video is placed right there ready to be played.
Our call to action beneath here, so this is an inspiring page for anyone viewing it, and then they can easily get started by clicking our call to action! Use this page as an opportunity to make your story interesting. Enable people to understand how you know what you know and what makes you an expert on the topic. Why should they be interested in what you have to offer? How will their life be better because of it? And where can they go from here?
Amazing work well done, remember you may need to add this new page to your Menu at the top if you haven’t done already. You can do that in Appearance and Menu.
Video done to here
Ok let’s now do our Contact page!
So you’ve got a headline and text underneath with a clean looking easy to understand contact form on the right. And for the contact form you’ll be using an in built plugin that comes with the theme! Super easy we can get this set up in 1 row using 2 widgets, let’s get going!
Head to your Contact page, and start by adding a row, and you’ll need it to be 2 columns, and then add a widget, and find the SiteOrigin Contact Form, add that to the right column, and then find the SiteOrigin Editor and add that to the Left column.
For the Editor you can write your title here, and add in your contact information just like this. You can also make these clickable like we did before, just highlight and click this icon, and for your email make sure to put mailto: before your email, and if you want to use social media links just write in Facebook or anything you want to use, make it a link and write in your pages URL.
Then click Done!
For the contact form on the right click edit on the widget, and here you can select which fields you want to use. Your Name, Your Email, Subject and Message. You can rearrange these as well as look at the settings where you can write the email that you want peoples messages to be sent to, and the default from email address. You can choose to use a default subject and also a Success Message here which will show up when someone submits a message.
You can also use Spam protection so before someone can send a message they have to fill something out like a word or number.
But what I like is the design and you can edit this here, you can change the background colour, padding, border colour, width and so on. This gives you so much flexibility to choose exactly ho you want your form to look in line with your brand. Feel free to copy these settings to get the same look as ours.
So once your done with those, click on Update, and let’s go check out our new contact page!
This is looking great and let’s your visitors easily get in contact with you!
You can also use contact forms to build your email list, which as I’ve said is crucial to becoming successful and having a profitable website. You need to collect peoples emails so you can then communicate with them again about your product or service, get it in front of them and remind them why they should come and have another look!
Don’t forget to add this new page to your Menu if you haven’t already!
This is where the optional page comes in that I mentioned earlier, and if you’ve got a product or service your trying to get people to spend their money on, or if your trying to build your email list, then this page is perfect for you.
I’ve named mine WTC System and I’m going to use this page to introduce our unique WTC System here at Websites Made Easy, and offer a free piece of value to my visitors. This as you know is called a lead magnet, which is an irresistible offer.
This is based on tapping into the wants and needs of your ideal customer, and giving them a solution to their problem. Something they can’t resist and in exchange give you their email address! Which you then use to always be in contact with them and get them to come back more and more, enabling you to put your product or service in front of them.
So think about what YOUR audience is looking for, and how you can solve that with something that is free and valuable that you can give away in exchange for their email address.
Let’s create this page now so we can start collecting those emails!
So you should be a pro at this now, the page I’m building looks like this on the finished website. The free piece of value is a great little guide to creating a profitable website using our signature 3 step WTC System! It’s full of goodies that takes your website to the next level.
So the page has a nice big headline Download Our Free Guide! Some text to explain what it’s about, a great image showing the free pdf they’ll receive and an email optin. Let’s get going!
Start by adding a row, then add the Editor widget. Add another row and then add the text widget to that one.
Start with the first row and the editor. In the rows settings you want to put 10 for the top/bottom padding. Now edit the widget, and you can write your content in here, I’ve got some already created so I’ll paste that in here. I want this to be centred, so I’d highlight all of this, and click the align centre button here.
Now I want the image to be just under this text, so put the cursor there and click on Add Media, select the image you want, and click Done.
You can resize it using these handles until you’ve got it just right, great.
Ok for the next row make sure it’s set to full width. Now edit the widget and you can get your contact form in here which will let you grow your email list, but this will need to be connected to a service called Mailchimp! It’s a free service which people use all over the world from small ecommerce shops to large multi million dollar businesses, it’s a fantastic service!
This video isn’t long enough to explain how to set this up properly so I’ll go ahead and add mine in, and after this video we’ll link the Mailchimp video for you to follow along with and you can go ahead and set this up! I definitely recommend doing this it will make all the difference to your success!
So I’ve created a simple contact form linked to a list just like you will in the next video.
Now you would head back to WordPress and to the page you created, and the Text widget, and all you do is paste that in here! This will put your form on the page underneath the image and content you created. Now click Done, and Update!
Click on View Page to have see how this looks!
This looks great, simple straightforward and full of value for my visitors, and the aim is they will be attracted to this free piece of value, which is aimed at their wants and needs, they’ll submit their email address, and I can always be in contact with them with my products and services.
This is just the tip of Mailchimp and there’s so much more you can do with it! We’ve got videos covering everything you can do with Mailchimp so be sure to have a look at our blog and YouTube channel to learn more and go more in depth with Mailchimp.
Ok you are basically done with your new website! It’s looking so great with the beautiful Home Page, images, and our different pages, it’s super inspiring and makes people want to keep looking around and get to know you and what your offering!
This reminds me you need to link this new page to the call to action sections we have created.
The link you need is here underneath the title. Then head to the pages you created and look for any call to action sections. Edit the widget, and paste the link in here. Then save and Update.
Your done! It’s all set up and ready to go!
Lets head back to WordPress and on to the last step where I want to show you 4 of our favourite plugins that we use ourselves that enhance the capabilities and adds even more functionality to your incredible website!
These are easy to use and understand and are extremely beneficial to your online presence and the functionality of your website.
Let’s get going with plugin number 1
Search engines consider site speed to be an important factor in search rankings. This is why you should try your best to improve site load speed to an optimal level. You can do this by making sure your images are optimised for use on the web, videos are uploaded to an online platform like YouTube.
But to optimise your whole website quickly and easily we have noticed that caching our website helped us improve site speed as well as balancing huge spikes in traffic, this is what WP Supercache will help you do! It makes it much faster to load your websites pages which search engines love, so let’s install it now!
Go to Plugins and Add New, and search for WP Supercache.
Now click on install, and then Activate!
You’ll now see a message at the top saying the plugin is disabled please go to the plugin admin page to enable caching. You now need to just click this link, and you’ll be taken to this page, and all you do is turn caching on. Update the status. And then test the plugin. That’s all good, so we’re good to go!
WP Supercache is now working for you in the background making sure your website is working at it’s optimal speed, and it’s as simple as that! Let’s now install the next plugin!
Share is one of those plugins you have to be using as it’s so powerful in growing your online presence and ultimately your business! It enables your visitors to instantly share your website, your blog posts or any of your content to their social media, friends and family! So then they might share it and they might share it and so on, it’s amazing and it’s free, so you should definitely be using it!
So head to Plugins and Add New, and search for SumoMe.
SumoMe is one big plugin that has a suite of plugins that you install, some are free and some are paid for but it is one of WordPress’s most powerful plugins!
So Install it, and then Activate it.
Now you should get a message here saying to set up SumoMe, so click that.
Now you just enter an email and a password to create your free account, and your done!
Your now in and should see this screen, and don’t worry it might look a little confusing, but all you need to look for is Social on the left, and find Share. Now click on Activate!
It’ll ask if you want to connect it to Facebook so if you do go ahead, I won’t for now. And then it’ll show you some SumoMe Pro plans and eventually you might want to do this, especially for Listbuilder which I’ll be showing you in a moment, but for now the free version is great and works fine!
Up here you’ve got some options, so in Settings you get to choose which social platforms you want to show up in Share.
You can move them around, add them in, and remove any you don’t want.
Below that you’ve got some other options, but for now just Save!
Next to Settings is Layout which lets you choose where you want Share to be placed on your website, as well as on Mobile.
Share is now ready and active, so lets check it out!
Click the cross to come out of Share, and view your website.
There it is, ready to share your beautiful website! Great work your doing well, so lets jump into the next plugin!
So now search for Yoast SEO. This amazing plugin helps your content to be found online, it tells search engines what your content is about so they can rank it higher in search results.
Search engines optimisation is incredibly important for bloggers, marketers or anyone who’s trying to grow online, and by using this little plugin your making your content more visible to people, using keywords associated with your brand, products, services based on what people search for on search engines like Google!
So now click on Install, and then Activate!
Now you’ll have a new tool in your toolbar called SEO, go to that and click on Dashboard.
Now go to General and click on Open the Configuration Wizard.
This will take you through setting up Yoast SEO on your website, so let’s do this quickly now.
Click on Configure Yoast SEO.
Is the site live, yes it is so click that, and click on Next.
What is your site type? I’ll select Blog for this one, and click on Next.
Is your website for a company or an individual person? I’ll leave this as Company and write Websites Made Easy underneath. You can also upload an image if you want to here, then click Next.
Here you can paste your social profile URL’s if you want to, I’ll leave this for now, and click Next.
Post Type Visibility can be left as it is, so just click on Next.
Do you have multiple authors for your website? Click Yes or No, and then Next.
And for this bit you are connecting your google account to Yoast SEO to gain an authorisation code, so all you do is click on Get Google Authorisation Code, sign in with your google account, and you want to copy the code Google give you, and paste it in here, and your done, then click Next.
Leave this as it is, and you can sign up for their newsletter if you’d like, then click on Next and your done!
So there you go you’ve got Yoast SEO up and running, and theres loads more you can do with this from taking a glimpse at how your pages or posts would look in search results, right from the WordPress editor and so much more.
I don’t have time to go more in depth in this video but we have an awesome video covering it all on our blog so be sure to check that out.
Making sure your SEO is working for you will make all the difference to your business, and by the way if you want to have a shop on your website sometime then this is even more important, and this theme does that incredibly well in their pro version, just look at this, its a beautiful looking store you can set up super quick to start selling merchandise.
We’ll be creating a video taking you through how to do this very soon so be sure to look out for that!
Alright we’re on to the last plugin and this one is one of the best you can use with your WordPress website. It’s a little more in depth so I can’t show you in this video but I wanted you to know about it and the possibilities to enhance your website using another one of SumoMe’s amazing plugins.
It’s called ListBuilder, and it uses a very clever little pop up window that knows exactly when someone is about to leave your website, and at that point it triggers the pop up, which has an offer they just can’t refuse because it’s something of so much value, in return for their email address! It’s just like our call to action we set up earlier, and it is a game changer when used effectively like this.
So the hundreds of people who used to visit your website, leave and generally might not come back, are now coming back all the time because now you have their email address and you can keep in constant communication with them, update them on your new products or services and get them to come back to your site over and over!
You can also fully customise Listbuilder and the popup to fit with your brand theres so much you can do with it it’s fantastic! If you haven’t been collecting emails, this is the best way to get started. As I said there’s no time in this video, but we’ve already got an amazing video all about it so go check that out on our blog!
That’s it! You’ve finished your website! How incredible does it look you should be super proud of yourself for what you’ve accomplished, it’s looking absolutely beautiful and your visitors are going to love looking around and getting to know your brand, subscribe download buy your products it’s going to be a great I’m excited for you!
I hope you’ve enjoyed watching and If you did please quickly give this video a like, and share it with your friends, and if you haven’t already subscribe to our channel for lots more videos like this!
Also let us know how you get on by leaving a comment and be sure to check out the WebsitesMadeEasy Facebook page to keep up to date with new videos which come out all the time!
Thank you and see you in the next video!