Build a Business Website from Scratch

Hi, Alex here, from wpeagle.com.  I guess you’ve stopped by because you’re looking to set up a Web site.  You’ve come to the right place.  In this video, what we’re going to do is we’re going to create a WordPress-powered Web site; a professional-looking Web site, suitable for a business.  We’re going to start totally from scratch.

I’m going to take you through setting up hosting and registering a domain name, so you can get yourself a dot com.  Then we’re going to install WordPress, and we’re going to get a premium WordPress theme.  We’re going to install that, and we’re going to configure it, and we’re going to end up with a great-looking Web site.

If you want to take a look at what the finished product looks like, why don’t you just click on this link.  Visit this Web site; it’s at wpeagledemo.com.  Here’s a picture of the site as well.  It works really well on a phone.  It’s fully responsive.  It works really well on an iPad.  It’s perfect.

You don’t need much money.  All you’re going to need is just maybe $50, $60 for the premium theme, and you’re going to need a few dollars for your hosting, but no more than maybe $100 I think, probably, and you’ve got yourself a fully functioning and professional Web site, that if you went to a Web designer to go and set up for you and design, it would cost you a few thousand, probably.

If you’ve got any questions or anything, or you get stuck during the tutorial at any point, please just post in the comments, or send me a Tweet, or whatever you like.  Get in touch with me, and I will do my best to respond to your questions.  I bet you’re keen to get started, so let’s get started.

We’re going to start by setting up some hosting.  Let’s go to me, the other day when I recorded.

We’re going to set up some hosting with HostGator.com.  I’m going to provide you a coupon code, which I’ll put up on the screen now, so that you can get your discount.  It’s entitles you to 25 percent off.  A disclaimer; I do earn a little bit of commission if you use that code, but hey, I need to get paid somehow for making these videos.  I hope you find the video valuable enough to use my code, and show your appreciation.

We’re on the HostGator’s page here.  You can find it at HostGator.com, or you can go to wpeagle.com/hostgator, and you’ll get there that way, too.  You just need to go into Web hosting.  You can start with the hatchling plan.  That’s … if you’re just starting out on line, it’s extremely good value for money.  If you find out that you need some more, because your site really takes off, then you can always upgrade or move up after that.

To get started, $2.72 a month; you can’t really go wrong.  Obviously, just click “order now”.  We’re on the order form, and the first box is where we can register our new domain name.  I’m assuming in this video that you don’t already have a domain, and we’re just going to start from scratch and get ourselves a dot com or something.  I’m going to go for wpeagledemo, because it’s for my demo site.  That’s available, so that’s been added to the cart.

If you scroll down, you can select or see the variations.  If you want dot net, dot org; whatever’s available.  I believe the packages, it was pre-selected on the first one.  I said hatchling’s fine.  You can select the billing cycle there.  We’re now going to select our user name.  For wpeagle, and then we can enter our security PIN; there we go.  Now you can fill in all your billing information.  I’ll just do that very quickly.  I’ll obviously blank it out for security reasons.

Once you’ve filled all that out, the next bit is to decide whether you’re going to pay with credit card or PayPal.  I’ll go with PayPal.  You can select if you’re an individual or a business.  I’ll go with business, and enter my business details.  That’s done.  There’s a few other options here.  You can add domain privacy, which is useful if you want to hide your identity.  You can add a site lock, which basically is like a virus protection against any security vulnerabilities.  There’s site backup as well, which is obviously good to have if you’re going to be building a site, because then if anything goes wrong, you can restore it back up.  Just select the options that you want.

Now, the coupon code, if you don’t already have one, I said please use mine.  It’ll be up on the screen now, but it’s basically wpeagle25off.  That will give you a 25 percent off discount.  Yes, that’s all been applied.  You need to scroll down and click the terms and conditions, then click “create account”.  It should just go away.

Then you come to this page, and then obviously you simply click “pay now”, and that then brings up your PayPal account, and you’re ready to pay.  I’m going to pay now, and then I’ll wipe this screen and we’ll come straight back and we’ll start setting up WordPress.

I’ve just got my e-mails from HostGator, paid and everything.  It all went through fine.  Hopefully you’re at the same point now.  What we’re going to do is log in now to our control area, and we’re going to set up the WordPress Web site so that we can get started building our Web site.

I’m back on HostGator.  If you look up here, there’s a log in tab.  You need to enter your e-mail address, and then you need to enter the password, which you will have got via e-mail.  It can be confusing, because you set a PIN number when you set up your HostGator account, but actually they e-mail you a password.  If you go to … I’ll pull up my e-mail here.  I’ll obviously blur out the details, but they send you actually two passwords.  The first password is the one you want, which you’ll find over this bit; the first one you get.  I’m just going to copy and paste that in.  There’s another password in there, which we’re going to need in a second.

When you log in, you get a screen that looks like this.  I can save my password.  What you want to do is scroll down and go to “view hosting packages” down here.  Here’s my wpeagledemo.com.  It’s all set up.  We go ahead and click on this link here, which logs us into the C-panel, which is slightly different.  This is the billing and support system, and then the C-panel is where you can set up all your Web site stuff.  Let’s click this link.

The user name is the same as you’ve just logged in with.  You need to go back to the e-mail you got from HostGator and the second password they mention, just copy and paste that.  That should log in nicely.  If you have any problems, there is a “reset password” button there, where you can reset it, if for whatever reason it’s not working.  You can close all this stuff down.  We’re not going to need that.  I’m going to save my password, and here is the HostGator control panel.

Basically in here, you can do everything to do with your Web site account, so that’s set up e-mail accounts, install WordPress, which we’re going to do in two seconds, and a few other bits and bobs that you might find useful; do some backups, and a whole host of stuff.  We’re not going to go for any of this right now.  We’re just going to set up our WordPress Website.

At the top, we’ve got this link here that says “get started with WordPress”.  Give that a click, and it brings up this quick install screen.  It’s brought up WordPress.  WordPress is Web software you can use; we know what it is, it’s great.  Let’s click “continue”.  Now, it’s going to ask where to install.  Obviously, we’re going to install our domain name that we just set up.  You can enable auto-upgrades, which is quite handy.  Just enter your e-mail address.  Give the blog a name; I’m going to call it the wpeagledemo site.  Put your admin user name in.  This could be just admin, but for security reasons I suggest you use something else.  I’m just going to put my name in.

Once you’ve done all that … this box up here, by the way, I would just leave that blank.  That installs it just on the root.  If for example, for whatever reason, you wanted your Web site to be /WordPress or /blog, you could type that in.  Unless you know what you’re doing, I suggest you just leave that blank.

We’ve done all that.  Let’s click “install”.  This is just going to take a few seconds, so I’m going to just do a little edit, and I’ll see you when it’s done.

It’s all done, so it says my WordPress installation is ready.  I can access it by going here.  There’s my log in name, and it’s generated me a password.  You need to copy and paste that password somewhere; keep it safe.  What we’ll do, as soon as we log in, we will change it to something that’s more memorable.  It’s just all letters and numbers.

I’m going to click here, and because the domain name is brand new, the Web site has not come up yet.  It takes a little while for the domain name to register.  If you’re getting the same thing, then you may need to just wait a bit, and then it will load.  Luckily, I’ve got the … I’ve got video here so I can edit it, and I’m just going to wait for it to appear, and then we’ll come straight back.  Hopefully, you won’t have to wait too long for yours, either.

When it’s ready, and when you go to your Web site and something appears, then you know you’re ready to go and we can carry on.

The site appeared.  It took a few hours, so be patient.  Especially if you’re registering a new domain name, it takes a little while for the domain to be registered, and for all the DNS servers all around the world to update with the new details.  Just be patient.  If it’s been more than 12 hours or so and you haven’t … your Web site hasn’t appeared … then I would just get in touch with HostGator.  If you log in to your support area, there’s a live chat and there’s a ticket thing in there.  They’re always pretty quick, and they’ll get stuff sorted out, but generally it will just go through without a hitch.  A few hours, and boom, you’ve got a WordPress Web site up and running.

