In this video, you'll learn how to create
a complete WordPress website from scratch
Step-by-step, from start to
finish. Now, there are a lot of videos on this subject.
What makes this one unique
is that I'm going to show you a
foolproof method for creating a website
that actually looks beautiful.
This is a point that is often missed by
people starting off and creating their first website.
We're going to do it without coding and without any help from a web designer.
I'm Ben of Elementor, the
free and visual page builder that is
used by over 100,000 people from all
over the world.
I'm going to show how to utilize Elementor's customizable templates
to create a beautiful looking structure
And then fully customize it
for your website.
You'll learn seven steps for creating your website:
Buy a domain name and hosting,
Install WordPress,
Install a theme and page
builder plugin,
Add the page template,
Customize the template,
Create a top menu
and finally
Make the website mobile responsive.
Keep watching, I promise it will be worth your while.
So, the first thing we're going 
to do is actually buy the domain
name and hosting that will be used for
our lawyer website.
So to do this, I went to SiteGround, which is an excellent hosting company that we're working
closely with here in Elementor. So under
web hosting I'm going to click on shared hosting.
There are several plans here. I'm
going to choose the start up, because it
includes one website 10 gigabytes of
web space and I think it's fine if you're starting out.
Click on 'get started'
and I'm going to register a new domain
name for our lawyer company which is called: McGillWexler.com
Now, I'm going to enter all of my details.
So extra services - I'm just going to
choose domain registration. That's it!
I just bought my domain name and I can
proceed to build my site. Now that I've
bought the domain and hosting I can
login to SiteGround and install my
WordPress. Let's enter the username and
password to log in. Now, I'm in the SiteGround
dashboard. From here, I'm going to
go to my account and go to cPanel. Now
they'll ask me about cPanel access and
I'll proceed. This is the cPanel. This is
where I manage my website and my domain and everything. So here it's pretty
complex, but you don't need to worry
about all the things here. All you need to
worry about is the auto-installer,
because we're going to install WordPress.
So easy. Click install. And we're using a
regular HTTP web site McgillWexler.com
I won't use in a directory
because it's the homepage. For site name
we're going to name it
WordPress for now, because I want to show
you later how I change this. Username
Ben, and enter my password and admin
email. Language English
Okay, now it's starting to install
WordPress. Now that it's installed
I can login to the website and continue
on. So in the URL I'm going to type
McGillWexler.com
Here is the default 2017 theme of
WordPress. you see the background image,
the title of the page and description as
well as the default posts. We will
customize and change everything so it
will look nothing like this. And to do
this, we're going to install the theme
and the page builder. So let's go first
to the WordPress admin. To do that, after
the domain name I'm going to type '/wp-admin'. This directs me to the
default WordPress login page. Here, I'll
enter my email address and password to
login
Now, I'm inside the wordpress dashboard.
You see the main editor and the menu. So
the first thing we will want to do is
change the theme. The theme I'm going
to use is a theme by a theme company
called ThemeIsle, one of the biggest
companies and the theme is called Hestia.
It's a really cool free theme. This is
the the page of the Hestia theme. I'll
link to it in the description and you
can download it now. Enter your email. And
it downloaded the zip file of the same
now back in my WordPress dashboard, I'm
going to go to appearance > themes.
Here is the list of themes that are
installed in my website. All the default
themes, plus the TwentySeventeen theme that we saw earlier. This one is the active one. So we will
add a new theme. Upload, and 'choose file'.
Click on the Hestia zip file, and install
now, and activate it. There - it's activated.
It offers me a getting started, We won't
need this one. I can see that active
theme is Hestia and I see that it added
this menu. To see the changes,
how it affected my website, I'm going to
go here in the top menu, visit site. You see the design has completely
changed now. Here is the menu and some
sort of header. So let's start
customizing it. But first, we're going to
need a page builder. So back to the
dashboard, under plugins. Here are the two
default plugins that you get with
WordPress. I'm going to add new.
These are the list of
available plugins. Here is the search bar
I will search for Elementor, that's the
name of our page builder. And we see
a long list of addons, but this
is the official plugin. You see
over a hundred thousand active installs
and a lot of five-star reviews.
I'll click install now. It's installed. 
I'll activate it. And it's activated.
It's in my plugin list. To see
how to go into the page builder I'm
going to need to add a new page. Our one
page homepage. So, I'm going to go to
pages > add new. Enter the title of the
page, which is home, and click the
Edit with Elementor button. Here, I see the
editor panel, where I can actually see
and design at the same time my WordPress
website. Here is the panel with all the
available widgets. The first thing I
will do, I'm going to get rid of this
header that I get from the theme, so I
have only the menu here. To do that
I'm going to click on the hamburger icon
here. Go to the page settings and here I
can choose a template. The template
I'll choose is the page builder full
width template. This comes from the theme itself and will allow us to get a full
width and clear screen. So with the page
builder I can actually design the entire
page. I can add a section with columns.
Let's say 2 columns. Each column I can
drag in a heading.
Let's change it to black, so it's seen. I
can drag a heading or a button, but I'm
not going to do that because I'm going
to use templates. A template lets
me get the result I want in much
less time
So in Elementor I click: 'Add template'. And
now appears a list a long list
of over 100 templates
available in the Elementor page builder
If I see something that I like, I can
click on it and get a preview. There are
really some spectacular design some
really genuine and and unique designs
here for every type of, you know from law
firm, restaurant... You can browse around
and see. We keep adding more templates so
you really have a lot of options for
homepages, about, etc. But what I'll use
for this one-page lawyer website that I
want to create is this
architect template. I'll change it. I'll
show you how easy it is to change it to
a lawyer website. So after choosing this
I'll click insert. This actually
created for me the entire template in my
live website. So I have all the sections
I need. I have my hero and bold headline,
I have our vision section, our
achievements, the about Us section, a
quote and contact us and a carousel of
logos. I'll actually customize each
and every part of this page to make it
completely different. You can also
preview what the page looks like. so
let's start designing and changing the
page. We will start section by section
starting with the
top section. So the first thing we will
do is change the image.
The background image that appears here. 
I'll go to section, click on this
hamburger icon here at the top of this
section then go to style and in
Elementor I have three columns that
pretty much go along to every
widget, in section and columns. Its layout,
style and advanced or content style and
advanced. In the style I can see the
background image and change it so to see
the size of the image, I'll click on the
image and find it, and I see that its
size is 1600 in width, and 772 in height.
So I'm going to need to create the exact
similar size and upload it. I've
already created these images and cropped
them. You can use Pixlr, it's a free
online tool. Let's upload them all.
I uploaded all the images and I'm going
to choose the first image, which is this
one. You see it has the same size - 1600X772.
And click insert media. So now it has
placed the image as the background but
I'm going to want to make this headline
more conspicuous more prominent. So I'm
going to go just below background I have
backgrounds overlay. Here I'm going to
click on the brush icon and choose the
color and enter the color a gray color
and I can play with the opacity making
make it even darker. So now it's nice and
you see the headline is much more
conspicuous, much more prominent.
Speaking of headline, let's go ahead and
change it to make it fit our lawyer
website McGill and Wexler
Associates Inc
And yeah we'll get back to this section.
Let's go on to the next section.
In this section it's called our vision.
We are actually going to place
our about us right here. So first let's
take care of this image.
I'm going to click on the Edit. It's an image widget
and I can click on the image to change
it. Choose this image right here, and
change the text. I'm going to place
the about Us text
and change the call-to-action button to
'get an estimate'. Next we have these icons
so I'm going to customize it also
Going on we reach the about us section.
But we will again change this one. I
think we'll keep the image because i
fits, this nice office to our
lawyer website. But this we will change
to areas of focus. And instead of the
text I'll also paste our services. Let's
get rid of the spaces here
and again change the text. Going on to
the quote section. so I'm going to
actually change this to a kind of
testimonial section. We'll click on
the image here, appears on the column
level. Just get the column. I'll hover
over the left sid,e click the column icon
again. Under style here I see the image
and I'm going to choose this image right
here. Now we see that it's too zoomed in
That's because the size is set to
default and it's an image that is too big.
I'm going to set it as cover to get the
complete image seen. So let's also change
the text right here. And in case you've
already realized the reference of 'Better
Call Saul, then you're right. The entire
website is inspired by that show Better
Call Saul. Okay, now we go on to the
contact us section.
I'll change the image again under column >
style, choose this image right here and
in the icon list simply changes. You see
how easy it is
to change the number and it changes
really quickly. Jimmy at McGill Wexler
And let's leave the address. Now
finally, we have this section right here
which is the image carousel. Now this comprises of logos and
actually it's a really good idea to add
it. But creating logos it's very
important to create a logos that are of
the same color and the same size and
that takes a long time. So I won't to be
showing you how to do that, but it's
pretty obvious. If you want to add this
kind of image carousel and you see that
you can get it. I can add to this image
carousel navigation, either dots
or arrows. But for now, I'll just get rid
of the entire section because I don't need it
for my lawyer website. So now we've
completed the basic design, but I still
want to make it more unique and change a
few more elements. it'll take us a few
more minutes but it'll be worth while.
I'll change the colors and typography a
bit. Instead of this gold I'm going to
change it to blue. So to do that when
I go inside each of the
elements and click on the color, I want
to have all the the blues that I'm going
to use inside this color picker. So to do
that I'm actually going to the hamburger
icon again, go to color picker and here I
have the color picker. I can change
whatever colors I want. So let's do that
now I have inserted three blues. When
I go back and click on this divider and
change its color I can choose this blue
color. Really easy. Maybe this one, this
blue color. This way I can quickly
change each of the colors. In this area
go to this button, style, text color. Let's
change it to this blue and the border
color again changes to the same blue. And
on hover again going to change this to
white
these icons - also change the primary
color to this blue. Let's quickly do that
Here in this section I have this
gradient that you see that goes from
gold to white. This will also be changed
so here is under again I went to section
style. Under background you see the
gradient has been chosen. And we'll
choose let's say from darker blue to
brighter blue
change the location. Yeah I can also
change the angle through there. Cool
I can make it radial, but for now let let's
keep it like this, simple. We're going to
have to change this headline into white
and this text editor. Again style > text
color white. And here I will also change
the text color to white. On hover
we'll choose a white background and a
blue color. Yeah
next we'll change in the icon box. Again,
style, it's pretty consistent so it's
easy, content and change the color to
blue. This I will change to white again
headline change to blue and the icon
list change to blue. So as you've seen
I've completely changed all the colors
within a very short time. Let's also
change the font. So under
heading > style > family instead of Playfair
which is the one currently used I'm
going to use Lora. You see it fits our
lawyer better. So again I'm going to do
that for every element, every headline
This can stay
Lora. This can also stay and this one
So the page is starting to look really
nice. It has all the elements that I need
from my one-page website. It has the main
hero header, the About section, the
services and the contact plus a
testimonial.. So works nice. I think now
it's time to add the menu. We have here
you see the menu but it's pretty
empty so to add the menu I'm going to
actually have it smooth scroll, so when I
click on an icon a link on the menu I
want it to scroll smoothly into the
right area of the page. And this is
really done easily here. I just first
need to add to name the different areas
of the page. Again in the About
section, I'm going to section > advanced
and under 'CSS ID' I'm going to write
'about'. Next, in this area here again
section > advanced. I'm going to call
it services. I can name it whatever I
like of course. This section I'm going to
call it testimonial. Under this
section I'm going to call it Contact
Now I'm going to save the page. and let's go back into the dashboard. Under
appearance, I'm going to go to menus. So
you see I have no menu right now
So I can create a menu. Let's call it menu.
Create menu and set it as a primary menu
This way it will be available at the top
of the menu in the page we are
using, and for the rest of the site. So
I'm going to add a few custom links
The first one I'm going to add #about.
It's the same name that we used in our
area. And the link text will be about. Add
to menu
The next link will be #services,
and the link text will be services. I can
of course change the position, but I'm
going to keep it like this. Next we have
testimonial. And finally
contact. Now I'm going
to save the menu, go back to my Elementor
editor and click on refresh. So now I've
named my sections and I created the menu.
You see the menu right here
If I click on any of the item I get a smooth
scroll to the proper place on the page
In the last part of this video, I'm going
to show how to make the whole website
mobile responsive. To do so, I'll click on
the desktop icon on the bottom left
Choose mobile. Now I see how the website looks like on mobile devices. I see that the heading
doesn't have enough padding on left and
right, so I'll go to advanced,
Unlink padding, and give it a left and right
padding
Now this breaks the heading to a new
line. So I'll go back to style and reduce
the size of the heading. Moving forward, I
see that the two columns have been
reversed and the image actually should
appear above the text. So I'll go to
section > advanced, and under responsive I
have an option to reverse the column
order, so the image appears on top. Now
I'll quickly go over the rest of the
page, make sure everything is mobile
responsive. And it all looks nice so I'll
go back to desktop, save my result and
publish the page. Under page settings
switch the status to published. Now I'll
go back to the dashboard and set this
page as the homepage. Go to Settings >
Reading and set a static page. Save it.
Now when I go back to the website I can
see that this page I created is now the
homepage. Let's also change the website
title. Under Settings give it our lawyer
website name
That's it for this video. We've
successfully created our one-page
website. I hope you manage to follow
along. If you'd like to get notified
about future tutorials
I suggest you subscribe to this channel
I would also appreciate if you give us a
like and a share and possibly comment
Thank you very much for listening. Until
next time this is Ben from Elementor
