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.
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
online earning,make money online, earn money online, online earning, online earning sites,
make money online free, online money income, earn money online free, money online, best way to earn money online, online income site, money earning websites, best online earning sites, easiest way to earn money online, earn money payment bkash, online money income site
Posts
No comments:
Post a Comment