[Complete Tutorial] How to Create a WordPress Website 2020 | Elementor Tutorial – Step by Step

[Complete Tutorial] How to Create a WordPress Website 2020 | Elementor Tutorial – Step by Step


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 [email protected] 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 [email protected] 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

6 thoughts on “[Complete Tutorial] How to Create a WordPress Website 2020 | Elementor Tutorial – Step by Step

  1. Download All the IMAGES used on this tutorial for FREE –> https://jimfahaddigital.com/elementor124/ ??
    And, If you have any question(s), feel free to ask in the comment section. I'll try my best to help you personally!

  2. Finally i found real thing from real experienced developer. step by step elementor doing way with really cool design, thanks a lot. you are giving real value. waiting for more.

  3. Hey Bro 🙂 You did it very well – a really awesome tut for fast creating a modern and really cool looking website with wordpress/phlox/elementor 🙂 You are a new star born on the sky of webdesign teacher. Please give us more such amazing stuff ! Thank You Bro

Leave a Reply

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