This is the foundation for anything, really.  We can use it to build lots of projects, and obviously this video that you’re watching, we can build a Web site using WordPress.  This is just a basic install, ready to go, and from here we can build some great things.  The first thing we’re going to do is just change that password.  The password that you get from HostGator isn’t particularly easy to remember.  We’re just going to log in and change that, and then we can get started building some great Web sites.

I’m just going to open another tab, because I like to work this way, so I have the back of the Web site … the admin area … in one tab, and then the front of the Web site in another tab.  I can just quickly switch between the two, and I find it’s a quick way of working.  Obviously, you can just have it all in one tab if you want, and see how you get on.

I’m just going to open this one, so it’s obviously wpeagle test … no, not test, demo.com, and then it’s bringing it up.  I went there a minute ago, just to check it, /wp-admin.  That brings up your log in screen for your WordPress.  This is how we access the admin area.  I’m going to type in the user name.  This is the user name that you set up when you were doing the quick install on HostGator.  You need to copy and paste that password that was generated again by HostGator.  Hopefully, you kept it in a safe place.  It’s in my clipboard, and there we go.  Obviously, if you have lost your password, there is a “lost password” link on that screen, and you can reset it via your e-mail.

We’re in, and now to reset that password so it’s more easy to remember; if you go down the left-hand side, these are all the options, which obviously we’re going to go through as we build our Web site, and you’ll learn about them.  To start, we’ll down into users, and then all users.  There’s only me in there at the moment.  We’re going to click “edit”, and then we’re going to scroll down and the box at the bottom is the password.  You can just enter the new password that you want; something that you remember.  That’s done.  There we go, and we can now get started building our Web site.

The first thing we need to do is go and get ourselves a premium WordPress theme.  I build all my Web sites using premium WordPress themes.  You can use free themes, but I find that you get better support, and the themes are generally of a much higher quality if you spend a few dollars on them.  It’s only a few dollars; you can pick up a theme for $30.  Maybe at the top end you might pay $70, but in terms of the quality of the design and functionality, I think it’s worth it.

For this particular video, we’re going to be using a theme called propulsion.  I’ve used it for a number of Web sites for clients, and they’ve all loved it.  You can get this theme over at ThemeForest; I’m going to put a link up on the screen.  If you use this link, I’d be most grateful.  I earn just a few dollars … it’s not much, enough maybe for a coffee or something … I’d be grateful, just if you show your appreciation for the video.

Follow this link, and I’m going to bring it up now in another tab.  The link is wpeagle.com/propulsion.  It takes you over to ThemeForest.  Now, ThemeForest is a massive marketplace full of WordPress themes, so if you need other themes, come check it out.  For now, you don’t need to worry about that, because we’re just going to use this great theme, propulsion.  The good thing about it is, it’s responsive.  It’s got loads of options, so it’s quite easy for you to change colors and customize the site to your needs.  It also supports WooCommerce, so if you want to make an e-commerce site in the future … maybe turn your business site into an e-commerce site … you don’t have to change the theme.  It’s got loads of other great features, which you’ll see as we have a look.  Let’s stop talking, and let’s get on with it.

You’ll need to sign up and purchase; it’s $60.   I’ve already purchased it, so I can just download it.  I’m going to click “download”, and then it’s asking me where to save it.  I’m just going to save it there.  I’m just going to show that in my finder.  Obviously, on a PC, you just bring it up in your “my computer” or whatever; I don’t know what they call it now.  I’m just going to basically expand this zip file that we’ve downloaded, to see what’s in here.

There we go, it’s been expanded.  In here, this is basically all the stuff you get with the theme.  You get some documentation, a license, and whatever that stuff is.  You get this zip file here, which is a WordPress-ready zip file, and it’s ready just to be uploaded straight into WordPress.  Let’s do that next.

To do that, I’m going to go back into the back of the demo site.  You should probably already be logged in, because we’ve just changed that password before.  What I’m going to do is, I’m going to go into appearance and then themes.  At the top there is an “add new” button.  I’m going to click that, then I’m going to click “upload”.  We can choose the zip file, so that it’s not the first zip file you downloaded from ThemeForest, because that’s got everything in it.  Once you’ve expanded that one, there’s a zip file within that zip file, which is the one you want.  I’m just going to click “choose file”.  I’ll find that folder that I was in, which was just my demo site folder, and then into that folder that I expanded from the zip I downloaded, and then here’s that propulsion.zip; that’s what you want.  It’s 4 ½ megabytes, and then I’m going to click “install now”.

It just takes a few seconds to upload it, obviously depending on your connection speed.  That’s done.  It’s now just going to make that work, hopefully; here we go.  All we need to do to finish it is just to click “activate” and that will make it live on the site.  Here we go.

The first thing it’s saying is, it recommends that you install a couple of plug-ins.  We don’t really need to install these plugins.  One of them is WooCommerce, which is the e-commerce plugin, which turns your site into a bit of a shopping cart and basket.  We’re not going to be doing that in this particular video.  The other one is some form of software; again, we’re not going to be doing that in this video, so I’m just going to dismiss this notice.  That will stop bothering us again.

We’re greeted with the options page.  If I go back to the front of the Web site, remember I said I like to have them in different tabs.  The front is here; this is what it was.  If I refresh this page, it should now change and start to reflect the new theme, and there we go.  Now we’re ready to start building and adding pages and setting up the home page, and everything like that.

I’m going to go back to the options, and then we’re going to go through here and start setting up the site.  I think the first place to start is with the home page.  I think that’s always a good place to start when building a Web site.  From then on, we can obviously build out some more pages to create a final finished professional business Web site.  Let’s get started with that.  The first place we need to go is to create a page, which is going to be our home page.

Down on the left-hand side, these are where we come to find all your main WordPress options.  If you want to get a little bit more familiar with these things, you could … I have a video that I’ve done, which covers the basics.  You don’t need to watch that; you can just stick with me on this video, and you will end up with a nice-looking Web site.  Let’s get going with this page; the home page.

We go to pages and then click “add new”.  This is where we create pages.  The first box we get is where we enter the page title.  I think a good title for the home page would be “home page”.  For now, we’re not going to actually add anything to the body.  You’ll see why in a minute, because generally home pages pull content in from all around your Web site.  They might pull in some of your blog posts and other places.  We’re not going to add any content right now.

What we’re going to do is scroll down a little bit, and the option you’re looking for is the layout option.  This propulsion theme has some great layouts.  If it has a layout, editor certainly allows you to kind of set out your pages how you want.  By default, once you’ve installed it, it has a layout for a home page.  That would be a good one to use.  I think it’s called front page.

What you need to do is click down here on layout.  It has some standard kind of layouts, with a left-side bar and a right-side bar.  You’ll see what they are when we create some of the pages.  What you want for the home page is dynamic template.  This is where we can select templates that we’ve built ourselves.  As I say, we haven’t built one yet, but there is a built-in one for the home page.

If we click … there it is, it’s called front page.  Front page, home page; same thing.  That’s that for now.  Let’s just click “publish” on that.  That’s created a home page, but now what we need to do is kind of set this page as our home page.  What we’re going to do is, we’re going to go back into the theme settings, which you can find under propulsion, and then theme options.  We’re back on the theme options, and then what we’re going to do is select that in the home page.  It’s called home page; it’s asking us where we want to display the blog.  We’ll do that in a second.  Just set that to home page and click “save all changes”.

