How To Make A Website | Build A Website With WordPress Step By Step

Hello, and welcome to this little video which I’m going to be taking you from A to B in creating a fantastic looking website. This will work for your business and help grow your online presence! I’m making this super easy so anyone can start and have an online website in just minutes. This video is simple to follow along and I’ll be walking you through our proven and easy 3-step WTC process!

So, if you follow along with me you’ll have your first website up and live on the internet really quickly and easily!

The steps will be,

  1. Picking out and registering your websites address, which is also known as your domain name.
  1. Getting started with WordPress, and installing the fresh WordPress theme that I’ll be showing you in a moment.
  1. Getting your website online so it can be immediately viewed by visitors on the internet! Plus, I’m going to be sharing with you our secret sauce to driving quality visitors back to your website with our 3 favorite tools! These will grow your fans and online presence, make sure your visitors can easily share your content, and be an effective way to grow your subscribers list!

WordPress is used by millions of people around the world. Did you know that some of the biggest companies use WordPress, and some of the most famous people use it to run their own websites? People like Katy Perry, Jay Z, and companies like Forbes, Mashable, SONY, and Style Watch are all using WordPress.

That’s’ because WordPress is so easy to use anyone can create a blog, grow it, and in time gain thousands of fans! To give you an idea of what’s to come, take a quick peek at the website we’ll be creating!

It’s called Sydney and it’s fantastic! It’s clean and fresh and really easy to work with. You can add your content in just a few clicks! In the next 3 steps you’ll be learning how to get a website like this working! So lets jump straight in with Step 1: picking out and registering your website address!

So, head to HostGator, which is the hosting service we have used for years because they are so reliable. Their customer service is great and we have never had any problems!

All you do is click on “Get Started Now”, then “Choose a Plan”, and choose the “Hatchling Plan”, which is ideal to use for a website. Now, choose how you’d like to pay, either month-to-month or for a whole year. I’m going to choose monthly for this example.

This is where you choose your domain name, which is the website address people type in to visit your site. So, take your time to think about this, it’s important to get it right. I would recommend not using any dashes in your domain name as this interferes with SEO.

SEO is search engine optimization, which I have made a whole video about. You can check that out as well.

If the name you want isn’t available play around with it. You can also change it from .com to .gov or whatever you’d like. For example ours is .tv because we thought it was appropriate for our website.

Once you’ve got your domain name, scroll down and choose a username and a security pin, and just enter your payment details here. Also, make sure to use an email address you have access to. HostGator will be sending your username and password as well as a link to your C Panel, which you will need in Step 2!

Next, scroll down and you’ll see the cost is still quite a bit, don’t worry because now we will bring it right down! Scroll up to these extras which we don’t need right now and un-check them. Now, for the coupon code enter “littlebizsite” and validate it, and the cost should have come right down!

Check you’re happy with everything and click “Checkout Now”!

Congratulations! You’re now the proud owner of a website domain name! You’ve completed Step 1, and you’re well on your way to having your website!

Step 2 is super easy. You should have received an email from HostGator and inside is your username and password along with a link to your C Panel. Make a note of your username and password and click on the C Panel link. Now enter your details and sign in.

This page is your C Panel. It’s the control panel for your website and there are lots of different things here it can look confusing. Don’t worry we are only here for one thing! Scroll down and find “Quick Install” under “Software and Services” and click on that. Now find WordPress under “Popular Installs” on the left, and then you just need to fill in the email address of whoever will be maintaining your blog. If that is you, enter your email address, choose a title for your website, a username, and enter your first and last name. Then click “Install WordPress”! This is now installing WordPress onto your domain name, and it usually only takes a few seconds!

When that is done, you will receive another email which will have your website login details and another link which takes you to your website login. Think of this like the backdoor into your website which allows you to customize how it looks and functions.

Find this email and make a note of your username and password, click the link, enter your details here, and login! Congratulations! You’ve now set up your website and it’s live on the internet! This is your Dashboard and you have a toolbar on the left with lots of different options such as “Posts”, “Pages”, “Comments”, “Appearance” and “Plugins”, as well as “Settings” which has the general settings for your website.

After installing WordPress, it comes with a default theme, so lets check out how our fresh new website looks right now! To get there quickly from the dashboard, hover over here, and then click “View Website”.

This is how your WordPress website looks straight out of the box! We’re going to transform this in the next step, Step 3. We are going to be installing a brand new theme which makes creating a website a breeze, and so much fun! It will look fantastic and will start working for you straight after you’ve set it up! So lets go and install our new theme and start customizing it! To get back to the dashboard, scroll up here and return to the Dashboard.

Step 3: Installing your WordPress Theme! Installing a theme is super easy, like everything on WordPress. You don’t need to know any kind of programming or anything like that. You don’t even need to know how to design or draw anything because everything is done for you! Even creating artwork for your website and business is straight forward and FREE to do with a nifty little tool that I’ll be telling you about very soon! Trust me you don’t want to miss out on that, it’s a complete game changer for your business!

