So in this video I'm going to show you how
you can take WordPress WooCommerce oceanWP
and elementor to create a
great-looking online e-commerce store in
a quick and easy fashion. I'm going to show you how to install all the basic plugins,
set up WordPress install the theme
configure everything and then end up
customizing it to make it a little bit
more interesting than just an
out-of-the-box solution so let's take a
look at how we can do all of that right
now
So, right off the bat I'm going to assume a
certain level of knowledge when it comes
to dealing with building this website
and assume that you're comfortable
installing WordPress how to deal with
the server and all those kinds of things
I've covered that in a previous video if
you're not too sure how to do that and
I'll link that in the description below
so if you want to go right back to the
basics then you can jump in at that
point and go right through to the
process however like I say I'm going to
assume a certain level of understanding
based upon what this is going to cover
also I'd like to say that if you're
considering purchasing any of the
plugins that are used in this particular
video and you'd like to help support the
channel or we do around here please
consider using the affiliate links in
the description below they cost you know
more money but it does give a certain
percentage back to the channel to help
support us anyway without further ado
let's take a look at how we start now
I'm going to develop in this on a local
server so in other words I'm not going
to be using an online server but the
process is pretty much exactly the same
I've created the database uploaded
WordPress and I'm now ready to start
configuring everything so all I'm going
to do is refresh this page I'm going to
see the installer for WordPress pop up
and we'll then ready to start putting
the information in to get the ball
rolling so all I do is choose the
language that I want to work with which
in this example is English UK and a
click on that click on continue that's
gonna then take us over to the second
step where we can configure some of the
basic information so this isn't ever
going to need to have the database
username and password and so on so let's
click on let's go now I'm going to put
in the basic information like I say this
is all being done inside a local server
on my local machine so it's a little bit
quicker so I've named the database in
this example ecommerce the username is
route I have no password said that for
this and for security purposes what I
would always recommend you do where
you've got this table prefix it's just
for some random letters and numbers in
there
don't use symbols and things because
that can cause a bit of a problem but
just put something like this in there
just an example because what this does
is if your website is trying to get
hacked it makes it a little bit more
difficult because the table prefix isn't
the default WP so it's good practice to
do something like that click on submit
I don't know take a sua say alright
we're all ready to go let's just run the
installation and then just we'll wrap up
the last parts are dealing with
WordPress so I'll just pop some basic
information in here we put the name of
the shop in there I leave my username
put a password in now obviously you can
use the password that we press automatic
generates for you that's a very secure
password or you can put something you
want in yourself and also keep this sort
of media to say how secure they think
your password is because I'm working on
local server I'm not to bother so I'm
just gonna put something in it just says
it's a weak password that's fine for me
confirm the user a weak password and
we'll just put an email address in there
and we'll just put just a random email
address in there just we've got
something in it obviously you're gonna
put your genuine email address in I
would recommend not checking this box at
the bottom we don't want to discourage
the search engines from index and the
site we want them to index our site that
our content so we can get found by the
search engines so now we've done that
basic information we can just hit
install WordPress that will now finalize
that and take us through to the next
screen which is where we can go through
and we can specify we want to log in so
we say let's login and we'll just put in
their usual details I put my password in
there remember me I will click login and
there we go we're now taken through into
the admin panel for WordPress we can now
go through a configure sever that other
options we need to get the ball rolling
with WordPress itself before we start to
move on and start adding in some of the
plugins we want to work with okay so now
that we've gone through the basics of
setting up WordPress we're now into the
dashboard and you can see we've got some
basic information and the screen is laid
out pretty simple at the top we've got
this sort of welcome
press wizard which kind of says a few
things that you can do to set up and
finalize the entire process below that
we've got some different panels that we
can go through and we can customize
these we can drag and drop them around
the area when you sort of install
different plugins then different options
different panels become available to you
I will deal with that in a moment
on the left hand side we've then got the
basic navigation structure we can go
through any updates we can go to the
home of the dash board posts media pages
and so on and again once we start to
install things like Commerce we're going
to get additional options available in
this particular section as well what we
can't do as you can see we've got a
color updates available so if we jump
over to that we can take a look at
what's needs to be update obtained it's
Ari and we can take a look at his things
we want to keep in you or get rid of so
at the moment we've got this anti-spam
Akismet I don't really want that on here
and we're going to use this and I select
that and I could either update it or
what I can do is I could just simply
come over to the plugins section and I
can say install plugins and from there I
can go through or I can update any
plug-in so I can get rid of anything I
don't want so for this I want to get rid
of both of these which are installed as
default is part of WordPress we're going
to select both of those choose the bulk
actions option and we're just gonna
choose delete well click OK to say we
want to get rid of those and they're now
removed so we don't need to have those
in there we'll take a look at adding
some new plugins in a moment but let's
finalize the setup process let's go to
the set inspection and you can see we've
got a range of different options
available in them
let's go through these and we'll jump
into the general section first of all so
you can see we've got some basic
information we can configure and tweak
this to make sure it's laid out exactly
as you want it to be I don't want this
tagline instant you're gonna delete that
you can see it's got the WordPress
address and the site address we've also
got the email addresses associated with
it the option to allow people to
register and so on and so forth we could
even go through and choose things like
date format and time format and what day
the week starts on so now I made a
change in there I'll hit Save Changes
natural Gible to the right in section
and you can see we've got some options
we can go through and say what the
default post category is at the moment
we've only got and categorized in there
when we create posts when you create
post categories you can come in you can
tweak this to make sure it lands in the
right relevant section when you create a
new post we leave that as is because
this particular section isn't really
relevant to what we're going to create
next up will come up the reading section
and you can see we've got some basic
settings now even though it said it's
about reading what we can do in this
section is we can come in and we can
specify what our blog post page is and
also we can either choose from the home
page being our latest posts which is
automatically generated when new posts
are added or we can create a static page
and associate that with our home page
now that's what we're going to do but at
the present we haven't actually created
any pages so we'll come back to that a
little later on you can see again we've
got some additional information below
you can tweak this is all pretty
self-explanatory you can say that to the
way you want the discussion panel deals
with everything to do with adding
comments and things so if you don't have
anything to do with comments on your
site you can come in here and you can
disable or enable in the options you
think but if you're not did it with
comments most of this is fairly useless
to you the media option allows you to
specify the different sizes that are
associated with the media that you
upload in other words the photographs
and any video you may upload and so on
so this deals with the photographs or
images you'd upload you can see we've
got thumbnail medium size and large
sizes we've also got the option to
organize our files now what this will do
is if you leave this ticked which it is
by default it'll create a folder based
upon the year it'll then create folders
based upon the month and every time
something's uploaded it'll drop it into
the relevant folder so for example June
of 2018 then you'd have a folder in
there that would drop all the images if
you upload your anything during that
month and that year up to you how you
want to deal with this it can be good or
it can be bad depending upon how you
want to structure your site we'll leave
that as is for now as with all the
settings for the medium-large and the
thumbnail size what we are interested in
though is the permalinks now permalinks
is basically the URL that is associated
with any page or post on your site now
this is important to make sure you get
this right because this will have an
effect upon your SEO your search engine
optimization
but also it has an impact that if you
were sharing a link with someone if you
got a link like this one for example you
can see which is quite long-winded it's
put to you it's put the month is put the
day it's also put a name of the post it
all gets really convoluted and long so
what I would recommend you do is use the
post name as a bare minimum
gives you a much more streamlined URL to
anything you post on there if you want
to create a custom structure you can do
that as well you can also see you've got
optional four category Basin tag base
we're not gonna worry about those we're
just going to leave the post name to be
the default setting for our permalinks
and hit Save Changes so once we've done
that we've done the basics of setting
everything up so let's just jump back to
the dashboard what we can do on here now
is we can get rid of this could pretty
much tell all the things I want to do so
let's just hit dismiss now just to go
back over this dashboard you can see
we've got these different panels it's up
to you if you want to see these you can
minimize them by clicking the little
arrow in the top right hand corner but
what you can do is jump over to the top
right-hand side and you'll see we've got
the option that says screen options in
there we've got a series a tick boxes
that relate to the different tabs or
panels you can have displayed on your
dashboard so if you want to you can
easily get rid of these and have a
completely clean dashboard and you can
take that back up out of the way now
each of the sections inside the
dashboard for WordPress has this option
so for example if we dribble to the
pages section you can see we've got
screen options in there and we've also
then got different tick boxes that are
associated with the pages we've got one
for posts media and so on so you can
customize the interface to a certain
extent by using the screen options in
the top right-hand corner of any of the
panels inside the dashboard okay so now
that we've got WordPress setup we've got
it configured is most basic fashion
let's go and add some of the plugins
that we need to get our online shop up
and running ready to start putting
products in and creating pages so we
need to do is just simply come over to
the plugins section and come down to add
new once you do that that'll take us
over to the plugins dashboard you can
see it shows us some of the most popular
plugins we can filter things through on
this - we can go through popular and
recommended and so on we can choose to
upload a plug-in if we've got something
that's not available in the WordPress
repository so we could easy I put a
plug-in from them what we are going to
do is just come over we're going to
search for our first plug-in which in
this example is going to be Roo Commerce
that will then search there's a database
find any plugins that match that
particular keyword and you can see we've
got WooCommerce being the first option
and then a range of different add-ons
and extras that we can associate with
the WooCommerce plug-in itself we're
gonna leave those for now what we're
going to do is come over and say install
now on the WooCommerce option that'll
download that to our copy of WordPress
and it will then go through and ask us
to activate that and go through any of
the other options after we've activated
it now before we activate it once it's
already finished installing we're gonna
add a few more plugins that we can then
go in and activate all of them at the
same time just to speed up the process
so the next one we want is elemental so
we're going to search for that and then
we can see we've got elemental page
builder now the elemental page builder
is completely free you can use this for
absolutely no cost
it's a full-featured great way of
creating drag-and-drop pages so you can
get really creative without needing to
touch any underlying code but on top of
that we're also going to install the
commercial version of elemental or
elemental pro as it's called and what
that does is it builds on top of the
free version and gives us some extra
functions some extra tools or widgets
that we can really use to enhance our
layout and it works great
alongside WooCommerce so that's gonna
give us some more function but like I
say that is something that is a
commercial add-on the link is in the
description below so if you want to
check that I would recommend going to
take a look at the Elemento comm website
where you can see exactly what's on
offer but for now let's install the free
version so let's go through the same
process we'll just click on install
that'll go through and then ask us to
activate it once it's downloaded a copy
and put everything in place ready to
start working so again we're gonna leave
that deactivated for now the next
plug-in we're going to look at is SEO
framework now this is a great way of
adding in extra SEO or search engine
optimization tools into your website now
one most common ones you're gonna come
across is the Yoast SEO framework which
is a great plugin but I have found that
up until the current version I haven't
tested the latest version it does tend
to have a little bit of an impact upon
the speed that your site loads so the
SEO framework I found just tends to be a
little bit quicker it still gives us
almost users the
they need to get great SEO SEO options
on their website so let's just go and
find that so we want the SEO framework
again we'll let that load in and we'll
install it from there so there we go da
the SEO frameworks will install that now
again they'll go to the process of
installing and we'll activate it a
little later on
and the final plugin we're going to take
a look at is to enhance the security on
our site now again there are lots of
different security based plugins that
improve the security of your WordPress
website and then what I prefer to use is
a theme security so we're going to
search for that and once that's
installed we'll activate that later on
so there's the basis of the plugins that
we want we now need to go through the
slightly different process of adding in
some of those commercial plugins that we
don't have access to without sort of
paying for them
so the process is pretty straightforward
we can upload the plug-in from this
point so what I do is I go to download a
copy of Elementor Pro and then we'll go
through the process of uploading that to
our system ok so we're going to do is
click on upload plug-in that allows us
to go through and choose the file form
our computer so I'm gonna click on there
I'm gonna access the elemental profile
so we're gonna click open and then click
install now so that's gonna upload that
go through the process of installing
everything and you can see it now takes
at the point of activating the plug-in
if you retired the plug-in installer and
let's just trip over to the installed
plugins section okay so we've got all
the plugins that we need we just no need
to activate those you want to start
working with now for this I'm gonna go
through first of all activate Elementor
because you need to have that installed
before you can start working with
elemental pro next up we're gonna click
on activate elemental Pro that's going
to go through and ask me to activate my
license which I'll do in a moment next
up we've got WooCommerce so let's
activate that and then we can go through
the process of setting that up before we
come back and worry about anything else
so click on activate once you've
activated it that's gonna go through the
wizard and allow us to put some basic
information in to configure the basics
of our store I don't need to do this at
this point you can come back and access
any of the steps or any of the options
are all available so you're still in the
settings section so you don't need to do
this I'll recommend for
good way of doing it so the first thing
we need to do is go through and put
where our store is going to be based so
I'm just going to put some information
in here so we just put my street my city
and I just put some random numbers in
there and letters in there okay so we
put the information about where the
store is located next that we've got
what currency you're going to be using
mine's gonna be in pound sterling but
all you need to do is go through and
find the option that works for your
particular store we've then got the
option to tell WooCommerce what type of
products we intend to start sell so
we've got the option to sell both
physical and digital or with yourself
just digital or just physical the reason
it asks you this is basically because if
you sell digital products you don't need
to worry about shipping and you don't
need to worry about delivery addresses
however if you're selling physical
products those options come into play so
we'll leave it to be selling both types
of products because then I can show you
later on how we can deal with shipping
next up we've got a little option that
says do you want to allow WooCommerce to
sort of gather data about what you do
we're gonna say no we don't want that
now if you wanted to you could click on
not right now this will close the wizard
down and take you back into WordPress
itself but we want to sort of go through
the wizard so we're gonna click on let's
go provided we put all the information
in that'll take us over now to the next
step which is choosing the payment
option so you can see we can choose
stripe PayPal PayPal standard or offline
payments and if we expand this out you
can see we've got a couple of different
offline payment options obviously choose
the option that works for what you want
to do so for this example I'm gonna say
I'm gonna give PayPal standard and we'll
just leave the email addresses that
let's find it's not my real email
address for it but that's okay and we're
also gonna say we're gonna have cash on
delivery this just gives me the ability
to go through and test things out
without worrying about setting out a
PayPal sandbox account to test if the
payment process works or use a PayPal
live account so I just use that for
quick tests and then I'll do a live test
on the payment option that I'm actually
going to physically be using so the next
step we're gonna click on continue
that'll take us through now to the next
step which is to deal with shipping so
you can see we got the option for ship
in zones we've got a flat rate we've got
free shipping we're gonna angle to a set
of costs and so on locations not
covered by your particular zone that
you're setting up we've also got then
the option for the weight unit it's
going to be used if you use in
calculating shipping rates based upon
the weight of an item or you've got the
dimensions where you could use the
shipping to be based upon the actual
physical dimensions of a product that
goes about beyond what we're going to
cover in this video so we're going to do
is we're going to set some basic
parameters we just say a flat rate or
for example 495 that covers us for any
of the purchases based upon the United
Kingdom because that's what we set at
the first step where our stores located
and we'll say anywhere else in the world
is going to be 995 again we can really
come into this and we can configure this
in a little bit more detail later on
down the line but if you want to see
about shipping I've got a couple of
videos it'll take you through the basics
but also take you through some much more
advanced ways of dealing with shipping
I'll link those in the description below
so if you want to check that out in more
detail more lingo in to in this
particular video I'd recommend checking
those out ok so we put the basics in
there too click continue now with any of
these options we can go in or we can
configure and tweak these later on down
the line so we don't need to worry if we
make a mistake we can go back in and
make changes later next thing we've got
do we want to install the storefront
theme now the storefront theme is a free
theme that the developers of commerce
have put together it is based around
working with a WooCommerce website we're
not gonna use that we're going to be
using ocean WP as the theme so I'm gonna
uncheck that to say I don't want to use
that you can see also the option for
automated taxes now this is a paid for
service if you think this is something
that you find useful for your store then
you can just enable that for this
example we're going to leave both of
those unchecked and click on continue to
go through the activation process now
the activation process is basically do
you want to connect this up to the
jetpack sort of suite of plugins now
jetpack is will contour say it's
WordPress is sort of suite of advanced
plug-ins for things like SEO for things
like linking things through to your
social network accounts there's a whole
ton of things you can do with it
again if you think this is something you
think is useful check it out beforehand
if you already know about jetpack and
you'd like to connect to it just add
your account details on hand to connect
a jetpack
go through and connect that I don't want
to do that I don't want to use that on
my store if you're looking on you and
you're thinking well where do I go now
there's nothing has to continue without
connecting to jetpack right at the
bottom in gray on gray you can see we've
got skip this step so we'll click on
that that goes through now and says
you're now ready you've done all the
basics we're good to go so we can do now
is you say do you want to get tips and
so on about how to work with WooCommerce
up to you drop your email address in
there click yes please
that'll sign you up and you'll start to
get notifications and information from
WooCommerce next that we've got the
option for next step to create our first
product or we can import products or we
can just say return to the dashboard or
there's some more options for some
guided tour videos and so on I'm going
to say return to dashboard so we'll take
a look at dealing with products a little
later on down the line so click to
return the dashboard and you can see now
we've got a couple of different options
that are popped up to do with the fact
we've install this let's just get rid of
those you can also see we've now got
some new panels available on our
homepage so these are not specific to
WooCommerce so if you are dealing with
selling things online then your
dashboards going to start to give you
some information when you start to get
orders and it's a great way of sort of
seeing exactly what's going on with your
online store so there's the basics we've
now configured the basic setup of
WooCommerce now let's take a look at the
next step which is getting our Elementor
Pro activated going through and setting
up some other options so if you
purchased a copy of Elementor Pro thing
you're going to have to do is activate
your license that's pretty easy all you
do is click the activate your license
that'll take you through and you can see
we can now go through and point our our
code in there and then we can activate
it so I'm gonna do that I pause the
video just to get other way so you can't
see my access code so let's take a look
at doing that okay so wall commerce is
now activated so I've got the ability to
start working with the pro version so
we've got that done the next on our list
is to install the theme that we're going
to use and any related plugins that come
with that so we're gonna be used in
ocean WP now ocean WP is a completely
free theme but what I'm also going to be
using is some of the commercial add-ons
that are part of the theme pack that
allow you to get more out of the theme
now again it's one of those things you
don't need to use this it's just gonna
make your life considerably easier if
you really want to get in and customize
the way that your store looks so we're
going to show
WP and we're gonna go and grab that
theme and install everything from thee
so tripped over to ocean WP now and I'm
ready to go and download the theme so
you can see the option for download
we've also got a lot of other options on
the including the extensions that are
associated with it there's a range of
free ones which I recommend checking out
because there's some really good ones in
me but also like I say this commercial
ones let's go to click on download
that's going to take us through and
allow us to put our first name and our
email address in there to go and grab a
copy of ocean WP so once you've done
that you'll get a link you can download
ocean WP and then you can upload that
ready to start configuring the way your
site looks I've already gone through and
done that so I just going to upload my
copy of ocean WP now if you're using an
FTP program a file transfer protocol
program to upload your files to your
hosting account you'd see the same kind
of structures we have here this would be
in the public HTML folder and you'd have
this structure which is your WordPress
structure so we're going to do is go to
the process of just adding in the
relevant files for our ocean WP
installation so what I do is I'm going
to come over to the wp-content folder
open up and you can see we have the
option there for languages plugins
themes and so on we're going to come
into the themes option and any themes
that you currently have installed will
be listed in there so we're gonna do is
with our two things the ocean WP theme
itself is the theme that contains all of
the files that are associated with it
however I always recommend putting a
child theme into your site because it's
much easier to make edits to the child
theme files and then if you later on
down the line make some changes they
won't get overwritten with updates and
so on so this is the best way of working
so first of all let's put ocean WP in it
so I've downloaded that it's not the
most current versions we'll take a look
at the update and I'll in a moment but
all I need to do is just drag and drop
the ocean WP folder into my themes
folder like I say this works exactly the
same whether you're working on a local
machine like I am or whether using an
FTP program and uploading files directly
to your server so there's the ocean WP
folder next up we're going to put the
child theme in them like I say this
works in exactly the same way so we will
just drag that over the links for these
will be in the description below so you
can just jump over and grab these
yourself
the way you got inside the child theme
is if we open that up we've just got a
couple of simple files got a function
stock PHP file and a Styles dot CSS file
now these are the two key files that are
required for a child theme so what this
basically means is if we jump back over
to the oceanography folder you can see
there's a ton of folders in there and
files and so on all this makes up your
particular theme but what happens is
when you activate the child theme as
long as the parent theme is as in the
same folder then WordPress will look at
that and go okay we'll all the files
that are inside the sort of parent theme
will be used even though the child theme
is selected now I can set a bit
confusion but what happens is if you
make changes to the functions.php file
or you want to add your own custom
styles and CSS classes in you can do
that to those files inside the child
folder and that means that when you
update the core the master or the parent
theme nothing will be overwritten inside
your child theme I'd say it might sound
a little confusing but I would always
recommend like I say just work with a
child theme it just gives you more
flexibility and less chance of causing
problems later down the line if you make
changes to the actual files to your
theme itself okay so we've done that
next up we've got a couple of plugins
that I want to add which is part of the
ocean WP theme so I'm going to just jump
back out of this I'm going to the
plugins folder again this works exactly
the same if you were working with a
version on an FTP on a server so what I
want to do is just upload those files or
those plugins that I want to use the
first one is the ocean elemental widgets
and what that does is it gives you some
extra widgets inside elemental that are
specific to the ocean WP theme now this
gives you the ability to customize the
theme and do a lot more with it based
upon using elemental so you don't need
to know any short codes or cold or
anything else so it's a great way over
here to work and customize your site's
look so we'll drag and drop that into
there
next up I want to use the actual sharing
option so we've got ocean social sharing
which allows us to share this via social
networks like Facebook and Twitter and
so on again really really useful little
plugin and finally for now I want to put
the ocean
cheering this gives us some sharing
options for the products and works
really well with WooCommerce so we've
got all the different plugins or add-ons
that we wanted we've also uploaded the
theme and the child theme we now need to
go back into WordPress and activate
those before we could start working with
them okay we jump back into the
dashboard now of WordPress so what I
want to do is just come over to the
appearance tab choose themes and now we
can go through and activate the theme so
you can see we've got the child theme
and we've got the parent theme now at
the moment we need to update the parent
sequence is a newer version than what
I've uploaded so I'm gonna hit update
now let that go through and update it
but we're going to activate the child
theme so once that's finished updating
we've activate the child theme and then
we'll start taking a look what we can do
okay so let's activate that that will
now change the look of our site tells us
any plugins that need to be installed so
you can see we need to install the ocean
Etra plug-in this is a free plug-in that
just expands the way that ocean works
with your particular copy of WordPress
so let's just install that so we say
begin installing the plug-in so we
install it once that's installed we'll
jump over to our plugins and we'll take
a look at what else we need to activate
okay so that's done so let's just chill
with our plugins go to install plug-in
section and we'll activate those plugins
and update anything needs to be updated
so ocean elemental widgets the sharing
the sharing that'll do once you've done
that we click at the top and we'll say
update we'll update that and once
they've finished updating we'll just
come in and we'll activate those so
we'll just select the plugins we want
come down and we'll just say activate
and I don't then give us some more
options on the left hand side so you can
see as we start to install more tools
more our dolls more plugins and themes
and so on we start to get more options
in the main navigation in our dashboard
so that's gone through everything is now
set up ready to go so let's just open up
a copy of our shop and take a look at
what we're currently working with then
we can start taking a look at how we
want to customize the look of this to
get to start to look the way we want so
this is what we're currently working
with pretty vanilla looking copy we've
got nothing really going on the layouts
a little bit all over the shop we've got
no content in there so let's take a look
at start to customize this
back in - what first thing we want to do
is create a couple of key pages that we
need so she's coming to the pager
section and we click on all pages see we
can see what's currently installed now
you'll take a look and we've got a
couple of pages that we didn't create
the basket check out my account and shop
now these are automatic created when you
go through the wizard creating a copy of
your commerce on your site so you don't
need to go to the process of setting
these up it's done automatically then
you can see we've got sample page now a
sample page when you install WordPress
that's one of the pages already created
so I would recommend getting rid of that
so we've just been that now discuss
affirm creates other pages that we want
so let's click add new now we're not
worried about put any content into these
we're just realistically going to create
the basic placeholders so we can then
set up the structure create the menus
and so on so we can start creating our
store so we're gonna do is gonna call
this home page we're gonna come down and
we're gonna well let's just publish that
we'll just leave everything else for now
we'll come back and take a look at these
options later
so we publish that page we'll click to
add a new page
this won't we're going to call contact
again we click on publish add a new page
it will have terms and conditions always
good to have terms and conditions on
your online shop so you can make sure
you cover yourself it's also very useful
because you can specify that during the
checkout process that the person is
purchasing items from you agree for the
terms and conditions this is a good
thing to make sure you cover self in the
eventualities you may have a dispute
further on down the line with the
product or service you might provide
okay so we create this or the basic
pages next I'm going to do is go through
and set up our basic menu structure so
I'm going to come down to appearance I'm
going to come down to menus now in then
we can go through and create our menus
so first I'm going to do is call this
one main menu click create menu and then
you can see down the left hand side we
have a whole range of different options
available we've got pages post custom
links categories menu icon settings
WooCommerce endpoints we've also got
more options if we take a look at up in
the screen options at the top so we can
really come in and we can find him and
create some really complex navigation
should we need to with a whole
range of different options we've also
got placement for our menu structure so
we're going to do is this our main menu
system with a key navigation area so
we're going to do is we're going to put
in some key pages let's click on View
all and we're gonna go through and
choose the ones that we want to put on
them we're gonna say home now you wonder
why we choose home instead of homepage
this is one of WordPress is sort of
endpoints so it'll know that whatever
page is set is the home page that's what
it'll display so we'll say at home we'll
put in checkout will have contact will
also have shop now terms of conditions
will put in the bottom menu later on
we're gonna do is we will click Add to
menu once you've done that we're now
created our basic menu structure we're
gonna specify this is going to be the
main menu now this is something that's
specific to the ocean WP theme so you
may find options about menu settings
this section right here is a little
different if you choose a different
theme it should all be pretty
self-explanatory and if you're not too
sure check out the documentation that
comes with the theme that you using it
should tell you and explain exactly
what's going on for creating menus okay
so we've got this option set up it's not
in the order that I want to work with so
I'm gonna just reorder these by dragging
and dropping them around so we're gonna
say that we want our home sharp checkout
and contact if you wanted to you can
easily indent any of these and they
suddenly become sort of sub menus then
sub menu items so in other words if you
click to expand checkout then you see
contact underneath it so this is a great
way of gonna create more complex sites
one not having menus that stretch on for
miles so to get rid of that we just
basically push that over to the left
hand side remove the indent now becomes
apparent sort of menu item click on save
menu and we're done with the basics name
next that we've remember back to the
beginning of the video I said we can set
up exactly what page we want to be as
our home page so let's go and do that
now we're gonna come down to the reading
section which is reading and in the
we've got the option to say your home
page displays by default is your latest
posts but we wanted to be a static page
so we click on there when I set the home
page to be homepage that's now going to
display the content that we put onto our
home page ourselves so when we go in and
start creating our custom layer to show
the things that we want on the home page
that's going to reference the right
Paige when anyone clicks or views our
website so we click on Save Changes and
we've done the basics so let's just jump
back over now to my test shop refresh
that and we should now see that we've
got a slightly different layout we've
got rid of that area of text because
that was going to show us the sample
post that we had we've got rid of that
our navigation structure is displayed
we've also got some extra options in
there we've got our little sort of
basket icon we've also got a search icon
we can come in and fine-tune all of this
and we'll take a look at that in the
second half of this video but let's go
through now a set of some of the basics
of working with our store itself now the
reason I've chosen ocean WP as our theme
of choice is because it has a really
advanced customizer in other words it
gives us a really intuitive way of
customizing tons of options for our
theme to make sure that it looks the way
we wanted to beauty of this is the fact
that even if you don't purchase any of
the extra plugins you still have a
really fully featured theme to work with
absolutely zero cost so let's just go to
the appearance section you can see that
the option for customize gonna click on
there and that'll take us into the
WordPress customizer
the WordPress customizer is a way of
going through and configuring your store
and all the different options that your
theme or WordPress and allows you to
sort of customize so you can see what
this does is on the left hand side got a
whole range of menu options we can click
and you can see we've got options we can
come to other ones which have more
options available so for example general
options we can click on me we now have
second-level options so we click you can
see we've got a whole range of options
in me we've also got in the main pane a
visual representation of a page that
we're working with you can easily come
in and change any of the pages you want
to go somewhere else you can easily
configure that so you can see exactly
what's happening when you make a change
so we're going to do is we're going to
go through some of the basic options
things like the fonts the color scheme
is going to be used some of the layout
options once you've done that we're
gonna take a look then and how we can
start to customize the different pages
and the different page elements like the
footer area for example or maybe even
the navigation we're gonna take a look
at how we can create custom options
there so we can make sure that our store
stands out from the rest it isn't just
using some kind of cookie cutter theme
to half a dozen options that you then
kind of stuck make it look like
everybody else is ocean WP with a couple
of plugins really gives us a ton of
options to create really customized
looking websites okay so let's get some
of the basics out of the way so we can
deal with the layout of the web pages
then we can jump over and start creating
those pages in a more manual fashion the
first thing I'm going to do is gonna
come to the general options section in
there we're gonna come up the general
settings as you can see we've got a
whole range of different options that
allow us to specify the default way that
pages are displayed as part of our theme
now don't worry about this you can
override this on a page-by-page basis
when you create those pages but I like
to set this up right the way at the
beginning so it means that I'd not have
to go through what edit every page where
I don't want things like the right
column and things along those lines so
you can see because things like the
layout style the container width and so
on all I'm really interested in at this
point is to set this app to be full
width with no columns on the left or
right so once I do that you'll see the
preview in the right-hand side then
displays exactly what I've chosen
we've got rid of some of the actual
information on there we now need to go
through and configure some extra steps
so I don't really want this title bar at
the top I want to create a custom footer
and the navigation is okay at the moment
we can go in and change that if we want
to let's just jump back out of this you
can see we've got a whole range of
different options in like page titles
and so on so if we come in there you can
see we've got the page title at the
moment homepage is showing up what I can
do is I could specify whether that's
gonna be visible on devices the style
what tag is going to use padding colors
and so on when do it's gonna come down
you can see we've got style we can
choose from center central minimal
background image and so on but what I
want is hidden that's gonna get rid of
that and give me a nice clean blank page
to start working with jump back out of
this but come down and choose the scroll
to top option and in there we can create
our own customized scroll to the top of
the page this will appear in the bottom
right-hand corner when you specify it'll
do is it'll basically mean that when you
scroll down the page instead I'm to
scroll all the way back up you can
simply click that little link in the
bottom corner and that will then take
you right back to the top of the page
it's one of those things when you're
dealing with longer pages it's a great
way of giving some user interactivity
and making things just a little bit more
intuitive for the end user
so you can see we can choose from any
kind of arrows so we want to use the
button size and so on
I'm gonna keep this pretty simple I'm
just gonna use this little arrow by here
and leave all the default colors for now
that's fine you won't see it at the
moment we don't actually have any
content on there but we're gonna say
we're good with that jump back out of
this now ready to just deal with some of
the styling so we're coming to the
general style of option and you can see
we've got the primary color the harbor
cover and so on I don't want the blue
color while they do is click on there
and I'm gonna put my own code in color
I've chosen that's fine we jump to the
next one now to create the harbor color
and what I'm going to do on they set the
same color again but what I'm going to
do is just drop this down to make it a
little darker so we've got a nice sort
of subtle change when the mouse button
hovers over things like buttons and so
on
so good with that come down to the hover
color on the bottom again and just set
the color that I wanted me so we create
some of the basic options jump back out
of this jump back out again and what you
can see is we got the option for things
like typography and home page settings
and so on let's just jump in the
typography and see what's available in
there you can see we can go through we
can specify a body font we can go
through a set of heading fonts and so on
for now we'll leave that as is because
the font that's being used is perfectly
fine but you can at any point come in
and start to adjust this to make it look
exactly how you want what we were
interested in is the header section and
that gives us the ability to customize
the way this header section looks up
here so that logo on the left hand side
our navigation and so on so you see this
is broken down to various different
sections we go to general you can see we
can go through and choose the style of
head of this going in there so you can
see got a whole range of options as well
as custom header a custom header means
that we could use something like element
or to create our own custom layout use
some widgets that are part of the plugin
that we purchased to go with the theme
the ocean WP theme that gives us the
ability to sort of drop in there the
menu is going to be used gives us a real
amount of control over what we want to
do with this I've got some dedicated
videos to show you how to create this in
more detail that I'm going to cover in
this video so I'd highly recommend check
and those that drop the link to that in
the description below along with the one
on how you create custom footers
but you'll see if we just choose any of
these say for example Center you see
what happens is it gives us an update
and shows exactly what's going on we
then get options that are specific to
that particular style of heading let's
go for medium
and you can see that gives us a nice
layout we got a search bar on the left
hand side I will logo in the middle and
it's plenty of space then underneath
that if we want to have a shop with a
lot of different sections or categories
or individual pages because there's
plenty of scope again you can see we
could the option for things like bottom
borders which we can turn on and off so
if you want to just disable that you can
see the ball it disappears we got the
bottom border color so we can set that
on there so we've got a whole range of
different options that we can work with
if we want to do we can come right the
way down you can see we can customize
the color the search form and so on so
let's go into there and just change that
color from the blue to the green color
that we'd be new since we've got
consistency throughout our site okay so
you can see we've got the menu position
left right center height and so on I'm
happy the way that looks for now so we
leave that as is and just jump back out
of that you can see we've got things
like head of media logo menu if we come
into there you can see we can customize
this but a whole range of different
options for customizing our menu at the
moment is pick up the nice green color
we've got but if we want we can come in
and change those over as well we can
even control the type of effect that's
actually displayed when the actual menu
links have taken sort of your mouse over
them so you can see that we start to get
different animation effects and again
let's just go in the link effects color
change that to the green color we're
working with and you'll see now that
immediately picks up that different
color on this so very easy to work with
gonna put that back to no effect for now
but very easy to work with and customize
user notion WP okay so I'll leave it at
that for now we're gonna hit publish on
this so we can sort of commit those
changes we've just made to the theme
layout we'll come back in a tweak as we
go along as we see different things but
that's enough for now we're going to do
now is gonna jump over and start working
on the actual home page and customizing
the layout of that to fit in exactly how
we want to display our products speaking
of products we need to either add some
products or import some products that
have previously been created and that's
what we're going to do again if you're
not familiar with WooCommerce and you
want to find out how to create your own
custom products how the create products
add different options to them and how
you recommend check out the videos that
I've got on the channel to show you
exactly how to do all that in a huge
amount of detail for now we're just
simply going to import some products we
can start working with a layout as
opposed to concentrating on creating a
WooCommerce store okay
if you'd like to follow along and use
the demo data that we're going to use in
this particular video for your products
just to save you the hassle of going
through an ad in a pile of products the
easiest way of doing that is just
importing them now when you install
WooCommerce it also installs some extra
little bits and pieces that you can use
one of those is the actual demo data the
other thing is the ability to import
your products in there but what we need
to do is activate that importer so when
we in the dashboard of WordPress if we
come down to tools we've got the option
for import so I click on that and you'll
see we've got WooCommerce products and
WooCommerce
tax rates we're gonna run the importer
for the products so we'll click on that
that's going to run the import it's
gonna say right we need to choose the
file where is this file located well
let's click on choose file before we do
I'm just going to bring in the folder
structure so you can see this is your
normal WordPress install if you're on
the ftp like we've seen in the previous
view this is exactly what you'll see in
the public HTML folder so if we go into
the wp-content folder into plugins and
into WooCommerce you'll see there's a
folder in there called dummy data if you
open that up there's a couple of files
in there there's a sample tax rate if
you're dealing with that you want to
import that option we're not going to
what we're interested in is the dummy
data if you go to a CSV version and an
XML file version so we're gonna do is
we're just gonna load those in through
the importer just just close that down
say choose the file I'm wanting to do is
gonna find that file on my system so I
know that's in the C Drive I'm just
going to come down and find that file so
now they located that on my computer I'm
going to choose the CSV file and click
on open you can see it allows us to
choose to update existing products if we
already have some products added in
there I don't need to worry about that
so instance to click on continue there's
Advanced Options should you need them
and you can see you can go through and
you can specify some other information
on there but because we're dealing with
an official product sort of official CSV
file that's being shipped as part of all
commerce I don't need to worry too much
about that I just click on continue
that's not going to go through and see
we got column mapping which again we're
gonna leave all that information as it
is because it's all been laid out by the
developers of WooCommerce so everything
should be in place so we don't need to
worry about that click on run the
important that's going to go through now
and it's gonna start important as prod
she's gonna pull the files down from the
internet so we got access to the images
and things that are associated with the
individual products and once that's
finished we can then move on okay so the
import is now finished and it's imported
28 products for us if we want to we can
click on view products or we can just
jump back over and start working let's
click on view products and take a look
what's happened so you can see now we've
got a whole range of different products
in this and variable products products
on sale just so we can see we've got
some information in there that kind of
covers all the bases that we're kind of
really gonna work with or we did it with
a WooCommerce store okay so we've got
the product in it now let's go and start
creating our custom home page so let's
go back to the dashboard and in there
now we're ready to start creating our
customized home page now we've created
the basic page we can now go through and
start laying that out and populating it
with some information to really get a
nice looking page so just go back to our
pages we're gonna come down and we're
gonna choose our home page once we've
done that we've got a pile of options
available to us before we start editing
the page and creating things without a
mentor let's scroll down and take a look
at the ocean WP settings now you can see
we've got a range of different tabs on
the left-hand side you may see some
different ones in here depend upon what
plugins you may install as part of ocean
WP but you can see we can override
things so for example the content layer
the sidebar the margins and so on we can
override the basic information that's
part of the default copy of ocean WP so
we get a huge amount of control over how
we can lay our pages out of what is
displayed and what's not displayed on an
individual page web page basis should we
need to feed up at the page after bit on
the right hand side we've also got the
option because we're working with
elemental to deal with the elemental
canvas which basically means it gets rid
of any header or footer and gives us a
completely blank page for this example
we're not gonna worry too much about
that but if you did with landing page
especially if you want to focus on one
product and drive sales to it then
that's a great way of working where you
can creat create a entirely custom page
from scratch without any of the other
sort of theme options being displayed
anyway we'll leave that as is for now
we'll leave the default template content
layout we're just gonna set that to be
100% full width once you've done that
we're just gonna update the page then
we're ready to start working with
Elementor to create the actual page
layout itself
now if you've never used elemental I'm
not gonna put a huge bunch of data in
this video and what each different
component does I've already covered
element with a lot more detail again and
Link the description all the videos in
the description below so you can check
those out and really get a good idea of
what you can do with elemental but
fundamentally elemental is a visual page
builder which allows us to create page
layouts based upon rows and columns and
we can drag and drop individual widgets
for example a graphic widget or
animation widget or text box widget into
the various different cells and we can
create a really customized layout
because there's a huge amount of
flexibility and link in that in with
some of the widgets we can use with
WooCommerce it means we can create truly
customized pages to display product
information so to access this we're
simply gonna click on edit with
elemental and that's then going to
replace our normal screen with the
elemental screen and allow us to start
creating content now what it does is it
gives us much the same kind of layout as
we get with the customizer but this time
it only to be working with elemental so
you can see we've got our header element
we've got our footer element and then
the area in the middle is completely
customizable through using elemental so
if we take a look on the left hand side
you can see what all of these different
widgets on then if we scroll down we've
got a whole range of different widgets
or you can kind of think of as
individual little component elements
that do a particular job so for example
things like testimonials and tabs and
sort of social icons and so on you can
also scroll down you can see you've got
the various default WordPress widgets
which you could also put in the start to
use now the thing you're gonna notice on
here is if you're not using the pro
version of Elementor then some of these
options are not going to be available so
you can see there section depths this is
the pro element so all these different
widgets are only available as part of
the pro copy of elemental you can see
we've also got theme elements which are
specific to the ocean WP theme and the
elemental plug-in as part of the
commercial option knee so you are gonna
get sort of a cut-down experience if
you're not using those so I would highly
recommend taking a look at check-in
those so it really just gives you so
much more control over your website and
if you're really committed to creating a
great looking website then these are the
tools that are gonna get you there much
quicker and easier without breaking the
bank ok so let's start off by
creating a nice call to action header
right at the top is gonna grab the users
attention so what we're gonna do is
we're gonna drag over heading we're
gonna drag over some additional widgets
and then we're gonna start styling them
so the next thing I do is gonna drop in
a divider and finally we're gonna come
back and drop in a button so we've got
the basic elements there next thing you
need to do is set everything up now so
all the components including the
background image are all displayed so
that's pretty easy what we need to do is
select the actual contour row itself
once we've done that we can go through
and set some parameters for this so
we're gonna set this to be stretched so
the background image is going to stretch
it we're gonna leave the content width
width boxed because I want the content
to stay inside the normal flow of the
page but I want the image of the
background to expand right the way out
so next thing we need to do is go
through to these styles and we're going
to do is we're gonna set a background
image in there so make sure we've got
that selected we can click on a
background type click on classic and
that allows us to put a background image
in it
so we're gonna click on the choose the
image we uploaded insert the media and
you can see now the images in there but
it kind of looks just a little bit weird
so what we need to do is specify a few
more bits and pieces now just to make
sure that it lays out the way we want
first thing we need to do is tell it how
we want to position it so we're gonna
say we want this to be Center left we're
then going to come down the attachment
we're gonna say that this is going to be
scroll so it's gonna scroll with a page
so if we set it to fixed we'd have that
sort of parallax effect for this example
I don't want that repeat I don't want
any repeat so I'm gonna say no repeat
and sighs we're gonna leave to be cover
once we've done that we're gonna jump
down to the background overlay option
Internet we're going to put an overlay
over the top of this so it means that
the text and the button will stand up
just a little bit better to do that all
we need to do is choose the background
type we've got two options we can choose
a classic background type or we can
choose a gradient for this example going
to keep it really simple and just choose
a background color so we're gonna choose
black on me you can see that now puts a
semi-transparent black overlay and we
can control that overlay effect by
adjusting the opacity on this you can
see if we take that to the left the
overlay becomes clearer in other words
it becomes more
more transparent if we to go to the
right hand side it because morale Pakes
we lose a lot the background image so we
set that back to be fifty to start off
with if we need to tweak that we can do
that later on so these are the basic
elements in there we no need to start
styling things so we're gonna do is
going to come in we're gonna choose the
different elements now before we do that
we're gonna make sure we've got this row
selected check the Advanced section and
check this link values together and
we're gonna add a 150 pixels at the top
and 150 pixels at the bottom now this
means that we've got a nice amount of
space above and below the text and the
button and so on in there so it means
that we can see we can see more of the
image and just have a little bit more
space to let the entire sort of layer
breathe so as you do that let's just
jump almost start editing and styling
these different elements so start off
with headings let's click on that you
can see now the context options on the
left hand side change with your set this
to be centered now I'm gonna run through
this pretty quickly I'm not gonna
explain everything on there but I just
want to sort of go through and you can
see what I'm kind of doing to get the
effect we want leave it as h2 header
HTML tags we've got a heading to set on
me jungle to the style option check
check and set our text country white
we're gonna enable typography so it
means we can go through and style the
way the text looks choose a custom font
family and I'm going to use Montserrat
for this because it's a nice heading set
the weight to be around 600 pixels
transform to be application everything
is capitalized and what we're gonna do
is we're just going to increase the size
on the until we get roughly where going
to be so around about 75 looks pretty
good now you'll notice that above this
75 we've got pixels M's and RAM that
allows us to choose the different kind
of elements that we're going to use all
the different kind of settings you want
to use whether you want to use a pixel
value and M value or a Ram value
you'll also notice we've got this little
icon next to the size you click on there
we can set the size for your desktop for
your tablet and your mobile now once
you've set everything out we'll come
back in and we'll tweak some of these
things to make sure they look good on
both a desktop a tablet and also on a
mobile very easy with elemental but for
now we'll leave it we'll just set up the
basics next up let's come to this line
in the middle of what we're gonna do is
tweak some of that so we're gonna set
that to be 3 pixels to be white to match
so matches in
we're going to set this to be a width of
about five percent set and at that so we
know got that styled again we can adjust
the gap on if we want this we can
tighten it up if we need to or we can
open up that gives a bit more breathing
space let's tighten things up on there
so it goes like that okay so next up
we've got the click Me button we click
on that again we set to position we want
it to be so you can change your
alignment on there we can change the
click me and we'll put start shopping
the type you can see got a couple of
sort of predefined options in there
we're gonna leave that for now set that
size to be large we're then going to
come into the style option you can see
again we've got typography so we can
click on that and we can choose
everything we want anything like we did
previously so again we'll set this to be
monserrat making sure that the weight
and everything all kind of complies
we're going to set up to 600 as well
transform is to be uppercase style is
fine you see we've got things like lion
height and so on we can even control the
different sort of text based upon the
harbour of state and so on we're going
to change the background color of the
button and we're going to set that to be
the same green colors we used earlier so
we'll set that on there so we've now got
the right matching color border radius
we're gonna set that to zero because I
don't want to have the sort of curved
edges what we're also going to do is
we're going to give us a little bit of
an animation effect so there's some
interaction with the element so people
know when they hover over it
something will happen so we click on
harbour what we're gonna do in there is
we're going to change that and we're
gonna set an animation in there so we're
gonna set that to shrink so what'll
happen is now it'll change color and
shrink when you mouse over it so that's
a great way of setting up some kind of
interactivity that shows the end user
that something happens okay so let's
just change this now from being this is
a heading element to super clothing
store even though it's not just clothing
on you that'll be fine we'll just leave
it at that for now so if we click on
this little arrow on the left hand side
that will shrink down the left-hand
column and show us a visual display of
what the page will look like without all
the different elemental elements it's a
great way of just checking to make sure
everything looks the way you expect if
you click on that so you can see now
we've got this nice sort of call to
action set at the top with a start
shopping button
other than that we've got nothing else
on the page so let's go through now has
started now adding in our custom
WooCommerce layers for our homepage so
the aim of any online shop is to make it
as easy and as intuitive as possible to
get the end-user to buy something so the
ability to create a custom shop layout
is a really great way of being able to
control what you want to display on your
homepage and not just rely on the
default settings that may be part of the
theme that you're working with so to do
that we can simply come back onto our
widgets and we can go through we can
take a look at some of the Pro elements
now the pro elements give us some
WooCommerce based options things like
products Add to Cart elements categories
and so on now that might seem pretty
simple and not really giving us much in
the way of options but the reality is
there's a lot more functionality hidden
in there than you may think so let's
just say for example we choose the
categories option or the products option
let's just drag that in drop it onto our
page and you can see we've got some
information on there and it shows the
representation of what we're kind of
going to see so you can see we've got
things like the number of columns in the
post count pretty self-explanatory we
can set that to be 3 for example or
weakness here to be 5 and we want to
sort of do it all very simple so that's
for that back to four we've also got the
product count so that allows us to limit
the number of products that will be
displayed in this section so again it
gives us some basic control where the
power really comes in and you start
looking at the query option so we expand
that out you can see we can go through
we can filter out exactly what we want
to display in this block so we can use
various different blocks together but
each one display in different
information so for example you may want
to use product categories so you can see
any of the categories we currently have
created as part of our store are all
listed in there and we don't need to
type anything in we could simply click
in there and it'll go through and show
us all the different options that are
available same goes with the author you
can see if we start typing in it there's
multiple authors it'll go through a
layer to sort of filter it based on that
and the same goes for product tags if
you apply tags to a product you can then
use those to actually pull those out and
display them via this method we also
have some extra options and the Advanced
section so you can see we've got a
filter by featured and sale we can order
by and a range of different options on
how we want to order them again we got
order again and if that and we can also
exclude things so you can exclude the
post or a manual selection if it is
manual selection you can see we can
start typing in there and really sort of
cut down what's displayed for this
example let's keep it fairly
straightforward and fairly simple let's
just say we want this to be our featured
product section well that's really easy
to do you can see we got filtered by
click on there and we can choose
featured now you'll find that all our
product disappear because we don't have
anything featured just yet so we'll save
this out we'll jump back and I'll show
you how easy it is to set your products
to be featured so they start a display
in this section so let's just save the
page so we make sure we commit all the
changes we made we close then out of
Elementor and we're gonna say cut the
dashboard once we've done that it takes
us back to the page we'll hit update to
make sure that any changes you may have
made have been committed and then
finally we just jump back to the product
section of WooCommerce click on all
products and you can see now we've got a
list of all I'll try say we saw you're
on so if you're wondering what this star
option is is one of the columns that's
where we can specify your product is
featured and all you need to do to make
it a featured product is simply click on
it so we click on the first four
products we'll find that they will then
update and we'll have the little star
beside them and that now sets those to
be a featured product so we just jump
over to our test page and refresh that
so we can see all the changes you've
just made we'll find we now have our
four featured products listed on the
page pretty cool now let's get in and
make some changes to this this just jump
back into the admin section and start
customizing this a little bit more just
jump back onto our dashboard I'm gonna
come back down to our pages and click on
all pages to go back to our home page go
back in start editing that and click on
edit with Elementor that means we can go
back in and start carrying on editing
the page we've currently been working on
so you can see everything is back to
where it was if we scroll down you're
gonna see this some kind of little weird
glitch that you kind of get when you're
working with this particular widget and
Elementor it seems to double up what
you're seeing on there I'm not really
sure what's going on there
but it's something to be aware of it
doesn't affect the actual page itself
you can see that you know it shows on
there we just jump out go to our test
page and refresh it it's exactly as we
laid it out okay so there's the basics
so let's go through now and add some
extra information
at the moment the end-user doesn't know
what these products are you know it
doesn't know that their featured
products there's no with our sale
products or what they are so let's go
ahead and style this a little bit more
let's just some come into this section
we'll click to add a new section above
our featured items and let's put some
information in this let's just drop in a
heading and let's do the sins we didn't
last them jump back and we'll just drop
in a divider so the aim of this is to
make sure that everything has a
consistency based upon the actual style
that you've used on your site so we're
gonna do is we're just gonna simply
style these up to make sure that in
keeping with everything else so let's
just click on this our heading is going
to be monster up again so we've got it
selected we can simply come into the
style option and we can start styling
the text so again we will set the
typography set the text color this time
going to go for this dark slate gray
we're going to make sure that we use
montserrat again as i were heading our
size we can control that as well so we
can specify exactly we want on this
that's cover so like 32 pixels so it's
nice and bold set that to be the same
weight we'll set the transform to be
uppercase and if we want to we can deal
with things like the line height and so
on so we can adjust that to set that
where we want it to be jump back with
this and set to be centered so there's
the basics the same now with our line
click on that set that to be centered
we're gonna set the width to be 5% so it
matches that the weight to be three and
we've set the gap will just reduce that
right that way down so we can kind of
control everything all right while we're
at it we actually come into this and
we'll reduce the amount of actual line
height on there so everything kind of
butts up a little bit nice and neat okay
that looks pretty good we're gonna do
though is we're gonna suddenly just
change this and make it the same green
as the rest of the sort of layer that
we've got on them so making sure we have
that consistency throughout okay let's
add a little bit of space in it so we
can click on this come to the Advanced
section and what we can do is we can add
some padding so we'll unlink that I want
to add something like 50 pixels of
padding to the top and 50 pixels of
padding to the bottom okay so there's
our sort of heading section now it tells
it exactly what's going on I see this
just make that a little bit
yeah just come in we'll just bump that
up a little bit
42 someone there I will change this to
be featured products okay so now the end
user will see this and they'll know
exactly what's going on so we've now got
our featured products there so
everything is all lay that we want next
thing I want to do is let's put some
sale items in there let's just choose
items to be displayed there specifically
on sale well we're gonna duplicate a lot
of this information so do we really need
to go to the whole process of doing it
all over again no we can easily just
duplicate things on the page drag them
and drop them around the page so we can
speed up the process so let's just do
exactly that let's just duplicate this
entire section for a featured product so
all you do is come over that duplicate
the section that's duplicated that will
so we drag that down below our featured
products drop it in the rename this on
sale or sale items okay so everything is
now set up we'll do the same again on
this we'll just duplicate this one so
copy
duplicate that we've got a duplicate we
drag that down below our sale item
section click on the widget itself and
we now need to change the query to be
from featured to sale items so we've got
our sale items in here so we can hit
save on the page we now have if we just
jump back take a look
refresh the page we've now customized
our homepage to create this nice simple
clean layout that shows both our
featured items and our sale items very
quick and easy and a really great way of
displaying products that you want on me
okay so there's the basics of our
homepage created next thing to do is go
through and start editing and laying out
the various different other pages on the
site so let's just jump back over to the
admin section we finished with this page
now so we're gonna simply click to close
this down and say go to dashboard making
sure that you save this before you exit
will update the page to make sure that
everything is nice and neat it's all
saved and then we will jump back to the
appearance section and go into customize
now this is gonna allow us to go through
and customize some of the other pages
that are part of will commerce and part
the way they laid out now if you want to
get more detailed in this
want to cover this in more sort of like
depth and you want to go in and create
your own custom pages for the actual
product display as opposed to the
category display you can't really do
that out of the box with this particular
theme but you can do it with another
plugin that you can purchase which is
anywhere elemental Pro we'll be taking a
look at that in more detail further on
down the line
there's also the fact that elemental Pro
itself is due to be bringing out
different sort of options that allow you
to customize the WooCommerce shopping
pages so it's worth waiting to see what
will happen there if you don't need it
right now but let's take a look what we
can do to customize those pages okay so
we're looking at our homepage
if we click now to go through and take a
look at a product page we can cut start
to customize that so you can see the
layer is pretty much the same we've got
the sort of navigation at the top well
footer at the bottom we've got the sort
of normal layout then this part of this
particular theme and the way it styles
the actual product page you can see
we've got a list on the left hand side
which is a sort of sub column I want to
customize this a little bit more and to
do that we can come down to the rule
commerce section in the customizer if we
click on there you can see we've got a
range of different options we've got
general menu card archive single and
advanced styling so we take a look at
general for example you can see we've
got custom WooCommerce sidebar display
featured image cart page cross-sells and
so on
so we can go in and we can start to
customize things a little bit more so
let's just jump back at this and let's
go to our single product page this is
the page that we're currently working on
and you can see this gives us a whole
range of different ways we can customize
this layout at the moment it's got the
left-hand column set we could choose
between left and right if we wanted to
if you want dual columns you can do that
if you don't want to have a column
display which is the way that I want it
to be set up you can just simply choose
the full width option and that will then
completely get rid of it and give us a
nice simple clean page layout you can
see that we've got various different
things like related products and so on
underneath which is automatically
populated as part of all commerce itself
you can manually go in and specify what
products are associated with which
product so you can control this again
I'm not going to go into too much detail
about that you can do it if you want to
you've also then got the option to do
things like choose what information is
going to be displayed so you can see
we've got things like the
title if we click the little I icon that
will then hide that you can see that now
gets rid of the title there at the top
same goes for things like rating and
excerpt and so on so you can customize
exactly what's going to be displayed
we've also then got the tabs position so
at the moment got description and
reviews and it's set to be centered well
we can set that to be left we want to
all right so we can control that a
little bit we've also got the option to
control the upsells and the upsell
columns which is this section below and
the same goes with the related products
we can choose exactly what's displayed
the number of columns displayed and so
on so you can easily tweak that to get a
layout get a number of columns or so on
that kind of works for what you're doing
so it gets a pretty nice-looking layout
the option to sort of display the image
different thumbnails and so on
underneath so we can just jump back out
of that we've then got advanced styling
as an option and here you can see we can
control things like the on sale
background for example so we take a look
at this product you can see the on sale
the little tab in the top left hand
corner we can change that so let's set
that to be something like a red symbol
kind of stands are just a little bit
more same as the Stars and similar to
things like that the grid Harbor color
and so on will have changed those now so
they match in with the actual green car
that we've been using throughout so
let's just choose the green color so
you've got that consistency throughout
our layout now you notice the ending
show up on here because they're not
being referenced on this but we are
going to just change those a little bit
quickly just to make sure everything
sits nicely same goes the price color at
the moment it's using the different
green to what we're using so let's just
change that over so it all matches in so
you can see now it starts to style up
the way we want it to be same goes with
the hover color States the same for the
title and so on so just simply coming in
and just changing where we've got this
blue being reference and changing that
to the green that we are using for the
layout that we've got okay so this takes
a couple of seconds price colors seem
good on there so you saw working with a
single product now so you can see we can
come in and we can set different sort of
settings for each of the different
product categories the different product
views and so on so we can really come in
and fine-tune how all this is displayed
to make sure it matches up exactly what
you want with the store that you're
creating so again like I say it's all
very simple very intuitive just coming
through and setting these up
just making sure they've got everything
in there the way it should be with
little symbols okay now we do the same
on there so pretty good so sin come down
so you've got quite a few different ones
to do on here so I'm gonna quickly pause
the video make those changes and come
back to you okay so I've gone through
now I would just add the colors to the
way that I like them and you can see
everything is kind of looking a little
bit more in keeping now we've got all
the Styles looking pretty much the same
so we can scroll back up and we just
jump back over this and you can see
we've now got a really good-looking
page layout so there's one thing that
I'm not really too fussed on the moment
and I said little icon we've got for the
shopping cart all the basket at the mall
looks like a little handbag which is not
really in keeping with the type of
product we've got displayed on the
website well I can change that I didn't
Iike the menu cart and you can see I've
got a range of different options in
there I can choose the cart icon that I
want if you want to create custom ones I
can create exactly what size I wanted to
be to Center it vertically
whole range again of different options
that we have available to us there so
let's just change that to something a
little bit more in keeping so let's say
for example we want to use this icon or
this icon or the basket icon you can see
it updates on the page there now
sometimes you may notice a little kind
of quirk with this that when you jump
over to your test site or your actual
page itself
it shows the old icon you simply just
need to refresh your cache it's
basically just cache in that little icon
it is gonna update and it is gonna
display you just might need you to
refresh your browser first okay so we're
happy with all that we're gonna click on
publish to commit all the changes that
we've made
we now created a more customized product
page so let's just take a little look at
what we've done in action already so
let's just jump back over to our test
site refresh the page to make sure
everything is done so you can see if we
scroll down let's go and choose a
product who will say we want to take a
look at this one so click on that we've
now go in and take a look at our product
page layout so you can see all the
things we've just done of all been set
up and configured in the so everything
is laid out and styled the way we've set
set it up to be so we're looking pretty
good so far we've covered most of those
bases to get our online shop up and
running we create our own custom home
page just to make sure everything is
displayed the way we want so let's take
a look at dealing with some of those
different pages now we need to go
through and make sure that we've got
things like the checkout page and the
cart page
styled and laid out the way that we want
them to be so let's first of all just
add a product to the baskets we've got
something in the basket to make sure we
see exactly what's going on so we've now
got that in the basket let's click on
View basket and take a look so things
are looking pretty good at this point
everything is styled the way I want it
to be let's now proceed to the checker
and make sure everything looking good
there as well so jump over and you can
see the checkered is all laid out nice
and neat all the styling is in place all
the colors that we've used are all fine
looking exactly the way we want it to
so those pages are looking pretty good
but you're gonna find this a couple of
things that we haven't done yet if we
jumble to the shop page for example
which is the default page we've now got
this sort of left-hand column that
doesn't really relate to anything to do
with the shop so we can get rid of that
in a moment we also need to go through
and specify exactly what information is
to be on the contact page so we can do
that as well in a moment and we also
need to finally deal with the footer
area so the eagle-eyed among you will
probably notice as well that we're
looking at the shop in pages other than
the individual product page that the
buyer at the basket button just looks a
little bit strange it's not really in
keeping with everything else well let's
go and change that the only thing with
this is and this is down to the ocean WP
Themis we need to go in and change that
through using a little bit of custom CSS
to do that we're just going to jump back
with the customizer jump back out of
this jump back to the sort of main
section and come into the custom CSS GS
section in there we can now start adding
in custom CSS code and also custom
JavaScript code if we want to so things
like your Google Analytics codes for
example they can be dropped into there
without the need to then go in and do
anything or install any plugins then you
co decided to every single page so it's
great this is on a theme level doesn't
require anything else to be added in so
let's take a look at the CSS code we
need to drop in there and again I'll put
this in the description below so if you
want this information you could easy
just copy and paste it into site and
adjust the colors accordingly it's very
simple so let's take a look at that now
okay so copied the code now for changing
the buttons I'm just going to paste that
in here okay so let's take a look at
what's going on with this you can see
the first part we have is the different
selector that's going to be used to call
up the particular piece of sort of code
this used for the buttons next up we
just got some basic style is the
I'll color the color of the text any
transformation to the text padding and
border and so on and in fact we've also
got exactly the same just this time for
the harbor effect so all you need to do
if you use this code is changed this
first number to be the number that you
want to be the normal state of the
button in other words nothing going over
to what you can see there the lighter
green the next one is just to change the
second value and set that to be the
darker value or the lighter value or the
harbor state value whatever you want to
use you can see when we mouse over we
get the slightly darker version of it
and that's all there is to it it's
pretty simple pretty straightforward
like I say this would be available to
you so you can literally just copy and
paste this in hopefully this is
something updated in a future release of
ocean WP because it's one of those
things it's not difficult but it's one
of those areas that I don't really
understand why it's not been updated and
why we sort of still need to do this
manually anyway that's just a little
personal Enclave
other than that that's all we need to do
so let's click on publish on there and
let's take a look at the front end of
the site to make sure everything is
working the way it should be just jump
over refresh this you can see our
buttons now take on this the right kind
of state that we want on this that's all
looking pretty good looking pretty nice
shovel to the home page make sure things
like on me again
all the buttons are set up the way they
should be all displaying all in keeping
so that's that piece done so we've
covered that tick that off the list jump
back over to the admin section now let's
jump out of this and we're pretty much
good to go onto the next step okay I'm
back in the dashboard now of WordPress
and we're gonna deal with the shop page
the shop homepage let's jump over take a
look at the page I'm talking about click
on there we need to deal with this
left-hand column I don't want that to be
part of my store so when we come back to
the dashboard we're gonna come into our
pages section I'm gonna take a look in
there and we've got shop as an option so
we're gonna click on that you can see
now we can go through and we've got edit
with Elementor so if you want to create
some more customized layouts for this we
could do if we wanted to we don't need
to we're going to keep it as is but what
we are going to do is come down and set
the content layout to be full width so
in a click on that update the page we'll
just jump back over there and refresh
the page and take a look so there we go
we've now set that up so it's displaying
just the product without that right
handmade oh nice so your left hand money
so a nice simple clean looking layout
that looks great obviously if we wanted
to change the layer to this you want to
sort of increase or decrease the number
of columns we can do all of that very
simply from within WooCommerce itself
for me I'm happy with three column
layout that's looking pretty good
obviously you've got the options then as
default where you can go through the
sorting options and the way things are
laid out all again really just install
as part of we'll call this an ocean WP
so that all works pretty nice out of the
box so now let's move on to setting up
and creating our customized footer this
is pretty easy we just jump back over to
the dashboard what we're gonna do is
we're gonna come down to the theme panel
and then they're gonna go to my library
so I think in my library and as you can
see currently there's nothing in there
now the library is basically templates
that you can call up and use in various
different parts of your site so we're
gonna do is we click on add new we're
gonna create our custom footer you'll
name that custom footer will echo to the
template section on the right hand side
and this is we're gonna choose the
elemental canvas because what we want is
a completely blank page nothing on it at
all choose that scroll down we're gonna
do is we're gonna specify that we're
going to disable any margins I'm gonna
set the content layer to be 100 cent
full width so we've now got control of
exactly what's going on on me I will hit
publish so we've done that we created
the basic hole that we no need to go
into Elementor and start creating the
actual layout itself so let's just edit
with elemental once we've done that is
loaded in we can start creating the
layer that we want so you are only
restricted by your imagination of what
you want to achieve with this for this
example we're going to keep it fairly
straightforward we're gonna create a
multi-column layout and we're going to
put in some key information into it so
we're going to do is we're simply gonna
come over and we're gonna drop in some
text it's an information and so on so
let's just grab the text editor bring
that over drop it in the way to do now
is we can simply click on this top left
hand corner and we can now just add in
two extra columns so you've now got a
simple three column layout so to start
off with I'm gonna just duplicate the
contents we've got three text boxes so
in the click duplicate those
drag-and-drop them over
to the relevant different columns okay
now you can't put exactly what you want
in here for me I'm just gonna keep this
really straightforward the kind of thing
that I would do on most sort of
e-commerce stores is sort of company
address and we'll just drop that the
next line we're going to put something
like useful pages again got that in the
next line I will put some about s
information in this point so about us if
I want now I can also go in I can styled
the different elements we've set this to
be for example I'll have that as heading
for and the same on the other two so
let's just click on those to activate
those heading for finally heading for
one company address as well okay so we
could leave it at that if you wanted to
we could do things like added some extra
widgets so let's just say for example we
wanted to have social media in there
where we could simply drag in some
social icons in the style those up set
into what we want the size and so on so
easily customize and tweak those to get
them exactly as you want official color
or custom colors you know you can do
whatever you want with this there's just
a line those to be to the left so it
thinks it's nice and neat and we'll hit
save so there's our basic page created
or our basic footer created now if we
just jump back over to the page and
refresh it you'll see that nothing has
changed the footer isn't being used to
do that it's very easy let's come back
out of this go back to our dashboard
jump back over then and into our
customizer
once you're in the customizer we're
going to find the footer section once
that loads in and you can see we've got
of to footer blocks if we scroll up the
page and take a look we've got the
footer bottom which is this section that
has the copyright information in it and
we've got the footer widgets click on me
now you can see say it says enable
footer widgets if you uncheck that it'll
just completely remove that even if
you're not using widgets on it so we say
enable that but what we're going to do
is you can see we've got visibility
fixed footer on and so on we say yes to
fix foot because that means that no
matter how
toward the pages the football always
stick to the bottom of the page which is
just a good way of working you can
create a parallax footer effect if you
want which is quite cool again entirely
up to you what we are going to do though
is choose from this light you can see at
the moment says choose a template
created in theme panel my library which
is what we've just done so they click on
there and choose custom footer which is
the name of the photo that we just
created in there so whatever you name it
if you create multiple different sort of
templates inside the my library section
they'll all be listed in there so once
we click on that you'll find that it'll
refresh the page if we take a look now
there's the three column layer that we
just created our custom footer what we
can't do is we can come down we can
adjust the padding and the margins and
so on we can come in and choose the
background color so you want to change
that to a different color we can easily
do that text color let's lighten that up
a little bit so it stands out a bit
better of the background and you can see
we've got links color and border colors
and so on well I've just changed the
links color again to be the same Green's
we've got everything else we have that
consistency throughout our instead
entire store let's just change that so
we now know that our links are going to
be consistent
now this again one of the little quirks
with this particular theme you can see
because you created a custom footer we
don't have the styling done on these
particular sections well that's very
easy to do so this again jump back at
this and go back to the custom CSS
section and we can create our own custom
CSS so we can just come into this we
know it's in the footer so we're gonna
put footer and we're gonna put H four
which is the H four we chose the head at
we chose sorry
open and close our bracket so I'm going
to do is we've set the color in there
and we'll just set it to be white so you
see as soon as we do that it immediately
updates and that's now put the
information in there a style those the
way that we want so pretty easy nothing
too difficult on there so that's our
custom footer in place you can also see
that we've got in the scroll it's hot
button that we created right back at the
top of the video because we now have
more information on the page you can
click and scroll up again really really
easy to deal with
so we're pretty much on the home
straight now we've covered off most of
the things that I wanted to show you go
hit publish on this to make sure our
changes are saved and committed to the
actual layout itself what we need to do
now is just go through and do a couple
more little
things jump back out of this come back
to our full listing so we can go and
control exactly what's going on me now
one of the things I really love about
ocean WP is the ability to restrict what
you actually search for because we did
it with an online shop I don't really
want to go and search for pages like the
checkout page or the about page in terms
and conditions we can do it without very
easily kept the general option set in
and what we go in there is general
settings if we scroll through we'll find
the search results page and you can see
the source is currently said to be all
post types click on there you can see we
can tell it to restrict what's searched
again so in other words we could say we
only want to search posts pages or in
this instance of products you click on
that and now any searches that are
carried out using the search bar the
search function as part of the web site
will only search the products I think
it's a really cool little feature again
we'll hit publish to make sure that
that's saved on there we're going to do
now is we're to jump back out of this
close this down I'm going to deal with
setting up the custom menu that I want
at the top that allows the end user to
go into their account and things like
that so that's pretty easy to do when do
is going to come down to appearance and
menus click on me and once we've done
that we can now go through it start to
customize this we've got to create
another custom menu so what we need to
do is say click on create a new menu and
name this account menu create the menu
all we need to do now is add in the
relevant things that we need in the
other relevant links we're going to use
the WooCommerce
endpoints so you can click on there and
you can see we've got a range of
different endpoints on this so things
like orders downloads and so on if you
don't see this for any reason just click
the screen options in the top right hand
corner and make sure that WooCommerce
endpoints is checked and that will then
appear for you so we're going to do is
we're going to choose the various
different options on here forget the
downloads but that's not really relevant
so we will say add to menu
there's our menu structure so we could
lay this out any way we want so we can
say where we want addresses and account
details for assent orders then lost
password and finally logout so that
looks pretty good
problem being is if we do it like this
we just have a pile of
different icon was put with different
links across the top which isn't what we
want so we're going to come back to
custom links I'm gonna get rid of the
URL and then just put in the hash symbol
and we're gonna put account ok so what's
he done that was hit add that to the
menu take that up to the top I'm going
to indent all of these underneath the
account menu so what this is basically
going to do is these are all going to be
subsection of account then all we need
to do is click on top bar and save the
menu once we've done that we've now
created a custom menu that has address
account details orders lost password and
so on underneath the account menu if we
jump back onto our page and refresh this
you can see at the top now we have all
those relevant links that we just
created so we clicked are going to see
that and redresses you can see we now
have all the information for addresses
again if you want to any orders we've
placed they'll all be listed in here so
you've given the end user an easy way of
finding out how to access their account
information for me I don't really like
that on the top left hand side so we're
gonna do is jump back into this come
back into the customizer and we'll
specify we what not to be over the
right-hand side that's very easy to do
what we need to do is wait for the
customizer to load in then we need to
come over to the top bar section click
on me and you can see we've got general
if we could enable or disable it specify
what devices is shown on if that's
relevant the colors and so on so again
has changed that to make sure it's got
the same green color as you been working
with so jump back out of that content
you can see if we wanted to want to
create our own custom layout we could do
that there get rid of that and social we
can clear it and specify that so we can
disable the social if we want to and get
rid of that completely so we need to do
now is just jump onto the general
section and specify that we want this
menu to be over the right-hand side so
you can see at the moment it says left
content right social click on that and
we can say left social right content
once you do that you'll see it will just
pop it over to the right-hand side now
even though you see it says place your
content here don't worry about that
because that's disabled when you
actually see the site and if you don't
like having that on there you can see me
come back at this go to content
taker what's in there and that they will
get rid of it
pletely so we published that to make
sure it's all saved out on there and
then we're pretty much good to go so
let's jump back over refresh the page
and there's our account details over on
the top right hand corner so you've now
said to have all those different
fundamentals that an end user needs when
they want to go shopping they can buy
their products they can go through to
the account section they can view all
that they can go through search for
products everything you kind of want
final thing we need to do is just deal
with a contact page just to finish to
finalize this store then we're pretty
much done so let's just jump back over
to the admin section come back out of
the customize that we finish with that
for now and what we're gonna do is come
back go to the pages section go into all
pages and come down to contact and we
can start editing and creating this page
so the first thing I want to do before I
actually start creating the content is
just simply come down to the content
layer and set this to be full width
watch that I'm gonna click update just
to make sure they're saved the changes
then we're gonna jump into edit with
Elementor I start creating our contact
page okay we're gonna keep this really
really simple first thing to do is just
drop in a map so gonna say we have a
Google Maps in there drop that in the
top click on this and what we're gonna
do is we're gonna specify what is he
full width like we did before so you say
full width we don't want the content to
be box this time we want this to be full
width so you can see that now this is a
nice full width map column gap you know
we can kind of control this kind of
stuff if we want until we had multiple
columns we don't so we don't need to
worry about that what we are going to do
is just click for this column show me
the Advanced section and set any padding
to be 0 on there so it gives us a nice
full width finally we can do is you can
come into this we'll leave it to the
London one that's fine we'll just set
the zoom level to be 14 so a little bit
closer to what we're doing and we'll set
the height to be 500 so it's kind of a
nice full width map on there so they can
see exactly when they land on this how
to contact us okay so next up know how
to find us I should say next up let's go
in and we're going to choose a form
now the forms option inside elemental
pro will give you a lot of options so
let's just start by setting up some of
the basic parameters we want to make
sure this all sets in style wise with
the actual content we put together so
let's click on the actual element I'll
go through and see what we can do
so you can see we've got a couple of
simple form elements ago named email and
message if we want to add more in there
we can do so let's just say for example
you want to put a phone number in we can
click expand that out and we can just
change that to whatever we want so text
is fine and we'll say telephone
placeholder telephone again you can see
we can specify where it's a required
field or not we can also reorder these
to make sure that everything sits
exactly as we wanted to so let's just
say for example we wanted to have the
email address and the telephone numbers
side-by-side well that's easy to do
expand that out set it to be 50% same
with the telephone option set that to be
50% and you can see it automatically
then positions itself as you want so
that's pretty cool very easy to deal
with input size we can specify on there
so we'll adjust that to be large we'll
take off the labels I don't really want
those on there I'll keep it simple and
clean submit button you can see at the
moment that's sort of full width and we
can specify again make sure exactly how
its styled on there we're going to come
over and we'll say put the Style section
come on to the button and you can see we
can come into that and we can do the
same as we done before so we can set up
some simple typography on there let's
just say we want that to be montserrat
as well there we go
we'll say we want that to be 600 and we
want it to be uppercase again so you can
see it's just very very easy to deal
with
we've got the text color which is fine
we've said that a white to make sure
it's all styles we want and we've got
the background color we can come into
that now again we can do what we've done
previously which is set the relevant
color there so everything is consistent
final thing we need to do once we set
the color on there is to get rid of that
border radius because we don't have that
one in the other ones so squeeze that
off nice and neat and tidy if we want to
we can choose the typography as well so
we can easily style that what I am going
to do though is I'm going to come to the
field element test covers filing and
leave that as it is but the border color
I'm just gonna lighten that up a little
bit so it's just a little bit easier to
see sort of hide away as it were so
streamlines things and just make the
text color just a little darker so that
it kind of stands out nicely okay so
there's the basic elements put together
in there the next thing we need to do is
specify how the form actually works so
when you do it come back to content and
you can see we've got some options so
we've got a submit button which you can
control that information they we've got
to do what to do after you submit
something so you can see at the moment
it says the action is to send an email
you can do more than that you can set
this and link it up to throughs to
things like MailChimp and webhook and
drip and so on so if you were doing this
is a sort of signup form you can easily
link that through to the relevant sort
of system that you're working with for
now we'll leave that as the email next
that we expand the email option you can
see that now gives us the ability to
choose what happens who gets the email
what email subject what fields are
transferred over and so on and so forth
so you can see we can add in multiple
different emails what all we need to do
is just separate them with a comma so
this is the - in other words who's the
recipient for the email next that we've
got the email subject so we can put in
whatever we want from there the from
email we can have that to be sort of
like the from email account which is
generally going to be the same as you
sort of to email next up we've got the
from name so you can set that to be
whatever you want your Sharp name for
example then we've got the reply to now
this is the thing that needs to be
careful by default this is set to be the
same as your from email and your to
email what you realistically want to do
with a form like this is change that
over to be the email field so whatever
email address is included in the email
field and with the person that sends it
to you from your shop that's who your
reply to would be again you can see see
at BCC this so if you want to send a
copy of any emails you send back from
the OL you get from your store to
someone else want to see see them in or
BCC them in you can do that and again
you can set that to multiple different
recipients just by separating things
with a comma then we've got a metadata
now the metadata is fundamentally what
inflation sits underneath the
information that the user that actually
sends the form to you is included so for
example the date that it was sent the
time
the page URL the user agent in other
words was it sent through from Firefox
or from sort of Chrome or something the
remote IP and a credit to elemental you
can take out anything you think is not
particularly relevant so for example you
may only want to include the date and
time or you can do that
you can also specify whether the email
the sent is going to be HTML or plain
and finally you've got the additional
options and again these are things you
don't really need to worry about if you
want to set up custom messages for
example so when the form is sent what
happens well you can set custom message
and someone there so that's the basics
of creating your form we've now created
the form I did that it necessary now
going ability for through the contact us
so the final thing I want to do is just
make this a little bit more intuitive to
kind of be a bit more in line with the
rest of the site that we developed so to
do that we're just going to come in and
we're just going to create a new column
so that add a new section in there we're
going to drop a heading in there and
finally we're gonna come back to the
widgets and we're gonna drop a divider
in there okay
so now we're going to style these up to
this same as the previous ones now
obviously we could have saved those out
as a template and call those back up and
that would speed up the process and I've
covered that in its own dedicated video
so if you want to take a look at that
check out the Elementor playlist there's
a ton of different videos on there
that'll show you how to really get the
best out of element or an elemental pro
but for now let's just keep this really
easy
let's click let's just add in first of
all a little bit of padding in there so
we click on the add in 50 pixels padding
top and bottom like we did previously
okay so that gives us some nice spacing
on there we're gonna click on the
heading step that to be centered heading
2 is fine we're gonna do is go through a
start styling that so before we do say
contact us style I'm gonna come in to
that choose that sort of dark grey
header typography yet we want to use
that we're going to come in and we're
gonna say we want this to be montserrat
again weight 600 transform uppercase and
what we're going to do is just bump the
size of that up so it's nice and neat
with 42 would think before we did the
last time
next up we should come into the little
line set that to b3 change the color to
our green color and then when they set
that we centered reduce the gap down so
you don't want to deal with that and set
that to be
10% what was it five tens five for this
one okay so we'll hit save on that and
that's our contact page then we've got a
map to show where our stores located and
we got a nice simple contact section
that'll s with the contact that should
they want to and request more
information contact us web products and
so on and so forth so let's just jump
over to our test page now and take a
look at what this page looks like on
screen so let's just jump over and as
you can see everything is looking pretty
good except for this large gap at the
top here now that's pretty easy to fix
or way to do it jump back jump out of
this and go back to the dashboard
that'll take us back to a page at the
moment it's because you've got the
margins enabled so what we're gonna do
is disable those update our page and
that'll remove the default margins that
ocean WP says at the top and the bottom
of your page so refresh that that then
gets rid of thats basically but it means
we've now got to fix the alterative
underneath so come back into this edit
with elemental on all we're gonna do is
just add a little bit of extra space in
a little bit of extra padding at the
bottom of our contact form come back
into this and we'll just drop in there
and we say at the bottom we're gonna add
50 pixels of padding at the bottom save
that jump back over and take a look
and there's our space in drop back in
the map and everything is all looking
nice and neat and tidy so there's our
shot pretty much put together we've got
our home page or a short page or check
out sections all done our contact page
is created we've got a basket all set up
nice and neat and tidy we've gone
through create some custom pages some
custom layouts all looking pretty good
there's one final thing we need to
before we wrap this video up and that is
making sure that it all looks good on
smaller devices so let's just jump back
in we're going to do is going to come
out of this page we're gonna go to our
home page and I'll show you how you can
do it on the home page and the principle
then for every other page it's pretty
much exactly the same jump back to our
pages open up our home page what we're
gonna do is edit with Elementor once
you've done that we're gonna then switch
it over to look in tablet view and in
mobile view so at the moment we look at
a desktop if we come at the bottom in
this gray bar you can see we've got
responsive mode if I click on me it
allows me now to switch between
tablet mobile and desktop so switch over
to tablet and take a look in me so we
click on that and you can see it
looks okay but there's some things we
might want to find - like I say you've
got a strange sort of duplication of
information that's part of the preview
but that's an element or things you
don't worry too much about that so
everything is looking okay other than
like I say the fact that well that's
looking a little bit we guys a little
bit too big so we can now fine tune and
tweak things based upon the device that
we're looking at so if we click on this
particular section put the Advanced tab
you can see it's already picked up the
fact that we're dealing with a mobile or
a desktop so a tablet view so what we
can do is we can fine-tune things as
unlink those and at the moment it's set
to zero padding so let's just change
that now to be let's just go for
something 15 pixels top 15 pixels bottom
so by doing that we've taken away some
of the excess space that wasn't required
and can take up a huge amount of real
estate on a tablet or a mobile view what
we can also do is just change the size
of the text to make that a little small
a little sort of less in-your-face so
click to edit that element we're gonna
do is come with the style typography is
selected you can see we're now looking
at the tablet view so we can do is just
use the size option so we can adjust
this to get where we want to go for
something like this so we can keep it on
to two lines that look a bit better now
if we like the look at that and we want
to check it out now on a smaller screen
we can simply come down again click and
choose mobile so you can see now we're
getting the same thing we've got the
text is becoming a little bit truncated
so we need to deal with that so making
sure we've got that element selected you
can see it's automatically picked up the
fact we're on a tablet mobile view so we
can now adjust that to make sure that
everything sits nice and neat and tidy
again if you want to make changes to the
actual sort of button we can do that now
we want to make sure that these sort of
sub headings which are a little bit big
as well also shrunk down a little bit so
we can do that very easily same again
come to the style adjust now to make
sure it everything sits nice and neat
and tidy can't let's just jump down to
the next subheading and do the same date
again so click on that style adjust the
sizing to make sure it sits exactly as
you want so all very easy you just need
to go through the different various
elements and adjust them based upon
their values on the different devices
you
so if we switch this back to being a
desktop you can see it's all going back
to looking exactly the same as it did
text is the size we set originally took
the tablet it adjusts things again to
make sure it looks good on a tablet view
and finally in mobile view same again
you can see it's now everything is laid
out the way you want the menus change
over to the relevant sort of mobile
menus and so on so it's very easy to go
through with element or an elemental pro
to go through and find him to make sure
everything looks great on mobile devices
so that no ticks off the whole sort of
development and design side of working
with setting up eShop find a couple of
things we want to do is go through and
make sure we've got a payment gateway
set up and configured to start working
with taking payments so let's just save
this to make sure what all those changes
we just made are save that I'm gonna
come back out of this then and go back
to our dashboard update our page to make
sure everything is looking good and
saved and then we're gonna do is gonna
come over to WooCommerce I'm gonna come
down to settings now obviously this is
dependent again upon the particular sort
of payment gateway you're looking at
what we've done is we've used PayPal so
that's very easy to deal with what we
need to do is come in to checkout and in
there you can see all the different
checkout options are listed
we chose pay for up PayPal so we're
gonna click on that so that now takes us
into the PayPal area and all you need to
do is input the paypal email address
that you've got set up associate with
your PayPal account save this out and
you're pretty much good to go you are
pretty much done well that's what I
wanted to show you we've gone through
and created installed and set up
everything to create our own custom
ecommerce WooCommerce website we've used
WordPress we've used WooCommerce
Elementor Pro an ocean WP to create a
fully-fledged working ecommerce website
it's so much more I could show you and
how to deal with this and so many more
options we could take a look at but this
is going to get you up to speed with
creating a great-looking clean layout
easily capable of helping you create an
online store and selling products
quickly and easily well I hope you found
the video useful if you did please hit
that subscribe button smash that like
button and hit the bell icon to be
notified of every new video we upload
every single week if you'd like to
support this channel please consider
using those affiliate links in the
below like I said at the top of the
video it costs you no more money but it
does give a small percentage back to the
channel and how to support what we do
around here if you any comments
questions or feedback on this video or
anything else you'd like to see covered
in future videos please pop those in the
comment section below until next time
take care