If we go back and refresh our home page on the Web site, we can see the home page is like a blank canvas now; there’s nothing there.  We can start to add our stuff.  Let’s do that right away.  I’m going to just go back to my other tab here, which I’ve got.  In fact, let’s tidy up while we’re here.  We don’t need HostGator or the new tab anymore, or ThemeForest.  I’m just going to keep these two tabs open, to keep it simple for you guys.  The first one I’ve got is the front end slide, and the second one is the back of the Web site.  I’m back on the theme options here, and what we need to do is go into template builder.

This is a great feature of the theme, and this is where you can put together pages and it’s really, really flexible.  The one we’re going to edit to start with is the one that kind of comes with the theme, which is the front page, which is the one that we’ve just set as the template for the home page.  It’s already got a lot of different elements.  If you scroll down, most of the elements are just parts of the page.  They could be just a bit of text that you enter, or it could be a slide show.  We’ll go through each one of these now, and you can see which … you can see what they do.

The first one is the text area.  This is like a nice message that goes across the top of the screen.  It doesn’t have to go across the top.  It could go below the slide show.  In fact, that’s probably nicer; let’s do that.  These elements, you can just drag and drop as you go.  What I suggest you do is that you set this to call-out style.  That way, we can add a nice button with a call to action. Let’s put “get in touch”, because it’s going to go through to a contact page.  I’m going to insert linked page, but unfortunately, I haven’t created content.  I’m just going to set that to sample page, and we’ll come back and make sure that we change that later.

I’m going to put our message, which is “We are a professional business that likes to keep our clients happy.”  I’m going to save that, and then I’m going to go back to the home page, and I’m just going to refresh it.  Here we go; we can see our message has appeared.  Obviously, we’re nowhere near finished yet, and there’s some other stuff come up which we’ll tidy up in a second.  For now, that’s starting to come, so that’s the first bit.

Let’s go back to the propulsion options.  The first one is the slide show.  As I said, we should go and deal with that.  At the moment, it’s set to display the slide show of this entry.  All that’s going to do is, it’s going to use the slide show that’s on the home page page.  We need to go there.  If you remember, we find pages and pages, and then if you click “all pages”, there’s the home page that we created earlier.  If I click on that, we can go in and edit it.

The box here below the main kind of editing window is all the slide show options.  We can maybe play around with these in a second, but let’s add a couple of images.  I’m going to click “add image” and then it will allow you to upload from your computer.  I’m just going to select files.  I’ve got a couple images I think we can use.  These two are probably fine.  They’re kind of business related.  I’m just going to upload two images.  Obviously, you could have as many as you want.  Add to gallery, and add to gallery, so that they’re both included, then we can click “save all changes”.  That’s done, and then let’s close that.

Now if we go down here, we can see that they’ve appeared.  We can basically scroll the … drag these up and down, sorry, to decide which ones come first.  There we go.  I’m just going to click “update”, so whenever you make any changes on a page or a post in WordPress, you must click that blue button over there.

If we go back to our home page and click “refresh”, we can have a look and see what’s happened.  Here we go; there’s my image.  I always cut the man’s head off a little bit.  What I’m going to do now is I’m going to quickly just resize this image, because it’s obviously the wrong shape and size.  Obviously, it’s going to depend on the images that you’re using, and the shapes and sizes there.  This one is obviously a bit too square for our kind of more rectangular slider.

I’m just going to bring up my finder, and again it’s going to depend on your package.  Your package … that sounds a little bit rude … in terms of your graphics package, how you do this.  I’ve got Fireworks, which I find is really good for editing graphics.  Obviously, you might use Paint or PhotoShop or whatever you’re familiar with.

This is the image that’s a bit cut off; that laptop man.  I’m just going to open this up with Fireworks.  I’m just going to basically crop it.  Here is my image in Fireworks.  It’s quite a big image as well.  That could be slow, so I’m just going to resize it, so it’s not quite so big.  I’m going to just crop it a little bit, by using canvas size.  I’m going to anchor the top and then I’m going to cut from the bottom, so that we’re just left with his big, cheesy smile.  Let’s cut it to 400.  That’s more of the shape of our slider, and I’m just going to save this as a new file; save as, and find my demo site folder.  I’m just going to call this happy man.  He’s a happy man; look how happy he is.  He’s really happy.

Let’s go back and change this image, because that’s no good with his head cut off.  Back to the home page we were just in, and there’s the one with his head cut off.  I’m going to remove that, and then I’m going to upload the one I’ve just edited.  Select files, there’s happy man.  Remember, click “add to gallery”.  I’ve only got the one image uploaded here.  I’ve got a few more options, but you generally don’t need to worry about any of these.  Just click “add to gallery”.  You can even click “save” or just click up here and get rid of that, and then click “update”.

If we go back to the home page and refresh, hopefully you will see more of his big smile.  The first one is … again, I could crop that and resize it, but it’s fine.  The next one, there he is; look, he’s happy.  There’s the slider.  There’s our message, “We’re a professional business that likes to keep our clients happy.”  We need to remember to come back and change that button a bit later.

Let’s go back and let’s set up the home page.  I’ve gone back to the tab which is my editing tab.  I’m going to go into propulsion, and back into the template builder; add onto the front page.  The next section is post page content.  What this means is that basically, it’s going to display whatever we put on that home page, that we’ve set up under pages.  At the moment, obviously there’s nothing, because we haven’t put anything on there.  I’m going to look at the home page.

You see at the moment, it’s actually showing the title, which we don’t want, because that just looks silly.  I’m going to say display title, no.  Scroll down, save changes.  If we go back and have a look at the home page, this bit should have gone.

What I’m going to add here is a nice kind of one, two, three, four, why we’re the best.  In fact, let’s just have a one, two, three, because that will be easier.  To do that, let’s go back into … I need to edit that front page, so back into pages, all pages and then home page.  Let’s click, and we’re back in here again.  It’s this box at the top, is where we enter our content.

Propulsion comes with a lot of really good short codes.  What a short code is, it basically allows you to insert some of the cool theme features.  It could be, say, some columns, or it could be a little drop cap kind of thing, where you have a big first capital letter.  There’s a whole host of different things.  Let’s have a look at them, and I’ll show you where they are.

The first button I suggest you click is this one here, which is “show/hide the kitchen sink”.  It doesn’t actually show or hide a kitchen sink, but it gives you all the options that you get in WordPress, which you might need.  The next one, which is this magic wand, is the short code button.  This is part of the propulsion theme; it’s not part of WordPress.  Depending on obviously what you’re running, it depends on the buttons that appear here.  This is the propulsion one.  Let’s have a look at the short codes.

For example, you get short codes for things like buttons.  Maybe you want to do a quote; a testimonial quote.  Columns is one we mentioned.  You could add another slider, there’s tabs, there’s all sorts of things.  We’ll use these as we start to build up the site.  What I want here is like a one, two, three, why we’re great, which  you might want on your Web site, too.

For that, we’re going to start with a column layout.  I’m clicking column layout.  It’s going to ask us how many columns we want.  I want three, because we’re going to have one, two, three.  Here we’ve got some options here.  We can have either one column, which is a third of the width, and then the other two columns 2/3 of the width, so that’s actually two columns, if that makes sense.  I just want one, two, three; like that.  Does that make sense?  I hope so.  There’s one column, two column, three column.

This delete button here removes it, so you could … as I say, you could have like 1/3 and then a 2/3, so you might want that, for example, if you’ve got a bit of text and then a big image.  It combines the two columns into one column, but it is actually still three columns.  I hope this rambling makes sense, and that it’s clear.  As I say, for now, we’re just going to do one, two, three.  I’ve just clicked “third” three times, and that’s representing the columns, and click “insert”.

