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
Knowledgedesire.com.
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 gymtron.com. 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 yourdomain.com/wp-admin 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.
For more infomation >> How to avoid community guidelines strike on YouTube channel in bangla ইউটিউব স্ট্রাইক থেকে বাঁচার? - Duration: 6:17. 
For more infomation >> [KoreanTV] How to memorize Korean Vocabulary, 1200 Korean Word, - Duration: 3:48. 
For more infomation >> ইউটিউব স্ট্রাইক থেকে বাচার উপায় How to avoid community guidelines strike on YouTube channel in bang - Duration: 6:51. 
For more infomation >> How Do I Paginate My Data? | Get to Know Cloud Firestore #7 - Duration: 10:16. 
Không có nhận xét nào:
Đăng nhận xét