April 8, 2020
How to MAKE A WEBSITE 2018 with WordPress and Elementor

How to MAKE A WEBSITE 2018 with WordPress and Elementor


– In this video, I’m gonna be showing you how to make a website with WordPress. The site we’re going to be
making looks just like this. And as you can see, it’s
a nice-looking website. And of course, you can
change it so that it looks how you want it to look. The great thing about using WordPress and the theme that I’ve
chosen specifically for you is that it’s really easy
to put webpages together. One of the problems with creating webpages is it’s often quite
difficult to get started. But the theme that I’m
sharing with you today allows you to create pages from templates, either a block template or
a complete page template. And then you can simply edit
it and make it your own. When it comes to editing, that’s
really straightforward too. The whole interface is drag-and-drop. It’s really intuitive. So if you’ve ever used
something like Microsoft Word, you’ll be just fine creating these pages. Now, don’t worry if
you’re a complete beginner and you’ve never made a website before or used WordPress before. I’m here. I’m gonna take you
through it step by step. I’m gonna hold your hand. And I’m gonna be showing you exactly what I do every step of the way. I’m also here to help
you if your get stuck. So if that happens, just leave your question
below in the comments, and I’ll do my best to answer
as many as I possibly can. I also do a live stream every single week to help the viewers of my channel. So you can us on there
and ask your questions, and I’ll answer them live. The website that we’re creating
today is really flexible. So you can use it for pretty
much anything that you like, maybe a business, maybe an organisation, a club, a portfolio to show off your work, anything you like, really,
it’s that flexible. So I think it’s time we got started. (soft music) Hello, it’s Alex here from WPEagle. I hope you’re all well. Thanks for watching. If you’re new to my
channel, why not subscribe? It’s really easy to do, all you gotta do is click on the little
red button down there that says subscribe, and
if you click the bell, you’ll be notified when
I upload new videos. Now, I’m planning a load more
videos around the website that we’re creating today, showing you how to do some other cool stuff with it, so you’re not gonna want to miss those, so I suggest you do the
subscribe thing right now. This video is on how to create
a website with WordPress I’m gonna be showing you
exactly what you need to do from start to finish, from
setting up your website, hosting through to installing WordPress, adding pages, adding a contact form, basically everything you need to get your website up and running. We’re gonna be using
WordPress today to create our website. And I’ve chosen a theme
to go with WordPress that’s really easy to use. It’s got a drag and drop interface, so you can easily just add
elements to your pages, and it’s got a whole load
of built-in templates. So, if you’re struggling to get started with a design for your
page, there’s a whole load of inspiration
that’s already built in that you can quickly add to your page, and then just customise
it to make it your own. Now, try to keep the
cost down to an absolute minimum, WordPress is free, the theme we’re gonna be using is free, and a few other bits of software that we’re gonna be using today, they are also free. However, there is a couple of things that you need to pay for. The first thing you’re
gonna need is a domain name. So, a domain name is basically, you know, the .com, the .co.UK, the .net, the . whatever, there’s a whole load of domain name extensions available nowadays, and it’s what people type in to access your website. You obviously can’t have
a website without one, so you are gonna need to register one, and the cost for that is
around $20 for the year. Now, if you already got
a domain name registered, that’s great, I’m gonna show you how you can use that in this video. The next thing you’re gonna need is your website hosting. That’s basically a
service that you pay for to a company, and they
put your website online, they add it to one of their servers and they make it available on the internet to your visitors. You are gonna need hosting in order to get the website up and running, but luckily I’ve secured a great deal with one of my favourite
hosting companies, I’ve got a voucher code
that I’m gonna give to you in the video that will get you one of the best prices online. So, if you follow my recommendations and if you use my voucher code, the cost for your hosting is gonna come in at just $65 for the year. So, there are the costs, the total is just $85 for the year. So, top of my head, that comes in at what, $7 a month. That’s hardly anything for what is gonna be a fantastic website. So, we’re almost ready to get on the computer and start
creating our website. This video is quite long, so you might have to kind of watch it in chunks, and to make it easier to do that, I’ve added a whole load of chapter timings in the description, and that will allow you to quickly navigate through the video, skip forward, skip back,
whatever you need to do. You’ll also find
everything that I mentioned in the video, again, in the description, you’ll find links and voucher codes and whatever else I talk
about, all the details will be down there too. Please be aware that any voucher code that you use or any link that you follow may be an affiliate link, which basically means I’m gonna earn a
very small commission if you use it. I really appreciate it if you do use them. It’s a way I kind of earn a living and allows me to create videos like this, so, yeah, if you use
any of my voucher codes, if you click on any of my links, thank you very much. Okay, I think that’s
enough looking at my face. Let’s get on the computer and let’s get this website set up. I wish you the best of luck, you’re gonna be fine,
I’m here to help you, you’re gonna do great. Let’s get started. (soft music) The first thing we’re gonna
need is a domain name. Now, domain name is a
.com or a .uk or .net, a . whatever really, there’s loads of different extensions to choose from. My preferred provider of
domain names is GoDaddy. I got all my domain names
registered with them. I just find it easier to
have them all in one place, and GoDaddy, one of the
original registrars, and they offer domain names
at a really good price, and it’s really easy to manage them, and they offer some good
customer service as well. The question that I get all the time is, why don’t you just get
your hosting with GoDaddy alongside your domain name, and I have tried that in the past,
but I wasn’t very impressed with the hosting service
that GoDaddy offered, it was really slow and,
yeah, just not very good. So, I use GoDaddy for my domains, and I use HostGator for my hosting, and we’ll be getting
onto them in a moment. Now, if you’ve already got a domain name, maybe you registered
one a little while ago and you got it registered
over with GoDaddy maybe or with some other
domain registration company, it could be Namester,
Namecheap, or whatever, there’s loads of them. Then you can skip forward
to the next section, which is where we’re gonna be setting up our hosting, and I’ll put a time up on the screen now so you can easily just jump forward and start
setting up your hosting. For those of you that
don’t have a domain name just yet, let’s get one registered, it’s a really straightforward process, you just need to type in the domain name that you’re after, so I could just type in, you know, test
domain or whatever, something like that. I’ve actually already
got the domain registered that I’m gonna be using today, so this is purely just to
show you how it all works. You click search domain. And there you go, it says the domain is available, and I can buy it by simply clicking on the add to cart button. I can also add the .co.uk version of the domain if I want that too, sometimes it’s a good idea if you want to protect your brand
and that kind of thing to register a few different extensions. Once you’ve done that, you
click continue to cart. And you got an option here where you can add full domain privacy and protection. I tend to go for this because I don’t like spam, basically. When you register a
domain name, your details will be available to the
public on the internet, so yeah, you might want to keep that stuff hidden, and to do that, you just need to pay
GoDaddy per domain per year. So, yeah, I’d recommend you get that, but if money’s tight,
don’t worry about it. But be warned, you might get
a few more extra spam emails. And that’s all you’re
gonna need from GoDaddy. You don’t need any of this
manage WordPress stuff, we’re gonna be doing all our
WordPress with HostGator. You don’t need the
email address right now, again, you get an email
address that you can use with your HostGator hosting. So, you just go to continue. Then it’ll bring you to create an account if you haven’t got one already, if you have, then you can sign in. And the default registration
period is two years, if you want to save some money, again, you might want to drop that down to one year, but you tend to get a better price with the
two year registration. It’s only a little bit
more, but it’s entirely up to you, so yeah, fill in all this and sign up, create an account, put your payment details in, and then checkout, and yeah, once you’ve done that, you’re then ready to setup your hosting. So, what I’m gonna do is, I’m gonna login to my GoDaddy account and make sure that I’ve got my domain name ready to go, and yeah, let’s go and set up our hosting. (soft music) The next thing we’re gonna do is set up our website hosting. Hosting is basically where your website lives on the internet,
you pay a hosting company a fee, they give you
access to their servers, then you’re able to set up your website, and your hosting company will make sure that it’s online and
available 24 hours a day, seven days a week. Your hosting company is also there to help you with any
kind of technical issues and that kind of thing. The company I’m going
to be recommending today is HostGator, a company
that I’ve used a lot. I pretty much put all
of my affiliate sites on their hosting, I found the service to be really good. Performance is fast and
the support you get, if you need it is
responsive and easy to use. Another reason why I like
HostGator is they are really affordable. When you’re setting up a new website or starting a new project,
you sometimes need to keep your costs to the bare minimal, so by going for a company like HostGator, you’re able to keep
overheads low, but you’re still not compromising on service. Let’s just scroll down and take a look at a few of the other reasons why HostGator are worth going for. You’re started quickly and easily. So for example, installing WordPress or setting up an email address is really straightforward, using the
HostGator control panel. But of course I’m going
to show you exactly what you need to do
anyway, so you won’t have any problems there. If you got an existing
site they’ll transfer it for you but, you know,
we’re not doing that today. And so the other guarantees they offer, the 24/7/365 support which
I’ve already mentioned which is really good. And yeah, you just get
in touch via our LiveChat and you can very quickly get hold of a technical support assistant and ask you questions and get help that way. If whatever reason you’re not completely satisfied, they offer a 45
day money back guarantee. So yeah, this is good if you
have, for whatever reason the site doesn’t work
out, you can just simply get your money back and walk away. They also promise a 99.9%
uptime which is great. So that basically just
means your site is always gonna be available and people are always going to be able to access it. So, let’s get signed up with HostGator. By the way, I’ve got a voucher code which I’m going to share
with you very shortly which will give you
the best possible price on your hosting. So we’re going to go for web hosting. You might have noticed that
there’s also Word Press hosting and cloud hosting. But generally the web
hosting works just fine and you can instal WordPress on it. So you don’t actually need
the WordPress hosting. Standard web hosting is fine. So let me give that a click. Now we get to choose our plan. If you’re just going to be setting up one website on this hosting,
then the hatchling plan is fine. If you’re thinking that
maybe you might setup multiple websites with multiple domains, then the baby plan or the business plan could be for you. If you’ve got multiple
domains for the one site then you’re gonna probably
need the baby plan as well, so, if you did register .com and a .co.UK, then you better choose the baby plan. Any feature with HostGator
is that now all of the plans come with a free SSL certificate, which is really good because that
means that people can access your site over a secure connection. It can help your search engine rankings. And yeah, it’s just generally a good thing nowadays, to make sure
everything is nice and secure. Previously you used to have to pay to get a certificate. So let’s go for the hatchling plan. I’m gonna click buy now. And here is the HostGator order form. So the first step is
around your domain name. We’re not gonna be
registering a domain name with HostGator today. As I’ve already mentioned, I like to keep all my domains with GoDaddy. So hopefully you’ve
registered with GoDaddy or you already had one
registered with another provider. So let’s click on the tab,
I already own this domain. Then what we need to do
is type in the domain name that you already own. And the domain name I’m
going to be using today is one that I do already
have registered over at GoDaddy and it is, makeawpwebsite.com. Now I’m just gonna press
tab on my keyboard. And it’s added that, that’s fine. So this is gonna suggest
a few other domain names that I could possibly
buy if I was interested. But I’m not gonna buy these domain names from HostGator. I’m just going to leave it at that. So, step two is choosing our hosting plan. So we’ve already chosen our package type which is hatchling, but you can change it at this point if you want to. The next option is the billing cycle. Now when it comes to buying hosting, you get a much better price if you can go for 12 months or more. But if you can get up
to 36 months, the price goes down quite considerably. You fully registered a
domain name for 12 months, so you might as well go for
12 months hosting as well. But if you can afford it
then I would recommend going for the 24 or 36 months. That way you’re gonna get
the best possible price. I’m going to select 12 months. Which is 5.95 a month. The next box is for your username so just enter something that
you’re gonna remember. Well, that’s too long. Might as well go with something like that. The next box is for your security pin. So that is the pin
number you’re gonna need when you contact customer
support at HostGator. So again, enter something
that you can remember. I’m not gonna complete the entire form in this video, it’s a bit boring. I’ll fill it in in a few moments. Step three is to enter your billing info, all standard stuff. Your email address, name,
company, if you’ve got one. And of course your
credit card information. Or you can use PayPal if you prefer. So fill in all this form. Step four is the additional services. So the first one is your
free SSL certificate. You can’t untick that because it’s free. The next one is protect
your site from hackers. We don’t need that. I watched some videos
on protecting your site on the channel. There’s some plugins
and things you can use with WordPress to do that. So you don’t have to pay the
19.99 a year to HostGator. You don’t need the
professional email service. That is a google service. And you don’t need the
backup service because again, you can backup your site
very easily just using WordPress. You don’t need to pay 23.95
to HostGator to do that. And the HostGator SEO tools,
you don’t need them either. So, just leave all of these additional services unticked. Now, step five is very important. It’s the coupon code. So you’ve probably
already got a coupon code in the box. I’ve got this one shared3660. But as I mentioned earlier, I’ve got a really good coupon for you. If you enter the coupon, eagle 3-0, that’s eagle30. And you’ll see at the moment
that we’ve got a discount of 36, if I click validate. Now I’ve got a discount of 42. So my coupon, you should
get the best possible price. It is an affiliate
coupon so if you use it, I will earn a small commission. So, thank you very much for using it. If you do use it, I really appreciate it. It really helps me out
and allows me to create videos like this one. And that’s it. We’ve complete the form. We can just review our order details. Here we’ve got the free
support, the free account activation, we’ve got
the money back guarantee of 45 days, and we’ve
got our 12 month hosting for just 64.44. The final thing is just
to tick this box here which says that you’ve read and agree to HostGator’s terms of
service/cancellation policy and acknowledge receipt
of the privacy policy. So I’m sure you’re gonna
read those documents when you get a chance (chuckles). So now you just need
to click, checkout now. And you’re hosting account will be setup. It happens really quickly. Generally in a minute or
two it’ll be ready to go. So what I’m gonna do is
I’m gonna go back through this form and I’m gonna
setup my hosting account. And yeah, I’ll see you in a minute. So, I’m all signed up with HostGator. It didn’t take too long
to fill out that form. And within a couple of minutes, I received this email, hopefully
you’ve received something very similar. This email is very important. It contains all of the information about my new hosting package. We’re gonna need some of this information as we set stuff up, so
yeah, do keep it safe, as we are going to be referencing it. So now that we’ve got our hosting setup. The next step is to
repoint our domain name. So basically you let domain registrar know about our new hosting package. So to do that I’m going to be going back to GoDaddy and adjusting
a couple of settings on my domain. (mellow music) Okay, so now we’re gonna
repoint our domain name so that it is using our new
hosting that we just setup. So I’m back in GoDaddy
and at the main section of my control panel, after
logging into GoDaddy. So you’ll need to login
to GoDaddy or if you’re with another domain
registrar, just log into their control panel. The process should be
pretty much the same. What we’re looking to do
is update our domain name servers, so log into
control panel with whoever that may be and look
around for the domain name server settings or the DNS
settings, that kinda thing. And yeah, the process should pretty much be the same. So with GoDaddy, to access those settings, to find the domain that
we’re gonna be using, which for me is going to be
this one, makeawpwebsite.com. Click on these several dots, I’ve got this manage DNS thing. So give that a click. And then here are our DNS records. If I scroll down, we’ve got
our nameservers settings. We click change. Then on this dropdown, I’m gonna go for custom, then we’ve got two boxes, then I’m gonna go back to the email that I got from HostGator,
which I’ve got just here, and then we can see that we’ve
got our nameservers here, just gonna copy it into my clipboard. And then paste it in to
the first box like that. Then go back and get the second one. Copy into my clipboard, I’m gonna use the keyboard shortcut, which on the Mac is command + C, on a PC, it’s control + C. Then to paste, it’s command
+ V or control + V on a PC, like that, of course you
can right click as well if that’s easier for you. So, click save, and that
is all done, basically. We’ve set our nameservers. Now, there might be a slight delay while this information is kind of updated all around the world, to all the different domain name servers and
all that kind of stuff. So there can be a bit of a delay. You’ll know that it’s all working if you go over to your website, so just pop it into
your browser like that. Now, at the moment, I’ve got this GoDaddy screen coming up. You’ll probably see a screen
from your domain registrar. Once this screen switched
to something else, it’ll probably be a coming soon screen, or it might be a HostGator screen, then, you know, that
everything is working, and everything is
switched, and you’re then ready to start setting up your website. So, I’m gonna wait a few minutes, possibly a few hours,
we’ll see how long it takes for this screen to
change, then I can carry on and setup my WordPress website. Okay, so here we are, we’ve got our website coming soon screen. This means that the domain is now pointing at HostGator and everything
is working correctly. It took a couple of hours
for the change to actually take effect, so if yours isn’t showing just yet, then just give
it a little bit more time, and I’m sure it’ll happen real soon. So, with that all done, we’re now ready to move on and instal WordPress. (soft music) Okay, so now we’re gonna instal WordPress onto our hosting,
WordPress is what’s gonna be powering our website, it does all of the heavy lifting for us. It’s very easy to instal, all you need to do is go into our
HostGator control panel, so I’m gonna go back to
the email from HostGator, which I’ve got just
here, and in this email, it’s got all the information I need, so here’s the link to the control panel, then we’ve got the username, which is the username I entered when
I signed up for HostGator, and then we got the password here, so I’m just gonna copy the
password into my clipboard, then you click on this link. And then paste the password
in, enter the username. What was it again? Oh yeah, makeawpweb, of course it was. Makeawpweb, then click login. Okay, so we’re in. There’s a few popups and things, you can just close them. Okay, so this is the
HostGator control panel. In here, you can do pretty much anything you need to do with
regards to your hosting, such as setup an email
account, that kind of thing, if you wanted to do that,
you’d come into here. But what we’re gonna
do is instal WordPress. Now, there’s a link just here that says build a new WordPress site,
so let’s give that a click. And here is the installation setup wizard. So, all you need to do
is select the domain, we’ve only got the one right now, leave the directory as
it is, leave it blank, and then click next. Now we need to give a blog title, and when it says blog title, it kind of actually means website title. Back in the early days, WordPress was only really used for blogging, but now we use it for websites, and ecommerce, and all sorts of things, so this field should
probably say website title, so yeah, give your website a name. That’ll do nicely. Then you need to set an admin username, so this is the username you’re gonna be using to login to WordPress, which is a different
login to your HostGator control panel. I’ll just go for wpeagle, I
should be able to remember that. Then a first name. Let’s go for WP, Eagle, and then you need to enter your email address, and this is the email that’s
gonna be used by the site to send you notifications
and basically anything to do with the website, so make sure you enter your main email address there. You want to leave this box ticked, the one that says automatically create a new database. Then you need to tick the
terms of service agreement. Then just click instal. It takes a few moments
to instal WordPress. And there we go, all done. So we’ve got our
installation details here. You want to make a note of this password. I’m going to copy it to my clipboard. You should get an email from HostGator with these details so don’t worry too much about writing them down or whatever. But we’re gonna use them right
now to log into WordPress and make sure that it’s all working. So I’m going to click the login. And here we go. This is the WordPress login screen. So I’m going to enter the
username I just setup. The admin username which was wpeagle. I’m just going to paste that password in. And click login. And here we go into the
WordPress dashboard. Now my browser’s asking if
I want to save the password. We can do, say remember it. But I’m actually going to
change it in a few moments to something that I can actually remember. So there’s a few popups,
you know, that popup as they do. Let’s just dismiss them for now. And what I’m going to do is,
remove some of the plugins that automatically installed by HostGator so that we’ve got a nice,
clean WordPress installation and we’re all on the same page. And then we’ll instal any plugins that we actually want. So to remove those
plugins that we don’t need we’re going to go to
plugins, instal plugins. Scroll down. And then we’re gonna
go through and turn off the ones that I don’t actually want. So, Akismet is useful to
keep, worth setting up later. It gets rid of common spam which is a bit of a problem with WordPress player. You get these kind of spammy comments in your posts. And this filters them out
so that’s worth keeping. Google Analytics for
WordPress by Monsterinsights is a really useful plugin actually because it allows you to connect Google Analytics to your site which is
a great way of tracking visitors and I’ll be
doing that towards the end of this video. Hello Dolly, that’s just a bit of fun so we’ll leave that turned off. I’ll delete that as well. Let’s click delete. Jetpack, I’m not going to be using that. So I’m going to deactivate. Once it’s deactivated I can delete. Some people like Jetpack,
I’m not really found it that useful. MOJO Marketplace, don’t want that so let’s click deactivate and then again, delete. OptinMonster API, we don’t need that. The OptinMonster is
really cool and I’ve got a video coming out really
soon on that so be sure to check that out. Finally we’ve got
WPForms Lite, we’re gonna deactivate. I don’t want that. (chuckling) Click skip. Feedback thing. And delete so we’re
just left with those two which is fine. Gonna be adding a forms plugin later to do forms. One that’s a bit better than that. So, there we go. Let’s just have a look
at the front of the site. So to do that I just went up to the top, click visit site and here we go. This is our WordPress website. Kind of the vanilla instal, fresh out of the box as it were. And the next step is to instal a theme and get it looking how we want it. So the final thing I’ll
show ya in this part of the video is just how
to change your password if you want to do that,
so that it’s something that’s a little bit more memorable. Come up to the top right
where your kinda username is. Click edit my profile. Scroll down. Then we’ve got account management. And we’ve got the new
password section here. We can click generate password. If you don’t fancy that one, you can type your own in. Just gonna hide it so that
you guys can’t see it. It thinks it’s a weak
password, maybe it is a little bit, but nevermind. And we click confirm use of weak password. Just to say I’m okay with that. Then click update profile. I’ll update it in my browser, too. Yeah, so there we go. That’s WordPress installed. It’s ready to be developed
now into the website that we need. So, let’s move on to the
next part of the video. (mellow music) So now we’re gonna instal
our WordPress theme. The theme is what gives our
website its look and feel. It’s all the design features. It’s what we use to add
the content and yeah. The theme we’re going
to be using today is, this one, it’s called Rife. There’s a private version
and a free version. The private version obviously
you have to pay for. The free version is free
and the it’s the free version that we’re
going to be using today. And of course, you can always
upgrade to the pro version in the future if you
need some extra features and functionality. It’s got a real nice look and feel to it. It uses a really nice page builder so it’s kinda all drag and drop
and you can very quickly create some really
impressive looking pages. So to get hold of the
theme we just need to click on this big button here,
download Rife for free. Into my downloads folder, that’s fine. And now we’re ready to instal it. So to do that I’m gonna
go back to the website. Gonna go to the dashboard. I’m still logged in from before. And then I’m going to go to appearance and themes. Then click on the add
new button at the top. Then upload theme. Then click choose file
to browse my computer. Go to my downloads folder. There it is. Click open. Then just click instal to
upload it and instal it. And it says the theme has
been installed successfully. Let’s click activate to turn it on. There we go. It’s all done and working. So if we go and look at the site now, we should see that it’s changed somewhat. And there it is. Still not a lot going on. But we can see that the theme’s working and the look and feel
has changed completely. Let’s just go back into the dashboard. Now there’s a couple
of plugins that we need to instal. This one here, Apollo13
Framework Extensions, it recommends that we
instal that, so I think we should do that. Click begin instal. And then click instal. And that’s done. Let’s just return to the dashboard. So there’s another plugin
I just want to instal just to finish off the
installation of the theme. And that plugin in called Elemental. Elementa, Elementor, that
sounds better, I think. (laughing) And basically that’s a
drag and drop pagebuilder and it makes it really easy
to edit all our content. So we’re gonna go into
plugins and then add new. Over here in the keyword
box I’m gonna type in Elementor, like that. It’s the first one that comes up. Click and instal now. And then activate. So that’s all done. The theme’s installed. We’re now ready to start adding some of our pages and posts
and you know, our content in general. So probably the best
place to start is with the homepage. So that’s what we’ll do in the next part of this video. Hello, it’s Alex here,
I’ve had to add this at the last minute to the video. Basically at the end of this video there is a part where we
add an SSL certificate which basically makes
this site nice and secure. And in hindsight, it’s
probably better to do that at this point rather than
after you’ve corrected the whole site. So I’m gonna put a time up
now, probably around there. If you skip forward to
that point and follow those instructions on
how to set up your SSL, then come back to this
point and kind of carry on where you left off, things will be better. Trust me on that. So yeah, skip forward now, to that point, get your SSL setup, then come back here. It’ll just make it a bit easier for you in the long run. Sorry about that but that’s sometimes how it works when you’re
creating videos that are this long. Anyway, where were we? (mellow music) So let’s get our homepage setup. I think it’s a good place to start with our website and then we
can add some other pages after we’ve done that. So by default the site
is showing the blog. So this is the kinda
default post that you get with WordPress. But this site, I just want to have kind of a static homepage with my
own bits and bobs on it so let’s do that. But before we do that,
there’s just one setting we need to update and that
is the permalink setting which basically determines
the sort of URL’s that we’re gonna be generating. Basically the addresses of the pages. If we go into settings then permalinks. It’s currently set to
this and it’s a bit messy, personally. I don’t like these index
php things or any of that, so I’m just gonna empty this box. I like to all press delete. And then I’m going to
add some of these tags. The first one is category,
then the next one is postname. And that’s it. That’s the structure that I wanna use. So, let’s click save changes. Now we’re ready to
start adding some pages. So let’s add a homepage. I wanna go to new then page. Let’s call it Home. Then in the template down
here I’m gonna select Elementor Full Width because I want the homepage to not have a sidebar or any of that kind of stuff. I just want a nice full width page. So, that’s published. Let’s click edit with Elementor to start creating the page. Now with this theme and with Elementor, it’s really easy to get
pages up and running really quickly because there’s a whole lot of templates that you can use. There are templates for complete pages or just bits of pages
and then you can just put them together and
edit them and you know, have pages created really quickly. So, let’s have a look at
some of these templates. If we click on this folder. This sort of grey icon. We’ve got all these here. Some of them are pro,
so you have to upgrade Elementor to the pro
version in able to use them but there’s tonnes of
really good free ones, too. So you’re just wanna scroll through here and decide which one is gonna be suitable for your website. You can see they’re all really nice. And there is a load available for free, so I’m sure you’re gonna find something that you like. I quite like this one
because it’s just a demo website I’m making today, it’s not for any specific purpose, apart
from to show you guys how to make it. But this one is nice and clean. Let’s click on the
little magnifying glass. We can take a closer look and it’s got nice testimonials. And bits to have, you know, texts and nice icons and I don’t know,
it just looks nice. So, I think we’ll go for it. So, to insert, just click
this button at the top. There we go. Come down here and click update. And let’s have a look
at what it looks like as it is without changing anything and then we’ll come back in and we can, as you can see, just
kinda click on whatever we wanna change. So in order to do that
just pop open another tab and just type in my website
or whatever your URL is. And then what we need
to do is actually set it as the homepage and
when we can, just click up here because it’s added it to the menu. But of course, we want
it to show every time people visit the actual homepage. So, to do that, let’s go to the dashboard. Go to settings and then reading. Then we’ve got this
first option that says, your homepage displays,
click on the radial box to select a static page
and then under here, select the page that you just created. And mine’s called Home. Save changes. And now when we look at the site… We’ve already got a fantastic homepage up and running that we can now go through and start editing. So, yeah, let’s do that now. I’ll show ya how you can play around with these elements and you know, make them your own. So to edit any page when
you’re looking at it from the front, like this, you can simply just click edit with
Elementor and it’ll take you back to the Elementor
editing page funny enough. Like this. Which happens to be the same one I’ve got here, so let’s
close one of these tabs. And it really is just drag and drop, you can just click and change the text, just type some more. Goes onto two lines if it’s too big. So, we’ve got some options over here, we can change the tag so it’s a H2 tag, which is a good thing, so there to do with headings, very useful for SEO to mark up important stuff as heading, can cause change to your alignment,
left, centre, right. These controls are very similar to any sort of word processor that
you may have used before, you can add a link if you like, so I can just link through
the fantastic website, wpeagle.com. You can adjust the options there, you can make it open a new window or add a no follow, if you like. Click update every time you make a change. In each element, you’ve
also got a load of other options, so, come across here, you’ve got styles, so you can adjust the colour of the text to whatever you like. I think white probably does look best on this particular background. You’ve got your typography, which is, you know, all around are different fonts, change them to whatever you like. You’ve got sizes, big,
small, whatever you like. Then you can change the weight, so, you know, make it bold. It’s got some text transform going on, so it’s making it all uppercase, but you can have it all lowercase or you could have it with capital letters, whatever you like. I think uppercase is fine. Make it italic or oblique. Oblique, whatever that is. Now you’ve got some decorations, you know, usual stuff that you get in any word processor. Adjust the line height, and
even the letter spacing. So, you know, you really have got complete control over all of your elements. Can add a shadow here as well if we like, so, you know. Hmm, that looks quite nice for the shadow, I think we’ll use that. In advance, you’ve got a few other things that you might want to
adjust here, the margin, also, just to add extra space around it, and padding, again,
very similar to margin. Create some extra space. A lot of this stuff, you’re probably not gonna need to mess
around with too much, because everything kind of lays out quite nicely as it comes. You’ve got a background here. So, this is the background just for this text element. I’ll show you how to
change this background in just one moment. You can add a border, a nice solid border if you like, and
add a colour like that. I don’t think we need
a border, but you know, you get the idea. And here are your
responsive settings here, if you wanted to hide
this element, for example, on a tablet or a mobile, you can just, you know, adjust these tools. Then there’s a custom setting, which we don’t need to go in right now. So, this text, all this text on this line, is all sitting on top
of a section, and it’s the section that’s got this lovely image of someone on their phone, laptop, and they’re making a website, and they’ve got a load of code on the screen, which you don’t really need to worry about code anymore when
you’re making websites, as you can see, but say you
wanted to change this image or change any of these
kind of sections parts, just simply right click,
which is the really cool thing about Elementor is, it supports right click, which is
quite unusual actually when you’re working in a browser. So, we can right click
and select edit section, and then we’ve got all
the settings to do with this section. So, the height and position, whether it’s got a HTML tag, probably not gonna need to worry about that. If we scroll up and go into style, you’ll find that there is the image. So, if, for example, I
wanted to change that, I could just click delete
and then click plus, and then upload a file from my computer. And I’d say this picture
of a dog, for example. Though it is a bit big
actually, that image, you really want to make sure your images aren’t too big, over a meg is big, because it’s gonna slow down your site, but let’s go for it for now, just for this example. And there we go, we’ve got
a lovely picture of a doggy. I think I’m gonna switch
back to the laptop, I think that’s a bit more suitable. These are all the settings
to do with the image, you want it in the centre, and do you want to repeat it, so if you’ve
got a smaller image, you might want to just repeat it so that it fills the entire space. Next is the background overlay, so that is this colour, this grey colour, we can adjust that to something else, you may want to go blue. Hmm, that’s quite nice, isn’t it? Or green? Hmm, very nice. So, you know, that’s pretty cool. The oh-pay-city, is that how you say it? Oh-pay-city or oh-pass-city? (laughing) I’m really good with English. You can adjust that, basically,
that’s the transparency of that overlay, so you know, how blue or whatever colour you want
it, just adjust the slider. Down here, we’ve got
a border, so generally to add a border around this section. Here is a shape divider, which I think, if we add it to the bottom… You can add, like, these cool effects. Here are the top or bottom. Ooh, yeah. Where’s the zigzag? That’s not working. Clouds is nice. Tilt. Oh yeah, then you can set a colour, the height and all the rest of it. And then we’ve got some
more typography settings, though generally you’re probably gonna want to set those on the
individual text elements. So, let’s click update. Think it’s good practise
to update as you go along. There is an advanced bit again, it’s very similar to the advanced settings that we saw on the text element, so margins and padding and
all that kind of stuff. So you just simply work through the page, and you know, add and remove
elements as you see fit, so this one is like an image carousel, great for logos. This one is a testimonial element, so good for testimonials, which is handy. Here is, this is just a sections, and it’s got two columns, so we’ve got an image element there
and we’ve got a divider, and we’ve got a title,
and we’ve got some text. Now, if you wanted to
add some extra elements, it’s very easy, you simply come up here, click on this little square
with the smaller squares, and then you’ve got
all Your elements here, so we’ve got, you know, columns, headings, so that’s what that is. Let me just show you. I’ll remove this. Right click, delete, and then say I wanted to add a heading,
you just simply drag it over like that. Easy to create amazing sites. I don’t know what I’m talking about, but you get the idea. Might want to make that a bit bigger. In fact, I probably
want it to match these, so I think that’s a good option. I’m gonna show you how
to do a duplication, you just simply right click, duplicate, and then, oh. Get a hold of it like
that, pop it up there. I can remove that one. So, yeah, in here, there are
loads of different things. If you wanted to add a
video, just drag it over, then add the link to the video, got the dividers and
spaces, you can add a map, you can add some icons. And down here, we’ve got
image boxes and icon boxes, and lists, and counters,
testimonials, we’ve already seen, social icons, toggles,
you can add a soundcloud, alert, a menu anchor, so
that’s for when you want people to scroll down a
page by clicking on links. There’s tonnes of stuff,
but generally you’re just gonna want to add
some of the existing templates, so then just
change them as you need to. So, I think that’s what
I, let’s click update. Let’s take a look at the website, and then what we’ll do is, we’ll add
a couple of other pages. I think that would be good,
get our standard stuff, about us, contact us, I’ll
show you how to add a form. And then I’ll show you
how to adjust the logo, and that kind of thing. I mean, this video is
not gonna be too long hopefully, and as you can see, it’s really quick and easy, and once you’ve got this setup, I mean, you’ve
just gotta play around and make the website your own. So, I think that’s it at this section in terms of setting up the homepage. Let’s move on to the next one where I will show you how to setup some of those internal pages. (soft music) So, in this part of the video, I’m gonna add a few more pages, so I’m gonna add an about us page, I’m gonna add a FAQ, or frequently asked questions page, and I’m gonna add a contact us page. Now, of course you’re
gonna create whichever pages you need, but I thought, you know, those three would be a good way to show you a few of
the different elements that you can add, and then that should inspire you to be able to create whatever pages you need. So, let’s start with the about us. So, to create a new page, simply come up top here and go to new page. Then let’s give it a name, let’s call it about us. And again, I’m gonna go for the Elementor Full Width template. So, that’s created, let’s
click edit with Elementor. There we go, we’re now ready to add some stuff to our page. So, again, let’s click
on the little grey icon. I think it’s a good idea to use these templates to get things going, because when you’re looking at a blank page, it’s very hard to get inspiration in terms of what elements you need to add, so these give you a great starting point. You can do a quick search by just typing stuff in, so if I type in about, it will give us some pages that we can possibly use that has
a nice about us there. There, that’s got a nice chart on it. Quite a few pro ones. Of course you can just build your own made up of some blocks. So, come into blocks,
do a search for about, and you’ve got different blocks you can put together to create your
about us page, if you want. But I think we’ll go for a full
page template to start with. I quite like this one,
so let’s go for that. It’s got a video and,
yeah, it just looks cool. Let’s click insert. So, there we go. And of course you just go through and edit these elements as you see fit. Let’s click update. You can take a look at
the page by just clicking on this eyeball down here. There we go, looks good. So, the next page is an
FAQ, and for this one, again, we could either use a page template or make it up with the individual blocks. I think I’ll just use
some individual blocks to show you how that could work. So, again, new page. Let’s call it FAQ, What I’ll do is, I’ll leave
it on the default template so that we can see exactly
what that looks like rather than using the elemental for width. Let’s click edit with Elementor. So, the default page
template looks like this, you get this massive
sort of title at the top, which might not be what you want, which is why I tend to go for the… Elementor full width template. So, we can switch to that
down here by clicking on the cog, so I think I’m
gonna do that right now. I think it’s nice just
to have complete control and, you know, add
whatever elements you like. So, let’s start building this FAQ page. I’ve had a look, and there isn’t actually any frequently asked
question type page template, so we can go into blocks, and I think we’ll find something in
here that we can use. Ah-ha, here we go. So you can decide what
sort of effect you like. You can have one with like, accordion which is quite cool. Or a two-column setup like that. I don’t care for a bit
of an accordion thing. Click insert. And there we go and of
course you can change these as you like. That’s nice and simple. Let’s click update. And then we’ll click preview. Let’s close a few of these tabs. And there we go. So the final page I’m gonna
create in this section of the video is the contact us. Let’s go up to new page. Let’s call it Contact us. And again we’ll go for
the Elementor Full Width. Click publish. Edit with Elementor. Get rid of that tab. In here again, let’s open contact. So here we go, it’s some nice looking pages here. Most of them are pro. But not to worry, we can
easily create our own. So we look in blocks, I think we’ll just create one with the blocks. Hmm, that’s nice and simple. I’m gonna show ya how
to add a form as well, in a moment. So, yeah, we’ll just go for that. It’s got some nice social icons. We’ll change that. For any inquiries, please
use the form below. Get rid of that. Let’s click update. What we need to do is instal a form plugin in order to get the form up running. Makes sense. To do that we need to go back to the dashboard. A quick way to get back to the dashboard is to click on this little burger menu. Click exit to dashboard. Okay, let’s go to plugins and add new so that we can instal the form plugin. One of my favourite form plugins right now is called, Happy Forms. And let’s type that in. And it’s this one, the
first one that comes up. Let’s click instal. Then activate. It’s asking for an email address but we don’t need to do that. You can just click continue. And there we go, we’ve got this sample contact form which, you know, that’s fine. We can just edit this. Let’s click edit. Here’s our form here. And we can adjust any of these fields just by either coming over
here and popping them out like that. So if we don’t want that
one, this age field, just click delete down here. And that’s gone. And if you want to add any other fields, maybe you want to add an email. So you need to click (mumbles) emails. Just click on it then it’ll
add it here and you can just drag it to where you like it. Like that. They’ve got some settings,
I’ve got a full video on how this plugin works, on the channel. I only uploaded it a few weeks ago. So do check that out if you wanna learn a bit more about this form plugin. But that’s fine… For a basic form. Let’s click next. And here you can set
two different messages. So, this is the confirmation message that people will see when
they complete your form. This is the email address that the form will go to, which is the same as the email address you entered when
you set up WordPress. And these are all,
like, the email subjects and stuff that you get and that they get. So, just adjust that as you need. Then you got a whole load of other stuff that you can change as you need to. But that’s all fine, I’m
gonna click save form. There is one setting I
want to change in here before I save the form,
that is the form title. I don’t want this, it’s
called sample contact form, I probably should have
given it a better name, but that’s fine. I want to actually hide
that, and that’s it, let’s click save form. Then we can go and add it
to our contact us page. It says the form saved,
it gives you some ideas on how you could add it, but luckily we can use Elementor just to add it as any other element. So, let’s go back to the site and back to the contact us page. There it is. I’m gonna show you how to rearrange those links across the top in a moment. So, here’s our short
and sweet contact page. Let’s click edit with Elementor. So, on this page, by the way, you are gonna want to probably update
all these social icons. Very easy, again, you know,
you just come in here, click, add your links to your
social media, easy peasy. It doesn’t make any sense, that bit, I’m gonna just adjust that. That’ll do. So, to add the form, let’s click on the little square thing again. You want to scroll right
down, then under this section here, or in this section where it says WordPress,
give that a click, and you’ve got all these
WordPress elements, which are pretty cool,
you know, if you want to add WordPress image or
categories, recent comments. Anything you like, really. All right, in the bottom
we’ve got Happy Forms, which is the form plugin
that we just installed and setup a form with,
we just drag that over. Now, let’s click apply. Now, it’s not showing
the form straight away, I think this might just be a little bug. It basically wants a title,
so let’s start typing. The form that we created now shows, I don’t actually want a title, so now I can take it out and the
form should still be there. I don’t know what that’s
all about, but hey, just a little bug. You get little bugs in technologies, it’s one of those things. (mumbles) a contact us form,
let’s have a look at it. There it is. It’s all looking really nice. Let’s see if it works. This is a test. And submit. There’s our message. Looks like it’s working fine, perfect. So, there’s our internal pages. Of course you’ll create
whatever pages you need. And I’ll be doing more
videos as we go forward, using Elementor to create different sorts of pages that you might need, maybe albums, image
galleries, that’s what I mean when I say album, services pages, that kind of thing, so yeah, I’ll be doing some more videos on that. What we need to do now is, we need to rearrange this menu because I want to get rid of this sample page and I want to put them in the right order, so, to do anything with
menus, all we gotta do is come up to the top here where your website name is and go to menus. We haven’t got any menus setup right now, so all it’s doing is adding the pages as we create them in
whatever order it likes. Let’s create our menu,
let’s call it main menu. And click create menu. Then down here, we’ve got
all the different elements that we add, so there are the pages, if we had some posts, we could add them, we’ve only got the one, hello, world. I’m gonna be showing you how to add the blog in a few moments. If you just want to add a
link to maybe another site, then you’ve got categories here, which are the categories for your blog posts. But we’re gonna add some pages, I want to add the home, the about us, the FAQ, and the contact us. Let’s click add to menu. And this is drag and drop as well, so you can just, you know,
move the order of stuff, so this is the first one that we’ll show, which will be on the far left of the menu, then this is the last one,
which will be on the right. I think a logical order
would be something like this. And in fact, you can have like a sub menu sort of structure, so if I wanted the FAQ to sit below
about us, then just drag it slightly over to the right, see there’s a little bit of space there? Hit save to menu. Oh, actually, there was one
last thing we need to do. We need to tick that box
that says site navigation, then just save it again. And there we go, let’s
have a look at the site. There we go. You can see there’s our kind
of sub menu with the FAQ. That’s looking good. I’m just gonna put the
FAQ back to the top, because the menu looks a little
bit sparse with it there. Like that, and save. So, that’s our pages all
done, and the menu ordered and setup as we’d like it. As you can see, the site is
already looking really nice. Go to the about us page. We’ve got our FAQ page. We got our contact us page. It’s all looking really good. There’s the form. It’s all good. So, in the next section, we’re gonna add a blog page, you might call it news, you can call it whatever you like, but it’s basically the place where you can put your posts, the posts are different pages because they have a date, they’re normally
kind of articles, news, that sort of stuff, whereas pages are more static there,
right, your services, your FAQ, your about us, the stuff that we’ve just done, so
let’s create a blog page in the next section. (soft music) So, let’s get our blog
page up and running, so I’m just gonna go up here again, new, and then page, and
I’m gonna call it a blog, you can call it whatever you like. And click publish. Then to make it the blog
page, I’m gonna come down here and go to
settings and then reading. And this section here that says post page, I’m gonna choose the
page that I just created, then save changes. I’m also gonna add it to the menu. The way you access the menus when you’re in the dashboard is under
appearance and menus. There it is. Give it a click, add to menu, drag it where you like it, there will be nice. Click save menu. Let’s go and take a look. Then click on blog. So here we are, it’s got
the colour default layout and everything, which
is fine, what we’ll do is, we’ll add a nice image here, which will make it look better. I’ll show you all the
blog settings in a second. Here is a post. What I’m gonna do is, I’m
just gonna add a couple more posts to fill it
out so we can get an idea of exactly how it looks. Let’s do that now, so to add a blog post, you come up to here and go new post. This is a blog post. And you put your text in here, let me just find some
Latin we can put in there. There we go, some nice Lorem Ipsum. Copy that, paste that in, there we go. Down here, you can add some categories, it’s a good thing to do with blog posts, organise them nice and
neatly, so you might have like an articles category or something more specific. You can use Elementor if you want to, you’ve got your template options here again if you want to go
with Elementor for width, that kind of thing. I’m gonna leave it as it is for now. Let’s set a featured image, let me see what I’ve got on my computer. Let’s go for the dog again. The featured image is like the main image of the blog post. There we go, let’s
publish and take a look. There’s our post, let’s go back to the blog page and have a look. There it is with the dog. Now, the featured image
isn’t actually showing on here, is it? So, let me just have
a look at the settings of this post. Down here, we’ve got featured media. Featured image parallax, I’m sure it should be showing actually. Let’s just check all the settings. That’s all fine. Title bar. That looks all good, so let
me just update it again. View the post. Well, that’s changed the heading, in fact, I think that’s better, isn’t it? It doesn’t matter about
the featured image, we can just add it
wherever we like anyway, so if we go back in, if we wanted to add it at the top, you just go add media, find your dog picture, insert into post. Looks a bit small, actually, let’s see if we can make it bigger. Click the little pencil. We’re gonna go size full size. There we go, that looks better. Let’s take a look. There we go. So, that’s a blog post. Let me just add one more for effect. So, new post, let’s add the Latin again. If we scroll down to
make the title the same, go down here, and it was under title bar. It was the classic to side
rather than the centred, which I think is the big one. Yeah, and that’s all
good, we set the featured image down here. Let’s find another interesting image. They’re probably gonna be dog related because these are images
that I got on hand from the other website I
made just the other week. Yeah, perfect. Again, we can add it in here. Add media. Size is full size, insert into post. Let’s edit the articles, category. There we go. Let’s take a look. Looks good, I think that title looks much better for a blog
post, so what I’m gonna do is, I’m gonna set that as the default, we’ll do that in a second as we look at the blog settings. So, here is the blog page. The images are slightly different sizes, which is a bit of an issue. That one’s not quite right, is it? Let’s just have a look at the different sizes that we’ve got. So, yeah, when you’re
using featured images, you’re probably gonna want to make sure that they are similar sizes. So, that one’s 1254 by 686, and that one is 1254 by 686, hmm. There’s obviously something else going on. Ah, I think it was this parallax that I turned on earlier,
let’s turn that off. But it is still good practise to make sure that your
images are of similar size. There we go, yeah, it was that parallax thing that was going on. So, this hello, world,
is the, kind of, example blog post that you get
when you instal WordPress. You can delete it by
just clicking edit paste, edit paste, edit post
even, then I move to trash. Let’s take a look at those blog settings anyway, so if we go to
appearance and customise, in here you’ll find loads
of different settings all around your website. It’s a good place to come take a looksie, you got all your general settings, of which there are many. Header settings, blog
settings, shop settings, so you can set this site up as a shop if you’d like, just use WooCommerce. But we’re gonna adjust the blog, so, in blog settings, you
got your options here. I’m just gonna switch to the blog. By the way, it’s kind of gone responsive because the screen size isn’t that big. You get the little menu, burger menu, which is what people see on
a iPad or a small screen. So, let’s switch to the blog so we can see in realtime the changes
that they’re making. So, you can add a custom background for all the blog stuff if you want. There’s an option here to
hide content under header, I’m just gonna turn it off, we can hide content if you want, I’m not sure… Quite why you’d want to do that, it doesn’t seem to have done much, actually, should just leave it as it is. Can have a sidebar if you want to, I don’t want to, don’t really
want sidebars on this site. Could adjust the bricks column. Can turn on lazy load, I think lazy load is already on, that’s when the page loads as people scroll down, or even by clicking a button, you can
adjust that option there. Decide where you want to
display the post media, which I do. You can decide whether you want to display the video, if you’ve
got video posts, or not. Decide which date you want, basically, on the post (mumbles), whether it was when it was published, when
it was last updated, decide whether you want the author. See, if I turn this stuff on, it’s gonna add the author there, you see? You can show comments,
all that kind of stuff, so that’s pretty cool. This is for the title bar, so this is this big thing here. Again, we can switch it to the side. We can add a background
image, let’s do that. What is that image, that
is pretty cool, isn’t it? Not quite big enough. Let’s see what I’ve got
in the dog section again. By the way, I like to get all my images from istockphoto, so
yeah, do check them out, I’ll put links in the description. What have we got in here? Hmm, doggy jumping, that’ll be fine. Not quite sure why that’s
not appeared at the top, might need to save. Is it the parallax that’s broken it? No. That’s because we’ve
got this overlay colour. I’ll take that out. Or adjust the opacity. There we go. Looks good. This site obviously has
nothing to do with dogs, but hey, you get the idea. And then you can adjust this base, I mean, it’s quite high, isn’t it? And you might want to
make it a bit smaller. That’s looking good. So, let’s go back. Here are your options
for your single posts. So… Again, very similar. It is set to just play
post media, but it doesn’t appear to be doing so,
I’m not quite sure why. As I said, you can just
add it manually anyway. So, these are all very similar settings to what we’ve just seen, but they apply to actually, when you’re looking at a particular posts, like if I
just click through, get ideas. So, you know, things like categories, you can enable that. Adds up at the top there. Then here’s the single post title bar, so if I want all of them
to be classic to the side, let’s click on that like that, this one’s already set because you can set it at the article level as well. You can set an image, you
can adjust the colour. That’s bright, like that, or
add a colour, if you like. Oh, sorry, add an image, if you like. And again, you can adjust the height and all that stuff, so let’s hit publish. Let’s come out of here, we can close these tabs as well, let’s keep the place tidy. Let’s have a look at our website. There’s the home page, there’s the blog, with our blog posts. So, I think that’s the blog all done. What we’re gonna do next is, I’m gonna take a look at some of
those theme settings in the customise section, and we can add a different logo and have a look at some of those other settings to do with, you know, colours and fonts and all that good stuff. (soft music) Okay, so now we’re
gonna go through some of the theme settings. We’re gonna add a logo, I’m just gonna use the wpeagle logo for now. You’ll of course add your own logo. So, to access all these settings, we need to go into customise. And there’s a lot of settings in here that you can play around with. So, let’s just go through them and adjust them as we need
to, so general settings, so, in here, we can set what you want on the front page,
probably gonna be a page, which is what we’re running at the moment. Next, you got the general layout, so this is your background image, your background colour of all the pages, I’ve got it set to white,
change the layout type, if you’ve got Rife Pro, you can’t do it in the free version, and you can adjust your mouse cursor settings there. Then you’ve got your page preloader, which is these animations. You got your theme header, we want to use the theme header, put your footer, which we want to use. If you want to adjust this text here, you just scroll down and just type in whatever you’d like. So, website by wpeagle. That’s this text here, not this text. My mistake. There we go. You can make a link, if you want. You need to add a little bit
of HTML there to do that, so you do a little bracket and then a A and then a H-ref, then
an=and a speech mark, then you type in the
web address like that, and then a closing speech mark, and then one of them brackets, and then at the end of it here, you do a little thing
like that, simple as that, and then we’ve got a link. You can set a privacy policy if you want, so to show a link to that, click enable, then you need to click
here and set your proxy policy page once you’ve created it. Social icons, you need to add them in the social settings, but they’re turned on by default, and you got colours and all the other kind of stuff
that you might like. In the footer, you can
actually add some widgets. So, you got the hidden side bar, so if you got widgets, it’ll show, not gonna go into that, too much detail, put your font settings, so whatever font you want to use across the site, you can adjust it in here
as well as the sizing and spacing and all that good stuff. Different styles of
headings, so that’s the bit that appears at the top of the page, and you know, at the moment is black, but you can change all that in here. Here’s your content styles, so your font colours and your font sizes. Here’s the social settings, so you just come down here, find your relevant things, so, YouTube might be… What is my channel address,
something like that? And then that allowed those social icons at the bottom that we mentioned, yeah, there we go, it’s
added it over there. It may display in other places around the site as well. In Lightbox settings so, I’d use that. That’s pretty cool for images. Get you to top button which is this little round thing here, you can adjust that, change the colours of the icon. Then here’s your button
settings, so, the colours of buttons like, guess
it’s that one is it? Hmm, maybe not that
button, but your buttons in general you can change the colours. And white and that kind of stuff. That’s general settings. Next we’ve got the header settings. So this is where we can
set logo and the type, so at the moment you can
even have it disabled. It’s nice to keep it if
you want sticky’s you can have sticky’s, it means that it will all be there all the time
when you scroll, so… Let’s do that one. No hiding sticky. You see, now it sits
there when you scroll, if you want that. You’ve got different
variations, sent the menu. We’re not gonna show because we’ve… I’ll just hide that. There you go, it’s centred, sort of. I like it on the site, personally. In the pro version you’ve got different light and dark variations
that you can use. And then you’ve got background colours and borders and shadows
and if you want to put the social icons, hey, why not? There we go. Just my lovely little YouTube link. Okay, so here’s a logo. That’s who have had a
variance which I believe is a pro version thing. So you get any two
different types of logo. And if you haven’t got a logo, by the way, you can just switch it to text and then it will just use the name of the site. Make a WordPress Website. I prefer an image, but you know, if you haven’t got one, that
might be useful for ya. So yeah, you do need two
variations of your logo. You need a high res one
which is for your retina iPad, iPhone screens and
then just your usual one. I often think that around 200 pixels wide for your usual standard
size so that would be 400 pixels wide for your high res one. It’s probably about right. When in fact, look, it’s
got 200 pixels there. So let’s upload the high res one first. I should have it in hand,
I prepared them earlier. There we go. So it’s 400, that’s the high res one. There it is. And then let’s put the low res one, this is a high res screen that I’m working on right now, so… That’s why that one showed. Hmm, there we go. A bit bigger. You can change the
opacity got a nice little transparency effect going
on there when you hover, you can adjust it here, just padding and that kind of stuff there. So here’s the main menu,
we want it enabled. You can have some hover
effects, a little ferdinand is, let’s have a look,
have to hide the controls to make the menu popup. Oh yes, that little thing, that’s cool with the line that slides across. Yeah, we like that, we’ll leave that. Then you’ve got some mobile menu settings. Just the font size and
weight and separated colours and all sorts of things. I’m not going to go
through every single one because this video would be very long. You’ve got the sticky override thing there if you’re using the sticky header. You’ve got the tools icons, which I think these, like the hourglass. You’ve got like blue colour there when you hover, but you can
obviously change that. You might want it to be, I don’t know, a nice red. See that changed, very nice. We can turn search off
if you don’t want it. Text button-text, let’s
see what that does. Hello. Ah, it adds a nice little button. That’s pretty cool. Let’s add something, watch. Add a button that links to this video that you’re watching right now. That’s a bit long, let’s
make it a bit shorter. New data link here, so, I don’t currently know the link to the video you’re watching right now because I’m
recording it but I’ll add it later. And then you’d wanna change
the colours probably. Cause you can’t really read that. Maybe make the background colour something like a nice green colour. Like that. Border colour, unless you
want a border, so just get rid of that. Make it completely
transparent, that’s one way to get rid of it. And there we go. So actually, if you
actually want to change the font colour, you have to change the icons colour. Which is a bit of a pain actually because I want it to be white and that would make those disappear so… I’ll leave it as it is for now. That’s the header settings. Blog settings, we’ve done before when we were setting up the blog. WooCommerce we’re not running so I’m not gonna worry about that. Right now we’ve got page settings so, it’s all pretty much similar stuff to what you’ve seen, so
you can turn comments on and off. You can hide the content
under the heading. You can… Decide the layout, so
whether you want to have a left fixed width or full width and that kind of stuff, you can add a background. And you can add a sidebar, which I’m not gonna do cause I don’t
like side bars really. And you’ve got the title
bar settings which again, very similar to the blog ones
that apply to all of the pages but generally we use
the Elementor template which doesn’t have the header so, it doesn’t really matter. You can change it for a full page, but you need the pro theme to do that. You can adjust the password protected page template as well. In here you’ve got the works setting and the album settings. Now I’ve not setup a works or albums page but it’s very straightforward. If you want to do that you just simply add some works and so it’s
good for you, you know if you put a portfolio,
that kind of thing. You can adjust all settings in there. Custom CSS we’re not
gonna worry about today. Custom sidebars we’re not gonna do today. I will cover all of this stuff in future videos. Under miscellaneous you’ve got some little tweaks you can
do to the address bar or custom post types. Here’s a site identity
so that’s the site title that we set when we installed WordPress. Change the tagline. It doesn’t often show but it can appear sometimes in search engines. Next we’ve got the site icons so that’s the little favicon that
appears in the browser, so… Let me see if I’ve got one on my computer that I can use. I’m just gonna have to search. I don’t have one at hand. Oh, we’ve got one there
for the bowwowtech. Yeah, we’ll go with that. (chuckles) Give you the idea. Probably should have gone for my eagle, but we’ll go with that. So this is gonna appear up in the top of the browser and also on the smartphones if you will add your website as an app. Some (mumbles) when you
actually does that way. And then there we go. Look, it’s changed up there. The dog looks good. Next is widgets. We’re not really using any widgets. They go into the sidebars and say checkout future videos on doing sidebars, that kind of stuff. Here we go, got the homepage settings, which we’ve already done, so no need to worry about that. Then it’s just the additional, then it’s just the additional CSS, which we’re not gonna be using, which is the same, actually as custom CSS. There’s two spots for that. So, that’s it, when we’re
all done, click publish. Then we can close this and go and take a look at the site. There’s our logo, there’s our button. There’s our homepage, still looking good. So, there’s just two more things that I’m gonna show you in this video, as I mentioned, I’m gonna
be creating lots more additional videos around this site, show you how to do lots
of other cool stuff, so be sure to subscribe if you haven’t done so already so you don’t miss out on those videos. But yeah, the last two
things we’re gonna do, the first is, we’re gonna
make the site secure by using our free SSL certificate that came with HostGator. Having SSL up and running is a good thing. Search engines like secure sites, as do web browsers like Chrome, so yeah, definitely worth doing. And then the final thing is, we’ll setup Google analytics so we can see how much traffic we’re getting to our website. So, they’re quick and easy things to do. But yeah, well done,
you’re doing really well, you got really far in the video. Not a lot of people get this far. When I look at my watch time and stuff, a lot of people don’t make it this far in the longer videos, so well done, you’re doing really well, we’re nearly at the end of the video. I hope your website is looking good. So, let’s get that SSL up and running. (soft music) Okay, so what we’re gonna do now is make the site secure, make it run over an SSL connection. This is a good thing to do, it’s good for search engines,
they like a secure site, and it’s good for visitors in general, they just feel nice and safe when they’re visiting an SSL secured site. Now, HostGator will have installed an SSL certificate for you when you signed up for the hosting, so the first thing we need
to do is just double check that that is working correctly before we make any changes to the site, otherwise we could end
up breaking the site. So, to double check that you’ve got an SSL certificate, just
go to your dashboard, and then come up to the URL and just type in https:// like that, press enter. It may ask you to login again, in which case, login again, that’s fine. And then just check that
you’ve got this green padlock and this green https. If you’ve got that, that means that it’s all working fine and we can now switch the site over to use that. So, to do that, we’re
gonna go into settings, and general. Then here, we’ll, we’ve got the URL, just gonna add an S there to the end. Make sure you get this right, if you put the wrong thing in here, you can break your site. And save changes, so yeah,
just adding the S there after the http. So, now if we visit the site. It’s showing that it’s secure. Now, sometimes you get
an issue with images loading an insecure
connection, so let’s just check these other pages. Okay, so here’s an example. The homepage was fine oddly enough, but this one’s not. So, if you get it so that
it’s kind of grey like that, it’s not green, it means
there’s some elements that are loading over
an insecure connection. We can see what they are if we go up to the browser toolbar, go to
developer, JavaScript console. Okay, so it’s showing
that this vication4 image and this one Tim Gown image is loading over an insecure connection. So, the best way to fix that is to edit the page with Elementor. Going forward, you should be fine adding content, it’s just because we added these pages first before we added the SSL, which maybe in hindsight, I should have done the SSL first, but hey, it’s a bit late now. In the next video, we better. So, just find the image,
so it’s just gonna be this background image here. Gonna go to edit section, style, there’s the image, then all you need to do is basically just find it again and select it again, so it’s that one. Do that, then we’ve got this one here, right click, edit section,
style, it’s that one, click delete, and add,
there it is, insert. These are all fine, these images, it’s just those background images. So that’s all done, let’s
take a look at the preview. Seems to be okay now. The homepage was okay, nice and green, the about us, green, FAQ, don’t think we’ve got any images on there, have we? Green, blog. Blog not so much, it could
be this header image, let’s have a look, so,
again, view, developer, JavaScript console. Yes, the dog one. So, I think edit page,
oh, actually, because it’s the blog page, we need to
go into here, don’t we? Customise blog settings. And then into here, blog settings, title bar, then just add this image again. There it is. I think what I’ll do is, I will make a note and I’ll mention at
the beginning of the video, because I haven’t recorded
the intro yet, funny enough. I’ll mention that maybe people want to set up their SSL first, and that will get around this problem, but if you didn’t, this is how you fix and
secure content problems. So, let’s check the blog now. That’s nice and green. Contact us, that’s all
good because it doesn’t have an image. So, that’s the SSL, that’s all setup. So, the final thing
we’re gonna do is setup Google analytics, so onto the last part of this video. (soft music) Okay, so I’m over at analytics.google.com, you want to head over there and login with your Google account
if you already have one, if you don’t, you’re
gonna need to set one up. So, for those of you that don’t know, Google analytics is a
free analytics package that allows you to track exactly what’s going on on your website, how many visitors you
get, how long they spend on the site, what pages they look at, a whole load of data, which helps you make some informed
marketing decisions, so yeah, it’s a good thing
to have, and it’s free. So, I’m on the new account page, which is what you should see once you’ve signed in. And with an account, you can have multiple websites, so you might
just want to give it your business name or
your name or whatever. I’m gonna call it demo site. I’ve done this before,
but I should probably have an account for all my examples, so that sounds good. Then you enter the name
of the particular website that you’re adding, which is, for me, makeawpwebsite… Then enter the URL and hopefully
you’ve setup your SSL now, so you want to select https, then maybe just paste
the URL in if you can’t be bothered to type like me, like that. Select an industry
category or, I don’t know. What do you think? Internet. Don’t know that really matters. You can decide if you want to tick any of these boxes or untick them. Then just click get tracking ID, then you need to tick this box, because it’s GDPR stuff, and tick
this box, and click I accept. Then you’re all done,
and you get this tracking ID and you get this bit of code, but we don’t actually need any of that because we’re gonna use the plugins that we left installed from earlier. So, you go back to the site, oh, not in here, I’m gonna
go back to the dashboard. Then I’m gonna go into
insight, which is down here, and settings. Then I’m gonna click authenticate
with your Google account. Choose my Google account,
which is that one, click allow. Choose the correct website, so make, there we go, wpwebsite,
complete authentication. That’s it, we’re all done. So, that’s Google Analytics all set up and it will start tracking everything. Now you can actually test it out, if you log out of the site, because it doesn’t actually track you when you’re logged in, because that would skewer the figures. So, log out of your site. Then, if you come to
analytics and go to the home, you can see that there is one active user right now, and if I
click onto another page, like the about us… This should change, there we go, yeah. Shows me that there is one user on the about us, which is me, so that means our Google Analytics is all up and running,
and you made it to the end of the video, well done. I hope you got a nice website. Well done, you made it
to the end of the video. I can tell you, not many
people get this far, very few in fact, because, you know, it’s a long video, it’s a lot of work. I hope you’ve got a
website that’s looking good and you’re happy with. As I’ve said a few
times, I’m here to help, so if you’ve got any questions or you just want to say something, leave
it in the comments below and I’ll do my best to reply
to as many as I possibly can. So, now you’ve got your website setup, you’re gonna probably
want to do some other cool stuff to it, and I’ve got some videos in the pipeline being
published every single week on how you can do that,
so be sure to look through the channel, and I’m
gonna be creating some very specific videos
around this particular site that we created today
on how to do some SEO, how to use some of the
extra features that are built into the theme, and I’m gonna explore the pro version
of the theme as well and see if that’s worth it. And yeah, just tonnes of
stuff to do with the site that you just might see. You’re not gonna want to miss them, so if you haven’t subscribed,
then now is a good time. Click that button, that red
button that’s down there. Well, I think that’s about it. Don’t have much more to say, it’s been a long enough video as it is, I’m sure you’re exhausted after creating an amazing website. I would love to see you
on one of my livestreams, I tend to do them every
Wednesday at 8:00 PM UK time. Good to see you one there, and again, you can ask me questions and we can have a chat about WordPress
and all sorts of things. It’s fun. If you’d like to share your site, show it off to the world, leave it in the comments, that’s fine, or you can email it to me, if you
like at [email protected], and I’ll take a look
and give you my opinion. Anyway, I’m gonna go right now. You can click on the eagle there if you want to subscribe. Here is another video,
it’s chosen especially for you, so I hope you enjoy it. You don’t have to watch it right now, I’m sure you’ve probably
had enough of my videos for one day, and if you fancy even more of my videos, then somewhere around here, there’ll be a picture of my face, that’s my other channel,
it’s a vlog channel, it’s about all sorts of things. Go and check it out. But until next time, bye for now.