This is the short code.  Basically short code, in any kind of code in HTML … don’t get worried, this is not proper code, as it were.  It’s just how you set up Web sites.  Basically, a short code, or any type of code, you wrap it around your content.  This first bit here, which says 1/3 first, then 1/3 with a little slash at the end … especially anything that we put in here, where it says “content for third column here”, will be what appears in that first column.  Obviously, hit this one is the second column, and then this one is the third column.

What I want to do is I would like number one, “Use us because we are really great at what we do.”  Number two … I’m just making up this text, as you can tell.  Obviously, you would use your own text.  Number two, “We have 100 percent …” I’m not good at typing.  “We have 100 percent client satisfaction.” Or spelling.  Number three, “We’ll look after you for life.”  I’m making this up; I don’t know.  Maybe you can use it if you like.

Let’s have a look at what that looks like.  I’ll click “update to save”.  If we go back to our home page … hopefully you’re still with me.  Look, it’s starting to appear.  “Use us …” It looks OK.  It’s not bad.  I think it would look better if we make these drop caps, as I mentioned.  Let’s use some more short codes.  I’m going to go where that number one is, and I’m going to click my cursor, then I’m going to click on the short code button.  We’ve got the drop caps here.  Let’s clarify number two with a color background; that sounds good.

It’s creating another short code at the moment.  I’m just going to get my little “one” there.  I’m going to take it from there, I’m going to delete it, and then I’m going to type it in here, between the short codes.  A short code always starts with the square brackets.  You put your stuff in the middle, and then it ends with square brackets with a little slash with the same word.  You’ll be familiar with these soon.

I’m just going to copy and paste it for the next ones, and then I’ll just change the number.  I’m just going to put that there, put that there.  I’m going to change this to “two”, then I’m going to change this to “three”.  Maybe this needs to be bolded up as well.  That might look better.  To bold something, I’m just going to highlight it and click the “B” button.  It’s very much like Word.  If you use Word or pages on a Mac, it’s like the same thing.  I’m going to click “update”, and then go back to the home page, refresh, and let’s see how it’s looking.

This is not looking too bad now.  That’s the short code.  You see the drop caps with the colored background.  What I think actually is that we need to put one of these divider lines between this message and between these numbers.  Let’s do that; let’s go back into the back end.  That’s done on the … not within the page area, it’s done within the template builder.  You remember, that’s in propulsion, in template builder, and then the front page template.

All we need … there’s an element here which is the horizontal ruler.  We need to add one of those.  I could move this one, but what I’ll do is, I’ll show you how to add an element.  I’m going to go up to here, where it says “add elements”, obviously, and then click “horizontal ruler”, and click “add element”.  I did that already, so again, just to see … there we go.  You see, it’s added them at the bottom.  I’m just going to drag that up.  I want that basically … you can never have too many horizontal rulers.  Let’s put one below the slide show, and above our “we’re the best, get in touch” message.  Let’s put another one below that message, and below our “one, two, three, we’re the best” messages.  You see, I’ve just dragged and dropped them where I’ve wanted them.

Let’s click “save” and go back to the home page and have a look; see if we’re getting there.  That looks good.  I think these probably need a bit more text to fill them out.  Let’s go back and I’ll make up some more words.  I’m going to go back into pages, and we can maybe add a couple of … “find out more” links.  In fact, let’s just add “find out more” … To make that link, you just highlight, and then you click on the … this obviously applies on any WordPress page … click on the chain.  You can link to existing content.  I’m just going to select the sample page for now, which is “create body”.  We don’t have any other pages.  We can come back and change this in a minute, if we need to, which we will do.

Link again; I’m just going to link them all through to sample page.  I’ll come back in.  Once I’ve got all my pages set up, I’ll … we’ll come back and change them.  These will probably all just link and refer you to a services page, but you never know depending on, obviously, your business.  It might be a three-step process; register, confirm and then sign in.  I don’t know, it depends on your business.

Let’s see what that looks like.  It looks OK.  I think actually maybe the “find out more” might be better on the same line.  Let’s … you see, I added a return.  Let’s just delete those returns and put them up here.  I think we need a full stop and a space, and an exclamation mark.  Obviously, you can play around with this until you get it right; however you want it.

I think, let’s just add a few more words to them.  They look a bit … “based on feedback, for the life …” Let’s just make this longer.  “The life of your contract.”  I’m making this up; it doesn’t make much sense, but you get the idea.  I could have just used lorem ipsum some Latin or something.  Then it … it doesn’t look right.

This is looking nice; looking very nice.  Maybe, have I put too many lines in?  Maybe we don’t need that line.  What do you think? Let’s take it out.  Let’s have a look.  You’ll find that once you start designing Web sites, you just end up looking at all the little details; trying this, trying that.  That’s the best way to do it.  We’ve got the slide show.  I’m just going to go back and have a look.  The slide show; I think we need that line.  I don’t know if we need this line.  Let’s see; that’s the one below our call-out text area.

To remove an element, you can just simply click on it, and then there’s a little cross, and that goes; let’s see what that looks like.  Maybe it doesn’t look as good; I don’t know.  I think it does need a line.  Let’s go back and put the line back in.  It’s going to come up; let’s drag it back up.  There’s a few options on these lines.  You could just have a default, which is this one with the little blue thingy on the end, or whatever color you get to.  We’ll change colors in a minute.

You can have a flag, which you can add a little bit of text.  I think just maybe a nice … a single line.  Let’s see what that looks like.  That might be a bit more subtle.  Yeah, I think that’s fine.  I think that’s fine.  Let’s go with that.

Let’s add some more elements here, and finish off this home page.  The next section on the Web site is this part here, which I believe is for portfolio items.  A portfolio item could be your … something about what you do for a client, or it could be, if you’re a graphic designer or a Web site designer, it could be showing off your latest work.

What we’ll do is, we’ll add a few portfolio entries, and then they should start to appear here.  Let’s go back into the back end.  I’ve just gone into that tab, and I want to click on “new”.  You can go up here, or down on the left-hand side, and go to portfolio items, and then click “add new”.

Let’s do “work for a major bank”, something like that.  Let’s just put a little bit; “We made a great WordPress Web site for a bank.”  That’ll do.  You can have categories, so let’s put this in our banking category.  Obviously, these categories would depend on your business, and what kind of stuff you do.

The next option is the slide show.  You can basically show off some images related to whatever we’re talking about.  Let’s add some images.  I probably haven’t got anything that’s particularly relevant, but let’s see what I can upload from my computer.  Yeah, that look all right; it’s a picture of another theme.  We’ll go with that.

We’ve uploaded that, and then we’ll just click “add to gallery”.  I’ll just add the one image for now, and click “publish”.  Now if we go back to our home page and refresh, you can see that our portfolio entry has appeared.  Let’s add a couple more, just to fill this out a little bit.  I’m going to go back in and click “add new”.  “Web site for a charity”, we can add a new category just to make it nice, put “charity”.  I’m going to put some blurb … I’m not able to make it up any more, I’m just going to randomly mash the keyboard.  Let’s add another image from my computer.  Wow, that looks good.  It’s completely irrelevant, but it’s an image.  Click “add to gallery” again.

You can add more than one if you want, and then they’ll all appear, not on the home page, but when you actually click on the portfolio, you’ve got to scroll through them.  Let’s click “publish”.  Let’s go back and just see if that’s appeared.  These images are a different size, as you can see.  It’s cropped them in a weird way.  I’m going to change this image, because I like all my images to be the same size, and you’ll need to be aware of that.  Let’s remove that image, and let’s add another one.  This will be a bit taller.

We’ll use that one in a minute for an accountant, actually.  Let’s go with this.  “Add to gallery”, that’s done.  I’ve added it twice.  Let’s remove one of them, and then click “update”.  Let’s have a look at it.  That looks … on the front … there we go.  That’s looking better.

What I’ll do is, I’ll add a couple more.  You don’t need to watch it.  It’s getting a bit boring, this bit.  I’ll add a few more, just to fill it out, and then we’ll come back and move on to something else.

