How to Create a WordPress Website for Beginners


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

100 Comments

Add a Comment

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