22 thoughts on “How to MAKE A WEBSITE 2018 with WordPress and Elementor

  1. hi i will hopefully learn a few things but to start can you point me in the right direction, i have a page that looks fine in the admin pages but on the actual website the text on that page is duplicated

  2. Hello Alex. We're very happy that you used our Rife theme to create this video.
    We would like to draw your attention to one important feature πŸ™‚
    The most important element of our themes (Free and Pro) are pre-made designs that you can import in one click.
    When you choose any ready design and click import all the necessary plugins (including Elementor) will install immediately.
    All designs can be found here: https://apollo13themes.com/rife/designs/
    and in our guide, you can read how to import designs: https://apollo13themes.com/how-to-create-beautiful-portfolio-website/#import-rife-design

    Thanks again! πŸ™‚
    With Regards Daniel

  3. Hi Alex and all… If you run into the problem of not installing SSL before building your site (like I did), trying installing the "Really Simple SSL" plug in – that saved me having to go through and re-add my images which where causing the non-secure/no padlock warning.

  4. Hello Bro! Just did my First Website with your Help, But im finding hard to import things to my Website, I still dont get the PA API from Amazon. Hehe

    Check my Website here: https://www.bestlawnmoweronline.com

    Tell me more on what can I improve. Hehe

  5. Build a better website! Responsive WordPress themes for every site style!
    Visualmodo build amazing drag & drop page builder smart WordPress themes for any site purpose https://visualmodo.com/ e-commerce, portfolio, landing-page, creative, health, restaurant, agency, blogs and much more site solutions! #responsive #template #plugins #themes #WordPress #onepage #ecommerce #marketing #wedding #website #gym #fitness #health #blog #store #shop Create your own website with Visualmodo!

  6. Great video πŸ‘ I just started using Elementor this week so this video has come at the perfect time. I have my websites hosted on GoDaddy I dont want to pay for SSL for them is there a way I can do it for free? In hindsight I wish Id went for one of the hosting companies who do free SSL but too late now πŸ™

  7. hi, I have noticed that my pictures don't appear on my website ( despite appearing when I crawl my posts as Google sees it well) –
    what is the problem, please? and would elementor solves this problem ? this is my site ===> http://irresistables.co/

  8. Hello, Great Video, but going through it today, August 4, 2018 and Host Gator will not provide a fee SSL cert unless the domain is registered through them.

  9. Hi Could anyone help me please !! I am using elementor pro / Oceanwp theme / — how would I add " read more " via elementor I dont see where it is to add it. I can see it in (wordpress editor) but wont work with the theme and elementor.

  10. you did all that content and you only have 25000 subs from where i`m from i`m living in a very big puzzel in the messed up not complete content a bout that subject

  11. hi Alex, how many articles should my amazon affiliate blog has to have in order to apply to amazom associate program and becomes succesfully accepted?

Leave a Reply

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