I’ve been busy, and I’ve added a few more portfolio entries.  I’ve also changed a few of the images, because I realized that they do need to be more of a square shape to look good, otherwise they do get cropped and then they’re all different sizes.  Nice, big images; obviously, not too big and not too large in terms of megabytes, otherwise they’d be slow, but in terms of dimensions, make sure they’re quite bit, and the squarer, the better, for this particular theme.

I also, rather than mashing the keyboard for each one, I’ve got myself some lorem ipsum.  I said I might do some Latin, just to fill out the pages so that you can see what it looks like with text.  What you’ll notice is, as we’re looking at the home page here, is that there’s quite a lot of text.  This is basically just like a snippet.  It’s all the same, Latin, as I say.  I think that’s probably a little bit too long.  It looks a bit wordy.  I’m going to show you how we can change that now.

While we’re here, you can also see that the categories that I created have popped up, and that allows people to then sort.  They’re really useful to use.  Yes, so let’s reduce this text down.  The best way to do that is to basically set the excerpt manually within each portfolio or blog post or whatever.  Let’s do it for this one.

What I want to show you is, I’m on my front page tab here.  This is also what the portfolio looks like, with a nice, big image, and there’s the text and whatnot.  What you can do is, when you’re looking at a page, and you’re logged into WordPress, is you can edit it.  You can just come up here and click “edit”.  Rather than going through the back end and trying to find it, you can just find it on the front and then click “edit”.

What I’m going to do is, down at the bottom here, there’s this box that says “excerpt”.  Basically, whatever you put in there is going to be what appears as a snippet, like on the home page, or on your portfolio page; wherever else you’re going to be showing these.  I think just a couple of lines of text is good.  I’m going to … rather than using Latin, I’m just going to actually type it.  “We made a fantastic Web site for an on line blogger.”  This one isn’t actually in a category.  Let’s add it to a category; blogger.  I must have forgotten to do that when I was adding it earlier.  That’s done.

If we click here, we can go back to the front, click “view post”.  It doesn’t look obviously any different here.  If we go back to the home page … I just clicked on the logo there, which is something that will change shortly … you can now see that that’s the text there.  I think that looks a bit better, with a little bit less text.

I will … let’s quickly just do these ones as well.  I’m just going to go in and click “edit” and then just put, “We made a Web site for an accountant.”  I’m just going to copy this, because that’s the kind of thing that I’ve been writing in all of them.  We go back and have a look at the Web site; the front … it’s looking better.  I’ll do these two, and then we’ll carry on.

I’ve done those changes, and reduced the text on my portfolio entries.  The home page is pretty much there.  I want to make a few more changes, just to kind of tidy it up.  What we’ll do is, we’ll start from the top now and work down again.  I’m still not actually 100 percent happy with this, so I’m going to have a little play with that, and show you how you can as well.

Let’s start from the top and work our way down.  At the very top, there’s this bar that comes up, which you can use if you want.  It’s just like a message bar, and it allows people to close it if they want.  Now obviously, they won’t see this bar on the top, because they won’t be logged in.  Normally … it’s only because we’re logged in.  Let’s change that bar to start with.  I’ve gone back to the back of the Web site, then under propulsion again, and theme options, you’ll see that on this page, we can do quite a few things to the top.  If we scroll down a little bit, there’s the logo.  We’ll come to that in a second.  Here’s that top banner message, so I’m just going to change that and say, “Welcome to wpeagle demo site.  We make great video tutorials.”  I hope I do.  Let’s click “save”.

It might not actually appear now, because I’ve closed it.  Let’s see if it’s going to come back.  There it is.  That’s changed.  The next thing is the logo.  Let’s change that logo.  Again, on this page, there’s the logo option.  I’m going to click “upload”, and I’m going to find … see if I’ve got my eagle about somewhere.  I found it; sorry, it took me a little while.  I’ve just edited that bit because I didn’t have the logo at the time.  I found this logo, so hopefully let’s try this.

I’m going to click “open” to upload it, and then click “use images logo”.  There’s the eagle, and then click “save”.  If we go back and refresh, there we go.  Now this slider is nice enough with these images, but we can add some text to it as well, which I think would really make it look a lot better.

Let’s go back in here.  Remember, the slider is obviously down to the actual page.  That page is our home page, so let’s go back to pages, add all pages.  Go into our home page; if we scroll down here, here are the slideshow options.  The first image is of that.  I want the first image to be the man.  It’s currently that flower; flower, plant, growing thing.  We’ve got the man; we just dragged him up to the top.  I’m going to click “show here” to see some options.  We’ve got some boxes here we can fill in.

The title is, “Welcome to the demo”.  You can add a link to the slider, so it can link through to the actual image, or we can link through to a page, or no link.  What we’ll do is, we’ll link through to a page.  What I need to do is correct some pages, though.  What we’ll do is, we’ll do that next.  For now, I’ll just link it through to the sample page.

Let’s just add some caption text.  “This is the WordPress eagle demo Web site.”  Let’s do one for the plant flower thing.  “We build and grow plants.”  Again, I’m not going to put a link on this one … no link … and then “Green, green things that grow”.

Let’s go up and update that.  That’s just updating; there we go.  If we go back to the home page and refresh, we can see the text is actually kind of covering up his face there.  Let’s have a look at the plant; yeah, the plant’s not too bad, but I think we can … let’s try out some different options on these, and see if we can make it look a bit better.  Let’s scroll down again.

To start with, we’ve got a fade set at the moment.  Let’s just see what that means.  As you see, the images fade in and out nicely.  We can change that to something a bit more fancy; a moving slider.  These you will fine-tune to the duration of the slides; five seconds is fine.  We can have it on auto-rotate; that would be nice.  This option only applies when it’s like a portfolio entry or a blog entry.  At the moment it’s adjustable, so it’s kind of a massive slider.  You can have a full width, which is kind of more static.  Don’t worry too much about that.  Just have a play with it, when you’re setting up your Web site.

Let’s have a look at these captions and just see what we can do.  There’s another tab here called “caption advance”.  Here, we can decide things like the color of the font, and whether it’s left or right, or we have a frame or without a frame.  Let’s try it without a frame.  We can add a “call to action” button, so let’s go for something like … we could have two if we want.  Let’s just have the one, “find out more”.  In fact, what the hell; let’s go for two … “contact us”.

Now we need to update these links, because I still haven’t created the pages, but we will do that next.  That’s done; let’s see what that looks like, and click “update”.  There we go.  That doesn’t look too bad, apart from the text is white.  Maybe if we did it kind of like a blue color, that might look better.  Let’s go back and just change that.  Let me get back into that slider, and back into the advanced … caption advance.  Let’s select a blue … I don’t know the exact color code that we’re using, so I’m just going to guess that that kind of blue might be nice.

Let’s have a look.  It’s probably too blue, actually, but let’s have a look.  That’s not too bad.  We’ll go with that, and there’s our buttons.  That’s that slider done.  What I want to do is, I just want to make this look a bit better.  I think what we should do is move these points up, and then I’m going to move this message below the portfolio, then I’m going to get rid of this.  This is a module that would, if we were running a shop Web site with e-commerce, we’d display our products.  As we’re not, we need to remove that.

Let’s go back into the back end, and propulsion, and back into our template builder.  You remember, they’re all elements of the template, which is applied to the page; the home page.  As I say, let’s just recap.  I want to move this down to the bottom, and I want to move that up a bit.  Let’s move that to the bottom first.  That’s our text area call-out.  Remember, if we open it up, we can double check.  That’s that message.