You always want to make sure your website is responsive, and this means it can work on mobile devices, iPads, Desktops, and anywhere else! This is extremely important because if people visiting your website are using their phones and can’t get your website to work, they won’t stay. They will go somewhere else, and more and more people are using their phones online now. The theme we are about to install is completely responsive so it will work on everything- no problem! To install your new theme find “Appearance” and then “Themes”, then click on “Add New Theme”. Now search for “Sydney” here, and it will show up.

Installing is a simple 2-click process. Click “Install Here”, and “Activate”, and you’re done! Lets now see how our fresh new website is looking with this new theme! Again, scroll up here and click to go to your website.

This is looking awesome and we haven’t even customized it with our content yet! This is the structure of your website, from here you can fully customize how it looks and functions, add your content, and make it exactly how you want!

So head back to your Dashboard. I’m going to show you a few ways you can customize this theme by adding a couple of beautiful photos. These will scroll at the top of the website like this, with a “Click Here to Begin” button. This will take them to “Our Services” area with a “Get Started” button that is our call to action. I’m going to add a “Contact Form” to the sidebar to make it easy for visitors to contact us. I’m also going to add this awesome photo gallery. This could be used as anything to show off merchandise, your work, places you’ve visited- anything!

One of the key benefits of WordPress is to expand its functionality to your specific needs through the use of plugins. We’re going to install a couple of plugins now, which help you build out the theme. That’s why we recommend this theme, because it’s so easy to use! I’m going to hold your hand through this and guide you step-by-step to setting everything up!

So, after we’ve installed our new theme, you may have noticed it recommending two plugins to install that work with the Sydney theme. These will make everything work and make it super easy to customize the theme, so it’s important we install these. Just click here to begin installing and activating these plugins- this only takes a few seconds!

This theme comes with some great looking features, such as these photos here, and the scrolling photos at the top. For all these to work properly, we need to do a couple of things that only take a minute. It will make sure this theme work perfectly.

All we need to do now is head to http://athemes.com/documentation/sydney and once you are there, look for the “Settings File”. Click it and you will download a file needed for outcome post types, which are icons in the theme. Also, click on “Portfolio Plugin” here and we’ll install that at the same time!

Once you’ve got those go back to your Dashboard. Go to “Types”, and “Import Export”, and click on “Choose File” under “Import Types” data file. Choose the file you just downloaded and import. Leave all this as it is, click on “Import” at the bottom, and you’re done! You’ve now got some new options here on your toolbar!

To install the plugin, go to “Plugins” and “Add New”, then “Upload Plugin” here. Select the “Portfolio Plugin” you just downloaded. It should end in a .zip, then “Install”, and “Activate”! If your plugin download doesn’t end with a .zip it won’t install. No problem though, just find it, right click on it, click on “Compress”, and then upload that. The theme is all set up so you’re all done! Now we’re ready to start adding our content and making it our own!

Lets get straight into it. First of all, we need to set up our front page so it’s a static page, not a blog page. To do this, go to “Pages”, and “Add New”. You can name this page anything you want, but something like My Front Page is fine. Change the page’s template to “Front Page” here, and “Publish”!

Now go to “Appearance and Customize”, and click on “Static Front Page”. Here we’re setting our front page as static, to the page we just created. So, under “Front Page” select “My Front Page”, or whatever you named your page previously. Then click on “Save” and “Publish”! We’ve now set up our front page. As you can see, there’s no blogging area here anymore. All we do now is add the areas we want, such as a call to action at the top and our services underneath, and these photos here. We can also add a few more things on the footer like and a video and some social icons. I’ll also add a contact form to the sidebar using the plugin “Contact Form 7” to make it easy for visitors to get in touch!

Once you have added these different areas, you’ll have the knowledge to add any of the other areas if you would like to!

So let’s start with the scrolling photos at the top. How do we change those? Let me show you!

Back in the customize view go to “Header”, and “Header Slider”. Scroll down and you can see the photos already added to the slider. You’ve got slider speed here, which is in milliseconds, and you can add a title for each image by adding text in these sections. You can add up to 5 images to the slider. All very easy!

This editing button, is this button on the website, which when clicked, the website will scroll down to the “Our Services” section.

I’ll now show you how to add more sections to your website. We’ll be adding the “Our Services” section, which looks like this, and a great interactive photo gallery to show our work, merchandise and articulate the story of your brand.

Go back by clicking here and the cross. Go to “Pages” and “All Pages”, and under “My Front Page”, click on edit.

You’ll see you have a “Page Builder” option here. Click that and it takes you to a whole new editing area, which allows you to add your sections and widgets to the site.

I want to add the “Our Services” section. It uses some nice looking icons, and tells visitors what your business can do for them. It’s easy to set up so lets get straight into it!

In “Page Builder”, click “Add Widget”, and add “Services Type A”. You can customize how it looks by adding a title, URL for the button, text for the button, and you can style this section if you would like using these options on the right. You can customize the colors of the fonts, background color, or add an image for the background. Click “Done” to add the widget, and click on “Update”.

