- 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.
In this video I’m going to show you how to quickly create this website, isn’t this beautiful? It draws you in right? It’s fun fresh and it’s inspiring, and just makes you want to look around more. I’ve gone through hundreds of themes because I wanted to find the perfect one to show you, one which I think has everything you need to be successful online, and I’ve chosen THIS theme to share with you, and here’s why!
Just look how beautiful it is, it speaks for itself. It’s also SO EASY to use, 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 take you step by step!
You can download our full image pack AND the exclusive demo content by clicking the button below!
Oh and it’s also SUPER cheap to get going with this, It will cost you less than your commute, who wouldn’t want to make such a great investment? Whether you’re a freelancer, blogger, small business, 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. 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.
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 your 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, a great call to action. These websites and many others use this method because it works, 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.
You’ll also be super proud of doing this and your friends and family are going to be envious of you because who wouldn’t want such an easy way of creating a website? And I totally get it this might feel a bit overwhelming or look hard, you might feel like you won’t be able to do this, but GUESS WHAT, I felt exactly the same way as you before I started working with James at WME. He’s kind of a legend in the website creation community and he showed me this UNIQUE method as well as some of his own tips and tricks to starting a website. I was blown away at how easy it was I never imagined it could be. These are game changing and I’m so thankful for what I’VE learnt and can now show you. I take huge pride in showing YOU just how easy it is to get a website up and running QUICKER than it has ever been possible! To give you a quick example let’s take this header area. To do this a few years ago would probably take hours of coding using HTML and CSS, and if anything went wrong countless more hours to fix. Now i’s nothing like that, all you have to do now to create this area is click a few buttons, and your done! It literally takes minutes to accomplish! Remember I’m going to show you every step, all you need to do is sit back, relax, and get comfortable, maybe go and grab a coffee, lemonade, maybe a snack, and just follow me step by step. It’s my job to make this as easy as possible for you so you can learn and apply what I show you and not get lost in the process. If you need to just pause the video to take notes, have a sip of coffee take a break, I’ve been exactly where you are now, so I understand it can be confusing, but if you take the time to watch and understand and follow exactly what I do, you’ll be a pro in no time!
The first step is to register a domain name and get hosting. 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. Just like moving house, your website will live somewhere and have an address, that’s the domain name right? 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 are fast, reliable, cheap and they know WordPress. We’ve even got a coupon code you can use to make this even cheaper for you!
HostGator – 08.35
So head to Hostgator.com. 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. I’m going to choose the hatchling plan for this video.
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 awakening begins for the domain.
Step 2 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 month to month for this example.
Next let’s move on to step 3. Step 3 is where you 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 let’s go to step 4, and this 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.
Ok on to step 5! Here you can enter a coupon code and we have one you can use which will reduce the cost by 50%! Just enter wordpresshero and press validate and the cost should come 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, and that’s what we’re going to do in step 2!
So Hostgator will have sent you an email so head to your emails to find this.
Here it is “Account Info” so 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 as well as do lots more stuff with your new 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. So then just log in!
At first this might look a bit overwhelming, it did for me when I first saw it, but all you need to do is find the Software and Services area, so scroll down and you’ll see it here. Then find Quick Install and click on that. Then you need to find this section on the left called Popular Installs, and click on WordPress. Then just click on Install WordPress here. Ok nearly done, all you do now is fill in 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. If you need to pause the video while you do this no problem, press play again once your done.
Once you’ve installed WordPress you’ll get a success message that it’s complete. Now click on this little arrow which has the link, and your username and password to log in to your websites dashboard, you’ll get an email with all of this in as well, here it is in my inbox, so now click the link to take you to the log in page of your website! This is basically the backend of your website, so you can log in and start creating! So we’ll log in. Boom! Your now on your websites dashboard and your the proud owner of an online website, well done for sticking with it this is huge, and the real fun is about to begin!
WordPress Dashboard – 15.33
So you should be on your WordPress dashboard, and this is where you do all your customisation to build your website. You’ll notice you have a few areas in the middle and these can be helpful in the future to give you a quick look at what’s happening with your website. Such as At a Glance will show you a quick glance of what’s happened while you were away, Quick Draft let’s you quickly write a post, or a draft for a post, it can be helpful if you have a quick idea or something you just want to write down. You can also just close these sections if you want it to look cleaner and uncluttered.
The main thing you’ll be using is this toolbar on the left which has lots of different tools, such as Posts, Media, Pages, Appearance, Plugins, and the Settings. Over the next few steps we’ll be using all of these so you will get to know them well.
Alright so we’ve installed WordPress, you’ve got your website online right now, so let’s go and have a look at it and see how it looks!
Hover your mouse over here where it says the name of your website, right click and open it up in a new tab.
Awesome! Ok it’s up and live, and I know what your thinking, it doesn’t look like much, and your right! This isn’t the theme we will be using, it’s just a default theme that is used for every fresh WordPress install! We’re going to be installing a fresh new theme now.
Adding a theme – 17.07
Let’s go back to the dashboard and you can do that by either clicking here, or on the other tab if you have 2 open. Now I want you to go to your Toolbar, and find Appearance, and then Themes, and click on that. This page shows all the themes you have downloaded. The one which is Active right now is here, see it says Active, that’s the one we just saw. So to add the new theme go to Add New here.
This page is where you can browse thousands of WordPress themes available to use, completely FREE. You can filter it by popular themes or featured. But we’ve done the hard work for you by going through many of these and I’ve found the best one to use, it’s called Sydney! I’ve worked with so many themes and this has got to be the easiest I’ve ever used, and I’ll be totally honest with you, before I knew about this theme I had bought myself a theme which was great, it was a good theme, it was also fairly easy, but that theme cost me quite a bit of money. And when I saw Sydney and how much easier this was, and what you could do with it, I was sold! I moved straight to the Sydney theme.
So anyway now all you do is search for it here, type in Sydney, and there it is.
Now all you do is click Install, and then Activate it here. All done. Easy right? You can see the Active theme is now Sydney. So guess what, let’s go check out how our website looks again, get ready 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 isn’t it just beautiful, what a difference hey? I just love this big header image, and the call to action, these really catch your attention! I hope you agree this looks better. It’s such a 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 the theme.
Plugins are basically little tools which enhance the functionality of your site and make your website really powerful, and makes your life a lot easier. You don’t need any development skills to be able to install them or use them, they are super easy! So click on begin installing plugins, then click this box, then 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 now you have all the demo content that comes with the theme and your all set to start customising it and making it your own, 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 we’ve finished creating this and we’ve added all our own content to it.
So are you ready for the next step? We are now going to start creating the website, let’s go!
Create Your Website Part 1 – 20.29
So 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. You’ll notice you have a few pages already created and this is because of the demo content, it’s created some pages for you by default. Look for the page called My Front Page, here it is. This page is your front page. If you hover over that you’ll see some options, let’s click on Edit. I just want to change the name of this page to Homepage so when we have it in our menu, for example here, you can see Home looks a lot better, than My Front Page! So now click on Update and your done!
Customising Website – 21.27
Now we need to set our website to show this whole page when people visit, so we need to 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 we have options for the Title, Tagline, and Logo, Header Area, options for a Blog, the Fonts used in the website, Colours, as well as lots more. 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 Homepage we were just on, and then 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 is Incognito. So it doesn’t have any cached settings that might have been saved when you previously visited your website.
As you can see it’s showing a coming soon page and that’s because WordPress has that on by default. So we can’t actually see the website right now. We can easily turn this off though.
On your Dashboard you may have seen this message “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.
When you do this your website will go live so it’s up to you if you want to do this now or later, but doing this will give you that option to open your website in a private window to see how it looks.
If you just use a normal window wordpress keeps you logged in, so your not actually seeing the website with the changes, sometimes WordPress doesn’t update, that’s why the other way is better.
So now we’ve got our homepage set, let’s refresh this page and see how the website looks.
Great so we’ve got the header and all the content set now, and we can completely customise all of these areas. Each one is a different section and you can remove it, add another one, move them up or down, change colours and much more! We’ll get into all that fun in a moment but first I want to show you how to change this header area to how you want, with your own images for the slider and the call to action.
From the Dashboard go to Appearance, and then Customise.
Customising Header and Slider – 24.05
Ok so now Click on Header Area, 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 header.
Next click on Header Slider. So here it gives you options to change the slider speed and text slider speed, I’m going to change this to 5000 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. I want to use my own image and all you need to do is click on Change Image, and your media browser will appear which contains all the images you already have. You can also upload your own images by clicking Upload here, or choose from the images already in your Media Browser. I’ll click Upload, and then select files, choose the image I want to use, and select that. Yea that looks amazing! See how easy that was? This theme automatically scales your images to the right size, no hassle no stress, it just 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 Awakening, and the subtitle, Set Your Website Apart.
That looks awesome. Ok I’m going to change the other image now, so again I just click on change image, upload, select the image I want, submit that. Change the the title and subtitle for this slider. Looking great. Feel free to add more images if you want to, you can add up to 5. Now scroll down to Call To Action Button, and this is the button on the header here. So you can add a url that you want people to be taken to if they click the button, this could be on another page of the website. And the text for the button here. I’m going to change this to Click To Begin. So for the url this can be anything, we haven’t got any other pages set up yet so I’ll show you how to do this in a moment when we set up our other pages. You can leave it as it is if you want, right now when someone clicks it, it scrolls down to the section below it so that’s pretty cool if your going to have a call to action section here, it’s a nice little feature.
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.
Ok so the url here is the pages address, this is what you would copy and paste into the button url, and this applies to any page on your site. It’s as simple as that, so now you know how to link pages!
Ok head back to the customiser by going to Appearance and Customise.
Page Header Image and Menu Style – 27.27
The next area is the Header Image, and we aren’t going to use this because we’ve 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 I wanted to show you it anyway in case you wanted to change it.
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.
The inline and centered options refer to where your actual menu appears. Inline for example looks like this, and centered means it will appear in the centre. These options apply to your menu and your logo. So if I click it now you’ll see the title and tagline, which is where the logo would be, are on top, and the menu is below that. I’m going to choose Inline for this site but you can choose whichever one you want. Now Save, and then click the back button.
Customise Area Settings – 28.36
The next area I’m going to is the Colours, and I want to change the Primary colour which is this one here, at the moment it’s a red, and this applies to the button colour as well as a few other things that will show up when we start adding our sections, so if we take a look at the finished website you can see a few other areas that use this primary colour, and when you hover over elements like buttons and some images as well. I’m going to use a nice fresh blue colour which will go better with the images I used for the header. 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 choose from millions of different colours using this colour wheel. If you want to use the same blue 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 see this code? Click that and delete it, and then type in #6b97bf.
That will apply the nice blue to your website. A great little tool to use for looking at colours and getting an idea of what you like, head to colours.neilorangepeel.com which shows you beautiful colours full screen so you can really see what goes with what, it’s just easier than using the colour wheel, and these colours are professionally picked out already, so if you need some inspiration try that. Feel free to experiment with the other colours if you’d like, but I’d recommend for now following along and staying with me while we create the website. You can always come back later if you want to.
Now save and publish. We’re 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 we’ll be getting into adding and customising those sections to our website which is going to be so fun, you’ll see it all come together in front of your eyes! The first time I did this it was so fun because it’s amazing how easy it is, and just the opportunities you have to make the website your own, it looks amazing too, it makes you look and feel like a pro haha!
WordPress Settings – 30.46
Just before that though I want to show you a few important things in the Settings tab that you need to know about so your website is optimised. So on the toolbar find Settings, and go to General.
Ok I wanted to show you that you can change your site title and tagline here as well, more importantly though you should never change these settings, if you do your whole website would be affected and not function properly. If you ever need help with this get in contact with Hostgator and they can sort it out quickly for you.
You can also change your time zone, and date format here too, and your preferred language. Remember to save if you make any changes.
Next is Permalinks. And 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! Ok 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 now the real fun begins or transforming and building your website!
Logo – 32.24
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! It’s called Logomakr.com. It’s super simple to use so you can play around with this, but all you really do once your there, click Next, Next, and Done. And this whole area here is where you can make your logo. At the top you can search from thousands of elements to use, for example I’ll do a quick search, and press enter. There you go I get literally hundreds of different images that I can look through. Some of these are already done as well.
All you do now is double click on one you like and it’s placed in the work area. You can change the colour using the colour wheel here, as well as add other shapes which can completely change the look. You need to make it smaller so it fits in the header nicely and you can do that by clicking and dragging these handles to make it smaller, you want it to be 50px by 50px. I’m going to make this logo white because this will really pop and stand out on the header area. It looks like it disappeared but it’s just because the background is white as well, the logo is still there.
When your happy with it click on Save at the top here and it will be saved to your downloads. Notice that if you use a logo you need to give credit to the author so be sure to do that somewhere on your website.
If you want a custom logo created I recommend looking at Upwork.com where you an hire someone to design your own personal logo for you. This is a great service and it’s well worth doing if you want to have your own logo done, for now though let’s continue with doing the website!
So lets go back to the Dashboard, and head to Appearance and Customise. Find Site Title Tagline and Logo,
And we’re going to upload the image we just downloaded, so 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. I’m actually not going to use a logo for this website, so I’ll remove it. But now you know that you can use a logo, and how to upload one.
Site title and tagline – 35.18
But what if I didn’t want the site title and tagline either? There isn’t anything in settings to remove that, it’s just stuck there, which is NOT what we want. Don’t worry though I have a solution for you! This is only going to take you a minute or two to do so it’s super quick. Save any changes you’ve made, then go back to your dashboard by clicking the cross. Now we are actually going to install a nifty little plugin which allows us to have complete freedom over the look and feel of our website, it allows us to use what is called CSS to change the style of the site. I’ll show you exactly what to do so don’t worry about this at all, just follow along with me.
Head to Plugins on the toolbar and Add New. Now search for Simple Custom CSS, and it’s this one. Now click on Install, and then Activate that bad boy!
Awesome so now we have that plugin, you can find it in your toolbar here. Go to that, and select Add Custom CSS.
So now you should see this page, and it probably looks confusing and a bit weird, and to be honest with you I felt exactly like you when I saw this the first time, but you won’t be using this much at all, and if you do I’ll be guiding you every step and showing you exactly what to do so you won’t be lost. It’s actually pretty simple.
Just ignore everything here, and put your cursor below it, at line number 12, here.
When you’ve done it it should look like that. Make sure you’ve got that written correctly with the right brackets and everything, and look out you haven’t done any spaces where their shouldn’t be. 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 and see me doing it.
When your done click on Publish at the top here. Let’s go and check how that looks!
Great that is looking so much better and cleaner!
Ok we’ve just done our header area, now let’s jump into Step 5 and start creating the different sections of the website, add our social media buttons, and the first two pages, the About Page and the Contact page!
Our Services, Creating the Services – 38.22
On the website the area we’ll be creating first is the Our Services section which is here.
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.
Ok so 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 if we go to services now and all services, you’ll see you have a few already created by default, that’s the demo content we uploaded earlier. So let’s add our own services. What I want you to do is delete these default services because we don’t need these, we’re going to create our own.
Now go to Add New. All you do is add a Title for the service here, so I’ll add in Create a Profitable Website, and the description you want in this area.
Now when your ready scroll down to the Service Icon, here. and this let’s you add a icon for your service, using an ID. All you have to 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, 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.
So all you do is click on Add New Category, give it a name, I’ll just name mine Our 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 the next 2 services for the services section, so I’ll go add a title, description, the icon, make sure the category we just created is selected, and publish. Do the same create the rest of your services and add your category and I’ll see you in a moment!
Hey ok 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. Also if you have services from the default demo content you should remove those so they don’t interfere with the services you’ve just created.
Pagebuilder – 42.06
Great let’s now go and look at our websites sections in our Home page.
Head to Pages, and All Pages. Then find Home and click on Edit.
This is our Homepage and this is where we add all the sections to our website, using the PageBuilder plugin that came with Sydney. Like we saw before, the Our Services, Call To Action, Our Work and so on, are all here, so the Our Services section for example is here. The Call To Action is below that. And if we look at the website, it’s here, so I just want you to see how it all looks so you have an understanding and you can picture how it will look when your creating it. So you see the website is made up of different rectangle sections, they’re layered one on top of the other, just like in the PageBuilder here. If I move one of these sections up or down, and Update the page. The section has moved.
So now I’m going to show you how to create the website that we’ve been looking at, with the services area, call to action and so on, because it’s a beautiful layout and it has everything you need, plus it’s SIMPLE to do and super effective! You don’t want a website to be too cluttered because visitors might get lost, or annoyed they can’t find what they’re after, and then most likely they’ll leave. So you want to keep it as simple as you can with enough to keep everyone happy and the website working for you.
So notice that each section here, is made up of a row, with widgets inside that row. To create a new section, you’d first add a row here, and then add the widget you want inside that row. Rows can also be split into multiple sections so you can have more than one widget or element inside it. So this is really powerful and flexible.
So now I’m going to remove the sections that I don’t want to use, and to do that I’d find one, hover over the spanner above the row, and select delete, then it asks if your sure so you click to confirm. I’ll do that for all the sections I don’t want and I recommend you follow along with what I’m doing so things don’t get confusing later on. You can always add these back in when your ready if you’d like to.
Editing sections – 44.34
Ok now you should be left with the ones that you want to use, so let’s start editing them! We’ll start with Our Services. So remember I said sections are made up of widgets inside rows? Well to edit the widget you’d hover over the widget inside the row, and click on Edit. The spanner HERE is only to edit the row itself. So what we’re going to do is completely delete this row and the widget inside, and then I’ll show you how to create it again so then you’ll know the steps you need to do in the future to add any type of section you want.
So hover over the spanner, and delete.
So first we’ll create a row to have our widget in, click on Add Row, and then change this to 1, to set this row as a 1 column row, and click on Insert. When you add a row it might be placed somewhere you don’t want it so just click here to move it into place.
Now click on the row to highlight it, and then Add Widget. Now click on Sydney Theme Widgets on the left, and your looking for the Services Type A widget which is here. Click that to insert it. There you go!
So to edit the widget hover over it and click Edit.
So first you want to enter a title, so I’ll put Our Services. 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.
Then click done, and Update!
CTA – 46.41
So 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 – it’s literally, a “call” to take an “action”. 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, you should have a call to action section already there, so you just need to click on edit in the widget. Now you want to enter your call to action here.
The link you want people to be taken to here, and the text for the button here. I’ll be setting up a page a bit later that I’ll link with this call to action button so when someone clicks this they’ll be taken to this page, and then enter their email for the valuable free content. I’ll show you how to do this a bit later when I set this page up.
Also make sure this is ticked so the button is aligned with the text.
Now click Done and Update!
Let’s check out how our website looks now we’ve got those two sections done! I’ll refresh the page.
Header is looking great, scroll down, awesome there’s my services, and below that my call to action! 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!
I’m going to show you a bonus feature with this call to action which will make it look amazing!
We’re going to add an image to it which moves as someone scrolls down. So head back to your page builder and find the call to action widget.
We’ll be adding the image to the row, so we need to click on edit row and once there click on
design, and find background image. Then select image.
You can use one of your images here, or upload one. I’m going to use one of these for this example, so I’ll choose this one. Then you 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 you just need to change the colour of the call to action writing so it’s lighter. I want you to click on edit for the widget, click design and find headings colour, and change that to a white.
Then click Done, and then Update! Let’s check out the website!
So refresh the page again. Scroll down, there’s the services, and there’s your call to action. 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 really gives your website depth.
Padding – 50.06
So you might have noticed that In between each section there’s space, right? And we call that padding. It’s important to get the padding right in between sections so they all fit together nicely. We can edit the padding by hovering over the Spanner here, clicking Edit, and then you click Layout, then Top/Bottom padding. For this call to action section I’ll put 30 here, and notice it says default is 100px, we are reducing the padding by entering in 30, we’re making it smaller, so it’s closer to the other widget. Now scroll down to Row Layout and change that to Full Width. Now click done, and Update that.
Now you might not see a difference straight away if the theme was already set up with the padding as 30. But if you changed it you should see how different it looks to how it was before. Because the padding has been made smaller the sections fit together nicely and website flows from one section to the other better.
Portfolio Our Work Section – 51.09
Ok looking great, let’s move on to the next section, which is the Our Work section.
So find that in the PageBuilder, the widget is called Portfolio. To add images to this widget we’ll need to create projects, and some more categories to keep those projects in. 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! This is great for a portfolio, showing off your work, services, products, there are all kinds of uses this could have its great.
Projects – 51.52
We’ll start by creating the projects, which is the individual images. So find Projects in the toolbar, and click on All Projects. You’ll probably have a few already in there, click on edit on any one of them to see how it’s done.
All you do is add a title, a featured image, add the category you want that image to be in, and if you want the image to link to another page you can add that in here. If you leave It blank it will link to it’s own default page which you could then have something about each image, giving more information, a description about the work or the project, or anything your showing here.
As I said I’ll be linking each image to a page, so I will be adding a link here but not yet. You can also choose whether you want people to be able to comment on your images as well by allowing it or not here.
Alright let’s go back to Projects and All Projects. Now let’s delete all of these default demo projects so we can create our own. Just select them all by clicking here, then move to trash, and Apply.
So this is basically just like we did with the services area, you create a service for each service you want displayed ok, so each project is an image you want displayed.
Now click on Add New Project. Let’s create our first project!
So we need to add a title. Scroll down and add your image by clicking on Featured image and then choosing the image you want to use, or upload one.
I’m going to upload a new image to use so I’ll click on select files and find the image I want to use. Select it. And you want to be sure your image is 700 x 467 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. You want each image to be this size so when all your images are uploaded and in the widget, they all fit together nicely.
So when your done select your image and click on Set Featured Image.
Then create the category for this image. Each category will have a few projects and you want visitors to understand them, so keep that in mind when naming your categories.
I’ll add the link in later, and I’ll disable commenting on these images.
That couldn’t be easier, so I’m going to create the rest of my projects and categories, so do the same and I’ll see you in a moment!
Portfolio Widget – 54.40
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 Pages and All Pages. Then Home and Edit. Find the Our Work widget, edit that.
You’ll notice it has the default categories listed here, so remove those, and add in the categories you want to use, write them in one by one, entering a comma after each one, so they look like this. Change the title if you want, 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 or all your images. Now click on Layout, and then put in 70 for the top padding, make sure the others are 0. Click Done. Now click on the spanner for the row, edit, and then layout, and put 0 for the top and bottom padding, and then change the row layout to full width stretched, and click done, now update!
Client Widget – 56.00
Let’s get straight to the next section, which is a nice little area to show the clients you’ve worked with, this is great to build trust and expertise with your audience.
This is just like our services, you create a client in the clients toolbar on the left. So go there now and click on All Clients.
So you’ll have 5 clients by default, and you can just edit these. So click on edit underneath client 1.
All you have to do is change the title to a real 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. Then click on Update! Do this for all your clients and your set. I’ll just leave these as they are for this example but you should know how to edit those now.
We need to check to make sure the widget is set up properly, so go to Pages and All Pages, and click on edit for the widget. Now click on Layout, and change the top and bottom padding to 50, making sure the others are at 0. Now click the spanner for the row, then layout, and change the padding there to 20. And check that is says Full Width for the row layout.
Testimonials – 57.22
Ok 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 trust and expertise with your audience. if people see others have enjoyed what your offering already they are much more likely to buy from you.
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. Edit one of these, and you’ll see all you need to do is add in a name, the testimonial itself, and an image. You can also add the persons company name or their role here. Click Update and your done! Easy right? So pause the video and create a few testimonials to go with the widget.
Great so now all we need to do is make sure the widget is set up correctly, so back to pages and all pages, then home and edit.
So click edit on the widget, make sure the title is ok, 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. Great now click on the spanner for the row, click design, and scroll down.
You might have noticed we have a nice background image for this testimonials section, so I’m going to show you how you can change that if you want to and you can do that here. Just click on select image and choose the image you want to use, or upload your own.
Now go to Layout, and make sure again the Row Layout is set to Full Width.
We just need to change the colour of the title for the section, so edit the widget again, and click on design, scroll down, and find headings colour. You should change this to a white so it looks great with the background image.
Now click done and update!
So we’ve now added most of the sections to the Homepage on our website, we just have one more to do which is our social media buttons! These are game changing, and we’ll cover these in the next step, step 5, where we will also be adding the About page, Blog page, Contact Us page, and an optional extra page which is a bonus! Just before we go to step 5 let’s create a Menu at the top so when we have our other pages it’s easy for people to go to other areas of the website.
Menu – 59.55
So now go to Appearance and Menus. You want to make sure Menu 1 is selected up here, and then click on select.
Ok on the left you have all your websites pages, and on the right is the menu structure that will appear at the top of your website. All you do is drag and drop pages that you want into the menu, and remove the ones you don’t want by dragging them out. Then click on Save Menu, easy! So do this now set up your menu with Home as that’s all we have right now until we add the other pages a bit later. Then save the menu.
Now let’s add our new menu to the website. Head to Appearance and Customise.
You’ll find menus on the left, then Menu 1, and under Menu Locations set it 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 the start, to the homepage. 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 back, so you wouldn’t need the Home menu item if you had that, but whichever one you have works fine.
You can add Pages from here as well by clicking on Add Items and then Pages. When you’ve finished doing the website and you’ve got posts up or other things on your website you can add these to your menu as well!
Video – 1.1.43
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’ super flexible and it’s a nice way to inspire your visitors, motivate them. Using video is powerful and adds another layer to your website.
So it’s easy, in the PageBuilder add a row, and then you want to add a widget, and your looking for the Sydney Video widget, click to insert that. All you do is find your video on YouTube or Vimeo, so this is ours here and you want to click on Share below it. And you want to copy this link here so copy that, and then edit the widget and paste it here. Let’s see how that looks!
Ok great you can see it’s embedded the video there, but the background is just white, I want to make this much nicer with a photo. So head to the Row, and click on edit, then Design, and find background Image, click on select image. Then find the image you want to use and select it. Then Update!
Ok one last thing to do is to make this row Full Width because as you can see it isn’t right now. So go back to the Row and edit it, Click on Layout, and find Row Layout, and set it to Full Width! Update again and let’s have a look.
That’s much better! Doesn’t that look great! I’m going to move the Row above it up and have the clients widget above this one so it looks better in between these sections here. So I’m going to move this one down so it’s above the video. And Update. Yes that is much better!
Ok let’s jump into the next section which is our social media buttons!
Social Media Buttons – 1.04.06
The next area to add is our social media buttons, which are here at the bottom of the website. These look so good don’t they? Visitors can just click on these and easily visit our social media pages and get involved in our community. This is a great way to build authority, build your followers. Plus again these are so easy to do like everything on this theme! You’ll see you’ve got a section here about Social Media Profile, this is the wrong one to use, I’ll show you a much better one to use. So to start hover over this section and delete it.
Before we add these buttons we need to add some extra widgets so we can use them on our site
so head to Plugins and Add New, then search for Site Origin Widgets Bundle, and Install that and then activate it! You’ll then find SiteOrigin Widgets in the Plugins toolbar, so go there and you can activate all these extra widgets here! Make sure they are all activated, there are some great widgets here that you can use!
Ok when your done head back to pages, all pages, and Home. Now we’ll add the social media button widget, so highlight the row, click on add widget, and we’re looking for the SiteOrigin Social Media Buttons widget. Here it is so click that and it will be added to the row. And I’ll move this section down into place under the Video.
Now click on edit over the widget. We’ve got two sections, Networks, and Design and Layout. Start by adding your different social media links by clicking on Add below Networks, Select Network, and then click on Select Network to choose the social media you want to add. I’ll start by adding Facebook. Notice it automatically adds in a link to Facebook and adds the colours, how great is that? You’ll want to change the url to your own Facebook page so make sure you do that. Your Facebook page url can be found in the address bar when your on your page, for example websites made easy Facebook page is here, if I look at the address bar, here’s the link I need. Now just copy this, and paste it in here, and your done!
I’ll add the rest of the social media links just like we did with this one. So pause the video if you need to and add yours and I’ll see you in a moment.
Ok awesome we have all our social media pages linked now. Next click on Design and Layout and here you can customise how the buttons look, so here I’ve made them a flat theme with low padding, and I’ve aligned them in the Centre. I didn’t change anything else. This gives the buttons a really nice modern simple look, these work well, they are noticeable but aren’t intrusive or in your face. Feel free to copy these settings for your own buttons. Click on Done when your finished!
When your done click on Update, and we’ll now check out how our website looks! So if I scroll down I see all of the other sections, and here are the buttons we just added, these look great! I want to change this rows background colour to match the rest of the website, so I’ll go back to the row and edit that, then find background colour, and I’m looking for the colour which is #1c1c1c, and that should be around, here. You can find it that way or you can type in #1c1c1c in here. Ok now Update and have another look! Great that is much better, that colour makes the buttons really pop!
When I click them they take me to the appropriate social media! This is truly game changing because now you can carry on the conversation with your audience, they can engage with you and each other, the community grows and ultimately your business grows even bigger!
Ok guys we’ve just finished the Homepage which is the main page of our website and it’s looking fantastic, you should feel really proud of what you’ve accomplished!
One last thing I noticed is that this header text is a little small, so let’s make this bigger to quickly catch peoples attention as soon as they land on your page. Just go to the little plugin we installed earlier which is the CSS Plugin here, and Add Custom CSS.
Then click on Publish and your done! refresh the page, and this is much better! If you want it bigger or smaller all you do is change this number here.
We’ve just got to quickly do our About Page, Our Blog Page, and our Contact Us page and our website will be complete! By the way every image you see here is ready for you to use in your own website! We’ve made it as easy for you as possible so you can just plug and play these images, use them straight out of the box, they’re ready to go!
You can download our full image pack AND the exclusive demo content by clicking the button below!
About Us Page – 1.10.51
Ok so let’s get going, first we’ll head to Pages and Add New. I’ll start by adding the About Us page first. 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, so let’s now create the Contact Us page.
All you do is click on Add New to create another page, again give it a title so this time I’ll write Contact, and change the template again to Front Page, and click on Publish.
Great now we’ve got those two pages I’ll show you how to add everything to them just like they are in this finished website.
It’s the same as we did with the Homepage, using rows and widgets to create the sections on the page.
So from Pages, and All Pages, let’s remove the pages we don’t want which may have come with the theme. You obviously want to keep the ones you just created.
Ok great so now click on Edit underneath About Us.
If we look at the completed website, and the About Us page, here we can see it has a headline About Us, an image with text on the right, and a video below that. It’s also got the social media buttons at the bottom again as well, so maybe you know how this will look in PageBuilder already, let’s go and check it out.
So now click on edit underneath about us, we’ll start with the headline, and you might need to click on PageBuilder here to be able to use the PageBuilder editor. First add a row, and then add a widget, and we’re looking for the SiteOrigin Editor which is kind of like the page editor in WordPress, basically a text editor with some nifty tools. So add that.
Write your title here, this will give the page a nice headline, About Us.
Next in the main area we want to add an image and some text. I’ll copy the text from the website I created earlier to save time, and paste it in here. To add the image you want to place your cursor to the left of the text, so the image will be placed there, then click on Add Media, find the image you want to use, and select that.
You can now click the image to bring up a few alignment options. Align left, middle, or right, and you can edit the image by clicking the pencil icon and this lets you change the size which can be useful if it’s too big or too small. So once you’ve added your image and aligned it, click on Done. Now edit the row by hovering over the spanner, and clicking Edit, and then theme, and write 50 for the padding, then Click Done, and Update. Let’s go and see how this looks. If it’s not right the first time just go back and change it until it looks right, it can be a little fiddly sometimes to get everything in the right place, and the padding to fit together.
Now you’ll notice your new page won’t be in the menu at the top yet, that’s because we haven’t added it yet, so go to Appearance and Menus, then select the new About Us page, and click Add To Menu, then Save!
You can select Automatically Add New Top Level Pages if you’d like, but you might get pages in here that you don’t want, so it’s better to come here and manually add them in.
Ok that’s all looking good! Once that’s done we need to create a section for the video, so to get that bad boy in there we need a row, and then add the Text widget, which is here. First thing edit the row, and put 30 for the padding. Then edit the widget, click on Layout, and put 50 for Bottom, make sure the others are at 0.
Ok so this text widget will allow us to embed a video from YouTube. So if you have a video head to YouTube and find it. To link it to your website you just need to click on Share, and Embed. You want to copy this code here, and paste it in the main area of the widget, here. Click done. and Update.
Ok last bit, now we want the social media buttons at the bottom. Do you remember how to do it? First add a row, find the SiteOrigin Social Media Buttons widget, then edit it and add in all your social media links. Remember for how the buttons look, I have the button theme at Flat, Padding as Low and Alignment Centre. Edit the row and set the padding to 30.
Awesome click done when your ready, then Update it!
Let’s go and check out how the About Us page looks now.
So I’m on the homepage, click on About Us and here it is, this is looking great! This is an inspiring page our audience can come to to learn more about us and what we do. Your About Us page should really know how to talk to your audience. Your message should begin by understanding the audience it’s intended for. You need to be able to tell them what they want and need to hear in a way that will resonate with them. Tell people the name of your business, who you and who your team are. Use this 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?
Contact Page – 1.16.50
Ok let’s now do our Contact page! If we have a look at how it’s put together on the completed website, it’s simple, we can see a headline, so we’ll need a text widget, we’ve got text and an image so we’ll use the Editor widget, and for the contact form we’ll use an in built plugin that comes with the theme! And lastly we’ve got our social media buttons again.
Just before we get into the Contact Page you need to know about email lists. An email list is a super powerful technique to being successful online that a lot of people don’t actually know about or understand, so they don’t bother using them. This is a big mistake because having an email list will set you apart from everyone else, it will enable you to bring people back to your website time and time again, keep your products or services in front of them. So instead of just hoping people will visit your website you can make sure they do by using your list that runs itself and keeps people coming back, it’s a game changer! I’ll show you how to do this next so once you’ve watched this video and your website is up and running that will be your next step! You’ll find the link to it in the description!
Ok Back to the contact page.
Make sure your in the Contact Us page that we created, and you might need to click on PageBuilder here to bring that up. Now add a row first, and then click add widget. Then add the text widget and we’ll write the headline here. And then set the widgets top padding to 40, with the rest at 0. Also edit the row by clicking the spanner, and set the padding to 20.
Now add another row, this time though we’ll make this row 2 columns by clicking these arrows here, you can also adjust how big each column is by dragging here so you could have the left side bigger if you wanted, or you can click and type in a number here, and it will adjust accordingly.
In the first column we’ll add 2 widgets, the first one is going to be the SiteOrigin Editor, so we’ll add that now. Then duplicate that widget by hovering over it and clicking duplicate. Then drag that second widget to the right side. Now on the left side of this row we’ll add another widget which is going to be the SiteOrigin Contact Form, which is here. Edit this rows padding and set it at 20. Next edit the left SiteOrigin Editor and set the bottom padding at 14, with the rest at 0. Next edit the contact form widget and make sure the top padding is at 9, and the others are at 0.
Alright all done with those. Next add one more row for the social media buttons, and add that widget in. Give the rows padding 20.
Ok for the title I’m just going to put Contact Us.
And for these widgets we can see we have an image on the right, a contact form on the left, and some text above that with our email and phone number. So let’s get that done!
I’ll paste in the writing I already have in this first editor. And I can make the email, phone and so on bold. You can also make the email a clickable link so it’s easier for people to quickly email you. You just highlight the email address, then click on this button to make it a clickable link, easy!
I’ll then add in the image into the other editor on the right, So I’ll click on Edit, and then click on Add Media, and select the image I want. Play around with this to get the right sized image, you can click and drag the handles to resize it, as well as align it using these buttons. Once you’ve got it the right size click Done.
For the contact form widget it’s actually pretty simple. Click on Edit and you’ll see you have different fields, such as name, email, message and so on. You can add or remove fields if you want to, in this form I’ll keep it as Name, Email, and Message. You’ve got some settings and you can customise the design of the form if you like but I’ll leave it as it is for now, it’s important to just get our website up and running first.
So once your done with those, click on Update, and remember you need to add this new page to your menu at the top, so again go to Appearance and Menus, then add this new page in. Remember to do this for your future pages! Now Save.
Let’s go check out our new contact page!
Awesome this is looking great now people can easily get in contact with you!
Using contact forms is a really great way to build an email list, which 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!
Blog and Pages – 1.22.03
From here all you have to do is click on Add New at the top, and give the page a title, so Blog. And we don’t need to change the template for the blog page. And then click Publish. Now we need to tell our website that any posts we write, we want them to appear on our Blog page. So we’ll do that now, head to Appearance and Customise. Find Static Front Page, and then Posts Page. Change this to your Blog page. Then Save and Publish. If we have a look at our website now, and click on Blog. The blog page is set up and working, but unless you have posts it won’t be showing anything, you may have some show up because of the demo content. So the next step with this is to head to Posts and I’ll show you exactly how to create a new post for your blog!
So do that now head to Posts and All Posts. You might have a few posts already written, and if you do you can select them and trash them. To create a new post all you do is click Add New here. Now you add your blog post title, for this example I’ll make a post about the difference between posts and pages, and I’ll name it, WordPress Posts v Pages, what’s the difference?
You’ll see you’ve got all these tools to use to create your post here. Click this button to expand the toolbar which gives you extra tools. you can add different sized headings, links, bullet points, you can add media such as photos, as well as videos, so use all of these to create your post. I’ve already got some content to use so I’m going to paste that in here.
You’ve got different formats here as well, image formats, video, links. I’d just stick to the standard format for now though as this works great.
Make sure to create some categories for different posts. This makes it much easier for your visitors to find all your other posts related to the one their reading, so they are much more likely to find and look at your other content. Also use tags, this is another way to create interest in your other content, then someone can click the tag which will bring other posts up with the same tag. The last thing to do is add a featured image to your blog post, so click on featured image, either choose one you’ve already got or upload an image, and select it. Now click Publish!
Again just pause the video while you create your post if you need to, and press play when your ready.
Fantastic this is your first blog post, congratulations! Now click Publish!
Let’s go check out our new post.
Awesome there it is! This looks great. Right now we’ve got this styled in a classic way with a big image. If we head to Appearance and Customise and find the Blog section, we can change how our 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 will be easier to see them, it’s up to you how you want it to look.
In the settings I’m going to change one other thing and that’s the Excerpt Length, to about 30. Save and Publish. And that will reduce the amount of the post being shown below, here.
I’m now going to add 2 more posts just to show you how it looks all together, feel free to do the same or do this after the video.
Ok great my posts are done, 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. So having a blog doesn’t need to be complicated at all, you just create your posts and they automatically get added onto your blog page for your audience to enjoy. Simple! Like I said 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. So be sure to regularly create new posts maybe start with one a week and go from there. Just remember to be consistent, that way your audience will know that your creating fresh content and will be eager to come back to see what new stuff you’ve got!
Training Page – 1.28.15
So that takes us to the bonus page! 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. So head to Pages and Add New. Now give your page a title, this time I’m going to create a Training page, I’ll give it the same template, front page, and Publish it. I created 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 the other pages up. Just so you 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. It’s giving them a valuable free piece of content, in exchange for their email address.
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 is going to do this for them. 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, so you always have a way to get your product or service in front of them.
And your lead magnet can be anything – you might choose a video series, a guide on the best activities in your city, a 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 does depend on what you do and what you’re selling. As long as you’re giving people a solution to help fix a problem, you’ll make it easy for people to say yes to wanting to download your lead magnet.
I’ve named mine Training and I’m going to use this page to offer a free piece of value to my visitors. As I said earlier I’m linking this page to our Call To Action, so people are taken here when they click the button. Let’s create the page and I’ll show you how to do that.
So head to Pages and Add New. Give this page a name, I’m going to name it Training. set the template to Front Page, and Publish it! Make sure your in PageBuilder by clicking here.
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 10X Toolbox full of goodies that takes your website to the next level. So the page has a title, some text, an email optin, and an image. This set up is just like the contact page so we’ve done it before it’s pretty simple, let’s get going.
So start by adding a row, and then add the text widget. Let’s add our title to the widget, so I’ll put WME 10X Toolbox. In the row settings I’m going to put 5 for the padding. For the widget settings put 70 for the top padding, and 0 for the rest.
Ok add the next row, and make this one 2 columns. Add the SiteOrigin Editor, duplicate it, and put the other one on the right side. Now add the SiteOrigin Contact Form to the left column, underneath the Editor. Edit this row and put 50 for the padding. Then for the first Editor, put 15 for the top, and 25 for the bottom, make sure the others are at 0.
For the other editor put 25 for the right padding. Next for the contact form put 50 for the bottom, 0 for the others.
Ok awesome. I’m going to paste in some writing I’ve already got in this editor. This is where your description will be so think about what valuable piece of content you will offer and write a catchy description here. When your done move on to the other editor, and add an image by clicking on Add Media, and selecting the image you want to use. Then change the size until your happy with it. Perfect. For the contact form I’m going to remove all but the email field, so someone only has to enter their email to receive their download, then it will be emailed to them. Ok next we need to add our social media buttons!
So as before i just select the network I want, so Facebook, Twitter and so on, and remember to add in your links in here. Again for the styling I made the buttons Flat, low padding, and I centred them.
Now Update, and let’s have a look at the new page!
Fantastic this is awesome, so anyone now can come here enter their email. Ok now we’ve got the page done let’s link it to the call to action. So at the top of your page you just created you’ll see the link you need, so copy that, and head to Pages and All Pages, then Edit under Home. Then find your call to action, and edit the widget. You just need to paste the link in here. Then Update!
I’ll make sure this works, so here’s my call to action, I’ll click on the button, and perfect it takes me to the training page!
This is the first step to building your email list so well done, this is super powerful in creating a profitable online business. The next step to this is to create a list to keep all those emails in. We use MailChimp which is completely free and really easy to use. After you’ve watched this video complete your journey by quickly setting up with Mailchimp so you can capture those emails, it’s the crucial next step and I’ll make sure it’s linked in the description for you!
Ok are you ready for the final step, you’ve gotten this far and by the way that’s a great achievement, congratulations! Let’s finish by installing some of our favourite plugins to take you to the next level!
So as I mentioned I want to show you some plugins that we use ourselves on our own websites which are game changing, anyone serious about having the best website that works well, drives traffic, engages your audience, needs these plugins. Remember a plugin is just a little tool that you add on to your website to enhance it’s functionality, nothing difficult at all to start using them either, you install them in a couple of clicks and they enable you to do all kinds of things from having buttons which when pressed instantly shares your website or content to other peoples social media so their friends see it and share it. There’s a plugin which keeps your website organised and running fast, and one which optimises your SEO so your website ranks higher in Google. These plugins are must haves for anyone and I definitely recommend using these, so let’s jump in and start using them.
I’ll start with a plugin called Share, by AppSumo, and this plugin let’s anyone visiting your site and reading your content share it to their social media. This is huge because when your content gets shared it means everyone they know will see it, and so on.
So head to Plugins and Add New. Then search for SumoMe.
SumoMe holds some of the best plugins available and it lets you install Share. Here it is, so now Install it, and once that’s done, Activate it!
Ok awesome, now you’ll see a message on the right saying Setup SumoMe, so go over to this little button, click the crown, and then enter a good email address and a password to register. This is completely free!
Great you should now see all of these plugins by SumoMe, and we’re looking for Share, so find that and click it to turn it ON and install it!
Then click it again to go to the plugin, and click to continue with the Free version! You’ll then be in the plugin and ready to start using it, so from here you’ve got a toolbar on the left which you can use to customise Share to how you want it, I’ll go over a few areas that you need t know about to make the most out of this plugin and get it working successfully!
Start by going to Layout, and these rectangle boxes here, are examples of where you can place your Share buttons, so it could be at the sides, at the top, bottom, right side, and also on phones either at the top or bottom, so this is great because you can optimise where on your website people browse most and you can have your buttons placed there. Ok next go to Settings. And this is where you select which services you want to use in your Share plugin. This side has the buttons currently being used, and the left side are buttons which are available. You can change the layout of the buttons by dragging them up or down, and you can add them in, but clicking and dragging from the available services, to the ones being used like this. If you don’t want to use one, just drag it out of this list.
You’ve also got some settings here such as how many buttons you want to show, the background colour of the share plugin, the size of the buttons in your plugin, what shape you want the buttons to be, and all this helps customise the look of Share and optimise it for your website and audience. Remember to Save when you’ve finished. You can see all your shares by clicking on Clicks here which will show you a graph of how many clicks you’ve had.
Ok that’s Share all setup and working for you. You can just let it do it’s thing! Let’s get straight into the next plugin.
The next plugin I want to Install is WP Supercache.
WP Supercache – 1.37.50
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 install it, and once done, Activate it!
You’ll now see a message at the top saying the plugin is disabled please go to the plugin admin page to enable caching. 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 it’s as simple as that! Let’s now install our final plugin!
YOAST SEO – 1.39.08
This plugin is the most complete WordPress SEO plugin that exists today. It incorporates everything from a Google snippet preview and page analysis functionality that helps you optimize your page content, image titles, meta descriptions, so your content get’s found in search engines! Let’s get this awesome plugin installed and set up!
Again Plugins and Add New, and search for Yoast SEO. Install and then Activate it.
Great we’ve now got that installed and if you scroll down you’ll see a new tool in your toolbar, here is where your SEO tool is.
WordPress SEO also lets you set templates for titles and meta descriptions so that you can come up with templates effortlessly. It will show you a snippet preview so you can see what all of this would be like in a Google search.
I want to show you one of the best ways Yoast SEO can help you, and that’s with your pages and posts. So I’m on our About Page now, and here you’ll see a new section which has been added because of the new plugin. This is giving us a preview of how this page looks in search results on google! We can edit this and we can also add in focus keywords to do with our products or services. Coast SEO also let’s you know how you can optimise your pages or posts, such as using focus keywords, minimum amount of words, using alt attributes on my images.
Yoast SEO also let’s you set templates for titles and meta descriptions, it’s super powerful and it’s a game changer if you use this properly! This is all a bit advanced for this video so if you want to get this plugin working fully we have an amazing video all about it on our website which will also be linked in the description for you!
Well that takes us to the end of this video, CONGRATULATIONS! You’ve completed this and you’ve accomplished something not many people do, you now have your very own functioning website! You should be really proud well done, your website is looking beautiful, now show it off to everyone!
I now encourage you to complete the journey and get MailChimp working with your Call To Action, so you can start collecting those email addresses. This is so important to do, it means you can get your products or services in front of your audience again and again. Without email lists you’ll struggle to become truly successful, and we’ve made it easy for you to get going, so enjoy the next video which will quickly tell you all about MailChimp and get your set up!
Thanks for watching!
You can download all of these images right here by clicking the button below!