Hey what's going on guys it's Jim Fahad in
this tutorial I'm going to show you how
to create an amazing business WordPress
website using a free theme, free page
builder, free plugins without doing a
single line of coding. so first let's
have an overlook what we are going to
make for next 30 seconds I'm coming back
so that's the website we're going to
make now let me introduce myself first,
the instructor, my name is Jim fahad, I'm
a professional web developer I've been
developing websites for more than 10
years now. I started my career as a
freelance web developer, I made my first
$100k using a platform called oDesk right
now it's upwork.com whatever - now I'm
not regular on that website because
literally I get averaged 10 to 20 orders
every day through my own website that's
Jimfahaddigital.com, I'm sharing all
this beforehand only to make sure you
that you're learning from a real web
developer. So it's not about me at all
nor my services, it's a fully
step-by-step tutorial on how to make an
amazing business website in WordPress
using a free theme, free page builder and
free plugins. so this is the page we are
going to make on the top left here is
the logo on the right here is the
navigation menu I will show you how you
can put your logo and how you can create
this kind of navigation with submenus
then I will show you how you can create
this kind of nice banner with slideshow
in the background, so you can put
different images into your top banner. I
will show you how you can create these
sub-headings, main headings, these
paragraphs also these buttons with nice
hover effects. When user click any of
this button that will take the user to that
specific page then we will create this
nice columns, so here you can talk about
yourself or your team a little bit and
then you can create a call-to-action
button to your "About Us" page then you
can shortly talk about your services and
make a call to action button that take
users to the services page then you can
talk about your commitment or your
results then you can make a call to
action button to your contact us page
and you see in this
the nice gradient effects, I will show
you how to do that and then we will
create this section, here you can display
the services you are offering with a
nice icons, headings, and paragraphs after
that we will create this full-width
section. on the left, you can put an image
and on the right, you can talk about your
experience or about your core values. I
will show you how to create these
portions step-by-step then here is the
testimonial area, 
you must have a testimonial area
inside your website, because it doesn't
matter what you say about your business
but what you trying to say about your
business is the matter. so I will show you
how you can create this nice testimonial
areas with clients headshots, title, their
testimonial text, their name, company name
and how you can put that star rating then I
will show you how to create this kind of
nice slider with the icon of the
companies you have worked for. so you can
showcase that in this way, after that we
will create another full-with
section, here you can showcase your work
how many projects you have done how many
hours you have gained with this nice
counter and icons then I will show you
how to create this Services section. Of
course you should have a different
services page but you also should
showcase some of that on the home page.
So if you are a consultancy firm you may
have a financial consultancy service
solicitor consultancy service. If you
are a photographer, you may have
photography service, videography service,
like that. so you can create different
blocks for your different services and
within each block, you can add a call to
action button like here you can see "get a Quote
Here" button so when people click
on "Get A Quote Here" button that will take
them to the contact us page, after that
we will create this Cool section. Guess
what is this section about? YES! you
guessed it right.
this is our blog section these are the
recent blogs that are coming from blog
page so each of this images are a single
blog if we click any of these or this
one or this one that will take us to the
single blog page isn't that cool? after
that, we will create this footer widget
section, here on the left you can talk
about yourself in case if you want to
share some quick contact information
like your phone number email address or
your other website address and then I
will show you how you can embed your
Instagram feed within your website so
whatever you will post on your Instagram
people can see that within your website
and then on the right, we will create
this recent post widget so here, all the
latest post will be shown with nice
square thumbnails then at the very
bottom I will show you how to put this
kind of copyright text and now if we
click on this top icon that will take us
to the top of this page at this moment
if you think creating this kind of all
thing is hard or you need to learn
coding then you are totally wrong
because we will be creating all of this
without doing a single line of coding
only by using a free page builder an
amazing page builder called Elementor
let me show you a little bit the power
of Elementor so when you are logged in
on WordPress you can see this top bar
click Edit with Elementor so this is the
elemental page builder you can literally
create anything using this page builder
on the left you can see all the
Elementor elements, a lot of elements
that's for free I will show you
everything how you can create this whole
page using this Elementor page builder
step-by-step when we really start
creating the website from scratch for
now I'm just showing you how easy it is
to
edit, update or create anything inside
Elementor page builder, so here you can
see a heading to find that missing piece
if I want to change this text I just
grab this text remove it and instead I
want to write Jim Fahad consultancy
and I want to put a line break here so
I'm clicking here and clicking ENTER
It's instantly done so you can
understand how easy it is now here's two
buttons here I want to create another
button. how can I do that?
just hovering over on this column icon
and I'm clicking on this duplicate
column and you see here is the new
button instantly created if I want to
make it centered let's click on this
edit icon go to alignments and make it
centered it's instantly centered if I
don't like it I hover over on this
column icon I click on this X or delete
icon. It's instantly gone. let me show
you some more interesting things what
you can do so easily so if I want to
increase or decrease the height of this
banner just click on this top section
icon and from here you can see the
minimum height here is 90 VH if I want
to increase the height just grab this
and drag to the right the height is
increased if I want to decrease just
drag it to the left you see the height
is now decreased so let's keep it 94 now
the way it was if we want to play with
it more let's go to this tile is scroll
down click on shape divider select
bottom and type let's select drops you
can see nice it drops it here at the
bottom you can play with it the way you
want you can increase its height or you
can decrease its height, you can flip it,
invert it
the way you want. there are more shapes
available like - you can select the
mountains shape, so here you can see the
mountain shapes here, you can increase the
height even if you want you can change
the color from this color palette like
this for now I don't want this I'm just
showing you what's possible using this
amazing page builder and I want to show
you another powerful thing that you can
do using Elementor that is you can check
how your website looks on tablet and
mobile devices so if you want to see how
your website looks on tablet devices
just go to this responsive mode icon
click here then click on tablet you can
see a preview of your website how it
looks on tablet immediately and it looks
really good on tablet device now if we
want to check how it looks on mobile
devices let's click on mobile and we can
have a look if we want to change it
specifically something on mobile we can
do that as well like I feel this Jim
Fahad consultancy heading is too big on
mobile so I want to reduce the font size
only on mobile device so to do that I'm
clicking on this heading icon here then
go to style click on typography and have
a close look you can see a mobile icon
here so if I reduce the font size it
will only affect on mobile devices the
tablet and desktop size will remain the same
now if I want to make this button centered
on mobile devices let's click on this
edit icon on mobile devices alignment I
want to make it centered also this
button - I want to make this one centered
and on mobile device on the top right
here is the hamburger icon if we click
here we can see all our menus here let's
scroll down everything looks good on
mobile device so when everything is good
let's click on this Update button it
will be changed immediately
that's why 4 million plus people started
using Elementor page bill
to build their website so in this
tutorial I will show you everything step
by step how you can create this
beautiful website not only for desktop
also compatible with tablet and mobile
devices now let's have a look on the
other pages we are going to make let's
go to about Us page I will show you how
to create a different banner on each
page like this then on the about Us page
I will show you how to create this kind
of two column section then I will show
you how you can create this kind of nice
slider so here you can showcase your
work your office or your portfolio or
anything you want then we will have our
team members area I will show you how to
create this beautiful team member area
exactly like this one so you can put
your team members image their name their
position and a short text about
themselves then we will have our
services again the company logos we work
for the footer here again now let's go
to the services page here we will have
the different services we have I will
show you how to create these blocks
really fast and easily then here is the
company logos here's the clients
testimonials again and here's the blog
posts like home page and here I will
show you how you can create a "Get a Quote"
or contact form within the services page
so if we scroll up a little bit and so
if we click any of these "Get A Quote"
button that will scrolls down to this
form so people can communicate with you
instantly by submitting this form I will
show you step by step how you can do
that now let's go to blog page I will
show you how you can create a nice and
clean blog page something like this one
here is the blog thumbnails
here is blog excerpt blog title
publishing date if we scroll down I will
show you how you can create this kind of
nice pagination then if we click on read
more button we will go to the single
blog post like this I will show you how
you can create this nice single blog
post page also people can navigate
through your previous or next post using
this navigator I will show you how you
can create this comment section so
people can make comment into your blog
and you can reply back as well I will
also show you how you can create this
kind of nice sidebar widget into your
single blog post now let's go to the
contact page in the contact page people
will get to know our address our contact
number our email address so they can
communicate with us easily also I will
show you how to put google map inside
your website so people get to know where
are you located and here we will create
another contact us form in that way
people can communicate with you now
let's start creating our website from
scratch and before starting I want to
tell you another thing
who's this tutorial for? this tutorial is
for you, if you want to create your own
website in that way you can literally
save $5,000
I'm a web developer personally I don't
charge that much you can check out my
website I charge really affordable price
but there are some fancy web developers
who can literally charge you more than
five thousand dollars to create this
kind of quality website then this
tutorial is for you if you want to
create others website, in that way even
you can charge five thousand dollar to
other yep if you have a good marketing
skill and you can convince your client
you can literally charge five thousand
dollar and then this tutorial is for
you if you want to start a web design
agency yes you've listened it correct
when you are really good at it
you can make your
own team and you can do it for full time.
in this tutorial, we are going to make a
business website but if you watch
the tutorial you can make any kind of
WordPress website by following the
principles I'm going to show you in this
one so you already understand the single
video can turn your career into next
level so please pause the video for the
moment and give this video a thumbs up
and if you want you can subscribe
because it would be a three to four hour
long video and the reality is you cannot
finish the video at a single morning or
evening you may forget about it after
watching half of it and it's it's
natural so please make sure you like
this video and subscribe in that way I
will be visible on your YouTube home feed
and you can make your dream website live!
so without further ado let's get started
the first thing we are going to do is
get a domain name and web hosting and I
can provide you through my link with a
60% discount of your hosting after that
we will install WordPress after that we
are going to install a free theme called
Phlox
and a free page builder called you know
Elementor and when we have done that we
will create our amazing website so let's
get started
if you have a web hosting already that's
great then you can skip this part if not
then follow along so if we want to get a
domain name and web hosting we go to
jimfahaddigital.com and hit enter I
will provide the link in the description
so you don't have to type manually and
then go to web hosting and here you can
see my number one recommendation for
what press web hosting is Bluehost so if
we click the get started button from our
website you will get a discount around
60%
so why Bluehost in my opinion Bluehost
is the best web hosting provider I am a
web developer I tried so many other web
hosting companies I don't want to
mention their name
but I personally ended up using Bluehost
hundreds of my clients using Bluehost
and they never complain about using it
if you see my Bluehost account I have
hosted here tons of websites and I never
get a downtime their customer support is
really amazing in case if you need any
help and that's why I always recommend
Bluehost and their price is really
affordable for everyone so now click on
get started you can see their pricing so
you have different options based on what
you need if it's your first website
and you only want to host one website
then you can take their basic plan and
if you have multiple websites more than
one you can pick their plus or choice
plus options though both options are
almost same choice plus has some domain
privacy and site backup features but we
don't necessarily need that and you can
take their PRO plan if you are planning
to host a big ecommerce website or if
you have millions of visitors already as
a beginner let's start with the basic
plan and we will get one website 50
gigabyte of SSD storage unmetered
bandwidth free SSL certificate,
standard performance, 1 included, 5
parked and 25 subdomains. so in that
price these are awesome
but in the future if you have multiple
web sites you can upload it to their
Plus plan so basically you can upgrade
or downgrade your plan any time now
let's click on select now we will select
our domain name and if you have a domain
name already you can enter your existing
domain name here and you can setup that
I'm assuming you don't have a domain
name already so let's select our domain
name on the right side you see there
options - .com .online .site or .info , I always suggest to take
.com websites because it's good for Search Engine Optimization
and also .com website look more
professional and legit now let's say we
want to take Apple.com
so type Apple and click on next it says
unable to continue the domain apple.com
cannot be used on Bluehost, please try a
different name because we all know
apple.com is Apple's official website we
can't take that. so you can put your name
here or your business name or your brand
name here so for the sake of this
tutorial let's try for something like - we
will be creating our website through
Elementor page builder so let's try
something like ourelementor.com and
click Next
so it says the domain ourelementor.com
is available. that's awesome. now here
scroll down, here you need to put your
account information your first name, last
name, business name, country, street
address, city, zip code, phone number and
here the email address is very important
because after completing the purchase a
receipt will be sent to this email
address so I'm putting my information
really quick my first name is Jim my
last name is Fahad then my business
name is Jim Fahad digital if you don't
have a business already no problem you
can just keep your full name here like
this
Jim Fahad but I have my business name
that's Jim Fahad Digital now I'm selecting
other informations for really quick and
here's the email address I'm putting my
email address here that's elementor@jimfahaddigital.com now I scroll
down here's the package informations by
default it's selected for 36 months that
means for 3 years but you will have
options for taking it for 24 months or
12 months if we select it for 36 months
let's have a look on the final price
it's $286 dollars for 3 years
now let's see how we can reduce the
price. For starting we can take it for 12
months plan so per month it will cost
you $5.95, It's still pretty
affordable now let's have a look on
"Package Extras" - here's the domain
privacy protection, having domain privacy
is good, so no one gets to know who is
the owner of the website you can keep it
if you want but for now I don't want
this on deselecting this one because I
want to be transparent so if anyone
knows I'm the owner of the website I
have no problem so turn it off
I don't need code guard basic or site
lock security either, I'm deselecting those
as well you see the price is now only
$71.40 for the full year.
Now, here's the payment information so I'm
putting my credit card number here my
CVV code and expiration date let's click
on confirm now I scroll down now select
this so you are agreed with their Terms
and policy and when you complete
purchasing through my link you see you
are getting a huge discount and I will
also get a commission so nothing extra
there's a win-win situation thank you
for that because it supports this
channel and helps me to make more
valuable videos like this for you so now
click on submit
it says your purchase was a success we
sent a confirmation email to
elementor@jimfahaddigital.com so I'm waiting
for their confirmation email
and here's the receipt so they will send
it also on my email and you will also
get that on your email so let's create
on create account now let's create our
Bluehost account from here our domain
name we already have selected
ourelementor.com  Now create a password now I
am here putting my password
and retype the password here again now
click I have read and agreed to Bluehost
Privacy Policy and Terms of service. let's
click create account your account is
ready to go now you can log in so click
on go to log in and you see I get
already email from Bluehost to confirm
my purchase let's now check our email
and confirm our purchase so here we get
already three email from Bluehost first
email is for confirming our account so
let's just click on verify your email so
our account is now verified let's close
this and here is our Bluehost login area
here log in to your account hosting
login yes domain name our domain name
ourelementor.com and password let's put
the password. It's the password we chose
a few times ago so let's click on login
for now just click on I'm not creating a
website because I will walk you through
everything how we can do that by
yourself so just skip this all here get
started we don't need anything ton of
domain privacy protection
I don't want privacy because I we don't
need that for now so we have
successfully completed purchasing our
domain and hosting now let's install
WordPress on our website and for any
reason if you logged out then log in
again
so from Bluehost login panel put your
domain name and password and then click
login then you can see a Bluehost admin
panel like this from left go to size and
now we will install WordPress into our
website
so now let's click on clear site or here
create a wordpress site i'm clicking
here
clear-site now site name here on putting
Jim for her production side tagline you
deserve to be seen and don't worry you
can change these informations anytime
from your WordPress dashboard now click
on advanced you can put your email
address here so mine is Elementor at Jim
Fahad digital comm and put a user name
putting Jim four hug and then set a
password
now click on next
now they are asking why we want to
install our WordPress so here is our
domain and we only have one domain here
and here is the directory we we want to
install it our root directory so people
can see our website on our element or
com
so we will keep the directory blank and
they are suggesting some free plugins
here we don't need that just deselect
this all and hit next awesome so you can
see what press install successfully so
we have successfully installed WordPress
within less than a minute there's
another reason I love Bluehost most
because I have used some other web
hosting provider and they took sometimes
2 hours to 48 hours to install your
website but in Bluehost you can see the
result immediately that's really amazing
so you can see if our website name here
so the whole world can see now our
website through this link and this is
our admin panel our dashboard link so
only we can exist that using this
username and password that we have
created a few seconds ago so you can now
click here login to WordPress from a new
tab awesome so this is our dashboard
this is our WordPress dashboard and from
left-top if you click on visit site this
is our website so the whole world can
see it now we have done nothing with it
so this is how it is looking now from
here we will make it to an awesome
website together and how you can go back
to the dashboard from left here click on
dashboard and you can see the dashboard
I will walk you through all of this so
don't worry about anything we will build
our amazing website step-by-step so far
if you have any questions please let me
know even if you face any problem during
web hosting or what press setup just
comment down below I will reply back
each question and I will try my best to
help you personally alright so we have
now our domain and web hosting
and we have installed WordPress core
installation we're doing great now let's
install our theme but before that I want
you to familiarize with WordPress
dashboard is super easy I'm showing you
all let's go first from users here when
you hover over on it from here let's
click on your profile from here you can
update or edit your information like
here you can see admin color scheme so
from here you can select a different
scheme for your WordPress dashboard only
you can see it so no matter which one
you like you can select that one here is
the default one
I like midnight one so I'm selecting
this one here you can put your first
name I'm putting mine it's the team and
last name for HUD if you keep it empty
no problem the matter is your nickname
and your display name I'm talking about
it a little bit later if you want to
change your email address you can change
it from here and then if you want to
talk about yourself you can write short
biography about you then here's the
option you can update your profile
picture so people get to know who you
are in my channel I have different short
video how you can update your profile
picture using Gravatar then here if you
want to change your password you can
generate new password from here but I'm
okay with my password so I'm canceling
this one in this section the most
important thing is your publicly display
name so it's the gym for her I'm
selecting Jim Fahad and let's click on
update profile why I'm saying this
public display name is important because
if we now go to post here let's now
click all post you can see here a dummy
post it came with WordPress by default
if you want to see the blog post then
click on View I'm opening it from a new
tab so here you can see the name Jim for
HUD this one is coming from that
publicly display name so the name you
put there it will be shown on the blog
post as author of this blog so this one
is a dummy blog let's now create a blog
by ourselves so how can I do that first
let's delete this one to delete this
let's click here on this trash so the
dummy post is now deleted but it's not
permanently deleted if we
- here on trash you can still see the
post so we want to delete it permanently
let's click here delete permanently it's
permanently deleted so now we want to
create a new post so to do that you can
click here add new here you can see the
page editor is Gutenberg page editor but
I don't want to use Gutenberg editor
because we will be doing everything
using Elementor page builder so I want
to use WordPress classic editor so
before posting our first post I want to
install a plug-in called classic editor
how can we install a plugin
so let's hover over here on plugins and
go to add new if you don't know what a
plug-in is a plug-in is basically a
add-on the thing that will add extra
feature into your website like if we now
click on this popular tab here you can
see tons of popular plugins here like
here you can see used SEO here is
ecommerce so if you want to sell
something from your website there is
already a ready plug-in for that there
Sukumar's if you want to make your
website or your blog rank into google
you can use this Yoast SEO plug-in then
here you can see contact from 7 by using
this plug-in you can create contact from
inside your website so there are
thousands of free plug-ins that people
already made for you so you can just
install that and use it right now I want
to install classic editor plugin here it
is classic editor but for some reason if
you don't find it on the feed you can
search it from here so I'm searching
here classic return here you go now
let's click on Install Now its installed
and click activate so classic editor
plug-in is activated here is the classic
editor plugin here also you can see
other plug-in like jetpack
Bluehost these all plugins came with
WordPress as we have installed WordPress
using Bluehost but at this moment we
don't need these plugins without the
classic editor so let's delete all other
plug-in how can I do that if we click
here on this plug-in checkbox all
plugins are selected but we want to keep
classic editor 1 so let's deselect this
one
and let's now click on bulk action some
of this plug-in are activated so first
deactivate them all so here click on
deactivate and click apply and now you
can delete all this one by one but I
want to delete them all together so
let's select all this together without
the classic editor one click on bulk
action delete and click apply
it says I'm sure or not here so I'm sure
click OK
so all other unnecessary plugins are
deleted let's now create our first post
so from post click on add new now you
can see the classic editor here instead
of Gutenberg editor we will be using
this editor in this tutorial let's add a
title first we can title it our awesome
first post now here in the editor I'm
pissing some dummy text I will describe
you later how you can create a nice post
using this classic editor when we will
discuss about blogs specifically
basically something like Microsoft Word
so you can select any word and make it
bold or you can select any word and make
it it'll look like that
so let's now publish this post here
click on publish button after publishing
any post you can see immediately here is
a permalink generated so this is our
specific post page link if we click here
I'm opening it from a new tab so here
you can see our first post our awesome
first post and here is our dummy text
but here one thing we can change if we
have a look on the URL bar you can see
our Elementor comm slash a question mark
P equals 7 C it's not good nothing human
readable so I want to change it so let's
go back to our WordPress dashboard and
let's go to settings from here click on
permalinks and from here select post
name so our URL would be shown in a nice
human readable way like our domain name
then forward slash our post name or page
name instead of this mumbo-jumbo
so after selecting post name scroll down
click here Save Changes let's now go to
post to all post and here is our post
click on View I'm opening
from a new tab and now you can see our
Elementor comm /our awesome first post
so that's our post name so when we will
create a page named our service that
will be shown like our element come
forward slash our service that's way
good all right now close this and let's
now install our free theme so to do that
let's go to appearance and from here
click on themes you can see some default
themes that came with what place I
personally don't like any of them so I
want to use another theme to do that
let's click here at the top add new and
here you can see thousands of thousands
free WordPress themes that all are
available for you you can use any of it
so if you wonder what is a theme theme
is basically the look and feel of your
website that's actually pre-made
WordPress community giving you that for
free so I want to use a free theme I
like it very much
it's called vlogs so let's search for
that theme is pH L of X flocks so this
one I want to install this theme so here
you can see the install button let's
click on install and now click on
activate our theme is activated now and
it says install flock score plugin we
need to install few plugins they're
suggesting to get most out of this
plugin so let's click here install
flux-cored plugin now let's go to
plugins to install the plugins and here
you can see flux core elements plugin is
activated as well so now have a look how
our website is looking now from top left
if you hover over here you can see visit
site click here now our website is
displaying in this way it's still ugly I
know because we have not already
designed it this is the skeleton of our
website we will create our beautiful web
site out of it and we will be using a
free page builder to design our pages we
will be using elemental page builders so
let's go our dashboard now and we can
clean up all these things because we
don't want to see all of these all the
time so dismiss this one close this
close this one close this and close this
sir dashboard is super clean now let's
now install elemental page builder to
install it go to theme for the digital
comm forward slash element or one to
four I will put the link in the
description so on that page if you
scroll down a little bit you can see
important links from there you will see
a link says get elemental click here get
Elementor Elementor is a free page
builder it has also provision by using
that we can create more cool websites
but in this tutorial I will only show
you how we can create an amazing website
using their free version now click here
on get started it's asking for my email
so I'm putting here my email address
element regime for digital calm and
click here subscribe and download it's
downloading here so it's downloaded into
my computer I'm going into my folder
here it is it's a zip file let's now go
to our WordPress dashboard and go to
plugins from there click add new and
here at the top you can see upload
plugin click here then choose the file
click here and select the zip file you
have just downloaded open it click
install now
IFS install successfully let's now
activity to click on activate plug-in
our elemental page builder is now
activated awesome we are almost ready to
go now we will be start designing our
website using elemental page builder
before that I want you to show some
other WordPress dashboard options
I just want to familiarize you so what
place wouldn't be a mystery to you from
settings click on general here you can
see the site titles in production you
can change it your way
tagline here here is our website URL or
email address our time zone you can
change anything you want then now go to
writing here all the default settings
are fine let's now go to reading here is
the important thing you need to do so
you can see here your home page displays
so which page you want to display when
people come first on your website like
my domain is our element or calm when
people will come on our element or calm
which page I want to show them of course
I want to show them the homepage but we
haven't created any page so far so let's
now create some pages first then we'll
come back into this page to create new
pages from left here you can see pages
click on all pages here you can see two
dummy pages that came default with
WordPress I don't need any of them so I
want to delete this let's select all
click on bulk action move to trash apply
there is still available on the trash I
want to delete them permanently
so now select them all again bulk action
delete permanently apply so all the
dummy pages are gone now I want to
create some pages let's click on add new
which one first I want to create of
course home page first so I want to name
it home on the right click on publish
after clicking on update you can see a
permalink instantly it says our
Elementor come /home instead of that
mumbo-jumbo i want to create fewer pages
so i can click here on add new or at the
top bar if you hover over on the new
it's basically a shortcut from here you
can create new post media page template
user so you can create new pages from
here or from here let's click here add
new I want to create about Us page
publish I want to create a services page
click on add new services publish I want
to create a blog page add new your blog
oops not there here blog publish also I
want to create a contact page a title
contact let us now click publish and if
you have different services you can
create different pages for your
different services like if you were a
photographer if you have photography
service so you can create a different
page for photography service you can
create a different page for videography
service so I'm just showing you how you
can create those pages and show them
under drop down menu so let's click on
add new I'm just creating dump
so let's name it service 1 publish add
another service to not be here here
publish and let's create another one
service 3 and publish it now let's go
back to settings click on reading your
home page displays click here a static
page I want to make home page this one
we have just created the home and I want
to make the post pages the blog one now
click Save Changes alright our major
settings are done let's have a look now
so from the top left click on visit site
now it says home so our home page is
showing correctly this page is empty
because we have not decided yet first
let's create our menu here so how can I
create a menu let's go back to our
dashboard from left appearance go to
here
Minho's let's create our first menu here
is the menu name option inhibit as you
wish because nobody can see this name I
always name it main know some naming it
main menu let's create on create menu
now which pages I want to add in this
menu from left you can see all the pages
if we click on View all we can see are
all pages let's click on select on add
to menu and here we can see all the menu
items you can order the order your menu
items from here only by dragging it
so after homepage I want to display
about us so I'm dragging it and dropping
it under the home then I want to display
services so I'm dragging it and dropping
it here then blog and contact is fine
but I want to make service one service
to and service 3 pages as the sub menu
of services page so to do that I'm
grabbing the service 1 and dropping it
under services if we keep it like this
it will be a regular menu but I want it
to be a sub menu of services so I'm just
moving it a little bit right so it's now
a sub menu of services I also want to
make these services to as a sub menu
also for services 3 let's save this menu
good
our home page and refresh we still
cannot see the minnow why is that let's
go back to our dashboard scroll down
here you can see the display location
option so here we need to select the
location where we want to display the
menu I want to make it header primary
navigation so I'm selecting this one and
save menu now let's go back to our home
page and refresh the page now we can see
our menu nicely also if we hover over on
services we can see our sub menus
perfectly blog contact all right now
here instead of it in fat production I
want to display here my logo also I want
to customize some global settings of
this theme to do that let's have a look
on the top bar here is customize option
let's click here on customize you can
see this top bar when you are only
logged in only you can see that your
website visitors cannot see that because
they are not logged in alright so this
is our customization option of our theme
the flocs team we have installed every
theme has its own customization option
and phlox team has a lot of options you
can customize it's really unbelievable
they give all of this customization
option for free yep they has their pro
version as well but the options they
give us for free there's enough for us
to build our website we will customize
some global settings of these from here
and then we will be start creating
designing our website using elemental
page builder for the sake of this
tutorial I have designed the whole
website on Photoshop you can see here
this page this is the home page I have
designed all other pages as well so we
will start designing our website using
Elementor after customizing some basic
settings from a theme customizer so
first let's go to site identity here
click here site identity here's the
option for adding logo let's click here
to upload our logo go to here upload
files on the top left click on select
file to upload your file and here I have
the folder called Elementor all the
images I will be using for this website
I have saved all these images here in
this folder let's select our logo click
on open now click here select here's the
option for cropping but I don't want to
crop my logo so click here is keep
cropping here is our logo awesome if you
want to get all the images I have used
for this website so all these images
this all backgrounds all icons all
images I have used for this website you
can go to theme for digital calm forward
slash elemental one two four I will put
the link in the description so from
there you can see here important links
you will find a link says download the
images I use in the tutorial by clicking
there you can download all the images I
have used for this website so you will
basically get a zip folder after
unzipping it you will get all the images
all the background images brands images
headshots icons all other background
images so you will get it all and you
have full right to use these all images
because all these images icons I have
created in Photoshop and I'm giving you
all this for free that's a gift for you
so feel free to keep it and use it so
let's go back to our WordPress customize
option so we already have added our logo
then see what's next here is option for
adding an optional logo we don't need
that then here is the option again for
site title and tagline you can change
this from here as well here's the option
for logo width by default it's 80 pixel
if you want you can change it from here
here's the logo max height it's same as
header height you can make it a specific
size in pixel but I want to keep it same
as header height and here is the site
icon option so site icon is basically
the favicon of your website let's now
click here on select sign icon upload
files select files and here I have made
already fav icon dot PNG open it now
click on
and here I don't want to crop it so is
keep cropping you see here at the top of
our browser tab here is our site icon
add it immediately alright now let's go
back we were here at site identity now
let's click on my nose here is the menu
main underscore menu that we have
created from WordPress dashboard click
here you can see the menu from here we
don't do anything with the menu from
here but this theme has given us the
option that we can customize it from
here as well so just keep it as it is go
back go back now let's go to general but
before that I want to change the
background color of the inner body so I
can demonstrate you on the general
settings so I'm going on appearance and
content background I'm just doing it to
make you understand something so just
stay with me I'm changing the background
to black or let's make it yellow
something like this it's torturing my
eyes so let's keep it this color or
maybe black okay I apply now let's go
back go back yeah now let's go to
general and here general layout here is
the option you can select here is the
full width website and here's the option
you can make it boxed like if we select
the boxed 1 then our site content will
be wrapped in a box then here is the
site max width option it's by default
1200 pixel if we want we can decrease it
to 1000 pixels like that to demonstrate
it to you I intentionally change the
background color so right now you can
see some spaces on the left and right if
we zoom out or browser you can
understand it more properly so you see
if we select the box to lay out our
website content will be wrapped inside a
box and there will be white is pieces on
the left and right let's zoom in but not
1000 pixel I want to make it default
1200 pixel and website layout I want to
make it full width
I'm just showing you what's possible
using this customizer option now let's
go back let's go to general typography
here you can change the general
typography of your website like your
font family font size line height but I
won't change anything in a typography
from here on this customizer because I
will do that using elemental page
builder so I'm skipping for it now go
back actually most of the thing we will
be doing using elemental page builder
and here in this customizer option I'm
just showing you what's possible and
what you can do using it you may have
different business you may have
different choice so if you know how it
works you can create any kind of website
you want that's why I'm showing you
what's possible now if you click here on
the website socials you can add your
social media accounts like Facebook
Twitter Google+ dribble you can add all
the social media links and can show them
on the top bar I'm not using it on this
website so let's go back and here's the
option for page animation and
pre-loading so if we enable the page
animation option you can see here is a
page animation appears until your page
loaded fully so you can select different
type of animations like they give us
different options if you select this one
your site will be pre-loaded this way
you can do cool things using it but in
this site I'm not using it so I'm
disabling this one now let's go back and
here's the custom gist code if you want
to use any JavaScript code you can use
it go back and here is Google API keys
and SEO this one is important because of
course you should track your website
visitors and I personally highly
recommend you to use Google Analytics
and from here you can add your Google
Analytics code so you get to know how
many visitors are coming into your
website every day or every week so how
you can add Google Analytics code here
first go to your Google Analytics
account if you don't have a Google
Analytics account I'm requesting you to
get a
account today from your Google Analytics
account if you click on admin you can
see these options and from here click
tracking info from there click the
tracking code now you can see that
tracking code Google generated for us
from here you can see G tag config and
then an unique ID so just copy this ID
here I'm copying it by pressing command
C now let's go back to our customizer
and paste it here then click here on
publish to save it I'm clicking here
publish it's saved now let's go back go
back now let's go to appearance here's
the option for a website background if
you want to add in a background color on
your overall website you can add that
from here then content background that I
have added only for testing purpose to
demonstrate you how it works so now I
want to remove it so I'm clicking here
on this X icon and click apply so that
content background color is gone now go
back here's the option for website
frames so if you want a frame around
your website you can add that I don't
need that let's go back and here again
the option for typography like I said we
will be doing all this typographic thing
from element of page builders some is
keeping it for now let's go to his skin
options so if you have a video player or
audio player inside your website you can
select your video or audio player is
skin from here if you want a darkest
skin or lightest skin you can select it
from here and here's the pagination skin
option like when you will have lot of
blog post on a single page you want to
display only 5 post and if people want
to see next posts then they can navigate
through this pagination and from here
you can select the pagination skin you
want if you want you can select this one
or this one I like this one because this
is the popular one most website used
again here is some type of graph y
option we don't change anything from
here so let's now go back
here this theme also gave us some option
for mobile browsers firms we will have a
look on this later let's now go back now
let's click on header options now let's
go to header section from here you can
change the header layout like now you
can see the logo on the left and the
menu on the right if you want to change
it to something like this one so now you
can see the menu on the left and the
logo on the right but I don't want that
I want to change the default one then
scroll down from here you can change the
header with and header height by default
the header height is 85 I want to keep
it 85 and here is the option for hitter
with if you don't want the space from
left on the right you can select the
full adoption but I like the default one
now let's go back now let's go to header
menu here is the options for submitting
skin like if I hover over on services
you can see the submenu in this way if
we want to change it to something like
this one and if I now hover over on it
you can see a darkest skin okay let's
keep it like this now let's scroll down
also here you can add animation effect
like if I select this one now if I hover
over on it you can see it appears after
a little fade in alright that looks good
and they are scrolling down here you can
see the option for display submenu
indicator so here have a close look you
can see our down arrow here if we
deselect this arrow will be gone but I
want this indicator so people can
understand we have sub menus under
services and here's the option for
display mini splitter you can see some
dots in between the menos I don't want
that so I'm disabling the option right
now the manor looks clean now let's save
it click on publish now let's go back we
are almost ready to go if you want you
can have a look on these other options
like if you want a top header bar at the
top of your website you can go here top
header bar you can enable it so top
header bar will be added at the very top
of your website like if you want to add
your phone number the top of your
website you can scroll
down here and you can write call us then
you can put your phone number something
like this so if we now click on publish
we still cannot see the text from here
on the settings if we select this one
now you can see the text call us then
your phone number so if you want to add
a top button to your website you can use
this option but I don't want in this
website so I'm disabling this one now go
back go back here is more customization
options for blog footer extras we'll
have a look on this later for now we can
have a look on the page settings here
now let's go to page layout from here
you can select your page sidebar
position like if you have sidebar you
can select these options so a sidebar
will be added on the right if you want a
sidebar added into left you can select
this option but I want the home page
without any sidebars so I'm selecting
this one no sidebar and here's option 4
display content top margin by default
it's enabled if I disable it there were
some space at the top but it's now gone
now go back now let's go to page title
here you can see the page title I don't
want to display the text home on the
home page so I'm disabling it so there
is normal home text on the home page
alright who are good with the
customization for now if we need further
customization we can always come back
here in the customization so for now we
are good let's click on publish to save
it and close our customizer by clicking
on this X icon so this is our home page
now it's totally empty we will start
creating our amazing home page from here
using elemental page builder so from top
left go to dashboard click on pages to
all pages here is our home page click on
edit now click Edit with Elementor
alright finally here is the elemental
page builder
I'm excited because now we really start
creating our real website so let's go
back to my Photoshop first we are going
to create this nice top banner of our
website but before that I want to make
you understand some easy fundamentals of
Elementor like here you can easily
understand on the left side you can see
element or elements or widgets like text
widget image widget video widget we can
just simply drag an element from the
left and drop into the right side and
it's instantly done so you already
understand how it works but I want to
make you understand three fundamental
things in elementary if you understand
these three things properly you can
literally create any kind of thing
inside your website literally any kind
of thing so number one is section number
two column and number three element or
region so don't become confused when I
say anything element and sometimes I say
widget those are actually the same thing
like this is a text widget or text
element this is a image widget or image
element all right so now first let's
take a section to take a section we need
to click on this plus icon then we have
options to pick different structure like
a single column section two columns
section three column section like that
so for now let's take a section single
column section now I want to give this
section a background color to do that
I'm clicking on this grub icon and from
here height giving it a minimum height
and minimum height is 400 pixel please
don't worry about all these settings at
all because right now I'm just trying to
demonstrate what a section is and how it
works so let's now go to style tab here
click on style and here background type
select classic and let's give it a color
maybe a red color like this so this is
our section now let's
and column inside it to do that let's
click on this icon at the top right here
and you can see here inner section I'm
just dragging it and dropping it inside
the section now you can see two columns
here now inside this column I want to
add some elements to do that I can click
on this plus icon or I can go to this
elements icon and let's drag a heading
element inside this column here so here
the most outer thing is section then
column and inside element like if we
want to add a background color into this
column let's click on this column icon
and go to style background type classic
select color let's make it white like
that and inside this column here is a
heading element or wizard
so like this heading element we can add
multiple elements inside this column
like if I want I can add a button inside
it to just drag it and drop it inside
here I can add any text inside it so
here grab the text editor and drop it
inside here like that now let's start
from section level if you want to do
anything on section level we need to
click on this grab icon then on the left
you will find three different tabs left
one is layout then is tile and then
advanced so if you want to do anything
on this section we can do it from here
like if we click on style we can change
color we can do all other stuffs from
here I will show you everything then
when we will work on column level we
need to click on this column icon and
then from style you can select the
background color from here it's white
you can make it red or anything so let's
keep it white
since column level now if we want to add
some breathing space around this column
we can do it from the Advanced tab here
you can see the margin and padding
option if I want to add some padding
like 30 pixel all around this
the padding is added then if we want to
work on an element or wizard level we
need to click on this pin or edit icon
like if the heading from the content tab
we can make it h2 h1 or h3 and from a
style tab we can make the text color to
red we can change the type of graphic
from here click on this pen icon we can
make its size really bigger or smaller
like that in the same way if we want to
change something on this button let's
click on this pen icon if we want to
make it centered from content tab let's
make the alignments endured go to his
style let's change the color background
color change it to red like that also
for this text widget let's click on this
pen icon go to his style text color make
it right done so if you only understand
these three thing section column and
element you can do anything you want if
it's still not clear please watch this
part twice because if you only
understand this part you can literally
create anything so now we can start
making this top banner into our website
so now let's delete this section to
delete it click on this top X icon it's
gone
so here on the left here is our
elementary elements and on the right
side our live webpage by the way you can
add just the Elementor width from this
to this let's keep it like this also if
you want to preview your page you can
minimize it like this and you can expand
it by clicking here now first I want to
create some global change like some
global color global forms so we don't
have to select a color for hitting one
specific color for button sees each time
so let's make the global settings first
to do that go to the top left hand
I can now go to the default colors here
you can see the global color palette
that Elementor give us also there's some
available color palette like if you
select this one you can also select this
this or this but here I want to use my
own color palette so I want to change
all these colors how can I do that I'm
clicking here and I'm pasting my primary
color here then I also want to change
the secondary text an X in color if you
want to use the same color I'm using you
can pause the video and take my colors
alright now let's click on apply now go
to the hamburger menu again and now
select and now click on default forms
you may remember we have escaped all the
typography staff on customizing option
same customizing option because we will
be selecting all our fonts from here so
let's click on primary headline here
font family I want to make it happens
it's a Google font and I want to make
the font weight 300 secondary headline I
want to do the same with it Poppins font
weight 300 body text here again Poppins
font weight 300 and also 4x and text I
want to make the font family to Poppins
and from the word 300 so we have set our
all global fonts now let's click on
apply all right we are ready to go now
let's start creating this top banner so
let's take a section first click on this
plus icon I want to take a single column
section and I want to make this one with
100% so here is just section turn it on
and then from here height I want to make
it minimum height here you can set
minimum height in pixels vh r VW so i
want to make the minimum height in VH
that means a vertical height
let's now
drag these two it's basically from zero
to 100% so I want to keep it 90% like
this now go to style tab and from here
we can add background like classic
background that's a solid color we can
add gradient background we can add video
background or slideshow background so
let's first add a solid color background
like for now let's add a black
background here so it's looking like it
now let's add a heading inside it go to
elements and drag a heading inside it we
cannot see the heading because the
heading color is black and our
background is also black so let's now
make our heading color white so to do
that let's click on this pin icon and go
to style text color let's make this
color to white now we can see the text
our heading text but here instead of add
your heading text here I want it to say
Jim for her consultancy and I want to
put a line break here so I'm just
putting my mouse here and hit enter now
I want to make this heading really big
so let's now go on contents I want to
make it h1 but I'm still not happy with
the size I want to make it more bigger
so let's go to style and from here
typography click on this pen icon and
here is the font size I want to make it
really big so I'm dragging it to the
right it's too much let's keep it 90 I
also want to adjust the line height to
something like 0.9 and little spacing I
want to keep it 3 yep it looks good now
I also want to add some bottom margin on
this heading so to do that let's go to
Advanced tab and bind all margin and I
only want to add margin at the bottom so
here bottom is 0 now let's make it 30 so
now it has some bottom margin
around 30 pixel now underneath this
heading I want to put some text so I'm
going to elements and here's the text
editor I'm grabbing this text editor and
dropping underneath the heading so here
is our paragraph we still cannot see it
because it's black so let's change its
color let's go to style text color let's
make the color to white alright now I
also add some margin with this paragraph
to make it look synced with the upper
heading so to do that let's go on
Advanced tab unbind imagine first and
now instead of pixel I want to give some
margin in percentage so I'm clicking
here on this percentage icon and on the
right I want to add 60 percent margin
and bottom I want to add some negative
margin like minus 2 percent underneath
this paragraph I want to add two buttons
so for that lets go to elements I want
to take inner section first here
underneath this paragraph here now go to
elements and here's the button wizard
our element now drag this inside this
column I want this button say about us
so from here instead of click here I
wanted to say about us and I want to
link it to our about Us page so here I'm
linking it to our about Us page now
let's add some style with it so to do
that let's go to style let's add some
border with it so from here but a type
let's select a solid and I want to give
it with two and I want to add border
radius all around three like that and I
want to remove this reddish color
so from here background color I want to
make it full transparent like this so
this is these buttons normally stays I
want to add a hover effect on this
button to do that
from here click on Hoover and on Hoover
I only want to change the background
color so let's click here and here I'm
pissing my color now if we hover over on
it we can see the Hoover color on home
world I also want to change the border
color as well at the same color like
background color so this color right now
if I hover over on it it looks like this
it looks cool last thing on this button
I want to add a little bit padding
inside it so to do that let's go to
advanced from here padding I only want
to add the 5 pixel of padding inside of
it now I want to reduce the column width
of this so to do that just grab it here
and drag it to the left to reduce the
width of this column now I want to
duplicate this column so right click
here you will find the option here
duplicate so I'm clicking here on
duplicate let's now delete the empty one
right click delete it but I want to make
these two buttons closer so to do that
i'm reducing the width of this left
column with maybe 15% now i want to edit
the content of this button to do that
click on this pin icon here instead of
about us I want to say our services and
I want to link it to our services page
so here services what else can I do now
let's add a sub header at the top of our
main heading so to do that lets go to
elements and drag inner section at the
top of our heading here on the right
column I want to put a heading so I'm
clicking here on this plus icon here is
the heading just drag this and drop
inside here we cannot see it because we
need to change the color so let's go to
his tile text color I want to make it
white
let's go to content I want to make it h6
hand instead of add your heading text
here I want to put my text
that's what's missing in your business
and on the Left column I want to put a
bar to make it look cool so I want to
add a divider here let's click on this
plus icon and here is the divider let's
drag it and drop it inside here we
cannot see it yet so let's go to his
tiles and color let's change the color
to our color now we can see it now I
want to make the weight two three and
the gap six now I also want to reduce
this column width so I'm clicking on
this column icon have a look on my mouse
cursor I'm grabbing it here and dragging
it to the left so I want to keep it to
something like 10 yep 10 is good 10
point something no matter it looks good
now I want to work on the section level
so to do that click on this grab icon on
this section level because instead of
the solid black color I want to add a
background image so we have selected the
section and from here is tile here's the
option for background image so from here
we can add background image click here
to choose image go to upload files
select files now let's go inside
background folder let's select an image
from here now and click open click on
insert media so here is our background
image but we can adjust the position
like from here you can see the position
he has different options like sender
sender let's keep it sender sender and
attachment let's keep it default and
repeat we don't want it to be repeated
so let's keep it no repeat and let's
make the size to cover awesome so if we
want to keep a single background image
we can do that in this way but in this
top banner instead of a single image I
want to add
ground slideshow so let's delete this
one to delete it here is the Delete icon
deleted and from background type here is
the slideshow option click here and here
you can see no images selected click on
this plus icon click on upload files
select files
let's select couple more images together
and click on open
so not only these two I also want to add
this one as well some selecting this one
as well so there are three images in the
slideshow now let's click create a new
gallery now you can order or reorder the
images the way you want and then click
insert gallery here by default infinite
loop is on so these three images will
come one after another infinitely and
here's the duration by default it 5,000
millisecond that means 5 seconds if is
too fast for you you can make it more
like I want to make it 7,000 so after
every 7 seconds the next image will
appear in the background there is couple
more option that we can play with it
here is the transition by default its
fade if you want you can make it slide
right or slide left but I like the fade
one and here's the transition duration
its 500m is I want to make it 1000 mas
so one second and here's the background
size I want to make it covered and
background position I want to make its
inner cylinder and also I want to add
Ken Burns effect here so I'm turning it
on and I want to make the direction
instead of in I want to make it out so
overall it would create a really nice
effect and this moment if we want to
preview our page let's click here on
this eye icon to preview changes click
here and you can see the page life see
this page looks really great we only
have done the top banner and it looks so
much professional with
nice background slideshow subheading
main heading paragraph and two buttons
all right now go back to our elemental
page builder let's now create our next
section so let's have a look online
Photoshop design after this top banner
we will create this three column section
now in each column there will be
subheading a main heading paragraph and
gradient button so let's create it go to
our elemental page builder here let's
click on this plus icon to take a new
section as it will be a three column
section let's select this one I want to
make this section is changed so turn it
on and I want to add some space at the
top and bottom of this section so let's
go to advanced and padding unbind it I
only want to add some padding at the top
eighty pixel maybe and bottom eighty
pixel all right so right now I want to
add a subheading like this what we have
just created on the top banner so I want
to create here at first so you already
know how to do that let's click on this
plus icon grab an inner section inside
of it on the Left I want to put a
divider so let's grab this divider
inside of this column let's reduce the
width of it so I want to make it in
pixel and I want to make this width of
60 pixel go to style I want to change
this color blackk to our color let's
make the weight 2/3 and gap let's keep
it 8 for now and on the right column I
want to add a subheading click on this
plus icon grab a heading inside it I
want it to say small tactics and let's
make it h6
now let's reduce the width of the left
column you know how to do it just grab
it and drag it to the left let's keep it
like 20 okay 22 is fine now underneath
this subheading I want to put the main
heading of this column so let's go to
the elements drag this heading
underneath the subheading here I wanted
to say our
approach now underneath the heading I
want to add some text so go to elements
grab the text editor and drop it
underneath the heading you can change
this text whatever you want from here or
from directly from here alright
now underneath the text I want to add a
button you already know how to add a
button so we can just grab the button
from here and drop it underneath
now let's link this button to our about
Us page so I'm linking it to our about
Us page and you already know how to
change this color if you go to his tile
we can change the color we can add
border like we did on the top banner so
if you want to keep it a solid color
background then you are good to go
but what if you want to create a
gradient button like this one what you
can see in my Photoshop know is I will
show you how to do that
so now let's delete this button first to
delete it right click here delete the
button is gone now I will show you the
trick how you can create a gradient
button so to do it let's go to elements
first and take an inner section
underneath the text inside the left
column click on this plus icon and now
drag a button inside of it now let's go
to advanced and here click on background
here you can see the option background
type here is the classic and here's the
gradient let's click on gradient so
gradient is basically blend of two
colors so we need to take two colors for
that so let's pick our first color from
here click here I'm putting my color
code here and then here is the second
color option I'm putting my second color
code here and now go to styles basically
first to enter removing that default
background color of our buttons so click
here on this background color let's make
it fully transparent see the gradient
effect now if we want to adjust it as
our wish so let's go back to advanced
background from here you can adjust the
location like this 50 or let's keep it
60 you can manually type it from here 60
and here is the
angle you can change the angle from here
so you can keep it the way you want I
want to keep the angle 150 and when we
hover over on it
I just want to reverse the angle so to
do that I will keep everything same on
the hover but I will only change the
angle so let's click on hover we also
here want to use the gradient select our
first color from here then select the
second color I'm piston my second color
here location I want it to be same as
normal so here is 60 I want to keep it
60 here as well I only want to reverse
the angle so here is 150 I want to make
it 300 here so I'm typing here 300 so if
I hover over on it now you can see the
gradient color is reversing it looks
really cool
now I want to add border radius with it
so let's see scroll down here's the
border option let's add 30 pixel of
border all around it okay let's make it
50 and now let's adjust the spacing so I
scroll up click on advanced
let's give it 10 pixel of padding unbind
it because I want to reduce the top and
bottom padding so top I want to make it
8 and bottom I also want to make it 8
but it still looks very fat so I want to
reduce small the padding from the top
and bottom so let's make it a zero maybe
and top let's make it zero yep it looks
good now all right now I want to add
some inner space around this whole
column so let's click on this column
icon go to advanced and padding I want
to add 20 pixel padding also I want to
add some box shadow around this column
so let's go to his tiles click on border
and here is the box shadow option click
here I want to adjust it a little bit so
click on color I want to make it more
transparent so let's drag it to the left
let's keep it like this so point three
horizontal let's
zero vertical let's keep it zero Blair I
want to make it more Blair so let's make
it thirty and it splits too much so I
want to have some negative value here
minus 15 and here position outline is
good alright and the last thing I want
to do in this column I want to change
the color of this subheading so I'm
clicking here on this icon go to his
tile I want to make it a little bit
lighter so text color maybe this one has
a 7 a 7 a 7 a is the hex code it's a
little bit lighter than dark black all
right click outside and don't worry
about this blank column because we are
in dashboard now so we only can see it
when we will preview it on a live page
this empty box only be shown so now
let's just duplicate this whole column
right click here duplicate and I want to
duplicate it one more time click
duplicate and of course I want to delete
these empty columns right click delete
this one right click delete now you can
see there is no space in between these
columns so I want to add some space in
between them so let's click on this
column icon go to advanced and here I
want to add some margin maybe 20 pixel
let's do the same with this column
advanced add 20 pixel margin also on
this one go to advanced add 20 pixel
margin and here you can see the click
here text inside the button is splitted
into two lines so what can I do we can
reduce the padding from left and right
so click on this pen icon and instead of
10 let's make it 5 and here let's make
it 5 yep it looks good now so let's do
the same with this all you can do that
going to their each settings or there is
a simple way like if you right click
here and copy it now then go to this
button widget right click here and click
on paste style see how is it is let's do
the same with this one right click paste
style now I want to change the heading
of this one too
our services also I want to change the
button link so click on edit button go
to content and I want to change the link
to our services page and on the right
column I want to change this heading to
our results and I want to link this
button to our Contact Us page so here
link let's link it to our Contact Us
page and you know you can change all
this text and subheading the way you
want when we're done with all the
changes let's now click on this Update
button to save it and let's click on
this eye icon to preview the page so
here is our top cool banner and then
here is the three column section that we
have just made it looks really nice now
let's create our next section you are
already familiar with elemental page
builder so I'm going a little bit faster
from now as you already know how to take
elements how to resize it how to make
forms bigger smaller all right so let's
go to my Photoshop we have created this
area and then we will create this area
or this section so here we will have our
subheading main heading then a paragraph
and overview of our service with icons
so let's do it to take a new section
let's click on this plus icon first I
want to select this structure let's
click on stretch section to make it full
width now let's have a look on my
Photoshop design here we will be
creating this subheading and we created
this same design subheading on the very
top banner here so as we have created
this one so we don't necessarily need to
recreate the same design each time we
can just copy that and literally paste
that now let's scroll up here is the
subheading area so grab this area right
click here and click on copy and then
scroll down here inside the new section
right click here and click on piste we
cannot see the text because it's white
we have copied here from here so it was
white now let's change the text color
some clicking here
go to his tile text-color I want to make
it hash seven eight seven a seven a
alright now let's go to elements live
SATA heading underneath the subheading
and I wanted to say consultancy
industries it's a hitch - but I want to
make it really big so I'm making the
size XXL now underneath the heading I
want to add a paragraph so I'm dragging
this text editor here let's put more
things here only to see how it looks
okay so now I want to add some margin on
the right so I'm clicking on this pen
icon go to advanced and bind the margin
and on the right I want to add maybe for
the five pixel okay let's make it in
percentage let's make it 45 percent all
right it's now synced with the main
heading now underneath that I want to
add the services overview so let's take
an inner section first here inner
section drag it so here we have two
columns now I want to take an image box
let's click on this plus icon I'm here
searching for image icon wizard so here
it is image box let's drag this and drop
inside here now here in the image box if
you see the options here you can add an
image you can put your title and
description here so this box is for your
title and this box is for your
description so if you change the title
here it will be immediately changed here
let's now add an image for it click on
this image icon go to upload files
select files I want to go to the
elemental folder here now let's click on
icons I want to upload this all now
let's click on open all images are
uploaded if you want to use the same
image like I said you can download the
zip file from my website the link is in
the description or you can use your own
icons so now let's select icon and click
on insert media and here on the left you
can see the image position option so you
can make it structure this way or we can
make it
this are like this I want to make it
left-aligned and this title is right now
h3 I want to make it h4 also I want to
make this paragraph text a little bit
smaller so let's scroll up and go to
these tiles here you will find the
options for images so if you want to
make this icon larger you can do that
from here and here at the bottom you'll
see content click here you will find all
the options to adjust the title and
paragraph text so here's the description
let's go to its typography I want to
make its size 214 things L yep it looks
nice to me now now now I also want to
add some padding and margin on this
image box so let's go to advanced I want
to add some margin at the top and bottom
so let's unbind it first I want to give
it 10 pixel margin at the top and 10
pixel margin at the bottom and let's now
unbind the padding or let's bind it
because I want to give 20 pixels of
padding all around
let's now duplicate this column couple
times
duplicate right-click here duplicate and
of course I want to delete the empty one
right click here delete it and I want to
display six services preview so I want
to duplicate this whole row so to do
that right-click here on the grab icon
and click duplicate sit sound implicated
so you can now change each of the
heading paragraph and icons the way you
want like here instead of solitaire I
wanted to say business planning and also
I want to change the logo so I'm
clicking here choose image I want to
select this one click on insert media
and then you can also change in this
paragraph text so you know how to do it
I'm changing the other logo and headings
for really quick all right this area
looks really nice now I only want to add
some padding at the bottom of this
section so to do that let's click on
this section grab icon go to advanced
and bind the padding and I only want to
add padding at the bottom so here's 60
pixel padding at the bottom now let's
create our next
section let's go to my Photoshop scroll
down here we will be creating this
section now on the left there will be an
image a big image and on the right we
will have subheading main heading
paragraph and three inner columns where
we can highlight our core values as a
business or as a company so now let's go
to the elemental page builder here click
on this plus icon and as it's a two
column sections on selecting this
structure on the Left column there will
be a big image and on the right column
there will have the most of the content
so let's start from the right column so
we want to put a subheading first so you
know you can copy and paste it so let's
go above here hover over on this
subheading right click on this grab icon
copy it and scroll down inside the right
column right click here and click on
paste and underneath that subheading
lives at our main heading go to elements
drag a heading underneath the subheading
and I want it to say something like 30
years of experience you say h2 and I
want to make it really big some making
its size double XL and underneath that I
want to put some text so I'm grabbing
this text either underneath the main
heading let's put more dummy text
something like this and underneath that
we want to show display three columns
with our core values so let's go to the
elements and drag an inner section here
now let's click on this plus icon and
here I want to put image box so I'm
searching for image box here is image
box let's drag it inside here here it is
I wanted to say consistency let's click
on choose image I'm selecting this icon
insert media now there's a duplicated
couple more time right click here
duplicate right click again duplicate
and of course I want to delete the empty
one delete it now this heading looks so
big so I want to make it smaller let's
click here now let's have a look on the
left is scroll down its history of
course we do not want to make it h3
let's make it h5 all
for this one let's make it h5 also this
one make it h5 and here instead of
consistency I wanted to say improvement
and the last one I wanted to say
branching now I want to make these
paragraphs or texts side is smaller so
to do that let's go to these tiles then
click on contents and here for
description let's go to typography here
is the font size I want to make it
smaller let's make it 12 pixel I want to
make clear pixel to all these so I can
just right click here copy and right
click here I can paste this tile also
here right click paste style now let's
change the logos really fast all right
our right column looks good now now
let's add the big image on the Left
column so let's click on this plus icon
we can add it as an image but instead of
that I'm showing you other way so let's
remove it let's drag a spacer inside
this section so especi is basically an
invisible area so we can add that image
as a background of this invisible spacer
now let's click on this column icon go
to these tiles background type click on
a classic click here on the image let's
go to upload files select files I want
to go to the elemental folder images and
I want to select this image open it now
let's click on insert media now here you
already know the reason why we cannot
see the background image properly
because we need to set the position so
let's make the position to sender sender
attachment let's keep it default repeat
no-repeat and sight let's make it cover
now if we minimize the elemental page
builder it looks like this you see we
need to add some space around here and
also I want to make this way to full
width so to do that let's open the
limiter page builder and here click on
the section grab icon let's make it a
stretch section and also content width
instead of boxed I want to make it full
width so if we now minimize the
builder it's looking like this way
better now let's add some is pissing on
the right column so let's click on this
right column icon go to advanced and
bind the padding and I want to give it
in percentage so let's click on
percentage icon 10% at the top 10% on
right 5% on bottom and 5% on left so
it's looking like this now much better
but I think you see the above it is
white and this area is also white so we
can change it to any other whitish color
but not exactly this white so to do that
let's go to his tile click here on
background type let's select a color I
want to paste f5f5f5 this color so it
looks good now yep it looks good also we
can add a transparent image with the
color so in together that will make this
area look more professional so let's
click on the image upload files select
files go to the elemental folder from
the background folder I want to select
this image open it now click insert
media
it's not anything strongly visible but
if you have a close look it gives us a
texture so this gives this area an extra
vibe let's now create our next section
let's have a look on my Photoshop after
this area we are going to make this
beautiful testimonial area I will show
you how easily you can make this area
really fast so let's now go back to our
elemental page builder now click on this
plus icon to take a new area now select
the 3 column area on the stretch section
click yes now inside the column let's
click on this plus icon I want to put
here an image box so I'm searching for
image box here it is drop it here let's
now select a client image go to upload
files select files I'm going back to
elemental folder from here here short
folder I want to upload all the images
open it and for the first one I want to
select this one and now click on insert
media and
let's keep the default image position
and I want to make the title h3 to h4
and underneath that I want to put Easter
marks so it's her icons so let's go to
elements and I'm searching for stars
here it is a star rating let's drag it
and drop it under the paragraph here's
the star icon and here's the options for
that you can change the rating scale by
default it's 0 to 5 you can change it to
0 to 10 like this and here you can put
your rating so if you got 10 out of 5
rating from your client you can display
that any way so if it's 8 let's keep it
8 so it will be shown on this way so
let's not keep the rating 5 and rating
scale let's keep it 0 to 5 and I want to
make this alignment sender and I want to
change the color so let's go to his tile
here's the color option instead of
yellow I want to put here our color and
pasting my color code all right and
underneath that I want to put this
clients name and his company name so
let's go to elements I want to take a
text editor area and I'm dragging and
dropping it under this tall rating now
let's say his name is James brick so I'm
writing here James brick and now hit
enter to make a line break now here I
want to put his company's name and I
want to make his company name bold so
I'm selecting his company name and here
is the bold icon click here to make it
bold and I want to make it centered so
let's go to his tiles here's the
alignment let's make it centered also I
don't want this much space in between
them so let's go to content let's remove
the break in between them so instead of
placing enter place shift in turn you
know this is the basic Microsoft Word
thing now I want to add some spacing
around these columns and clicking on
this column icon go to advanced and bind
the margin I want to have 10 pixels of
margin at the top and 10 pixel at the
margin at the bottom also I want some
padding inside so let's give it 15
pixels of padding inside now I want to
duplicate this column couple more time
right click here duplicate
right click here again duplicate and of
course I want to delete the empty
columns so right click here deleted
right click delete empty column now you
know how to change this images so just
click over on this image and from here
you can replace this image like this
select this one insert media click here
on this image choose another image from
here select this and insert media I'm
also changing the headings for really
quick now the last thing in this section
I want to add the some space at the top
so to do that let's click on this grab
icon of this section go to advanced and
I only want to add some padding at the
top so unbind it and top let's add ATT
pixel of padding at the top this area
looks really clean and professional at
the same time let's now create our next
section let's have a look on my
Photoshop design so we just have created
this clients testimonial area and
underneath that here is the logos the
companies we have worked for and we will
create a nice slider with that logos so
let's go back to our elemental page
builder now let's click on this plus
icon I want to have a single column
structure turn on this stitch section
now go to elements I'm looking for a
carousel so I'm searching for carousel
here is the image carousel I'm dragging
it and dropping inside the new section
so it says no image is selected so now
click on this + icon to upload all our
images let's go to upload files select
files now I want to go to the elemental
folder then inside the branch folder I
want to upload all so I'm selecting all
and click on open all the company logos
are uploaded and all are checked
so now let's click on create a new
gallery here you can order or reorder
the logos the way you want or you can
reverse the order now let's click on
insert gallery and on the left here is
the option for this carousel slider
here's the image size option so you can
select the size you want I want it to be
shown in full size so I'm selecting full
slides to show I'm selecting a 5 so at a
time there are 5 images at this
playing here here's the option for
slaves to scroll so if she's calling one
by one so I want to keep it default
images chase no I don't want it to be
chased now here you can see the arrows
and the dots I don't like the arrows in
this area so I want to make it only dots
so arrows are gone now on the dots are
displaying here links no caption no so
our clients - logo carousel area now I
only want to add some spacing at the top
and bottom so let's click on this grab
icon go to advanced unbind the padding I
want to add 10 pixel at the top and
bottom let's add 80 pixels of padding
all right
let's now create our next section let's
go to my Photoshop design now we will
create this section here we will talk
about our achievement our success as a
company with a nice number counter to
show how many projects we have done how
many hours we have gained so let's go
back to our elementary page builder now
to create this section we can click on
this plus icon and create that section
from scratch but instead of that I'm
showing you another way how quickly we
can do that by copying this whole
section because the both section have
lot of similarities I'm showing you how
easily you can do it so let's hover over
on this sections grab icon right-click
then click on duplicate so this whole
section is now duplicated underneath it
now put your mouse cursor on the grab
icon and drag it at the bottom of this
page like this not here we want to drag
it little more down so grab this and put
it here now in this section we want the
image on the right side and the other
information text on the left so just
grab the column icon and drag it to the
right it's instantly reversed now first
I want to replace this image to do that
too let's click on this column icon go
to Styles click over the background
image go to upload files select files go
to elemental for der inside the images
folder I want to pick this image or this
one now click on open
click on insert media our image is
replaced and here instead of 30 years of
experience I wanted to say get your
business right up there you can change
it that way you want then you can write
some tests about your business success
now here these image icons are fine but
after the image I want to add a nice
number counter so click over this image
box I don't want this title and
description so I'm keeping this blank
also the description let's make it blank
and here I want to put a counter so
let's go to elements I'm searching for
counter here's the counter let's drag it
underneath the image now here's the
options for counter so here's the
starting number 0 and ending number 100
you can change it the numbers you want
so it will be basically start from 0 and
animation goes until it hits your ending
number you can add a prefix or suffix
like if you don't want to say exactly
347 projects instead of you can say 300
plus projects so you can that plus icon
from here so I'm putting here plus so
this plus I can always be added as a
suffix of this number from here you can
change the animation duration you can
enable or disable the thousand separator
and here you can add title so here
instead of cool numbers I want to say
business advice is given over 30 years
the font is too big let's now go to
styles now here's the option for a
number typography click on the pen icon
you can increase or decrease the size I
want to keep it 54 close this open the
title option click on the typography I
want to make its font size to 12 pixel
and I also want to reduce the line
height because you see it's too much
let's make the line height to 1.4 also
this text color looks different so we
can adjust the text color from here I
want to use the same text color we're
using on this website so it's 7 a 7 a 7
a let us now delete the other two
columns I'm right-clicking here delete
right click here delete now I want to
duplicate this couple more times so
right click here
duplicate right-click here duplicate now
you can change the number separately and
images separately like here instead of
300 if you want to say 170 plus and here
instead of 300 plus you can say 15 plus
then you know you can change these
images as well like this select any
other icon image insert media like this
I'm also changing these two images for
really quick see how easily we have just
created a new section only by copying
another section that we have previously
made now let's create the last section
of our homepage let's go to my Photoshop
design scroll down now we will clear
this is a simple area we will of course
have different services page but in the
home page we also want to display some
of our popular services now let's go
back to our elemental page builder click
on this plus icon I want to select the
first structure turn on the sketch
section let's now add some space at the
top and the bottom first go to Advanced
unbind the padding I want to add a pixel
padding at the top and it pixel padding
at the bottom now let's copy the
subheading from any above area so right
click here copied scroll down inside
here right-click and paste now let's the
heading drag this heading and I wanted
to say popular services like other
heading I want to make it double XL
underneath that I want to add text
editor and also in this text I want to
add some margin at the right so go to
advanced and bind the margin make it in
percentage like above I want to add for
the 5% margin at the right now let's go
to elements drag an inner section
element inside it now click on the plus
icon I'm searching for image box
drag the image box inside of this column
I only want to use the image from the
image box not the title and description
so I'm removing this because I want to
add those using heading
and text element so let's go to elements
drag heading underneath the image I want
to make it hate for and alignment let's
make it centered and instead of a diode
heading text here let's say is a
financial consultancy service underneath
the heading I want to add text editor
also I want to make this text sender so
go to his style alignment make it sender
also let's give it some padding so go to
advanced and bind the padding I want to
give write padding 20 and left padding
20 pixels now let's select an image for
financial consultancy service click here
on the Left choose image upload files
select files go to elemental folder
let's go to images folder I'm selecting
a couple of the images click on open
click on insert media now here I want to
make this image with 100% so let's go to
style and here with let's make it 100
percent like this now I also want to add
some margin on this column so click on
this column icon go to advanced let's
add 20 pixel of margin around it and of
course service should have a
call-to-action button so I want to use a
gradient button here we already have
made gradient button in this page we can
use that so it's called up scroll up
here this battle wizard right click over
the pen icon click on copy now let's
scroll down to the services section
we're making here underneath the text
right click and click paste
see how easy it is so instead of click
here I wanted to say get coat here and I
want to link it to our Contact Us page
also I want to add some padding with
this button so let's go to advanced
instead of 5 I want to make it 20 at the
right and 20 at the left and I want to
add some margin at the bottom so 20
pixel margin at the bottom now the last
thing I want to do with this column I
want to add box shared with it so the
exact shadow we have used on the top
sections so let's click on the column
icon go to his tie
open the border box shadow let's make
the transparency 2.3 keep the horizontal
zero vertical zero make the blood 30 and
spread - 15 position outline all right
now let's copy this column couple more
time right click duplicate right-click
duplicate and let's delete the empty one
all right now you know how you can
change the image and this heading and
the paragraphs I'm changing those for
real quick all right if you now have a
close loop you can see a little bit is
pissing around the image I don't like
that it actually came with by default
with elemental column so if we want to
remove it - just click on the column
icon go to advanced just unbind the
padding the default padding is PC is
gone let's do the same with this - click
on the column go to advanced and
unmanned the padding also in the last
one advanced unbind the padding all
right now you can see as we have removed
the default padding this button has no
breathing space at the left and the
right so let's now click on the pen icon
of this button let's give it 20 pixel
margin at the right and 20 pixel margin
at the left let's do the same with these
two button as well now click update to
save the page and now click on the eye
icon to preview the page this is our top
banner it looks really cool then our top
three sections this one area looks cool
this one looks great I love this
testimonial area logo tells also working
really fine this area looks great with a
nice counter animation then the popular
services this area looks really really
clean and then here's the footer but
above this footer a global footer widget
will be added so after completing other
pages we will add that so not only
homepage that global footer will be
applied on all the pages and right now
we have not created the blog posts so
well we will finish our blog page then
here a cool-looking blog section will be
added as well like this one if you go to
photoshop design after the popular
he says this cool block section will be
added after treating the blog posts
otherwise we're done with our home page
now let's create our next pages really
quick alright so let's now create our
about Us page so first let's go back to
our WordPress dashboard from top left
click on dashboard from our dashboard go
to pages from here all pages we have
created our homepage and here is our
about Us page let's click here on edit
now from here click on edit with
elemental now let's go to Photoshop
design first to have a look what we're
going to make on our about Us page so we
will create our top static banner first
and after the banner we will create a
section with short summary text and a
team image so let's create these two
sections first now go back to our
elemental page builder now let's click
on this plus icon select the single
column structure and I want to make this
straight and I want to give it a minimum
height by default it's 400 400 is fine
for me and let's now go to this tile
let's give it a background click on a
classic one I want to add a background
image
let's choose image go to update files
select files go to elemental folder from
here background folder I want to select
this image open it click on insert media
now let's make the position to Center
Center attachment I want to keep it
default repeat no-repeat site I want to
make it cover and here I want to add a
heading so click on this plus icon drag
a heading inside here and I want it to
say our vision successful business let's
make the alignments endured and I want
to make this one size double XL also I
want to make it white let's go to style
click here on text color I want to make
it white alright our top banner is done
now let's create our next section let's
click on this plus icon this will be a
two column section so let's select this
structure
make it straight now let's have some
padding at the top and bottom unbind the
padding at the top I want to give it
eighty pixel and the bottom eighty pixel
then inside the right column I want to
put an image let's click on this plus
icon drag an image widget inside it now
let's choose damage click here we
already have that image so from media
library let's select this one now click
on insert media so here it is and let's
have a look on our design from Photoshop
so on the left there will be a
subheading main heading and some text so
now go back to elemental page builder we
don't need to recreate the subheading
here design again in this page we can
copy that from our home page so let's
now go back to our home page we learned
here so let's take a subheading maybe
this one hover over on eighth right
click copy it and let's now go back to
our about Us page inside the left column
right-click and paste it here so not
only on a single page we can copy paste
in between different pages isn't that
cool
now let's add our main heading go to
elements drag heading underneath the
subheading and I want it to say behind
the success let's make this one size to
double XL now let's go to elements I
want to add a text editor underneath the
main heading now let's add more text
here so it's looking like it but I want
to make this whole portion vertically
centered compared to the right image so
how can I do that let's click on this
column icon and here vertical align
let's make it middle so here's the top
banner underneath that a simple summary
about the team now I want to add another
section with nice sliding images so
let's now click on this plus icon select
the single structure I want to make it
strange and also content with I want to
make it full width and inside
this section I want to add a carousel
I'm searching for image carousel here it
is let's just drag it inside here let's
now add some images click on upload
files select files go to a limiter
folder and from here images I want to
add 8 to 10 images now click open
all images are uploaded now click on
create a new gallery here you know you
can order the order or you can reverse
the order now click insert gallery so
here it is let's now make the settings
here image size I want to make it full
slice to show I want to make it 4 slides
to scroll let's keep it default images
straight no navigation here in this
slider let's remove the dots let's keep
only arrows here so I'm selecting arrows
only so we can navigate through the
slider by clicking on the left and right
arrows awesome now let's create our next
section let's have a look on Photoshop
first here our scroll down we already
have made this slider and then scroll
down now let's create this cool team
member section so go back to elemental
page builder click on the plus to take a
new section make this section stretch on
go to advanced unbind the padding
because I want to add some padding at
the top 80 pixel and bottom 80 pixel now
let's copy a subheading from top here
over over on 8 right click here copy and
scroll down here inside this section
right click here and paste it now go to
elements drag a head inside let's make
the size double XL and I want it to say
our team then you may want to add some
text about your team so go back to
element or drag a text editor inside I'm
pissing some dummy text here also you
want to add some margin at the right so
let's go to advanced and bind the margin
and let's make it in percentage right
let's give it for the 5% all right now
we are going to add
team members images their name and a
short bio about them so let's take an
inner section first go to elements drag
an inner section inside here now click
on this + icon drag an image inside
click on choose image upload files
select files now let's go to elementary
folder here inside headshot folders
let's now add three images together
click on open for the first team member
I'm selecting this image now click on
insert media so here's the team member
image now let's take a text editor drag
the text editor and drop it underneath
the team members image alright now here
first I want to write his position so
he's the chief executive now let's hit
enter to give it a line break well his
name here and I want to make the name
bold and underlined so let's click here
on the bold icon and underline icon and
now hit enter to give it another line
break and then you can write a short bio
about that team member let's now go to
his tile I want to make the alignment
Center and let's now click on typography
I want to make the font size to 14 pixel
and let's make the text transform to
uppercase sometimes it looks cool to
write everything on uppercase all right
now click outside now let's go to
advanced yet I want to appear with the
margin because this margin will make
this simple looking area cooler
so first unbind the margin let's give it
some negative margin maybe minus 90
pixel but first we need to give it a
background color because we kind of see
the text properly so here go to
background and let's give it a classic
solid background white background all
right now let's go back to advanced here
you already gave it a negative 90 pixel
top margin also I want to add 20 pixel
right margin and 20 pixel margin on the
left and let's add some padding inside
maybe 20 pixels
it looks good now let's add some
box-shadow with it so click on border
here click on the box shadow edit icon
color let's make the transparency 2.3.3
is fine now let's keep the horizontal to
zero vertical lifts make it 15 let's
make the blur 30 and spread let's make
it minus 15 it looks really nice now
now let's duplicate this column couple
more times right click here duplicate
right click here duplicate and delete
the empty one right click delete this if
you have more team members you can
duplicate all this just only by hovering
over on it and right click then if you
click on duplicate this whole row will
be duplicated like this but for now I
want to keep only one row so let us now
delete this and I want to change other
team members images so to do that let's
click on the pen icon here choose item
choose image let's select another team
members image insert media now let's
change the third team members image
choose image and select another image
click on insert media and you know you
can change all this information
separately from here from the text
editor so I'm changing that as well
really quickly alright so team members
it is done let's now have a look on
Photoshop now we will be creating these
sections and you know we already have
created this section on the home page
and underneath that here is the logo
slider or logo Council this one section
we also created on the home page let's
now have a look how can we reuse the
sections that we already have created on
the home page let's now go back to
elemental editor so far we have done to
save it let's click on update now let's
go back to the editor of the home page
so we are going to use this section on
the about Us section as well so let's
see how easily we can do that we have
already seen we can copy and paste
anything from any page
to other page but to reuse it a complete
section there is a better way so Hoover
over on the grab icon of this section
right click here and here you'll find an
option says save as template so let's
click here you can save that specific
section as a template so you can use the
template on any other pages of your
website so let's now name it service
overview now click on save it's saved
now close this now let's go back to
about a spacious editor but to get the
template you need to refresh this page
first some refreshing this page now
scroll down scroll down underneath this
section now as we are going to add the
template we will not click on this +
icon in this time we will click on this
folder icon and from here go to my
templates here you can see service
overview that we just have saved from
here let's click on insert we're doing
everything by ourselves let's click on
yes so here it is now to save it click
on update because underneath that we
also use another section from home page
so let's go back to home page scroll
down scroll down yep this section we
want to save this section as another
template so right click here click on
save as template we can name it clients
logo slider click on save close this now
let's go back to our borders page editor
now you may remember to get the template
first we need to refresh the page so
refresh the page now scroll down scroll
down now here click on the folder icon
go to my templates and here you can see
clients logo slider now click on insert
click yes here it is now click on update
to save it so about Us page is done to
have a look let's click on this eye icon
to preview it so here is our
banner yet is our team member summary
underneath that a really cool-looking
slider then here is a beautiful our team
section underneath that here is the
surfaces overview and then the clients
logo carousel and there is the footer so
we have made our about Us page so fast
in the same way let's create our
services page so let's go back to our
WordPress dashboard go to pages to all
pages I'm searching for services page so
here it is services click on edit now
click on edit with Elementor alright so
before starting creating our services
page let's have a look on our Photoshop
design what we're going to make in this
page so at the top there will be a top
banner like we did on our about Us page
so we can reuse that as well then
underneath that here is a single service
option so here we can display all the
services we have we already have created
these on the home page so we can also
reuse it from our home page and then
underneath that here is the clients
global slider we can also use that from
home page underneath that here is the
trans testimonial area we can also use
that from our home page underneath that
here is the recent blogs we will create
this section a little bit little just
after treating our blog page and
underneath that we will create a contact
form so people can communicate with us
directly from our services page like at
the top of this page there are services
here and here is call-to-action buttons
with each services so when anyone click
on this call to action button that will
take users to the contact us form at the
bottom of this page as most of the thing
we already have created on our home page
and on our about Us page so let's now
create our services page really quickly
so let's go back to our element
builder before starting working on a
service space I want to go to the about
Us page this page builder area because
we want to reuse this so I want to save
this as a template so I'm hovering over
on this grab icon save as template and I
want to name it page top banner let's
save it and close it now let's go back
to our services page builder as we have
just created a page template from
another page so you know what we need to
do we need to refit the page first I'm
refreshing this page now here click on
this folder icon go to my templates and
from here page top banner let's insert
it click yes
so here is the top banner now I just
want to change the background image and
the text and the top so instead of our
vision successful business I wanted to
say services with a smile and I want to
change the background of it so let's go
to edit section go to is time click on
choose the image upload files select
files go to elementary folder
backgrounds let's select this image open
it click insert media our top banner is
done now let's click on update to save
it and as you see on the Photoshop
design underneath the top banner we will
have our services so it's on the home
page so let's now go to home page and
make it as a template so now I'm going
to the home page builder I'm searching
for the services area here it is so
let's save this whole section as a
template right click here click save as
template and we can name it all services
click on save now close this now let's
go back to our services page builder and
you know we need to refresh the page
first I'm refreshing this page now here
click on this folder icon go to my
templates and he
you can see all services now let's click
on insert yes
here you go but now here instead of
popular services as we are not only
displaying our popular services here we
will show our all services so instead of
popular it should say our services and
now here's three services but we may
have more services so let's not
duplicate this section as well right
click here click on duplicate so here is
more services added so like first one is
the financial consultancy their
solicitor the consultancy and the HR
consultancy then this one could be a
strategy consultancy like that I'm also
changing other consultancy services
title and images for really quick all
right so our our services area is done
let's now have a look on the Photoshop
design underneath that we'll have the
times local causal and we already save
the template from home page so let's do
that for real quick underneath this
section let's click on this template
icon or folder icon here is the template
for clients logo slider let's click on
insert
yes here it is now click on update to
save it and underneath this slider I
want to add clients testimonial because
Christ's testimonials are so important
on services page so we already created
that on our home page so let's go back
to our home page editor so here is the
Christ testimonial section let's make it
a template right click here save as
template we can name it testimonial now
save it close this now let's go back to
our services page editor now refresh the
page there's now scroll down underneath
here click on this template icon go to
my templates and here is the testimonial
template so let's click on insert yes
here we go see how easy
is to create a section once and to use
that multiple time on all of your pages
that's really insane now underneath this
section I want to create a contact form
so let's now create our contact from so
first create a section click on this
plus icon and for the contact from
section I want to take this layout or
this is structure so I'm selecting this
one I want to make this section is
straight and also I want to add some
padding at the top and bottom so unbind
it 80 pixel padding at the top and a
typical padding at the bottom and now
here inside the middle column I want to
put a contact form some here searching
for a contact form widget in this page I
will be using this contact from that's
provided by flock steam so I'm just
dragging it and dropping inside this
middle column just have a look how easy
it is you just drag this contact from
here and only you need to put your email
address here so this is the email
address where you want to get the email
received that means when any visitor of
your website fill out this form in which
email you want to get that email so I
want to get that email on my elemental
at Jim for digital calm in this image so
I'm putting that email address here you
will put your email address here for
sure so contact from is done but my main
reason is to put the contact from here
in this page is when people click on any
of this collection button they will
scroll down to this contact form and
contact with you immediately to do that
let's use one of the elementor's most
powerful or cool element so let's go to
elements I'm searching for anchor here
is the menu on car I'm driving this
anchor right above the
contact from here and for this anchor
here I need to put a ID a unique ID that
could be anything that could be your
cat's name no problem
I'm naming it contact 101 so I'm just
copying this ID because I need to use
this ID as a link of these
call-to-action buttons
so let's now click on the Edit icon of
this button and here you see link
currently it's linked to contact us page
but I want to link it with the contact
from at the bottom of this page and
before that name we need to put a hash
so let's now update the page and now
click on the eye icon to preview the
page so this is our services page this
is the top banner here is our all
services and underneath that here is the
slider with trans logo here's the trans
testimonial and here is our contact
phone I think we should put a title here
like get a code or something like that
because when people will click on this
get a code here button like this they
will be scroll down to this contact firm
as we have used anchor that's why it's
working in this way it's really cool for
now let's just add a heading right above
the contact form so let's go back to
element of page builder and now here I
wanted to add heading he so let's now go
to elements and drag a heading here
underneath the ankle
let's make it centered and I wanted to
say gate code also I want to add a
background image on this content from
section so to do that grab on the
section icon let's go to his tiles
ceiling background type classic and
choose a image go to upload files select
files go to elemental folder from
background let's select this image open
it click on insert media now let's
adjust the settings I want to make the
position sender Center attached
let's make it scrub that sexual default
one repeat make it no-repeat sighs I
want to make it cover this is a really
simple background but it makes this area
looks really cool update the page now
let's now click on the eye icon to
preview the page and let's check it this
get a code form is working fine so if we
click on a get a code here that is
called downs to our form awesome in this
page just one thing bothers me that is
if you have a closed loop all of the
buttons of our page is gradient but this
button here is not gradient because it
came default with phlox theme but no
worries after comparing other pages we
will make this button gradient as well
let's now create our contact page now
and then we will create our blog page
then we are done with our website now
let's go back to our WordPress dashboard
go to pages - all pages and I'm
searching for contact here is the
contact click on edit now let's click on
edit with Elementor so here's the
Elementor page builder let's create our
top banner first for the contact page
click on the template icon go to my team
place and from here here is the page
table banner click here insert yes so
now I want to change the heading I
wanted to say only contact and I want to
change the background grab icon now go
to his tile from here choose image
upload files select files and I'm going
to elemental folder from here inside
background let's select this image open
it click on insert media our contact
form come banner is done now I want to
create three column sections so let's
click on this plus icon and for this I
want to select this three column
structure let's make this column
straight now I want to give some padding
at the top and bottom I'm going on
advanced and bind the padding I want to
give it
50 pixel top padding and 50 pixel
padding at the bottom now inside the
first column I want to take an image box
I'm searching for image box here is the
image box here in the title I want it to
say address and in the description box I
want to put my address and here you can
see the space is huge so I want to
reduce the space so to do that I'm going
on is tile and here you will find the
option for this spacing let's click on
content and here's the option for title
spacing let's reduce it to make it 5
this space is now reduced and this title
let's go to content right now it's h3 I
want to make it more smaller so I'm
making it h4 now here in the image I
want to set an icon so let's click here
on the choose image let's have a look
inside our media library if we have any
icon let's select this one and click on
insert media alright now I want to give
this whole image box some padding and
margin so let's click on this pin icon
go to advanced I want to give it 10
pixel of margin all around and 20 pixels
of padding all inside of it and I also
want to add some box shadows so let's
click on border from here click on the
box shadow pen icon now color I want to
make the transparency like all other
point 3 keep the horizontal zero
vertical let's make it 5 and blur I want
to make it 30 and it spread let's make
it minus 15 all right it looks good now
duplicate this column a couple more time
duplicate right click on the column
duplicate and I want to delete the empty
columns right click delete right click
here did this one and the middle one
instead of address I wanted to say
call us and here I want to put my phone
number also I want to change the icons
so let's click on choose image and from
here let's select another icon and click
on insert media and now last one click
here instead of address
here I want to say email us and here I
want to put my email address that's
Elementor at Jim for digital calm all
right
this section is done and next I want to
create another section where on the Left
I want to display the Google map so
people get to know where we're located
and on the right side I want to put the
contact form you already know how to
create a contact form so let's just do
it quickly let's click on this plus icon
I want to take two column structure here
on the right column click on the plus
icon here I want to put them contact
form so I'm searching for contact form
here is the contact form let's drag it
inside here so here is our form and you
know here you need to give your email
address where you want to receive this
contact form email so I'm putting my
email address here and in the left
column I want to put google map so now
click on the plus icon and I'm searching
for a map so here's the Google map let's
drag this inside here and here you can
see location here I want to put my
location so this map is showing exactly
the correct location now here is the
option for zoom if you want to zoom more
so you can drag it to the right so map
will be more zoom in like it but I like
the default 10 the 10 zoom is a standard
so let's keep it 10 and I want to make
the height similar with the right column
so you can adjust that from here here is
the height so you can drag the height to
make it more longer I want to make it as
the same height like the right one so
I'm kidding it 540 pixel also if you
want you can make this map black and
white so to do that let's go to a style
and I want to make it normally black and
white and if people Hoover over on it it
will become colorful so how can I do
that so this is the normal map and this
is the hover effect we can add so from
here normal click on the CSS filter you
can see has the option for saturation
let's make the saturation to zero so you
can see it's no black and white and now
let's click on over here click on CSS
filters here
saturation is 100 so that means when you
hover over on it it become colorful and
also if you want to give it some
transition on hover you can do that from
here like after one second or after 0.7
second it will become colourful so
something like this it's black and white
and if you hover over on it it becomes
colourful after 0.7 seconds so we are
done with our contact page let's now
click on update now let's click on this
eye icon to preview the page so here is
our top banner here is our three section
with address collars and email us and
here is our Google map and on the right
our contact form all right so we are
almost done with our website so let's
now create our blog page and blog posts
so let's now go back to our WordPress
dashboard from top left click on
dashboard and before I start creating
blog page let's make sure from settings
to reading that we have set our post
page to our blog page like this and then
click Save Changes we already have done
that at the beginning of this tutorial
but I'm just double checking so now
let's go to pages from here let's go to
all pages and from here here is our blog
page let's now click on View from a new
tab so right now this is our blog page
you can see the URL at the top our a
limiter calm for our slash blog so this
is our blog page right now it looks ugly
I know but for now just have a look what
this page has right now so here you can
see the dummy post we have posted at the
beginning of this tutorial our awesome
first post and here is the short summary
of this post and if you now click on the
read mode it will take us to the single
blog post page and on the right side you
can see a sidebar widget this sidebar
came by default we will replace that
with a nice recent post sidebar so at
this moment this is our blog page and if
we click on read mode we will go to the
single blog post page so if you have a
look on the URL you can see our
Elementor calm /our or some first post
so this is the single blog post page you
can see the full blog post
here also the sidebar on the right and
at the bottom here is the comment option
so this is a single blog post page so
let's first create some blog post we can
do that from here top bar new then if
you click on post efinitely at a new
post but let's do it from our dashboard
so let's close this one here is our
WordPress dashboard from here post click
on all posts so this one is the dummy
post we made at the beginning of this
tutorial I want to delete this one so
let's click on trash that dummy post is
gone so let's now create our new blog
post so at the top click on add new so
from here we will be posting our blog
posts here we will give our post title
and here is the description of the post
but before posting a blog post I want to
show you something what is a blog
I mean how a standard blog look like so
let's now have a look on medium.com blog
if you don't know about medium.com it's
one of the world's biggest blog website
so if you have a look on their blog you
can see it's very minimal simple clean
and easy to read and a blog should look
like this if you have a look you can see
here a heading and an image then more
taste some links some bold text like
that then here another image more text
because we need to keep our blog post
page as clean as possible what's the
purpose of a blog post people will come
to your blog and they want to read
something from your blog so our purpose
should be make it more clean and make it
easy to read so let's now create our
first blog post let's add a title so
this blog post is about economy so I
want to name the title how is the
economy and then here you can write your
blog post we all are familiar with this
kind of visual page builder this is
nothing different than Microsoft world
so I'm showing you how easily you can
post your blog post from this visual
builder so first I'm pasting a dummy
text here so you can write everything
inside this visual builder then if you
want to make anything bold you can just
select that and click on the bold icon
at the top then if you want to make
link inside just select this and click
on this link icon then you can put in a
link like I'm putting my link my website
link that HTTP is thrown forward slash
forward slash Jim for the digital calm
and to apply it click here apply you can
also change any text colors like if you
want to change this text color just go
here text color you can make this one
color light dark green like this if you
want to make any paragraph into code so
let's just select all this paragraph and
click on this code icon this will be
coated inside the blog post even if you
want to make anything heading one or
heading two heading three you can do
that you can select the text and go at
the top here hitting so it's now hitting
4 you can make it hitting 3 or make it
heading 2 like that I want to keep it
heading 4 also if you want to add an
image inside of this blog post you can
add any image like after this paragraph
if you want to add an image so just hit
enter so I want to add an image at this
place so let's now click on add media
and select the image you want to insert
into the post
let's now insert this image and click on
insert into post so here's the image you
can also customize this image just click
on this image you can make this image
right aligned by clicking here you can
make it left aligned or you can make it
centered even you can make this image
more bigger just by dragging it like
this or you can make it smaller
dragging inside like this so it's super
easy so within this visual builder he
will be writing your blog post and here
is our blog post title and if you have a
close look you'll see there is a
permalink automatically generated
there's our element or chrome forward
slash how is the economy so it will be
the link for this specific blog post now
have a look on the right side here is
the form eights standard form it aside
format gallery format we will always be
using the standard format but if you
want to display your post thumbnail as a
video or code you can use other formats
let's keep the
is standard and then you can create
category of your post like this one is a
post about economy so you can create a
category for that to do that click on
this add new category I want to name
this category to economy then click on
add new category you can create multiple
categories from here like I'm creating
some business online market small
business but I only want to take the
economy category for this blog post so
I'm unchecking this maybe I will be use
other categories on other blog post
pages and then you can add tags of your
blog post and here is the template
option I want to keep the default
template and hence the option for
featured image so which image you want
to use as the featured image of this
blog post or I can say it as a thumbnail
of your blog post so let's click on set
featured image let's select this image
and click set featured image now when
you are done with all this you can click
the publish button to publish it
immediately or even if you want to
publish it a week later or one month
later you can schedule that as well to
do that you can click here on edit and
you can see the future date and then set
it to okay but I want to publish it
immediately so I'm clicking here on the
publish button now let's have a look how
our single blog post page is looking I'm
opening it from a new tab so this is our
single blog page looking like here is
the thumbnail here is the title here is
the publishing date author name and
here's the blog post you see has the
image and here's the course we have made
then scroll down and here is the option
for commenting and here at the top right
we can see the sidebar here so let's now
customize our single blog post page to
customize it click on the top here
customize so here's the customizer from
left click on blog now go to single post
here you will find the option if you
don't want to display the right sidebar
you can hide that so you can select this
position no sidebar if you want to have
this
but on the left select this one but I
want to keep the sidebar on the right
then here you will find more displaying
option here you can set the default site
with a customer if you want to make it
narrower you can select 1000 pixel but I
want to set it default then you can
change the content style from here like
this so it will be narrower but I want
the default one and then here you can
see an option display content top margin
if you have a look here is a top margin
so if you don't want that disable this
option so that top margin is gone and
also in the single blog post page I
don't want to display the thumbnail so
to disable that I'm clicking here
display post media I'm disabling this
one I want to display that some nail on
the blog page but not on single blog
post page now here you'll find more
options like if you don't want to
display the post date or author name you
can show or hide that from here then
scroll down you can enable or disable
the text section like we haven't set any
tag but if you send any tag you can
enable or disable the tag section from
here and by default here's the display
of your section is disabled we can
enable it so let's enable this one so
here you can see my picture and name has
an author of this blog post and then
scroll down from her skill options you
can set a skill for previous post and
next post we only have one post right
now when we will have multiple posts in
that time you can see the next and
previous post to navigator icons here so
you can set that is kin options from
here so you can set all these options
from the left bar now let's go back and
click here single post title you can
enable this play title bar section from
here or if you want to change the title
alignment like this once interred you
can do that from here but I want it to
be aligned in left some keeping it the
default settings so when we are done
with our settings let's click on publish
and close this and if you know owner
from where this sidebar widget is coming
from and how you can change that we can
change that from our WordPress dashboard
so let's go back to our wordpress
dashboard let's go to here appearance
from there click on widgets
so water widgets actually you see we're
using plugins into our WordPress website
so plugins are like extra feature of
your website widgets are also extra
features of your website like on the
single blog post page you can see the
sidebar here here's the search console
and here's the recent post recent
comments archives categories so these
are coming from the widget if we go to
the widget here you can see global
primary widget area and here you can see
the search recent post recent comments
all these things so all these are coming
from this widget but this looks ugly I
don't want to display these so to remove
these go to widgets and I want to delete
all this one by one let's delete this
one also delete this delete this this
one also this one so I've delete all
this if we now go to our single blog
post page and we refresh we cannot see
anything because we have deleted all the
widgets from here global primary widget
area so we can add any kind of widgets
inside this widget area like these are
the default widgets what please give us
like you see here is the calendar so if
you want to set the calendar here on the
right of the single blog post page we
can do that like if you click on the
calendar and have a close look this
one's name is global primary widget area
so let's select the calendar and check
the global primary widget area for
calendar and click on add widget here
you can see the calendar is added inside
the global primary widget area let's now
click on done and now go to our single
blog post page and refresh the page now
you can see the calendar here but I
don't want calendar either I'm just
showing you how widget works I want to
display here recent posts with nice
thumbnail and for that we will be using
a plug-in called recent posts with
thumbnail so let's go back to our
WordPress dashboard let's go to plugins
click on add new and now
search for recent post so this is the
plugin recent posts wizard with some
nail you see 100k plus active
installations so of course this is a
good one let's click on install now and
click on activate now let's go to our
widgets from up here ins to widgets now
here from global primary widget area I
don't want calendar I want to delete
this one and we have just installed
recent post plug-in I'm searching that
one so here it is recent post with
thumbnail let's expand it and I want to
set it inside global primary widget area
let's click on add widget you see it's
added inside the global primary widget
area you can set a title here I want to
say it recent posts and here they give
us a multiple settings option like the
number of posts to show by default it's
five five is fine and there are more
options if you want you can customize
all these but the default settings is
fine for me
so let's now click on save now click
done now let's have a look on our single
blog post page and now refresh the page
now have a look on the right side here
you can see recent post and here is a
recent post how's the economy with the
thumbnail so we only have posted one
post so that's why we only can see this
one when we will have tons of posts into
our website then the most recent five
posts who will be shown here with the
nice thumbnail so let's now go back to
our WordPress dashboard let's go to post
to all post now I want to add a few more
post you already know how to create a
post so I don't want to make you bore so
I'm now creating couple more posts I'm
fast-forwarding the video
all right I have posted a couple more
blog posts so if we now go to all posts
we can see all the posts I have just
created so here you can see the author
name here you can see the category and
here's the publishing date and if you
want to eat it your post like if I want
to edit this post I can click here on
this edit and then if I want to update
anything like this I want to make it
bold or if you did any typos you can fix
all this and then you can click on
update I believe you are now all clear
how to create a new post and how to edit
that and how to delete that so we have
created our single blog post page now
refresh the page we can see all the
recent posts here now see here we can
see the five recent posts we made so
this is the single blog post page what
about the main blog page so let's click
on the blog page so this is our blog
page looks like at this moment here is a
big banner at the top and here is always
in post with thumbnail it looks okay but
I want to customize it to make it look
more clean so to customize it let's
click here on the customize button at
the top from there now click on blog we
have customized our single blog post
page through this single post and the
single post title now we want to
customize our blog page not single blog
page so to customize our blog page click
here on blog page so we can customize
our blog page from here if we scroll
down you can see the blog post in this
way but I don't want to show them in
this way we can select other template
from here if we select this one our blog
posts are showing in this way now let's
select this one this one looks more
clean and also I don't want the recent
post widget on the blog page but on the
single blog page so I want to remove
this from main blog page so to disable
that let's scroll down scroll down here
is the option if we don't want that
sidebar we can select this option so our
sidebar is gone it looks much cleaner
now also here instead of read more if
you want to say any other thing you can
change the lift
here but read more is fine here's the
option for block content length you can
make it summary so now it only displays
the summary and when you click on the
read mode that will take us to the
single blog post page now if we scroll
up here you can see the top big banner
but I don't want to display this one on
our blog page so how can I remove that
let's go back now let's go to blog
slider now by default display slider is
enabled but I want to disable it so that
top banner is gone and our page looks so
much cleaner now now let's click on
publish to save it and close this so
this is our blog page right now looking
like but we can see all the blog posts
here I only want to display four posts
and then I want to display the
navigation bar so to do that lets go to
our WordPress dashboard now from
settings let's go to reading and you can
see by default blog pages shows at most
here is the tin but I want to make it
four
you can make it W 1 2 4 5 10 or even
more 20 as you wish but for
demonstration purpose as we don't have
tons of posts right now so I'm selecting
4 and now let's click on Save Changes
let's now go back to our blog page and
refresh the page now if we scroll down
we can see 1 2 3 & 4 for blog posts and
then the navigation bar if you click on
2 we will go to the next page and we can
see other blocks from there so our blog
page is looking so clean and working
perfectly and from here if you now click
on read more or the title we will go to
the single blog post page so here's the
single blog post page on the right bar
recent posts and if he scroll down you
can see the next and previous option so
people can go to the previous post by
clicking here and they can go to the
next post by clicking here also people
can make comments from the comment box
alright so now we have full functioning
blog inside our website as well now
let's go to
homepage so here is our beautiful home
page with all the sections plans
testimonial services overview and the
last thing I want to add into our
website is a global footer so I will add
a global footer here so that will be
displaying on all other pages like our
Instagram feed recent posts that kind of
all thing so let's do it now let's click
on customize at the top here now I
scroll down we want to put our global
subtotal here in this place
so let's now click on footer now let's
click sub footer
now let's enable the display sub footer
now from here you can select sub put a
layout you can add here three column
layout or full column layout I want to
add three widget inside it so I'm
selecting this three column and here you
can set the background color for sub
footer
so now let's click on this color picker
and I want to give it a color that's
f3f3f3
now click on apply now let's go back go
back now let's click on widgets as we
have selected three columns so here we
get three widget options so let's now go
first into sub footer first widget area
click add a widget and I want to have a
text within the first click on text so
here on the left our widget will be
appeared so I want to name it quick
contact and then inside visual editor I
want to say something like feel free to
contact with us it will be our pleasure
to be part of your success you can write
your own words now let's click on enter
here first I want to put my phone number
so I'm typing my phone number here and
if you want to make your phone number
clickable so just select your phone
number and click on this link icon to
take the code you can go to Jim for
digital comm forward slash one to four I
will put the link in the description and
here in this page you can see clickable
phone number let's copy this link and go
to our customizer paste the code here
basically it says tail :
your phone number so here is my phone
number
click on apply now press shift enter I
want to put my email address also I want
to make my email address clickable I'm
just selecting my email address click
the link icon then again you can go to
website here you will find clickable
email you can copy the sleep in from
here go back to customizer and you can
paste that inside here it's basically
male 2 :
then your email address hit enter so if
now anyone click on this phone number
they can make directly call from their
mobile phone and by clicking on your
email and race anyone can email you
directly
now press shift in turn I want to put my
website address I also want to link it
to my website now let's click on this
link icon and you don't need any special
snippet just put your website URL here
so I'm putting mine now click on apply
now instead of shift in turn I'm
pressing enter to make a line break and
here I want to add a map image let's go
to upload files select files inside
elemental folder here is a dummy map
image open it let's click insert into
post you can put your real map image
here I'm just putting a dummy image only
to show you let's now click on done and
click on publish to save it and then
inside the second column I want to show
my Instagram feed so for that we need to
install a plug-in first so for now close
this go to our wordpress dashboard from
plugins click on add new I'm searching
for a plug-in
it says Instagram feed by wpzoom so this
one let's click on install now
now click activate so our plugin is
activated let's now go to setting here
wpzoom Instagram widget click here on
settings don't get scared with these
settings it's super easy you just need
to connect it with your Instagram so I'm
right clicking here and opening from a
new tab now it's asking is my Instagram
or not yup this is
jeally script is my Instagram handle let
us now click on continuous J script and
here you can see an access token and we
need this access token to display our
Instagram feed into our website so let's
just copy this token go back to our
settings and now paste the access token
inside here now let's keep list of the
settings default click on Save Changes
alright now go to our front-end so we
want to display that in the middle
column here so let's now click on
customize now go to widgets this time
sub footer second area widget click add
a widget and I'm here searching for
Instagram oops
Instagram widget by wpzoom select this
one and here we go so we can perfectly
see my Instagram feed here also here
instead of Instagram we can say it like
follow us and also here you have
multiple customization option like
instead of nine I want to display 12
images hello I want to show for all
right you can also put a specific pixel
to resize the image width but I'm fine
with default one now let's scroll down
here you can see a button says view on
Instagram so if any one click here they
will go to your Instagram but I don't
want to display that some unchecking
that the button is gone let's now click
on done now go back now clicks a footer
third widget area add a widget and here
I want to add recent posts with some
nails this one click here I want to name
8 recent posts and here we can see 5
posts but in the footer I only want to
display 3 some changing it to 3 now here
3 recent posts are showing with nice
thumbnail I like it now let's scroll
down
I'm good with other default settings if
you want you can change the thumbnail
width and height from here but I'm good
now let's click on done now click on
publish now close this now if we scroll
down to the footer here we can see our
subfolder nicely so not only home page
if we now go to our about Us page scroll
down to the bottom of this page here we
can also see that so we can see all
these widgets on all the pages and here
at the very bottom our copyright text is
left-aligned i want to make it centered
so let's click on customize again you
scroll down so I want to make this
endured to do that let's go to footer
again go to footer and from here layout
select the centered one so copyright
text is now centered now click on
publish close the customizer now scroll
down it's centered we are almost done
with our website but you may remember we
wanted to add a blog section here on the
home page
after completing the blog so we have
completed our blog now we can add that
section so let's now click Edit with
Elementor now it scroll down here I want
to put that block section so let's first
click on this plus icon I want to select
a VC structure let's make the stretch
turn on I want to make it full width now
click on this plus icon and I'm
searching for a widget post so phlox
theme give us this beautiful tiles post
widget so I'm selecting this one and
dragging inside our section now here our
blog posts are showing nicely you have
now options for displaying the different
layouts I want to select this layout and
let's now go to content by default here
is 8 posts I want to make it 4 so it's
looking like this now and here I only
want to display the post title so let's
go to layouts and here click on display
display post info I'm turning it off
perfect and also I want to display it
only on
Desktop I want to hide it on tablet and
mobile devices how they do that let's go
to advanced scroll down here is
responsive click here so now hide on
tablet turn it on hide on mobile turn it
on so not only for this section if you
want to show or hide any specific
element on any specific device you can
always do that from advanced to
responses from here so let's now click
on update to save it all right now let's
have a look how you can add animations
into our page so if we now want to add
an animation into this heading we need
to click first on this pin icon so
that's the setting of this heading then
click on advanced and from there you can
see here motion effects click here here
you'll find different kind of options
you can select any of them from them
like you can see here is fade in effect
here is fading down effect then here is
zoom in effect so there are lots of
effect you can select any of them the
one you like I want to keep it zooming
up and there is the option for animation
duration so you can make it slower
normal or faster so if we make it slow
the animation will be coming up slowly
if we make it fast it will coming up
fast so I want to keep it normal and
here you can add animation delay if I
give it one thousand ms delay it will
come after one second I want to give it
five hundred so it will come after half
second so you can add these animations
into any level like you can add
animations into this elements level you
can add animations into column level so
now let's add animation into these three
columns so let's now click on this
column icon first let's go to advanced
now select motion effects in the first
column I want to add fade in left effect
let's keep the animation duration normal
now let's go to
second column advanced motion effects
let's give this fade in up select fading
up so it's coming nicely from bottom to
top
let's add some delay with it maybe half
second yep it looks nice now let's go to
our third column go to advanced motion
effects now let's give it fade in right
effect so it's coming from right side to
let it so to see that all this effects
together lives for now click on update
and now click on this eye icon to
preview the page so this title is coming
with this nice animation now scroll down
awesome
so left one is coming from left side and
right column is coming from right side
and as we add fading up effect on the
middle one column it's coming nicely
from bottom to top
altogether it makes a nice animation now
let's go back to our elemental page
builder let's have some more fun with
our animations let's go to next section
this one in this section I want to add
animations into each image box element
so let's click on this pen icon of this
image element from advanced go to motion
effects let us now add fade in up but
now let's have some fun with it
I want to make all of this fading up but
I want to make first one duration slower
then mid one and the third one I want to
make a duration fast so let's make the
first one animation duration to fast now
let's go to the second one go to motion
effects animation fading up let's keep
it normal and now let's go to third one
advanced motion effects animation fading
up but I want to make it slow let's do
the same with the bottom three click on
this pen icon go to advanced motion
effects make it fade in up make the
duration fast for the first one let's go
to second one
go to advanced motion effects make 8
fading up let's keep it normal and the
third one let's go to advanced motion
effects fading up and I want to make it
slow
now let's update it and have a look on
the live page on the right side so here
is the title animation here is these
three column animation and now if we
scroll down you can see the effect it's
coming nicely as we have made this
duration accordingly faster than normal
then slower now let's go back let's add
some more animations let's click on this
image box go to motion effects I want to
add it fade in right effect first one I
want to make it fast let's go to the
second one
fade in right let's keep it normal and
on the last one fade in right and I want
to make it slow now let's go to
testimonial area select the first column
go to advanced go to motion effects
let's make the left one fading left and
let's make the right column from
advanced motion effects let's make it
fade in right and now the middle column
go to advanced motion effects now let's
make it fade in up and add some delay
like 500ms all right now let's go to our
next section here this counter has its
own effect so if we add more defects
with it that will be too much effect and
that's also bad so I don't want to add
more animations with these counters so
let's go to the next section let's add
some animations with these columns so
let's select this column icon go to
advanced motion effects let's make all
these fading up but from left to right
make it first had to slower so let's
make it fade in up this one animation
duration first second one advanced
motion effects fading up keep it normal
and let's go to third one advanced
motion effects fading up and make this
one slower now you know how to add cool
effects into any element
in a column so you can now play with it
and make it more cool the way you want
so now let's click on update to save it
now let's make our page mobile
responsive because you know nowadays
most users visit websites through their
phone or tablets
so we must sure to make our website
responsive for all devices it's very
important so how can we take and update
the responsiveness for that we need to
click here on this button responsive
mode let's click here and first let's
have a look how it's looking on tablet
device so this is how it is looking on a
tablet device here is the logo here is
our menu and here is the sub menno's it
looks fine this header really looks fine
but we need to adjust the column widths
on tablet so let's now click on this
column icon we need to increase the
width of this column so let's make this
ones column width to 20% and the second
one let's click on this column icon and
make this one 20% or let's make it 25%
it looks good now and when we are
changing anything on tablet mode you can
see the icons here on the tablet icon so
after clicking responsive mode when we
came in this tablet and making changes
on anything that will be changed only on
tablet device the desktop setting will
remain same so you are now just
adjusting for tablet device so it makes
our life so easier all right now let's
go to the next section we need to fix
this section on tablet
so let's first go to this column the top
bar column we can make it 100% width so
here column width let's make it 100% all
right so let's do the same with this
click on the column let's make it 100%
also on the last one let's make this
column width to 100% and let's fix our
button I also want to make it 100
on tablet so let's click on column icon
let's make it with 100% also you know we
can just right click here copy this and
then right click here pista style and
right click here pista style so this
section now looks perfect on tablet
let's go to our next section this
section looks perfect on tablet this
section it looks also perfect this
section looks great and here's the
slider it looks okay now here is the
full width section and we need to adjust
the font size here on tablet so let's
click on this counter icon now go to
typography and you can see here the
tablet icon so you know already we're
changing it only for tablet devices it
all defect on desktop view so let's make
it 30 pixel or 32 now we can do it one
by one or we can just right-click here
copied and right click here click on
paste style also here right click paste
style easy now let's go to our next
section here it looks okay but we need
to fix these buttons
so let's now click on this edit icon
let's remove all the margins and padding
on this button from tablet so let's
unbind the margin and unbind the padding
I think we can add some margin at the
left and right so on margin right cliffs
at 10 pixel and margin left let's at 10
pixel it looks perfect now and you know
we can copy and paste this tile so right
click here copy and then right click
here pasty style right click here paste
style it looks perfect now let's go to
next section and here's the blog you may
remember we made this hide on tablet and
mobile device and that's why it's
already hidden from tablet device so
let's go to next section here is the
global footer widget it looks perfect on
tablet device now click here to go to
the top of the page now let's have a
look how this page looks on mobile
device so let's go to responsive mode
and click on mobile so
here's the mobile view when it had just
some so here is a logo here is a nice
hamburger icon if we click here the main
ones are showing this way it looks cool
click on the X to close the menu I think
on mobile this font size is too big
let's reduce the font size only for
mobile device so let's click on this
edit icon go to it style now let's go to
typography let's make this one from size
250 or let's skip it 45 or 46 and also
on mobile I want to reduce the margin
bottom from this title so let's go to
advanced and unbind the margin this
pacing is looking good now now I want to
make these two buttons centered so let's
now click on this edit icon and here
alignment for mobile here you can see
the mobile icon
so let's now make it centered also this
button make it centered all right now
let's scroll down this section looks
perfect on mobile device now scroll down
it looks really nice on mobile device
this section we need to reduce the
margin right for this paragraph so let's
now click on this edit icon go to
advanced and bind the margin now it
looks okay scroll down it looks perfect
it looks nice now I scroll down we need
to adjust this image so let's now click
on this edit icon you may remember on
this top we have added an empty spacer
here so on mobile device let's now
increase the spacer height so let's make
it 150 or 60 or more let's keep it 180
it's looking perfect
now I scroll down it looks nice perfect
now I scroll down this area looks
amazing on mobile device logo Carozza
looks perfect now our counter area looks
perfect on mobile device now let's fix
this spacer as well so let's click on
this edit hike
let's make this one 180 as well it's
looking perfect now scroll down let's
remove the margin right for this
paragraph click on edit icon go to
advanced and bind the margin it looks
perfect now our single services looks
amazing on mobile device my scroll down
we have made the blog area invisible
solid hidden we cannot see this area on
real mobile device now let's scroll down
have a look on footer widget this one
looks perfect Instagram feed looks
perfect and recent post perfect I'd
really love the mobile view of this page
now let's click on update to save it now
let's make our other pages responsive
really quickly now let's go to about Us
page and we are here at our about Us
page let's click on edit with Elementor
now let's go to responsive mode first
click on tablet view on tablet Habana
looks perfect the two columns section
looks perfect and then here's the slider
the slider looks perfect on tablet now
here is our team member area this area
looks perfect on tablet this area looks
perfect Carosa looks fine and global
average it looks perfect as well so
let's go and check the mobile
responsiveness so let's now click on
mobile it's okay but I think the font is
too big on the banner so we can reduce
the font size a little bit let's click
on this pen icon
there's go-to style typography on mobile
device let's make it 46
let's keep it for 6 pixel in mobile
let's now go to our next section this
area looks perfect it looks perfect
now here is our team section this looks
awesome I really like this section now
scroll down this area looks perfect now
scroll down is scroll down now here is
the global footer widget all looks
perfect
now let's go to our services page now
let's click on edit with Elementor from
responsive mode go to tablet for
banner looks perfect here is our
services we know how to fix this button
because we already fixed that on home
page so let's do it for really quick
click on the Edit icon go to advanced
and bind the margin let's add 10 pixel
at right 10 pixel at the left and 20
pixel at bottom so now just copy this
and paste it to all the buttons ISTE
style let's do the same with all buttons
all right now let's go to our next
section this carousel looks perfect
testimonial looks perfect on tablet
contact us form looks also perfect now
scroll down here's the global footer now
let's go to mobile device from
responsive mode click on mobile like the
about Us page let's reduce the font size
of the banner heading let's go to style
typography let's make it for a 6 pixel
now let's scroll down scroll down single
services looks perfect scroll down all
these testimonial looks perfect and here
is the contact form it looks amazing on
mobile device and here's the global
supporter now let's click here on update
to save it and let's go to our contact
page now click on edit with Elementor so
let's have a look how it looks our
contact page on tablet device click on
tablet Cabana looks perfect these three
column looks perfect and here is the map
and contact from it also looks perfect
and here's global footer it looks
perfect let us now go to mobile like
other pages let's reduce the font size
banners font size go to is title from
typography let's make it for a 6 pixel
now we scroll down on mobile device
these columns looks perfect here is the
Google map
and then here is your contact form we
can reduce the height of the google map
and mobile device so let's click on this
edit icon and this height we're reducing
it's only for mobile device so let's now
reduce the height let's keep it 300 on
mobile yeah it looks perfect now I
scroll down here is the global footer
widget perfect now let's click on update
to save it now you may remember we
wanted to change the button color on
this contact page and on our services
page because here in the services page
are all buttons our gradient but if we
scroll down to the bottom of this page
this button color is different along so
let's make this buttons color gradient
as well and we cannot do that using
elemental because this contact from Kim
with flux theme so we need to adjust
that using our customizer and we will be
using a little bit custom CSS for that
but don't worry I already have written
that CSS code for you so let's now just
click on this customizer now we scroll
down scroll down here we want to make
this button gradient so from left here
you can see additional CSS let's click
here on additional CSS we will be
writing a custom CSS here but I already
have written that for you so to get that
go to Jim for the digital calm forward
slash Elementor one to four you will
find that link on the description so
from there you can see here gradient
button CSS so I'm just copying it from
here right click copy let's go back to
our customizer and here inside this
panel right click and just paste it see
our but will become instantly gradient
exactly like the top buttons also it has
the hover effect as well now click on
publish to save it close our customizer
here in the services page button color
is no gradient also if you now go to our
Contact Us page and refresh the page now
if we scroll down here our bot
also become radiant awesome now let's
have a final look on all the pages we
have made first let's go to our home
page so here is the amazing pop banner
with nice animations top three sections
here is the services overview scroll
down here is our full width section
testimonial on carousel another fully
section with nice counter then popular
services here is the most recent blogs
are coming here is our global footer
widget and here is our footer this home
page looks amazing and I really love
this page now let's have a final look on
our about Us page pub banner theme
section here is the nice foolish slider
team members area here is the services
overview nice carousel and global footer
widget this page looks perfect let's go
to services page here is the top banner
all single services company logo
carousel testimonials get a code form
and also if we click any of this button
it is called downs to the data code form
now let's have a final look on our blog
page our blog page looks super clean
with the nice thumbnails and read more
buttons and here we have the paginations
now let's go to a single blog post click
on read more our single blog post page
is looking awesome with a nice the
recent posts with thumbnail sideburn it
looks so neat and clean for going to
previous and next post and here's the
option for commenting now let's go to
our Contact Us page banner looks great
here is the address call us and email us
options
google map and content from also looks
great and our all pages are responsive
for tablet and mobile devices
congratulations
we have successfully completed our web
site that's looking 100% professional
and responsive for all devices
now you can build any website following
this principle so this is it for now
if you have got some value out of this
tutorial please like this video and
subscribe to watch my upcoming more
awesome tutorials thanks for watching
bye bye
