How to Make a WordPress Website (2019) – for Beginners – Elementor & Astra Theme.


Welcome to eMediaCoach, the channel
that helps you make an amazing WordPress website today. This is the
finished product. We’re going to show you how to create this awesome website with
WordPress in the next hour step-by-step, and it’s going to be super easy for you.
If you’ve got a keyboard and mouse you’ve got the right skills you need to
make this amazing WordPress website you’re looking at right here. We’re going
to use WordPress which is one of the world’s most popular website platforms
and also a plug-in called Elementor which is an amazing website builder and
it’s perfect for beginners these pages that you’re looking at right here were
actually imported in just a few minutes with a few clicks of the mouse and then
they were edited to customize our pages so it was super super easy to make this
website it’s perfect for beginners and there was nothing technical involved so
it’s the best way to make a website for your small business before you go to
sleep tonight and here’s something else that’s really cool it’s perfectly
responsive on the mobile phone as well go to this URL on your own mobile phone
because we’ll keep this live just so you can see for yourself how it will be when
you finish yours in about an hour we’re going to go through this tutorial
in a few easy steps firstly we are going to get online we’re going to get our own
website domain name so that you can have your own address on the internet then
we’re going to install the very popular WordPress platform to manage your
website then we’re going to install the design and with a few clicks of the
button we’re going to import ready-made professional-looking website builder
templates that you’re going to be able to edit you can edit the pictures the
text at the buttons everything you can imagine and we’re going to go through
all of that step-by-step if you have any questions please do ask in the comments
below and we’ll be more than happy to help all of you out there we want all of
you to succeed today so like I said we’re going to be using the WordPress
platform it’s used by about 70 to 80% of websites worldwide and you can see some
very popular names as I scroll down the page here companies such as eBay CNN New
York Times jay-z Katy Perry and TechCrunch and a lot more used WordPress
in some way shape or form for their website we’re also going to be using a
plug-in called Elementor and if you can use the keyboard in the whales you can
use this drag and drop website builder and it’s fast becoming one of the
world’s leading WordPress page builders so here is our agenda firstly we’re
going to get online we’re going to get you your com domain name and your web
hosting because without that without those essentials you wouldn’t have a
website and because you’re following everything with this tutorial that’s
only going to be about five dollars a month installing WordPress is step two
that’s going to be free because you’re going to be following this tutorial will
show you how to do all of that installing the design and using
ready-made templates we’re going to show you all of that it’s going to be free
drag and drop click a few buttons and we’re also going to customize your
WordPress website which will become the fourth step and making a look exactly
how you want in terms of images text contact forms and any other
customizations that you need for your small business so let’s start with step
one getting online it’s the absolute bare
essentials and then after that everything just gets even easier so
let’s start building our WordPress website okay so let’s get to step one in
our process to create this WordPress website and that is to get online and
that is the only way that you can get your website live and online in the real
world so that your website appears anytime somebody types in your web
address so what you need to do is go to hostgator.com forward slash discounted
that you are all over there and I’ll link it in the description below as well
you’re either going to land on this page here or you’re going to land on the
Hostgator home page either way it doesn’t matter I’ll show you what you
need to do so Hostgator is what is known as a web hosting company web hosting is
where all of your files are stored on the internet so that when anyone visits
your web address your website shows up and is able to be accessed
so without web hosting your website would not load it’s not enough just to
have a name buying that is just a name but the thing that makes your website
appear and all the contents of your website is web hosting and it’s only a
few dollars a month and that’s the beauty of this it’s very cheap and very
easy and Hostgator are the company I’ve been using for around 13 to 14 years
since 2004 so that’s why I recommend them they’ve generally got very very
good support 24/7 and you can read up on their services but what you need to do
is go to web hosting the hatchling plan and the baby plan are very similar the
only difference is that the baby plan will allow you to add an unlimited
number of web sites to your hosting account whereas the hatchling plan
allows a single domain to your hosting account you can always upgrade in the
future so if this is your first web site just go to a hatchling plan and click on
the button to go to the next step you can look at all the tech details if you
want to if you already own your website address which is for example your com
domain name click on this tab here and enter your domain in
this field and if you don’t own one register a new domain by entering it in
here as an example if I type that in that URL is unavailable that’s because
I’ve previously purchased this so what you need to do is think about what your
business name is or what you want your website to be called and type in your
requested domain name here cool selecting between commnets org or any
other extension just so you know it’s all the same the best practice is to
stick with com or a dotnet or if you’re a charity generally org but you can
choose from any extension you want so once you’ve entered your domain name
just go down the page you can add domain privacy protection if you want your
details to remain private or you can deselect that this is an example of what
your domain address looks like if someone searches for the domain owner if
it’s private and this is what it looks like if it’s not private so it’s
completely up to you I personally do not keep all of my domains private so this
is not essential completely up to you I won’t be purchasing this on this
occasion then if you go all the way down the page do you select all of the
add-ons that are selected by default over here you don’t need this I can show
you later how to keep your website secure in another video you’ll be able
to add your business email without paying this additional $5 a month fee
when you purchase web hosting this comes as default and I can show you how to do
that in another video you definitely don’t need this and similarly backing up
your website you don’t need that either so you don’t need any of these add-ons
in fact I don’t use any of them myself so it’s completely up to you if you want
to now go down to the coupon code if you went through the URL I said earlier
hostgator.com forward slash discounted you may already get a really good price
and a few discounts but I’m going to show you how to make sure that you do is
so just type in the discount code discounted and click validate
when you do you’ll notice that the price you’re paying is much less and if you
scroll up you’ll see that you’ve got a number of options to choose from all
that a very highly discounted rate so take advantage of that I generally
subscribe for approximately one to two years at a time because the costs
involved are so small around five dollars a month to get my website up and
live on the internet and think about it if you’re running a website your website
should be making you money it’s a revenue generator it’s not an expense so
I’ll select that then you left it enter your user name enter a security pin and
then under billing info enter all of your details and be careful to enter the
correct email address because that’s where you’ll receive your new account
opening information with the next steps in this tutorial so I’m going to take a
second and fill all of that out and then to the credit card details or you can
use PayPal once you’ve done all that scroll down just check your order then go down click
on the agree to the Terms & Conditions button and click on checkout now and
we’re ready to then log into our account and install WordPress in the next step
so checkout now after you do that one of two things will happen either Hostgator
will redirect you to a checkout page where you’ll be able to see your account
details and you’ll see a tab at the top of your screen called hosting if you see
that click on that tab there another thing that will happen is that you
should receive an email like this from Hostgator which will contain your new
details your new account details such as the plan that you’ve purchased and some
key login information with a username and password and this is the information
that we’ll need what your control panel is is a control center for your website
that just allows you to install WordPress after you install WordPress
you’re not really going to need this anymore
so what you need to do is click on this link here and it should take you to a
screen that looks like this all you need to do is copy and paste the username and
password just making sure that you don’t have a space at the end when you copy
like that otherwise it won’t work and then log in to your control panel so
I’ll do that now and then login so here is our control panel what you
need to do now is scroll down and look for either WordPress or look for
something called quick install so there’s quick install if you’ve got a
quick install you should be able to see an area that allows you install
WordPress and there it is there if you don’t see that then you may see
something like this and that will work as well so get to this page here
it’s the installation for WordPress you should automatically see your domain
populate over here but since I’ve got a lot of domains I’ll just have to go and
choose it from the drop-down menu keep the directory field blank
all of this stuff here are upsells and you don’t need this we’re showing you
how to install WordPress and set up your website yourself you don’t need any of
this stuff everything from here doesn’t cost you a cent so make sure you select
that keep your directory filled empty then click Next enter a blog title which
is your website title and this can all be changed later enter an admin user
such as your first name or any other admin username that you want to use and
enter your first name and last name also enter your email address and this is
very important because if you ever lose your logging details to WordPress and
remember WordPress is the engine for your entire website it’s where
everything is going to be set up configured and managed so it’s the
vehicle behind your entire website so just ensure you enter the correct email
address and leave this checked yes we want to automatically create a new
database and we agree to the Terms of Service and then click install what it
will do now is take a minute or two to install the amazing WordPress platform
onto your new website once that’s done you’ll see your installation details
appear over here what I highly suggest is that you take all of this copy it and
put it in a notepad somewhere write it down somewhere save it in a
document somewhere because if you lose that it may be a little bit more
difficult to get into your WordPress installation but if you’ll also get an
email when you install that to that email address but it’s good to have that
handy then I’m going to click on the login button and I’m going to open that
login page in a new tab just so I’ve got these details handy if your website
doesn’t load and you cannot see anything then that means one of two things
firstly it means that the domain you’ve registered has not been connected to
your hosting check out our frequently asked questions on an a media coach
website and we’ll show you exactly how to fix that right there
the second reason could be that Hostgator has not yet activated your
domain so what you could do is get on the line to Hostgator contact them via
the live chat and you should have someone help you out in the next 10 to
15 minutes so if you come across a page that doesn’t work when you click login
don’t worry do one of two things check that your domain is connected if you’ve
bought your domain elsewhere otherwise contact Hostgator and if it still
doesn’t work or you can’t figure it out let me know but it can take half an hour
to an hour to activate your domain once all of that happens so what I suggest is
coming back to the login page and another important piece of
information here is the login page URL write this down it will be your website
URL forward slash WP dash admin this is known as your WordPress dashboard login
whenever you go to that URL after your domain is activated that will be where
you login to the engine of your website so if it’s not working now come back in
an hour and check again so I’m going to wait about an hour and come back and
continue this tutorial okay so I’ve waited an hour and I’m just
try and load the website again absolutely perfect and this is the
screen you should see to log into WordPress so all you need to do is now
copy the username and password and login to WordPress oops that’s a username and
not paste the password and here we are this is your WordPress dashboard this is
the dashboard that you’re going to be using to create your entire business
website and we’re going to be showing you how to customize the look and feel
of your website add new pieces of functionality using things called
plugins and it’s going to be so simple the hardest part of this tutorial is
already passed us the first thing to do when you log in is just go to users and
then go to all users and go to your username and what I’d like you to do is
change your password because it’s going to be very difficult to remember that so
if you go into that area there scroll down and you’ll be able to enter a new
password here you can enter your own password so let me just hide what I’m
typing in here I’ve confirmed the use of weak password I suggest you put in some
some stronger characters capital letters dollar signs things like that to make it
a stronger password and then update your profile now just as an example I’m
logging out of my wordpress dashboard you won’t need this stuff anymore you
can close this you can close your cpanel the way to get to this screen once again
is your website forward slash WP dash admin that will take you to this page
here and then you’ll be able to enter your plain password to log in to the
engine of your WordPress website if you have any questions so far please do ask
in the comments below and if anytime we’re delivering value to you and you’re
enjoying this tutorial and it’s helping please do give it a thumbs up
now let’s continue on and I’ll show you how to install the amazing website
design so easily in just a couple of minutes in the next step so let’s move
on to step three let’s install our WordPress website design and then
install a ready build template that looks amazing
and it’ll just take a couple of minutes here’s where the fun part starts so back
into your WordPress dashboard go and hover over appearance and then go to
themes click on themes you need to go to the area that allows you to add a new
theme and that’s just here the wordpress.org themes then search for a
theme called ASTRA hit enter and this is the one here this is a theme in
other words design that we’re going to use for our new website it’s called the
Astra WordPress theme it’s an incredibly flexible theme that allows you to do a multitude
of things to your website and customize your website in any way shape or form so
let’s click on that click on the install button and then once it’s done
installing you can click on the activate button when it comes up so there it is
click on activate perfect now let’s have a look at our web site address just so
you know your website is now live to the real world you’ve now been able to get
online and that’s exactly what you’re looking at you can access this from your
mobile phone or any computer your web domain is live and running and this is
what you currently see not very good right now but don’t worry in the next
couple of steps you’re going to be really really amazed at what we’re about
to do it’s really the easiest way to create a website with WordPress so now
once you’ve installed and activated the Astra theme what you need to do is go to
plugins hover over plugins click on add new now what is a plug-in before I do this
let me just explain that to you a plug-in is something that allows you to
add extra functionality to your WordPress
website for example right now we have a core WordPress installation but we can
add plugins for various things such as contact forms we can add a contact form
plug-in we can add an SEO plugin we can add a WooCommerce plugin for selling
ecommerce online and so plugins come in various shapes and forms and allows you
to add extra functionality to your website the plug-in that we’re going to
install now is going to be one that allows you to create instantly a
beautiful looking website template so what you need to do is go to add plugins
and then search for a plug-in called Astra starter sites and that’s the one
they’re Astra starter sites install now and click activate that will allow you
to import an already built website in a matter of seconds so if you scroll down
now you’ll see that the Astra starter sites has been installed to import the
ready-made website design what you need to do now that you’ve installed all of
that is go to appearance hover over appearance and you should see an area
for Astra Sites so click on that and then scroll down it will ask you to select
your favorite page builder and the one we’re going to use is Elementor. Elementor is an extremely flexible WordPress page builder so click on that you’ll now
have an option to choose from a number of beautifully designed templates and
you can preview on just by clicking on it and looking through it like that and
you can see that they’re absolutely amazing these are pre-built
you can deploy these in other words install these to your website in the
matter of a click or two and then start editing things on your website
here’s this outdoor an adventure one it’s also one of the easiest ones to set
up so let’s check this one out if you’re happy with this one what you can do is
then just click on once you preview just go down here and click on install
plugins you can install the plugins individually like that again a plug-in
is adding extra functionality to your website so contact form 7 and Elementor
on are needed to use this particular pre-built template once you’ve installed
the necessary plugins you’ll then be able to import this site to your own
website so now it’s just letting me know that this will now import this entire
site onto our WordPress installation and are we sure that we want to do that yes
give it a few seconds up to a minute to import all of that data and let’s just
wait and I’ll show you what the outcome of that is depending on the speed of your internet
connection it can take up to a minute or two so this is what it looks like when
it’s done and then we’re able to view our new website and check that out guys
that looks absolutely amazing don’t you think in just a handful of minutes we’ve
been able to go from getting online to installing WordPress to installing an
amazing-looking pre-built website that we can now start going in and
customizing to your taste and I’m going to give you all the tools and knowledge
you need to do that in this tutorial right here again if this tutorial is
helping you please do help us by giving this video a thumbs up and subscribe to
our channel and do share it with your friends but check it out here’s your
homepage here’s the about page it looks pretty spectacular we’ve got a services
page that has been built by default as well and last but not least here’s what a
contact page looks like with your very own webform so customers can come and
fill out that form and you’ll receive that message in your own email address
and this is a good example of a plug-in we just installed a plug-in called
contact form 7 if you remember a couple of minutes ago and this form uses that
particular plug-in to have that contact form functionality on your new WordPress
website all of this cool stuff and it’s ready to go so the rest of this tutorial
is to show you how to customize and setup your website to make it look
absolutely amazing the next thing we’re going to do is do a little bit of
housekeeping just to set up the site as we need it without all of the clutter
that exists on it right now so what I’m going to do is just go back to the
wordpress dashboard and you’ll see all of this clutter that exists and we don’t
need a lot of this just follow me and you’ll be fine so I’ll take you through
the process of how I set up a standard website so go to settings and go to
general this is the area where you’ll be able to change your website title and
also a tagline if that’s applicable to you you’ll also be able to add a WWE in
front of your website URL what that is is just a display on your browser it
doesn’t really affect anything so it’s just a personal preference for me I like
to have a WWE in front of the URL when I go to my website and same for your
visitors and so if if it doesn’t and you want to do that all you need to do is
click in between the forward slash and the first letter and just type WWE and
make sure you’re doing in the second field as well over here now be very very
careful double-check and triple-check this because if you stuff this up your
website won’t load and you’ll have to start the whole process again and
reinstall WordPress so make sure you’ve got the forward slash /ww your website
URL in that field and in this field here when you’re confident you’ve done that
right you can click Save Changes and what it will do is log you out
automatically and asked you to log back in when you’ve
done that next what we’re going to do is delete any of the plugins that we don’t
need that have been installed by default it’s just a lot of clutter and a lot of
bloatware and we don’t need most of it so just hover over plugins and go to the
installed plugins area what you’re going to do is scroll down and I want you to
deactivate everything except the Astra starter sites the contact form seven
Elementor I want you to deactivate everything except those three plugins
because they’re the three essential plugins that we’ve just installed and
essential for building our website at the moment everything else is just a bit
of bloat and it’s messing up our side it’s just creating a lot of clutter we
simply don’t need it and it also adds the risk of your website being hacked so
what we’re going to do is hover over all these other ones and click deactivate a quicker way is to just click on the
checkbox next to each one of the ones you want to deactivate and go to bulk
actions and deactivate and then hit apply
if you deactivate one of those these three by accident don’t worry you can
just reactivate it so once you’ve deactivated those just check them off
again and then what we’re going to do is delete perfect so now all we should have when
we go to install plugins is these three plugins and we won’t get any of that
clutter that we had before next what you need to do is go to pages and click on
all pages when you install WordPress and you install a theme
sometimes it installs some default pages just
just to give you a sample and there it is there the sample page so what we can
do now is delete that sample page so we can click on trash all the other pages
that have Elementor next to it are obviously created when we imported that
default template on our website as we can see up here so you can delete any of
those if you want but I would suggest leaving them activated because you can
definitely use them as a template then go in and then start editing those two
pages to make it even faster to finish your website in fact it could even be
just an hour update a couple of images update a bit of text delete anything you
don’t need and boom there you are you’re done you can launch your website you can
start promoting to all your clients so once you’ve deleted a page just go into
trash and you’ll just have to delete that permanently and the same thing when
you go to posts just hover over post and go to all posts there should be a hello
world post trash that go to trash and delete permanently now the next thing
we’re going to do if you go to any one of your pages right now and look at the
URL it is not the best possible URL it could be that is not a clean URL what
you want it to be is something like this and then if you have a service you want
it to be reflecting the service or the page that’s under it so you want your
URL structure to be nice and clean so there’s a way to update that back in
your dashboard if you go to settings and go to permalinks right now we’ve got a
custom structure activated and it takes that structure over there and that is
not ideal what we want is to delete that we want forward-slash category forward
slash post name so it’ll be your website calm /the category of a post forward
slash the name of the post now it’s important to note that this only applies
to posts however I think these things here are pages but I’ll get to that in a
second what we’ll do is just make sure you update that and then Save Changes
now go into any one of your pages so go to pages and all pages let’s take the
projects page for example click on that and what you’re going to be looking at
here is the content editing module for WordPress I’m just going to go back to
the wordpress editor the settings tab over here and as you
can see the URL for this particular page has actually changed it’s now projects and if you’ve seen what I’ve just done
when I toggle back to the WordPress editor the website format did not format
correctly when I loaded the website so you need to use this in the Elementor
site editor module but anyway we’ve been able to update the URLs of our pages now
and that’s all we need to do as far as basic housework goes now let’s start
creating our home page the next thing I’m going to do is take you through some
of the general customization features that are available for you to choose
from to customize this in the way you want so I’m just going to go back into
my dashboard now and I’m going to hover over appearance and click on customize if we start at layout and I click on
that and then go to header and site identity here you’ll be able to add a
logo of your choice if you’ve already got a logo created or made on your
computer you can upload that right here and it will appear over here that’s
specified for the logo if you don’t have a logo made already go and check out one
of my other tutorials on getting one made online for free or how to get one
made by a designer you can change the site title over here we previously
changed it to make a website so you can change it in the method I showed you
before you can change it by going over here and your tagline can be something
about your business something that’s interesting that would make people click you also have the option of not
displaying the title and not displaying the tagline that’s particularly useful
once you’ve updated or I should say uploaded your logo whenever you’ve
updated something just click on publish I’m just gonna go back to customers I
just lost my spot there back into layout and header you can also choose the way
in which you want the header to be laid out right now we’ve got a logo on the
left and menu on the right you can also have logo in the center like that or
that way around or you can disable the menu completely the last item in the
menu at the moment it’s set to a button and that’s this thing here you’ve got
the option of not showing that or choosing something else and also the
option of changing that text and that will update dynamically as you saw and
also changing the link URL you can also customize the style of the button and do
a few other things that you can have a look at in your own time so I’ll publish
that and this click the back arrow when you want to go back to your
customization options you can also choose a transparent header if you would
like to do that what else can I show you in terms of general customization colors
and background you can choose your base colors so that red over here is that
highlighted color over there so you can actually choose based on what your color
scheme to be and if you’re in doubt about the color scheme just go and
Google something like famous brands color palette and you’ll be able to see
the colors that some famous brands around the world use to get some ideas
of course you can also choose a background color you can choose from any
color that you want here and that color can also have a level of transparency to
it if that’s what you’re after but I’m going to clear that once it’s updated I’m going to clear that then I’ll go
back header transparent hello this is actually the one I was looking for the
background color overlay will not change that that changes the bar at the top as
you can see now you can choose from any color that you want and you can also
change the intensity of that particular color and also manage the transparency
if you want that Henner to be a transparent header and that looks pretty
cool actually so this is a popular one here if you go to black and then make
this sort of semi-transparent this is actually a very popular style to have
for a header area over there so that’s completely up to you you can also change
the site title color and that’s the site title over here so you can change those
colors and I’m just going to clear that to a default similarly the hover color
so if I hover over that that’s the color that changes to and also the menu
background color the menu link colors and the menu hover colors in the same
way so that’s all completely customizable later on this tutorial I’m
going to show you how to create a drop-down menu and when we do that
that’s called a sub menu and you can actually change the background color the
link color and the hover color for those drop down menu items as well that’s a
bit later on so if you’re happy with what you’ve done you can publish the
changes or you can clear anything you want to get rid of so I’m going to
publish that I actually like the way this looks similarly you can do a few color
selections for the footer and the footer is the thing down here for two feet down
at the bottom that’s what that is there you can also change the typography which
is the font style the font size line height and other stuff like that to make
it more personal to whatever your theme is for your website or the business that
you have and you can also Google some popular themes for your industry to get
some ideas around that you can change font style and sizes just like that and
also the content font size customize buttons customized menus I’ll get into
that later and other home page settings but you won’t need to change any of that
because right now we’ve got the home page set to home which is done by
default so that’s all fine but I hope that gives you some sort of an idea of
the kinds of things that you’re able to customize I’m actually going to upload a
logo here but I’ll do that in my own time after I finished this part of the
recording I’ve got a logo pre-made so I’m going to upload that but if you want
to learn how to make a logo check out one of my other tutorials any questions
about any of that stuff just ask in the comments below and I’ll get back to you
as soon as I can the next thing I think that’ll be useful
for you guys is to explain the usage of Elementor, the plug-in Elementor
itself and how that’s used to manage and customize your website so once you log
into your site and if you go to visit your site and go to any page on your
website you’ll notice this black bar over here in that black bar you’ll be
able to click on this button edit with Elementor now let me explain a little about this
area over here so you understand what the various features are and how you go
about editing all of this stuff so if you click on a module and then click on
these dots over here it allows you to edit that particular section what happen
when you do that is this bar will come up over here on the left hand side
you’ll be able to adjust the layout and the various options within the layout
you’ll also be able to adapt the style for example this is the image over there
you’ll be able to select from a gradient an image or a background of video you
can also select the position of text stuff like that the Advanced tab is not
one you’ll use too often unless you want to increase or decrease the padding and
that is the space in between items so you can also add new sections by
clicking the plus icon over here what that will do is add a new section in
there you’ll be able to click the plus icon there when you want to add a new
section then select what kind of a layout you want so let’s say we want
this layout you’ve got some three bars over here you’ll be able to click these
dots over here and then drag and drop elements such as that to start setting
up various modules or new areas on your website so you can create as many
sections as you want so I’m just going to delete this section for now and I’m
going to start by just showing you the options for this particular section here
so you can change the structure as you can see there right now we’ve got 3
columns 1 2 3 these two on the side are providing a little bit of padding so
that this text doesn’t get extended past that area in case it’s a very long
sentence and the way you add a text is very very simple it’s a very visual
method of editing a website so all you need to do is click there and edit just
like you would it’s a visual inline editor and you can change various bits and
pieces by clicking on them for example of clicked on the button I can change
the type of button what that button says and what I want to link to with that
button just like I can when I click on that text there I can change various
elements and of course I forgot to mention if I click on the button and go
to the next tab over here I can change the actual style which includes the
background color and various other visual elements of that there so that’s
a brief introduction on editing things with Elementor and as you can see I can
click on any section edit text edit style or even remove that section or add
a new section in between here and there and starting from scratch so that’s just
a very brief general overview of how this element or plugin works you can
also copy and paste things such as right-click on a button or copy that
and say I want to paste that button over here or I can copy that button copy the
button and paste not the button but paste the style of that button that what
that will do is take whatever that is there but it will paste the visual
elements of that thing I can also press control Z or command Z
on my keyboard if you’re using a Mac to get rid of anything you’ve done just
like you would in Microsoft Word Peh style there we go
so it’s very very cool it’s very user friendly and you can use that to start
editing various modules or you can create new modules on your own so that’s
just a very basic overview of how to use Elementor and that should give you a lot
of the tools you need already to start messing around and using a little bit of
trial and error and don’t worry because you can always go back to the previous
state if you wanted to if you make a mistake so please feel free to mess
around and use trial and error if you’re not confident on the
Paige go to any other page on your website and you can do the same thing so
you can go to any other page on your website that’s currently existing or you
can create a new page so let’s try projects for example edit with Elementor and you can use the exact same process a
little bit of trial and error to get a feel for it and within about 10 to 15
minutes you’ll start to become quite comfortable but if you have any
questions about that so far let me know in the comments but let’s
get into now setting up the home page module by module so like I said I’m
going to start with editing the home page and let’s start with editing the
top hero area that you see at the top of the home page so what I’m going to do is
click on that module click on these little dots over here what that will do
is open up the left hand side editor menu what I’m going to do is go to style
and what we can do is actually insert a new image if you wanted to so we can
delete that one and add a new image we can select an image from the media
library that’s already there or we can upload a file from the computer if
you’ve got an image and here’s a little tip go to unsplash.com it’s a collection
of free royalty-free photography and it has some beautiful images there that you
can use so just type in a keyword and you’ll be able to find something pretty
cool download for free to your computer so I’ll save that and now let me just go to upload files
select files and I’m just going to look for that file that are downloaded when
you select a file it will upload just wait for a couple of seconds and you’ll
be able to insert that media to your website and there we are so as we can
see now the image is also not just the image itself it’s overlaid with the
darker texture so that the writing is highly contrasted against it so it’s
easy to read that’s the original image there but this
has a dark overlay you can also change that by going to background overlay and
increasing or decreasing the opacity and you can also select the color of that
particular background overlay if you would like to so that’s how you can add
an image to the background and so if I update that and then go to visit my
website let’s see what that looks like there we go that’s already looking very
very cool now I’m going to take this a step further instead of just an image
I’m going to create an additional module and keep it there to show you what we’re
able to do when we upload a video so there we go I’ve duplicated that entire
section by right clicking and clicking duplicate so now I’ve maintained all of
the style and all of that stuff but all I want to do is give you another
demonstration of what’s possible what I’ll do is click here I’ll go to those
dots I’ll go to style and now the background type at the moment is classic
and it is this image I’m just going to delete this image for now I’m going to
select a background type of video and what this allows you to do is enter a
video link which will display a video a dynamic moving video has the
had a banner for your website and it will look absolutely fantastic if you
choose the right video so I’ve found a video on YouTube here that’s slightly
entertaining so what I’m going to do is grab that URL and I’m going to paste
that URL in here and just let that do its thing so as you can see the video
has started playing I can also select the start time so let’s say 55 seconds
in and an end time if you would like to you can also add a fallback for the
video if the video doesn’t load for example sometimes on mobiles videos
don’t load so you can also add an image in place of that if you would like to perfect let me just check if I want to change
anything in the advanced slide should be okay
layout okay I won’t change anything there all I’m going to do is click
update and let’s refresh to check it out one other thing to mention if you don’t
enter an endtime you won’t actually loop so what we’ll do also is enter an end
time let’s say eighty seconds and that video should loop over and over again
now if I go into the background overlay section you’ll see that there is an
overlay in front of the video that’s why the video is a little dark so you can
change the opacity of that to make that even clearer if that suits your video
and your home page so we’ll do that let’s update that and refresh one thing
to note though is that the video if it’s on top of your website it sometimes
interferes with this banner if it’s a YouTube video particularly so I
recommend that if you’ve got a video you uploaded onto your website as a video
file and all of this stuff won’t interrupt you won’t get this black bar
what you’ll get is this is a beautiful-looking light menu bar that
you would have seen before with the video in the background but of course
this is just an example for now what I’m going to do is just move the video down
the page a little and move this image up the top the way to do that is if I right
click and go to navigator I can actually just drag and drop the first section for
it to become the second section and therefore the second becomes the first
and that’s what’s happened right here and that is the way that you can start
arranging your website you can also make the video appear in a certain portion of
your website for example if I want this module to be bigger I can then go to
these tabs over here drag and drop the video module click on that and then all
I need to do is paste my video link set the start time set the end time and now we’ve got this beautiful video
sitting in our screen we can also make that water play we can also mute that if
you want to do not play the music it’s completely up to you so it’s up to you how you want to
arrange that obviously it’s all about personal preference all right guys let’s
finish off the homepage if you scroll down you’ll be able to do a few things
you can actually copy or duplicate a particular section if you like the
layout of that so then you can clone that you can delete anything you don’t
need you can add new modules and just drag and drop them from all the modules
available in this area here you’ve got quite a few to choose from depending on
what kind of a structure you want to your site and what kind of information
you want to put on there you can choose from a whole range of content elements
as you can see here very very cool what I’m going to do is I’m going to scroll
down little I’m just going to add a new section here let’s say I want full width
section I’m going to click on the dots over here so I can drag in the heading
perhaps and put in some text I can align that I can also adjust the size of that
heading when I go to style I can also assign the text color and any shadows
and font that I want to change what I was gonna do let’s see I might also put
in some text under that heading if I click on that I can adjust this text I can of course I can align that as well
if I click on that there I should see the ability to align that and then let’s
go to style so that’s already Center aligned I can change the color if I want
to and if I want to increase the spacing between this and the thing above it I
can add some padding so there we go so I’m going to unlink all the values so
that I can just add top padding and not affect the rest then I can add perhaps I
can even add a Google map if I wanted to to show my location of business if
that’s something that’ll interest you let’s try some social icons so click on
that I also want to add some padding there so there’s some space in between
the social icons and the text above it style that’s all good okay and then what
you can do with social icons either you can put your actual social links there and you can put your Twitter you can put
your Google+ or you can also add other social links you can choose that from
the drop down over here so we’ve got a youtube account so I’m obviously going
to put a YouTube icon and then link our YouTube channel as a final example I can
add perhaps a perhaps a button under that I’ll just drag that in there click
on that module let’s center-aligned that one let’s increase the size of the
button but to make it easy let’s just get one of the existing button styles
let’s copy that and then let’s paste that style here center-aligned I’ll add some padding perfect you can make any adjustments you
want to over there change the text color at the moment it’s white on a red
background so it stands out nicely and you can obviously change what you want
to button to say and where you want it to link to perfect let’s update that now I’m just
going to refresh the website so we can see what we’ve created there another thing we can add is a background
there because it’s a bit of a fusion between this and the thing above it so
it would be nice if this area stands out a little bit so what I’m going to do is
click on the buttons over here then let’s go to style and background I want
to add a classic background and I want to select an image and for this let’s
just select an image from our gallery if there’s one that’s appropriate let’s
take this one and what I will do so that it stands out nicely now this image
obviously is too small for this area that we selected so we’ll obviously need
an image that’s appropriate and if you can’t find one like I said before go to
unsplash and choose one from there but I’m just going to give it a shot now okay so you get the point instead of an
image where you can also do is just select a solid color and we can even adjust the color of this
thing here and we’ll make that white as well and
we’ll give that a little bit of padding and we’ll give this some padding at the
bottom there we go that’s nicely spaced out so there we are just an example of how
we can add modules that’s obviously a very crude example but you can obviously
make a lot better by adding a nice background image or just copying an
existing module such as this we can duplicate that so it exists there we can
rearrange in the navigator so let’s say we want that there and then we can start
editing things so that it looks good we can just have – all we need to do is
edit the image and edit the text and this one is an overlay image so I hope
that makes sense if you have any questions about any of that just let me
know in the comments below so I decided to Center align all of these modules
over here and also give the background a darker gradient so the background
overlay what I did was given a darker gradient so that the text pops out a
little more and then updated that and refresh the site and I think that looks
pretty cool now perfect example of using the existing module and updating it to
make it look just the way you want it actually minimizes the work you need to
put in to create various modules on your page and this approach can be applied to
all of the pages on your website going forward alright so we’ve created an
awesome home page for our WordPress website but now I’m going to show you
how to add new pages onto your website I’m going to show you two ways to add
new pages one way is going to be to use a pre-built template and the second way
is going to be using or adding pre-built modules so I’ll show you both methods
and both methods are very very fast so to add a new page just hover over pages
and click on add a new and just keep in mind you can add an unlimited number of
pages to your WordPress website there’s no limit just make sure it’s structured
correctly and I’ll show you how to do that a bit late
Terron so add a title to your new page so say for our example we’ve got
services so we want to add a service called consultancy let’s then after we
add a title we’re not going to use a standard WordPress word editing module
we’re going to click on edit with Elementor as that’s the easy way to
build our website give it a few seconds to load all right so now the first
method and that is importing a pre-built template so what you need to do is click
on the folder icon over here you’ll be able to choose from a number of
pre-built templates the ones that have Pro written in the top right corner paid
templates the rest are free so let’s just focus on the and the free ones for
now let’s take this one for example it looks pretty slick so what we can do is
we can click on the insert button and now this is where the magic happens give
it a few seconds to load to import onto your website it’s doing
all of this automatically for you it’s going to import that entire web page
just as we saw right there and now it doesn’t have to look like this you can
click on any one of these modules you can click on this thing here you can
change this background image if you like and you can change all the other bits
and pieces like we talked about for the home page in this very same way and everything you see here is
customizable from images to the background to the text and also the
layout you can also click on a module so let’s take this module and you can
actually change its structure and layout it’s very very cool but what we’re doing
is using a pre-built template that already looks fantastic and just
tweaking it and customizing it to make it look any way you want it’s the
quickest way to create a WordPress website that I know of currently so
that’s one method let me take you through another method by the way if I
press ctrl Z or command Z it allows me to undo any changes that I’ve made and
get rid of that entire thing okay so now here’s the second way to add a new page
check this out it’s fully customizable using pre-built modules so now instead
of the pages area over here where you can select from a number of pre-built
pages what we’re going to do is click on the blocks area so what this allows us
to do is choose from a number of pre-built blocks to add to the page and
then we can go in and customize all of those blocks the way we want so if I
click on the drop down here first we need a hero block that is the thing that
sits at the top of any page the big image with big writing something that
captures the users attention so let’s take this for example it’s free 1 and I
can click insert what that has done is entered or added this entire block on to
this page now let’s go in add a few more blocks if I scroll down here I can click
on the folder icon again go to blocks now I’m going to repeat this process and
at around 4 to 5 blocks so you can see what this thing looks like and seriously
it’s the quickest way that I know so I hope this is really helping you out in a
big way ok let’s add a client section our clients let’s throw that on nice one what else can we add perhaps
some services okay and then perhaps call to action something like that now don’t worry
about the colors that’s all customizable and to top it off we will add perhaps
our team members that looks alright and for good measure some testimonials now feel free to have a look through all
the remaining modules that I haven’t already gone through because there’s
some really cool pre-built modules that Elementor gives you ready to go so you
don’t have to spend time setting all of it up so we’ve added all those modules
to the page but now what well all of this stuff like I said is customizable
so say I don’t want this dark background on the top module over here let’s click
on those buttons let’s go to style let’s go to the background overlay actually
the background okay yep background overlay you want a classic overlay we
want to add perhaps an image and I’m going to drag one from my computer and
upload that insert and there we go we’ve changed that image and we can also
change the opacity one of the suits your website you can also change the text of
course change the images nice one change all the colors for example etc
etc I can even get rid of a whole entire block by clicking on the X over there
but I think you get the point you can even change all of the images here the
text of course and the social links anything that you need to change just
click on that item and you’ll see it come up and you’ll be able to customize
that or even right-click and delete that particular thing at any time so that’s
the quickest way to create a page now let’s click the publish button and then
we can preview our changes there we go we’ve created this in as little as a few
minutes with a few tweaks and color changes this will look fantastic if you
have any questions about any of that let me know in the comments below but just
for the record I’m going to go back into the WordPress dashboard and show you
what a pre-built template looks like so let’s exit to our dashboard and then
let’s create that other page and then ed up with Elementor and now
I’m going to select that pre-built template and save that just to prove to
you that it’s easy to set up an entire page in as little as about a minutes there we go and I’ll click publish and
let’s have a look at the changes there we go a brand new page and it looks
absolutely amazing the easiest way to create pages on your
new WordPress websites by the time you’ve created all your pages and added
them to the menu I want to let you in on our little nuances that will make a big
difference to your website if you hover over any pages that you’ve added to a
drop down you’ll see that the URL well let’s go to that in fact let’s go to
these two pages they’re both pages under the services parent page so you may have
some parent pages and some child pages the parent page URL so services for
example should be your website forward slash whatever that parent pages now for
the child pages such as consultancy because it’s under that item there it
should be consultancy however you’ll see the URL is not that and it’s forward
slash just consultancy without the services so that’s not ideal in terms of
a website hierarchy we do not want that you want child pages of a particular
item above it to reflect that they are one level deeper so how do we do that go
to any pages that you need to change the URL of so let’s take consultancy as an
example let’s go to edit the page you’ll see there’s a URL over here that’s the
default URL but what we need to do is go down to the page attributes section so
click on the error that opens up the page attributes then parent page select
the parent page for this particular item in this case it’s services
and then click update’ you’ll notice that this URL has now changed this page
here is now a child page of services so now when you go to that page the actual
website URL now reflects that proper URL structure so let’s take this one as
another example it’s a level deeper than services in this example so let’s edit
page let’s go down page attributes parent page services update now this
page also reflects the proper URL structure so just keep in mind your
website hierarchy whenever you have pages and subpages make sure you
carefully select the parent page so that your WordPress websites URLs
correctly reflect that so it’s great for search engines and it’s also very very
good for your human users as well because they can see exactly where they
are within the hierarchy of your website so there’s a little tip a little nuance
that will add massive impact to your website’s performance and your user
experience so you’ve created all these amazing pages but you can’t see any of
them in your WordPress menu so now I’m going to show you how to add those pages
into your WordPress website menu so let’s go back into the dashboard let’s
click on that let’s exit to the dashboard so what you need to do is go
to appearance and then menus the menu structure that comes up here just ensure
that the primary menu is checked if it’s not do that but one of these this is the
menu structure of your website at the moment so home about services projects
contact home about services projects contact so now we want to customize this
menu you may have added a whole lot of new pages so how do we get them on there
and manage this menu so the first thing is we can drag and drop things to any
order we want them to appear and when we do that and click Save that will take
effect on the front end we can also click a drop down and then remove any
particular page we don’t want to appear in the menu when you do this it doesn’t
delete the page it just removes it from the navigation menu thirdly you can go
and select pages that you’ve already created so I just created one for
consultancy and for product management so I can tick them and add to menu
currently if I click Save and then refresh my website this is the order in
which the pages will appear but you might not want that for the simple
reason that product management and consultancy
you can’t see it at the moment because there’s not enough space is part of our
services so we want them to appear under the services drop-down so what we have
to do is just drag that up to the thing that you want it to appear under and
indent that just like that so that that becomes a sub-item
of the page above it the parent item similarly you can do that with any other
pages and rearranging that order over there allows you to manage the order in
which they appear in the drop-down so let’s save that menu and I’ll show you
what that looks like perfect we have this drop-down but not so perfect
because this is white and we cannot see the actual words behind it and that’s
just a little bit of color management which I’ll get to in a second but first
the other thing you can do in the menu is also create custom links so say you
want to add a link to a URL which may not be a page or a post or anything like
that just a random URL so I’ll enter that URL in there and we can call this
home we’ve already got one but this is just an example add that to the menu
I’ll get rid of that and that’s just a custom link to that particular page you
can add a link to any page you want anywhere on the Internet
save that alright so we’ve customized down menu
however the drop-down menu is coming up as white that is because it’s a white
background and it’s white text so it’s all blending in so what you need to do
to fix that is go back into the dashboard and go to customize appearance
and customize then go to colors and background go to the header transparent
header it’s at the moment it looks like that but what you need to do is just
scroll down and under the submenu so this is now a submenu we need to change
background-color to reduce transparency and now you can see the words so I’ve
just reduced this from full transparency to no transparency so you can see the
words or you can make that a solid color just for the purposes of an example so
it’s super clear that’s what I mean we’re going to do what I did for the
header so it was so we wanted to be the same as our main menu so it’s black and
sort of semi-transparent so I’m going to click on that submenu this one here
sorry black and sort of semi-transparent now that should be similar entities if
that’s still hard to read because of things behind it all you need to do is
increase transparency and that will be crystal clear like that so feel free to
play around with that so that it looks exactly how you want it to look you can
also change the link text color which is the color of your words over here and
also the hover color for purposes of an example let’s make that green and let’s
make the hover reddish so it’s green now red but we’re going to clear all that
because that doesn’t look very good so there we go we’ve added a beautiful
drop down menu and we’ve made it super clear okay so now I’m going to show you
how to create or update one of the most important pages on your WordPress
website and that is the contact page this pre-built contact page looks pretty
good but we can do a lot lot better so let’s edit this page edit with Elementor
I’m going to show you how to use some of the pre-built contact modules or
pre-built contact page templates to make yours look much
than it is right now all right so we’re gonna scroll down click on the folder as
we’ve previously done before scroll all the way down and look for some contact
templates okay this is the one here it’s free and it looks pretty cool so I’m
going to insert that now what that will do is it won’t get rid of your existing
modules but it will add the new modules down the bottom so what I’m going to do
now is pick and choose the ones that I like now I much prefer this header over
here as opposed to this one here so what I’m going to do is copy paste now that
that’s there I can delete this one I like this area here with the form and
the contact information I think that’s pretty cool I can also delete this as
I’ve copied that to the top now this also looks pretty cool these three
columns here but for the purposes of this demo what I’ll do is delete that
because we don’t need that and in terms of a map this full width map using the
new template looks much better than this one here so I’m going to delete the
smaller one so now what we’ve got is a bit of a customized contact us area and
also with a social area over here that can be edited or customized by linking
to your social channels at any time we’ve got a map here and what I
recommend is you put in your exact place of business over here your exact address
so that customers can find you very easily and navigate to you especially if
they’re using a mobile phone perfect
of course I had to highly recommend that you edit all of your contact information
over here your email and any other links if you have them
such as social media links otherwise just delete those individual modules so
that they don’t appear on the page and then update that click on the Update
button and we can now view the page so here we are here’s what our contact
page now looks like and last but not least to polish off your brand new
WordPress website I want you to be able to receive messages from all of your
customers that visit your website so how do we customize this form over here what
we need to do is go back into the dashboard and we need to go to contact
and contact forms this form that you’re seeing here is created using a plug-in
called contact form 7 so if you go to plugins and install plugins you don’t
have to do this I’m just showing you contact form 7 that’s the plug-in that
is creating the functionality for us to have a form on our website for your
users to fill in and submit so if I go to contact in contact forms this is the
actual setup of that form so let’s click on that these are the fields that your
form has currently and you can actually edit the form template by editing these
fields over here or by adding new fields such as telephone and then you can just
click insert tag and that will add that to your form but I’m not going to do
that for now here’s the important part here in mail we wanted to send to your
email address so make sure you enter your email address over here so that
when someone submits that form it comes to you we want the from to be the email
address that the person who submits the form is using or enters in that box so
that is the your email when it says your email it means their email the customers
email so let’s make it from your email and subject will be the subject the
reply to will be the email address that your customer enters and this is the
message body this is what you will receive in your email
okay so let’s save that for the time being now go to messages when the forum
submitted a notification will come up just to validate that the message has
gone through so you can update that message similarly for message files and
validation errors etc etc so let’s save that for now okay so now I’m just going
to refresh our website I’m going to load up my email as well just so I can show
you a live demonstration so test customer customer that’s whatever their
email is and they’ll leave a message so let’s try that
there’s the notification thanks for your message and now I’m just checking the
email address to make sure that that has been received there we go this is the
message that I received and the subject is coming up as your subject so that’s
not right we can configure that in a second
if I click reply you’ll see that the reply to is the customers email address
which is absolutely perfect everything else is fine the only thing I need to
update is this subject so let’s try that again let’s go back into the
configuration mail subject and the reason this has happened is our form on
our website doesn’t actually have a subject field so therefore it’s he’s not
populated and doesn’t come up with anything so what you can do is add your
own thing so for example whatever your website’s called so demo one of your
websites called customer contact saving that I’ll refresh this let’s try
that again alright perfect there we go there’s the message we received now I’ve
received in my inbox which subject whatever I put in there and that just
means that when I reply to the customer they’ll receive the reply with that
particular subject you know exactly where the emails come from and you can
start off communications so there you go you now have a fully functioning contact
page with a fully functioning webform for all of your customers to fill out on
your new WordPress website and also a map so they can find you easily it’s a
very very effective contact page to get the most conversions out of your website
as possible any questions about that please do ask in the comments and I’ll
be more than happy to help you out so here we are guys that brings us to the
end of this tutorial you now have all of the skills and
knowledge that you need to make an amazing WordPress website by yourself
even if you’re just a beginner and most of it was drag-and-drop and using
pre-built templates please give this video a big thumbs up and subscribe to
our Channel and click the notification bill so that you can be notified
whenever we release another awesome wordpress website tutorial of course as
always any questions ask in the comments below and until next time thank you for
watching

40 Comments

Add a Comment

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