hello friends I'm Nash a crumb doctor
common today in this rail show you how
to create a professional digital goods
ecommerce website for free to create
this website we'll be using a free theme
free page builder and all free plugins
now first of all what is a digital
product so a digital product is
something that is stored delivered and
used in its electronic format digital
goods are shipped electronically to the
consumer through email or download from
the internet example of digital goods
include ebooks PDFs music files
software's digital images website
templates etc now digital goods
ecommerce website is a little bit
different from a regular ecommerce
website like if you see in a regular
ecommerce website I have an example over
here we have something like this we have
these different products let's open a
product in a regular e-commerce website
and this is our website that we'll be
creating in this video a digital
ecommerce website let's open a digital
product okay so in regular e-commerce
website as you can see we have the image
we have title price and we have some
details so here like you can increase
the number of products you want and you
can add this product to cart but here
that does not happen because if you
increase or decrease the number of the
product it does not make any difference
if you download the image at once or if
you download images thousand times it
does not make any difference you are
downloading this same content so that's
why we don't have this quantity option
second option is that if you click on
add to cart obviously this product will
be added to cart then you can click on
View cart you can do the checkout from
here but here that process is skipped
because you don't want to add this
product to cart which simply want to do
the checkout so if you click on this
purchase option you will be directly
redirected to the checkout option and
here also things are totally different
in the regular ecommerce website we need
person's address phone number and
everything so that we can ship this
physical product to the person but in
this digital ecommerce website we don't
need anyone's address because we are not
shipping any physical products so here a
person can simply enter their first name
last name email address and purchase
this product once they purchased the
product they can simply download the
product or if they want they can click
on my account
go to downloads and they will see all
the products that they have purchased
and they can download this from here so
this is how our digital ecommerce
website works now let me first show you
the demo of the website that we'll be
creating in this video so that you get
an idea about what is the website that
we'll be creating in this video so first
of all you have this home page on your
screen so this is our home page very
simple page as you can see at top we
have our header at the left hand side we
have this logo I'll show you how you can
create this logo for free you don't need
any premium software like Corel Draw or
Photoshop to create this thing I'll show
you how you can create this thing for
free online at the right hand side we
have this menu and we have this cart
icon after that we have our first
section so every website every single
page on every website is divided into
different sections so our first section
here we have our title download' best
digital products and after that we have
the subtitle and after that we have a
very important thing we have a search
bar because obviously it's a digital
ecommerce website whenever someone comes
to this website they might be searching
for something so they might be looking
for something so they can simply search
that thing from here and they will be
redirected to that page for example
let's search for product over here when
you search for product and press ENTER
you will see that this thing it will
show all the products that are named
product okay obviously so this is how it
works now after that we have our next
section here we have the recently added
products so these are the recently added
products on our website after that we
have the featured products so we'll see
how we can convert a regular product
into a featured product and we can
display that on our website on our
homepage then we have the blog section
so we'll also be seeing how to create a
blog page how to create different blogs
and how to render them on our website on
the front page then after that we have
the photo in footer we have four
different sections you know help and
information your basic information like
your address and your phone number and
everything after that we have Quick
Links so order link if someone wants to
directly go to downloads they can click
on downloads and they will be redirected
to the roundels page if they have lost
their password they can click on lost
password and they can get back their
password and we have some card options
over here so we are accepting master Oh
master Visa rupee all these things on
our website
then in the last column or in the last
section we have the contact information
then obviously at the bottom we have the
copyright text so this was our home page
now you also have a shop page as you can
see when you click on shop it will
display the shop page so this is how
your shop page will look like you know
we have the same header after that we
have the title and here this is the main
content at the left hand side we have
some really useful widgets like again if
someone wants to search for some product
in the shop page they can search that
product if they want to see only mp3
they can click on mp3 now it will show
only mp3s if this want to see only apps
they can click on apps and they will see
only apps if they want to see only PDFs
they can do that as well now here they
can also filter product by price now if
they want to see product from a
particular price to that they can select
that price and click on filter after
that we have the top rated products so
top rated products on our website then
we have product categories so this is
how your shop page looks like now let's
see how the block page looks like so
let's click on blog now this is our
block page so as you can see this looks
amazing at the left-hand side we have
the main content we have our blogs there
are many different styles of displaying
a blog this is according to me the best
one so at the left hand side you have
the blog first we have the featured
image then at the right hand side we
have some you know basic things like
your title some exert if there is some
comment you can see that what is the
date and everything you can see all this
information so similarly you will see
all your blocks and at the right hand
side we have a sidebar so recent post or
recent blog followers on different
social media platforms we have
integrated Instagram over here and we
have also integrated our Facebook page
so I'll show you how we can do these
things now to make this website complete
I have also included few other pages
like the about page okay so as you can
see this is how the about page looks
like and also the contact page and also
there is a link given in the video
description below when you click on that
link you can download all the images
that I have used on this website so you
can simply download all the images that
I have used on this website to create
this website for free so you have some
dummy images to work with all right yes
so this was a very short demo of the
website that we'll be creating in this
video now the reason I show this demo at
the beginning is that you guys can
understand
and what is the website that you're
creating in this video you can make the
decision whether they want to watch the
complete video or not so this was the
demo website I hope you guys like the
demo website if you wanna create the
exact same website make sure to watch
the complete tutorial now because these
tutorials are a little bit lengthier
they are a little bit bigger so what I
do is I always cue you know time stamps
in the video description below so you
can click on that time stamp you can
jump to different sections but I would
highly recommend you to come watch the
complete video don't skip any section
that would be better for you or against
now before proceeding further make sure
you guys subscribe and click on the
bells so that you don't miss any future
notifications whenever I upload a new
video you can get a notification of that
if you find this video helpful give a
thumbs up to this video if you have any
doubt any comments any suggestions for
me you can leave them in the comment
section below
a very important thing I would highly
recommend you to please share this video
on Twitter and Facebook that is very
important for me so if you share this
video on Twitter and Facebook I would
really really appreciate that alright
guys now let's get into the video let's
start creating this website alright guys
now to create any kind of website
whether it be a digital products
e-commerce website in a regular
e-commerce website may be a simple
business website or membership website
any kind of website we need two basic
things a domain name and a hosting
account so a domain name is simply the
name or the URL of your website for
example block to com
nya shake calm you know we have
google.com youtube.com all these things
are different domain names so we also
have to register a domain name on the
internet so that whenever someone wants
to visit your website they can enter
that domain name and they can land on
your website and the second and the most
important thing that we need is a
hosting so hosting is a place where in
all your website data is hosted
basically it's a computer in which all
your website data all your website file
is stored so whenever someone visits
your website your website fetches those
data from that hosting and it displays
on the browser so all these images that
you see on your screen all these images
all these pages all these different
products this entire website is hosted
in a computer and that computer is
running 24/7 so whenever someone visits
your website from any particular place
at any given time
they can see your website life because
obviously that computer is always
running now selecting a good hosting is
very very important because everything
of your website is directly or
indirectly dependent on your hosting for
example your website speed your website
performance your website security
everything is directly related to
hosting if you select a good hosting
your website speed will be higher your
website page will take very less time to
load so anyway someone enters your URL
and press Enter
your website will load very fast it will
display very fast if you have a good
hosting if you don't have a good hosting
your website speed will be very bad and
ultimately your user experience on the
website will be very bad now when your
website speed is bad when your website
speed is slow you will find it very
difficult to rank on Google so Google
does not rank those websites higher if
your website is slow if your website is
taking too much time to load so it's a
very important thing but you don't have
to worry about that because I'll show
you the best hosting that is present in
the market at the best available price
and that is the hosting that I am
personally using on my main website
blocked or calm so you can simply open a
new tab and type in blocked or calm /s G
now SG obviously stands for site ground
so this link is also given in the video
description below you can simply click
on that link and you will be redirected
to this page this is a discount site
ground link we have to select this
option reliable web hosting and click on
get started now as you can see here we
have three different plans start up grow
big and go gig now as I said you all
your site ground is at present the best
hosting available in the market this is
according to my experience because I
create this WordPress tutorials on
YouTube I get offers from almost every
single hosting company they give me
hosting for free and I can try that if I
like it I can recommend that so I have
tried many different Hosting's I have
used many different Hosting's like
Hostgator Bluehost - DMD hosting site
ground a - hosting many many different
hosting companies I have tried and
according to my experience at present
site ground is the best and fastest
hosting provider and that is the main
reason why I am using side ground on my
main website block - comm and also
nyesha com
or I guess now there are three different
plans for Europe basically you can just
select any plan and you can still create
this same exact same website but it is
very important to understand the
difference between these three plans the
main difference between these three
plans is the number of websites you can
host so in start a plan you can just
host one website where as in grow big
and go geek plan you can host unlimited
websites which means that today you're
creating this digital ecommerce website
tomorrow if you want to create some
other kind of website maybe another
digital e-commerce website maybe another
ecommerce website any kind of website
you don't have to purchase the hosting
again you can host unlimited number of
websites in one single hosting so you
can host 10 20 50 hundred different
websites in one single hosting plan so
it is very important to understand this
thing so I would recommend you to select
either grow big or go geek because they
offer unlimited websites now the second
thing is 20gb web space so in grow big
plan you get 20 gb web space in go geek
plan you get 30 gb web space now 20 gb
web space is more than enough if you
want to create a website like this
digital e-commerce website and if even
if you have hundred thousand plus
different products on your website
one lakh plus products on your website
you can still create this website it
will hardly be 2 3 4 gb nothing more
than that so even if you have around
100,000 products on a website it will be
nothing more than 3 or 4 GB so you can
understand how this works and also the
main important thing over here is that
it is SSD space now there are many
different hosting companies in the
market and most of them use HDD space
now HDD is very slow very laggy and if
your website is hosted on a HDD server
your website speed will be very slow but
here on site ground they are using the
best quality the latest generation SST
space SSDs way more faster than the
regular HDD so you can understand the
difference over here now third thing
over here is 25,000 monthly visits and
here in gugak i have around 100,000
monthly visits now this is for your
understanding this is just to give you
an idea about what plan or what hosting
plan is better for what kind of website
so this hosting plan go grow big is
better for those kind of websites which
has around 25,000
and 40,000 monthly visits now it does
not mean that if your website has 25,000
visits and if your website is now
getting maybe 40,000 visits you'll have
to upgrade there's nothing like that it
is just for your understanding you can
understand which plan is better for what
kind of website I am personally using
the go geek plan and here you also get
some essential features like you get
free SSL certificate which is very
important if you don't have an SSL
certificate you cannot accept payment on
your website so that is a problem if you
are creating an e-commerce website
you must have an SSL certificate and
this log pad that you see on your screen
on your URL bar this is the SSL
certificate it says that your connection
is secure so you can install SSL
certificates on unlimited number of
domains and subdomains we also get free
unlimited business email accounts which
means that instead of something like
Nayar at gmail.com you can create Nayar
at your website name com email address
and very important thing you also get
free CloudFlare CDN very important thing
this will improve your website's
security and also somewhat your website
speed we also get free daily backups so
you will be getting free daily backups
even if something happens to your
website you have the backup you can
simply restore your website and
everything will be normal then we have
24/7 support now this is very important
support is very important thing on a
hosting because you know what websites
and everything these things are
technical things so if you have some
problem you must have a very good
support team that you can that can
support you to solve that problem so
side ground has the best support team
that I have experienced okay they have
24/7 support and whenever you raise a
ticket they are very quick to respond to
your ticket so important thing as well
now you can simply select any one of
these three plans and you can proceed
further now for most of you guys I would
recommend you to start with grow week
plan so select this plan and click on
get plan now here we have to register a
new domain so if you have not already
registered a domain you can do that from
here so simply type in the domain name
that you want to register so I'll simply
type in there your shake and after that
you can select the domain name extension
so we have some popular one like com
dotnet
dot or dot info we have some countries
specific like dot in dot MX dot net dot
a T dot B e dot Co and we have some
generic as well like dot online dot blog
dot shop so he can simply type in the
domain name and select the perfect
extension for your domain name and click
on proceed now if you have already
registered a domain name somewhere else
like on GoDaddy Namecheap Google domains
anywhere you can select this option I
already have a domain name enter the
domain name that you have registered
somewhere else and click on proceed now
here you have to enter some basic
information first of all we have to
enter the account information so in
account information you have to enter
your email address and you have to
choose a password and obviously under
confirm password you have to enter the
same password now this is very important
whatever you enter under account
information this will become your login
credentials so whenever you want to log
into your site gramme cpanel you will be
asked this email address and password
that you'll be entering over here so
make sure whatever you enter and our
email address and password you remember
that you write it down somewhere then we
have some client information so your
basic information like your country name
first name last name now company name
and tax ID is not compulsory so we can
leave these two things blank then your
city name your city address street
address zip code and phone number after
that we have the payment information so
you simply have to enter your card
number card expiry date
CVV number which is given at the back of
your card and your card holder name now
three types of card are accepted over
your three types of cards are accepted
with you Visa MasterCard and American
Express now these are very common
especially Visa MasterCard are very
common throughout the world so most of
you guys must have these cards so you
can enter you even if you have a credit
card debit card your ATM card any kind
of card is accepted over here now if you
are from India in India we have a rupee
card which is a local cut or domestic
card so that card is accepted only
within India so outside India you cannot
you know make payment or you cannot
purchase anything with that card so here
that card is not accepted make sure you
have a Visa MasterCard if you have a
rupa card you can simply go in your bank
and you can ask you can exchange your
card for MasterCard or a visa then after
that we have
some purchase information so in purchase
information we don't have to change
anything very important make sure you
don't change anything just see whether
everything is right or not
so in plan we have selected the grow big
plan which is fine after that we have
data center location so data center
location for me it is Singapore and it
will be automatically selected for you
based on your IP address location it
will automatically select the data
center location period will always be 12
months make sure you don't change this
thing if you change it you will have to
pay some extra money so make sure 12
month is selected after that go at the
bottom pick mark these two things and
click on pay now
now before clicking on pay now you can
see the total amount is just $71 so for
one complete here you are getting the
complete hosting for just $71 in this
you can host unlimited number of domains
you can no installed unlimited free SSL
certificates and everything and side
down as I said you earlier is the best
hosting at present in the market even if
you select some medium type of hosting
medium level hosting you will have to
pay around $100 for the first year but
here you have to pay only $71 so this is
a really great option
so select wire everything and click on
pay now now once you make the payment
once you click on pay now you have to
come to this link you a dot sight ground
com and here you have to enter the email
address and password that you have
selected in your previous step under
account information so under account
information whatever email address and
password you have typed in you have to
type in the same email address and
password over here and click on sign in
and click on my accounts now you'll see
this page now click on go to cPanel now
as you can see this is a cPanel this is
how your cPanel will look like there are
many different options we don't have to
use all of them now first of all for
those people who have already registered
that domain on some other website like
good at your name cheap they have to do
two or one additional step very simple
step first of all go to your website
wherever you have registered your domain
name so if you have registered your
domain name on GoDaddy calm go to
godaddy.com and sign in to GoDaddy
obviously all right so when you sign in
you will see all the different domains
names that you have registered so
suppose I want to use pHEMT
in which side round so I can select this
domain I can click on DNS now we have to
change the DNS name servers of this
domain name so you have this thing oh yo
you have to click on change delete these
name servers come back to your cPanel at
the left hand side top left corner you
will see this name servers copy the name
server line one paste it under line one
copy the second name server and paste it
on line two and click on save so when
you click on save it will take around 20
for us to propagate this setting okay to
propagate this changes so you know it
might take some time normally does not
take that much it within one or two
hours everything should be fine for you
so when you do this setting you can come
back to your cPanel and refresh this
thing now we have to do the second thing
we have to add on domain so click on
add-on domain and enter that domain over
here so I'll enter FEM com suppose that
domain name was Famicom I'll enter
Famicom after that press tab when you
press tab on your keyboard as you can
see sub domain and document root are
already typed in now simply type in the
password and click on add domain once
you click on add domain your domain name
will be added as you can see at the
bottom you'll see your domain name in
this list now if you get some error like
you cannot add on your primary domain
you might get that error you cannot add
on your primary domain just leave this
thing it simply means that you don't
have to do this step you just have to
change the DNS name server you don't
have to add on a domain so just leave
that step if you get some error over
here now we have successfully linked
GoDaddy domain with site ground now what
we have to do is we have to do SSL
certificate so we have to install SSL
certificate on your domain name so this
is for everyone whether you have
registered domain name on site ground
just now or you have registered domain
name on some other website so to install
SSL certificate go back at the bottom
and you will see under security tablets
encrypt click on that option now go at
the bottom and you will see this option
so simply select the domain name on
which you want to install SSL now click
on install once you click on install SSL
will be installed on your domain name
and you should see your domain name in
this list now
takes around four to five minutes for
SSL to get installed on your domain name
so if you don't see your domain name in
this list you can just refresh this page
and after that you know within four to
five minutes your domain name should
show on this list now again click on
this option cPanel home click on this
button you'll come back to your cPanel
now it's time to install WordPress on a
domain name so you'll see under author
installers we have WordPress click on
that now click on this blue install
button now from here you have to choose
the protocol so under protocol make sure
HTTPS is selected select the either the
third one or the fourth one don't select
the first or the second one select HTTPS
one so when you select HTTPS it will
install SSL certificate on your website
now after that we have to select the
domain name on which we want to install
WordPress so I'm selecting that domain
name
okay just select the protocols select
the domain name and leave this thing in
directory so indirectly whatever is
given over here make sure this thing is
blank this box or this thing is blank
don't type in anything over here after
that we have to give our website a name
and description so I will name my
website block dude and maybe best I'll
just give a description
alright so blog dude is the name inside
description best digital products
website ok so simply give any name and
describe your website in to three words
after that we have admin account so in
admin account you have to delete this
username and type in some personal
username that you will remember ok so I
am deleting this and I am typing in this
username
after that delete this password and
enter your own password and also make
sure to delete this email address and
enter your personal email address now
whatever username and password you type
you know here make sure to also remember
this thing because whenever you want to
log into your WordPress dashboard you
will be asked this username and password
now go at the bottom make sure this WP
starter is an ticked by default it is
ticked just UNTAC this thing and click
on Install Now WordPress is getting
installed on your domain name this
generally takes around 10 to 15 seconds
so let's wait
as you can see wordpress is successfully
installed on our domain name now we get
two links the first link is simply our
website link let's open that in a new
tab and the second link is our dashboard
link let's open that as well and let me
cut this page now now as you can see
this is our website this is how your
website will look when you first install
WordPress
now we haven't done anything this is the
default look okay and the second link
that you have opened this is the
dashboard link very important link this
is the link or this is this page is the
page from where you will control your
website you can change your website's
design your website's appearance you can
add some functionality you can delete
some functionality whatever you want to
do you will be doing this from this page
so whenever you want to come to this
page you simply type in your website
name after that put a forward slash WP -
admin so it will be your website name
slash WP - admin and you will land on
this page now whenever we install
WordPress for the first time we have to
understand few basic things and we have
to do few basic settings first of all
from the left hand side will be going
through all these different options but
for now we will click on appearance
so in appearance as you can see one
theme is already installed 2019 theme
and theme is basically the design of
your website so as you can see this is
the 2019 theme and this is the design of
your website now if you want to change
the design of your website obviously you
can simply change the theme it will
ultimately change your website design so
this is what it is a theme is simply the
design of your website after that we
have plugins at the left hand side click
on plugins now one plug-in will be
already installed for USG optimizer this
will be installed for you only if you
are using side ground so this is a very
important plug in this you know improves
the website speed and performance and
that is exactly what a plug-in does a
plug-in does some extra functionalities
it adds some extra functionalities and
features to your website for example by
default we cannot create an e-commerce
website right now because we don't have
that functionality but we'll be using a
plug-in that will enable us to create
our e-commerce website that is the
WooCommerce plug-in now similarly if you
want to create a social network
like Facebook you have to install a
plug-in called buddypress and something
like that so if you have if you want to
learn how to create a website like
Facebook there is a video on my channel
so that is what a plug-in does it adds
some extra functionalities and features
to your website now from the left-hand
side click on settings now under
settings again make sure if you have not
already changed the website name and
description you can do it from here make
sure your email address is proper okay
if you are email add if there is some
other email address delete it and enter
your personal email address now under
membership tick mark this thing anyone
can register if you don't take mark this
thing no-one will be able to register or
create an account on your website and
that is a problem because we want people
to create account on our website so that
they can download whatever they have
purchased so make sure this thing is
tick mark at the bottom click on Save
Changes now under settings you will see
permalinks click on permalinks by
default DN name 1 is selected we have to
select the post name and click on Save
Changes now under discussion click on
discussion if you want people if you
want to enable comments on your website
like people can come and comment on your
website you can tick mark this thing
allow people to post comment on new
articles after that go at the bottom and
click on Save Changes now let's again
come back to our dashboard now there are
many things that you see on a dashboard
we don't need these things so I can
simply dismiss this and if you want to
delete these things from the dashboard
you can click on screen options and take
everything ok now later on we'll be
using some useful widgets so here when
we install WooCommerce we'll get some
widgets and we'll use those who are here
so that our dashboard looks clean and we
have only useful things over here or I
guess so we have done all the basic
things that we should do now let's start
creating the website so first of all
what I'll do is I'll install a theme
we'll be using a free theme so that we
can change the design of our website and
we can convert our website mean we can
make our website something amazing like
this one to change the theme simply
click on appearance click on add new now
search theme and simply search for ocean
WP now you'll get this theme ocean WP
simply click on install
so we just have to install this theme
once it is installed you will get this
option activate click on this activate
button now once you activate this thing
this will say this theme recommends
following plugins dismiss this notice
because we don't want that and we'll be
using those plugins don't worry but
we'll be using in a much better way now
because we have one theme over here we
don't need this one 2019 theme so we can
simply select this thing and delete it
all right now we should have only one
theme whatever theme you want to use use
that but make sure you have only one
theme installed and activated now let's
come back to our website and refresh it
now as you can see because we have
changed the theme our website design now
looks totally different so this is what
a theme does now let's install some
plugins so hover over plugins and click
on add new now under search plugins
again search for ocean WP so ocean WP is
basically a company's name a group name
or so it's kind of a start up so they
have developed this theme ocean WP theme
but they have also developed some free
plugins which are very useful so we'll
be using those plugins will be
installing those plugins first of all
the most important one is this ocean
extra so install this one after that we
have ocean sticky header install this so
that whenever you scroll down as you can
see your header stays with you okay if
you see this menu and logo when you
scroll down and scroll up stays with you
so that is what this plug-in does ocean
sticky ocean WP sticky header we have
ocean social sharing so if you open any
post you will see these social sharing
buttons okay as you can see at the
bottom so that is what this plug-in does
then we have ocean products sharing
which is over here so when you open any
product for example let's open this
product when you scroll down you have
this product sharing button so this is
what this plug-in does so these were
four important plugins we don't have to
activate this right now
we'll be activating all the plugins at
once now what you have to do is you have
to cut this thing now we need to install
elemento so the best way to install
Elementor so that you get the latest
version
to open a new tab and simply search for
block to.com slash Elementor now this
link is also given in the video
description below so again you don't
have to type in anything simply click on
that link and you should be redirected
to this page now as you can see here it
says some pricing and everything but
don't worry this plug-in is absolutely
free the reason we are getting this
pricing is that because this plugin is
also available in premium version and I
would highly highly recommend you to use
the premium version if you can afford
that I would highly recommend you to use
to give a try to this element of premium
version again let me clarify we will be
using the free version in this video but
I am saying if you can afford free $49
per year just go with the premium
version there are a lot of more features
more widgets more templates theme
builder we have WooCommerce builder
you'll really enjoy it so if you can
afford that make sure you purchase any
one of these plans if you want to use
the free version simply click on
download enter your email address
whatever your email address is and click
on subscribe and download now you'll see
this screen and one plug in one file
will start downloading as you can see
this is getting downloaded you get the
latest version from here so that is the
reason why I recommend this option okey
now because this plug-in is downloaded
this file is downloaded we can come back
over here now we have to click on upload
plug-in choose file and select the file
that you have just downloaded ok this is
the one I'll select this one click on
open install now now we will activate
this later on so let's click on return
to plug-in installer let's install some
more plugins now under plugins search
for element oh now I know what you're
thinking we have just installed
Elementor why are we searching for
Elementor because we need some
additional plugins that will give us
more add-ons to work with so we'll use
this one essential add-ons for Elementor
premium add-ons for Elementor and Live
Mesh add-ons for Elementor install these
three plugins so essential add-ons for
Elementor is by WP developer premium
add-ons for element is by leap 13 and
Live Mesh add-ons for Elementor is by
Live Mesh so make sure you install all
these things you can also install this
plugin
motto elements photos and Elementor
template so here you will get free
templates with an motto so very
important plugin if you want you can go
with that as well now because we have
downloaded and installed many different
plugins let's click on plugins and let's
activate all the plugins at once now as
you can see many different plugins but
all are inactive right now now instead
of activating one by one we can simply
tick mikoshi or it will select
everything under bulk action we can
click on activate and click on apply
this will activate all the plugins at
once now click on skip setup you'll when
you activate plugins you get many
different notifications and notices just
remove everything ok we also don't want
this thing so we click on screen option
and will untick these things fine now
let's install the most important plug-in
so for that I will hover over plugins
and click on add new and that is the
WooCommerce plug-in so search for
WooCommerce now you'll get this option
WooCommerce by automatic this has got
around 5 million plus active
installations simply install this one
now let's activate it so click on
activate now when you activate this
plug-in you will see this quick setup
now if you don't say this thing you can
simply type in this that you see on your
url bar you can type in your website
name / WP - admin slash index dot PHP
question mark page is equal to WC - set
up so whatever you see on your website
whatever you see on your screen simply
type in that same thing on your url bar
if you don't see this setup now first of
all we have to select our store location
so where is your business or your store
located so my business is located in
India so I'll select India enter your
address state name so I am in
Maharashtra Mumbai currency I'll select
INR Indian rupee obviously you can
select USD you can select pound dollar
whatever currency you like you can
select that as well now click on let's
go now by default PayPal is activated
but we are you will be using PayPal but
some other PayPal this is the regular
PayPal we will be using PayPal Express
Checkout which is very important and
more useful more it has more features
than this regular paper
so we'll antique this thing we don't
want to use this paypal value click on
continue now we don't have to do any
shipping now great thing about this it a
digital ecommerce website is that we
won't be shipping any physical products
so we can simply uncheck these things
and click on continue now this will
recommend you some plugins we don't want
any one of these plugins so we can
untack this and click on continue you
can install this one you buchamma side
mean this is important one so just tick
makuu commerce admin and leave these two
click on continue now they will ask you
to install jetpack we don't want to
install jetpack so we'll click on skip
this step but I have seen that even if
you skip this step you will still see
jetpack is install on your website now
this quick setup is done so we can click
on visit dashboard alright now as you
can see we have some options first of
all let's click on plugins let's see
whether jetpack getting installed or not
okay so jetpack is not installed that is
great now we can come back to your
dashboard again if you see some notices
like this simply dismiss them now as you
can see when we install WooCommerce we
have two different widgets so here and
these two are very important so in
bukhoma status you will see how many how
much sales you have done how many orders
are pending how many orders are in stock
and you can simply click on this and you
will be redirected to that page for
example zero orders when you click on
that you will be redirected to your
orders page okay so that is very
important let's refresh it okay so with
this we have done the basic settings now
let's do the WooCommerce complete setup
so for that we'll hover over WooCommerce
at the left-hand side and click on
settings now we have already entered
these information in the quick setup
address a key address city zip code
country state now here under general
information or just select sell to all
countries because this is not a physical
product this is a digital product so a
person can be from any country they can
come and download the product now in
physical product you have to actually
ship to that particular country so that
is different but here we can select sell
to all countries now default customer
location should be geo liket now if you
want to enable taxes you can
enable that I'll just show you very
quickly how to enable how do I enter
taxes and calculations so if you want to
enable taxes you can simply enter that
now currency we have already selected
that but if you are changed you can
change it from your currency and all
this information now click on Save
Changes after that click on products now
make sure under stop is selected and
after that rest everything is fine okay
you can go to inventory or we won't be
using this thing enable stock management
so you can simply uncheck that and click
on Save Changes
because your digital products you don't
manage talks okay because this is not a
physical product so we can simply any
disable that after that we have
downloadable products option just leave
it blank
okay file download method force
downloads access restriction this I make
sure this thing is stigma grant access
to downloadable products after payment
okay so once they make the payment they
can download the product now download
requires login if you want you can take
this if you want you can just leave this
on take now click on Save Changes now
because you have enabled taxes we have
tax option so it's quite easy let's see
very quickly how to enable this thing so
rest all these things that is selected
over your don't change that settings are
absolutely fine over here just come over
here under additional tax classes and
enter and add any text name for example
I'll just name it tax ok some tax so
I'll just name it tax and after that
we'll click on Save Changes now when you
create a new class you will see at top
we have a new option over here tax rates
so click on tax rates if you named it
GST you will see GST rates if you named
it wet you will see wet rates so we
named it tax so we getting tax rates so
in country code i'll type in india i n
for india and i'll leave all these
things and maybe tax is 10% suppose so
I'll just enter 10 and I'll antique
shipping and click on Save Changes now
in digital products I don't think taxes
applied but I'll just show I have just
shown you how you can do that ok by the
way there is a complete lecture there is
a detailed lecture on taxation on my
channel so if you want to learn in
detail how to you know set up taxation
in in detail and different types of tax
and Taxation you will see a video on my
channel you can simply do one thing you
can go to youtube.com and search for
Nayar Shaikh tax something like that
let's see mayor shake tax tax or
taxation okay as you can see you
commence Tax GST many different our
videos on that so you can watch those ok
now after that we have to go to shipping
but we don't have to actually go to
shipping because we are not shipping any
product so we can skip this step now
let's go to payments
now we haven't enabled anything sold
first let's click on Save Changes now
here you cannot enable cash on delivery
obviously you can but you should not
because this is a downloadable product
so you know we are not delivering
anything check payment also I don't
think it's good direct bank payment
these are not really good options the
best option is PayPal but this is this
standard PayPal as you can see PayPal
standard we need a much robust PayPal
option so for that we'll hover over
plugins add this you know click open
this add new plugin in a new tab and
we'll search for PayPal Express so
simply search for PayPal Express you
will get this option PayPal Express
Checkout payment gateway for WooCommerce
by web toffee install and activate this
one so once it is installed you can
click on activate to activate this
plugin
after that you again have to come to
WooCommerce or hover over WooCommerce
and click on settings now under payments
you will see a new option PayPal Express
enable this one click on Save Changes
now let's set up this PayPal Express so
we can click on manage and first of all
make sure it is enabled you can change
the title if you want sandbox we don't
want sandbox we want live mode now we
need the PayPal API username password
and signature so for that we have to go
to PayPal calm so just go to paypal.com
sign in or log into your account or you
can use both the normal PayPal account
business PayPal account freelance PayPal
account any kind of PayPal account now
here you will see at the right hand side
you have this seller tools ok you can
see seller tools click on seller tools
now you'll see this option API axe
and besides that you'll see this link
update link click on that link now we
have many different options over here we
have to scroll down and we have to
select this one and we B slash soap API
integration in bracket it says classic
so select this option and click on
manage API credentials now it will show
you your username password and signature
so simply click on show copy your
username from here go back to your
website
and paste in your username under
obviously username now similarly copy
and paste your password and signature
obviously I'll have to hide these things
so I'll simply copy and paste this very
quickly alright so as you can see I have
successfully copied and pasted username
password and signature from here simply
click on show copy this thing from here
and paste it over here so this is how it
is done now I make sure this thing is
enabled PayPal Express and after that
also make sure this thing is enabled
credit card checkout click on enable ok
button sighs we'll just leave this thing
to blank card page checkout we can also
enable this enable Express Checkout okie
after that we have this landing page
option make sure instead of log in
billing is selected ok make sure that
building is selected over here now go at
the bottom and rest everything looks
fine just click on Save Changes we'll
see how this works later on when we
create a product after that we'll see
how this thing works ok for now this
setup is now completed after that we can
go to account and privacy do you want to
allow customers to log into an existing
account during checkout obviously so we
can select that allow customers to
create an account during checkout select
this our option allow customers to
create an account on my account page
select this as well now at the bottom
and click on Save Changes now go to
emails make sure your email address is
proper over here ok after that go to
advanced you just make sure they're
under cart page cos this cart is
selected under checkout page checkout
and under my account page my account is
selected rest you don't have to change
anything just go at the bottom and click
on Save Changes alright guys so with
this our WooCommerce setup is completed
now let's see how to create a coupon so
you can create a coupon people can come
on your website they can enter that
coupon and they can get some discounts
so let's see how we do this
so for that under WooCommerce you will
see coupons click on coupons now let's
click on create your first coupon so you
have to enter the code that you know
just type in the code that you want
someone to enter so I'll just type in a
year ten okay and in description what
does this coupon do so this is optional
this is for your goods so that you
understand why you created this coupon
and what does this coupon do so you can
type in something like this coupon gives
10% discount something like that okay
now what is the type of this discount or
coupon so fixed cart discount fixed
product discount a percentage discount I
am selecting percentage discount and
I'll type in 10 so whenever someone
enters this coupon they will get 10%
discount now you can do one thing you
can type in a coupon and you can make
that coupon for free shipping that is
for physical products we are here we are
that thing is not applied because this
is a digital product website but in
physical products you can do one thing
you can tick mark this thing so whenever
someone enters this coupon code they
will get free shipping now you can do
one thing you can set an expiry date for
this coupon as well click on publish now
let's see usage restrictions so you can
have some usage restriction so to get
this coupon a person maybe has to spend
minimum $100 so he can type in hundred
dollars and you can also set a maximum
spend so if a person spends know beyond
thousand dollars they won't get they
won't be able to use this coupon so
something like that now make sure this
thing is always tick mark individuals
use only so you don't want people coming
on your website and using three four
different coupons and you know
ultimately getting the product for free
so when you tick mark this thing a
person can use only one coupon at a time
and we also tick mark this thing exclude
sales items so if the product is already
on sale we don't want any ones to be
using coupon to get some additional
discounts and rest everything looks fine
just click on update now from here you
can exclude some categories you can
include some categories as well so if
you want to exclude a particular
category on that category this coupon
code won't work you can do that if you
want to exclude some particular product
you can select that product
from here after that usage limit usage
limit per coupon so how many times this
coupon can be used so if you type in 100
only hundred times it will be used after
that if a person is using or if hundred
and first person is using that it will
not apply because this coupon can be
used for only hundred times after that
we have this option usage limit per user
so one user can use this coupon how many
times so maybe you can just type one
okay so a one user can use this coupon
only one time all right so this is how a
coupon is created we have successfully
created a coupon now let's see how a
product is created so let's create our
first product and let's see how it is
created and let's fix few more things so
for that we'll hover over products and
click on add new to add a new product
and let's go to our homepage now let you
have to name a product anything for
example let's open this product digital
product one so this is your product
title or your product name so I'll just
name it the same thing okay
digital product one so I'll give it the
same name after that here you'll have
have you have to enter your product long
description long description is the
thing that you see at the bottom as you
can see under description when you click
on description this is a long
description so whatever you enter or
your will show at the bottom description
then after that when you scroll down
leave this thing ocean WP settings so
you can just leave these things now
product data this is the most important
thing makes your simple product is
selected there are many different types
of products in this website we are just
focusing on simple digital product or
virtual product or downloadable product
so make sure simple is selected type in
virtual so that you know it becomes
virtual it is it becomes digital not a
physical product after that if it is a
downloadable product so tick mark this
so yes it is a downloadable product so
suppose this is a PDF so what is the
price may be the price is 50 rupees as
you can see I have selected rupees
so maybe not 50 rupees 1500 rupees and
it is on sale for 1200 okay now we have
to download we have to add the file that
the person will be downloading after
they make the payment so I will just
name it for example this is a PDF okay
maybe offer Rich Dad Poor Dad book
okay this is maybe this is this book so
I'll enter this name choose the file the
PDF file so I'm not selecting PDF I
don't think I have any PDF I'm just
selecting some images maybe you'll see
all these images again I'm saying
there's a link given in the video
description below when you click on that
link you will download this file and in
that file that will be a zip file when
you unzip that you will download all
you'll see all these files ok so let me
just select this thing so whenever
someone downloads makes the payment they
will download this product or they will
download this image so I will click on
open you can upload a PDF you can upload
an image you can upload anything you
want ok mp3 or screen savers many
different things now download limit
should be always unlimited and expiry
should be never ok because they have
made the payment they can download the
product whenever they want if you want
to apply a taxation on this product
under tax class you can select tax that
we have created ok but I'll just leave
it to standard after that under
inventory we don't have to do anything
rest everything is fine just you just
have to do this much more general
settings only this much after that we
don't have to do anything like that then
product short description so this that
you see over here this is the short
description that will display besides
this product image so whatever you want
to display over there just enter that
text over here now at the right hand
side you have to give a category so this
is maybe this is a book Rich Dad Poor
Dad this may be this may belong to
business category or economic category
something like that
so I'll click create a business category
now product tags you can use product
tags in many different ways
so maybe this can be a tag can be like
you know business it can be rich is it
can be no something like that but what I
am doing is I am converting product tabs
into product types let me show you what
I mean by that so this is a PDF so I'll
simply type in PDF oh you click on add a
new product tag is added now and I won't
add any other tag now the reason I want
to do is if I go to shop you will see
this search by product ID
so this is actually product tag so when
someone clicks on PDF and if you have
added this product tag as PDF they will
see all the PDF files okay that is the
reason why I add this something like
this okay now product image so let's
open any image so this will be the
product image
let us upload some image so maybe let's
upload this one set product image you
can add some gallery images that will
display below this image so some more
images you can do that as well I'm not
doing it and the rest everything is fine
this is how simple and easy it is now
let's click on publish so let's open
this view product link in a new tab now
by default this is how it will look okay
we will be changing the design but as
you can see this looks perfect now we
have to change few things this at
present this is just a normal website a
normal physical website like as you can
see you can increase the quantity you
can add to cart' when you increase the
quantity it will multiply this number so
we don't want that so first of all we
have to do some CSS thing over here and
after that we have to change what this
button does so I don't want this button
to you know add this product to cart I
simply want this button to redirect us
to the checkout page at present as you
can see it is adding this product in the
cart so we don't want that so let's do
few changes with you first of all we
will install a new plug-in oh here so
we'll come back to a dashboard how our
plugins and click on add new now the
plug-in that we need to install is
searching this thing WooCommerce direct
checkout okay this was this is the one
who commerce direct checkout for
WooCommerce by quad layers ok this is
the one by quad layers install and
activate this plug-in once it is
installed make sure you activate it now
once you activate it you you have to go
to WooCommerce so hover over WooCommerce
and click on settings now when you click
on settings you will get this option
direct checkout click on that now we
have some options now let's fix this
thing now add it to cart alert make it
yes add it to cart link make it yes and
add it to cart redirect make this thing
also yes now where should this button
redirect so this button
redirect to checkout button or checkout
page okay click on Save Changes so just
see these settings are added to cartel
out-years added to cart link yes added
to cart ready right yes and redirect
page should be checkout page now go to
our kyv x' now replace add to cart
button in archive archive is this page
ok shop page or a category page you I
have just disabled the button so we
don't have to do anything over here but
if you want you can simply make it yes
and you can replace the Add to Cart
button with purchase so select this
option click on Save Changes now go to
products now here as you can see replace
Add to Cart text in what type of product
so we have selected simple product
select downloadable products as well and
also virtual products ok now click on
Save Changes so this is useful if you
have multiple type of product on same
website like physical and you know
digital products on the same website you
can replace this Add to Cart button only
on digital and virtual products rest all
the other products it will be normal
ok so this is very useful plugin now go
to products now this is for single
product yes we want to replace the add
to cart' text we can click on yes
and we want to add this text purchase
click on Save Changes go to checkout now
this is an important option first of all
you have done this much now let's come
over here refresh it ok now as you can
see when we refresh it or we get this
purchase button when we click on this
purchase button we will be directly
redirected to the checkout page ok so
this is working fine now we have this
quantity option I will show you how we
can delete this thing but for now as you
can see this is working fine when you
click on purchase you are redirected to
the checkout option now in checkout we
don't want these options address option
ok we don't need any address because we
are not delivering of you're not
shipping any physical product so I want
to get rid of all these options so we
will come over here under checkout
option select this option remove
checkout shipping address make it yes ok
remove checkout order comment this is
the order comment by the way if you see
it is given at the bottom so if you I
think this is fine we can just leave it
this thing to know if
want to remove that as well you can just
select yes remove policy things no now I
don't want to remove that remove check
out terms and conditions no I do not
remove that remove check out gateway I
can no we don't want to remove that so
click on Save Changes
come over here refresh it now as you can
see ok address is not ful fully removed
but we can do this thing from here we
can select this option remove check out
fields and select postcode select
address so we are removing these things
we are removing removing the address
postcode and everything city state
country ok now I don't want to remove
first name last name email address on
also phone number so I'll antique phone
number ok now click on Save Changes
come over here refresh sheet now as you
can see we have the first name last name
phone number in email address the rest
everything is now removed so this is how
it is done now let's again come back to
this product page and rest refresh it
now let's see how to get rid of this
quantity option so by the way first of
all the file that you have downloaded
where you have all the images there is
also this CSS file if you open this file
I have given you all the CSS that you
can use I'll let me open this with
notepad so that you can see how it looks
ok ok so this is how your file will look
like you simply have to copy everything
so press ctrl a to co-op e everything
press ctrl C to copy or just no
right-click copy come over here click on
customize now here you have to go at the
bottom and select this option custom CSS
slash JavaScript click on that and paste
in whatever you have copied now when you
paste in that thing as you can see that
thing is now gone quantity thing is now
gone and it also does some more things
like as you can see we have some more
code like you have some it has added
some padding some margin and all these
things so it does a lot of things ok so
if you can simply paste in this code and
it will do everything for you
automatically after that click on
publish now cut this page so that thing
is now gone alright guess so we are done
with all the basic things now we can
start creating the home page ok now we
have seen how to create a
how to fix all these things now when you
click on purchase it will redirect you
to the checkout page and we have fixed
the checkout page as well so we have
done all the basics things now we can
start creating the home page so to
create the home page come back to your
dashboard hover over pages and click on
add new
let's give it a title of home because
this is our home page so under add title
I will simply type in home after that
click on publish
okay let's view this page in a new tab
because we have to fix few things first
of all we don't want this title we don't
also we also don't want this sidebar so
to get rid of this sidebar why we don't
want it let's see the home page in the
demo first of all as you can see in the
demo home page you don't have any
sidebar we don't have any title home
title like this okay like we have over
here so we need to get rid of all these
things so we will come back to this page
under this option you'll see ocean WP
settings first of all content layout
should be 100% full width select this
option update this page come over here
and when we refresh it this sidebar will
be gone as you can see that sidebar is
gone now let's also delete this title
section so for that again we'll come
over here click on title from the left
hand side ocean WP settings title and
disable this option click on update come
over here refresh it now as you can see
the title section is also gone now we
have a blank page but we need to fix one
more thing this is by default not our
home page we have actually just created
a page and we have named it home but
this is not our home page because if you
see in the title in the URL pirate says
digital - dot block to.com slash home it
should not say slash home because if you
click on this block dude or your site
link this is the home page at present so
I want to make this page the home page
the official home page so for that will
again come back to the dashboard we will
hover over settings and click on reading
now we will select this option your home
page displays by default your home page
displays your latest post which means
that if you don't set any page as the
home page it will simply display
whenever you create a new post it will
display the latest post on the home page
so we want to select the second option a
static page and we want to set a home
page okay so the home page which we have
just created
select that home and click on Save
Changes now when we come over here and
refresh it now as you can see slash home
is gone and when you click on this that
is our home page now now we can come
back over here click on pages click on
home edit this page now let's start
editing this page all let's start
creating this page with elemento so we
click on this button edit with elemental
or I guess now you'll see this screen so
this is our element of page builder and
this is how it will look now the right
hand side is the page that we are
creating and at the left hand side is
the elements different elements that we
have available now there are a few
elements that are you know available for
short that is the basic element this
general element and after that you have
some more like essential add-ons as you
can see these are some extra add-ons
that you don't get we are getting this
because we have installed a plug-in
essential add-ons for Elementor after
that you'll see Live Mesh add-ons so we
are getting these add-ons because we
have installed Live Mesh add-on so that
is the reason why we installed those
plugins essential add-ons Premium
add-ons and Live Mesh add-ons so that
you get some more premium options for
free ok so that is why we install that
now how does this plug-in work how does
this page builder work so this page
builder this name is Elementor because
we have different elements that we have
to use to create a page for example if
you want to add a icon you'll use the
icon element so you'll simply select
this thing drag and drop it at the
right-hand side okay from this now when
you drag and drop that thing the
left-hand side options are changed now
as you can see instead of those elements
now we have edit icon okay because we
are editing this icon when you want to
click on this icon you this is how it
will do now if you want to add a new
element you can click on this icon 9
dots I can click on this you will come
back to elements and if you want to make
some changes in this star you simply
click on this icon now you'll see that
the left hand side the menus are again
changed now every single element has
three options content style and advanced
every single element whatever you use it
for example if you want to use heading
let's drag and drop this thing now as
you can see under heading also content
style and advanced so these three
options will be present everywhere so in
under content office
you just have to enter the content so
instead of add your title here you can
add some other text over here okay now
as you can see text is change you can
increase some changes alignment and
something like that under styling
obviously you style it you change the
color okay like this you change the font
size font family you design it you style
it and under at once you do some more
advanced things like you add some
marching some padding you change the
z-index if you want you add some classes
some ID you add some motion effect for
example as you can see some animations
so all these advanced things are done
from here so this is how the basic
element of works okay we can cut this
thing now there are also a few pre-made
blocks that you can use so if you want
to use a premade block you can click on
this a button add template button now as
you can see we have pre-made pages and
we also have pre-made blocks so first go
to pre-made blocks so click on blocks
some blocks are free and some are
premium so the premium ones you cannot
use for example if you see this says Pro
when you hover this you don't get the
add option you get the go pro option so
you have you need to have the premium
Elementor to use this thing okay so you
can purchase that using the link given
in the video description below block
to.com slash Elementor but there are
many free ones so suppose if you want to
use this block you can click on insert
and there are many categories so this
first category the first section of your
page is called hero section ok so if you
want a premade block for hero section
you can search for category hero okay
now you'll see all the hero sections so
if you want to use this one you can
hover this click on insert and you'll
get a premade block in front of you or I
guess now as you can see we have a
premade block with some content now the
only thing that you need to do is you
can click on this you can change the
content if you want to change the video
you can click on this change the video
URL the video will be changed now this
was the second option the third option
that we have is first let me get rid of
this the third option the most easiest
option is to use pre-made layouts so
again you will click on add template now
instead of blocks we'll go to pages now
they're pre-made pages as you can see
for home page for you know for block
page for different pages so
to homepage you can just select any
homepage free template or again you'll
see some premium template and some free
templates so you can select any free
template click on insert and you'll have
a complete page a complete template in
front of you for free ok as you can see
the complete page is now in front of you
now you just have to do one thing you
just have to change the content so if
you wanna change the content you can
click on this icon change the I can
click on this text change the text all
these things ok I'll delete everything
from here right now
okay let me just delete everything so we
have all these options ok now what I'll
be doing is I'll be showing you all the
three ways okay almost all the three
ways and the main focus will be to use
elements ok the basic way of creating
our website creating it using elements
now the reason I want to create using
elements is that we want a unique design
if you use a block your design will be
very much similar from with other
websites design but if you use this
element you can you know create a very
unique design the second reason using
element is that you understand how this
plug-in have this page builder works so
even if you use some blocks or layouts
to create your website because you know
how to use elements you can easily do
changes in blocks in blocks and layouts
ok so that is the second reason why we
are doing this now later on to create
the about page and the contact page
we'll be using a layout ok so home page
is the only page that will be creating
using elements ok now let's start
creating the home page so first of all
to create a home page where as as I said
you earlier every single page is divided
into different sections this first
section that you see this is the hero
section then we have the recent product
section feature products section block
section ok so this is how a page is
divided so to create a new section you
click on this red plus button and you
select how many columns do you want so
in the first section as you can see we
just have one column in the second one
we have multiple columns but first
section we just have one row one column
so we'll select the first option just
one column now in this what do you want
to add so first of all we have this text
so we want to add the text so we again
click on this 9 dots I
to go back to elements and to add a text
we'll be using this heading element now
drag and drop this helding element over
here changed it text from here so I'll
type in download best digital products I
want to make it Center aligned because
as you can see in the demo website this
text is in this Center is in the middle
so we'll select Center alignment Center
as you can see at the bottom after that
we have to design it we have to style it
so we'll go to style first of all we
need to change the color of this text
now let me tell you about one very
important add-on for you know Google
Chrome so for your browser there is an
add-on called you know colorzilla so if
you want to get that add-on you can
simply open a new tab and type in
colorzilla Google Chrome extension
you'll get the first link colorzilla
click on that and you simply have to
click on add to Chrome I'm getting the
option removed from Chrome because I
have already added this extension you'll
get the option add to Chrome when you
click on add to Chrome when the
extension is added to Google Chrome when
you add this thing in the chrome you
will get this color picker oh here okay
so I have I already added this now this
color picker is very important you can
get any color code for example I want to
know what is the exact color code of
this color this orange type of color so
I can click on this color picker I can
you know just move my cursor to that
color and as you can see I'll simply
click on that now that color code exact
color code is copied now I can come over
here select text color okay and I can
just paste it because it is
automatically copied when I paste it I
get the exact same color so very useful
if you don't want to use that you can
simply type in this FF a 4 5 5 you will
get this exact same color now let's
change the typography or the design so
if our typography will click on this
pencil button now for font family I want
to use montserrat this is one of my
favorite fonts so I'll simply search for
montserrat you will get this option now
as you can see the font style is changed
now let's increase the size a little bit
ok maybe 4849 looks good so I'm
selecting 48 pixels for this and I also
want to make it bolder so I'll select
weight and I'll select 700 ok it will
make it bolder as you can see it is now
become
holder and I want to do one more thing I
want to increase letter spacing
now let us facing if you see D or W and
so between each letter there is some
space if you want to increase that space
you can just under letter spacing you
can type maybe one now as you can see
this space between letters are increase
if you type 10 now as you can see now
there is a lot of space between each
letter I just want to keep it to one you
can also make it negative okay to
decrease the space now in case you can
see minus five this is how it will look
but I just want to make it one ok now
this looks perfect so we have
successfully added our first element
after that again we have another text so
I will copy this text and again will use
the heading element so drag-and-drop the
heading element over here type in your
text make it Center aligned go to style
let's style it now for now I won't be
changing the color to white because the
background color is also white so if I
change the color to white you can see it
will disappear so I'll be changing the
color later on first let's change the
typography so click on this pencil
button to change the typography now for
a second for this text I want the font
family to be Roberto this is also very
beautiful font very nice font very
simple font so I'll select Roberto I'll
change the size to 21 pixels and I'll
make it lighter okay this is quite bold
I'll make it lighter I'll select 400 now
as you can see the font now looks
amazing here also I'll increase the
letter spacing a little bit so I'll type
in 1 ok now looks amazing click on
update now before proceeding further let
me do one thing let me just change the
background thing so in background let's
add this image so that we can change the
color of this and we can add this search
bar so to do that we have to select edit
column option but we are not getting
that option if you add a new row as you
can see every single row will have this
option edit section but here for Falls
the first row sometimes you don't get
option like here we are not getting this
option but we have added a new row and
now as you can see we are getting edit
our section option so if you don't get
this option you can do one thing you
will see at the bottom left this option
Navigator click on navigator now click
on section now at the left hand side you
have the Edit section options so you can
do this way as well
now
I want to add a image in the background
so I'll go to style to add an image in
the background as you can see you can
add a video in the background you can
add a gradient in the background
gradient is a combination of two color
as you can see green red you can change
many different things so from here okay
angle and everything okay so you can do
these things as well you can add a video
in the background you can add a simple
enough solid color in the background and
you can also add an image in the
background I want to add this image in
the background so I'll click on image
choose image upload the file again I'm
saying all the images are given to you
in the video description below click on
that link in which is given in the video
description below you'll download all
these images that you see on your screen
now I want this image home banner so I
will select this click on open this
image will be uploaded now I will click
on insert media now this is how it will
look now we need to fix this thing so
first of all let's add some space at top
and bottom so that we can see the image
bigger so we'll click on advanced and
we'll add some padding but by default it
is linked which means if you add 100
pixels 100 pixels padding will be added
from all sides top left right in the
bottom
first let me make it 0 now I want to
dealing this thing I want to add padding
only top and bottom so I'll first
dealing this now for top and bottom I
want maybe or let's select something
like 150 150 top and 150 bottom ok this
looks great
now let's again come back to style and
let's change some image style now the
image looks a little bit different I
want to show the complete image so for
that you can select size you can select
cover when you select cover the complete
image will be shown there are many
different options you have a contain ok
this is how it will look you have Auto
you have default many different
different options I am selecting cover
now we can click on update so whenever
you do any changes on your website make
sure to always update this page ok if
you don't update this page if you just
cut this thing
nothing will be and nothing will happen
on your website so always make sure to
update this page all right now because
we have a dark image in the background
now we can change the color of this text
to white so select the second text
change the text color to white okay now
click on update now I want to add this
search bar in the middle so he can
simply do one thing you can simply
search for another search bar soil bar
widget you'll see this search you can
drag and drop this thing over here okay
this is how it will look and you can do
one let me let us give it a title search
bar maybe okay
let's see how it looks so it does not
look that good as you can see there is
no background image in that there is no
background color it just looks a simple
border and the most important thing is
if you open this link in a new tablet
let me show you the major problem let's
refresh it now when you search something
over here for example let's search for
some product this is not actually the
product search this is a new block
search so you're getting something like
this but if you see when you search in
the demo website when you search for a
product you will see a product search
actual product search okay this is how
it will look so we want a search to be
like this so this is not the product
search this search bar is just the
simple block search so we don't want
this I will simply right click on this
and delete it the other option that we
have over here is product search so we
can drag and drop this thing over here
but you also we don't have any styling
option and the button looks so this
style I don't like this style so to do
these things to fix these things I'll
simply delete it and I'll add a
third-party search bar okay that will be
a much better and we'll get a design
like this which we have in the demo
website okay something like this so for
that again we'll come back to our
dashboard now we will add a new plugin
so hover over plugins and click on add
new and let's search for ivory search
okay
just type in this thing now you get this
option ivory search WordPress search
plug-in by ivory search obviously click
on install now and activate this plug-in
now again if you see some no notices
like this just dismiss everything
alright so when you install that thing
every research plug-in you will see a
new option at the left hand side I will
research click on that click on a lab
and continue or you can just click on
skip as well now we have to create a new
search bar okay so we'll click on add
new and we'll name it anything like
search one ok search bar one or product
search anything you can name it anything
so I'll just name it search one and a
product so that I know that this is a
product search bar ok now I don't want
to search post I don't want to search
page I don't want to search attachment I
just want to search product which means
that whenever someone searches for
something I don't want to go search any
product I don't want to search any post
or anything I just want to search the
product ok select that option click on
save form then after that you can click
on customize to design this form so
click on customize and click on this
option enable search form customization
and click on OK click on save so
basically you have to enable this thing
ok enable search form customization just
enable this from here ok like this and
after that click on Save Changes now
let's design this form so click on
search form customizer
alright now you'll see this screen so
first let me do one thing let me add
that search bar over here and after that
we can design it so for that I'll do one
thing I'll come back to this Elementor
page okay so when you refresh this page
now what we have to do is we have to go
back to our dashboard and click on
library search now when you click on
every search this is the search form
that we have created search form 1 and
besides that you'll see this shortcode
copy this shortcode from here come back
to this element of page and use this
option first let's use this option inner
section ok drag and drop the inner
section over here by default inner
section gives you two columns so inner
section is useful if you want to add
multiple columns inside one column so we
have selected at the beginning one
column and inside that if you want to
add columns you use inner section but
I'm using in a section for other reason
I'll tell you I'll show you what is that
reason you know just in a moment ok but
I don't want two columns over here as
you can see we have one column
if you see we have one column oh here we
have another column oh here so I will
delete one of these columns I'll
right-click on this and we'll have you
have edit column duplicate column and we
also have delete columns so I'll simply
delete that now we just have one single
row one column now inside this thing I
want to add this text editor
drag and drop text editor over here and
go to text delete everything and paste
in these short code that you have copied
okay and we want to make it center
aligned so I'll select everything I will
select this option alignment Center as
you can see align Center click on align
Center click on update by default you
don't see anything over here it is just
showing you the text but if you go to
your home page okay and if you refresh
it let's see the home page now as you
can see we have this search bar oho now
we want to design this search bar so you
can click on customize all right so when
you click on customize you will get this
option I very search click on that
option search one product that we have
created this search bar click on that
now let's do some changes over here so
text box background now as you can see
the background color of this is white so
I will do this option I'll select white
now as you'll see the background color
of this will change to white as you can
see this is changed to white first of
all before everything let me just change
the type of this search but I don't want
this button so here you'll see I have at
the bottom search form style select the
middle one okay this one this looks
perfect okay now I want to do one more
thing I want to change the text color
here as you can see it says search I
want to make it a little bit darker so
you can select black or you can select
some other color now search displays
more darker okay or if you want you can
just leave it default it all depends on
you so this is the only thing that we
have to do change the background color
to white and change this thing search
form style to the middle one if you want
to change this text instead of search
something else you can change the
placeholder text okay
like instead of search let's type in
search the product now you'll see it
will say search the product okay so this
is how it is done now click on publish
now we can cut this page come
here refresh this page now I'll explain
you why we added this you know text
editor inside this inner section we
could have added it just like this for
example let me just show you let me copy
this from here and let me paste it over
here okay this below this thing so you
can understand the difference between
both these things so here this the top
one is added just inside this and the
bottom one that we have added earlier it
is added inside or this inner section so
what I want to do right now is I want to
select this option click on inner
section edit inner section that you see
follow my cursor edit inner section and
I want to change the content width and I
want to make the content width maybe 650
pixels not 56 50 pixels click on update
come over here refresh this page you can
come back to now as you can see we have
added this search bar in the inner
section and we can now change this you
know we can now as you can see change
the size of the search bar but we cannot
do this for the top search bar because
we have added it in a normal way so that
is the reason why I first added this
inner section and inside inner section I
added this search bar okay click on
update come over here refresh it it
looks perfect or I guess so with this we
have completed our first section now
whenever you create one section or any
sections you should always see how that
section looks on a mobile phone and also
how that section looks on a tablet it is
very important to see it is very
important to make your website
mobile-friendly and to see that your
website looks good on a mobile phone
because according to google most of the
people will be visiting your website
from a mobile phone so let's see how it
looks on a mobile phone it looks amazing
on desktop but it should also look good
on mobile phone so if you wanna see how
it looks on a mobile phone you will see
at the bottom left you'll see this
responsive mode click on that and select
mobile now as you can see this is how it
will look on a mobile phone and it is
not looking good so we have to fix few
things so I'll select this first text
download best digital products text go
to style and change this size okay now
as you can see just like this change the
size to something like this
and I don't want letter-spacing over
here so we have added let us missing one
for desktop but for mobile I will make
it zero okay looks much better and I
will increase the size a little bit
maybe 25 looks better now select the
second text go to style again make the
letter spacing zero for this as well and
change this size to 15 pixels okay and
this form is fine so we don't have to do
anything with the form also I have
noticed that because because of the
background image we are not able to see
the text properly if you hide this thing
we are not able to see the text properly
so we'll do one thing we'll again click
on navigator click on section so that we
get section setting go to style and this
is the option image we have added this
image now I want to change some position
so I'll select position bottom center
now as you can see when I select bottom
center the image position changes and
now we have no dark background and we
can see the text very you know very
simply very clearly we can click on
update ok so with this we have seen how
to make your website how to make your
section mobile-friendly let's see how it
looks on a tablet so let's select tablet
so on tablet I think it looks perfect
but if you want to do some more changes
for example for the second text we can
just make it under one line okay like
this and you can also change the first
text size to maybe like this okay so you
saw it all depends on you again click on
update come back to desktop so in
desktop also you can do some saves
changes like if you want you can go to a
layer a navigator and select edit
section and here also you can do like
position top center or bottom center
like this okay so for this also I am
selecting bottom center click on update
now let's refresh our page ok now it
looks amazing it looks perfect so with
this we have completed the first section
and this was a little bit complicated
section we had a lot of things over here
rest all these sections are super easy
it will take hardly few minutes to
complete all the other sections ok so
let's create a second section so
come back to this page so to create this
section let's again click on this red
plus button select a single column now
we want to display products in this
section so what we can do is we can
simply open a new tab and search for
WooCommerce shortcodes you'll always get
this option so go to google and search
for WooCommerce shortcode so you'll see
the first link shortcodes included with
WooCommerce open this link now this is a
very important page there are a lot of
things over here but we are not getting
into all these different things just go
at the bottom to this section example
product scenarios and now first of all
we want to here we want to display only
the latest products the recent products
okay so for that we'll select this
option newest products and you'll see
some shortcut over here
just select this much copy it come back
to this page now let's drag and drop
this text edit over here now go to text
section okay we are by default under
visual section click on text go to text
section delete everything and paste in
the shortcode that you've just copied
now you cannot see anything over here
but let's do one thing let's click on
some somewhere else so let's keep click
over here now as you can see you can see
the result now I want to fix this thing
so let's see how we can do that so I'll
click on this again now I just want to
display here as you can see we want to
display six different products in three
different columns so we'll come over
here we'll limit will select six and
columns will select three click on
update and let's see how it looks as you
can see this is how it will look now if
you see this on a new page let's refresh
this page okay this is how it will look
now I want to do one more thing first of
all this button and everything will fix
it later on but if you see there demo
website when I however this this quick
link also is you know it's stretching
the complete section but here that is
not happening the image is quite smaller
and you know you can see this quick link
thing we have some gap here and there
that is absolutely fine you don't have
to do anything about it but I just find
it disturbing I want this section now I
want this image to look much bigger okay
just like this so when you how are these
Quick Links should you know it it should
stretch
the complete image we should not have
any gap at left and right here when I
however this I as you can see we have
some gap at left and right so to fix
this thing you can simply click on
customize or maybe we'll fix that later
on when we'll do the customization we'll
fix everything at the same time okay but
you'll see how to fix it it's really
simple now let's come over here and
let's add some space at top and bottom
okay at top and at bottom of this
section so for that we'll select this
option edit section go to advanced and I
want to add only top padding okay 50
pixels because if you see bottom we have
enough space over here we just need some
space at top so for top padding I'll add
50 pixels click on update now let's
create the next section as you can see
it just took around one or two minute to
complete this section now at present we
have only one product that is why it is
showing only one when we have more
products it will show it like this now
let's create this section the featured
products section now first of all we
haven't created any featured products or
we haven't set any product as a feature
product so first let's see how we can do
that so for that come back to your
dashboard you can click on products
you'll see all your products that you
have created now if you want to make
this product a featured product you can
simply click on this star ok as you can
see you can just click on this star and
now it is become a featured product so
what we can do is after it has become a
featured products we can again come back
to this page and we can again click on
this plus button single column and
inside this will add the text editor
again just like we did in this example
now again come back to this shortcode
page and this time select this option
featured product shortcode ok this much
copied from here come back over here
again make sure you under text delete
everything and paste in the code that
you have copied now here I want to
display only 3 products so I'll select 3
and 3 columns after that click on update
again let's click somewhere else so that
we can see this page now as you can see
featured products is now showing because
we have added this product as a featured
product now we need to fix few things
first of all what we need to do is we
need to add a back
color okay this real gray light gray
background color and we need to add this
title so let me first add this title for
that I'll use the text heading not here
okay this is the one we'll use the text
heading drag and drop it over here
whatever your title is just enter that
title
now let's style it so for that we'll
select the color black font family will
be monserate so just search for that
you'll get this option now sighs I want
to increase the size a little bit so for
that I will select 28 and let's make it
bold so 700 or maybe even 800 you can
select 800 as well click on update now
select this option edit section and now
let's add that background color okay so
we'll go to style background type color
and you can select some light grey color
like this okay just like this okay I
think this looks good e8 e8 e8 okay and
let's add some space at top and bottom
so for that we'll come to this option
advanced top again we'll add 50 pixels
bottom we have enough space but still
we'll add a little bit so 25 would be
better click on update now let me
explain you a few things let me clear
clarify something so here now if you see
this thing by default you see this white
background throughout this if you if you
have not added the CSS which I've shown
you if you have not copied and pasted it
on your website
you might see something different so if
your website does not look like the one
on this screen make sure you copy and
paste this CSS thing okay make sure you
do that all right then after that we
have this section the blog section but
we haven't yet created any blog so first
we need to do that so we'll go back to
our dashboard and to create a post or to
create a blog you simply hover over post
and click on add new let me open one so
that we can see how a blog or how a post
looks like now first of all we have to
add a title we have to give it a title
and after that we can add the content so
if you see over here this is the title
SEO tips to boost your sales so we'll
copy it from here paste it under title
and all the other things that you see
this all comes under content
I'll copy everything from here now to
add the content you can simply you know
paste it like this but I what I do is I
simply click on this plus button and
search for classic element ok classic
option select this one and under that
I'll paste everything okay so this is
how it will look alright now we have to
give it a category you can come back to
document now this category is different
from the product category the product
category was different and this is no
post or block category so maybe we are
talking about SEO in this article so
I'll give it a category of SEO we have
to give some tags if you want you can
give some tags featured image we can
click on set featured image and this
image that you see at the top this will
be a featured image so let me just
select something like let's select this
one click on select rest everything
looks good click on publish view post
okay so this is how it will look now I
don't like the text over here I think
that text should be darker it is gray
color the text should always be black
color so that it is very much clearer
you can easily see and read it so we'll
fix this thing later on first let's
complete the home page ok so again come
back over here now we have created a
post we can now showcase this post over
here just like this in the home page so
for that again when you click on this
plus button click on this single column
and inside this will add the post grid
option so search for post grid you will
see this option post grid drag and drop
it over here now you'll see your post
like this now we need to fix this thing
first of all I don't want this title as
you can see my post is the title I don't
want that title so I'll click on post
content here is the heading of the grid
I don't want this setting I will relate
it now my post is gone and we have this
filtration option okay I also don't want
this filtration option so for that again
I'll go to settings and we have this
option filter able make it no ok now it
looks better now again come back to
content I just want to display the title
and this meta description I don't want
to display this summary the excerpt or
there is this 7 6 7 lines I don't want
to display that so for that I'll go to
compost content I will make this thing
no
display the post exert a summary just
make it no click on update now if you
want you can style these title and all
these different things you can go to
style and here we have grid item entry
title so suppose if you want to make the
color black as you can see the color is
changed if you want to change the
typography for this as well so maybe
let's change this to monserate
now as you can see the typography is
change let's make it a little bit bolder
500 ok as you can see the changes are
taking place maybe 700 ok and maybe
let's change the color to something like
this orange color ok so you can do these
things as well from your similarly for
Meta Description also here we have Meta
Description if you want to do some
changes you can do that as well once you
do the changes make sure to always add
some space at top and bottom so let's
add padding 50 top and bottom click on
update alright guess so with this we
have completed the home page now we can
simply cut this page and we can come
back over here now let me do one thing
we have completed the home page now
before fixing these things because as
you can see it looks weird we need to
fix this thing
we don't want the there are many things
that we need to fix but before doing
that let's create some other pages so
again come back to your dashboard first
let's create the block page so for that
we'll hover over pages and click on add
new
let's give it a title of blog I don't
want to do anything else just give it a
title of blog and click on publish now
if you view this page let's see how what
happens it's just an ordinary page but
just like home page we have to set the
block page if you remember when we
created the home page we had to
officially make it our home page you
have to set that as the home page
similarly for block page also we have to
do the same thing so come back to your
dashboard
however our appearance how are our
settings and click on reading now as you
can see post page just select blog
select this option click on Save Changes
now we have just done one thing when you
click a command you come back to the
blog page again and refresh it now as
you can see this is now become your blog
page it is displaying your blog page and
we'll fix this page as well we'll see
how to
this page how to make it more beautiful
now before that let's do some more pages
so now we need to create the about page
so we'll have our pages and click on add
new
let's give it a title of about us and
just publish it and let's open our about
page in the demo website now as you can
see here also we don't have any sidebar
and we don't have a title so but if you
see this page that you have just created
we have the sidebar and the title so
first we need to get rid of that so
content layout will be 100% full with
title will be disabled again update this
page
come over here refresh it okay now it
looks better now click on edit with
Elementor now this page you don't have
to create from scratch again I am saying
there is a link even in the video
description below when you click on that
link you will download all the files so
we have seen how to use these different
images ok these different images and we
have also seen the CSS file now with
that you will have some more files let
me show you now with that will also see
this folder pages folder when you open
that we have two different elements so
here two different layouts over here we
need to import this layout so how do you
import that layout you will simply click
on this option add template and you'll
click on my templates and select this
option import template if you follow my
cursor click on import template now
select that file that you have just that
I've just shown you you have to select
one by one so select the first one click
on open this will be the about page now
as you can see now again click on import
select the second one this will be the
contact page now because we are creating
the about page we'll select this option
about Us page and click on insert now
you'll see complete about page will be
in front of you as you can see you just
need to insert the image rest everything
is present over here for example let's
select this image and replace this with
something else now these images are also
given to you in the video description
below so replace this with maybe this
image insert media now post an image
maybe let's select this one okay
or maybe this is not the good one let me
upload these three images so let's
select this one find second image select
this third image and similarly if you
want to change the title and everything
you can click on Tim woods instead of
Tim woods you will type in whatever you
like for example in your shake instead
of CEO and Founder you can type in
something else very easy we have seen
these things already if you want to see
if you wanna change this image click on
this and upload some other image
whatever you miss you like let's select
this one insert media all right we don't
need this section bottom section I can
simply get rid of that click on update
now as you can see with this your
complete pages you know if present in
front of you now we can again come back
to our dashboard and let's create the
about page no not the about page we have
already done that let's create the
contact page so how our pages and click
on add new
let's give it a title of contact and
again we'll make sure this is 100% full
width and title is disabled click on
publish edit with Elementor we have
already imported the or template for
this one so we just have to you know use
that so click on add template my
templates and this is the one we have
imported contact page template click on
insert okay now we have you won't see
your contact page over here contact form
over here and we have to do a few
changes over here so first of all to see
the contact form you can do one thing
you can go back to your dashboard make
sure first you update this page now when
you come to a dashboard you have to use
a new plug-in so click on however
plugins click on add new and we have to
install the contact form 7 plug-in so
simply search for contact you'll see the
first result will be contact form 7 as
you can see install and activate this
one now once you install and activate
contact form 7 you have to come back to
this page and refresh it now once you
refresh it click on this option contact
form 7 not found click on that and you
will see contact
from one is already created for you it
will always be created for you select
contact form one now go at the bottom
here you have to change this thing you
have to enter your own address so you'll
see this no blue button at top right
click on that and instead of this
address just enter your address I'll
enter some address so here ok and let me
zoom in a bit ok so whatever your
address is enter that and click on
update ok so with this your contact form
or your contact page is also ready so
let's delete this thing go back to our
home page now let's create our menu and
we let's create our footer so basically
our header and footer so to create your
menu again you will hover or you can
simply there two ways you can just go to
your dashboard and how our appearance
and click on menus or you can just come
over here and however this and will see
this menu option so you can do it from
both the ways now first of all we need
to create the main menu ok the menu
which we have at the top this menu so
let's create that let's name this menu
main menu you can name it anything main
menu primary menu home menu whatever you
like I'm I'm naming it main menu now
click on all under pages click on all
and select all the pages that you want
to display on that page on that menu ok
and the shop page will be over here and
my account you can do one thing you can
let me just show you again I add my
accounts two times as you can see my
accounts and in my accounts we again
have my accounts so instead of my
accounts for the second one
this type in register ok and do this
thing and under my accounts we want to
display few links so you'll see these
WooCommerce endpoints select that and
select all the other links click on add
to menu and bring everything under my
account so just drag and drop it like
this make sure it is under my account
it's just like this once you are done
with this menu make sure to tick mark
mean so that this becomes your main menu
click on save menu come back to the
website okay now as you can see homepage
about page blog under my account you can
simply go to downloads okay you'll go
you'll see you all the files that you
have purchase and you can download it
from here
now we have register when you click on
register you will be redirected to the
my account page but when a new person
clicks on register let's see what
happens so let me open this website in a
new incognito window okay so we have
opened this website in a new incognito
window which means that we are now
logged out now when I click on register
you'll see login or register ok so that
is the reason why we did that and again
when you click on my account will again
come to this page so that is why we did
this thing okay now let's create the
footer menu so if you see in the demo
website we have a menu in the footer
this is a menu Quick Links this is a
menu so let's create that menu so I'll
click on create a new menu I'll name it
footer menu again I am saying you can
name it anything you want I'll just name
it footer menu click on create menu and
in this I just want to display the
WooCommerce endpoints click on add to
menu you don't need to select footer
over here don't select anything okay
make sure everything is antique click on
Save Changes our save menu now let's add
these things ok that you see in the
footer all these things so let's add
them so again under appearance you will
see customize you'll see this option
widgets click on widgets now under
footer 1 we have basic information about
ourselves so we'll simply copy it from
here and we will select this option text
which will be at the bottom as you can
see text select footer 1 click on add
widget so just add any text ok for
example we are adding this text you can
call us on this number this is our
address so you can do something like
this and you have to give it a title and
here the title is help and information
so I'll simply copy and paste in the
same title click on save
in footer 2 we have this menu which we
have already created I just want to copy
the title Quick Links come over here
select navigation menu this
time and that would be oh your
navigation menu select this select
footer to click on add widget give it a
title of quicklinks
and select menu footer menu click on
save now in footer 3 I want to display
the simple images so for that again I'll
use text ok which is at the bottom text
select that select photo 3 click on add
widget now give it a title off we are
using safe payments and let's click on
add media now let's upload those two
images ok as you can see these are the
two images just upload that now click on
insert into post
just select the both 1 and make sure it
is aligned Center so click on that and
select align Center now click on save
now in our last menu we have this
contact information so let's do that
you'll see this at the top you know
contact info select this one click on
footer for click on add widget I don't
want any text so I'll delete the text
now in address you just have to change
the content
I don't know change the icon class don't
change the title obviously you can
change the title that is fine but don't
change the icon class you can change the
content from your for phone number also
mobile number also ok you can do these
things I don't want the facts so I'll
delete everything from facts I also
don't want the website so I'll delete
everything and also don't want this
Skype now click on save come back to
your website refresh it now scroll down
now as you can see you have your photo
now we have to do style of photo in a
different way as you can see our photo
color is different and text color is
also different will style it later on
now after this if you go to shop page it
looks good but at the left hand side we
don't have anything where as in you if
you see your shop page in the demo
website it looks amazing and we have a
lot of options at the left hand side so
let's see how we can add these different
amazing options on a shop page so for
that will again come back to the same
option again this is also done from this
appearance widgets option now we have
this option WooCommerce sidebar so
whatever you want to display in this
sidebar of this page on the shop page
or the product archive page you'll see a
you'll be adding those under WooCommerce
sidebar so first of all we have this
product search
so we'll search for ivory search which
should be here
select ivory search now this time you
have to select WooCommerce sidebar click
on add widget now we have we have
created this one search one product
select that and click on save come back
to this page refresh it okay now as you
can see or maybe let's do one thing
let's create a new one for this because
we have added we have changed the text
style so it is not looking that good so
let's very quickly create a new ivory
search so we'll have a will right click
on this open this ivory search option in
a new tab and we'll click on add new
very simple just name it form to
anything antique post page and
attachment just makes your product is
selected click on save now click on us
customize and enable customizer click on
save form now click on search form
customizer now here we don't have to do
anything just make sure the second one
in these search form style the second
one is selected now click on publish
come back to this page widgets page
refresh this page now under ivory search
you'll get one more option form to
select that click on save come back to
your products page refresh it now this
looks much better okay so this is how
your search page should look like your
search bar should look like then we have
let's see what we have we have search by
product types so if you remember we have
made tags as the product type so for
that we'll select tag cloud here it is
product tag cloud make sure the product
tag cloud is selected select WooCommerce
sidebar click on add widget ok now just
that that and refresh it ok now product
tags if you want to again change the
title instead of product tags you can
type in something like search by product
type ok let's change the title search by
product type then we have filter by
price now at present filter
my price will not show but let's add
that so filter product by price let's
add that add widget now if you refresh
this page it will not show because we
have only one product and we have only
one price when there are different
prices let me show you very quickly
let's duplicate this product that we
have just created
okay so I'll however this and click on
duplicate let's change the price the
regular price I'll make it 2500 and sale
price 1800 and let me just very quickly
change the product image as well let's
upload something new publish it now
again if you go to your shop page let's
see now as you can see product filter by
price is now showing because we have
different prices if you have only one
price it will not show but now because
we have created two products with
different prices now it is showing then
after that we have top rated products so
for that we'll select this option a
product by rating I guess filter product
by rating select this option no not this
one let me delete that thing it is it is
just this one product by rating okay
select this one products by rating add
visit now how many products do want to
show 5 3 whatever number you want you
can select that refresh it now as you
can see top rated products are now
showing over here then we have product
categories so we'll select this option
and we should have product categories
option at the bottom here it is product
category select this option add widget I
do not want to show the hierarchy click
on save come over here refresh it now we
have added this business category that
is the reason it is now showing so as
you can see this is working fine this is
working perfectly now we need to do one
more thing if you go to the blog page
here it is now here also we have a
sidebar and we need to fix this sidebar
as well so if I go to my blog
Paige here as you can see this sidebar
looks so much better so let's change
this sidebar as well so whatever you add
under default sidebar it it will display
at the sidebar of this blog page and
single blog even if you open a single
blog the same sidebar so let's see how
we can do that so first of all I want to
delete I'll just leave this search rest
everything deleted recent post recent
comments
now after such I want to show recent
post but that recent post which was
showing earlier as you can see it was
different now we want to select this one
or right to recent post here it is okay
this one besides this if you'll see this
arrow then recent post so this is the
one select this default sidebar add
widget how many number of pros do you
want to display we can select that
come over here refresh it now as you can
see it is displaying with this thumbnail
and this is looking much better then
after that we have this followers so
social icons so we'll search for social
icons series make sure default sidebar
is selected click on add widget now in
style select colored okay by default it
is light you have to select color if you
want to show this colorful icons or else
it will show only out outline so select
colored now whatever I cannot whatever
first let me copy this link now if I
want to show Twitter I can add the
Twitter link
so whatever links you want to show just
add those okay okay here we have five in
one single line so I'll just add only
five over here click on save come over
here refresh it okay now as you can see
we have this icons as well then after
that we have integrated Instagram so
again we'll come back to this page
select this Instagram option you can
also drag and drop this thing just like
this now let me enter my username over
here now there are many different styles
selected style one style too and how
many images we want to show for example
here one to six images are shown so I
will just type in six images style to
click on save come over here refresh it
now as you can see the same style so
this is style to and I am displaying six
images now let's see how we can
integrate this one you know Facebook
page so for that also you will see here
at the top Facebook like box drag and
drop this thing now what should be the
title followers on Facebook
page URL my facebook page URL is
facebook.com slash block dude alright do
you want to show the faces and
everything you can not change these
things if you want click on save come
over here refresh it ok this is how it
will display alright so with this we
have completed all the important pages
now what we need to do is we need to
style' it the final styling so that
includes you know fixing this thing that
have shown fixing the home fixing these
things the header or footer and
everything there many different things
when you do these things you will
understand it so to style it click on
customize all right so first of all what
I'm going to do is I want to get rid of
this top bar okay here as you can see we
have something about this menu about
this header we have some top bar so I
don't want that so I will click on top
bar general and you have enable top
barges untick that it will be disabled
and after that click on publish now as
you can see that is now gone now let's
fix the footer let's fix this header
because we have to do a lot of things in
the header so come back and select this
header option general option and I want
to decrease the size of the height of
the header is quite big so I hope it is
by default 74 hour and make it 50 okay
now as you can see looking much better I
don't want this border at the bottom so
header border bottom and take that now
come back header logo let's select a
lower if you want to create a new logo
it is very easy if you for example let
me show you how we can create this logo
so to create it you can simply go to
logo maker l OG o M ake a are calm it's
not Mak ER its Mak are okey now whatever
you want to search for for example here
we have the rocket Ike in so I can
simply search for rocket case you can
see thousands and thousands of different
icons you can see over here whatever you
like whichever you like you can select
that now I am selecting this one because
this is the one that we have used in the
demo website so I will click on this you
can resize it like this you can change
the color so let's change the color
alright
maybe much better this looks good and
after that we have some text so let me
add some text if you want to add some
text click on this T and I just wanna
see a logo decrease the size like this
and let's change this style of this text
so I want to maybe let's see what we
have we have open sans let's select open
sans Extra Bold okay now as you can see
this is how it will look now let's
change the color to dark blue very dark
blue and the logo is small and the text
is big so let me increase the size of
the text this looks good
now many of you when you finish creating
your logo always make sure to you know
crop that so at the bottom right corner
at the bottom right you will see this
crop icon click on crop now just crop
the section which you want so I just
want this much now if you see the image
is quite big it is around 400 by 150 I
would recommend you a size something
like which should be 150 in height
should be 50 something like that okay so
you can decrease the size that will be
much better but you can have a bigger
image you can decrease it from here from
the customize but if you just have the
exact same size that would be much
better okay again I am saying which
should be 150 height should be around 50
now once you crop this thing double
click on this image this will be finely
cropped and now save it now at the top
right okay top right you will see this
save logo click on that option now
select this option no thanks download
low resolution file and a new file will
be downloaded just like this now let's
upload this as our logo so click on
upload files select files now I'm just
selecting this one which we have already
created so I will select this one click
on open or select I don't want to crop
this image so I'll click on skip
cropping now it will be quite bigger if
you see now as you can see so if you
want to fix this thing maximum
with make it 150 okay not 50 150 or
maybe 120 you can select that maximum
height maybe 50 okay now it looks much
better now come back now let's fix this
menu so select this menu and link color
what is the link color
link color is fine link power color when
you hover this it becomes blue you can
change these things now come back let's
fix the typography of the menu so come
back and select this typography option
select main menu I want to change the
font family to monserate
okay as you can see changed now I want
to make it a little bit bolder so I'll
select 600 semi bold or maybe 500 is
fine 600 is a little bit more and I want
to make everything uppercase
okay so I'll select it takes transform
uppercase now as you can see everything
is uppercase click on publish you can
increase the size of the font as well if
you want now one more thing let's
increase the size of this cart icon so
come back select boo Khmers select menu
cart and let's increase the size icon
size as you can see on your screen it is
increasing and let's Center it
vertically so select the second option
and bring it in the middle click on
publish now when you scroll down you'll
see that here we have this button I
don't want to display this button here
also we have the button I don't want to
display this button and also I don't
want to display this category in this
saw shop page also you will see the same
thing button in carrying a word I don't
wanna display that so what I'll do is
I'll come back under WooCommerce you
will see product archive here it is
archives click on that scroll down and
untaek this thing or just hide this
thing Add to Cart button and category
now as you can see this looks much
better the same changes will be done
even on the home page if you go on the
home page
see also as you can see the Cart button
is gone and this looks much better now
let's fix this image okay so we'll come
back under WooCommerce only select
Buchanan's and product image here is
product images so by default the image
let me come back to the home page now
here
you can see the main image with is 600
and thumbnail with is 300 so we can
increase this width and let's make it
750 let's see and let's make this one
also 750 thumbnail' width okay now as
you can see this is fixed okay if you
see now we don't have any gap and this
looks much much better okay this is
looking amazing even if you go to the
shop page shop which was fine already I
think it was only on the home page so if
you see the home page it looks good
right now
okay click on publish now let's open a
single blog and I want to fix something
over there if you open this single blog
let me first come back go to typography
I want to fix the typography and also
the color so go to typography and body
select body and select monserate
now when you make it monserate
everything every single font on your
website will be monserate and change the
color font color instead of this grey
color select black now this is looking
much much better I don't know you can
see the difference or not but it is now
looking much better the fonts are very
clear very clean now it is very easily
readable click on publish now let's fix
this photo okay so we'll come back now
select this footer option here it is
footer widgets click on footer widgets I
want to change the footer color
background color should not be like this
it should be let's see what we have over
here let's use this color picker okay
it is f9f 9f9 so let's make the
background color f9f 9f9
and let's change the text color to black
now as you can see text colors change to
black border color should also be black
if you want you can make the border
color black as well okay maybe no border
color should be just default just make
the border color default and link color
you can make it black if you want okay
so these things will be displayed
because these are all links and when you
have all this it becomes blue so if you
want to change the hover color you can
change that as well now looks good but
we have one problem when we change the
color
- this this color becomes white so let's
fix this thing come back and select
typography and select go at the bottom
and select footer widget heading and
make it black font color black and also
make it bolder because it is not looking
like heading so select 700 now it is
looking like heading because these are
now bold and similarly if you want you
can fix this header this widget as well
you can come back and you can select
this option let me see how it's fine you
can select this option which is over
here
sidebar widget heading okay let's make
these also you know folder so select 700
okay now as you can see Instagram and
everything this is also bold click on
publish cut this thing okay now as you
can see this looks much much better okay
one thing was amazed put a bottom okay
let me fix this very quickly click on
customize again now you'll see footer
bottom option here it is footer bottom
select that and we want the background
color black which is fine but we want
the text color to be white select text
color white link color also white and
let's change this thing copyright
instead of ocean WP theme by Nick I want
to made by Nayer shake okay and if you
want you can make now your shake our
link so when someone clicks clicks on
Naya shake they will be redirected
somewhere so let me show you if you want
to learn this you can if you want to
just copy that thing you can go to or
you can just search for age a href you
will see that thing so that is basically
a very simple you know HTML element so
let me show you how we can do that you
can see on my whatever you see on my
screen you just have to do like that let
me copy my YouTube URL link okay
now your shake you close this anchor
over here now in someone however so this
as you can see now mayor shake is a link
okay so you can just see the format over
here you if you want you can just go to
it you know google and search for a href
in HTML I open this first link w3 school
now as you can see this is the link you
can simply copy this much okay and click
on try to yourself that will be much
better now as you can see this is the
link so maybe instead of this thing
instead of this link I want to add some
other link so I'll delete this thing
I'll add my youtube link over here okay
or maybe my website link alright and
instead of w3 schools it should say in a
your shake all right now as you can see
when I click on run this is a new shake
is a link and when someone when you
hover over that you can see at the
bottom left it says block do.com
so you can copy this much from this a to
that a and you can copy and paste it
over here so that is how it works is
that is not necessary but I just showed
you if you want to do this you can do
that as well click on publish come back
now what the CSS that you have copied
and pasted under custom CSS it is it has
a meaning I have all the CSS Hermine I
just you know while creating the demo
have said I created this CSS and gave
you so let let me very quickly explain
you what does this CSS do so that you
guys should know okay so first of all
the first CSS this is not necessary by
the way that I'm showing you right now
but I think it it would be much better
if you understand what is happening so
here the first CSS this much that I have
marked this improves this in you know
makes this search bar bigger okay it is
adding as you can see 15 pixels padding
from all sides and similarly all the
other CSS that you see has a meaning
now for example if you see this one they
the color of this is from this CSS if
you see this is the one at the bottom
Camas prize amount as you can see the
color if you want to change this color
you can change this eight three three
eight three four fbb so if you want to
make it black just type in zero zero
zero now as you can see the color
ohö is now black so that is how it is
done if you want to change the font
family instead of Rubik if you want
monserrate you can simply type in one
set it over here now as you can see font
families changed so that is what that
thing does and interest everything is
fine I'll just publish it cut it from
here now we have the other pages which
we have for example when you click on my
account page we have this sidebar so we
don't want this sidebar for the my
account page or the checkout page in
those pages so I'll go back to the
dashboard click on pages now select a
cart option we we have the cart page
also when you open this cart page you
will see we have a sidebar which we
don't want when you click on preview
let's open this in a new tab as you can
see we have this side but I don't want
that so I can simply select this option
content layout and don't select hundred
percent full width select full width'
just the full width click on update
come over here refresh it now as you can
see that sidebar is gone and this looks
much better now again come back to all
pages and similarly do it for checkout
and all the other pages now select
checkout make it hundred percent full
width not 100% full width just full
width click on update okay come back to
all pages we have checkout then we have
my accounts select my account or make
this also full width click on update so
come back to your website let's go back
to the website let's see whether
everything is fine or not let's open a
single product so let's click on this so
in single product if you want if you
don't want this sidebar in this single
product you can do one thing you can
click on customize now you click on View
commerce and select single product and
here you have the layout so if you want
full width you can select full width' so
this sidebar will be gone and now this
is how it will look okay if you want
this design you can select that and
click on publish
now let's cut this thing okay so this is
a single products block page every
single page is looking fine okay
everything is now complete
now let's see we are very quick I know
think let's see whether everything is
working fine so let's select this option
click on purchase ok now as you can see
we are redirected directly through the
checkout option if you enter some
details ok so as you can see I haven't
entered some detail this is the price
click on proceed to PayPal and now you
will be redirected to PayPal and you can
make the payment now as you can see the
great thing about this that when we
click on proceed to PayPal or we are
redirected directly to this section card
section wherein we can make the payment
with the card by default it it will
redirect you if you go to some other
website when you click on proceed with
PayPal it will redirect you to the login
option wherein you have to login with
PayPal and so on and so forth but
because we have used the PayPal Express
option we are redirected to this card
page now here you can just enter your
card details and make the payment so let
me just go back cancel and return to
block dude or I guess now let me do one
thing let me go back to this page click
on products and let's make her let me
just make one product free so that I can
show you if you purchase a product what
happens after that because we haven't
seen these options like your regular
prices this I don't know so I'm making
this product you know free product so
click on update click on view product
click on purchase ok now I can just
click on place order just to show you
what happens when you place an order now
as you can see when you you have placed
an order and now you have this thing
available now you can download Rich Dad
Poor Dad and when you click on that new
file is downloaded and you can always go
back to my account and click on
downloads you'll always see whatever you
have purchase you will see the download
option it never expires because we have
done the setting and download remaining
is unlimited ok so this is how it works
alright guess so with this we have
created this website and now here the
tutorial is completed I hope you guys
learn something new and I hope you guys
enjoyed it so make sure to subscribe
the channel and click on the Bell so
there you don't miss any future
notifications if we have any doubt any
comments any suggestions for me you can
leave them in the comment section below
if you find this video helpful give a
thumbs up and make sure to share it with
your friends on Facebook Twitter I would
really appreciate that if you do thanks
a lot for watching guys see you in the
next one
[Music]