Hello it s Alex here from wpeagle.com. In this video we re going to be creating a website
using WordPress. The website we re going to be creating is this one. I ve got on my screen
behind me. I ve put it up on the screen now. There s a link that you can click and have
a look at the website yourself, have a good click about, see if you like it. It s built
using WordPress and uses a premium theme called 3clicks which is a really great powerful theme.
Comes packed full of features, making it really easy for you to create pages that look stunning.
In this video I m going to take you through everything step by step starting off with
setting up some hosting and then installing WordPress, getting the theme, installing it,
and adding all the content and changing all the colors, adding a logo, basically making
the website your own. If you get stuck at any point during this video please just leave
a comment below on YouTube or send me an email via my website at wpeagle.com and I will do
my best to help you out and fix your problems and get you up running with the website. Without
much more chit chat from me let s get started. The first thing I m going to do as I said
is set up some hosting. Let s roll the tape. Let s get started building this website. The
first thing we need is to set up our website hosting. Now I recommend a company called
TSOHost. They re based in the UK. They offer some really great hosting, superfast, great
support, and very reasonably priced. What you need to do is type in tsohost.com into
your web browser and you ll come over to their website which will look something like this.
Then if we go into hosting what we want is the cloud web hosting. Then when you come
to this page if you click on the bottom that says View Plans and Pricing it scrolls you
down the page and we can see what s available. Now obviously it depends on how busy you think
your [00:02:00] website is going to be, how big it s going to be in terms of how many
images and all that kind of stuff, but if you look at this table you can see they ve
got some great packages. I recommend you go for something like the professional or the
standard package. They re nice and big, offer loads of space and lots of bandwidth. It s
really up to you. Then when you come down at the bottom you
can select your package and whether you go for one year or two years. I would recommend
that you go for a year package. At least you get a much better value. Just on a side note
in terms of the little reward that I ll get it s a little bit more generous if you go
for an annual package. If you think you're in this for at least a year, which I m sure
you will be with your website a month is never going to be long enough, and as I said you
save some money, I would suggest you go for a year package.
Let s just select this, one of these packages. Let s go for the professional at just 49.99
for the year it s a bargain. You click Buy Now and then this View Cart up here appears.
We click that. There is our checkout. With this one you get a free domain name, so that
s really good if you haven t got your .co.uk or whatever .com sorted out. I suggest that
you would go for this one and get your domain. Now here s the promotional code box. If you
type in here wpeagle and then click Redeem you ll get 10% off. Obviously make sure you
do that. As I said, I do get a small little reward for that just to show your love for
these videos that I m making. That s great. Once you ve done that click on checkout and
here you go, either log in, but you probably haven t got a log in so you ll need to create
an account which is this button here and you need to fill in all these details. Click Register,
then go through it would ask for payment details and then you're all done. What will happen
is they ll set up your account, they ll email you some details and a log in. Then with that
log in we can start setting up our website. Let s move on to that now.
Hopefully you signed up okay with TSOHost [00:04:00] and they emailed you your log in
details and you ve gone and logged in. Hopefully you can see a screen that looks something
like this. Now this is your dashboard with your hosting. This allows you to create your
new website, so that s what we ll do. To do that you click Add New Website and here you
enter the domain name. If you just registered one with TSOHost you enter that here, or if
you already had one maybe with another registrant you need to enter that here. Just on a side
note, if your domain name is with another registrant you will have to update the DSN
settings in order for this to work, but hopefully that should all become clear and TSOHost will
with TSOHost it will just work. Let s enter our domain. I m going to use this
one 2015wpeagle.com. That s the subdomain but obviously your website will just be the
top bit, so just wp.com or www.wp.com. It s up to you, but just enter in here whatever
you d like. Then we re going to choose Linux which is the recommended option and then click
the button and it s done it. Now we re ready to install WordPress. To do
that if you just scroll down to the bottom of this page and click Install Applications.
It s going to load up a page where we can basically just use this kind of auto install
feature and get WordPress installed without too much hassle. It s the very first option
on this page and just click Install and don t change the path. That s the main root of
the site so that s fine and just click the button. Now this is going to take a few minutes
so I m going to go and make a cup of tea and I ll see you in a minute.
Hopefully that didn t take too long for you. I ve got my tea. Maybe you ve gone and gotten
a drink too, because yeah, it does take three or four minutes. But we re all done now so
we can now go and log in to our WordPress installation and get started at setting [00:06:00]
up a really cool website. What it does when it installs it creates a username and password
for you to use in there in the screen box on the screen here. To log in all we need
to do is come down and click this button and it s just going to open up a link here. Just
click that link. Now that you re able to log into a WordPress
site you go to your website.com/wp-admin and it ll bring up this screen. Now I don t know
why it s filled with all this in, but it should probably be blank. The username is this one
here. I m just going to copy it. I don t want that last little speech mark get copied, do
the CTRL C there, and then paste and get the password here and paste that. If we re good,
log in. It s going to take us into WordPress. Now with this installation it installs this
plugin Clef. I m not sure what it is, I haven t used it yet, so ignore that for now. What
we re going to do is we re going to create a new user because the automatic user is a
bit difficult to remember. If you go to users and then Add New, type in the user name that
you remember. I ll use WP, I ll remember that, and put your email address in and your name
if you want to, you don t have to, and then a password that you re going to remember.
Then we re going to use this account going forward rather than the one that was created
for us. Make sure that you set the role to administrator.
That gives you full power over everything and then click Add New User. Obviously in
the future if you only give other people access to your website, maybe you want them to create
content, whenever, you can come in here, create them their own user and password and they
can log in. The different roles basically allow people just to write stuff or edit stuff.
You can check it out in the WordPress website if you need more info on that.
Now here s our new user. That s what I m going to be using. What I m going to do is I m going
to log out [00:08:00] now and to log out of WordPress you go up to top here and click
Log Out. I m going to log in with that new one that I just created which was wpeagle
and my password. It s remembering me because I did a little test run on here, but hey let
s click log in. Now I m logged in with that new user and we re all good to go.
If you want you can come in here and delete that user that was automatically created.
I would recommend that just for security, so I m just going to come here and click Delete.
Then I m just going to attribute all the content to me, not that there is much in the demo
stuff. Just click Confirm and it s gone. It s just me there ready to go.
The next step in creating our website is we need to install our premium theme. We re getting
our premium theme from a website called Theme Forest. I m going to put a link up on the
screen in a minute. We re going to go and buy it and we re going to download it and
we re going to install it. Let s go and do it.
This is the theme we re going to be using. It s called 3Clicks. It s a theme that I ve
used a number of times and I really love it. It s really flexible, really easy to use,
and just creates really nice websites. There s a link up on the screen. Now if you would
do the honor and click that and purchase that through that link, it s only $58, I will receive
a small commission in return for that, but again, it s just the way that I can make a
little bit out of doing these videos for free. Come to Theme Forest following my link. Sign
up if you don t really have an account, and then you need to click one of the two buttons
here. You can either Add to Cart if you're going to buy some other things or just buy
now straight away. I ve already bought it so I can download it
already. I m just going to click here to download the theme. I m going to save it on my computer
in a folder where I can find it. There we go. That s downloaded. I m just going to show
you that on my computer. It comes as a zip file so you're going to need to [00:10:00]
have to expand it, I think it s called extract it. I m just going to extract that. Obviously
you do that on your PC how you do it. I m just doing it on the Mac here. Within there
you get a folder which has got some more folders in it.
Now we re ready to go back to our website and upload this that we ve downloaded. Back
to my browser here. Here is the website we re on and on the Users page what we need to
do is go into Appearance and Themes and then we need to click Add New and then on top here
is there s this button Upload Theme and then we need to browse on our computer to wherever
we downloaded that file. Here it is. I m going to go and there s two files we need to upload.
There s the main theme, which is this one here 3Clicks and then there s the child theme.
Let s do the 3Clicks first. Just select that and then click Install. That s just uploading.
It s doing its thing. Takes a minute or two. It s a good time to have some tea. Excuse
the slurping, quite a bit hot. That s done. Let s just return to the Themes page. We need
to install our second file, so again Add New and then Upload Theme and choose the file.
The reason we have a child theme is basically in the future if you need to do any customization
to the theme, which we re not going to do right now, but if you do it means that whenever
the theme is updated by the developer your changes don t get lost. It s always a good
idea if there is a child theme to use it. That s done and then if you click Activate
our theme is now live. [00:12:00] It s now saying that we need to install some plugins,
so it s a good idea that we do that, so let s click begin installing plugins.
You should just be able to tick that box at the top which then in turn takes all of them
and then go up here and then click Install. That s going to go away hopefully and get
ahold of those plugins and install them. Plugins is basically a little piece of software that
goes into WordPress and gives you some extra functionality above the basic stuff. There
are tons and tons of plugins available for WordPress, some of them are free, some of
them you have to pay for. But everything from forms through to adding maps, adding images,
adding a diary, basically anything you can think of, there s usually a plugin out there
that you can go and download. It s done these plugins. We ve got Maps one,
the Page Builder, some Social Icons, all stuff that we need for our theme. With that done
we might as well go and have a look at the site and see where we re at. As you can see
it s kind of starting to look a little bit like a website but obviously there s a few
bits missing so we need to start putting it together.
Now what I m going to do is the theme comes packaged with some example content or demo
content as it s otherwise known. We re going to install that demo content and then we can
basically just change that to make it fit what we need. It s basically a good way to
get started because you can see how things work and you can play around with them and
you're not starting everything from scratch. To install the demo content I m going to go
back to the dashboard. Now when you're logged into WordPress you get this bar on the top,
so it s very easy to go back and forth. Then I m going to go into Tools and I m going to
go to Import, Import, then I m going to select WordPress and it s going to want to install
this little plugin so I m just going to click this button Install Now. Then I m going to
click Activate Plugin & Run Importer. Then I need to choose [00:14:00] the download content
file which is within here, so within the file that you downloaded that you extracted there
s this folder here called Demo Content. I m just going to select this XML file and click
Upload file and import. Now there s a couple of authors that it s
going to import, which is fine I think for now because it makes it easier to separate
the content out. We ll obviously delete them at the end. Then there s a button here that
you need to tick and it s going to download images and stuff like that. Let s just run
that. It does take a minute or two. I m just going edit.
That s all done. It s kindly reminded us to update the passwords of the imported users,
which is a good idea. Let s just go back into Users just for security and these two that
it s imported, let s just click Edit and just scroll down to define role and just put No
role for this site. Not that they would ever log in or anything like that, but you can
t be too careful. This one too, just scroll down, change the role to no role.
What that s done is created lots of pages for us that we could start having a look at
and deciding which ones we like. To find the pages you go into Pages and All Pages. You
see there s lots and lots of pages now in our website which we can go and have a look
at. There s one more thing we need to import though, which is the sliders. To do that if
we go to Revolutions Slider down here, which is a great plugin I must add for creating
sliders. Now the slider is the thing you have on a homepage where there s images moving
around and it looks really cool. [00:16:00] We re going to come here and click Import
Slider. We re going to click Choose File and again within that demo content folder that
we were just in there s rev sliders. Let s start by doing the home slider. Home slider
1 and then click Import. That should work. Now we can go back to our pages. Let s have
a look at one of these homepages. I m going to go to All Pages and go to just Home and
I m going to click View. This is going to take us back to the front of the website and
here is a page which would make a lovely homepage. It s already looking like the demo kind of
site. All these things we can then start digging and then changing to suit our needs.
Let s go back and have a look at a few more pages and then we ll chose. I like that one
and maybe one that looks better, so I m just going to go back to All Pages. Obviously the
pages that we don t use we re going to clean off at the end and delete them so that we
don t have lots of pages that we don t need. Let s have a look at homepage 2 and click
View. See this one has got a slightly different slider and a bit of a different layout. It
s really up to you. I ll just stick with the main one, the homepage, for this demonstration,
but obviously hopefully what you learn from that you could maybe decide to go for something
else. Now what we need to do though before we start
playing around with pages is get the look and feel of the site working properly. I think
get a logo up here and get the color scheme working. Let s do that now. Let s do the logo
first. I m just going to stop this. My computer is running a little bit slow. Hopefully it
will recover in a second. We re going to go to back into the Dashboard and then all these
theme options under Appearance and Theme Options [00:18:00] and there s basically loads of
stuff in here that we can change. The first thing I m going to do is get rid
of this annoying message and let s start going for these options. I m getting distracted.
We re going to do the logo in a second. Footer text is the bit of text you see that it appears
in the footer. Might as well do that while we re here. It s got a help mode and it s
got some of the stuff which I m going to turn off because it s a little bit distracting
for me when I m doing the demo. But you might want to keep it on. It gives you little tips
as to where to put stuff. I m going to leave the Scroll To Top on. Then whenever you make
a change obviously make sure you click that button up the top there or down the bottom
there the Save Changes. But anyway, before I get distracted again let s do the logo.
That s on the branding. When it comes to logos basically you need two versions of your logo,
one that s just normal, and one for retina screens or high dpi screens. Basically that
s just a logo that s twice as big as the standard one. I recommend for your standard logo it
needs to be 200 pixels or so wide so therefore for your high resolution one it needs to be
about 400 pixels wide. I ve got my logos ready to go. I m just going
to click Upload to upload them to the website. Click Upload Files and Select Files and then
find your logo on your computer. I ve got this one here called logo. This is 200 wide
and 77 high. You can see the dimensions over here. Then you can type the dimensions in.
That s right, 200 by 77. Then I m going to upload my high resolution one, which is double,
so that s 400 wide by 155 high. That s it. Then if we click Save Changes then go up here
and click View Site, Visit Site even, [00:20:00] there is our logo.
The next job is to change the colors. Before we do that I m going to put myself back on
the screen. Hello, you notice I ve changed my clothes. That s because this video is recorded
over a few days because it s quite a long one so if you do notice that that s why. But
anyway, without any more of that chitchat let s carry on and change the colors on the
site. Let s dive back into the options, the theme options which you ll find back in the
Dashboard, then under Appearance and Theme Options.
Now I ve got some color codes that I ve got in my little notepad file here which are the
colors that I use. They re from the logo on WPEagle type, so you hopefully will have these
colors to hand. Again, you might be able to get them off your logo if you know how to
use the dipper tool, the perpet tool, whatever it s called in the Fireworks Photoshop, you
can get these color codes, or you can obviously just add whichever ones you want.
Let s go into Style and then we ve got the main colors here. You ve got the Body Background
which is okay at the moment with just that white color I think. You can add an image
if you d like here. Then we ve got the Top Background again which is a great color. That
s kind of fine, so let s just move through the different sections. The first thing is
the Preheader. What I ll do is I ll open up the site so that we can see in another tab
where these colors actually are. Now this is the preheader which is right at
the top here which is a cool place to add some stuff, and it s just loading. This little
red bar we ve got across the top here and you ve got this little theme that pops out.
There s nothing in it yet so that s that red bar there. I ve got a nice orange color that
I like to use. I m just going copy this color code, d36629. I m going to paste it in here.
Obviously if you haven t got the color code you can just select the color off this lovely
color selector thing, if there s any more colors [00:22:00] the text and that s fine.
What I m going to do is I m going to make these other red colors my orange colors, so
I m just pasting the color code in, click Save Changes. Then if we refresh we ll see
that something s changed. There just about. It s very similar to the
red. Let s change this next bar. That bar there which says Blog which has the page title
in, that s the next part of the site. I think that s called the header. If we click on Header
we can go through. Here you can play with your logo margins and your navigation. Not
margins, we might need to come back to that later. Is it the header or maybe is the pre-content?
I don t know. I m just going to update this link color. Save changes.
Then we ll go to the header, sorry the pre-content I think is called. That s that red background
color, change that. We might need to change these colors. Let s see what it looks like.
We go back and refresh this page. That s looking & It matches the logo color. There s still
quite a few bits of red dotted about so we need to update all them, which I think I ll
update, I ve got some other colors here, might as well use them. I ve got brown and I ve
got yellow. Let s go for yellow. I m going to copy that color code. That s part of the
content, so if we go down into content I ll make these yellow. If they look rubbish we
might change them later, but we ll see. That s the thing with website. It doesn t
like that. Have I not copied the whole thing? Got a space on the end. Yeah, that s the thing
when designing websites, [00:24:00] you just have to keep playing around just until it
starts coming together and looking as you want to. That yellow is & My colors have gone
wrong. This is how I get my colors. As I said, I used the perpetual within Fireworks so I
can get my logo and just say I want that yellow and then I can copy this code here which is
actually FDC671. I must ve noted these down wrong. Let s update that. That s more like
it. Save changes and if we refresh again they ve gone yellow. You see it s quite light color
you see. Maybe we should have the links a darker color. Just pick a dark color off the
logo, one of these darker browns. I m going to update my notes just so I ve got them to
hand if we need them. Let s go back here and change the link color
to a & I think the buttons look okay. We ll do the buttons too. This is the Distinctive
Color Schema is where the buttons color are. Is, my English is great. That will do for
now I think. Yeah, nice looking. Too bad it s starting to match the logo quite nicely.
There s obviously some more colors. Let s have a look at the prefooter. I m just going
to change & That s quite dark colors. I think we ll need the orange again, the background
is quite nice, so let s go for orange. Again, I think let s [00:26:00] leave that for now
and just see how it looks when we get going. Let s just refresh our website and have a
look. I think what we need to do now is go back to the homepage. Oh, in fact we even
haven t got a homepage. We need to set our homepage. Let s do that and let s start setting
up some of the other pages that we need. Back into the Theme Options and I m going to go
into Pages. Here we can select which pages we want to be our homepage.
Now as I said earlier we ve got all these like pages from the demo content. I quite
like home so we re going to start with that. There s a couple other that you can allow
comments on your pages and trackbacks if you want, I don t tend to have comments on pages,
but you might want to. I generally have comments on blog pages.
That sets it. Now if I go back to the homepage I m just clicking on the logo, here we go,
our homepage has obviously taken onboard our colors there, so it s not looking too bad.
Then we re going to start editing this in a second. One thing we ll do is we ll decide
what other pages we re going to have and add the navigation so that it looks a bit more
like a website. To do that let s go into the pages. What I
m going to do I m just going to select the pages that I think I want and remove the ones
I don t . I want an about, I don t want all these other homepages, so what I m doing I
m just going to tick them all. Obviously you're going to delete whichever ones you don t want.
We ll keep the Portfolio, keep the Blog, I m going to get rid of these sub things that
are just like examples, and these pages I m going to just get rid of that one, I m going
to get rid of that about actually because that s the default WordPress one, there s
nothing on there. I m going to keep that About Us page. We ll add the Careers page for now.
That s okay so let s move those to trash. [00:28:00]
I m going to delete all these shortcode pages because they re not going to be very interesting.
This is where you can see basically all the different & A shortcode is a way of adding
like a feature, so like a button or an image or a table [inaudible 00:28:22] on my shortcode.
What I suggest if you want to find out the shortcodes have a look at the demo on the
Theme Forest for 3Clicks and they ll will be showing there, which you can use. Just
move all those to trash. Contact us with the map I think we ll have,
I m going to get rid of these standard contact us. We ll have the FAQ and the history and
maybe the pricing and the services. That will do for now. Obviously you're going to decide
whatever you want. There s a lot of different pages. As you can see there s loads of things
that this theme can do, so you need to have a good look for all these and decide which
ones you want. What we got left? These are all again example
pages. Let s just get rid of all these. Can t be that many left. Don t want any of these
Special Pages. Hopefully this will make sense. Obviously anytime during this video if you
get stuck or you have any questions please just leave me a comment or send me an email
or tweet me and I will answer it for you and help you out. That s no problem, no problem.
Let s get rid of these last ones because it s dragging on this now, [00:30:00] isn t it?
All right, I think that
s it. Good. I just want to explain a quick couple of things
with these pages. You notice that these ones are kind of jutting over to the right is because
they had a parent page, so you can kind of order your pages in a logical tree like structure,
say for example you might have a services page and then below that you might have a
page for each one of your services, tax returns, whatever is your accountant, that kind of
stuff. Those services pages would be a child page of the main services page if it makes
sense. You d have services as the main page and you d have tax returns as a child page.
To set that you can do it with a quick edit. Because I ve deleted this one s parent it
doesn t have one, so I m just going to set it as having no parent for all these pages.
The About Us, the Careers, it s just going to be main page, the Contact Us, yep, oh main
page, the FAQ main page and so on.
Then what we ll obviously do is dive in and we can now [tick on 00:31:30] these pages
and make them our own. There s our pages that we re going add to the site. We need to now
add these to a menu so to do which is the navigation across the top next to the logo.
We are going to Appearance and Menus, and what I m going to do is I m going create a
new menu. I m just going to create [00:32:00] Main Menu. It s a good name for it. Our pages
are down here to the side so we can just easily add those. Then View All and I just select
all of these pages. Now we seem to have two homepages. Make sure
it s going on there. We ll have to remove one of them. Yeah, I think they re the same,
so let s remove, I don t know why there was two appearing there. Let s remove that. Then
if we save the page we re going to have to rename these pages because they re called
About Us page snippet and things which is not what we want.
There s one more thing we need to do now and that s basically set where this menu is going
to appear. This theme has a couple of locations where you can add one of these menu types
things. This one is our primary navigation but again you can have a second navigation
and a footer navigation which we ll add shortly. If we go back to the website there s our menu.
As I said it s far too long because the page names are too long. What I m going to do is
I m going to go into each page now and rename it. If I click on the About Us page, the good
thing about WordPress is when you're logged in you can look around the front of the website
here and then you ve got these two About Us, you can quickly go and edit certain pages.
I m just going to call this About Us to make more sense. I m going to turn off this tip.
Here is the URL which is the website address. Again, I want that just to be About Us and
then click Update. Then if we view the page it s been renamed. I m going to do that [00:34:00]
to all these other little pages. You don t need to watch that. That s a bit boring so
I ll just do a quick edit and we ll carry on a sec.
I ve renamed all those pages so they all are sitting in one line now, next to the logo.
But you notice that they re sitting a little bit too high. I would prefer them to be more
in line with the logo. We re going to adjust that now. To do that I m just going to close
this tab, we ve got two more tabs, go back into the dashboard, the backend here and then
we re going to go back into the theme options. If you remember we saw this earlier, it s
the margins. It s under Style and it s in Preheader I think if I remember correctly.
No, it s not, it s in header. It s in header. That d be the one.
Here we go, we ve got some margins. I think the primary now just needs a bit more sorting.
What I m going to do is just put that to 50 and save. Then if we go back to the front
of the website, that might look better. There we go. This is more in line now and it looks
a bit nicer on the eye. The other thing we want to do is rearrange
all of these because I d rather have contact us at the end and maybe just reorder these
so they make more sense. We need to go back into menu. You can access it straight from
here. Or it s in Appearance and Menus. Back in here, and again, the great thing with this
screen is you can just simply drag and drop. I say I want the Contact Us right in the end,
let s put that there. I ve put the About Us there. If you want you can actually rename
even. It doesn t have to match the page name so even though the page is called about I
could just have that as about [00:36:00] and I could have this as contact. I like that.
Let s move the Careers down. Again, if you want here you can actually nest
one under the other. I ll do that so that you can see what that & The careers would
be underneath about. Again, if you ve got that as a parent, that makes sense. Parent
pages I was talking about earlier. That will do for now and I save that. Let s go and have
a look at the website. There we go. All nicely arranged. If we come to About there is our
Careers. What we need to do now is start editing some
pages. I think that ll be a good thing to do next. What we ll do is we ll work on the
homepage and change the slider, I ll add my own images. I ll show you how to change this
text, and all these other sections as well so that we can make it our own. Let s do that
now. Let s get on with changing this slider. This part of the website on the homepage and
you can add these sliders actually to any page you want. It is powered by a plugin called
Revolution Slider we installed when we set everything up at the beginning.
I m going to change these images and this text and remove these current sliders and
add my own. Let s go to Dashboard, go to Revolution Slider which is down here. Then I m going
to click Edit Slides and I m going to delete that last slide. I don t want two slides.
We go into this first slide, click Edit Slide. There s a whole lot of options here that you
can play with in terms of the transitions, how long it takes to transition. A transition
is when it slides about and comes in from the side or fades, all that kind of & You
ve got loads in here to choose from, lots of slide-y fade-y things. [00:38:00] But I
m going to leave most of that as it is and then I m going to change the background image
so it s got a nice image behind it. I m going to click change image. We ve got
a couple of images, photos really that I ve got from a website that I highly recommend
which is called Photo Dune. I will put a link up on the video now. It s a great place to
get some really cheap stock photos if you haven t got any. This photo of this eagle
is from there. That is an affiliate link on the screen. Again, if you do buy a photo I
ll get a small commission which will be very nice. There is our eagle.
I ve got this woman thing here which I don t want which obviously that s another image
so basically with this slider you can overlay an image on top of an image and they can come
flying in and all that kind of stuff. I don t want that for now. I just want a bit of
text. Here s some text. These are just layers and you can just very easily just move them
around and make them say what you want. This is a demo. Hang on. This is a demo. Here we
go. [Inaudible 00:39:17]. Using 3Clicks. Keep forgetting to press enter. Using 3 clicks.
View video on YouTube. What you can do is you can make the slide
basically click through to somewhere, so for example if you go up here we can say Enable
Link Regular and we can link [00:40:00] through to YouTube or another page on the website,
whatever we want. Open in a new window. There we go. I think that s about it for now. I
think that slide looks pretty good. Let s update it. If we go back I m going to open
it in another tab just so that we can flip between the two. We should see our new eagle.
There we go, looking pretty cool got to say. Let s do this, the second slide, with something
different. Back to Revolution Slider. You can navigate between the different slides
along here. If you want you can rename so that it s something a bit easier, so if we
go back to this first one, and again, you can actually drag and drop them again to rearrange
the order. We ll click Eagle Slide so we know what it is and need to save that down the
bottom. Then if we go to slide, the next one. Again,
I don t want this big image, but again you could add the image is coming over, whatever.
There s quite a few different layers on this one so I m going to click delete all layers
for now. I m going to do this one from scratch. I m going to select the background image again.
I ve got another image which again I ve got from Photo Dune.
In terms of the slider size I recommend you do them as wide as you possibly can and obviously
whatever height you want, obviously not too high, it depends if you want to take up the
whole screen or just the top. For the moment these one are 450 high and quite wide because
revolution slider does fill the entire screen. It s something we nowadays have very big screens,
so you want to make sure they re really wide. This is a lady looking at some things with
her laptop. That s okay. If you wanted to add some text [00:42:00]
simply click add layer and then we can enter our text here. Hope you like our site. I don
t know. This is just for demonstrations. Here it is a little bit of text. For a change of
style on that there s all these kind of built in styles. That s big. If you want something
with a background it s a nice red sort pinky type one.
We could add another layer. Ask a question if you get stuck. We can have that in white.
That looks right, doesn t it? Let s go for that update slide. If we go back and refresh
our homepage & Come on computer, reload the page. We re supposed to have superfast broadband
here but it never quite feels like it, does it? That s the first slider. You can click
onto second slider. There she is. That s looking quite good. Though that pink doesn t really
match with the orange, but I don t think that really matters for now. Obviously we re not
going to try and make a perfect website in this video, but you get the idea.
Let s move on to the next part of this page in terms of editing and we want to change
this line here and we can change the words in this button, change these columns and just
start working through. I ll show you how to change these different elements. While we
re here we might just click Edit Page on the homepage [00:44:00]. I ll close this other
tab to avoid confusion. This is our main page editing screen where
we can basically do everything we want to to a page. This theme comes with a page builder
which you're going to need to turn on and you do that by clicking on this massive big
button here. This gives us a very visual way of laying out content and editing it and all
that kind of stuff. What I will do actually to make things easier I m going to open this
page in another tab just so that we can see. This is the first bit. It s called the pre-content
and it says, Let s give your website a brand new look, and then here is a button. If we
look on the front, there we go, that d be there.
If we wanted to change that bit this is some HTML. If I click on the little pencil, Welcome
to our demo site from WPEagle. Save. Then if I wanted to edit the button I go into here
and click on the little pencil. Now this is an example of a shortcode, which again I say
you can find all these if you look at the 3Clicks demo. They re all listed there with
a bit of code that you can copy and paste. This is a button, it kind of starts with a
little square bracket and then the word button and this is the link, so that s where it s
going to link to. I m going to link it through to YouTube. When I m finished I m going to
obviously link it through probably to the actual video that you are watching right now.
But as I m making that I can t link to it yet because it s not finished. Anyway.
You can either resize this, style and simple, but, again, I say look at the 3Clicks demo
and you can decide. I m going to change that to View Tutorial Video. Then when you make
a change you obviously click Save. Then you ll need to update the page [00:46:00] which
is this button over here whenever you change anything on a page or post you ll need to
make sure you save it with that. We go back and refresh our own page. That s changed.
That looks good. The great thing about this theme and this
virtual tour is you can drag stuff around. Say for example we wanted the button on the
other side. I can drag over here. You see that s gone I ve got orange-y red color where
the plus is, it s going to put it there, so if I do that it s now there. Let s update
the page and refresh here and you ll see that s moved over. That s really, it s really easy
to lay stuff out. I m going to put it back because I think it looks better on the right,
so I just move that to there. That s the pre-content. That s that code bar
across the top of the page. Now if you want to, if you re creating a page from scratch
and not using one of these demo pages and editing it you can find all these elements
along the top here and then you can just simply drag them in. If there wasn t a pre-content
on the new page you re creating you just drop it in there. Then say these columns here,
they re along here, so that s a two third column, you just grab ahold of that two thirds
and that s there. That s a one third column so we grab that one third. Then here is what
s called HTML but it s basically what you ve done to your text.
We d go into the content and [inaudible 00:47:27] HTML and click Edit and then you know you
just & This is an example. I m going to delete it in a second. I just want to show you this.
If you want to format any text and if you're familiar with this I ve got some videos on
the WordPress backend. You need to have a look on my channel when you find more videos
on how to use this in more detail, but it s a bit like Word really, so I always say
toggle that, you get a few more options, but if you wanted to make this a heading you could
highlight it and make it a heading. If you want to make it a link [00:48:00] you click
on the little chain and you can link through to wherever you want.
I m going to save that and update, I ll just show you what that looks like. Let s refresh
this homepage. It s going to add another pre-content at the top and it s broken the second one
because you can only have one pre-content. But you get the idea and there s our link.
What I m going to do is to remove things, go back, I can just click on this little cross
here. The 3Clicks theme does come with lots of tutorial
videos itself, so again, have a look at those and you ll get familiar with this. Now we
are down to the next section. It s called a section and if we look at the front it s
this, I m just going to refresh that bit that I broke and it s all back to norm. Free nice
little area here so and these are here so I ll just click on the little pencil. It s
using an icon. You want to find out what these icons are. They're called Font Awesome Icons
so if you google that you ll find what they are. I can change this text to whatever I
want. Free Video Tutorials. Oh dear, my spelling is good today.
Then now I can change this text to whatever I want. We make some great WordPress tutorial
videos for free that you can watch on YouTube. Here is a link, and that s linking for you
to a page. If I were to link that to one of my pages that we ve got on the website I click
on the little chain and there s this option here that says link to existing content and
there s some of the direct content. Here is our page, so if I wanted to link to the About
Us I just click on [00:50:00] About Us and click update and that it s done. Click Save,
click Update. Then if we click, there we go, it s changed it. We re putting these in a
line or so because they don t all line up, a nice thing on the eye, but that s up to
you and that s whatever you want to do. I can go and change these other ones. If I change
them all to two lines they all look fine. Go back I ll just do one more for you so you
can see. If you wanted to change the icon I ll show
you what I mean by the fonts. If I fire up Google quickly and just type in Font Awesome
Icons it s the first link that comes up on Google. They re all here, all the different
icons. Say for example I wanted to change this icon, this little one to a bus which
was that one I saw there. If I click on bus & Where s bus? There s bus. It s just called
bus. You simply go back to your page where it says Icon Magic. I ll just say Icon Bus.
This column was used to demonstrate icons in the video you're watching, or you're about
to watch. I won t put the link again. I mean we know, you know how to do that.
Let s click update. Then we re going to refresh the homepage and hopefully that little one
is a bus. [00:52:00] Oh it hasn t & Let s have a look what s happened there. It turns
out that this theme doesn t actually have a bus icon, but I found this page here let
s say on the demo site which is where you should come when you're looking for shortcuts
and icons and it s got a whole load of others. Let s just change it to something else, like
a rocket. Let s go back. I tried a bed. That didn t work even.
You don t need & Obviously all the Font Awesome Icons aren t supported on this theme which
is a shame because I know plenty that are but there s still plenty to choose from. Let
s see if that rocket works. There we go. It doesn t make any sense now. I tried to do
a rocket icon. I hope I didn t confuse you too much. I ve decided not to edit that out
because I though you should see the process that you go, even I go for I ve used this
theme a lot and you still kind of there s a bit of trial and error involved when making
websites. That s okay. That s how it works. I think that s making sense now. We change
those things. We can move down to the next section.
This is just like a really big area where we could add an image. Let s add an image
to this bit here. What you can also do is change this background color so let s go back
to the editor. Here we go. Here is the text and here is the image. I m just going to click
on the thing, on the pencil. Then if I click on this image we can edit it by clicking on
the pencil. Actually what I m going to do is I m just going to remove it because it
s easier. Remove that. It says Add New Image, I m going to click Add Media.
I ve got a file here with [00:54:00] another one from Photo Dune. It s just a random picture
of some happy people. Here s my options that s there. I don t want to link, so if you do
obviously you set it here so you want to be able to click on the image and then go somewhere.
I m going to add it as a full size image, click insert. There we go. Click Save. Let
s update and see what that looks like. There they are. Now I think they need to be aligned
in the middle ideally. Let s go back in. I ll change this text so that it s my own. Let
s scroll back down to where they are so I just click here. Then if I click on the image
then I can just simply do the align here, align center. Click Save.
What this is here there s a bit of a space between the image and the text. Again, you
add these things along the top here. You ve got space and nice and easy drag and drop.
Let s just change this text. You can do it. Follow my video tutorials and you can make
your own website all by yourself. Let s update. If I wanted to [00:56:00] change this background
color here, it s a nice gray at the moment, but if I wanted it to be something else maybe
an image or a different color you can do that. In here you go back down to the section. The
section itself has a little pencil. Lots of different options. There is the color there.
Click a green, click Save. It s going to look horrible with that green, but hey, just for
this example. There we go. Or you can even make it an image. Let s go
back down here, the little arrow on the section. Background image. You need to actually paste
the URL of the image, which is fine. To do that we d go in the media library. Obviously
these are just all the demo images. Let s add a new image. I m just going to use one
that I just downloaded from Photo Dune, I think it s the lady one again but a bigger
version, the lady in front of I think. If I click on that image there I ve got this
URL. That s what I need. I m going to go select all of it on my Mac, that s CTRL B and then
copy it. I think it s CTRL C on a PC. Then if we go back to the homepage, edit page,
and scroll down to that section that we re working on. I m going to paste that in there,
click Save, [00:58:00] because I know what this is going to look like. I mean probably
for a background image you might want some abstract things but whatever images you ve
got. I accidentally clicked edit there. Then View Page.
There is our background image which is just sitting there in the middle. It doesn t obviously
look right, but yeah, you get the idea. What I ll do is send it back through color just
for now. Felt gray is quite nice. But obviously the world is your oyster in terms of the kind
of things you can do there. There s a few more options there you can play with.
The next part of the site, of the page you ve got the & There are more free columns that
s using. That s a count to shortcode. That s a list and then you ve got some client testimonials.
I ll just quickly show you what they are. This is the flashy kind of presence, whatever,
icon description. I don t know what it s all about really, but you can easily change that.
We could change it to the game pad and again obviously change the text. We love video games.
I m just going to save the page. That should change this presence into a video game controller.
There we go, it was doing it then. See the game pads doing their thing. That s good if
you want show off stats about your business or organization. You can. [01:00:00] That
s a quite nice visual way of doing it. Here is our list. The list uses this. There
s a little bit of code in here. But again, if you edit what you see then you should be
fine. Basically all your little bullet points, these, just have to sit between this LI in
the brackets and the /LI that each one sits in between there. If you just edit that, if
you need to add some more, just copy and paste, and then you can add some more. That s quite
easy. There s a few other options here. You ve got the chevron right. We can change it
to whatever icon we want, cloud, that s fine. You ve got a few options there, icons, circles,
whatever you like. Here is our testimonial carousel. Again, here
I ll just show you on the front you can have whatever you want. It s kind of scrolling
around. At the moment we re using it for testimonials, but you could have whatever you like and say
images beats text. Again, here s another shortcode, for example, on how these work. Go back to
demo, which I have actually got open here because I was looking at those icons. You
come to demos obviously at 3clicks.bringthepixel.com or you can find it on the Theme Forest page
that you purchased the theme from and here s all the shortcodes. That s a testimonial
one, so click there. It shows you how to do it. Then you can just get just simply like
copy and paste and then just change what you need to.
That s item one. Item two you can add another one if you want. If I wanted to change it
so that s the name. I change that to YouTube viewer, viewer. There we go. I could change
the text here. I love WP Eagle videos. I watch them [01:02:00] every day or something. Let
s update and see what we ve done there. There s our testimonial. It s just loading. That
s why that looks funny. There we go. We re starting to customize this page quite
nicely. We come down to recent works which we ll go onto now and I ll show you how this
section works and how the works in general work. It s kind of a portfolio section is
another way of saying it. We ll get that looking a bit better. I ll add a few videos from my
YouTube channel as an example of works. Then we ll finish off changing these last bits
at the bottom, the map, et cetera. Then we ve got a nice homepage and the website is
really starting to come together. So keep watching. You're doing well. We re
probably three quarters of the way through now hopefully. I m saying that before I ve
recorded the whole video so I don t know how much more there s going to be, but yeah, we
re getting there, and hopefully you're starting to come together too. Let s move on the portfolio
works type section. This area is powered by what s called works
and they are a great way of showing off say you ve got some case studies or maybe you
ve got some video or some images, those kinds of things. It s a great way of, yeah, showing
that off. These are all the demo ones. I got blurry images because they don t come with
images. But what I m going to do is I m going to create a new [inaudible 01:03:33] changes.
You can have a look at these and edit them, but I m going to add a couple of videos just
to show you how it works. If I go up to here to New and then select
Work I ve got me one of my YouTube videos up here. It s called How To Get Traffic. Then
down the right slider you ve got some options in terms of what sort of thing it is. Obviously
it s a video [01:04:00], so if I click video a box appears here where I can just paste
the URL. I m going to get that YouTube URL, put that in there, then put This video is
about getting traffic. There s some categories here that were already created with the demo
content. Obviously you can add your own. It s a good way of organizing everything.
Now if I go and view post, excuse me, there is my video which obviously plays nicely.
But if you go back to the homepage that will appear in that section down here. There it
is, it s got like a black and white effect going on. What I ll do is I will add some
more, I ll add five more just to fill this up with different videos and yep, I ll be
back in a sec. Let s do a quick edit. Hey, so I ve added some of my videos. You
ll see them here. They look quite good. But we can change the effect of this. It s got
a few different effects. If you don t like a gray scale color-y thing going on there
we can change it. Let s edit the page. If we scroll down to that section there s a couple
of things I want to change. This first bit is the header which is called Recent Works.
It s white, which is why we can t see it. That s fun. But if you add it to the text
editor you can see everything in there that s going on. I m going to change this to recent
videos. It makes more sense because they re all videos.
Then here is the recent works component. Again, if you wanted to add [01:06:00] this fresh
you d find it up the top here, and collections, there s some post works and stuff like that.
Then you drag it. Obviously we ve already got one. If I click on the pencil I can edit
the options. The effect there at the moment is grayscale. I can turn that off. Template
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