How To Make An Online eCommerce Store Website With WordPress (NEW 2019)


In this extended video tutorial we are going
to build this beautiful stunning e-commerce website and working to go through this step
by step let me show you around the site first so here is the homepage and you can see it’s
simple and it is elegant we have this beautiful categories here to categorize your products
right here and also showcase your products this is what your shop pages going to look
like there is a grid here to show the various products that you sell and there’s interactive
features in this shop grid we also have filtering options here on the left that you can also
have if you wanted this is what a product pages going to look like it prominently shows
the images that you have of your product and when a visitor hovers over the image is going
to show the different portions of it like that and then here is a variable product and
I’m in a show you how to create variable products on this website that’s a product with different
colors in different sizes so your customers can go here and choose what they want and
then added to the cart and you know it’s nice we have this really nice shopping cart icon
in the header so if someone adds a product to the shopping cart it’s going to be there
in the header they can move their cursor over it and see everything in the shopping cart
jumped to the cart or just go straight to checking out here is what the shopping carts
gonna look like this platforms been except coupons and here is where people can filter
the different products that they’ve added to the cart here is the check out and this
is the most simple yet elegant checkout screen I’ve ever seen on a website organa talk about
taxes and shipping and all of that with this e-commerce website it’s a full e-commerce
tutorial is probably why the video so long and then right here is the best part of all
your gonna learn how to use a page builder to make it a point and click is simple to
change anything you want with the website now here is why you want to invest your time
in watching this tutorial in the first place I don’t just show you how to make what I made
I show you how to make anything that you want to make and that’s what you’re going to get
out of investing your time watching this video I’m going to show you to how to make the website
that you you want to make I’m going to show you how to have the e-commerce store that
you want to have I meant to give you all the tools the knowledge in the training in this
extended video so that you can build anything you want not just what you’re seeing right
here really use something called WordPress which is free to be using a WordPress theme
name*and that’s also free and this page builder that makes it point-and-click easy that’s
named Elementor that is also free and then were going to use WooCommerce to power this
e-commerce platform and that is free as well so all the tools that you see me using throughout
this video they’re not going to cost you anything and the reason I chose tools that were not
at a cost you anything is because I wanted to make it as easy as possible for you to
get an e-commerce store up and running if you don’t know me my name is Adam and I’m
from WPCrafter.com where I make a WordPress tutorial videos for non-techies if your new
year consider clicking on the subscribe button and if you don’t want to miss a thing click
on the notification bill and you too will let you know when I have new videos hey I
look forward to spending this time with you showing you how to build this website showing
you how to build a site for you a platform for you where you can sell your products let’s
just go ahead and jump right on into the tutorial let’s take a moment to go over everything
that you can expect to learn in this tutorial video now I am going to preface and just say
right up front obviously you could tell this is going to be a long video and what you’re
gonna notice is that my talking pace the pace that I speak is perfect for increasing your
playback speed so one of the nice things about you too if you’re watching this on YouTube
right now you can increase the playback speed if you like however I I speak at this pace
on purpose because some people prefer it to be slow and methodical but you can be speeded
up if you like so I know when I watch my own videos back I watch it at 1.25 pace and many
people that are subscribers to the channel will watch my videos back at a 2.0 pesos eventually
you can get through the material twice as fast so here is what to expect in this tutorial
video first work anew set up a domain name and order a web hosting accounts then were
going to install an SSL certificate this is crucial if you already have a web hosting
you must have an SSL certificate were going to go through what that is essentially if
you don’t have it you are not going to be able to accept payments on your website and
that’s crucial for an e-commerce based website it’s something you have to have some hosts
give it to you for free some web hosts charge $99 per domain per year for it so when we
talk about domain names and hosting and all that kind of stuff I’m the new show you some
Webhost that are not going to hose you in terms of the cost of an SSL certificate but
this is one of those things you want to get set up right from the beginning and working
to do it in this tutorial next were going to go over briefly how to create a logo or
some resources to have a logo created choosing a color palette choosing a font pair these
are all important things if you want to personalize your website and actually build a brand these
three parts are very crucial then you’re gonna learn about WordPress this is going to be
the platform that we use for this e-commerce website it’s the foundation and the really
use something called Elementor which is the what you see is what you get page builder
so that we can build beautiful pages in the beauty of how this tutorial is going to go
is I’m going to teach you in such a way that you can use what you learn to build anything
that you want to build for yourself so you’re not going to be limited to just what were
building in this video it reminds me of that very famous parable if you feed a man he’ll
eat for a day but if you teach them how to fish he can feed himself for a lifetime and
I’m sure I just butchered it but you get the point I want to teach you how to build websites
not just give one to you I want to teach you how to do it using Elementor neuronal learn
that in this tutorial then you’re gonna learn WooCommerce WooCommerce is what your web store
your E store your e-commerce platform is going to be based on in urinal learn about WooCommerce
in this video then to wrap the video up your gonna learn about search engine optimization
is knocking to be in depth an in-depth tutorial I do have separate in-depth tutorials on search
engine optimization but it’s going to be enough to get you started and then working to do
two crucial things I’m in a show you how to backup your website it is crucial that you
have regular backups for your website were to cover that and then security is also crucial
you have to have security on your website especially because it’s going to be an e-commerce
website so if you stick with me in this tutorial to the very end I promise you that I will
have taken every minute of your time and consideration and will not waste any of it I want you to
have all the tools that you need to be successful and have the outcome that you’re watching
this tutorial for and that is to build a full e-commerce website so at this part of the
tutorial working to talk about website hosting now even if you’re familiar with website hosting
if you already have a website or you had a website in the past I don’t want you to fast-forward
through this section because it’s going to be worth your time to listen to this part
of it to the tutorial about WordPress web hosting and because most importantly it’s
the most important decision for any website if you choose the wrong Webhost you are in
for a world of hurt and that’s why it’s so important to make the right decision with
the web hosting company that you choose and primarily you’re going to want to avoid certain
companies and you basically want to avoid E IG and Go Daddy companies EIG stands for
endurance International group and they own their a web hosting conglomerate some of the
web hosting companies on the list them out here just they to name a few that they own
they are really bad web hosts and the scary part is you actually hear a lot of people
suggesting these web hosts and it’s probably because they don’t realize it or they’re being
paid a lot of money to suggest these Webhost and it actually saddens me because I know
people that go there have bad experiences and the people that have use these services
and said they had a great experience then I asked the next question what are you monitoring
the uptime are you checking the speed of your Webhost and if you’re not monitoring uptime
and if you’re not checking the speed of your website you really don’t know if your host
is any good so some of these companies are Hostgator I’m sure you’ve heard of Hostgator
Bluehost and host monster and there’s a whole list of these CIG owned companies and you
really want to avoid them if at all possible they’re known for gobbling up web hosting
companies laying off the support staff and then consolidating everything and then it
all goes downhill from there and also go daddy you you I know a lot of people get their domain
names at Go Daddy and they’re fine for that I personally prefer a different company however
their web hosting is bad it is extremely extremely bad in their servers are overloaded and what
that means is they have so many customers on a single Web server that it makes all of
the websites is slower so that is what happens with Go Daddy now if you have used either
of these and you feel like you had a good experience I’m happy for you but I would question
if you are monitoring the uptime of the websites and if you’re checking the website speed so
these are just the and you know just kind of the ones you want to avoid now one of the
biggest criteria in the web hosting company that you choose is they must support WordPress
now when I say that I’m not saying that you are allowed to use WordPress or it says WordPress
someplace on their website what I’m referring to is if you are in a situation with your
WordPress website and you need help that you can go to their support and they’re not going
to say sorry that your your deal that’s not us you’re going to have to figure that out
on your own that is what I mean by they must support WordPress their support staff must
know how to support and be willing to support you with your WordPress-based websites you’d
be surprised most hosts are not going to help support your WordPress based website now a
web hosting company is not liable for things that you do to massively break things so for
example if you set your WordPress password to the word password and then someone hacked
into your account destroys your website that’s not going to be their responsibility that
will be your responsibility but if you need help save your having some kind of a problem
with the plug-in that you installed you should be able to go to your web hosting company
and they’ll manually go in there and remove that plug in or you’re having some kind of
line of code that pops up and you don’t know what that is or you’re having trouble installing
something in you can go to them that’s what I’m talking about is they must support WordPress
and this is why I don’t recommend going with tiny little mom-and-pop neighborhood web hosting
companies and that’s because they don’t have the support staff to be able to invest the
time in giving you proper support and they typically don’t have a proper infrastructure
to keep your website secure to keep your websites optimized and next requirement is they must
offer free SSL certificates I said in the tutorial overview your and learn how to do
and install in SSL certificate on your website and here’s the thing if your web hosting company
does not provide them for free you’re probably get a pay anywhere between 30 and $100 per
year per website for an SSL certificate ’96 just you know money that you don’t have to
spend if you choose the right web hosting company so that kind of piggybacks back to
avoid DIG and Go Daddy companies while those companies yearning to be paying for SSL certificates
and is going to get really expensive really quick so it’s better to choose a web hosting
company that is been to give you a free SSL certificate because you have to have an SSL
certificate you just have to these days if you don’t have an SSL certificate on your
website and someone uses the Google Chrome web browser and they visit your website it
will say in the top bar you put the website address it will specifically Satan not secure
and you don’t want someone visiting your website using that browser which is the most popular
web browser inhabits a not secure that’s just stuff that you don’t need next thing I want
to talk about is shared hosting versus managed hosting versus a VPS now these are phrases
that just get thrown out there and there’s a whole bunch of other phrases cloud hosting
managed hosting optimize hosting all these different phrases now I wish there was like
some standardization with it however Juergen have web hosts that throw out all kinds of
fancy phrases so sometimes it might be hard to know what your purchasing so let me just
try to sum it up in a nutshell your shared hosting is your hosting account to be on a
server with other people who have their web hosting accounts on the server and you guys
all share resources that’s why it’s called shared hosting now good Webhost don’t pack
as many customers on a single server because if they do that it’s going to affect everyone
so that your shared hosting so you are vulnerable if some other web hosting account on the same
server starts to have problems it can cause problems for other people however a good Webhost
will be monitoring everything on the server and they will stop problems before they happen
then you have this next level called managed hosting and this is a different hosting environment
that is more optimized for WordPress and sometimes they’ll also bundle in additional services
like backups staging servers things like that automatic updates of your plug-ins and WordPress
and that’s can be your managed web hosting it’s gonna cost more money but for a lot of
people the performance gain will probably would be worth it and also the managed environment
of making sure everything’s updated that might be worth it as well next is a VPS which stands
for virtual private server you don’t hear it referred to is that these days you more
herein referred to as a cloud hosting or something along those lines else some web hosting providers
use that cloud word the wrong way but it’s cloud web hosting a lot of times your cloud
web hosting it’s going to be completely unmanaged you’re completely on your own you need to
have a PhD in something called Lennix in order to be able to make everything happen it’s
not that it’s impossible to not that there’s not tools out there to make it easier to manage
your going to have higher performance but if you are new to web hosts you do not want
a VPS right now that will be something when your website starts to get a ton of traffic
and you need dedicated resources you need ultrahigh performance and you have someone
there to take care of it for you now I have a special website set up called order new
hosting.com and I want you to visit ordered new hosting.com and that is where I put together
a list of Webhost that meet this criteria and are also very reputable companies and
almost universally regarded as the best web hosting companies that there are there going
to provide support for WordPress users are to provide free SSL certificates are not going
to overload their servers and lasts which import which is important you can start out
at the shared level of hosting you’re just getting started out it’s less expensive and
there’s an upgrade path you can go from shared to manage to VPS as your needs change so here’s
what order new hosting looks like I’ve got these recommendations right here my top recommendation
is InMotion hosting now what’s nice about what I’ve set up on this page for you is I
have a series of training courses now these are paid training courses here some on various
page builders here some on some of the common things are and want to do with your website
and here’s my higher end courses right here I have a special package is where if you order
from the host that I recommend and then send me a copy of your receipt I’ll actually give
you free access to these courses so that you have all the tools that you need in order
to be successful with your WordPress base website so with InMotion hosting you can see
right here is the biggest offer you’re going to get a page builder course in these three
other courses all in all it’s worth almost $500 I’m also recommending A2Hosting and Siteground
and they’re all going to be on this page and over time I’ll probably expand on these recommended
hosts as time goes on so this page might look a little different when you come to it so
let’s take a look at these web hosting companies in order a web hosting account the first one
was working look at right now is a Siteground no on Siteground’s website we can scroll down
and you can see right here they have a web hosting and I’m in a go ahead and click on
where it says learn more and let’s take a look at their plans right now so they have
to replant startup grow big go geek in they all have different prices and they all have
different things included now Siteground is an excellent Webhost it also is the only one
that I recommend that has metered hosting and what metered hosting means is it’s going
to be limited to the amount of visitors per month depending on the plan that you go with
so that this plan right here for 395 per month is going to only be good for 10,000 visits
monthly so for me I would definitely need this plan right here which is for 100,000
visits per month she would be able to come here and decide which one would fit for you
but you have to keep in mind that it’s metered web hosting that isn’t so bad depending on
how much traffic you anticipate getting on your website and that’s how they can make
sure that their service is high-performance but it is definitely something to consider
next we have A2Hosting right here and they have several different plans for you to choose
from now the higher priced plans you’re typically going to want those types of plans for e-commerce
websites or maybe a learning management website not your just basic brochure website but your
site that you’re going to expect multiple people to be on and doing different things
and staying on your website other than just reading so you can choose one of these packages
right here what is nice about the turbo package is right here it says the turbo package is
going to be faster and a lot of that is because it includes a plug-in for WordPress that’s
going to make it run faster and then right here you can see they also have a managed
web hosting plan right here and this is going there to give you a little bit more service
with your website for you next is a web hosting company that work and actually set up in this
tutorial video and that is InMotion hosting I have lined up a 50% to 57% discount on these
web hosting plans down here and this is also the web hosting company where I’m going to
be giving you the biggest or largest bonus right here of free courses so here we are
and they have these three plans and you could see that the lowest you can get this launch
plan for his 295 now when you hover over the order button it reveals how much it costs
and so forth what if you only wanted to get service for one year it’s going to be $4.49
times 12 if you wanted it for two years or three years you can just as easily do the
math you would just select the one that you wanted so the launch plan is going to be good
for one website actually here let me scroll down okay see I get some information wrong
sometimes okay so right here it says on the launch plan you can host two websites on the
power plant six websites and on the pro plan you can host on limited websites okay so these
are the three plans that you can choose from now they also do some really nice things if
you have a website someplace else though migrated for you they also have all US-based support
which is very nice they also have something very interesting so if you’re on this page
and you go to web hosting you can click reappearances WordPress hosting now this is something that
they just launched I want to see me like middle of 2017 so these are fairly new offerings
for them so this is WordPress optimize the specific hosting your WordPress-based website
is going to run faster on this WordPress optimize hosting and you can see the various plans
that they have available here these plans also are metered however it says suitable
it’s not a hard Requirement so they’re knocking to be tracking how much traffic you get and
telling you you have to upgrade and so each of these plans you could see some of the differences
they’re not what I like about InMotion hosting and all of these hosts is you can start small
and work your way up so for this video this tutorial I’m in a go ahead and start small
because I know I can work myself work my way up as soon as I start getting traction so
I can start on the launch plan and then work my way up to the power plan and then the pro
plan or just go straight for the man is WordPress hosting everybody’s different so if you’re
not price-sensitive you might want to start out with some of the manage WordPress hosting
options right here if you’re not price-sensitive but if you want to just start someplace so first thing is working to choose a data
center so if you are in Europe or Asia you’d probably want to choose Washington and if
year in the United States or Central or South America you might want to choose Los Angeles
honestly it doesn’t really matter as much as it would have maybe 10 years ago however
if you’re really concerned about this and some people are you might want to check out
A2Hosting which is the second hose that I was talking about however you’re going to
most likely be perfectly fine with Washington or Los Angeles right here mine is currently
in the Los Angeles data center next you have the option of paying for a dedicated IP address
this isn’t so needed these days you can get it if you want if you’re going to have a website
where you want a high-end paid SSL certificate that there are certain certificates like for
example you can see right now with InMotion hosting on their website you see right where
the URL is it says InMotion hosting like that that’s usually an indication of a more premium
SSL certificate that usually over $100 usually around $300 per year it’s called an EV certificate
and you would need a dedicated IP address for that so if you’re not a bank then you
probably don’t need a dedicated IP address so will leave that at no thank you and then
right here words as content management system auto installer let’s go ahead and choose WordPress
and so what this means is after you order it’s automatically going to install WordPress
for you it’s just one less step that you’re going to have to do let’s go ahead and click
on continue now is where you would either order a new domain name or you would connect
in a domain name that you already have someplace else so if you’ve already registered a domain
name someplace else like maybe a Go Daddy or another popular one is called name cheap
you would just go ahead and click right here where it says I already own this domain and
you would enter your domain name and then click on continue what ends up happening is
you order the hosting account and then there is some instructions on how to point your
domain name from wherever it is to your new web hosting account or you can just check
right here and purchase a new domain now with InMotion hosting these are the only extensions
that they support.com.net.org.biz.info .us so if you’re in the UK and you wanted.edu
or you want one that’s not on this list I recommend going to name Chiba.com to register
your domain name that being said I recommend if at all possible to go with a.com domain
name I I I I know nowadays there’s.IL-1.co and all these things and I think nothing will
ever be as good is a.com domain name go ahead and enter a domain name now now after you
enter it it’s good to see if it’s available and if it is it will let you proceed if it’s
not available it will let you know that so that you can choose a different domain name
so I’ve gone ahead and enter to show the demo one I know that that’s available and the actual
domain name I’m going to use for this tutorial is to show the demo so then I want to go ahead
and click on search and it’s going to check the availability and this is when it lets
me know that it’s available and then all I have to do is click on add to cart right here
and you could see right here it added the domain name and the domain name is actually
going to be free of charge it’s normally $15 per year but it’s going to give it to you
for free but it also added domain privacy and it’s up to you whether you want domain
name privacy or not so essentially whenever you register a domain name you have to have
a valid name address and email address contact information tied to that domain name and its
public anyone can go and see that information or you can get domain privacy and it’s kind
of like your info is just unlisted and there’s this domain privacy companies information
there instead now you’re totally you not totally private I mean it’s it’s private from public
eyes however if there’s a legal situation or anything like that it is very easy and
possible to send some important documents to the domain privacy company and they will
immediately give up your information so it’s more just to protect you from the casual person
so if you do want that you can just click on continue if you don’t you can just click
on the X right here in it will remove that and take your balance down to whatever it
is now let’s click on continue and in this step because I removed the domain privacy
it’s just asking me one more time that’s okay persistence is actually a good thing I’ll
go ahead and click on continue and now it’s going to take me to the billing section and
so what you want to do is enter in your email address here so I’ve gone ahead and entered
an email address I’m in a click on continue and it will take me off to the next step okay
so this is the step where Juergen enter in all your billing information now there’s one
important part to this and that’s right here where it says referred by and it’s is optional
I’m asking you if you would enter WP now typically when you order you it will automatically know
that you came through from my websites and when you do get your receipt you can send
it to me and I’ll get you those access to those courses that I promised you however
sometimes it’s just safer to put WP in here as well that way they’ll be written information
there so they know that you came from my website you’ll just go ahead and fill this out and
scroll down now right here is the option to choose your payment method and you can put
in a credit card or a debit card now there’s one glaring thing missing and that is that
they don’t have a PayPal option so if your only way to pay for this web hosting account
is via PayPal it’s actually okay you can pick up the phone and call them or you can contact
their life support so they have live chat on the website you can say hey I want to order
new web hosting account but I can only pay through PayPal and they will set you up now
when you do it on the phone or you do it that way just let them know that they have to put
the order with WP and you’ll be fine so then once you enter all your information click
on review my order then you can complete the order and you’re going to get two emails from
InMotion hosting and let me go through those now okay so the first email you’re going to
get is your receipt and this is what it looks like I blurted out my information I hope you
don’t mind now this is what I need you to forward to me offers at WP I need you to forward
this to me if you would like access to that bonus package of courses just go ahead and
send this off to me than what I do is I take it I verify that you did purchase it through
the link on my website and then I’ll be able to go ahead and send you access to the courses
so this is the first email that you’re going to get and then you’re going to also get a
second email here is that second email right here now I will tell you that sometimes when
you order a new web hosting account the web hosting provider will want to call you before
they create the account and verify that you actually did place this order that happens
and so that might happen when you order a new hosting account if not your many get that
receipt that I just showed you and you’re going to get this welcome email right here
now this welcome email has some important information in it first it’s going to give
you your login ID which is really just the email address you used when you set up your
account but then you need to click this button that says to get started set your password
here you need to click on that and what it’s going to do is it’s gonna take you over to
InMotion hosting’s website and its can allow you to create a password then once you’ve
created the password now you have your login and your password and you’re going to be able
to login so I’m in a go ahead and log into my account right now and here I am logged
in now don’t get rid of that email that you just got from InMotion that had the link to
create your password because when you scroll down on that email it’s can actually have
your WordPress login information okay so now that you are logged in to your web hosting
account let me just let you know if you’re using a different Webhost a lot of times they’re
going to kind of look similar and I’ll get into that in a moments you could still follow
along now first thing we want to do when we first log in as we wanted go ahead and write
off the bad turn on that SSL certificate so I need you to click on manage free basic SSL
certificate you click on this right here and then what were going to do we just have to
wait a sec it’s just analyzing your web hosting account to take a look at all the domain names
on it and then after a moment it’s gonna show your screens and look like this here on the
right you see it lists out the domain name I’m just gonna read this one important bit
right here it’s as if your new domain is less than four hours old or you have not pointed
your existing domains DNS to the account we can’t issue a free certificate so just keep
in mind if it’s a brand-new domain name you might need four hours to wait before this
can be issued all we need to do to turn on SSL is to click right here it’s is off and
I’m to do that and it’s going to turn on and that’s all there is to it now an SSL certificate
for free will be issued to you and you’ll be able to use that to start using your website
in a secure environment okay so let me go back to him and to go back to bed here now
that we did that in that was actually so easy it’s more complicated with other web hosts
now what I want to do show you where the main meat and potatoes of this control panel is
going to be and it’s good to be right here and it’s gonna say cPanel now this is an industry
standard thing cPanel or Control Panel so even though this is what InMotion’s looks
like you’re going to have the same thing with Siteground the same thing with A2Hosting the
same thing with most of these shared web hosting providers they’re all using the cPanel with
InMotion if you chose the managed hosting it’s the same thing it’s going to be in this
thing called cPanel now there’s a couple things I want to do before we log into WordPress
for the first time in the first thing I want to do is modify the WordPress site so that
it knows we only want to use a HTTP SVS a cell certificate for the website some to scroll
down here and click right there where it says WordPress and it’s gonna pull this up right
here now when you scroll down your gonna see a list of all the WordPress installations
that you have here is the one that was automatically created when we signed up for our web hosting
account if you look at the URL right there it shows a HTTP not HTTPS and we just want
to change that and it’s actually really easy to do all we need do is click on this little
edit details icon right here so let’s do that now and then it’s gonna pull up this screen
right here and the second option is URL and we can actually change this so I can click
here and put an S like this and oops not as a you wanted to be corrected so now it’s HT
and this is exactly what we wanted so now we can scroll down to the bottom of this page
and save our details just click on the Big Blue button save installation details like
this and now it says the installation details were edited successfully that’s perfect so
now let’s click back your word says cPanel and networking to do two more things in cPanel
first I want you to just double check now if you’re not using emotion in you using a
different hosting account you’re going to want to do this as well I want you to scroll
down to where it says PHP configuration and click on this now with InMotion hosting they
started by default which is a good thing putting you on this thing called PHP seven now if
you have an old web hosting account someplace chances are you’re on an older PHP version
and what you’re gonna want to do is change this drop down to PHP seven and as time goes
by you might want to put it at PHP 7.1 or 7.2 but it’s safe to leave in on PHP seven
essentially this setting is going to make your website run a whole heck of a lot faster
however a lot of old web hosting companies they put you on this old 5.6 version and the
reason they do that is for greater compatibility and less headaches for them if you run into
a problem however that is a very old version and if you just switch it to version 7 your
websites cannot load a lot quicker okay so now that we verified that were on PHP version
7 let’s go ahead and click on home and that’s gonna take us to the home of the cPanel now
if you’re looking for something in cPanel you can just go ahead and enter it right here
and it will pull it right up and this is pretty universal so what we want to do now is want
to create an email account that were going to use later on the website so let’s go ahead
and click on email accounts now this control panel like I said cPanel is industry-standard
if there is ever something that you wanted to learn how to do you can do a search for
for example how to create an email address in cPanel and if you entered in that search
you will find instructions on how to do it so just know that cPanel is what you have
it’s what most web hosting accounts are based on and there’s lots of resources out there
available to you soon I will get to go ahead and create an email address and this is good
to be an email address that working to configure inside of WordPress so when WordPress is sending
out any important emails this is the account that it’s going to use so on my website I
just use [email protected] so you can make your this email address is whatever you want
to get as many email addresses as you want actually something to go ahead and enter is
to start filling this out okay so I’ve gone ahead and I’m going to create the email address
[email protected] I popped in a password and here’s the quote or you can make it unlimited
or leave it at that it’s not going to be really something where I’m leaving a lot of email
addresses there to go ahead and click on the create account right here and it is going
to what minority made my email address so here you can see a list of my email addresses
and it’s just this one right here and what we can do if we want these settings for configuring
this email account in an email program or maybe something on your smart phone or or
maybe a program you might have on your computer just click right here it says set up mail
client like this and then we just choose which program were going to use or what I prefers
I just like to scroll down here and just grab the settings right here in working to use
these settings later on so I suggest you just make a note of it so you already know the
username it’s gonna be your email address you created the password and then here is
the incoming server in any kind of port information in the outgoing server and the port information
for that working to take this information later working to plug this into our website
so uses this email address when it sends outbound emails so now we can just scroll up and click
back onto cPanel and this is really where you’re gonna configure everything related
to your web hosting account is here in cPanel you’re mostly never to use it though you just
maybe create a new email account or something like that there’s really not a ton that you’re
going to do in here so now let’s log in to WordPress for the first time now remember
I said to hold onto that email that you were sent by InMotion to create your password I
want you to pull it up right now and I’m in a pull mine up so now I’ve just scroll down
a little bit and what this does is it says right here login to the administrative dashboard
and this is actually for your WordPress website you can go ahead and click on the link that
is there which is admin using your domain and it lists your email username and password
you can use your email and this auto generated password this is your WordPress login don’t
worry about your password I know it looks crazy work minutes change that password here
in a moment but this is going to be your login information so I’m in a go ahead and open
up this domain name right here and start the login process know what you’re going to do
is your and a copy it into your clipboard and then you’re going to go ahead and paste
it in right here now the only difference is you see how it says HTTP will we want to change
that and make it a HTTP so just go ahead and enter an S right there and then hit on enter
and it’s going to take you straight to the login page so now you can enter in your email
address that you used to create your hosting account and working a piece then that crazy
password okay there’s minds all just go ahead and click on log in and it will take me right
on and so now I am logged into WordPress for the first time I just wanted to just stop
for a moment and congratulate you you are doing fantastic so far you’ve accomplished
so much you made a wise web hosting decision you set up hosting the domain name and you
set up an SSL certificate not something that a lot of people have a trouble with but you’ve
already gone ahead and done that and you have installed the WordPress and you are ready
for action great job so now let’s take a deeper look at what WordPress
is so that when you’re going into WordPress want to go in a moment during a feel more
confident your to feel more comfortable in this new tool that you’re using so first of
all I guess what most people describe WordPress is is a content management system so essentially
just means it’s a program that gets run on a server in the cloud that allows you to add
content to it that you can then display on a website address is a content management
system and with WordPress working to be creating pages these are standard pages of content
like a contact page of services page that’s kind of content that stays the same and then
we also can create something called posts or better known as blog posts and this would
be more information that is aligned with the dates so for a business this could be may
be news or updates or some new information like that but WordPress is not limited to
that you can also have other types of content so in an e-commerce scenario you would have
products if you’re using WordPress for a learning management system you might have courses and
lessons so even though out-of-the-box WordPress supports pages and posts you can create any
type of content in WordPress it is extremely extremely powerful now the structure of a
WordPress-based website and any website at the very top of the webpage you have what’s
called a header and at the very bottom you have a footer in these two areas are typically
identical on every single page or post or type of content that you’re on or pager on
on a particular website the header stays the same the footer stays the same what’s in between
is all the only thing that is different from page to page so what is the anatomy of a header
you might have a logo and you might have a menu and so in a word press we create menus
and we can add a logo to the header we create these headers and the same goes for footer
at the footer that’s the bottom of your webpage you can put all different types of information
in there may be a mini contact form or a list of popular pieces of content on your website
however you want to use it next on the anatomy of a WordPress-based website as you have a
content area and that’s everything pretty much either below the header and above the
footer just kind of like a sandwich it’s kind of the meat right there in the middle but
then on some pages or post on your website you might want to have a sidebar that might
have additional information may be other links may be another menu and that might stay the
same typically for a page the entire content area of the entire area underneath the header
and above the footer is just to be or your content edge to edge top to bottom typically
on a blog post you’ll see a sidebar but you can have the sidebar on all types of different
content in WordPress now what people talk most about with regards to WordPress or WordPress
themes and WordPress plug-ins so essentially a WordPress theme is can it kinda be the framework
of how your website will look on the front end of it so not the back and were your creating
stuff but on the front and it’s going to have all the styles and the layout and stuff like
that in it that’s your theme and there’s thousands of themes to choose from there some you want
there some you definitely don’t want in the same goes for plug-ins what that is is it’s
a little thing you can add in this can add some kind of feature functionality perfect
example is by default WordPress doesn’t do e-commerce by default WordPress doesn’t do
an online course or learning management system so what you do is you install a plug-in to
add those features so for e-commerce you you add WooCommerce for a learning management
system you can add learn ’96 or LifterLMS and there is an entire ecosystem of of companies
building themes that you can buy and P in companies of building plug-ins that you can
buy if you want to create a landing page there’s a plug in for that if you want to turn your
website into a membership website there’s a plug-in for that if you want to add online
booking to your website there is a plug-in for that and that is why WordPress is so powerful
is because of this plug in system where you can easily add new features to your website
so let’s go ahead and jump into a fresh installation or this fresh installation of WordPress that
we have right here now this is fresh and untouched and there’s a list of things I like to do
when I first install WordPress but right when you login to WordPress for the first time
it takes you straight to the dashboard, to show you something real neat here that actually
a lot of experienced users and WordPress don’t even know in the first thing is where it says
screen options right here so on the dashboard we see all these bits of information here
and you might not care about any of this information you might want to disappear well on all these
different menu options here on the left that take you to different parts of WordPress you
have this screen options here to show you real quick what options it’s giving us for
the dashboard when I click on screen options it reveals this panel and I can enable or
disable any of these if I don’t want to see him again so for example this big welcome
or about this at a glance so I can go right here to where it says at a glance I can click
on the checkbox bam it disappeared I want to back I can click on that now the screen
options are all throughout WordPress and it’s one of those things that you might want to
be aware of so here’s all of our menu options and this is going to kinda tie into the presentation
that I just gave her I talked about a content management system so right here is for creating
those blog posts right here is for your media if you want to upload an image or something
like that it’s going to be right here it says media and here’s where I can create a new
page now also with posts you can allow people to leave comments are called blog comments
and they’re all going to be right here and then this tab right here that’s his appearance
this is where were going to be able to choose a theme and then were going to be able to
kind of start putting the pieces together of creating a menu adding what’s called widgets
widgets are if you wanted that thing I was talking about a sidebar you add these things
called widgets to the sidebar and also to your footer and then here’s our menus customize
and that’s were we to go in and customize our theme and then we have our plug-ins which
I talked about you can install of see a list of installed plug-ins or add a new plug-in
right from within the interface now to use the backend of WordPress you have a user account
in working to go inherent set up our password and things like that you can also have multiple
users and there’s different types of roles that you can assign to these users that limit
what they can do when they log into WordPress next we have some general tools you’re really
knocking to be in here that much is it just works importing data or exporting data and
then we have the settings panel right here in this we are going to go through right now
we have general settings writing reading discussion media and permit links so we actually need
to go and tweak some of the settings that I like to tweak when I first log into WordPress
now what happens is when you add plug-ins to your website these plug-ins may add menu
items here so these menu items will be on every WordPress based websites but some of
them you’re to see additional listings here additional menu items and that’s because when
you add a plug-in it adds a new feature in it might add a menu item here so with the
e-commerce example it will add a products menu item for the learning management system
example I will add maybe something that’s his courses or lessons or the name of the
plug-in so this is going to look at different depending on what you have on your website
now let me at last explain what these red dots are so you have a red dot here next the
plug-ins in it has a one right here next to updates and then even up here in these are
indicators that there’s something on your website that needs an update and you’re going
to get three types of updates with WordPress and it’s very important that you stay on top
of your WordPress base website and make sure that these things are always up-to-date you’re
going to have WordPress itself have updates you’re going to have your theme have an update
and you’re going to have plug-ins have an update now in this case you can visually tell
we have an update it says one here it says one here but we can see right here it’s an
update to use this plug in in this are just some default things that are installed when
you first install WordPress let me show you how to do an update in the organist are cleaning
out WordPress and were going to reset the password so you can click here or here to
get to the same place it’s gonna take you to the update so I’m just gonna go ahead and
click on updates and this is gonna list all of your plug-ins or themes that need updates
so right here in a list a with there’s a WordPress update right here in the list are your plug-in
updates and right here your theme updates so I can click on this checkbox and then I
can click on update plug-ins that’s one way to do it the other way is to click into plug-ins
directly and you can see a list of all your plug-ins and this will let you know this needs
to be updated and there’s an easy button right here I can click on I just did and it’s going
to go ahead and update that plug in for me is very important to stay on top of updates
they can either add new features and functionality to your website or they can also be adding
security patches and updates to your website so it’s very important to stay up-to-date
so now let’s go through the steps I like to follow when I first install WordPress and
at first when you click on posts and pages right when you install WordPress it’s going
to have some information in there that you may not want so I don’t want this default
post I can hover over it click on trash and what that’s gonna do is it’s going to put
it in something called the trashcan and you can see right here trash has one so then I
click on trash and then I click this button here that’s his empty trash and it’s as simple
as that the same thing for pages on the click on pages it’s going to have this sample page
of the click on trash and then I’m in a click right here it says trash and then a minute
click on empty trash a click on comments but there isn’t going to be any and that’s because
comments are linked to posts there was a comment in there but since I deleted the post it also
deleted the comments the next thing I like to do is go to settings and then click on
general and this is where working to set some general settings for our website the first
thing I like to set is my site title so by default typically when you do a fresh installation
of WordPress just to see my blog and this is where you want to maybe say something about
what the website is about and maybe slip in some keyword phrases that someone might search
into Google in order to find your website you might want to put that information right
there for the tagline I usually actually take that out but you can have it if you want but
what’s really important is for the email address that this is a current email address that
you’re going to receive the emails this is the email address that WordPress is going
to use to notify you of updates and and any administrative purpose next I need you to
go where it says time zone and we want to put your proper time zone in here and that’s
because of WordPress emails you and there’s a timestamp you want that timestamp to actually
makes sense because it’s your time zone so when you click on this you can set it based
off UTC or if you scroll up your to start seeing a list of city names broken up by country
so I would choose Los Angeles and here’s Alan I don’t see Los Angeles that’s because I’m
not in America the section for America so I need to just keep scrolling up until I find
Los Angeles and there is Los Angeles you only have to do this once and then I want to scroll
down here and click on save changes the next thing I like to do in this is incredibly important
click on where it says permit links this is a very very important this is how the links
to the various pages on your website are going to look you get to choose how they’re going
to look and there is a way of doing it that everyone just needs to do and that is the
click right here where it says post name so this is what your link is going to look like
it’s going to be the name of your website and the title of whatever piece of content
this is a much better link to give out to reference to have shown Google than something
like you know your domain name a bunch of numbers tied to a date and then a piece of
information like the title of your content so just leave that on post name scroll down
go ahead and click on save changes now let’s take a look at your user account so hover
over to users you can go straight to your account by clicking on your profile or you
can click on all users and you can see a list of users so here is the user that was automatically
created when I installed this WordPress based website so I’m in a go ahead and click on
that now I want to scroll down and show you some information right here this is where
you’re going to change your password change your email address and also change or configure
how your username will be shown on the front end so there’s different pieces of content
where it might show the author that would be like if you’re writing a blog post and
it shows the author so by default it’s set to show this and I probably don’t want to
show this so this is where output what I want to show this is typically what I enter Adam
at WP next to Wertz’s display name publicly asked this is where you and I want to change
it to what you just entered in and it also doesn’t hurt to put your first name and last
name in there next the scroll all the way down and then right here is where you can
change your password so what you’ll do is click on generate password now WordPress by
default wants you to be very secure in that is an insane looking password you don’t have
to use that you can enter in a different password right now and then click on update profile
so I’m going to do that because I don’t like the auto generated password I wanted to be
password that I’ll know hey word of caution do not use an easy to guess password it is
a bad idea so to go ahead and enter my password okay so I’ve gone ahead and updated my password
now some other things you can do if you wanted to change the color scheme back here I like
leaving it the way that it is so all my websites look the same but if you wanted at your website
you can go ahead and choose a different color scheme if that’s something that interested
you now your username is not something that WordPress in the user interface here lets
you change if you want to change your username you can do that there is a plug-in that allows
you to do it called username changer in this part of the tutorial you’re going to see how
to install plug-ins so that would be something you would just search for an ad if you wanted
to change your username or you can just be like me and use your email address as your
username when you’re logging in you typically don’t want certain easy to guess username
needs to be user names like admin or administrator or the domain name or something like that
you want to avoid that so now let’s take a look at themes so I’ll go to appearance and
I’ll click on themes and this shows you a list of themes now these are the three themes
that are installed by default depending on your Webhost it might not have all three let
me show you how to delete a theme you obviously only need the theme that you are using so
first let me show you how to delete a theme you can just click on where it says theme
details click on delete and essentially and then click on okay essentially this is less
files that are going to be on your web hosting account so like once again click on delete
confirm and it will be gone now let me show you how to add a new theme so what you can
do is click this button here that says add new and it’s immediately going to take you
over to the WordPress theme repository but I like to just call the WordPress theme directory
now these aren’t all the only themes available for WordPress these are all free themes that
you can download directly in WordPress but you can also go and purchase WordPress themes
anywhere on the Internet and they usually give you a file now in those situations you
would just click on upload theme and then choose that file and that’s how you would
install your theme now let me tell you that there are tens of thousands of WordPress themes
there are a large amount of outdated themes and there’s a lot of just crummy WordPress
themes also there is this sort appear popular latest and and favorites so I click on popular
that usually will your where you’re going to start now just because a theme is here
in the popular and might be on the top 10 or something like that that does not necessarily
mean it’s a great theme either that can mean that they have a great marketing team that’s
out there spending tens of thousands of dollars per month so that people will know about the
theme and install it it does not is just because you’re in this popular list it’s not an indicator
that the team is actually any good and if you wanted to install a theme all you would
have to do is click on what you can hover over it and click on install and then it will
go ahead and install that WordPress theme for you and now when I click back on themes
you can see I just installed this WordPress theme the same is pretty much for plug-ins
if I click on plug-ins organ to see a list of my plug-ins now these are installed by
default some host do some host don’t this is how you delete plug-ins I can click on
delete and then confirm it and now that plug-in is gone I can activate a plug and just click
on activate and then you can see the color of it’s going to change to that blue and that’s
how you know this is an activated plug-in but then if I don’t want it I can click on
deactivates and then I can click on delete and confirm and now that plug-in is gone now
if I want to add a new plug-in I can click on add new and it’s the same thing that went
with themes there are free plug-ins that are listed right here but there’s also ones outside
of here that you could purchase and then upload and the same goes when I described with themes
that just because you’re in this featured list that doesn’t mean it’s any good just
because it’s in the popular list that does not mean it’s any good typically with plug-ins
you’re going to do searches here and click right here and you’re going to do a search
for your plug-ins or categories typically you’re gonna want to get recommended plug-ins
and I recommend I have a whole series of plug-ins that I recommend for all different things
that you would need but one thing to point out is what you see right here is not necessarily
the best so the same goes with themes if I see a plug and I like I can click on install
now it’s going to download that instant that plug into my WordPress website I can click
on activate if I want I don’t want to I can click back to installed plug-ins and then
I can delete that plug-in if I want to in this case I definitely do nonetheless thing
I want to talk about is most of the appearance side of your website that is going to be dependent
upon your theme is going to be in this item here called the customizer it’s a different
interface in WordPress that you’re going to be using in order to access all of the options
that your theme may give you so I click on customize like this it’s gonna take me into
this thing called the customizer so you can hear me reference the customizer often and
here’s all these thiols settings that are related to your theme your colors your fonts
putting in a logo all the various options of how things look and what’s also nice is
you have these controls right here to see how your website looks on a tablet and to
see how your website looks on a mobile device and it just shrinks it like that and this
is how it looks on a tablet and back to the desktop like this this is also an alternative
location where you can create menus if you wanted to and then when you’ve made any changes
you can click on the publish button and that makes your changes now live so to get out
of the customizer you would just click on this X right here you’re back into WordPress
one thing that’s interesting with WordPress’s there’s always more than one way to do the
same thing so you saw you could create a menu in the customizer but you can also create
a menu right here underneath the parents click on menus and here’s our interface to create
a new menu in this right here is the default menu that is created with when I installed
the WordPress user menu items here’s a list of the various menus it’s real simple you
create a menu you put your items in the menu and then you sign the menu to a location she
can assign it to the top the header area into a footer it all depends on the options that
your theme gives you you can rearrange things just like this you can stack one menu item
underneath another menu item I can see what I wanted to add if I wanted to add this homepage
I can click that click on add to menu and now I’ve added that I can reorder it it’s
really flexible this menu structure and the last important thing to take a look at is
this thing called widgets and what widgets are is when I was explaining WordPress has
these things called sidebars well this is where you would you would add content to those
sidebars and also when I said WordPress has footers this is where you can add content
to those footers. To do it through these things called widgets so here are the widget areas
so we have the sidebar we have the footer and lawn in front foot or two now these are
different based upon your theme so this is your entire footer is split into two sections
for the one in foot or two and these are widgets these are all just there by default and what
you can do is you can click on any widget like this and you can delete it if you want
by clicking that and now my widget is gone I want to add a new widget here’s my widget
options right here if I wanted to add a navigation menu I can just drag and drop that right there
and then choose my menu and then click on save and I’ve added content to the footer
and the same goes for all of these widgets plug-ins will add widget options and also
themes will add additional widget options in widget locations so just think of widgets
is how you add content to other areas that the theme controls in the header may be the
sidebar or the footer it just depends on your theme so the last thing to do is to go right
here and click on visit site and working to be able to see what this WordPress based website
looks like right now this is just running the default theme and it set up the default
way just like this now I’m not a big fan of this theme so that is basically what WordPress
is it’s a content management system where you create pages posts and other types of
content you have the header the footer and menus that your Dean controls and those usually
stay the same on every page the of the content area which changes from page to page and you
have a sidebar and what dictates the style is your WordPress theme and there’s free ones
and paid ones and to add features to your website you would add plug-ins so now is where
the fun begins were going to go ahead and install theme and working to install the plug-ins
that were going to use some to go ahead and click on appearance to choose themes and then
right here I’m in a click on add new and then I’m going to click on my actually we don’t
need to click on popular’85 Do a search for it enter Astra AST RA and it’s going to pull
it up right here don’t worry if the thumbnail image looks different when you’re doing it
it’s because they updated from time to time to go ahead and click on install and then
after that I’m in a go ahead and click on the activate option here it is click on activates
and now we have our first theme installed and activated tough that’s actually interesting
that the thumbnail already changed that’s hilarious now we it’s a good idea to always
keep a separate theme so you’ll have another one in case your troubleshooting a problem
you can always switch to it so we don’t need three themes here to go ahead and delete this
2016 theme and I showed you how to do that in the prior portion of this video so now
that is done let’s go ahead and click on the plug-ins and we should have the list of plug-ins
all deleted the default ones that came with this let’s go ahead and click on add new now
these are in no particular order so first let’s type in Astra Sites here it is let’s
go ahead and click on install now and is just gonna take a moment to download and on this
one working to go ahead and actually activated right now not to do that for all of the plug-ins
we install Sonoma to go to add new again and this time I’m going to put in a plug-in named
really simple SSL now what this plug-in does and you can see it’s on a ton of websites
with this plug-in does is it will make sure when someone goes to our website that they
are pushed to the SSL version of it so though go to if they enter in a HTTP and then the
website this will make sure they actually get redirected to the HT to the secure version
of your website someone go ahead and click on install now I’m not going to activate that
one just yet now the next plug in that I want to install is named iThemes Security here
it is this is a plug and that’s going to keep your website safe from any kind of hacker
that might try to break into it is going to protect the login form it’s gonna do all kinds
of great security related things so my click on install now and this is another one were
not going to activate it just yet next were going to add up drafts and that CUP DRA FTS
and this is going to be our backup plug-in and what this does it’s so awesome when it
makes a backup you can have it send it to dropbox or someone off site location and that’s
what I love about it I use it with dropbox you get a free dropbox account and when it
makes its backup it’ll be right there in your dropbox and then you have the extra added
protection if your dropbox pushes files to your computer now you have a backup of your
website and all these different locations so I’m in a go ahead and click on install
now and this is another one that were going to go through setting up later in the tutorial
okay now working to install a plug-in named Yoast well I think it’s actually called WordPress
SCO but he used to be named Yoast and if you enter in Yoast it’ll pull right up why OAS
T now this is an SCO search engine optimization plug-in it’s really one of those essential
plug-ins to have on your website and it makes it your website fully optimized for search
engine ranking obviously you have to go in and do a bunch of things but this allows you
to actually do it working a touch on that towards the end of this tutorial go ahead
and click on install now next were going to put in that email sending plug-in so do a
search for SMTP so when you enter in SMTP were going to go with this one right here
WP email SMTP GiveWP form so go ahead and click on install now for this one and now
let’s go ahead and take a look at our list of installed plug-ins and you can see everything
that we’ve done so far so we have asked for starter sites and that’s active we want that
working to do the security later the backup later the SMTP for sending emails later and
will do Yoast our SCO plug-in later what I want to do now though is click on activate
for really simple SSL were to go ahead and activate this and what this is going to do
is fully enable your website to force everyone onto the SSL certificate for encryption Mrs.
essential for any kind of e-commerce or just any kind of website you have to be on the
SSL certificate these days or like I said earlier you see were to secure if you don’t
have an SSL certificate Google skin essay not secure in that’s not what you want with
your website so go ahead and click right here where it says go ahead to activate SSL will
give it a moment to do its thing now when you do that the next thing you click on you’re
going to have to re-login so if I click on dashboard it’s going to make me or force me
to re-login which is okay it’s only the first time you activate that plug-in and pretty
much once it’s activated on your website you’re not to touch it again so right now why don’t
you log back in to your website a camel to go ahead and click on login it’s going to
put me right back inside and I am all good you should see this message that says SSL
activated and that’s can let you know that you are good to go and get rid of this message
you don’t have to see it anymore by clicking on the X right here off to the right and you
are all set so now is where all the fun begins just a moment ago we installed and activated
a plug in that name*starter sites and we also installed and activated the Astra Theme remember
this thumbnail may change now you’re going to see an option underneath appearance that
says Astra Sites and let’s go ahead and click on it now from time to time Astro will move
things around so maybe this might be consolidated into here or something so if you notice something
isn’t aware I’m showing you in this video if you just the thumb around a little bit
I’m sure you’ll be able to find it but right here were looking for Astra Sites now first
thing is were being prompted to make a choice and it says select groups select your favorite
page builder now for this tutorial working to be using this page builder named Elementor
so I’m going to want you to click right there on Elementor now what you’re looking at is
a beautiful beautiful thing you’re looking at a list of fully designed websites that
you can restore by clicking one button that is not crazy will actually think is more like
three button clicks but you know that’s a just a technicality so we can scroll down
while there sort options right here and then you could search is not enough for you to
really need to search but we can scroll down and see all of these amazing designs that
we can easily restore and it’s all free it’s all that’s all just available for free now
some of them are going to have this agency tag on the top right those are templates that
are not so the theme that were using is named Astra and they have a pro version and they
also have what’s that what they call an agency version that has all of these really high-end
designs that you can restore the one click but they’re super generous the the Themis
free Astra starter sites is free and it’s enough to get up and running so you can scroll
down now technically what were doing in this video with WooCommerce and e-commerce it can
actually be added to any of these designs so like I was saying at the very beginning
of the video if you don’t like the design that I’m using I’m going to actually teach
you how to build an e-commerce website out of any of these designs and then I’m been
also teach you how to make any of these designs your own so you’re to be able to have full
power and control to do anything that you want so these two right here are e-commerce
specific and therefore the agency license holders there are all have some information
in a moment about it here’s a agency version here and it has some more design to it but
these are really e-commerce related right here and you can see there’s a wide variety
of templates here in their all top-notch so if you like the way maybe have a garden store
and you like the way this looks well you can easily follow along in the entire tutorial
and choose this instead of the one that were going to choose the same thing goes for this
really simple pet services one I really like that it’s a really good template and easy
to work with and see you have this wide variety here I love it here’s a great one if you’re
gonna sell some beauty supplies so WooCommerce in the e-commerce platforms can work with
any of these and that’s just one of things I love about this but I’m to go ahead with
this one right here the brand store because it’s very much e-commerce related so any of
these you can go ahead and click on this details and preview button and what’s gonna do this
going to show us what the websites can look like in the right we can decide if we want
it or not and then when we have made our decision we can go ahead and move forward so right
now it today restoring this is the two buttons that I need to click I need to click on install
plug-ins and this is Bennett’s restart and install all the required plug-ins which is
essentially Elementor in the e-commerce platform and then after that I will click another button
to restore all of the content it’s good to do everything it’s gonna make our menu for
us it’s it’s gonna do so much for us all the heavy lifting it’s going to do now I do think
they’re going to add an update so there’s an additional step where you can just choose
specifically what you want it to restore so if you are going through this process and
there’s an X extra step I’m sure to be self-explanatory how to move through that so I would go ahead
and click on install plug-ins in its canoe install whatever plug-ins are required now
this is real simple just Elementor which is going to be our page builder were to learn
about that in a moment and WooCommerce which is the e-commerce platform some of the various
templates are going to be maybe an additional plug-in or so maybe a contact form or something
like that it might add to it now it’s important to note that these website designs are all
like really practical in ready to go now like with this you just change that image you can
just change maybe this bit of text right here I mean this thing is ready to go okay so now
it’s installed those plug-ins all I have to do is click on import this site so click on
that and it’s given me this morning technically you don’t want to restore this site to an
already existing live site it could cause some issues now we haven’t this is all brand-new
and fresh WordPress installations were not and have any problems so remember I was just
a moment ago telling you there might be an extra step added to this restoration process
it’s to make it so you could technically add some of this to an existing website but for
us we don’t need to pay attention to that just go ahead and click on okay it’s going
to go ahead as can a greater pages is going to create our menus is going to create all
the styles it’s going to configure everything but don’t worry because I’m going to actually
show you how to change everything and I’m in a show you how to make this exactly how
you wanted to look but it is extremely powerful out-of-the-box and you can see it has a really
nice shopping cart in the header mean this is just it’s just a beautiful beautiful web
design and it’s just another moment away for it to be ready okay now it says done view
site so when I click on this button it’s can open up a new tab and it’s gonna take me to
the front end of the website and you could see your website is already looking good all
we really need to do is customize this a bit didn’t change or put our products in ourselves
and change some of these images in the background and put these different links to the different
categories of products were adding and you are going to be off to the races it already
put together our menu when I scroll to the very bottom it put our footer together just
like this I mean this is amazing how easy it was to get to this point and you have multiple
different pages right here so there’s an about us page I can click on right here and we have
this beautiful about us page and you’re gonna learn how to fully customize every aspect
of this website right now but before we do that let’s go ahead and let me walk you through
choosing a color palette choosing a font pair and then creating a logo right so first were
going to figure out what colors that you want for your website now typically you’re gonna
want to or three colors so your first color you’re going to want identify is going to
be your primary color and this is the color that’s going to be predominantly used on your
website and this would probably be used maybe 60% of the time or 70% of the time on your
website and the second color is going to be your accent color so sometimes you might want
the the color of a headline to be a different color and so this could be your accent color
and there’s various times you might want to use an accent color and it would be just different
than your primary color and then as an option you could also choose 1/3 color which I like
to call your pop color and this would be the color that is going to be different than your
primary and your accent and it’s good to be a color that would would attract someone’s
eyes to and you would probably use this on where you want their eyes to go so typically
like a button right so you would make your button this color because you want people’s
eyes to gravitate over to that button so they know where they need to go next so here is
a website called colors and that spelled COO L ORS.co and you can go here and they’ve got
a lot of great color pallets so if I click on explore it will show you a variety of color
pallets now the way colors are interpreted in WordPress or pretty much anything that
is design oriented is with the hex code so every single color has a unique hex code and
this is the code you would copy in your in a pasted in certain locations in WordPress
and that’s how it’s gonna know the exact color that you want to use is it with these of various
hex codes while look at this like every color seems to have that that yellow on it that’s
interesting look at that I wonder what’s going on there so for example I can go ahead and
click on save this color palette right here and I would go ahead I would click on view
and you would see the colors right now, go ahead and click on okay this is new let me
get rid of that okay here we go so here is the colors in that color palette you see how
you have this #and then in these six characters that is going to be your hex code and it’s
can be numbers and letters and so if I use this code right here in WordPress in certain
locations it’s going to show this exact color and so what we need to do is get these various
hex codes actually like this color combination this right here with this but if you use this
color as your primary color this as maybe your accent color and then this is your pop
color and be really interesting color palette so what you would do then is you just copy
these hex codes into your clipboard and will be using those momentarily now there are more
websites than just the colors in order to find color pallets you can go to Google and
do a search for color pallets and you can definitely see the many different websites
for that another tool that I use I’m using Google Chrome and I recommend using Google
Chrome if you’re doing any kind of website stuff because there’s a couple needed tools
and in the first one I want to introduce you to is a right here it is called color Zillah
now if you go to Google and do a search for color Zillah the first result will be this
right here and what chrome does is it allows you to add these things called extensions
that allows your browser to do more stuff so you would go ahead and click the button
right here and it will add this to your web browser and this is what you’ll see it’s right
here it’s kinda hard to to maybe see if I hover over to Cisco or zealous when I click
on it and it allows me to identify any color on a particular page so for example let me
go back to that color palette right here so obviously I know the color pallets are but
say you’re on a website you really like a particular color or shade of a color and you
thought maybe I want to use a very similar color so you would take color Zillah you would
click right there choose pick color from page and now you have this black box that showed
up and you can hover over different colors on that page and you’ll see in that black
box it will identify what the hex code is and so all you would have to do so say like
this little blue right here I can hover over it there I have the blue if I click on my
mouse now it copies the hex code in to the clipboard of your computer and you can paste
that into a notepad so this is how you can go to a website that you like and you might
like the color scheme that they’ve chosen and you can use a similar color scheme or
test out a similar color scheme so I want you to go ahead and pick out a primary color
and an accent color and gives in consideration of the pop color that you may want to use
now since you’re new to web building you might want to just stick with the default colors
that we restored you might want to just use black or something like that and then later
on is your thinking about doing more with your website then you can start playing around
with these of various colors but it’s the process of choosing different colors is what
will really make your website unique to you and your brand next we need to look for fonts
and so here’s a great website I like it’s called font peridot CO I love this site so
essentially with your WordPress-based website you’re going to be able to customize the fonts
now the way this works is you’ll typically have a two or three it’s kinda similar to
the colors right you’re typically in 1/2 two or three different fonts so you can have one
font that will usually be for your headline and you might also in use that same font for
your menu and then you’re going to have a body font so that’s the body of the website
you can have a different font for that you have the same font to the same font family
that’s fine but you typically have the the opportunity to have two different fonts there
and then sometimes you might want I’ve actually don’t have it I’m going to quote a phrase
for it yet but that said third Fontan on times when you’re on a website you see a certain
section of it where it might be cursive or something that would be a starkly different
font and I can be your third font I guess I I coined the term pop color maybe that’s
your pop thought as well so what I like about this website is it shows you all these different
font combinations that work well together that are immediately to be available in your
WordPress site and it’s just a matter of choosing it from a drop down so when I scroll down
this is what each one will typically say don’t say the name of one font and the name of another
font so the headline here is cabin and the body text right here is old standard TT so
you’ll just want to find a font combo that you like and then remember the name or maybe
write it down in a notepad because will be configuring WordPress with that so here’s
another fun combo and you can just scroll down this is a really classic one Joseph and
Sands that’s the headline now you don’t have to go with how they are pairing it you can
feel like one headline in one body font that aren’t necessarily paired here that’s fine
this just gives you an opportunity to see what they look like Montserrat this used to
be very popular but it’s lost its popularity right now it’s really popular it will Meriwether
is a very popular and that’s for the text right here that actually looks good I might
change my font my website to that another very popular one is this Playfair display
let me show you if I can find that here as a headline let’s see I’m just scrolling down
so you get the point you can come here and see what you like and the different things
with the different fonts how they look together I’m not seeing Playfair maybe if I just did
a search on the page but you get the point want to come to a site like this and go ahead
and pick out a pair of fonts that you really like now let me show you another way of identifying
fonts that you like and that is that it’s similar with the colors there is another Google
Chrome extension called what font ice to say what the font I don’t know why I was say that
but it’s just called what font and you can go to Google and search for what font and
it will take you here and you can add this to chrome and it adds this little font option
right here so if I go back to this page I can click on that and what it does is now
when I move my mouse cursor over any font it tells me what it is so it says right here
this is Montserrat and when you click on it it shows you the name of the font if it’s
bolder normal and then it’s going to tell you the size I don’t know why it’s not showing
me the size right there so let’s scroll down this one showing the size so I can click right
here and I can see it’s the average font that’s the name of the font and I can see the size
and this is helpful when you’re on the various websites and you think man I really like that
font or that font combination will you can use this web browser extension what font and
Cohen NC with the names of these fonts are so that you can test them out on your website
so you definitely gonna want to choose a font I think choosing a color combination and a
fun combination that’s unique to you and your brand are the two biggest things you can do
to really make your website your own and really make it stand out so your assignment right
now so go pick out some colors into go pick out some fun pears now the best thing is none
of these are set in stone so when you’re setting them up on your website if you change your
mind later it’s going to be super easy to change later as well I know for me I’m in
the process of changing some of the fonts on my websites but it’s pretty fun and it’s
very powerful to be able to very easily change these fonts and I’ll be showing you that here
in a moment okay now it’s time to talk about getting a logo for your website now a logo
is not a requirement but it’s certainly something that is going to make your website and your
brand more memorable now I went to Google and I did a search for free logo and I spent
some time going through some of these websites and actually a lot of them are really bad
they’re either not really free or their very low quality now I did find one that is interesting
and I do want to talk about it and it’s canvas.com you probably already heard of camber some
go ahead and open this in a new tab in but before I go into cans I’m going to go ahead
and show you some paid options for getting a logo now one of the places that a lot of
people go to I actually don’t like the service personally but I do know a lot of people that
have have gone there for logo designs is 99 designs in the way this works is you’re not
hiring a designer to design your logo directly you’re actually starting something called
a logo design competition where you say here’s the requirements of my logo arms clicking
on pricing right now here’s their requirements of my logo and if you are interested in making
this logo go ahead and make a design submit your design and out of everyone that comes
up with the design I’m gonna choose a winner and I’m gonna pay that winter 299 for this
plan for 99 for this plan so essentially the higher you guarantee you’re going to pay the
more people that are going to be interested in taking a risk of their time in coming up
with the design and submitting it and you work back and forth with them to get it perfect
for you so they essentially have these three packages here you have the 299 and they’re
saying you can expect to get 30 designs and each planet goes back like that they do have
this money back guarantee I would read up on it before if you’re interested in this
I don’t really think it’s quite so simple to get your money back from one of the services
I haven’t personally used 99 designs and I’ve seen people get seen plenty people had come
up some really does this lousy web designs using 99 designs but it’s so worth a shot
that interests you another marketplace for design work is a fiver now fiber is also very
risky there things you could do to minimize your risk essentially if you’re not familiar
with fiber it started out as a website where people could say I will do this for five dollars
now it’s grown way past that since then for sure and it’s a marketplace for now people
can charge what they want to charge even though it still called the fiber so when you go to
fiber and that’s with two RRs F IV ERM and a link to it in the video description box
into a search here for logo design think I scroll down the it should give me an option
up here it is a logo design so or you could just search for logo design actually like
this they recently added this where you can thinking try to find the right designers that
you might be interested in so it’s kind of reduced logo design into three different choices
so first you would choose one of these so if you wanted a kind of a flat design you’d
click on here then you choose what you want to pay or what your budget is the 5 to 25
to 3200 or greater and so this is going to this is going to filter out the designers
that don’t offer design work in that price range and you can start seeing some of the
designers here so let’s choose the $3200 and then the last one is the speed at which you
wanted so if you need it fast in up to three days go ahead and click on here and so it’s
gonna show you all these logo designers that are in meeting these requirements that you
just set up so you can click on any one of these I’ll just go ahead and click on this
one I’m not endorsing this person I’ve never seen it before I’m given the pop up to join
I don’t want to join let me get away okay there you go so typically right here the logo
designers can show you some of their work now you have to be careful when you’re looking
at someone’s work because there’s no proof that it’s someone’s work right they could
be putting any logos here and you wouldn’t even know now once you start getting here
you see how this pop-up came it’s like someone’s review and how long off how long ago it was
reviewed six days ago this is when you actually get to see their real work so if I scrolled
across and I saw what they’re actually creating for people then you can decide if this is
a designer that you want so far I’m not really impressed with this designer now let’s scroll
down so typically all of these fiber sellers are going to have multiple packages and they
tell you what you get in each package and each package is going to have a different
price and all have a break down a lot of times it involves the source file you’re gonna want
this thing called the source file and so with most designers the first and cheapest package
will not get you that source file but the middle or the most expensive package will
typically the difference between the middle and the most expensive package people are
typically going to have this social media kit which I don’t think is really that necessary
these days and especially a stationary design that’s not really that necessary here’s another
big differentiator in people’s different packages is how many design concepts give you 12 and
four and here is the delivery time you want to pay attention to that and what you want
to do is you want to go with a designer that is going to say something like this hundred
percent satisfaction guarantee so essentially what there that means is one of two things
either one they’re going to stick with you in with all the back-and-forth communication
in order to make sure they make the design for you that you want or it could mean that
if you’re just not happy though go ahead and kick you out a refund so I do like it when
people have some kind of a satisfaction guarantee that they’ll offer you a refund if they are
not who they say they are now here is the biggest problem that I have experienced with
five or yeah you can get some some designs kicked out but what these people are not is
there not like branding people so they’re not sitting there because they’re just grinding
through these designs right there not sitting there thinking okay let me get an understanding
of the brand let me get an understanding of the business let me get an understanding of
who they are and what they are doing this is something that that you don’t usually get
in one of these fiber gigs are just taking a word in the name or word and what you say
the description of the business is in there just trying to crank out a design as fast
as possible that’s not to say you can get some really nice design work done on fiber
I’m just saying that that has been my personal experience and lastly for designer you can
see right here how many orders they have in their cubes so this designer right here has
17 orders ahead of you so this just gives you an idea of their workload and how long
you can expect to wait for your work to be done but for me I’ll tell you you can probably
get some good results just make sure you know the package you’re getting and go with people
that have good ratings a lot of ratings have recent work that you kind of like their design
style people that will stand by their work and offer you a refund if you’re not happy
and also communication is pretty important as well you want someone that will understand
you and understand your business so that is fiver let me go back to canvas now Kent is
a web based service for making different graphics and designs and I was actually surprised when
I went to canvas and I saw that they also have logos there and I thought well it’s been
a great way to get an inexpensive logo now there’s pros and cons with it so for free
you can use any of these logo designs let me see if I can scroll down if this is the
page that actually had him so look at some of these logo designs and use these as a starting
point and I’m like man this a lot of these are nicer than what is just saw on fiber right
timing these are great knees would be kind of like starting points and they’ve got a
lot of them these are just a few of them they’ve got tons and tons of these logos that are
starting points the only thing is it when you want to export that logo if you’re not
on a paid can for plan you don’t get the high-resolution logo that you may want and you also more importantly
don’t get a transparent version they want you to get this thing called Canon of a pro
which actually is kind of worth it it’s I think like 10 bucks per month let me see if
there’s a link down here for X I’m not seeing it I think it’s $10 per month and they will
let you have the first month of for free so technically you can go in and start designing
the logo if you like it and then maybe sign up for the Pro and then you can cancel it
before you have to pay for it that’s a thought so let me just log in here with my account
it’s free to create an account let me log in with my account and go ahead and show you
this logo thing okay so I’m logged into my account and you can see I was already playing
around with some of these logos here so when I first login I see this year it’s as created
design and these are the different things that you can design and I’m a go ahead and
click on the logo right here and it’s can open me up in a new tab just doing this to
show you some of the designs so you can see right off the bat that some of these designs
here there are actually very nice I mean you can get something that works just perfectly
for what you’re trying to do and it’s very inexpensive it’s free or if you wanted that
transparent version you can go ahead and pay your sign-up will soothe the cost is here
in a moment so I’m in a scroll down and let’s just choose is something real quick you can
also do a search so I’m just going to do a scroll like this and see what I can see to
see something that fits the space now it’s also important to note with logos if it’s
going to be a wide logo you you typically don’t want really tall logos you want a more
wide logo something like this right here it’s can usually fit better in a website header
then something really tall like this let’s at another thing you definitely want to keep
an eye out for alright so so far I haven’t seen something I like Texas right here is
pretty cool we probably would want to change that image right there this is actually really
cool right here as well I like the topography this is nice it’s the go ahead and choose
one here and get started with it so okay, choose a basic one and it’s this one right
here I go ahead and click on it and then what it does is it places it right in here and
then you can literally change this to whatever you wanted so I can click right here on the
letter let me highlight it and change it to a see their ego and then right here I can
highlight this and type crafter just like that so if I want him to do that I could and
then for this I can go click on it and then off to the right I can kinda tighten that
in a little bit or let’s see maybe I need to just move it over there you go it’s moved
and then I can change this text to whatever tagline I may want and then for the color
I think I can just go ahead and click this box and you can see here’s the color and if
I click on that I can choose a different color and then that’s kind of like my green and
you can see I almost already have a really nice looking the logo here so probably one
of things I should do is come out with some kind of a longer tutorial video on using canvas
up now we have this design you can see how quick it was to make them get rid of this
Realty group I’m in a highlighted and let’s see how minute click on it and then here’s
a little trashcan on the top right and there ago I got a nice looking logo I’m happy with
it so now what you would do is you go ahead and click on download and when you change
this is the option you want this transparent background and you you can get it and this
is what I was saying that you need the paid version in order to get that some to go ahead
and click on this and learn more and see okay so here it is it says right here you would
need to sign up for the Pro version of Campo but look at this you get a 30 day free trial
so you could literally come in here make a beautiful logo and then you know decide to
keep it or not keep it you don’t end up paying anything summit click on that okay so here
we go this is the pricing that I wanted to see so I guess you need a credit card but
you’ll have to remember to cancel it but I bet you don’t have to call you can cancel
it in the web-based interface she could literally go here sign up for the monthly 1295 and then
you know cancel it if you don’t see yourself continuing using it you could still have your
logo with the transparent background and it even says right here that they will remind
you three days before your trial ends so this is something to think about if you want logo
and you definitely need a transparent background for it would be to go here some skin to go
ahead and download it right now it pops this up but there are so many beautiful logo templates
in here I think the logos templates and here are better than the actual logos that we saw
moment ago on fiber and what it does is all your designs it saves them all and you can
at any time go and change them or reuse them or do whatever you want okay it downloaded
I’m closing this but you can do this just be fun and I like looking in your just for
logo inspiration I mean you can get excellent logo for a restaurant for any kind of a local
business for religious organization and you can come in here and they probably got a template
that’s almost a perfect starting point for just about anything I mean these are really
nice designs and they’ve really nailed it and so that’s why when I went here and I searched
for free logo and I came across can file which I’ve used before I was really impressed that
they do logos now on probably most people are unaware of that so anyways take some time
and figure out what you can do with the logo whether you have a designer you already have
a logo where they’re going to go the inexpensive route and use canvas or just hire someone
on five or you definitely gonna want to go ahead and have a logo created and a lot of
times the color scheme that you you are designer comes up within the logo would be the colors
you use on your website or vice versa if you’re using canvas on your own and you have already
choosing some colors for your color palette you might want to use those in your logo so
this is all I have for you on creating a logo okay so now we are back into the WordPress
administration area right here in now you’ve probably learned more than you thought you
were to learn about logos and colors and topography and all of that and so now we can actually
take what information and training you just got and actually start applying it to this
website design so earlier in the tutorial I mentioned that you have this thing called
a WordPress theme and we happen to be using the Astra Theme and the vast majority of the
settings for the Astra Theme or anything for that matter with WordPress is going to be
found in the customizer so what you can do is go to appearance and then there’s a customize
option right here that will jump us straight on into the customizer however if you are
also on the front end of the website and you have this administration bar appear you’ll
notice that there is a customize option here as well so why don’t you go ahead and click
on that and it will take us right on into the customizer so this is where working to
have the theme settings remember the theme is what we used to control the header and
the footer in the menus to put our logo and choose our colors all of those global things
that have to deal with our website there can be done right here in the customizer some
to walk you through them right now so the first tab right here is going to be for site
identity and this is typically going to be your logo so when we click on it we see here
we get to logo options one is the normal logo size and then there’s something called a retina
logo and that would be exactly doubled the size of that normal logo and what that’s gonna
do is if someone is on your website and there on maybe an Apple device or a laptop or a
computer that has a 4K screen much higher resolution it instead of showing this logo
it’ll be a little on the blurry side because the resolution so good it will instead show
this one right here so I can tell you right now on my computer I have a 4K screen it’s
actually showing this logo but shrunk down to that size so it looks sharp and crisp Syrian
want to put your logo in here for these two various sizes and it’s actually quite simple
to change the logo I can go ahead and click on remove and it removes the logo and then
I will click on a select logo and then all I need to do is just drag and drop a new logo
file across so I have a file right here on my computer just can use this up for demonstration
purposes you said just drag and drop it across and then I’m a go ahead and click on the select
right here now what happens is it in WordPress takes you to this crop image screen don’t
look at this and think that you actually have to change the size of your logo because you
don’t you can click on a skip cropping and then it’s going to go ahead and put that in
there now the reason why were not seen the logo right here and that’s because eyes like
I said a moment ago this is being displayed on my computer screen because I have a 4K
screen but if I was to remove this then it would go ahead and show this logo right there
in one of the things I love about this Astra Theme is we can control the size of the logo
right here so if we had it and we wanted it to be larger we can just make it wider like
this or if it was showing to widen we uploaded a logo that’s too large we can just adjust
the size here just like that and you also have control over it for mobile devices so
when you click on this you can have a mobile specific setting for tablets and for mobile
devices now what you’re also able to do is if you wanted to set your site title right
here you can check on this box and it will actually show the site title right there now
this doesn’t actually look that good but that is why we have this in-line logo and site
title option so fight check this box it’s going to move the title just off to the side
like that we could do the same thing if we entered a tagline typically though when you
have a logo you would just not show any kind of text here it would be just the logo but
if you wanted to have kind of an icon type of logo like I have on my website which just
the sea these settings work fantastic for that summer to go ahead and disable that right
there also right here you can set what’s called a Favor con so that’s the little icons that
will show up in someone’s browser might be up here or to be on the tabs that are just
above this you can upload an image for that or choose the same one so I’m go ahead and
reset the logo back to what it was okay now we are back to how it was okay so let’s go
back and here we are now let’s take a look at some of the layout options and right here
we have our container and this is kind of a complicated concept to explain this is how
wide your website will look on computer monitors see you can have it fixed so this you can
go ahead and start with the launch plan I will say if you get this Pro plan it does
come with additional resources for your web hosting account but for this tutorial working
to choose the launch plan summary to go here to order now and I’m in a go ahead and choose
the three year option that’s going to get me the largest discount let’s go ahead and
click on that and then it’s can open up in a new tab and it’s gonna take me straight
to their shopping cart okay and through this checkout process there might be some options
or encouragement to upgrade to one of the other plans you can choose that if you want
or just click on no thanks so let’s go through the order process really quick Template is
using a 1200 pixels wide so if you wanted to squeeze more in there for wider monitors
you can adjust this setting and you know what I’ll probably have to have a more specific
video on containers that all link down below so that you can understand the difference
but there is a box to layout and so essentially your container is what’s going to be underneath
the header and above the footer how much space is used here and how it’s used so right now
we have its full width from edge to edge but we have other options we can have it be boxed
so the content is kind of restrained and so you have some of those options there and you
can choose this option based upon different types of content that you have so you might
want to look a little different for a blog post and you most certainly will okay so let
me go back now here’s an interesting option and I love that this is here click on primary
header and so this is your header and the theme has several header styles for you to
choose from now right now are using the most typical logo on the left menu on the right
but you can click this option right here which I think would be very fitting for an e-commerce
website this puts the logo on the top in the menu just below it I really like that a lot
and if you’re in a country where your websites in your writing is right to left you might
like this layout works right to left to go back to right here ask them and leave it right
here I kind of like this for an e-commerce website not just pay attention the fact that
it does take up more height but it looks really clean it looks really good now right here
we have that shopping cart in the header this little icon right here for the shopping cart
to talk more about that in a little bit you don’t have to have that if you don’t want
it that we can change this from from the shopping cart icon to nothing and this will actually
just remove that shopping cart I icon now I really like the shopping cart icon someone
to put that back in there like that a lot and you also have some options of how this
will look on a mobile device so let’s go back and you also have layout options for blog
posts you have layout options for the sidebar the footer let’s take a look at the footer
so when I scroll all the way down we have that footer down here and we have these four
columns so if I click on the footer widgets right here it’s good to show the layout so
if I didn’t actually want this at all I can just click on disable and watch what happens
that whole footer area proof it completely disappears and were just left with this little
bit here for our copyright although I think in this site it’s good to actually have it
so check that and get our footer back now right here is the footer bar and that’s this
area right here now you can choose this layout there’s a couple layouts we can get rid of
entirely we can have it where there’s information on top of each other or it’s on side-by-side
so right here you can have it be anything here and anything here on the rights right
now it sets a custom text but you have options of having a special dedicated menu down here
that’s really nice if you have a privacy policy or disclaimers or things of that nature maybe
even a site map and you might want to have a special menu for the footer and you can
assign it but right now it’s just that the custom text and you can change the text to
whatever you want if you don’t want to say this you can just highlight it and check make
it say whatever you would like it to say and that’s can it be our footer bar okay so let’s
back up again now you hear words is WooCommerce these are the layouts for the page with all
of our products and the layout for the individual products working to take a look at that when
we get to that point in the tutorial something to go ahead and back up now here is where
we can set colors and background colors sewing click into their and let’s first click into
base colors so we have our main theme color right here and if you want to change any of
these colors you just click on select color in this is where you would put that hex code
in that we talked about when we were in the tutorial and talking about choosing a color
palette so I could go ahead and choose any color and you’ll see a change right away so
if I wanted to make it say this green just so it’s a very noticeable color you can see
right there it started to change green and when I hover over these you see a changing
as well and other spots you will see how this color choice carries into lots of different
aspects automatically for you in the theme so you can see this sale badge right here
it’s pulling actually from that color so there’s a lot of things that are going to just pull
from this primary theme color and this is why the Astra Theme is so easy to get up and
start using is because it kind of configures itself with minimal information from you some
to go ahead and put that back on the default color which I think might’ve been this black
or something along those lines which is fine probably this one right here so this right
here is our text color so we can change that let me reset that we have our link hover color
and then we have our predominant background color so you can just come here and pop your
colors in very easily summon to go back and for our footer widgets we have the colors
there as well so when I scroll down we can have control over the colors here and we have
the same color options and this is the background color that you see in the same goes for right
underneath that this footer bar you can change the color of the background and the colors
that you see there in case you have full control but you have really good control over the
colors that are used in the theme now let’s take a look at the topography options right
here in this are going to be where you’re gonna put your fonts and we saw the video
about choosing a font pair so right here which is base topography you can set your main font
family that you chose and there’s all these different options here but I I hope that you
took the time that see a font pairing that you really want and you really like and here’s
the weight and the style of the font which is capitalized under case or lowercase you
can also use the font size right here you have all these options now here is for the
actual headlines and you have full control over the font of the headlines that are used
throughout your website some to go back let’s take a look at the content options now this
is going to give you control over the font size of the various headings that you may
use in your website design and what is really nice if you have these mobile device specific
options right here that makes it so easy to make sure your website looks good on all devices
some to go back now you also have control over the sizes of fonts used for blog posts
and you also have it for single posts or pages so you have all these controls but is not
an overwhelming amount of controls it’s just enough to get you where you want to go now
we also have a default button styling so we can click here and so we can check choose
the text color the color of the text when the mouse cursor is hovered over a button
and then we can choose the button background color and then the background color when you’re
hovering over a button you can also around your buttons a bit so you can set a border
radius on my site I like to set this to five so it’s just a little rounded right here it’s
real sharp edge so this is going to rounded just a little bit were actually skin around
it is much as you want you can make it appeals shaped or anything like that and right here
we can choose the padding of your button and I haven’t talked about padding yet but I’m
in a talk about that soon that is spacing on the inside so there’s two things called
margin and padding margin is spacing on the outside padding is spacing on the inside so
the distance between these two buttons is margin but the inside distance between the
lettering and the edge of the button that is your padding bottom to talk about that
a whole lot more later on in this tutorial and that is your buttons now here is where
we can control our menu so right here we have our menu I can click here on menus now this
website has some menus already created and you can see where they are assigned so this
area right here is called the primary menu and when I look at these list of menus you
can create new menus I see right here the main menu is the name of this menu and it’s
assigned to the primary menu so if I click in it right here I can see all of my menu
options and exactly how they’re ordered and I can see these are sub menu items of this
category and these are submenu items right here you can easily rearrange anything so
if I wanted the about us page 2 show in a different location in the menu I can just
drag and drop it up and that’s going to move it right next to where it says home you see
how easy it is to put your menu together let me go back I really liked where that was this right here is to show a list of those
Gorgon and talk more about that later in the tutorials I just wanted to show you the menu
right here and if you scroll down this is how you assign the menu to a location so you
can see right here is an option to assign a menu also to the footer so if I was to create
a new page for this website I would probably maybe want to add that to be something that’s
available in the menu some to go back now these menus are used in a sidebar on the shop
page and will take a look at those later on I just wanted to show you how to control and
set up and make this menu be exactly what you wanted to be okay so now I want to take
a look at well widgets were not really using much right now this are the in footer area
of the website so when I scroll down we have footer widget 123 and four actually there’s
are menus I was saying these might be sidebars on the product or shop pages there actually
down here so I have a quick link menu a for her in a for him menu and that’s being assigned
to these widget areas so widget area one is a navigation menu named quick links now you
can add additional widgets to to this area you could just click) you see a list of widgets
I can click on one and easily add it or I can also remove a widget if I didn’t like
this I can do this arrow and click on remove and it will delete that widget so these are
our widget areas and this is what makes up this footer now if I wanted to change any
of the options that are in this menu I will go to the V menu which was in the settings
that we just saw so this was the for her menu I could go back I can go back to menus I can
click on it for her and then here it is so I just wanted to change the ordering I could
go like that in your Missy jeans was just move up to the top and so that’s how we can
get the footer to look exactly how you want it to look okay so let’s go ahead and back
up now lastly there are some WooCommerce this is going to be the e-commerce platform there
are some specific settings that we can go ahead and put in here however working to come
back into the customizer after we’ve gone through the part of this tutorial where were
learning everything about the e-commerce website and lastly in the customizer is this is called
additional CSS this is where you can put little/styling snippets of code now in this tutorial were
not really dealing with any code which is really nice but from time to time you might
need to add a little bit of custom CSS I have advanced tutorials on that your doctor need
that for most of what you’re going to do with this WordPress based website but this is where
you would add that if you were ever asked to do it now all we need to do is click on
publish in any changes we’ve made have now been published to the live site so the main
change we made was this right here so let me click on the X get out of there and then
I’ll go to the front end of the website and show you that there is our new header style
so I just don’t want you to be intimidated with all of the different options because
if you’ve noticed Astra is a very simple to work with it’s very smart in how the options
are you pick a color and its use in various locations throughout the site the same goes
for fonts and it gives you exactly what you need to get the job done however there’s also
a pro version of Astro that were going to go and take a look at now okay some of the
Astor website and you can get there by visiting WPCrafter.com/Astra AST RA it will take you
straight over here also have a link in the video description box and let’s just take
a look around at this this Pro version and kind of what you get with it so let’s first
take a look at the pricing and this is by no means saying you absolutely have to get
this now because you don’t have to get this now but it’s nice to know that this is a developer
for you when you’re ready for it if you’d like to do more with your website if you want
to support the developers this is something that is definitely available for you so first
let’s take a look at pricing and then I went to show you around the Pro version and just
full disclosure I am using the Astra Theme on my website and I’m using the professional
version some go ahead and click on pricing so you can see the Astra Theme what were going
through in this video tutorial is completely free completely free of charge I’ve never
come across such a high quality theme and it also happens to be free and as you’ve noticed
so far there’s been no purchase required for anything now they also have the professional
version and it is $59 it can be used on unlimited websites you get support and updates for a
year and then if you want support and updates after the first year you can renew and it’s
a 20% off discount here’s a short list of some of the things that you’re going to get
actually when I click on see all features your ego some it’s gonna run through these
and then I’m going to try to shoot at my best actually show them to you soon get a transparent
header to show you that sticky header that’s when you scroll down the header will kind
of stick to the top you can get dynamic page headers that something I really need to demonstrate
to you it’s very powerful you get more color options which is nice you have more topography
options as well you can do something called custom layouts I’d have to demonstrate that
on a different video I love custom layouts this is one of those teachers that really
sets Astra Pro far and above every other theme that I’ve come across as his custom layouts
you can have additional footer layouts so we just looked at the footer and we saw that
there was no footer or the four widgets where you can have more layout options the scroll
to top link that is what you can see right here this little purple thing right there
and you get more options for your headers you can build more complex layouts you can
white label it that’s usually for someone that’s developing websites for someone and
you don’t want them to know you’re using the Astra Theme get additional blog layouts site
layouts and here’s the big one you get WooCommerce extra WooCommerce stuff and I’m in a mostly
demonstrate that in this video additional header designs spacing controls this is amazing
I’m using this right now and this is a very very helpful and the mega menu has not come
out just yet so these are what you get with the Pro version seeing it on a list like that
isn’t as good as actually seeing it in action so here is a site built with Astra and Astra
Pro and I’m in a show you some of the probably just the WooCommerce related features and
I think when you see it you might understand why this is such a great value but like I
said you don’t have to jump into this right now it can be when you’re ready so first you
can see the beautiful transparent header so there is no color background here just blends
in with the image that’s there and then here is that sticky header you see him scrolling
down and it’s sticking there to the top so that is some of the pro features let’s take
a look at the e-commerce Summit click on shop right here and so here’s one of the features
that I like you can have this filter option so if you’re in have lots of different products
and you might want to provide filtering options if you click on this watch what happens you
get this nice slide out option here side panel and there’s a filter and you can put anything
you want in this slide out option I really like that a lot now you can still have filter
options without Astro probes it would be on a sidebar that’s always there taking up space
so this way you’re able to actually show more products and then just show those options
when someone actually needs to see them now there’s another really nice feature on these
products when you hover over it that has something called quick view so I can click on a quick
view like this and then here is the product and now I can just go straight to adding it
to the cart and check out so when I click on add to cart I can click on view cart but
the point is it makes it easier for someone to actually get to the point of clicking on
the buy button I really like that quick view feature just like that and then do an add
to cart speaking of add to cart look at this you have a more customized add to cart options
here so you can change the cart icon and you see were also showing the amount of the products
or the amount of money that is required for the cart so let’s go ahead and take a look
at a product page right here and scroll down and you can see this is one have the gallery
no I don’t think it does let me go to product that does have the gallery in its okay here
you go see get this really nice gallery with the multiple pictures that you can have here
on the side that’s another really nice feature let’s take a look at the shopping cart so
if I go here and I click on view cart this area right here which is one of those page
headers that I showed you and all of these various pages are using the single page headers
right here where you can do some really nice things and set the background image now when
you click on check out it’s probably not gonna work on the demo right here because it’s not
a live chat shopping cart when you click on that it also has the option of having a distraction
free check out that’s where when someone’s at the checkout page it removes the menu items
and just take your logo and puts it right there in the middle so someone could stay
focused on checking out and that’s a very unique feature that will certainly pay off
in the higher conversions people actually completing their check out and there’s also
an option to have a multi step check out that is very good as well so can break out what
you require are the steps required to actually check out the putting their contact information
in and then completing the actual purchase so those are just some of the highlights of
what comes with Astra Pro you also get supports you get direct support you can submit tickets
and they will respond to you but what you’re also doing is you’re supporting the developer
that has made this free theme and you’re also getting something in return so I can’t recommend
Astra Pro enough I use it and I trust them with my website which is extremely important
to me the amount of traffic that hits my website and so anyways if you want to check out Astrid’s
WPCrafter.com/Astra I just wanted to show you what it can do when you’re ready to get
it if you’re ready to give it get it it’s right here it’s ready for you it’s easy to
add to your website when you’re ready to do more with it so now it’s time to learn how
to use the page builder Elementor all right now it is time to learn how to use Elementor
and working to start off from scratch and at the end of this section of the two oriole
you’re going to have a vast understanding of what a page builder is and how to use it
to build what you want to build so first let’s just figure out and talk about what Elementor
is so technically it’s a page builder for WordPress page builder means it’s a tool that’s
can allow you to easily through an interface build out the page of your website for each
individual page and the reason we use Elementor’s because there’s really no easier way to build
webpages because there is no coding required now prior to tools like Elementor if you wanted
to build a website you had to know how to write all different types of code and that
just was a unique skill set that only certain people had so you would have to go out and
hire someone to build a website for you with a tool like Elementor you don’t have to know
any code there is no coding required to build a webpage now there are some best practices
near learn all that in this video and some concepts you can learn all of that but the
point is you don’t need to have an education in coding you don’t have to have any experience
in coding you don’t even really have to be a technical person in order to build a website
that you’re going to be thrilled to have so there’s this transition from manually coding
out websites to using tools like Elementor on top of WordPress to build amazing websites
people don’t really and code anymore they’re now using tools like Elementor now Elementor
is going to be used to create the content that’s going to be below the header of your
website and above the footer of your website that is called your container area of a any
webpage and you’re going to use Elementor for that part of your website let’s talk about
something called the page structure so right here you see an image of what my website looks
like in working to go through in this tutorial how this is done and the page structure that
goes into building something like this so let’s talk about what Elementor does essentially
is going to allow you to create separate containers on a page now just think of it like a container
that might be in your house you have this container and you can put things in that container
and you can have different container styles you can actually put some items in a container
and then take that container and then put it in a another container so when were looking
at your page and the page structure it’s is simply just a series of containers now the
phrase that you’re in hear me say over and over again in the terminology that Elementor
uses they’re called sections so you have these section containers now your section container
can have a unique background to it may be an image or video or maybe an image in kind
of a color that kinda blends over it called the gradient maybe just a solid color these
are called backgrounds that you can add to this section container and then this is section
containers can I have different spacing called margins in padding and urinate hear me talk
about that a lot margin is the space outside of the container padding is the space inside
of the container it’s very simple if you just think of it on those terms margin is the outside
space padding is the inside space a big part of web design is spacing everything that you
have on your webpage margin and padding you’re going to come to understand that very good
now your section can have columns in it and so can it be one call number to call him or
three columns you can to have any number of columns inside the section container however
column is kind of a container in its own and it can have its own unique background and
it can have its own unique margins and padding’s so if you had a section container and it had
a solid black background and then you had to call them containers in there in that column
one you wanted it to be a green background in the second column you wanted it to be a
purple background columns can have their own backgrounds margin and padding the spacing
then there’s the items that you put into these containers and those I refer to as modules
or elements or widgets you’re gonna really hear those three terms used interchangeably
so if I say you’re to put this module in this element in or this widget in your inherent
those three phrases that are typically referring to these things called modules so there’s
like a headline module there is a text box module there’s an image module there is a
video module there’s all these different things there modules elements widgets use all those
words interchangeably when were looking at Elementor so now let’s go back and look at
my website that my webpage again that I showed you a moment ago let’s take a look at it again
but keeping this concept in mind of containers sections columns modules and all of that so
here is the first part of my website in this right here is what it’s the header now Elementor
right now is not used to create headers of course in the future and there can open up
that functionality but today your header is best created with your theme remember how
I said earlier in this part of the tutorial that Elementor you use it for the container
and that’s all the content underneath your header and above your foot or so this right
here is my header and it’s done with my theme let’s look the next part this is a container
it’s its own separate container and you can see the the sum of the properties of this
section container are it has a white background it’s a kind of a basic container now when
you look at this container how many columns does it look like it has in it and has to
write on the right side you see a picture of me on the left side you see some text and
some icons those are separate column containers now let’s figure out what modules are actually
in these column containers on the right you have an image and it’s just an image of me
on the left you have some text and some icons so you can start to look at this page of mine
and start identifying the separate sections and what is going into building this page
so let’s take a look at the next one and this is a separate section and it has a green background
and the element that I have in here remember I say modules elements widgets on menus all
three phrases they all mean the same thing all I have is a headline in there let’s look
at the next one this is a separate section in this one actually has a contains my social
media icons one container the section one column and it has the social media icons in
it and the last part from the screenshot is this section as well and it has three columns
here and you can see some differences each column part of it is an image some text and
it has a white background you see that there there is this white background and so this
is another section on my website so let’s take these concepts for a moment will get
out of the presentation and will actually start working with Elementor right now and
I think all of this is just gonna start coming together and make complete and total sense
so here I have just a demo website that already has some Elementor pages built with it so
when you first install Elementor it’s going to and activated its can add some options
right here in option panel so this is the back and the setting options for Elementor
and obviously when were inside of the page there’s different settings there so these
are more administrative some of the go ahead and click right here and you have these options
you have a library so I’m in a show you in a moment how you are able to save these section
containers and you can save them here our entire pages that you built you can save them
into this library and it will make it very easy to reuse it on other parts of your website
you can also export and import section templates or full-page templates but this will go ahead
here and take a look at the settings panel now right here is the options of the areas
of WordPress were were able to have Elementor work in that is by default pages and posts
right here the more you at your website and it creates different content types there might
be additional options here now here are some restrictions on user roles this goes into
the WordPress and the user account system if you just have one log into your website
then you don’t need to bother with this setting right here but if you have a website with
multiple different user types logging in you have some control over who can use Elementor
on your website next right here is to disable default colors and fonts so if you enable
this colors will be pulled from your WordPress theme and if you disabled this the cut the
fonts will be pulled from your WordPress theme now you can do that some people really prefer
to do that and there are some reasons why that is actually helpful thing it makes it
easier if you want to change colors in the future or if you want to change fonts in the
future I will say though that even on my website that I’m extensively using Elementor on I
don’t have these checked but this are some people’s preferences okay so then we have
these tabs appear still in the settings option let’s go ahead and click on style and see
some of the style options so here we can set our generic font I never use that option right
there here is the content with and it said to 1200 so this was going to be how wide the
content area is on your website this would go in line with your team in your themes setting
this is interesting I would recommend leaving this and this is going to be the spacing between
widgets so we talked about containers and they have these widgets elements modules in
it this is how much spacing will be between them you could set this to zero if you wanted
to manually enter that in or just leave it here at 20 now the next two options really
have to do with your theme in integrating this with your theme most people will not
need to change anything here but if you’re using a theme with Elementor that doesn’t
support Elementor you might need to set these so that you can get it to work properly and
here you have an option if you’re going to use certain images where you want someone
to click on it and have that image pop up you can see that in a portfolio type of page
or some kind of a photo collage or photo showcase where you might want images were you click
on it for to open up in a pop up let’s take a look at some of our advanced settings are
right here now or you’re pretty much not can ever need to go to these settings but right
here you leave the CSS print med method to external file now this is something that’s
good to know it’s his switch editor loader method some web hosts may have trouble loading
Elementor in that case you can come in here and enable this option right here I haven’t
been in a situation where I have needed to enable it but this option is here for a reason
and it’s good just to know that it is there if you’re having trouble getting into the
Elementor editor so now it’s go ahead and click on tools and working to see some tools
here that is good to be aware of so first this one right here regenerate files this
is if you’re looking at the front end of your website you just created a page with Elementor
in your something’s just not looking right you can come in here and just as a troubleshooting
measure measure click right here it says generate regenerated files now Elementor has a template
library and it will automatically sync but there’s also this manual option to click on
this button to initiate a sink so what happens is they will release new templates for free
and also in the Pro version in this library and you might want to or maybe you’re in a
situation where something new is not showing and you can force it to sink Nexus click on
replace URL this is very useful if you are building a website and at some point you need
to migrated to a different domain name or if you started using your website without
using an SSL certificate and then you wanted to switch to using an SSL certificate this
will update the URL for you just put the old one put the new one and then click on replace
URL whatever you do make sure you have a backup before you do it because it’s not so easy
to switch back if there’s a problem next is a version control now what happens with WordPress
plug-ins like Elementor is from time to time well with Elementor it’s pretty regularly
they release updates and so though push out a new version if you happen to have any problems
with a new version that is released you can come here click this button and it will just
revert you back to the prior version and this is good to know if you’re ever in a pinch
and you’re wondering if an update caused the problem for you right here and I probably
wouldn’t recommend this depending on your skill level but you this might be good if
you have a testing set up but this will enable beta releases to be is delivered to you as
an update so you can leave it on disabled now for me I like it enabled because I want
to test future versions obviously for what I do it’s a good idea for me but it might
not be a good idea for you next is one of my favorite features of Elementor I surprise
they kinda bury it in here this maintenance mode right here now this is really cool so
if you’re building a website you want to have a under construction or a maintenance mode
type of notification up and people won’t be able to see your website while Elementor makes
it super easy to do this so right here you can choose where you wanted to be coming soon
maintenance and then you can choose who can access it so if it’s log then that means you
can access it when you actually log into your website and then right here you can choose
a template and so that would be in the my library so essentially you could go to the
library create a new page save it and then it would appear in this list here this is
how you can put your website in maintenance mode so no one can see what you’re doing that
all they’ll see is that page that you create or you select right here and also there is
some Elementor templates for a coming soon page I really love this feature right here
it’s one of my favorite things with Elementor and it’s very unique so it last is the system
info right here and this is just some stats from your web hosting environment so if you’re
having a problem element and you reach out to Elementor for support they might ask you
for this system info in here it is right there so here’s a version of this report that is
very easy to copy and paste and send to them so these are the back end settings for Elementor
let’s go ahead and now take a look at the Elementor interface so what we can do me click
on pages first so here are some existing pages on this website I put this together just because
I thought it would be perfect for kind of getting an idea of how Elementor works and
this is a perfect website page to do that with so here are some existing pages but if
you wanted to start fresh you would just click on add new you would give your page and name
and then click on publish and then right here you’ll be able to click on edit with Elementor
and it will take you right on into the page building experience but what working to do
is working to look at an existing page and just cannot deconstruct how it was built and
start applying these concepts of containers called sections and they have unique properties
like background colors videos and in and what you can place inside of them someone click
on this page right here and since it’s already been set up with Elementor announces edit
with Elementor a minute click on this and it’s can open up the loader and just in the
second or two it’s going to take me right on in okay so right here is the header and
remember the header is not built with your page billers not built with Elementor it’s
actually from your theme so I can actually edit anything in the header but everything
underneath the header which is starts right here and everything above the footer so when
I scroll down this is the footer I can’t edit anything in here but I can edit from here
on so that is the container area of the website where we can have sections and columns and
can drag and drop these elements before I deconstruct everything here on the right let’s
take a look at some of the settings and options we have available to us in the editing experience
so right here were looking at a list of the elements that we can drag and drop in here
and you can scroll down now if you have any at Elementor add-on packages it may add additional
elements of you have Elementor Pro X can add some additional elements and settings you
can always get to this part of the interface by clicking on this keypad dial looking thing
right here this box it’ll always take you back here and to make it easy to find different
widgets that you want you can just enter it in in the search box here because you’re going
to find that there’s certain ones that you just tend to use all the time now this global
tab right here when I click on it this is a feature that is in Elementor Pro word allows
you to save something say for example this I can just save this and use it on other parts
of the website let me go back to elements so now let’s click on the hamburger icon this
is called the hamburger icon go ahead and click on that and this is gonna take us to
the Elementor settings that we have when were in the editing experience so the first three
options are really convenience features so let’s first click on default colors this is
going to allow you to choose a default colors that are going to be used by default when
you drag and a module or element in here so there certain ones where it might have a headline
and it’s automatically going to pull this primary color in or secondary any texts it’ll
pull this color and your accent color so you can actually set these to your color palette
quite easily so if I click right here where the blue is I can go ahead and paste in a
color code and then save it and now what will happen is anything sent to the primary color
will be all linked to this color and you can change it at a later point to this is actually
very useful to come in here and set your color palette up someone said they recommend or
suggest but you’re probably just going to want to use your color palette I’ll show you
what I mean with that actually right now so let me go ahead and click on the dial pad
right here and I’m in a drag-and-drop a heading in let’s say right there and what color is
it using that primary color right there in the same thing goes for other widgets that
we have here I know for example the icon box I believe is the same thing a put that underneath
my heading and you see it has that primary color so if I go back I’ll click on the hamburger
icon click back on default colors now I’m clicking on my primary color and say I wanted
to make that white you see how that works and this is your primary color some just clear
that out let me go back to the default one like that here’s a reset option she’ll want
to go ahead and set those and then click on the apply button right here so no to go back
by clicking on the hamburger icon and the same applies the fonts so only click on here
we can set our primary headline secondary headline body text font and are accent text
so on any of these you can click on it and it will reveal the options and you can choose
your font through this long list right here and you can choose the thickness or better
known as the weight and you can do that for all of these four fonts and it’s the same
concept this is the heading font right here if I changed this right here it would change
it right there this is smart because if you have everything linked to these default settings
here if you ever change your mind you can easily go here and change color or you can
go here and change a font that’s what’s very nice about this so to go back and click on
the hamburger icon now the color picker is similar so any element that has a color to
it you get to choose your color and there’s some default color options that are shown
in these are those default colors so for example here’s this green let me click on it and I’m
in a choose just change it to some kind of goal like that okay so now it was green and
now it is purple now let me show you how that’s use them to click on apply and now I’m going
to click on this headline right here and the color option for this is underneath this style
option right here some click on that here’s the text color and so here’s a color picker
watch what happens when I click on it we have the color palette and you see that last color
there it is it was that purple that I selected so let me get back to that, click on the hamburger
icon click on color panel and color picker and there it is so you can have your colors
in here and it’s just gonna make it so much more convenient when you’re changing colors
on your website so when I go back you see these are to be your default colors but these
are to be the colors that are available in the color picker now here we have just some
settings specific to this page now here we have some settings that we already saw when
we were in the back end of Elementor but they’re also available here so right here on global
settings remember the style the font the spacing the widget space and all of that and right
here is another option that we saw for the image of light box we can choose different
colors for that let me go back there and then this and you concede with this icon this when
you actually click it it will take you back into the back end of WordPress into those
Elementor settings and of course here is the option to exit altogether from the page building
interface okay so let’s click on the number pad here and were back to our elements and
let’s look at these options that we have down here so right here we can go and see the settings
that are specific to just this page so let’s go ahead and click on that and right here
is the title of the page and right here I is the is the template now there something
that Elementor has for creating landing pages is called Elementor canvas and when you put
a page in Elementor canvas mode it completely removes all of the theme generated elements
such as your header and footer so you see I have the header and down below I have the
footer if I click on Elementor canvasser to see them completely vanished and all I’m left
with is my page and I scroll down you can see that footer is no longer there so that
is Elementor canvas it’s actually fantastic for creating landing pages where you want
to eliminate all any distracting elements like a nap and menu navigation so that’s where
that comes in handy and also you can have the status or access to the status of this
page or post and this one is published but I can put it in draft mode if I wanted private
and I don’t wanted to be available publicly yet and then we have this delete button here
I’m glad that it lights up and read because if I was the click on this it’s going to delete
all the content on this page so it’s sort of a reset button okay so click on the number
okay so click on the dial pad here get back to my elements next we have the responsive
mode options this is gotta be one of my favorite features with Elementor this is obviously
what it’s gonna look like on a desktop but if I click right here I can see what it will
look like on a tablet and I can start changing things so if I wanted to make this font smaller
I can click on it and I can change it just the four people that are viewing it on this
device and there’s lots of controls throughout Elementor like this so we see right here we
have this alignment option this is mobile specific so I can make it have a different
alignment for tablet or for a mobile device so now let’s see with the mobile preview looks
like and there it is so there’s things member is talking about spacing there’s margin and
padding margin is the space outside of your container padding is the space inside the
container or you’re going to be able to tweak those based upon the device so that you can
make sure you get pixel perfect website designs for all device types, to go back into my desktop
view now and let’s shrink that next we have our history in this is a fabulous feature
with Elementor is it retains a history of several things so every time you click on
this update button it’s going to save that as a revision and also when you’re making
changes alive in the page it’s gonna save each one of those and it’s going to allow
you to just do a quick undo or a quick rollback from just what you change so let’s go ahead
and click on that and take a look so we have the actions and the revisions remember the
revision is each time you click on the update button now when I go here you can see I have
two different revisions right here I can actually click on a different revision and it will
go back to how this looked at that time and then you can jump forward you can also delete
revisions there is an exit there to delete revisions let’s go back to actions so these
are actions that have happened since I last saved so I can go back on these as well and
you saw what I added was this icon box and I added this headline but if I wanted to go
back say to when I just added the headline I can click right here and what happened was
is a got rid of the icon box and I can go back even more now was really nice about Elementor
is there are keyboard shortcuts just like when you’re in your word processor or email
program or anywhere on your computer Elementor also has keyboard shortcuts so you don’t have
to go into here each time so I can even go back to when my editing started by clicking
right here and now I am all back to normal now the next icon here is the I and this is
really just the preview button another’s two ways to preview it you can click on this it’s
gonna get you completely out of the Elementor interface and open it in a new tab when we
do that now so it opened up a new tab and it’s going to show me this page in preview
mode and I’m completely out of the Elementor editor however there’s another way that you
can do it and that’s what clicking right here this little tab when I click on it it makes
the Elementor interface disappear and I’m in it and the previews type of mode as well
I guess the pre-purest way of previewing it would be to click on the eye however you be
in there’s also a keyboard shortcut to make this show or hide as well that is available
in Elementor I hope you’re seeing how amazing Elementor is in full-featured this page builder
is and it’s amazing that it is free and then lastly we have this update button here and
this is going to save all the changes that you’ve made when it’s green like this that
means there are changes that are available that haven’t been saved but when I click on
it you’re gonna see that it’s not green anymore and that’s because I now have an up-to-date
save which is really just backing up on these various actions that I did in this part of
the video okay someone click on the dial pad again so now let’s start talking about and
kinda deconstructing this page here so when I start hovering over items like this you
see everything kind of light up in different boxes so when you see this blue right here
this means that you’re at the section container level now if I click right here watch what
happens it pulls up the section settings right here now get to these in a moment let’s look
at these other icons and what they do this option will duplicate an entire section this
right here will give you the option of adding a section a above this section right here
I can save a section to the Elementor library to use it over again and then right here I
can remove a section entirely so when I’m in a do is click on the plus right here and
add a section and there it just reveals and I want to click right here where it says add
new section the first thing it asks me is what is the structure and so this would be
just one column or two column with three columns and so on and so forth now you can adjust
the amount of space that each column is so if you wanted to if you started was say this
kind of a layout you wanted maybe the middle you change your mind you wanted the middle
column to be larger to go to this it’s really easy to manually do that now show you how
so what I’ll do is actually here here I’ll just go ahead and start with a two column
layout and so now we have this section right here we have a column right here and we have
a column right here now before I get into making this section how we might want it I
want to show you what happens I want to show you how to access the column settings you
know when I’m hovering over this column we have this little option panel right here and
when I click on that it’s now going to be in the column settings you see how it’s his
edit column we have a similar layout style and advance options there so I’m in the column
settings but if I click right here on the blue I’m in the section settings so columns
and sections have separate settings and we have this menu option right here so right
here I can click on this to duplicate a column I can click on this to add a column and I
can click on this to remove a column let’s just see how easy that is so her want to duplicate
a call my click here and now we have three columns if I want to delete a column I can
just click on the X and now I’m back to two columns let’s do that one more time there
is now I have three now I can also resize my column CC that I can just click on the
edge and adjust the size now there’s a more precise way in the column settings I just
wanted to show you the column container itself in case’85 Go ahead and get rid of that I’ll
click on X now what I want to do before we look at the settings for sections and columns
I’m just drag-and-drop a headline in here some and a click on the dial pad here’s my
heading to drag and drop it right there and there it is and so we have nothing here and
we have the heading here so let’s take a look at the settings for a section so remember
your section column settings are to be very similar I just click here announces edit section
so first thing is our layout options and then we’ll have our style options that’s gonna
be the color of the background or an image or video in the advanced options that’s gonna
be where these this margin and padding options are going to be in some other options so we
have first some options here of the placement of the content so essentially what this option
means is the contents not going to be from edge to edge that means the module the background
will be edge to edge but the actual content won’t be edge to edge it’ll stay within the
same frame as your webpage okay next we have the columns gap so right now that’s the gap
between these two columns I can get rid of it or go through any of these settings if
I wanted to automatically add a gap between these columns I considered default height
for the section so right now it’s just this the default is the amount of space it needs
to hold its contents but I can do a fit the screen so that means this section will take
up the height of the entire screen or I can go to a minimum height and then I have this
slider right here so if I wanted it to be a minimum of this height I can do that if
I want to exit let’s do something like that in this it has a mobile option as well so
on different devices I can have it be a different minimum height then we have the content position
this is where the content will be positioned in the entire section so right now it is set
to middle but I can go to bottom and you can see the content went to the bottom I could
go to the top like that or I can leave it in the middle and that’s how you would space
your content scoops that was actually the column position I’m sorry the same concept
flows into content position as well okay and you can change your structure if you wanted
to after the fact that we have our style options right here and so we have our background this
is the first thing we can choose we can add a border we can have a shape divider which
is really cool and we could set some default topography options for this section so if
I wanted everything in this section to have the font to be white I can send it here in
one location so let’s go ahead and add a background so right here I can choose from classic this
is just get a big color here is a gradient so this is a blending of colors and I can
choose a background video and now when you see these hover options like this you can
see this in various locations this would change the settings beneath it when the mouse cursor
is hovering over that area it’s a very neat feature so let’s go ahead and put a color
in and I can show you how that works I’m in a click right here and then here’s a color
picker I can click right here and I can just choose the color of my choice you see that
was the same color as the font let’s put something different there we go and I have a color in
their and that’s simple so I could also put an image in soap I clicked on that I click
on media library these are just some existing pictures that are on this website right here
how about this dog right here let’s see click on insert media and there is our image now
what happens with images if you haven’t made it the size you want there is this position
option so I think I’m in a go center bottom to get the dog in there there we go how about
center rights actually know about middle center there we go now we have the dog and there
she was have to just pay attention to the size of the images that you upload and how
it may fit now we have other options for how a an image will display in the background
we can try playing around with the size to see if we can get that looking any better
so here’s the defaults here’s the auto setting is not making a change here’s the cover setting
and that actually makes a really big change and it looks a lot more like the image here
in the picture I actually come like the way that looks now a lot of times when you use
an image or video and you try to put text on top it’s a little hard to see the text
that’s what you might want to put a background overlay this would be overlaying a color or
gradient over the image so many click on that and I’m in a choose a color overlay so I can
click right here and let me go ahead and choose a dark color and you see how it starting to
make it easier to read the text when I do that and I can adjust this to adjust the transparency
or how strong that color comes across and now it’s making it a lot easier to read the
text and this is pretty much the same settings are going to get or a column that’s probably
not gonna look good in this section I’m creating right now but we also have these shaped dividers
and you could put them on the top of the section or on the bottom of the section and it will
add a shape so let’s try to add a shape to the top why not so here is a list of them
and I’ll just show you one or two and you’ll get the point I’ve made videos on this before
there is a shape divider right there and you have all these controls to change how it looks
and you can change the height of it if you just wanted it to be subtle you can do all
sorts of things with this you can flip it you can change this color right there there’s
so much control you have over this typically you see people use it on the bottom and it
looks good when the section on the bottom has a solid color so here’s mountains on the
bottom like that you can play around with it but you can see how this is a very powerful
design tool when you come into the settings here and less I said about the topography
this is your fonts you can set it so you can have a setting that will be applied to all
the text that might be in a particular section so for example heading color so if I wanted
to change all the headings colors I can just go in here and set it for the entire section
and click right here in this case I might go with the white font and there it is so
you can see that you can set topography options for an entire container section if that is
what you like and that is our style options and you can have a lot of these style options
are most of them in the column setting so numb to go ahead and click on advanced and
this is where we have margin and padding so margin is your space outside of the container
so if I increase it on the top it’s gonna push the container down because it’s space
on the outside now padding is space on the inside so it will stretch the inside let me
give you an example of this actually let me get rid of the sheet divider really quick
so that was down here under shaped dividers it was the bottom shaped divider I’ll switch
that to none and then I will go back in here all right so for margin and padding you can
click on click or leave this click this will link the same values together so for padding
if I start increasing it like this you notice how they all increase okay that’s when they’re
all locked together and you can unlock it if you wanted to just by clicking right here
so I’m in a go ahead and I’ll leave the margin locked okay and see what happens when I increase
it you can see what’s happening it’s the space outside of your container so when I increase
that it add space above and below that is margin patting is different so with padding
it is the space inside so as I increase this it’s adding space right here and if I increase
this it’s can add space on the bottom and that is what padding is and you can also control
left and right patting if I wanted to increase it actually this would be the left padding
watch what happens when I do this it pushes that text inside like that so spacing is a
big part of web design and it’s important to understand how to use margin in patting
margin is the space outside padding is the space inside and for these two controls there
is a mobile options right here so you can set it on a per device basis and you’re definitely
going to want to do that so me a lot this back up and then delete it out here some entrance
animation options some technical I options here with CSS responsive options this is really
really neat so you have visibility options so what this means is if I only wanted this
container to show on a desktop and not on a tablet or mobile I can just click here and
click here and now this will only show on a desktop I use this a lot I’ll create a section
just for my desktop and then I’ll create one just for mobile devices and so that’s how
you would go ahead and do that and then this right here is just an advanced feature in
Elementor Pro’s actually very good feature I happen to use it a lot cane that’s add custom
CSS here’s a little on the technical side so that is the section container and here
is the same thing I’ll just quickly jump through it the same thing for columns now columns
right here you can set the column with remember I was here adjusting it you see how the numbers
going up and down when I do that you have full control over that number just by manually
entering something in here is our same styling options right here and here’s our same spacing
of margins and padding’s and that’s the same options we found inside of the section so
we’ve covered a ton already we talked about sections in columns and elements and here
are elements and you just literally drag and drop them in each element is going to have
its own setting panel as well so right here this is the heading elements and when I click
on it right here there are options for the content that’s in it the style and advanced
so you’re already familiar with style in advance now these options are to change based upon
the module that you’re working with others also some stuff I wanted to show you here
when you’re hovering over a module you see that blue pencil in the top right when I hover
over that this gives me options to delete this module or widget right here I can also
duplicate it and right here I can edit which really just brings up the settings so I wanted
to duplicate this I can just click like that and then I can just drag and drop actually
let him go like this drag and drop that right there was a very easy to do now one of the
nice things about Elementor is it has something called in the line editing so what that means
is for the vast majority of text you have two options of modifying the text so right
here when I click on this you can see right here I can edit the text I can go right here
and edit it and it add it at and it gets added here in real time but you also have in-line
editing so I can click right here and I can start typing directly here and when I click
like that I have I can highlight something I have options I can bold I can underline
and I can italicize so if I wanted to bold that out I can go like that and now that is
bold and you can see it changes what is here this is known as in-line editing and it’s
one of the great features of Elementor so you have two ways of doing it so this headline
has these options I can make it a hyperlink if I wanted I could just pop something in
there I can change the size of the text right here I can set the alignment so if I wanted
to write a line I could do that and you have mobile options for that and then in the style
tab we can have unique topography options here we can have unique color and if I click
right here it’s his topography have options and another thing right here is take shadow
which is really advanced and really cool we can actually place a shadow underneath it
so it’s easier to read and just by actually clicking on that it actually added a shadow
and there’s a subtle difference between the two you can do some really neat things with
this text shadow option what’s nice is you know in here and play around with the settings
and everything and you can if you don’t like and you change your mind you can just click
this right here and it puts it back to default also with elements we have the style of our
spacing or margin and padding just before it’s in those same options here so some of
the most commonly used elements are going to be image so you could just drag and drop
that there and then right here you can click on delete and then click here again and choose
an image click on insert media and there we put a picture in that was very easy and you
have your alignment and all of that another commonly used elements going to be the text
editor this is just to be normal paragraphs of text you can see that right there so for
this we have the same in-line editing we have our content box here and we have a style tab
right here and I can change the text color to what I want to if I wanted to make it white
there is my text color and you’re already familiar with a lot of these options already
and then let’s go back here we have an option to add a video a very common element you’re
going to use is to add a button here let me clean this up a little bit and will take a
look at the button this is probably one of the most powerful modules that you have so
this is how your button starts and you can choose different styles right here you can
change your text I think this also has in-line editing yes so I can start changing the text
right there popular Lincoln you can set your alignment you can set a default size so if
you wanted it large now we can adjust what’s it called what’s this called hears it margin
or padding it is going to be padding’s organ to change that in a moment you can also toss
an icon in there if you wanted so let’s just throw something in knowledge jump into style
and guess what we see here padding so it’s all locked right now so if I start increasing
get it just removed all of the padding and now there’s just one little pixel of padding
so you can go here and maybe set it to 10 and then unlock it and then maybe add some
more to the right and the left of the button to make it just gonna look a little better
so let’s try to make it 2525 so there you go I usually like my buns to be a little wider
maybe like that and see how it’s adding some additional padding to the side there it is
okay let’s make these the same and you can totally have control of the button you can
control the topography right there button is something where you’re going to maybe want
something different for the hover so you can have control over the text and the background
on the normal state and then the hover state so for hover I’m going to make the text why
it’s and then I’m going to make the background something like this purple so now watch what
happens I hover and the button changes just like that there’s also some animations if
you wanted it to do something when someone hovers there it is you see how that changed
so you have full control here it’s just getting comfortable with these style options here’s
our border radius I told you I usually like to have five there is some there by default
so here it is let me go to five I think it might’ve been five by default there it is
and we can also do some box shadow this puts a little shadow underneath the elements and
it can elicit off the page and so that is the button you’re going to use the button
a lot there’s dividers and spacers you can have Google maps your to use image boxes icon
boxes photo galleries lists counters progress bars I don’t really use progress bars that
much myself but that your progress bar right there here’s the counter I don’t usually use
counters that much either but there is a counter and you have full control over the style as
soon as you start getting comfortable with it we have tabs toggles there’s all these
options here’s just a matter of jumping in and getting comfortable with it here’s the
testimonial this is a fabulous element that is available to you and so let me just go
ahead and click right here the X and get rid of it so you can see we just have a big section
here with the headline right here we have a section in and has this color in the back
by click here this is just the heading this right here is just the text editor this right
here is just the button there are three columns in here this is just a column with an image
and here’s a column with an image that’s all that there is and here’s another section and
this time there’s an image in the background and there’s a headline and here is a another
section it’s one big section and then this part right here has these three columns in
it to kind of showcase the services but if I click right here this right here is just
the image module in this right here is just the title and that’s all there is image and
title and is just repeating like that and so that’s why wanted to show off this element
was because it’s arming this pages because it’s very nice and simple and you can see
easily how this is created so anyways this is the Elementor interface you can just go
ahead and click on updates and then you can click the hamburger icon and then you can
click on exit the dashboard now it’s important to note that Elementor is growing and they
make changes from time to time so you might jump in there when you’re watching the video
and maybe a button moves or an option moved but it’s usually pretty easy to go ahead and
figure it out just in the situation if that does happen to you so now let’s talk about
something else okay now there’s Elementor but there’s also Elementor Pro Elementor Pro
is $50 for a single site license $99 for a three site license and its hundred and $99
for an unlimited license I have an unlimited license I actually bought it the first day
it was available for sale and what it is is an add-on package for Elementor so it doesn’t
replace Elementor it just works hand in hand with Elementor if you’re interested in checking
that out just visit WPCrafter.com/Elementor and I’ll have a link down below but let’s
take a look at why you might want to consider Elementor Pro and just for disclosure purposes
I use Elementor Pro on my website WPCrafter.com.com so your 1st’b0 to get some professional module
some Pro modules and there’s a whole list of them on the Elementor website when you
visit WPCrafter.com/Elementor but some of the highlights are this amazing forms of modules
you can create beautiful forms opt in forms forms with lots of questions it’s extremely
powerful and integrates with different autoresponder services it’s pretty pretty impressive when
you take a look at it it’s very impressive you have this post grid module that’s actually
what I was using on my homepage where you see the list of different blog posts in pieces
the content that’s the post grid so it’s a beautiful way of displaying all the blog posts
that you might have on your website another popular module is the slider module slider
is what you’d sit can see sometimes on various websites you go to write on the homepage right
underneath the header and they’ll be some content and then it will slide away in some
more content will show that’s a slider another very popular module and I think is one of
the most powerful that they offer is a pricing table option and you can create some beautiful
pricing tables with the Elementor Pro module so there’s obviously a lot more to Elementor
Pro there’s a ton of extra modules that are extremely powerful now the reason I pointed
out these these fours because these four are typically separate things you would have to
pay maybe 50 bucks each for I know there’s many forms plug-ins that are hundred dollars
or $200 a year there’s PostScript plug-in slider plug-ins pricing table plug-ins and
you get this all with Elementor Pro and that’s just some of what you get another thing that’s
really neat is you get to have global sections and elements and so what this means is if
you want to create a section and have it show on say all across your website there’s two
ways you can do that you can save it and manually restore it on all those pages but the problem
is what happens if you want to change something you have to manually jump to all those places
where you put it and change it now if you have a global section you could have one that
is applied across your website so when you want to make a change you just have to change
it in one location I extensively use this global section and global element feature
of Elementor Pro it’s very powerful next you have this spot to put in custom CSS this is
a little on the technical side I can tell you I use this all the time and I do have
a video out on adding custom CSS to Elementor who and I actually forgot to show you this
was their template system I’m in a have to jump back in there actually one when I do
that right now because this is actually important when we jump back into Elementor here ’96
I can’t believe I forgot to show you templates okay so here when you first create a page
and jump into Elementor you can have this ad template option so when you click on it
it’s gonna show you their template library any of these templates that have this Pro
badge on it are only available in the professional version of Elementor so there’s plenty of
templates here that are available that are in the free version as well so all you have
to do is click on it and then click on insert and it literally downloads it from the cloud
and puts it right inside of your website you can see some of these pro templates there
very beautifully designed their perfect source for inspiration and they also serve as a great
learning tool on using Elementor this is really neat with the shape dividers I always like
how they do that so you can literally restore one of these templates and see how they did
it and that’s a good way of learning that when I scroll up there’s also filtering options
here so you can mark your favorites and you can also see what’s most popular and what’s
trending and you can see what’s new and I will say they are consistently adding new
templates to this template library so that is the templates and so you get those Pro
templates with Elementor Pro and next is some features that are just about to come out and
that is Elementor being able to create the header and the footer of your website so you
wouldn’t have to be limited to whatever your theme offered you you be able to do it in
Elementor Pro and you will also be able to make stylish blog posts or content layouts
with it that is a little on the technical side as soon as they launch this on and have
a ton of content out on it it should be out in the first 1:45 thousand 18 now if you did
want to get Elementor Pro you can easily add it later on at any point but I have a training
course called Elementor essentials it takes you much deeper in training on how to get
the most out of Elementor and design beautiful websites with it I normally sell this course
for hundred and $99 however when you visit that link WPCrafter.com/Elementor could take
you to a page on my website where I’m to show you how if you were interested in purchasing
Elementor and you did it through the link on that page how you can get this course for
free so instead of paying $199 for access to this training course will actually enroll
you for free you can follow all the instructions that you see [email protected]/Elementor
so that is it for this Elementor tutorial okay so now that you know pretty much what
there is to know about Elementor let’s now try to apply that to this website template
that were working on it right here so you can see this is a section right here there’s
two columns but this column right here it’s empty and here is the calm and we have these
two buttons and we have this information right there and then here is very interesting grid
so we have one column or we have a section here with two columns and we have section
here are two columns but the what we did is we manipulated the spacing of the columns
and the size so that it would create this grid like you see and then down here we just
have the four columns that are automatically pulling information and from our store and
then we also can let’s take an example of the about us page and you’re going to be able
to see here how it was completely built with Elementor as well so we have this big page
title here we have this column here this is actually jump into editing this with Elementor
so we can dissect it I probably should’ve started with the homepage that’s okay we can
always back backtrack to that so alright so right here’s our section you can see it and
if I clicked right here we have our title we can change the text here we can change
the text there okay and if I wanted to see my section settings I can click on that I
can go to style and I can see were you we’ve got that cream color that were seeing we can
literally just go ahead and click here and we can change this color to a different one
if that’s what we actually wanted we can do that I’m honestly not to say this actually
here let’s put in the practice this history so I can go back to editing started there
we go is not good okay and so here is a section and we have two columns right here this one
is using the let’s see if I click here this it has an image carousel actually and this
is how it’s rotating the images and so that is the module there here’s a column this column
has a different background color it has this color there and we just have these bits of
text right there in the same goes for here here’s that tab module so if I click on it
this is what a tabs module looks like so here’s the first tab second tab and so on if you
click on it it will show the contents of this tab just like that and you can click on it
again to collapse it and you could do the same thing right there to see it you can rearrange
these tabs all that you wanted or you can just get rid of it altogether if it’s not
your thing you can also change the positioning it is horizontal but you can change that to
vertical and then here you would have full control over the style and how that looks
and the same thing right here we’ve got this section with this image in the background
and then right here we have a column in this column has this background color but it’s
slightly see-through let’s see how they do that when I go into my column settings and
that’s going to be the style and right here is the color but this knob right here is the
transparency of itself I go and put this up you won’t be able to see through it all but
as I go down you’re gonna see that you’re now able to see through it to careful with
it because you want the text to still be readable and there we go that is how that is done let
me actually jump out of here and I’m in a go to the homepage so I’m looking to save
any of that when I click on pages and I’m in a go to my homepage in them to click on
edit with Elementor it’s in a pop up and let’s see how the home pages and it’s all pretty
simple with that knowledge we’ve got this container right here this section container
here’s a calm and here’s an empty column and then underneath that we have four columns
and that’s how they’re doing the button here and the button there and right here we have
a headline as well when I click on it there is our title in this right here is I think
it’s a called the divider there it is so the divider is an option that was right here and
that’s just to put lines to divide various things you can change some things about that
if you wanted here is that part where I said we have two columns here and we have two columns
here and they each have this interesting spacing that just alternates perfectly to make it
look like a grid and then this is a background image in the column so if I go right here
and I click on our column settings and then I click on style you can see it is a background
image for the column and then right here we have a title and then right here we have a
button say you wanted the button to be off on the right to you can just click on it and
then put a right alignment the middle alignment or left alignment and if you wanted to change
the link to have a go to a specific part of your website you would click on it and right
here it says link you would just drop your link in it’s that simple and there it is and
it’s the same thing right there and here we have a title as well so this right here is
how this website is assembled and let’s go ahead and jump out of here by clicking the
hamburger icon and then click on exit the dashboard and then let’s click on leave and
that’s pretty much it to making this template look how you wanted to look or if you chose
a different one remember the beginning I said you could choose any of them if you chose
a different one you now have full control over making it look how you wanted to look
or creating something entirely new now that you have this knowledge of Elementor how there’s
sections in containers and and you just can visit any website now and look at it and understand
how the structure is so that you can replicated or be inspired or know how to make the website
look the way that you wanted to look and that’s why I wanted to teach you or take the time
to teach you Elementor first and then you can look at the website and start dissecting
it in making this look exactly how you wanted another were done with the Elementor side
of things we really need to start digging in to the e-commerce features I know this
video is kind of long but it’s okay because there’s hyperlinks down below you can jump
to different parts you can pause and finish it up tomorrow so what were to do now is jump
into the e-commerce features of this website so let’s take a deep dive into WordPress e-commerce
and talk about is using WooCommerce which is a plug-in for WordPress that will turn
your WordPress website into a full-featured e-commerce website now here’s the thing that
I want you to know upfront is that it’s going to be easier than you think for some reason
WooCommerce initially just comes across as very overwhelming having an e-commerce store
can come across is very overwhelming and a lot to take in but I want you to know that
when you start digging into it it’s going to be a lot easier than you think to get up
and running so here’s what essentially an e-commerce website in these e-commerce features
really do you’re going to list products and there’s different types of products were to
go through that and then you display those products on the front end of your website
next you sell those products and then fulfill the orders and that is all there really is
to an e-commerce web store and that’s pretty much what were going to cover right now so
let’s go ahead and take a look at the different types of products that you can have on your
e-commerce website so you can have a physical product obviously that’s something that you
physically ship then you can also have a virtual product and what that is is a product where
you’re not necessarily delivering a download or something like that there’s nothing being
shipped this would be kind of say an appointment if someone wanted to schedule an appointment
with you and you sold it an appointment that would be a virtual product and then we have
downloadable products and this is where after someone completes their purchase they will
be given a link where they can download in a secure area the file or whatever you are
offering them as a download now let’s look at the four different ways of actually setting
up these products in WooCommerce so there is the simple product and this is just a standalone
product that you sell then you have the option of having a group to product so this could
be kind of a product bundle so if you have two or three items you can bundle them together
as a group to product and sell that then there’s also an external product this is where you’re
not actually fulfilling the order maybe it’s an affiliate link to Amazon or something like
that this would be a perfect usage of an external product and then you have what’s very common
is a variable product this is where you’ll have a product and there’s multiple variations
of variation could be different sizes small medium large variation can be different colors
it can be whatever the if it’s an electronic safe in their storage it could be 32 GB or
64 GB so this is a very common it’s called a variable product and this is where someone
will land on the one product page and then they will choose the variation that they want
to inure to be able to set up whatever variables for product that you need to do you don’t
have to create them all as separate simple products then once you have all your products
set up in your website then what were going to do is control what’s called the product
category and this is also called your shop page so this will be the page on your website
that you are displaying to all of these products in a grid maybe there’s filters were people
can filter it by price and they can just click on the product that they’re interested in
and for each product that you have in your store you can set the visibility options you
have full control over the visibility if you want that product to show in the shop page
and that’s how basic having an e-commerce website is now what can be a little overwhelming
because it’s different for everybody in different situations is two things the first one is
taxation and how do you tax products now the issue with taxation is it’s different depending
on your country or your state or your location it’s going to be different so Juergen actually
have to find out how taxation needs to work but there are several different types of taxation
have full control over it in WooCommerce so one of the main options is origin-based taxation
that is can it be the taxes are based upon where your shipping the products from or where
the product is being sold from this is origin based taxation this is actually how Amazon
you use to tax Amazon.com in the United States they used to do it origin base so if you are
not in the state where Amazon was you were not having to pay sales taxes and that went
on for a long time until laws were changed the other way of taxation is shipping based
now the challenge was shipping base that means I’m going to charge taxes based upon where
the product is being shipped to that can actually get very complicated to manage because there
are so many different locations they all have different tax rates it’s actually kind of
complicated this is where some of the challenges come into play with having an e-commerce store
in this is managing and dealing with the taxation and other our services that will automatically
manage all those tax rates for you so it makes sure that you’re charging the correct tax
rate however Juergen have to do a little bit of the heavy lifting to find out how you’re
supposed to charge taxes based upon where you are and then there are what’s called tax
classes these are categories you could put products into so there’s standard and that’s
typically what you’re gonna leave for most your products but then there’s a reduced tax
class in a zero tax class now I I think this word classes is quite confusing we are going
to see it in taxation were also gonna see it in shipping these tax classes wanted you
just think instead of classes think of categories so a product can be standard taxation reduced
taxation or zero taxation and these are things that you actually set up on each product so
working to take a look at taxation in WooCommerce and I’m also going to give you some resources
to make sure you have that all dialed in next the big thing that can be a little complicated
happens to be shipping and that is basically how are you going to charge the right amount
for shipping depending on how your choosing to ship so you can maybe just include free
shipping and this actually wouldn’t be overwhelming at all if you included free shipping or maybe
you would have flat rate shipping and then this is very easy or if you want to charge
accurate shipping based upon what Juergen actually have to pay for the shipping and
then pass that off to the purchaser of the products you’re going to need to learn about
table rate shipping and this is the same thing where you create complex rules to make sure
you’re charging the right amount everywhere you would ship to based upon the carrier that
you’re using for shipping and then like we had tax classes there’s also shipping classes
or categories so you can charge different shipping on different products and then so
what you would do is you would create these shipping I like the word categories I don’t
like the word classes so you can create these shipping categories and so maybe a category
is free shipping may be another one is flat rate shipping and so you can create these
and assign these just like with the taxation you can assign it on a product byproduct basis
so obviously if you want to make this whole process easier you will maybe just to flat
rate shipping or maybe just include shipping into the cost of sending the product or selling
the product free shipping that’s an easy way to do it but WooCommerce is designed to meet
any e-commerce web stores needs but I don’t want you to get overwhelmed by the taxation
in the shipping I know it can seem overwhelming but what’s most important is that you get
started building your website filling out the products and getting it all set up and
then you sort through that you will sort through that and figure that out don’t let that be
a roadblock for you but you are going to have to spend some time figuring out your situation
it’s impossible to cover all the situations here in a tutorial video so let’s go ahead
and jump back into our websites and we will start digging into WooCommerce so for something
to go through the settings of WooCommerce and then I’m going to go ahead and take a
look at the products and then will set the way that the look on the front end of your
website so when you install and activate WooCommerce or can have these two options here there are
these two menu items you can have WooCommerce itself this is where you find your orders
you can create coupons. She reports your settings are in a be there and then right here is your
products and this is where your basically and load up and categorize all your products
and that’s pretty much all there is to it so let’s go ahead and on WooCommerce go ahead
and click on settings and will walk through some of the settings in WooCommerce now each
of the settings panels are going to be in these tabs and when you’re in a tab like for
instance if I click on products you’re going to have a sub menu items right here this might
not be so obvious slits click back on general and start going through the settings and start
talking about them so this a general tab is where working to set up information about
your store this is were going to put the address of your store you can load in your state or
country and you’re going to go down here and you’re going to set where you actually sell
to see you can limit your store to only selling to your country or certain countries and then
right here is we where you can enable taxation and tax calculations and then what’s very
important is the set your currency options so I’m go ahead and start filling this out
for me right now okay so I filled out my address I limited it to just selling in the United
states and also shipping only to the United States and I change the currency I said it
to the US dollar I’ll go ahead and click on save changes and now let’s go ahead and click
on the products tab and take a look at some of the options that we have here so this is
that tab where we have the multiple sub- options right here I just want to point that out so
you don’t miss those are right so here we are so this is where you’re going to tell
WooCommerce which page on your website is going to be that shop page where you list
all of your products out then we have some options here when someone clicks the add to
cart button and we can choose to if someone clicks on it to immediately take them into
the shopping cart if you wanted to do that here you can set in some measurements for
your products and then here you can decide whether or not you want to enable reviews
on your products and product ratings let’s go back up here and then click on inventory
now with WooCommerce you can actually have it manage the stock of your products and so
here’s the option in order to enable stock management and then here is where you can
decide how it will manage and hold the various products how it’s going to notify you if you’re
low on stock on particular products and then how to define if you’re low or not on stock
of certain products as you have these thresholds that you can said here and these notifications
and then you can decide how to deal with a product that is out of stock you can just
decide to hide it if you want from the catalog and then right here you can choose how and
even if you want to display that quantity so this is probably not good if you have large
numbers of quantity in stock but it is very good when you’re running low to induce scarcity
in whoever’s shopping on your sites you can choose the never show or you can have it show
just when it’s a low quantity or you can have it always show I cannot like this showing
only when it’s in low quantity myself but that’s can it be completely up to you now
here is the options for downloadable products so if you don’t have any downloadable products
that your offering on your shop and that this option will not be for you now here are the
options there is the file download method I would just go ahead and leave that as is
but then the access restrictions are quite interesting you might want to check here were
downloads require a login so someone actually has to be logged into your website in order
to actually do the download this would probably prevent people from sharing a download link
if you required that someone be logged into the website in order to start the download
and then right here is an option for you to decide when you want to grant someone access
to a download by default with WooCommerce when someone places an order it goes into
processing and then you would manually go in there and complete an order now there is
a little add-on extension that can automate that for downloadable products but right here
with this box checked it will grant download access when it hits processing and that way
the person that purchases the download doesn’t have to wait for you to come along and mark
their order complete now let’s take a look at the shipping tab so right here we have
the various shipping options which is shipping zones shipping options shipping classes now
a shipping zone is actually perfectly explained right here it’s a geographical region where
a certain set of shipping methods and rates apply so the way we actually see this in normal
life is when someone puts in the shipping address there’s only certain options that
are available to them so you can have a local zone so if someone’s in a particular area
near you you can have a local pickup option available for them it’s based upon their address
and another example is if you wanted a for example a zone just for an entire country
you can do that and charge a flat rate shipping to that group when you’re shipping to that
location and then another example would be to have a entire zone for a continent like
Europe and charge a flat rate shipping so these are your shipping zones based upon where
your shipping next let’s take a look at the shipping options that are available to us
so right here by default this is enabled to enable the shipping calculator on the cart
page and then here’s an option if you wanted to hide the shipping costs until an address
is entered so if that shipping cost is going to change based upon where someone is you’ll
probably want this enabled and then here are options of what you can allow someone to enter
for a shipping location so you can force it to be someone’s billing address or a shipping
address or have them not have an option so you see this a lot I do whenever I order anything
where I enter in my billing address and then it pre-fills that out to be the shipping address
and I then would have to if I wanted it shipped to a different location I would just go ahead
and change the address in there but there is this also security management is your right
hereto for shipping to the customer billing address this would probably reduce any type
of fraud if you’re selling high value items because typically when fraud occurs someone
makes a payment was someone else’s payment method and there’s a billing address but then
they’ll ship it someplace else where they can get access to whatever was purchased now
let’s take a look at shipping classes now shipping classes is an interesting concept
so essentially this is a way for you to group different products into categories for the
purpose of changing how you charge for shipping so say you had a flat rate shipping of $10
but on certain products you may want to charge an extra two dollars or something along those
lines were you would create a shipping class and we would set it up so that any product
that’s in that shipping class will be charged a flat rate plus this extra amount so in this
interface right here is not where we actually set up that information this is just where
we actually create the class and then were to go into a different screen where we go
ahead and put in what that surcharge is some to go ahead right now and add a few shipping
classes okay so I’ve gone ahead and filled it out I put large shoebox and if you don’t
put anything here for the slug it’s just going to use an auto generated based upon what you
named the class and then I have my description here something to go ahead and click on save
as shipping classes and now I’ve gone ahead and created my first shipping class so now
I’m in a go back to shipping zones and I’m going to set up a shipping zone of four flat
rate shipping all you do is click on add a shipping zone and then fill this out so I’ve
entered US domestic for the zone name and for the region I’ve chose the United states
and right here in the click on add a shipping method and so these are the options that we
get which is flat rate free shipping or local pickup and what I want is flat rate and then
would go ahead and click on add shipping method like this and it’s going to go ahead and add
it so now I have my flat rate set up and now I need to just put some information in there
about the charges so I click on edits and I get this pop-up right here in first I will
choose if the shipping cost is actually taxable this is another situation where you have to
see what the laws are in your area then we enter in the cost of the shipping so for Mama
to put 995 and then right here we see the shipping class costs and so right here is
that shipping class that we created large issue boxes so what I can do is use one of
these formulas so when you hover your mouse over the? Right here is the option so I can
put Brad I can put say I wanted to charge an extra two dollars per shoebox or shoe order
that someone places on top of the flat rate I can put to then the*which is multiplication
and then in bracket QT why that’s for quantity so this is what it would look like and there
it is so when I put a product in this category large shoebox so for each shoe sale it’s going
to charge the flat rate +2 dollars just on those items someone to go ahead and click
on save changes and now we’ve gone ahead and created this flat rate shipping option right
here and this is where you’d also want to add in a free shipping option if you wanted
to do that now I’m going to link to this article on the WooCommerce website right here specifically
on table rate shipping so that you can read through it if you wanted to create some more
complex rules for shipping your products either around your country or around the world there’s
an article here that walks you through it’s a tutorial article that walks you through
table rate shipping this would probably be a good topic for a dedicated video table rate
shipping but this is a great tutorial right here on that okay so that’s good to be shipping
go ahead and jump on over to our check out right here so we have these options right
here as well underneath checkout so the first option right here is how you do you want to
handle coupons so you can not take coupons at all if you didn’t want to and just unchecked
this right here and how you want to apply those coupons if you want to calculate multiple
coupons and then right here is the checkout process now this is one item where I don’t
think WooCommerce should have enabled by default but they do and that’s this enable guests
check out so when you uncheck this box this means that someone has to create an account
on your website in order to make an order this is what I definitely think you should
have off but it’s up to you based upon what you’re selling and how you’re selling it right
here is for secure checkout we don’t have to deal with that if you have an SSL certificate
you should have your entire website on SSL there was a time where it wasn’t as much of
a requirement but you did need it when someone was actually checking out however nowadays
you need to have an SSL certificate across your entire website now here’s where you tell
WooCommerce which pages on your WordPress website are your your shopping cart and your
checkout page and if you wanted an optional terms and condition page right here these
checkout endpoints you’re gonna want to leave those alone those are just some different
slugs that’s pretty technical and there’s really no reason to modify those now right
here’s where were going to list the order of our payment gateways and this is if you
were offering more than one ways to pay now it’s up to you how many ways you want offer
to pay I do think a good rule of thumb for convenience is to offer both PayPal and a
striped stripe is an extension that you can add to WooCommerce and it’s very easy to integrate
in you could take a direct credit card transactions on your website and also PayPal now what that
does is it gives your customers an option so some people they preferred not to use PayPal
and then there’s some people that prefer to use PayPal I know for me I like PayPal because
I find it convenient now the actual options for these different methods and how to enable
them on your website or not is going to be at the top and that was what we saw it right
here these are worry to see links for each of these payment methods this might be a good
point in the tutorial to go and add the stripe payment gateway by going to plug-ins add new
and I’m in a go ahead and open this up in the new tab and then right here we can just
do a search for the word stripe when you enter in stripe it’s going to be the first option
right here this used to cost money but then at some point WooCommerce made it free which
is actually good that they did that then just go ahead and click on install and the Marina
go ahead and activate it let’s click on activate right now and now it’s activated so when I
go back here and I go ahead and do a refresh organist see stripe is an option there you
have it you have all the various stripes and when I scroll down here they all are so what
we can do if you wanted to do the PayPal and stripe we can go like that and then right
here it says credit card is striped we can go ahead and put that at the top and now what
were going to do let me actually save my changes then were going to go and take a look at those
options and enable them so let’s go ahead and first click on PayPal because it’s right
here and what you want to do is just click right here to enable PayPal to begin with
now these are some options of how this payments can appear now right here for PayPal email
you’d want to enter in your PayPal email address this is not my PayPal email address just make
sure you enter the correct PayPal email address and you always always always want to test
the actual payment to a couple test payments to make sure you’re actually getting the money
and then right here you put your receiver email you’re going to want to get this PayPal
identity token when you hover over the? It tells you exactly how to get this identity
token so that you can pop it in here and then right here we have some options of the info
that will get pushed to PayPal the shipping were the billing address and then we scroll
down here this is what you’re going to need to do to get Juergen have to get this API
credentials from PayPal that when you hover over here it gives you information but here’s
a link that will get you all the information you need in order to get those API credentials
now I know very old PayPal accounts you any old PayPal account actually had access to
these API credentials but I think if you’re to go create a PayPal account today it actually
needs to be a business PayPal account in order to get these API credentials so let me go
ahead and click on save changes and Alice take a look at stripe okay so this is where
you can enable stripe by just checking right there and you can enter in the title how it’s
can appear when someone goes to check out with stripe and then there’s it’s actually
so simple was striped when you log in to get the information you need here so first you’d
want your test key and secret key you put that in there and this allows you to run tests
on your payment gateway just make sure when you’re running tests and you verify they work
that you disabled this test mode because people have gone live with their e-commerce site
and they forgot to take it out of test mode and let’s just say it’s quite a disaster here’s
some additional information on how it’s going to look on your website here’s an interesting
option when you enable this it wouldn’t be your standard check out for putting in your
credit card it will actually be in little pop up that stripe generates to collect the
credit card information the nice thing was stripe and also PayPal wins with PayPal PayPal
source the payment details and this is you no credit cards or things of that nature same
as stripe of someone purchases with stripes that information the credit card and all that
information you’re not actually storing it on your website you really don’t have a liability
there and then right here you have some additional options for how stripe will look on your website
it is so easy to get stripe working with your website so that’s good to be our check out
and payment option let’s go ahead and click on accounts so this is where you’re going
to tell WooCommerce which page on your website is the account page for your customers so
when your customers login to your website or they can click on my account and what happens
is they’ll have to log in they could see some information like recent orders and things
of that nature and so this is going to tell WooCommerce which page on your WordPress website
is for that you can obviously click right here and change it to a different page if
you didn’t wanted to be this one and so these next options are to be about how these accounts
get created so right here this checkbox is telling WooCommerce to create the account
when someone checks out you can also have open registrations on your my account page
I would recommend that because it could attract spammers just automated bots creating accounts
and then right here is some more options regarding log log and then here’s what happens and how
an account is actually created with this checkbox you’re telling WooCommerce to automatically
generate a username from the customer email I definitely recommend that and is probably
good idea to let your customers generate their own passwords or if you wanted to check this
box were WooCommerce will generate that password for them here some more account endpoints
you can just leave those as they are that’s what I recommend and click on save now accounts
what you notice it doesn’t have any sub options which is nice now is you want to add a new
menu item you can just click this plus and here’s a list of pages we have created and
we can also see a list of posts specific products or when you categorize your products you can
show the different categories which is what we are showing here this is the category genes
so all of your products if you put it in the category genes Look at emails that WooCommerce
is going to send various emails for various things new order counsel order failed order
there’s all of these different emails that get sent out now you can customize these but
before we do that let’s scroll down and look at some of the actual bigger options so here
we go email sender option so this is gonna be the from name of the from email address
so you might want to put your store name here and your stores email address here or the
one that you want people to be able to respond to and then right here you can add a URL to
an image and this would actually show in the header of these emails that go out and then
right here you can put some text in that will be in the footer of the email that goes out
right here you can change the colors to your brand’s colors so you would want to probably
for the base color not have it be the WooCommerce purple whatever your brands colors is and
then here’s the background color the background of the body where the text is and then the
color of the actual text so this would probably be the main color that you’re tweaking it
right here and then you want to save those options so on these emails right here while
obviously on these first three want to make sure it has the right email address that you
want so these are to be notifications to the store owner these emails here are going to
be going out to the customer so on any of these you can go ahead and click on configure
and it’s can it bring you to those options so you can enable or disable if you don’t
want to be notified of new orders you don’t have to you can uncheck this make sure your
email is there or wherever you want these notifications to go and this is what the subject
lines going to be it’s automatically gonna pull information in from the actual order
and then here is the email type it’s going to be an HTML-based email and that’s required
for to look good if you wanted to change anything and I probably don’t recommend doing that
but if you did you would go ahead and click on view template to look good I would recommend
leaving this on HTML but you could change it to plan text if you want but you want to
leave that on HTML and there is like a template file with all kinds of code that you’re not
going to want to edit but if you did need to there some instructions here of how you
can overwrite its even if you click on view template that’s just not can think much sense
the most people anyway so let me click on here to get out of this email and get back
to our screen sure you want to go in there and make sure you have your recipients in
their right customer these are obviously emails that are going to go out to the customer the
shouldn’t require much tweaking at all and then there some technical things here with
the API you’ll just leave these default but we have these options right here now let’s
take a look at some of the products and that’s really where you’re going to spend your time
doing most of your set up work is adding products to WooCommerce so, go ahead and click on all
products here the website that were working with has some in here so we can kind of get
an idea of how these products were added so that we can get comfortable adding them ourselves
so first let’s take a look at this product on the front end of the website and click
on view and open this up in a new tab right here and so here’s how our product looks now
were no set up products and get that process down in the morning to go in in and when to
show you how to change the way this actually looks on the front end so here’s our product
image here is our title here is our description bit of text this is saying it’s out of stock
but we can change that very easy here’s the SKU number you don’t actually have to show
that if you don’t use excuse here’s the category of the product and then here is a different
picture of it right here that someone can click on everything pretty much happens with Wu creating
products and it’s going to be all mainly in this box right here so here’s where we see
our different product types simple grouped external or affiliate and variable so when
I click on simple then we get our options here for a virtual product or a downloadable
product now when you click on these these tabbed options here they can tend to change
so if I click on a downloadable right here you notice how we have new options here and
this is actually just pointing to those downloadable files and setting some limits and some expirations
on it and so we can uncheck that and then virtual it tightens this up a bit and removes
some options which was mainly the shipping option and then we have our simple product
so right here we can enter in a price and a sales price if we wanted and you can even
schedule a sale on a particular product some to go ahead and enter some values I’ve entered
in 3999 and 2999 so it will be on sale and then you can click on the inventory tab and
this is where you can put a SKU number in if you wanted to and you can set the stock
status now right here is if you wanted to enable stock management on this particular
product in the right here you have some failsafes if you have a particular product or you don’t
want to allow someone to order more than one this right here is the option for you usually
want that with digital downloads I don’t want someone to accidentally purchase to when they
would only need one and then they would have to come back to you and ask you for a refund
that’s when I’ve use this right here the most then we can go ahead and click on shipping
right here and this is where we can put in some criteria for the product like a weight
and dimensions and also choose a shipping class not we saw earlier when I created the
shipping class large shoebox and that would add two dollars to the shipping cost and that’s
what I’ve gone ahead and selected it right here now you can also link this product or
you can link products together as up cells and cross cells so what happens is an upsell
is when someone’s checking out in there in the shopping cart though be presented with
up sales are going to be shown to someone when they’re actually on the product page
so someone’s looking at one product and you’re showing another product which would be an
upsell the intention is for them to purchase and upsell instead of the product that there
on that’s what the upsell is now across cell is product that would go along with the product
so for cross sell you these only show when someone is actually in the shopping cart and
they’ve already taken a product they and they put it in their cart then it’s going to display
these cross cells so crossbills are good for maybe having a product to be shown to a customer
that they may need in their not thinking about it you see this a lot of times in electronics
so for example I was purchasing a particular what’s called a capture card but what do I
need with that will I need the correct cables to go along with the capture card so when
I’m checking out that would be good to show me the various cables that I may need so I
can click a button and easily add that to the cart so I can click in here and do a search
for a another product that’s already in my e-commerce store and I can add it as an upsell
or a cross sell next we have product attributes in this is part of the product variations
so an example of an attribute would be size small medium large or an example would be
color in the various colors of your products you can go ahead right here in add a new custom
attribute or in the drop-down we already have one available and it’s right here name to
size so when that’s clicked on you can click on add and then it’s can add the size right
here and I can just go ahead and put my value in there now lastly we have the advance option
right here and this is where you can put some notes in that you might want along with the
purchase and you can enable or disable reviews on this particular product and last we had
that little bit of text that is actually going to show near the price so I’m going to change
this text so it’s pretty obvious how’s that near the price and then here’s where you’d
see any reviews people left right here’s where you can add the main product image but then
you can add additional images in a product gallery if you had more than one here you
could easily reorder them okay and as I scroll up you can add a category and start categorizing
your product now here’s something that is kind of important and that is catalog visibility
so let me just click on edit so we can look at the options so by default it saying to
show this on the shot page with all the other available products and of someone searching
show this as a result right here if you choose shop only it just won’t be in the search results
and then if you check right here it won’t be in the shop but it can be searched and
then right here you can hide it all together so this would be an idea if you were having
a cross sale and you don’t want someone buying that cross sell product directly because maybe
you’re discounting a little bit so that example of a cable normally the cables $50 but in
the cart your offering it for say 25 we you can hide it someone can just buy that alone
actually have to buy it as a cross sell and this is when you can go ahead and hide that
if you want so go ahead and click on okay let’s click on update and see how the product
looks in the morning to jump back in and take a look at the other product types someone
ago here and now we have that price that we put in and remember I put that text at the
bottom near the price just to show you that that is where that text goes and then right
here we have the original price and look at this we have our add to cart button we also
have a cell badge right here and we didn’t actually change anything down here so now
let’s go ahead and go in and take a look at the other product options let’s scroll down
here so that was simple products and then we have a group to products in this is the
product type or you’re taking several products and kind of bundling get together as a single
package that someone can purchase a bundle and so what you would do here is you well
here’s the stock status if you wanted to make this available at all but then you really
need to go here to link to products in here were it says grouped products this is where
you would search and add the products that are going to be part of this single bundle
and if you have any questions about these just hover your mouse over the question and
you can see right here it says this is going to be the list of products that are part of
the bundle you can assign attributes to this we already explained that and we already explained
the advanced options here for grouped products next is the external or affiliate product
and this is where the button doesn’t actually put them through the shopping cart it actually
would take them to an external product URL and you can even customize the button text
this is ideal if you have a store and you want to maybe refer people out to Amazon or
something like that for products that you know your customers want but you’re not going
to carry you might as well send them to Amazon and get an affiliate commission I’ve been
seeing this a lot because I’ve been on several websites about live streaming so there’s these
sites and they have a store but all of the products actually go to other places where
they earn an affiliate commission which is totally fine so this is how you would use
WooCommerce in an affiliate situation you can have the products listed but then right
here you would go ahead and just link on out so right here you can do that askew to it
I don’t know why you’d want to do that you can link up sells to it and that’s probably
good idea you can assign attributes and we still have those advance options last is what
most East commerce stores that are going to be and may be in the clothing business or
or any type of product where there’s can be lots of variations it’s going to be the variable
product right here and so this is when you want one single product listing it for different
variations so someone would come here and get the different colors in the different
size options versus having 20 different product options in the store you can just have the
one products and these different variations for it so a lot of these options are to be
the same ones we saw in the simple product where he saw SKUs stock management and they
sold individually we also had those shipping options in the simple product we also had
linked products for up cells and cross cells and we also had attributes so when you want
to have these variations you need to first define what they are an attribute is color
in size those are perfect examples of it so on this we really have color and I can click
right here and add size just like this and click add so now we have two attributes in
here I wanted to add a new one I could click on add and it’s going to create 1/3 attribute
where I would have to define what it is I guess I’m out of ideas but right here I would
name what the variations going to be and I can go ahead and start putting some values
in I’m going to actually remove that let’s go ahead and do that and let’s look at our
size and color so right here let’s put some values in so size can be a number or can be
small medium large so right here we have some of them we have large we have medium we have
extra-large we have small is small and there I guess we don’t have small villages go ahead
and add an S for that the way we would do that is we would click on add new and this
is just going to add a new value and this is just going to add a new value here some
to go ahead and enter as for small click on okay and it’s going to go ahead and add small
right here for me and there it is so if we wanted to use this for variations we want
to check this box right here and then I’m in a go ahead and click on save attributes
so now we have four variations for size let’s go ahead and check are color variations that
we may want for this product and so we have purple and red you saw how to add new ones
right here and we have the option right here used for variations so now we have these two
attributes color and size and we have the different options afford now what we need
to do is actually create the variations now when we click on variations and go to created
essentially what this is going allows to do is it’s going to have kind of mini simple
products in here for each of these variations so this is what were going to do and I’ll
show you what I’m talking about a medical right here to create variations from all attributes,
click on go I’m in a click on okay and it’s going to go ahead and create them all so for
each small size it’s going to create a purple and whatever the color other color was variation
in its can do that for each of the sizes and so it’s saying right here there’s eight variations
added when we click on okay and it’s going to show eight variations here so we have each
size and purple each size in red and it just created that for us now we can go ahead and
take a look at one of these so each one is going to have these options to remove it or
you can click here and guess what you can put the picture there and so this is how with
the e-commerce site you can have different pictures that are therefore the variation
so someone picks the purple one versus the red one you see it change colors so right
here you can have unique images for each one of the variations you can have a unique SKU
for the variations and these are all the settings that were already familiar with that we saw
in the simple product so each variation can have its own price its own stock status and
its own shipping class but right here it said as the same as parent so what I’m in a go
ahead and do right now is him to go ahead and fill out all of these variations with
a price case so I’ve gone ahead and added a price to each one of these I’m in a go ahead
and click on the save changes and we just created eight variations of this product pretty
insane right some to go ahead and click on updates and now working to take a look at
the product on the front end and working to see those variation options so here are the
two attributes color and size and when I click on the drop-down for color we have the different
options and on size we have our different options here I probably should’ve put them
in order small medium large XL that’s an easy fix and right here it shows you the price
range deep based upon the price I just put in all those variations and it doesn’t allow
someone to even added to the cart yet because they haven’t made their choice so right here
let’s go for purple and then right here let’s go for small and what you see is now it’s
displaying the actual price and I can added to cart and check this out I actually made
a different price for red so when you choose red and now increase the price the 3999 and
that’s as simple as it is to create these variable products to have one product listed
here and have these different variations now if I would’ve put a different image and for
the red and for the purple the image would’ve just immediately changed and the buyer would’ve
been able to see what they’re actually getting I just didn’t take that extra step but like
I said it’s super easy to do when you’re in the variable settings for each one of these
variations you can go ahead and put the image in for it so let’s just check that out again
and go right here and put a different image and that’s really all there is to the products
so now I’m in a show you some of the different styling options that are available in this
theme for WooCommerce so let me go ahead and go back to the front end and I’m going to
go to the shop page so many click on store and let’s take a look at this and see what
options that we have available for us so we have this this is a sidebar and we have these
widgets that we can put in and we can also control how this store layout here looks so
when I click on customize and let’s take a look at the options that we have available
to us alright so first I want to go to layout and then a minute click on WooCommerce and
this is the shop pages on the click on shop and it’s showing us some options here so the
first option is how many columns so it’s currently set to three but if you wanted you can reduce
it down to two products per column and you can also set this on a per device basis in
case let’s put that back up to three actually you can decide how many products you want
per page right now it’s set to 12 and you can also decide what you want to have happen
when the mouse cursor hovers over the product you can have it swap images or you can have
no hover style next we get to see and choose what we want the product structure to be so
right now it’s the title then it’s category its price and its ratings so right here this
product has all four items title category price and ratings if I didn’t want one of
these here all I would have to do is click on the little eyes so if I didn’t want category
I can click right here in your to see the category just disappears and you have all
these options here and you can even reorder them as something different makes sense if
you wanted and add to cart button right here underneath the product you can do it that
way as well I personally don’t think it looks good unless you make sure every product has
all four pieces of information something unchecked that just like that next we have a content
with option for this page right here so now let’s go back and I want to take a look at
this right here this sidebar and number and look at the individual product number and
look at the card page some to go back and that’s gonna be a sidebar and that’s found
under widgets and here are the different widget areas and this is the WooCommerce sidebar
so when I click on it and scroll up here’s the product search if I didn’t want this I
can click on remove and it will be gone here is a list of categories if I didn’t want this
I can click on remove and it will be gone same thing goes for the filter so I wanted
the filter at the top I could probably go like that and if I wanted the attribute filter
I can go like that and now I moved the filters up to the top like that you see how easy that
was you can have this look however you wanted to look if I felt like there is just too much
information and I wanted to get rid of categories I can go like this and I could easily go right
here and then remove that and it just disappears these are the widgets on the shop homepage
here all right so now that that’s done let’s go ahead and look at the product page in the
options we have available there I’m to jump back into layout WooCommerce an hour to look
at the single product option now this is the free version of Astra it has limited options
available for the single product if you did have Astra Pro there’d be a lot more options
available here but essentially it’s can allows to disable the breadcrumbs this right here
is the breadcrumbs so they could see home category in the name of the product but if
you didn’t want that just check this box and it will just quickly disappear and push all
of the content up so that’s up to you if that’s something that you would want so next to go
ahead and click on add to cart so next let’s take a look at our cart page options right
here and what we do is we have the option to enable the showing of up sales or not this
is completely up to you whether you want up sells the show or you want those up cells
to be hidden now like I said if you had the Pro version of Astro you get a lot more cart
options and check out options however what we have and what’s been given to us is very
beautiful to begin with so let’s go back and I just want to just remind you how to enable
or disable this shopping cart in the header that’s an option underneath layouts right
here underneath the primary header right here and it’s custom menu item it said to WooCommerce
if I didn’t want that I would set it to none and then I don’t have the shopping cart but
if I would like that shopping cart I just go right here and I choose WooCommerce and
I have my shopping cart back lastly I want to show you the settings for these buttons
right here so if I go back and I go back again there’s this option for buttons and here are
all the attributes to the button I’ve got my button color I’ve got my hover color I’ve
got my text color I got my radius I got the sizing in the padding and all of that so if
I like to have maybe a rounded button I can increase this from 0 to 5 take a look at the
add to cart button and see what happens as I’m upping this you see house becoming more
and more pills shaped that is the button radius so there’s 20 it actually looks pretty good
at 20 just like that you wanted to change the color of the background of the button
you can go here I can do something crazy like a red just make sure you stay on brand but
you have full control over that right here this will probably be impossible to read the
add to cart but you can put your colorcode right here and have full control over the
color of that add to cart button he saw how easy that was and you also have control over
how it looks when you hover that’s the hover background color so I wanted to do this purple
I could do that this is crazy I don’t recommend it but watch what happens now when I hover
it changes color like that CFO control these are all the controls that you need for WooCommerce
to get started so now let’s go ahead and take a look a quick look at coupons and then were
in a test the checkout process some to get out here and I can actually save any of these
changes I don’t want to save this abomination of a button and then I want to go into the
back end of WooCommerce anime to go ahead and take a look at coupons right here alright
so here is a default coupon that we have in here there several different options for coupons
so let’s just go ahead and look at the anatomy of this one so when you first get in there
you give it the coupon code just pop that in right here and then for general you can
choose the type of discount whether it’s a percentage or it’s a fixed amount out of the
cart or a fixed amount off of a specific product you have full control over discounts and how
it all works and then you would enter in that amount right here here’s an option for shipping
and you can set an expiration on your coupon right here we have some usage restrictions
we can set restrictions on a minimum spend a maximum spend individual use are just so
many options there are obvious right here you can have this coupon only work for particular
specific products now if you have a lot of products but you only want to couple for it
to not apply you would just exclude those but if you had a lot of pride but you only
wanted it on one or two of them than you would added specifically here to the products you
can also discount entire product categories and exclude those categories as well and this
is actually an additional way of protecting your coupon from not being shared out on the
Internet you can restricted to just people estates a loyalty discount and so you can
restricted to just people that have purchased from you in the past and you have their email
address now right here you can set usage limits unlimited or you can limit their redemptions
of its you can limit how many items it could be applied on and you can limit uses per user
so you can create a series of coupons if you want for your website next week quickly let’s
take a look at reports so you can run reports is actually pretty good the reports that it
gives you and the information that it gives you basically just can be based upon your
orders now that brings us to what happens when someone actually buys something you’re
going to have the order listed here as pending and then you just process the order whether
it’s shipping or fulfilling and then you will mark the order complete it’s actually very
simple and there’s options to mark a completed order refunded it’s really simple to manage
all of your orders here in the orders tab now let’s jump into the front end of the website
just test this checkout process on the go ahead and click on store and then let’s go
ahead and say click on this blue windbreaker jacket like this here it is I’m in a go ahead
I’ll leave just the one I’ll click on add to cart like that and we get this notice that
it has been added to the cart I can click this to view the cart but it’s also now I’m
getting this notification here in the cart icon and it shows me my products it shows
me the quantity the subtotal it gives me an option to jump to the cart or jump to the
checkout so let’s take a look at what the cart looks like by clicking on view cart so
this is where someone can remove items from the cart or increase the quantity decrease
the quantity enter a coupon code your customers will do it all in the cart screen and you
can see that this is beautiful it is simple it is elegant it is perfect and right here
is the cart totals you can see the flat rate that was actually applied and right here is
the actual total then let’s click on proceed to checkout and it’s gonna take you to this
beautiful simple focused checkout page right here it’s also giving them another option
to enter in a coupon code and then they would just go ahead and enter in their billing date
details right there and their address and their you know the option for shipping the
products to the billing address for the shipping address right here is a recap of what they’re
ordering and then right here since I didn’t actually put the stripe information in it’s
not offering a stripe but if I had we would have PayPal or stripe as an option and then
once you click here it’s going to take him straight to PayPal to complete the order and
so that’s pretty much all there is to having WooCommerce on your website I know it seems
overwhelming at first but it’s actually not that complicated once you get through wrapping
your mind around taxation and wrapping your mind around it shipping some of put links
to a couple articles on WooCommerce’s website they all have these great videos on it so
here is setting up taxes in WooCommerce right here is table rate shipping and then right
here is going to be the flat rate shipping right here and there it’s very well documented
WooCommerce has fabulous documentation I’ll just put a link as well to the documentation
site and so you’re deftly gonna want to check out where you live in the different sales
tax regulations and you’re also going to want to come up with a plan based on what you’re
selling of how you want to charge for shipping so that right there is your fast pass to WooCommerce
so I know we’ve covered so much already in this video in there are a few things left
mainly those plug-ins that I asked you to install that we didn’t get around to activating
yet and that’s iThemes Security that’s updrafts WP mail SMTP and Yoast SCO in the video description
of this video I’m going to go ahead and put links to separate videos that I already have
on these plug-ins I could add the content in this video but this videos long enough
already having to squeeze in Elementor training hosting SSL Elementor WooCommerce all of that
this has been a massive undertaking make this making this tutorial and if you made it this
far I want to congratulate you and thank you and also let you know that I am genuinely
here for you to answer any questions and help you with any additional help that you might
need with this here on the channel I have a regular AMA’s that stands for ask me anything
where you can actually ask me alive on video also if you leave comments down in the the
video comment section I will do my best to reply to those and I also have a blog post
on this entire video over on my website at WP crafters so if anything ever changes I’ll
be able to updated their in written form just for you so if you found this video valuable
and anyway I’d like to ask you right now to give it a like her a thumbs up and then if
you could share this video with anyone that you think might benefit from it make sure
to hit subscribe if you enjoy the content that I create and hit the bell notification
if you want to be updated of future videos that I have that might update you on the current
events related to this website that you just built hey I am so proud of you for making
it this far I want to thank you for believing in me supporting and me and investing your
time into me in this video and I hope to see you and the next video and when you scroll
down here is a description and you can see were showing additional information and reviews
in these tabs like this so let’s go ahead and now click on edit product so we can see
what this looks like in WordPress so this a first bit of paragraph text is actually
what showed underneath the product image but right here is where

100 Comments

Add a Comment

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