I’m going to move that down to below the portfolio; below the line, which is below the portfolio.  Here’s that products thing that we don’t need, so I’m just going to open that up and remove that.  We’ve got two lines together.  I want to move this, which is the content of the site, just to below the slider.  I don’t think I want that line, either, so I’m just going to remove these lines.  I’m going to grab that; put that up there.  Let’s remove that line as well, and let’s have a look.  Obviously, you can play with this as much as you like, as I am, until you get it right.

Let’s see what that looks like.  I think that’s looking nice now.  That’s looking a bit more ordered.  We’ve got a slider, then we’ve got our content of the home page, and then we’ve got our nice portfolio.  We’ve got this; this bit looks a bit funny.  I think what I’ll do is I’m just going to move it above the line, and that should hopefully look better.  Let’s have a look.  I just move that up and click “save”.  Let’s refresh; yeah, I think we’ll go with that.  If you want, we could have another line.  Actually, we’ll go for another line.  Let’s just put the icing on the cake, and let’s put that between the portfolio and our text area.  That looks good.

Just while we’re in here, I’ll just show you the portfolio.  There are the entries that we set up, just a minute ago.  There’s a few options on there.  You can basically filter it by certain categories if you want, which is handy.  You can have less columns, so maybe a two-column layout might look better.  You can turn off that sortable thing, where people click on the categories.  If you want, you can remove the title and the excerpt if you want, so it’s just the images.

The pagination … I think that’s how you pronounce it … basically means if you’ve got a lot of portfolios, it’ll have like a “next page” button so that people can scroll through them.  Let’s save, and let’s see what those changes look like.   There we go; look at that.  I think that’s probably too big.  I think … yeah, I think we’ll go back to four.  I think four was fine.  There you go, you can see that it’s very flexible.  Yeah, I think we’ll go with that.

The whole page, I think, is pretty much done.  What we’ll do now is go on and create internal pages.  Let’s add internal pages.  These are pages like the “about us”, the “contact us”; basically, anything you want to talk about.  It could be our services, our products.  I’m going to create one for the portfolio as well, and we’ll also create a blog page as well, so that we can get blogging.

We’ll go back into the back end, and go into the pages section, and click “add new”.  What I’m going to do is, I’m just going to create the empty shells for now, and then I’ll … we’ll fill them out in a second with images and text and stuff.  The first one I think we’ll need is an “about us”, and let’s create another one.  I’m going to call it “our work”, which will be the portfolio page.  Just click “publish”, and then go “add new”, and let’s create one more, “contact us”.  Finally, let’s have a “our services”.

What we need to do … I forgot one; let’s add one more.  Let’s add a blog.  I’m just going to call it “blog”.  We’ll go back through those one by one and get them all filled out.

The first thing we need to do is actually add these to the menu.  The menu is this bit along here.  Obviously, you need them to be there so people can find them.  All the menu stuff is under “appearance” and “menus”.  There isn’t any menus at the moment, because obviously we haven’t created any.  I’m just going to call this one the main menu, because it’s the main menu.

This theme has actually got two locations, so two places that you can stick a menu.  There’s obviously the main menu, which is this one, but then you can also have another one across the top.  If you needed some … maybe a log in area or whatever, I’ll show you how that works in a second.  Let’s just click “propulsion main menu”.  That’s where it’s going to appear.

We need to add some pages, and I want to add all these pages over here.  We’ll add the home page.  We’ll add the about … I don’t want the sample page.  That’s the one that came with WordPress.  All these others, let’s just take them and click “add to menu”.  Here they are.  Now, we can kind of arrange them how we want.  I think, let’s have it like that.  Let’s have the “contact us” at the end.  I think that kind of order.  This says “home page”; let’s just call it “home”.  You can just click there and change whatever you want it to say.  Let’s just click “save”.  That’s been done; refresh.  There’s our pages, looking good.

I’ll just show you where the other menu us.  If we create a new menu, and you do that by clicking “create new menu”; I didn’t see that for a second.  Let’s call this “top menu”.  What I’ll do is, I’ll add … rather than add a page, I’m just going to add a link to another Web site.  I’m going to link to the wpeagle Web site, so wpeagle.com.  There, underneath pages, there’s this link section.  If you open that up, you can then enter what you want.  I’m just going to call it “visit main Web site”.  Click “add to menu”, and then I’m going to take “submenu”.

Now, if we go back to the site, that should have created another menu along the top here.  If I just close that; there we go, it’s there.  It hides behind that little banner.  If you’re using that, you may want to disable that banner, which you can obviously do in the options.

There are our pages, so let’s start filling them in.  The first one is “our services”, so I’m just going to … let’s have a look at what we’ve got.  We’ve got nothing on it at the moment.  It’s got the default right-side bar, which we can have a look at in a second.  This sidebar will be applied to all different pages, so like I say, we’ll take a look at that in a second.  At the moment, obviously in this bit, there’s nothing at all.  I’m going to do it on this back end tab; obviously, you can go in and just click “edit page”, but we’ll go in this way and go to all pages and click “our services”.

The first thing I’m going to do is add an image to the top of the page, and you do this in a very similar way to the portfolios that we did earlier, so especially a slide show.  You could have more than one image if you want.  It could just be similar to the home page, scrolling through different images.  You can upload; actually, I’ll show you that you can also go in to the media library or the gallery, depending if they’re any way related.  That gallery has appeared, because I just took a little test when I wasn’t recording.

Here’s some of the logos that we’ve … some of the images that we’ve already got loaded to the site.  I can just simply click, rather than upload them each time.  He’s added, that’s fine.  Let’s add a bit of lorem ipsum.  I’ve got it in another window.  Excuse me, I’m just copying and pasting some text, just to fill it out.  Let’s paste that in.

What you can also do is insert some images into the actual body, so say if I wanted something next to this paragraph, I can just click there, then go “add media”.  Again, I can select an image from the Web site that we’ve already uploaded, so I’ll just go with that one.  You can basically just insert it straight into the page.  There’s a few options here.  You can have it like a medium size; I think that would look better.  You can align it to the left so that the text wraps around it, or the right, or the middle, or not at all.  You can link from … I’m just going to turn the link off, so that it’s not clickable, and then click “insert into page”, and then click “update”.

You hear my stomach rumbling there; it’s hungry work, making videos.  That’s there.  That’s all done.  Let’s go back and refresh the main page.  There we go.  There’s our image at the top.  There’s our text, and there’s the other image, so that’s not looking too bad.

This side bar … we’ll do that at the end, because that does apply to all pages with a sidebar.  We can change these different things down here.  The next page is our work.  If we go back to all pages, go to “our work”, here we go.  This one, I want to make it a portfolio page, so just similar to the home page; just kind of display the portfolio items.  What we’re going to need to do is create another dynamic template similar to the home page.

To do that, I’m going to scroll down here to the layout, and select dynamic template.  Obviously, we haven’t made one, so we’re going to need to go through to template builder.  Obviously, you can also go that way, via propulsion.  We’re back here again.  Instead of going into the front page, I’m going to create a new template and call it “our work”.  Obviously, these templates can be applied to any page you want.  Once you get the hang of this, you’ll be able to create some really amazing pages for your Web site.  That’s created there.  I’m going to click it.

I want it full width, so I don’t want any of that stuff down the side.  Basically, all I want is the portfolio.  I’m going to select “portfolio”, click “add element”, and this is the same element that we’ve got on the home page.  I am going to make it kind of bigger; I think three portfolio items across the page in columns.  Let’s click “save”.  If we go back into our pages, and into our work, now what we need to do is go back down here again, and back into dynamic template.  Hopefully, you see the “our template” is there.  If we click “update”, let’s go back and have a look at the front.  Let’s click on “our work”.

There it is.  Obviously, the more we add, the better it will look.  I think that’s all you really need.  We could add a little bit of text at the top.  If we wanted to do that, we’d go back into the template builder, back into the “our work” template.  We can either use the text area, or we can use the post page content.  If we use the text area, that basically allows us to add it into the template.  I think the best thing to do would probably be to use the post page content, so let’s add that; put that at the top.  We’ll leave it as it is, and just see what that looks like.

