How to Create a Website with WordPress – In 5 Easy Steps (2019)

Articles, Blog

How to Create a Website with WordPress – In 5 Easy Steps (2019)

How to Create a Website with WordPress – In 5 Easy Steps (2019)

Are you trying to build a website? Hello everyone this is a video brought to
you by Knowledge desire. I am Christos and today I’m going to show
you how you can build your own website in 5 simple steps. The times where you needed to know code in order to build a website are now gone, now anyone
can build a website using ready-made design templates and drag and drop utilities, so watch until the end of this video
to find out how. OOHH and another thing at the end of the video i have included a PDF file that will help you drive more traffic to your website. With all that being said lets start building our website. For building the website we are going to use a free and extremely popular content management system called WordPress. With WordPress and the right tools we can
create dynamic websites online shops and more. WordPress also supports building websites
with just drag and drop utilities and that is what I’m going to teach you in this video. The website we are building today is a simple
website about a fictional gym called gymtron. The website consists of three important pages
which are probably a requirement for your own website as well. First we have the homepage that displays content
about the several services offered by the gym a testimonials section a gallery and prices
section, moving on we have the about us page that shows details about the team or the personnel
of the gym and finally we have the contact us page that displays a map several location
details and a form that users can fill up directly and contact the gym. Here we see how the page will be displayed
on a mobile phone. Mobile support is an important aspect that
I want to make you aware of since this is something that you definitely need to take
into consideration as many people will use their phone to view your website, based on
a google study, 50 to 60% of google searches happen from a phone. Taking all those into consideration stay with
me and let’s jump to the first step of building your website that is choosing a domain name. For building a website we require two main
things one of them being the domain name. The domain name in Simple Words is the URL
for your website, that is the link that people will use to navigate to your website, in our
case at knowledge Desire our domain name is Now once you come up with a good domain name that
represent your brand or business, you will have to check the availability of it. For checking the availability of your domain
first you need to click the link under this video, from there you will find a tool that
can tell you about the availability of your domain. In my case the domain name I want for
this website is Enter the domain name and click check availability. If the domain name is available then we can
move to the second most important step of building your website that is registering
with a web hosting provider. A hosting provider is simply a service that
keeps your website online at all times. Here at knowledge desire after research we
have concluded to follow Bluehost as the hosting provider for our website there are many reasons why we suggest that you do the same also. Bluehost is one of the top hosting services
out there and one of the hosting solutions suggested by the creator of WordPress. Other
than that Bluehost provides you with a free domain name upon registration super fast web
page loading times, a Great 24/7 support and a 30-day money-back guarantee in case you
don’t like this the service. Now let’s register an account with bluehost
so we can put our website online and start the building process. For your registration click on the blue button
and please note that this button is gonna grant you with an exclusive discount of up
to 60%. Here as we can see bluehost has dropped from
$7.99 to $3.95 because of the discount link. Moving on we want to click the get started button. As you can see bluehost provides three hosting
plans if you are building a single business or personal website like I will teach you
in this video you can follow me and select the basic plan. In case though you are thinking to build multiple
websites under the same web hosting account you can go with a more advanced option, in
any case you can select your plan of choice and follow the next steps normally. Now after selecting the hosting plan you will
have to enter your domain name on the box and click next. From there on, you will have to provide the
information to the register form. In the account information section provide
all information required. I will quickly do this and hide the details
for obvious reasons. Now the packages information is an important
section where you will choose the number of months you want to register for. As you can see by increasing the number of
months, the price per month drops. Usually if you are building a website you
want it for more than one year, except if you are building something for a temporary
project. In my case since I’m building a business website
I would select the 3 year plan. Note that bluehost provides the domain name
for free as i promised. The package extras section contains several
tools and services that you can include in your purchase. The only extra i would suggest
here it’s the domain name privacy protection. This is used to protect your registration
data from the public. Usually anyone from the Public can view the
owner of a domain name using legitimate online tools, but if you have this protection purchased
no one will be able to see your information. Finally after selecting your package extras
you will have to provide a valid credit card for the purchase take place. After entering all the relevant information
check the two check boxes and click submit. Once the registration is done bluehost will
take you to a page where you have to provide a password for your account. Click set password and provide a password
for your account. From there click login and Bluehost will login
you to the account automatically. Remember that after the registration is done
and after you have set your password all your relevant information of how to login in Bluehost
and how to find your website will be sent to your email. Now we are going to the third step of our
video which is installing WordPress with a single click. Bluehost provides this awesome single click
functionality and it’s starts by allowing us to select a theme. Themes are simply prebuilt designs that we
can use on our wordpress website. You can think of it as a template that we
will edit further on. For the website i am building I will be using
the hestia theme. Simply hover over the hestia and click use
this theme. Now bluehost will automatically set up your
website and install the theme for you. Once all the components of our website are
done installing just click start building, from there on bluehost will redirect us to
the backend of our website. In case you are wondering the backend is simply
the control panel of WordPress that is accessible only by you the owner or the administrator
of the website. Here you can change several settings for the
website and create content for it, content includes pages and even posts in case you’re
building a blog, so as you realised by now this is the place we gonna be using to create
our website. In case you haven’t realized the domain name displayed
on the top of our browser is not the domain name you purchased. The reason for this is because
once you buy a domain name it takes some time for it to be active, now in that case Bluehost
provides us with a temporary domain name so we can work on our website until the normal domain name is
active. Also remember that to access your website’s
backend without first logging in bluehost, you can always navigate to
and there you can log in using your website’s credentials. Before we move on to the next step of editing
our website’s pages let’s just click I don’t need help and finally let’s launch
our site for it to be visible to the public. Moving on we will jump to the fourth step
of building our website which is installing and editing the three pages templates. Now that our wordpress is fully installed
and published we can begin building the website. The way we can view our website is by going
to this home icon and clicking on it, in my case I will open in a new tab. As you can see this is a really empty page
So Let’s Begin building it. Initially we need to hover over appearance
and go to hestia options, remember hestia is our theme and here there are some recommended
actions we have to make in order to build the website. Here we have to install the orbit fox plug-in. This will allow us to download different templates
or (ready made pages) so we can edit them as we like. Once this plug-in is installed and activated
you can see it appears here and by hovering over it you can go to the template directory
offered by the plugin. There we can browse various templates that
we can use. In our case we are using the contact us, the
about our business, and the material homepage templates. Let’s Begin by editing the material Homepage. Click install and import and this will download the template and it will open it in a drag
and drop editor. Click yes on this message. So before we start editing the page let’s
understand some basic concepts. Here we are using elementor for editing our
page. Elementor is a site builder that allows us
to create web pages using drag and drop. It provides us with several elements that
we can use to build our page. Other than elements Elementor provides us
with several positioning tools, like sections, inner sections and columns. Now here we can see a section which is the
heading section and below there is another services section. Moving on by clicking this dotted button we
can edit the section using this left panel. Inside this section we have another inner
section that contains columns. The section is divided in two columns and
each column contains different elements. The first column contains two heading elements
and a button and the other column has a video in it. Initially I want to change the background
of the first section, to do this we click on section and then style, click on the image
and then the image uploader will open. We then upload the file we want and wait for
the upload to be done. Finally click insert media. As you can see this image is a bit dark so
I want to change it’s opacity. To do this go to background overlay and drop
the opacity. Very nice, now in my case I would like to
remove this column and the video inside it, so I will totally delete the column. Moving on I would like to change the text
of this button, so by clicking on it i can change the text property. Also I want to change the icon that is inside
button, for this simply go to the icon dropdown and search for a relevant icon. Finally for this section I want to change
the main heading to my gym’s name, and then provide some text that i would like to show
to my customers. Moving to the services section I will delete
the column that contains the iPhone as I don’t need it. As we can see though now all the services
that appear to be in a single column and this is not really nice as the services are stacked. Note that the services by the way are a single
element that has settings bundled together, so to change this and have all the services
in line we need to change the settings from one column to 4 columns. From there I will change the icon position
for all the services to be in the centre and increase it’s size, also as you can see the
position of the text seems wrong so I will move it in the centre by changing the content
alignment to center, let’s also edit the heading element, move the title in the center
and then change it using the title property. Finally for this services element as you can
see we have little expansion panels for changing the title, description and icon for each service. First I will change the title for each service…. Then change the icons….. and finally change
the descriptions. Note that by clicking the add icon at the
bottom you can add another service to the services section. Now let’s move on and edit the testimonials
section. Initially I will change the section’s background
by going to style. Upload the new image, wait for it to upload
and then insert media. Now our background is set. Moving one let’s change the title in the
heading section and then remove the subtitle at the bottom. Now i have already copied the text i want
for the testimonials and i will go through each one of the testimonials and paste the
text inside the text editor. Then I will go through each testimonial and
i will change the name of each person. The name is a heading so we simply change
the title property for each. I’m going to also change the picture of
each person in the testimonials. By clicking on the first image I can upload
all the images I need for the testimonials and simply select the first one for that testimonial,
I will then repeat the same steps for the rest of the testimonials quickly. Finally i will remove this small heading at
the top of each picture Next, let’s edit the next section and create
a gallery for our homepage. I will change the title to some of our photos,
remove the subtitle as i don’t need it and also delete the inner section thay contains
those two stories. Now lets drag a new element that is an image
carousel. From there i will go to the properties of
the carousel and add images on it. Select the images you want. Now once those images are uploaded wordpress
will ask you to create a gallery, just click create new gallery and then insert the new
gallery. Now as you can see all the photos appear here. Finally I would want to increase the image
size so let’s make it 300 pixels by 300 pixels. Lastly for this page let’s Create our pricing
table. Now each of those cards it’s a pricing table
element that has several properties that we can change and modify to our liking. Initially I will change the title of the first
prising table and then its price. Note that you can also change the period for each pricing
table, you could enter anything from months to minutes. Next I will change the features for the pricing table. Perfect let’s now edit the text of the button. Expand the button settings and change the
text of it. We can also add a link on the button for redirecting
our user to a booking page for example. Now i will edit the rest of the pricing tables
quickly. Congrats our homepage is done. We can simply now update and save the changes
of the page. Then let’s move outside of the editor and
let’s begin editing our next template. Once wordpress redirects you outside the elementor
builder navigate to orbit fox template directory for picking the next template. Select the about our business template and
click import for the template to be opened in the elementor editor. Here as we can see we have the header with
a nice video playing at the back, initially we want to change the title to about our gym
and then we want to remove the video and add our own picture at the back. Simply select a picture and upload a picture
of you linking. Once the upload is done click insert Media
but note that once the picture is loaded it’s not showing. The reason is that we have to remove the video
link. Also note that this video is coming from YouTube
so you can choose your own video from YouTube as your background if you like. Moving on I will delete several sections and
just keep the section that I need for projecting the pictures for the personnel of the gym. I will also delete the map here as we will
have a map inside our contact page later on. So Let’s begin by editing the first card,
I will simply upload all the pictures for my personel and I will select the first one
for the first card, insert media and as we Insert media and as we can see the first picture is changed. Then I would change the heading beneath this
picture and give it the name of the person displayed and lastly I will change the description
with some text. I will also edit the rest quickly. Perfect, now we are done editing this page,
let’s click update for the settings to be saved. Ohh and something else I want also to remove
that button below the title so I will simply delete it, save the changes again and exit
the editor. Again let’s go back to the orbit fox plug
in the templates directory and let’s choose the next template for our next page which
is the contact us page. Select it and click import. Inside this template we will keep most of
the things as they are. The only thing missing here is a form but
we will correct this later. Starting off I will add a new address to be
displayed on the map. Once the new address is set you will see that
the map direction changes, note that we can also adjust the zoom for a better view. Moving on, lets edit the area of the contact
form, I will remove this text and then I will edit the short code. You might be wondering what is the short code,
this is simply a code that we can use to call functions from another plug ins, in our case
we will insert a short code that displays a form on our contact page. Now I will remove the default shortcode and
leave it empty for later. Next I will change the colour of the icons
at the section here and I will make them orange so that they match our homepage style. Finally let’s save and exit the editor for
installing the contact form plug-in so that we can get the short code we need. To install a new plugin in wordpress just
hover over plugins and select add new, there search for contactform 7. So here it is, install it, and once the plugin is
installed click activate. When the contact form plugin is activated
we will see a new tab on the righthand side called contact. Simply click on it and you will see a list
containing contact forms. In our case the contact for it’s going to be one. Locate and copy its shortcode and let’s go
back and add it inside our template. Navigate to pages find the contact us page
and click edit with elementor. Finaly for this page find the shortcode element
and let’s paste the new shortcode in it, then we click apply and there is the form. Update the page and exit Elementor. If you have watched until here keep watching
for the final step, that is personalizing our website. Now before we move on let’s check how our
website looks like. hmm here as you can see we need to change
the title of the website and the homepage itself as it is not displaying anything yet. In WordPress we select which one of our pages
is going to be homepage. So let’s go and change the title and the homepage
of the site. Hover over the
settings and click general. At the top of this page there is something
called site title, remove whatever is inside this textbox and add your site’s name. Finally go to the bottom and click save changes. Once the settings are saved you have to navigate
to the reading section of the settings for selecting which page will be your homepage. From the dropdown select the material homepage
to be your homepage and then save the changes. Then navigate back to the pages section of
WordPress were we can see all of our pages. Before we do anything here though let’s check
how our website looks like now that we have change the default homepage. As you see everything is in place, all sections
display normally. Note though that we also need to add a menu
so that we can allow our user to easily navigate through the pages. Before we do this let’s tidy up things. Go back to pages and let’s remove the pages
that we do not want. As you can see we are left with the homepage,
the contact us page and the about us page. Now let’s change the names of those pages
to something that fits our situation. To edit the title of the page simply click
edit and the WordPress editor will open up. Form there we can click on the top where the
title is found and change it, then click update and then changes will be saved. Now let’s change the title of the next page. Contact us page is fine I will keep it as
it is and edit the material of the homepage. I will simply change this title to home. Update this. Now that we are done naming our pages let’s
create a menu for our site. Simply hover over appearance and go to menus,
In WordPress when creating menus we have to provide them with a name, so let’s call it
main menu. Now click create and once the menu is created
we will add pages in it. In my case I will add all 3 pages. Then using the plus symbols on the side we
can choose an icon for each page on the menu. After choosing the icons for each of your
pages we can then change the ordering of the pages using drag and drop. Finally click save menu and once the settings
are saved let’s hop to our theme which is found under appearance. There we need to tell the theme that we want
a specific menu to be displayed on the top right for our website. Simply click on themes
and customise the active theme which is hestia in our case. From here we can go to the menus section and
select the main menu as our primary menu. Click publish and you will see on the top
right that we have our menu set. One thing that we need to fix though is the
colouring as it is not consistent. When hovering over the menu the text becomes
pink and as you can also see, this button here is also pink. To fix those inconsistencies we simply have
to go in the appearance settings and change the public colour of our theme. Here I will paste the colour code I want for
my theme which is this orange colour. Now click publish and there it is, the color
is changed. If we switch the page we see the color of
our menu has also changed, so now let’s go and add a logo to our page. To do this simply go to the beginning and
select site identity, from there select a logo and upload it. Once the logo is uploaded we will have the chance
to crop it and edit it as we like. Click crop image and the logo. Publish the changes and exit the customizer
using the X button on the top left. Now that we made those nice changes let’s
go and view our site As you can see the logo and menu are displaing
as expected. Now by clicking on top menu we can switch
between pages. The coloring is applied as well. The about us page also displays fine as we
can see. and this applies to all pages. By clicking the logo we can also navigate to the
homepage. Now let’s use the developer tools of Chrome to check if our website is
fully mobile responsive. To do this simply go to Chrome settings tools
and then select development tools or you can just hit F12 button on most browsers. From there simply click the mobile tablet
button and the browser window will change to the size of a mobile phone. Unfortunately though we have some alignment
issues and some elements overlapping others, so let’s fix this.
Navigate back to the backend and then go to pages, from there go to homepage and this
time edit it with Elementor. Now elementor has settings for different screen
sizes in our case let’s now switch to the mobile view and let’s find the element that has a problem so whenever you see these three icons next
to a setting it means that this setting it’s different for each screen size size in our
case let’s change the services alignment to centre for the phone. lastly let’s go to testimonials section
and let’s fix overlapping issue now click on the first column which contains the card
and go to advanced tab, there change the margin for this column. The margin is simply the
space outside of our box so if we specify 70 on the bottom margin we’re giving the box
70 pixels below it so anything else below our box will be pushed 70 pixels further. Now I will apply the same to all of our testimonial
columns . Now that we are done with the changes click
update and let’s refresh our page on the mobile and see if the bugs are fixed. As we can see now the services are in the
center and testimonials are not overlapping each other. I would like to say a big thank you to everyone that made it to the end of this video. If you want more help feel free to leave a comment with whatever question you may have and i will make sure to respond to it. I hope that you got some value from it and that you have learned how to create a website using wordpress. If you want more details on this topic visit our blog post here. If you enjoyed the video hit that like button and subscribe to this channel for more future videos.

22 thoughts on How to Create a Website with WordPress – In 5 Easy Steps (2019)

  1. 🔥 LIKE and SHARE this video if you want more videos like this.🔥

    🤔 Leave a Comment with your Questions 🤔

Leave a Reply

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