Now, look for “Services” on the left, and click “Add New”. All you do is enter a title for the service, a description here, scroll down here, and you can choose an icon to use by clicking here. Browse through all the icons. Once you’ve found one, look at it’s code here, then enter that code in here. All Done! Now click “Publish”! Add all your services, and once you’re done, take a peek at how they look!

Awesome! This is coming along great!

Now, when a visitor clicks this button to begin, they’re taken to our services. They can then benefit from by clicking this button, which should then take them to the next step: entering their email address.

It’s straightforward and easy to add different sections and widgets, and edit them. The possibilities to customize and make it your own are huge!

Let’s now have a look at how to add the “Work” section on the website, which is all these photos here.

This is really great. It’s a little more complicated but it’s worth it! You’ll be able to articulate your brand’s story, your products/services, and you’re going to have a great looking interactive gallery. I’ll guide you through step-by-step and if you need to pause the video, you can do that.

To be able to have these photos, we need to organize each photo we want displayed, into it’s own “Project”. Use the “Projects” option here, create any categories to group them together (for example Design, Nature, Fitness) and add a text widget that connects to all the projects using a shortcode that also makes the photos into a gallery! This might sound complicated, but it isn’t once you’ve done it. You’ll see it’s quite straightforward and if you follow along with me you’ll have it set up in no time!

The categories you create become the skeleton of your website, clueing in both readers and search engines to its structure and content. Taking the time to use categories correctly can boost your SEO, raise the average time-on-page of your visitors, and provide an overall better experience for your readers. So, you want to ensure that your categories will organize your content for your readers. This will keep them longer on your website, seeing related posts and more content that is specific to their interests.

So, first lets create our projects and add our images! Find “Projects” on the toolbar, and click “Add New”.

As I said, each photo you want displayed has to be in it’s own project. This screen is how you add a project. Just type in the photo’s name as the title, and add the photo as the featured image here. Then add the photo to the category you want it in. We need to create our categories now because we don’t have any at the moment, so just click on “Add New Category”. Give it a name and add it. As you can see the category will be checked to tell you this photo will be in this category. You can have more than one category if you’d like. Now, just click on “Publish”.

To add another project and image, just click on “Add New” here and follow the same steps. Do this for the images you’d like in your gallery. Remember to create categories if you want more and to publish it once you’re done.

Now, we just need to create a text widget that shows our photos. We’ll do this by using a shortcode that will make our photos into a great looking, interactive gallery on our website!

So head to your “Pages” and your “My Front Page”- the first page we created. Click on “Edit”, and click on “Add Row”. Change this to 1, click “Insert”, then “Add Widget”. Click on “Wordpress Widgets”, and add the “Text Widget”. Now click on “Edit” here to edit the widget.

The title is going to be this text here, so put whatever you want here. I’m going to change this to “Our Videos”, and in this main area you’ll want to paste the shortcode that we were given by athemes.com. It’s here, so copy that, and paste it here.

You might need to change a couple of things on here. Think about how many photos you want to be displayed and type that number in here, where it says sydney-masonry posts=“8”. Make sure to type the number in between the speech marks “ “. Now, all you do is add in the categories you want the gallery to display, where it says include=“” again add those in between the speech marks. So, for example I would add in animation and wordpress because those are my categories. Then click “Done”, and “Update”!

Let’s go and see how that looks on our website!

Fantastic! This is looking great! If I click a category only those photos in that category show up. A photo gallery allows you to showcase your products/services and allows your audience to connect with your brand in a visual way. Photos can create powerful and lasting impressions in the mind of your prospects, so a gallery is especially powerful for businesses selling anything that relies on good quality visuals.

Next, I want to show you how you can add some contact information and a video to the footer of your website.

Adding your contact information and a video is simple. Just create a new row (this time make it 2), add widgets, add a contact info widget, and a Sydney video widget.

Edit the video widget and add your videos URL here. Click done. Edit the contact info and fill in your details here, then click “Done”. Remember to click “Update”.

Let’s check out how our website is looking!

Awesome! I’m really happy with this. Look how much progress we have made! WordPress is truly amazing, a few years ago this wouldn’t be possible to do so quickly, and would have cost thousands of dollars to create. Now you can do it all yourself- simply and very cost effective!

Congratulations! You have just properly step up your WordPress Website!

Now that have a website that is properly setup to capture quality traffic and visitors, lets take it a step further to leverage the WTC system. We can use these conversion focused tools to get more website subscribers.

I hope you have learnt how to effectively use Sydney to create a beautiful looking website that can benefit you and your business! If you have any questions, please leave us a comment. If you found this video helpful please give it a quick like, and share it with your friends!

Thank you and see you in the next video!


15 thoughts on “How To Make A Website | Build A Website With WordPress Step By Step”

  1. Sir, Thanks for your wonderful explanation about wordpress hosting on blue host and it is very very useful for young bloggers who are in the dream of becoming pro-blogger. I m writing a comment here only because of asking why you not explained any thing about wordpress hosting on godaddy.com. So I request you, please write a post on wordpress hosting on godaddy.com.

Leave a Reply

Your email address will not be published. Required fields are marked *