We’ll go back into pages, back into the “our work” page.  Now, whenever we type the stuff in here; “Take a look at our latest work.  We hope you like it,” then click “update”.  Let’s go back to the front and have a look.  There we go.  It’s now included the title of the page and that bit of text.  I think that looks a bit better, don’t you?  I don’t know what you said there, but I hope you agree.

Let’s move on.  The next page is the “about us” page.  Again, it’s just going to be a standard page.  You’d add some images of people and things like that, so let’s go to “add all pages”.  Click on “about us”.  I’m just going to copy and paste the lorem ipsum, and then I’m going to add another image.  The picture of face … I don’t know who that is.  We’ll go with that.  That’s what I’ll do, is I’ll add a couple, and add the person’s name as well.  Let’s add another one.  These are pictures from another project, but they are people; they’re on video. Let’s do that.

Those two are added.  Then again, it’s very similar to the home page.  I’m just going to add some captions.  That guy’s over to the left, so we need something over to the right.  What was his name?  I can’t remember; let’s just call him Bob Smith.  I’m going to put it over to the right with that frame, and I’m going to make the color that nice purply … no, maybe not purple, just like a dark color.

That’s great.  I’m going to do this one down here as well.  Her name was Helen something, and she’s over to the right, as you can see, so I’m going to put this one over to the left, without a frame again, and it can be a bit different.  Let’s make it pink; hey, why not?  Click “update”.  Obviously, you would do your “about us” pages however you want.  It would probably be … it’s up to you, pictures or text.  There we go, there’s both; the text is a bit dark, so maybe that needs to go in a frame.  There’s Helen something.  Let’s just … let’s put those with a frame.  I think that might look better.  Back into caption advance; right-framed, this one, left-framed, update.

I think the black text isn’t working.  Let’s make it white text.  “Bobby is the boss at wpeagle.  Helen is the boss of Bob at wpeagle.”  I don’t know; let’s click “update”.  I just wanted to fill that out, because that was looking a little bit sparse, wasn’t it?  Here we go; that’s not looking too bad, is it?  There’s our “about us” page.

The next page is the blog.  We haven’t actually done any blog posts yet, so let’s do a couple of blog posts first.  Blog posts are under posts over here.  You’d use a blog to add news items, talk about what you’ve been up to; that kind of thing.  Posts are kind of more dynamic.  They have a date on them, whereas pages, the aesthetic about that kind of stuff.  Let’s just put Web site.  Actually, I think I did a few blog posts earlier, let me just … while I wasn’t recording, just for the hell of it.

I’ve done a new Web site, launched one; again, they look very similar to the portfolio areas.  You give it a title.  You can have a particular format of posts, so if you want to add or upload images, you would select gallery.  This is just going to be a standard blog post, though.  I just need to add an image.  Let’s see if I can upload something that’s suitable.  That one’s far too big to upload.  You’ve got to be careful when you’re uploading your images that they’re not too big; otherwise, they will slow down your Web site.

That’s the blog image.  I’m just going to add that.  That’s our first blog post.  When you’re working on posts, you can obviously put them in categories similar to portfolios, and you can also change the date.  If you put it in the past, it will obviously appear on the slide that it was published in the past.  If you put a date in the future, it will kind of schedule that post up to be posted automatically, which is kind of handy, if you want to write a lot of blog posts and then have them come out in the future, automatically.

Let’s add one more post.  Let’s call it “great video tutorials from Alex”; that’s me.  I’m just going to add a picture to the actual blog post, similar again to the pages.  Let’s upload a file.  I think we’ve already got that image, haven’t we?  Let’s go for it again.  Let’s put that over to the left; that’s fine, medium-sized again, and a link.  That’s in there, and then that’s just pasted on lower … I accidentally removed the image.  Let’s put the text up here.  Let’s add an image up there as well; a different one.  There we go.  These are all just random images.  You get the idea.  Let’s get that to go.

Pages, post, portfolio items … they are all very similar.  Let’s put that in news as well.  Once you’ve … you can do one, you can do them all.  Now we’ve got a blog post.  We now just need to set the blog page up.  That’s very simple.  All we need to do is go into propulsion, and theme options.  I’ve already, you’ll see, created that page that was called blog.  You remember this option that came up way back earlier, that we now need to set blog in here.  That’s just under the theme options.  Where do you want to display the blog?  Save all changes.

We’ll go back to the front and click on blog.  Here it is.  There’s out blog posts, on our blog.  The last page that we need to look at is the “contact us” page, which again, currently doesn’t have anything on it.  What I want to do is just add some simple contact details, and a contact form.  That’s quite straightforward.  Let’s go back into the back end, and go into pages, all pages, and then obviously click on “contact us”.

What we’ll do first is, we’ll just add a bit of text.  “Call us on 12345678910.”  We can make that bold, or “send a message”.  That’s fine, we’ll just click “update”.  To add the form, we just go into the propulsion and then theme options.  We just need to tell the theme that this is the contact page.  Down on the left-hand side here, there’s contact; just fill in the e-mail address.  We select “contact us” as the contact form page.  If we click “save changes”, that should be done, and then let’s refresh the “contact us” page.

There we go; there’s our text, and there’s the form.  If you want to change the form … the fields and things … you can do that in here.  It’s quite straightforward.  It’s a bit like the template builder.  We’ve got name, e-mail, subject, priority at the moment, and message.  If you wanted to add a phone number, you’d just click green to add a field.  Call it “phone”.  It’s just text input, because even though it’s a number, it’s still text and not a real number.  You can make sure that it’s not empty, or if it’s a valid e-mail address, or no validation.

We click “save changes”.  There should be a phone number up here.  There we go.  That’s quite straightforward.  The other option you’ve got on the form is you can add an auto-respond, so when someone sends a message, you can automatically send them an e-mail back saying, “Hey, great, we got your message.”  You type it in here.  There we go.  We’re all done.

That’s the “contact us” page, all done.  The fine elements of the Web site are, we need to just make sure the settings are correct, and we need to do … sort the sidebar out, because it’s a bit of a mess.  What I want to do with the sidebar is, I want to get rid of this search box, because there’s already a search box there.  I want to leave the recent posts and the recent comments, and just basically get rid of everything else.  You can obviously add anything you want to this, and I’ll show you how that’s done now.

To work on the sidebar, we go back into the back end, and it’s all under appearance and widgets.  Here it is.  You can kind of see the elements match up.  Remember, there’s a search at the top, and then the recent posts, recent comments, then if we look here, search, recent posts, recent comments.

I want to get rid of this search, so I’m going to open up and click “delete”.  I like the recent posts.  I like the recent comments.  Archives; fair enough.  Yeah, categories is cool as well.  Let’s remove this.  There’s a whole host of other things that you can put up here.  For example, we could use some of these propulsion widgets.  If you wanted to add ads, you can use this one.  I’m going to use this latest news, actually.  Let’s remove this recent post, and just use this one.  This built-in is better.  We’ll call it latest news, and this is going to show our latest blog posts, and let’s put it onto free, and it doesn’t matter about the categories.

Show title; that’s fine, but we could display the excerpt as well.  What else have we got here?  Latest portfolio; that sounds good.  Let’s put that there as well.  Let’s do two, put our work … let’s try this combo widget.  That sounds interesting.  Let’s get rid of the recent comments, because we haven’t got any comments just yet anyway.

This one’s displayed everywhere.  On any page that’s got a sidebar, we’ll see this.  Let’s go and have a look at what’s happened to this “contact us” page.  There’s our latest news.  There’s our work.  There’s that combo widget, which has got this cool functionality going on.  There’s the archives, and there’s categories.  I’m going to get rid of those two, because they don’t look too great.  We’ll go back into widgets, remove them, and remove them.

Let’s refresh; that’s looking good.  While we’re in the widgets, we can also mess around with this first area, because these are also sidebars.  Back in widgets, in the back end, you’ve got these … I’m just going to remove … minimize that, displayed everywhere.  You’ve got the different columns of the footer; one, two, three, four.  There’s one, there’s two, there’s three, there’s four.  Again, you can just drop different widgets in.

There’s the advertising widget.  I don’t have any adverts, so let’s not use that one.  Let’s just put that … that’s the list of all the pages.  Now, I go back and refresh; see, that’s listed in pages.

The next one will have the … what should we have?  It’s difficult to choose.  Let’s have some text.  It’s just a simple text widget, click “about us”.  This is a demo site, by Alex at wpeagle.  Save that, and let’s have a look.  There we go; there’s our little bit of text, and then we’ve got categories in archives, which don’t look too bad.  We could tag that; tag cloud.  I think we’ll go for, again, recent posts again, and recent comments.  That’s just for now.  Obviously, you can put whatever you want.  It’s your Web site.  You can see how flexible it is.  You can just drag and drop whenever you want.

That’s all done.  We’ll go back to the home page, and just see how the whole thing’s coming together.  It’s looking pretty good; looking good.  The final thing to do is just double-check all our settings; make sure everything’s working correctly.  For example, there’s these social media buttons that need to be set up, and we just need to double-check everything else is all straight.

We’ll go back into the back end, and go back into the propulsion theme options, and just double check.  We’ve done the log, we’ve set those settings.  The favicon is the little icon that appears up there; let’s see if I’ve got one.  Maybe I’ve got a little eagle somewhere.  I think it’s on my laptop, so let me just find that.  You just need a really small image, like … here we go.  This one is 64 by 64, this little eagle I’ve got, which is perfect for a favicon.  It’s a .PNG file.

That will set that little image up here, in the tab that appears in people’s browsers.  We’ve done our top banner message.  This is where we can set our Facebook address.  Mine is WordPress eagle.  Please go and like it, if you haven’t already.  Your Twitter account, which again is WordPress eagle for me, but you obviously enter your own detail like that.  I don’t have a Dribbcle, so I’m just going to leave that blank.  I don’t have a Feedburner, either, so I’m going to leave that blank.

If you’ve got Google Analytics, you can copy and paste the tracking code into here, though I would recommend that you use a plugin called Google Analyticator to install your Google Analytics.  If you do a search on my channel, you find a video on how to do that.

They’re all done; let’s go to the next one.  In here, these are the styling options.  At the moment, we’ve got a nice kind of blue look going on.  We can go … if you want to, we can go for a purple look.  I’ll just click “purple” and then click “save changes”, and then I’m going to click “refresh”.  It’s looking all kind of purply.  That’s pretty cool.  We’ve got green and pink.  This one would like a background image on it.  There’s a whole host of different things that you can do.  If you don’t want to use a pre-defined color scheme, you can scroll down here.  It’s in here that you can set your fonts; whether you want a box layout … I’ll show you what the box layout looks like.

It’s kind of put it in a frame.  It’s up to you; I quite like the box layout.  With the box layout, what you can do is, you can change the color of the actual box.  You can have things like different colors for the body, and for your highlight, and the fonts.  All these colors … they’re all easy for you to change.  You can just simply click them, or you can type in your color codes, if you’ve got corporate colors … that kind of thing.

The other thing with the back … the box, you can have a background.  This one comes with some nice kind of backgrounds that are already built in.  Let’s say left repeat, and see what that looks like.  That’s kind of added these spots, which is a bit weird.  If we’re going to use a background, we need to set this to white.  Let’s go back up to the top, and set this to FFFFF, which is white.  Let’s just try a different background as well.  The dots were nice.  Linen; that sounds interesting.  Look at that.  That’s just a nice kind of gray.  I like that.  That makes … kind of brings the site up a little bit.

You can play around with that, and you can also upload your own backgrounds.  I recommend for your background, you get something that repeats, and then obviously, let’s make it small, and then you repeat it here by saying repeat.  This is a quick CSS box.  If you look at another video of mine, which is using Firebug, it shows you how to customize some of the other elements.  It’s kind of a bit advanced, if you need to apply it, so don’t worry about that for now.  If you need to change things, there is an option for … that’s when you’d use that box.  Let’s say, if you have a look at my channel, you’d be able to find out a bit more about that.

The next one is a layout of sittings, and these are just like the defaults.  At the moment, it’s defaulting to the right-side bar, which we’ve seen, but you can fit on a full-width page with no sidebar.  They’re all changeable, actually, on the page level under that layout box that we’ve already looked at.  It’s probably unlikely you need to come in here.

Portfolio, again, you can do in here.  Before, I added a template, but you could just select the page here, which would probably be easier and quicker.  Contact; we’ve already been in here.

Now, in the sidebar, you can create more sidebars.  If you want to put different things down, different pages, you can create more sidebars.  You select the page that you want to.  If it’s a category of blog posts, then you click plus, so it gives you lots more flexibility.  In the footer, we can site how many columns we’ve got.  At the moment, we’ve got four.  We just filled those in, one, two, three, four, but you could have less.

Here, you can enter your ThemeForest details, and you can update the theme automatically, which is really good.  Now, the final settings that we need to just have a look at are the general WordPress settings, so that’s down here in settings in general.  It’s called the WP demo site.  It’s just another WordPress site.  You can set your own tag line in here, which is … let’s call it just demo site videos.

Here’s the URL.  At the moment, mine doesn’t have a WWW, but if you wanted a WWW, you could just type it in.  If I do that, it’s going to ask me to log back in, but that’s fine.  Generally, most of these settings you can leave the same.  I wouldn’t allow anyone to register if you don’t need to.  I’m just going to save this, and it’s going to update your URL.  It’s going to want me to log back in again, which is fine.

Luckily, I’ve changed it to a password that I can remember.  Now, we’re at WWW, which I think is a bit nicer.  I’m going to save the password, just so for easiness.  The rest of the stuff, I’d say you don’t really need to play with.  By all means, have a look around, but I think for now, let’s go back to the Web site.  I think we’re all done, and we have a fantastic-looking Web site.  Hopefully, you have, too, if you followed this tutorial.

There’s just one last thing to do before we finish today, and we are at the very end now.  We just need to fix these links.  If you remember, at the beginning of the video, the pages weren’t set up.  These are just going to sample page, as are the buttons on the slider.  They’re not going anywhere useful.  Let’s just do those.

Let’s go to pages, and then into the home page, and here it is.  I’m just going to link these through to the services page, so I’m just highlighting that link, and clicking on the link button.  I’m just going to select our services from the pages, and the same for this one.  This is how you update links.  There we go.  The last one … the last one is the links on the slider, so I’m just going to go in here and going to link that through to “my services”.  On the caption, the buttons, “find out more”, I’m going to link that through to a page.  The page is “our services”.  This one is “contact us”, so it’ll link to a page, and link to “contact us”.  I don’t think this one has a link on it; no.

They’re all fixed.  If we go back and just refresh the home page; “find out more”, there we go.  We’re all done.  That’s the end of the video.  I hope the tutorial was good.  I hope you found it useful, and I hope that you’ve now got a Web site that you can use for your business, and that you can work on and probably make even better, with all the great features and functionalities that are included with WordPress, and the propulsion theme.

If you’ve got any questions, or if you got stuck, or if you’ve got any queries regarding this tutorial, please just post in the comments, or send me an e-mail or drop me a Tweet, and I will do my best to reply as quickly as possible.  If you like what I’m doing, then please subscribe and visit the Web site, wpeagle.com.  Hope to hear from you soon.  Good luck with your Web sites.