Hey, what’s up guys. My name
is Darrel and in this video,I’m going to show you how to make
this e-commerce website, step-by-step.Now, the great part of this tutorial is that you don’t
need to have any sort of experience whatsoever;everything is going
to be drag-and-drop.And, by the end of this video, you guys
are going to be able to fully controland manage your own,
personal e-commerce website.And, I mean just look at this website. It’s sexy,
it’s professional, it’s really clean, really modern.It’ll make a great impression
for your visitors.Now, what I did for
this tutorial was, I decided to take direct inspiration from
companies like Victoria’s Secret.Now, these guys spend millions
of dollars determining what worksand what makes people
buy on their website.So, you want to take their design
and incorporate it on our own.So, you guys can see right here a big,
beautiful lining page with a simple call to action.We have the same thing right here, like this.
Or, this. Or, like this. Or, like this.Now, you guys can see anything you want on
your website. You guys can sell digital products.You can sell pants.
You can sell electronics.You can see pencils;
whatever you would like.Now, let me give you a quick
tour of this websiteand show you what we will be building
today in this e-commerce tutorial.So, the first thing we’re going to do
is design our homepageand as you guys saw before we can add in
those really cool HD video backgroundsor we can just add a large image
that looks just like this.And, as you can see, I have these two
girls on my lining page and you know,it’s Friday, you know they’re ready to party.And, here we have our shop now button. You guys
can add as many buttons as you would like;you can change this to any color or any font that you
would like as well for your e-commerce website.And, below that, right here
we have our categories.So, here we have our Best Rated, we have our
Best Sellers, our Clearance and our New Arrivals.Now, this can be anything.So, for example, this can be something
like belts, shoes, pants, or tank topsand they would click on that button right there
it’ll take them directly to that product category.Now, scrolling down here
we have our products.Now, you guys can have as many
products as you would like.You can have as many products listed in row,
so I think this goes to like six products in a row.So, here I have four and
when I hover over it,it has that flip style to it and it also
has that really cool purple glowand it kind of intensifies the product and
people really want to click on it, right?Scrolling down here, we have this other section
which is like a split screen, modern style section.And, Victoria’s Secret does
the same exact thing right here.So, right here they have that really
cool, like split screen effect;we’re going to incorporate that into our website
and here you can add something like, 10% off.And then, right here you can link them
to that specific category of your sale.And, below that we have
our Instagram feed.Now, a really cool feature about
this Instagram feed is thatwhenever you upload a picture onto Instagram,
it will automatically show on your website.So, your feed will automatically show up
right here on your e-commerce website.And, of course, Victoria’s Secret does
the same exact thing right here.So, this is their Instagram and we’re doing the same
exact thing that Instagram does as well.And, of course, you can click on it, you can like it,
you can comment on it, all sorts of cool stuff.Going back down here, and also,
you can follow this person on Instagram.Now, lastly to finish this off
we have our footer section.So, right here we have our Subscribe To Our Newsletter;
so people will be able to come here,they will give you their email address and
they can subscribe to your mailing list.Maybe you provide something like
coupon codes or something like that.And, here we have our
social media icons;so, we have our Facebook, our YouTube,
Instagram and Pinterest.I know girls are very
active on Pinterest.So, if you are selling girl products, I know they
like that social media website; I see them on a lot.And, here I have our, you know, our Woo commerce products;
so, you guys can list your products right here.And also, we have our pages right here as well.
Now, going back up right here.Now, if you guys need a logo,
don’t worry about it.I will help you guys get a really cool and
beautiful logo just like this one right here.Now, I mentioned that this is a very
simple website to make, very easy.And, I bet you guys are
wondering how easy is it?Now, also before I talk about that,
this theme is fully mobile responsive.So, this is our website right here and
this is what it looks like on a tablet.This is what it looks
like on our phone.And, as you guys can see,
it is fully mobile responsive;so this will work on all of your devices
and that’s very important guys,because as of 2017 there are more mobile
users than there are desktop users.I mean, how many times do you check
your Facebook on your phone?Probably all the time, right?So, going back over here,
we have our page right here.So, let me show you how
this page builder works.So, let’s say I want to take this image
and I just want to drag it over hereand this section right here,
same thing.Now, of course, that doesn’t look
that good because you know,this is black and you
don’t want it to cover it.So, we can just go ahead and
move it right back over there.And, same thing with this section,
we’ll just go ahead and place it right below that.And, say that I want to change this
text to maybe, “All of our shirts off.”So, “All shirts and tank tops
50% off. And that’s it guys.The changes are live, so it’s really
easy now to make a website.It’s never been easier; it’s just ridiculous
what technology does today.And, scrolling down here, let’s say we have
these images and we want to move them.So, here I’m gonna take this image,
I’m gonna place it over here.And then, I’m gonna take this image and I’m
gonna put it right back over there, to put it there.And, that’s it. So, that’s how you make
changes and guys, these are live.So, all these changes I’m showing you; this is
live and that is how your website will look.So, it’s never been easier
now to make a website.So next, let’s go ahead and
look at our Shop pageand let me introduce you to our Shop page
and show you what it’s all about.So, this is our sexy Shop page and as you guys
can see right here we have our different products.Now, instead of having just your products,
you can have different product categories.But, I decided to list all my products
on this page right here.Now, you can add more
or fewer columns.So right here I have four columns
but you can do less or more.I’ll show you how to do
that in just a second.But, really quickly I want to show you
this cool, little sidebar right here.So, when people are shopping
on your website,they can go ahead and subscribe to your
emailing list and click on Subscribe.It’s an old school AOL address.Now, they’ll actually have to confirm that
so don’t worry about getting spam;they’ll have to go to their email address,
confirm it and they’ll be subscribed to your mailing list.Now, below that we have
our social media follow icons.So, right here we have our Facebook, our YouTube,
our Instagram and our Pinterest.Below that we have our top rated products and
you can change this to anything that you will like.So, right here maybe you want your on
sale products or your trending products.I’ll go over that, all that in this tutorial.
And, below that right here we have a search box.Let’s just say these people don’t know
where to find shirts; I know right.So, we’ll just type in, “Shirts.” So, I’ll type in,
“Shirts.” And, click on search.And, now all the products with
shirts will be listed right here;making it very easy for your users to find it.
Now, let’s go ahead and click on a product.So, I’m going to click on this
artsy shirt right here.So, this is exactly what your
product’s going to look like.So, right here we have a sale;
I’ll show you all about salesand how to incorporate like coupon
codes and all that really cool stuff.So, here we have an artsy shirt and it’s on sale for $50
and below that we have a description of the product.And of course, this is all
just dummy text, you know.But, you can add in whatever
you’d like right here.People can share it to all of their
social media websites.Now, I just added three, but there’s
up to like 20 you can add.So, I’ll go over more of that in this tutorial.And, right here people can select the number they
would like and they can simply add it to the cart.Now, if they hover over the image,
they can actually zoom into the productto really see your product
and learn all about it.And, right here they can go ahead
and look at the other imageand simply go through it
and look all around.Now, below that we have our
description of the product.So, maybe right here you can do something like,
you know, the weight of this product,it’s really good or just go
ahead and talk about it.And, below that we have reviews.
So, people can go ahead and review your products;they can go ahead
and say, “Cool product.”Give it a five star.Now, you can also moderate these reviews
so if you have some troll on your websiteand is just giving you one star
on all of your products.You know, don’t worry about it; you can
decide to approve or spam those reviews.Now, below that we have related
products and companies like Amazonand Victoria’s Secret
do the same exact thing.So, if you’re looking
at one product,maybe you want to start recommending different
products, right, to your customers.So, I'll go over all of that in this tutorial.So, this right here is a simple product
and this is ideal for something likeyou know, like plates or something
with no options.Now, if you need something with options,
there’s something called a variable productand I’ll cover all of that in this tutorial.So, here we have a shirt but maybe the shirt comes
in different sizes or it comes in different colors.So, here I have all these sizes.I’ll say, you know, I’m a medium
and I want a white one.So, now you see the image change
right here to a white medium.Or, we can do something like a white/black
and then of course, you can add in more images.Right here, I added, you know, the stock one.
But, you can add in different images.I’ll show you how to swap
and that really cool stuff.So, this right here is what
we call a variable productand I’ll cover a majority of the products
in this tutorial to make sure that you folks fully understand
everything about e-commerce.And, of course, the same
thing applies right here.We have what you may also like.
We have the sidebar right here.We have our, you know, related products
and all this really cool stuff right here.So, now that I’ve shown you guys a little about
simple products and variable products,let me show you how you can
actually edit your shop page.Guys, this stuff is really easy.So, this is the visual builder and this is what we use
to sort of like, you know, design our website.So, this is the setting right here
and all you need to do is just say;okay column number four maybe I want, I want only
three products to show up per column and that’s it.I’m going to click on save changes.
I’m going to exit this and click to save.So, now instead of four products per column,
only three are going to show up. There you go.So, now we have three that are showing up.
It’s really easy to use guys.It’s not technical, anybody can do this stuff,
it’s really simple to use.And, also a really, really cool feature that
I’ve add in this tutorial is free live chat.How about that? You guys have noticed right here,
on this bottom section, it says we’re online.Cool. I’m gonna go ahead and say, hey do you have
any coupon codes. “Do you have any coupon codes?”Alright, now I’m gonna go to my other
computer and I’m gonna say, okay cool,someone wrote a message to me
do you have any coupon codes.I’m gonna say, “Use Darrel50
for a coupon code.”And, go ahead and send it and there
you go, we have a response.So, I’ll show you how to use
live chat. It’s free.It’s really easy to use and you can literally
respond right on your computer.And, I’ll go ahead and say,
“Thank you.”And there you go. And, that is
how you use live chat.It’s really simple to use guys and
in this tutorial I will cover all that today.So, now that I’ve shown you the Shop page,
let’s go ahead and buy something.Let’s go ahead and give you a live
example of what it would look likewhen a customer wants to check
out on your website.Now, this is a live e-commerce website.
So, I’m gonna go ahead and buy something.I’m gonna go and buy, I’m gonna go
and buy this in-style shirt right here.Now, it’s $100, I’m going to add this
to the cart and view the cart.Now, right here you notice
we have a coupon code section.So, I’ll teach you all
about coupon codes.So, right now the product is $100
and with tax it’s $108.75.But, I have a special coupon code that
will save me 50% off the product.So, you can see the product goes from $100,
now we get a 50% off discount.So, I will introduce you to coupon codes
for your e-commerce website.Now, another really cool thing
about this tutorial is,I’m gonna show you how to get your tax automated
so you don’t have to deal with, you know,finding out what state excepts
a certain tax law or any of that stuff.All your taxes will be automated
and automatic.And, I’m really excited to show you that because
I haven’t really introduced that in my past tutorials.So, in this tutorial you will not have
to research different state taxes.Everything will be automatic.And also with this coupon code, you can
go ahead and put that on to your Facebook.You can advertise it on your Instagram to get people
to come to your store and purchase something.So, I’m gonna go to proceed to checkout and
we’re going to be going to the billing page.So, right here you’ll need
to enter your billing detailsand of course, the live chat is
always available for people.So, if they ever have problems or something
doesn’t work they can always go aheadand send you a quick little message and
you can help them out right away.So, right here I’ll put my first name,
my last name. Pasadena, California.We have our zip code, a phone
number, an email address.Now, for this tutorial guys, usually with other tutorials
I’ve seen people only recommend PayPal.But guys, that’s so old. You know,
if you go to Amazon, you know,they’re not gonna say you have to only
checkout with FirePay, right? Like, no.So, in this tutorial I’m gonna introduce
you to PayPal, but also a credit card.So, someone can come to your website,
put their credit card information inand buy something right away on your website
without having to be redirected to PayPal.So, right here I’m gonna go to,
“Use a New Payment Method.”Now, these right here
are stored credit cards.So, right here I’m gonna enter
my secret credit card numberand enter in this.Okay guys, this is in test mode.
So, anything I have will work.So, this is not a real credit card number.
So, right here I’m gonna go to, “Place Order.”So, now I’ve actually entered in my credit card number
and the product is processing and there you go.So, the order is received. The customer
will now receive an email with like a receiptand you will also receive
an email telling you,hey somebody bought something on your website
and they’ll give you all the information right here.So, I have our customer details, our billing
address and all this information right here.So, if you go to your email address, you’re going
to see something that looks like this right here.Now, you can fully customize this whatever you like.
So, this is a very ugly blue color of course.But, you can change
this to whatever you likeand you will receive this notification when
someone purchases something on your website.So, it’s a really automated process, it’s very
easy to use and it’s really an easy platform to use.So, going back over here. Now, I’ve shown you
guys the shop page and everything else.Now, I’m just gonna quickly show
you guys the rest of the website.So, this right here is like our hot
section and right here I have thisthis header section and
you can change the color.And, right here I have an image.
I added some text and scrolling down here.Now, you can have featured
products right hereso, maybe you have something
that you received, that’s brand new.You can put something like,
“Our brand new product.”You can talk about it and then right here you can
link that button to different parts of your website.And notice we have these really
cool glows around our website.You guys can change this to any color
or you don’t have to have it at all.You know, I just think it’s really a unique
feature that sort of grabs your attention.So, scrolling down here, same thing and then again,
we have another one right here.Now, scrolling down here you notice
we have this really cool parallax effect.I’m sure you guys heard about
the parallax effect wherethe image right there kind
of scrolls down with you.So, if I keep on scrolling, now you see her
eyes and right here is a call to action.Now, this is a very simple process all you
need to do is just add in a backgroundand then add in a really quick call to action
module and everything is done.It’s a very simple process. So, this button
can also link to anywhere on your website.So, next we have our Blog page. And, right here
we have a really cool, stylish blog page.So, right here we have like our image and I’ll show
you how to put in your images for your blog.And, if someone clicks on it,
they can see the image.They can read about your blog, you know,
maybe like the newest trends or like what your plans
are for the future.Or just, you know, talk about yourself and
people can go ahead right here and comment.“Cool blog post.” I’ll submit the comment and also people can,
you know, you have the option to moderate this.So, if you find out people are spamming
you with ads or something;don’t worry about it because you can
moderate the comments on your blog page.So, going back here. So, this is a really
cool, unique style blog post.So, I’ll show you guys how to incorporate
this on to your e-commerce website.And, lastly we have our contact section.
So, this is all a plug-in and it’s basically automatic.So, all you need to do is install something and
everything is automated where you will just go aheadand grab a template and it does
all the hard work for you.Now, you can do this like a first name,
last name, email address.You can add in like a phone number.
You can add in different text boxes right here.So, just for me, I added a first name,
last name and email address.And, if they have
questions right here,they can go ahead a put that in and if they send
this message it will go directly to my email box.Now, lastly I want to go ahead and point out
that I’m actually the highest rated instructoron Udemy.com for WordPress tutorials
and woo-commerce and e-commerce.So, you guys can watch this with confidence
knowing that you guys are learning from apremium instructor that
knows a lot about WordPress,that knows a lot about e-commerce
and woo-commerce.I like to be very though and
very up front in my tutorials.I don’t like to leave anything out so, when you watch this,
you can watch it with confidence knowing that,you know, you’re learning from a premium instructor
that really knows what he’s talking about.Now, I also want to go ahead and introduce
the theme that we’re going to be using.So, we’re going to be using the number
one rated theme on the planet.And, I bet you guys heard that
from a lot of different people.Like, “Oh, this is number one.”
“This is number one.”Well, Divi is actually the number one
installed WordPress theme in the world.So, they’ve actually monitored the amount
of themes installed by WordPressand divi came out as number one.And, it’s number one
for a lot of reasons guys.Divi’s actually a very high quality website and
you guys can actually try the divi theme for free.So, you guys can go ahead
and test out the page builder.You guys can see how it looks
before you decide purchase itand actually this company will
give you a 30-day money back.Now, if you guys watch other tutorials,
like e-commerce tutorialswhen you buy someone else’s theme,
you don’t get your money back.So that’s it; you buy it, you don’t like it,
you’re stuck with it.This company is a very
high quality companyand they will give you your money back
for any reason at all, within 30 days.So, you really have no risk, you know
and it has 400,000 people using it.And, another thing I want to point out is that
this theme has thousands of Facebook groupswith people joining, collaborating,
talking about itbecause it’s such a widely
used and popular theme.So, if you’re not using this theme, you’re using
something else that you found on YouTube,I strongly recommend to use divi
because it’s the number one theme.And this is actually an United States
based company;they’re actually based in San Francisco which
is like the most expensive place in the United States.I don’t know why they’re based there;
you know it’s kind of like man, that’s expensive.Like, the houses over there are millions
of dollars and they’re not even that big;they’re like tiny and
people are like crazy.Why would you pay so much money?
Anyways, but yeah,we’re going to be using this theme for our WordPress
theme because I want to use the best of the bestand don’t worry because this community has
so much behind it. You have tutorials every day;you have people helping each other.
It’s a great and live communityand I strongly recommend
after this tutorialto join some of these groups,
discuss itand go over, you know, all the things
you’ve learned in this tutorial.So, if you guys are ready to make an amazing
e-commerce website from scratch,let’s go ahead and do it.Alrighty everybody,
so I’m going to get out my notepadnotepad and we’re going to follow
these simple steps in order.So, the first thing we’re going to do
is get our hosting and our domainwhich is basically
your website dot com.After that, we’re going
to install WordPress,which is basically like the foundation
of our website.After that, we’re going
to install the divi theme.And, this is what we use
to design the website with.And, after that we’re going to create
our amazing e-commerce website.And lastly, hopefully,
you will make money.Now, there is a link in the description
of this video;it will take you to a website,
siteground.comcom where we’ll get our
hosting and domain.And, you’ll be routed to a page
that looks just like this.Now, why do I recommend Siteground?Well, I recently tested them against
nine other web hosting companies, guys.And, these guys came out number
one in every single category.They were the fastest,
the most reliableand they have the best up time.Along with that they offer a 30-day
money back guarantee,a free SSL and 24 hour
customer support.So, they are among some of the best
web hosting companies out there.So, when you get to this page,
go ahead and click on “Sign Up,” right here.Alright, so we have three plans.
Let me explain what these do.So, we have the StartUp,
we have the GrowBigand we have the GoGeek;
for geeks.So, this one right here
is just for one domain.So, if you just want one website
and one website only,the StartUp will be ideal for you.However, if you want multiple websites;you know, like yourwebsite.com
and another website,the GrowBig will be ideal for you.And, if you guys have been
around WordPress for a whileyou kind of want to try,
you know, the hostingand see how it is against
your current hosting,I recommend the GoGeek.
But, for those of you who are brand new,I kind of recommend the GrowBig.
The GrowBig is good.So, right here I go to, “Order Now.”Alright, so we’re going
to do a new domain.So, I’ll enter my famous one,
let’s see here, “ ILoveKyloren.”Hopefully, the new Star Wars is good.Comes out in a few…
comes out at the end of the year.They make us wait so long.So, once you’re here, go to “Proceed.”And, it’s still available. Wow!You know, I’ve been using that test
domain for about two years nowand no one’s taken it.
I hope nobody does.So, right here we have
this account information,go ahead and put in your
email and your password.And, right here on this next section,
you’re going to put in your client information:your first name, your last name,
your social security number… I’m just kidding.You’re not gonna put your social,
never give anybody that.And, below that we’re going to
put our payment information.So right here, put your credit card
number and all that stuff right here.And, scrolling down right here, I’m going
to talk to you guys a little bit aboutthe purchase information.So, the period I recommend is 12 months
because that will give you enough timeto determine if e-commerce is for youand you know if websites
and everything is for you.Below that we have the domain
privacy protection.Now, what this does,
it protects your personal informationfrom people who try to search
you or who is you.So, if you have this people will not be
able to see you information that you put.If you take it off, then if someone
tries to search youthey’ll see that your public information.Next is the site ground site scannerand guys I don’t recommend thisbecause a lot of the plug-ins with
Wordpress can do this for free.So you don’t really need to…
you don’t really need to have that.So, I don’t recommend the site scannerand once you’re done with thatyou can go ahead and read
their Terms of Service…yeah, yeah, yeah. Anyways, after that
you guys are going to go to “Pay Now,”and that will take you
to your customer portal.Now, I have an account with these guys,
so I’m gonna meet you on the next page.So, this is your customer portalso, it will take you
to this page right here.And you guys can go ahead and
kind of explore like the tabslike the, my account and the support
and all this other cool stuff.Remember guys, these guys
offer 24 hour customer supportsupport so if you guys ever have
a problem with your website,these guys will be more
than happy to fix any issuethat you guys have
with your website.You guys can, you know,
add services.You have like, a resource section, etcetera.
But, yeah.So, I’m gonna go to My Accountsand once you’re here,
you’re going to go to your C-paneland this is where we’re going
to install WordPress.So right here, go to C-panel
and go to “Proceed.”Alright, so we need to go
to this section right here.Now, we need to go to this little
icon right here that says WordPressand you’re going to install
Wordpress on to our domain.So, scrolling down here
I’m gonna go to “Install Now.”Now, right here you’re going
to see your domain.So, go ahead and pick the domain
name that you purchased.Now, right here make
sure to put nothing.Do not put anything there or elseit’s going to install your
website dash whateveryeah, make sure nothing
is here at the directoryand right here you can put
something like your site name.Like “My Cute Store,”“Learn all about my cute items”or electronics or whatever you want.But, you don’t have to put anything now;
you can always change this later.So, I’m going to leave
this standard for nowand right here is your admin username.I’m gonna put “pattywack,”
which is my dog.“Pattywack999.”And then, right here is my password
and don’t worry about your passwordbecause you can always come back
and change this later.Scrolling down here you can go
ahead and select your language.Someone commented on my last video
and I guess Chinese is the correct one,I thought it was Mandarin;
I thought they spoke Mandarinbut apparently it’s Chinese.But, you can go ahead and
select your language right hereAnd, if you just speak English
and I’m going to put English.Now, scrolling down here,
I’m going to “Install.”So now, it’s installing WordPress
on to our domain.And guys, if your domain and you
just bought it and it needs time to propagate,like it says “Waiting,” just give it time.It does take time to propagate
on the internet.If it takes a little bit longer,
you get impatient, just give them a call.Say, “Hey guys, you know I got the domain,
I want to install WordPress.”They can even do it for you, okay.
So, they’re a really helpful company.. So, right here we have this URLand all you need to do is
go ahead and click on it.And you’ll route to this page right here.Now, if you don’t go to this page,you go to like an empty portal,
don’t worry about it.Maybe it just takes time to propagate
but you should be brought right here.If you have any problems,
feel free to give them a phone callor live chat or email them.Alright, so let’s go ahead and
go back to our notepad right here.So, we got our hosting and domainso right here we put “done!”We installed WordPress…done!Pretty simple stuff guys,
it’s really easy.So, the next thing we’re
going to do is purchaseand install the divi theme.Now, before I take you guys
to elegantthemes.com,I actually want to show you my websitebecause my website is actually
designed by the divi theme.Now, this is my website,
darrelwilson.com.As you guys can see it’s really clean,
really modern style websiteand you know, I would never
recommend a product I didn’t useuse and I use the Divi
theme for my websitebecause it’s a very good WordPress theme.Now, there is a link in
the description of this videoand it will take you to a website
called elegantthemes.com,where we will purchase and installthe number one rated
theme in the world.So, I’m gonna go to elegantthemes.com.Now, if you guys use my linklink you guys will actually get
10 percent off the divi theme.Now, I bet you guys are wondering,
“Darrel, why is this theme so good?Why does everybody use it?
Why is it so famous?”Well, first off, these guys
will actually give youa 30-day money back guarantee;so, if you guys don’t like it for any reason,these guys will just gladly
give you your money back.Now, along with that, you guys get
a lot of premium plug-ins,you get theme updates and you get
premium WordPress support.Now, this along guys is worth
thousands of dollars.So, basically if you guys ever have
a problem with your websiteor something is not working
with your website,you can kind of buy with confidence
knowing that you have a team of developersdevelopers that will help you with
all of the issues with your website.So, once you’re here…now, if you’re brand new I would
recommend the yearly access,but later down the road
once you become a divi fanand you join the groups and you start
learning about the community;I would probably get the lifetime.
I have the lifetime.So, right here I go to “Sign up today.”Now, here you’re gonna put your username,put in your email, your password.You’re gonna go ahead
and fill out all this informationand once you’re done
with that you can,you know, read the Terms of Service.Yeah so, go through that
and then once you’re done with thatyou’re going to click on
“Complete Registration.”And, I have an account,
so I’ll meet you on the next page.Go ahead and log in.So, this is my member’s
area right hereand you can go to your account
and change all your settings right here.So, like you have your –
you know your billing informationand if you guys have problems or questions,
you guys can go to Supportand you can go ahead and
click on divi right here.And, like I said, you know,
all you need to do is ask a questionand say “Hey guys,
you know how can I do this…?”or “How can I improve that…?”And look at my tickets, you know,
I have a lot of questionsand these guys have
answered everything.So, it’s really cool knowing
that you have a team of peoplealways helping you with your website.So, we’re going to click on
“Downloads,” right here.And, this one right here with the D,we’re going to click on “Download.”And, this is the divi theme.So, we’re going to upload this
on to our WordPress websites.So, going back over here.I’m gonna go to “Appearance,”
and go to “Themes.”Now, right here,
I’m gonna go to “Add New,”and I’m gonna click on “Upload Theme.”Choose the file and simply
select the divi theme.So, I’m gonna go to “Open,”
and go to “Install Now.”So, we are installing the Divi theme.Alright, almost done… done.
That was really fast.You know, a lot of other hosting providers,
you guys it could take like two minutes,but SiteGround is actually pretty good.So, right here, just click on “Activate,”and congratulations we have
successfully activated the divi theme.So guys, that was all the technical stuff.hat was all the hard part,
everything elseis kind of like being creative
and kind of messing around.And, right here under “My Blog,”
you can click on “Visit Sites,”you guys can see your current siteand it doesn’t look anything
like mine or anybody else’s,but don’t worry we’re gonna
make it look amazing.So, let’s go ahead and go
to my little Pages right hereand we’re going to actually go right hereand say, alright we installed
divi theme – done!So, the last thing we need to do guysis simply create our amazing
e-commerce website.So, the first thing we need to do
is go ahead and create some pages.So, over here on the “Plus New” section,you can go to “Page,” right here.And, we’re going to be
creating pages for our websitesuch as like the Home Page,
the About Us page, etcetera.So, right here I’m gonna type in “Home”
and go ahead and publish this.I’m gonna click on “Add New” again,now I wanna do the “About Us,”and publish this.And lastly, we’ll do something like ourwe’ll do our “Contact Us,”and go to publish.Now, there is another way you can create pages;over here on the left side,
if you click on this right hereyou can go to “Add New.”
This is just another way to create Pages.So, right here I’ll just do something like,
“What’s Hot”and publish this.So, now that we’ve created those pageswe need to actually put that on the menu.So, over here under “Appearance,”we’re going to go to “Menu,” right here.And now, we’re going to create our first menu.So, right here I’m gonna give your menu a name;I’m gonna do “Menu 1” like always.Go to “Create Menu.”ow, right here you’re going to see “Pages,”just simply click on “View All”
and just select the pages.So, you have the Home, etcetera.Now, there’s two homepages.Now, this one right here is a custom link.So, you need to make sure
the page is actually selected.So, right here you see I have
“Home” and it says “Page.”So, the custom link, we don’t need anymore.This is what comes standard with WordPress
and we don’t want that.So, right here we have
the Home, the About Us,the Contact Us and the What’s Hot.Now, you can actually put this
in any order that you want.Now, if you want a drop down menuall you need to do is take this page
and drag it under it.Now, if I hover over this on the websiteabout us will be like a little dropdown menu.But, for now, I’m just gonna leave it like this,make this a Primary Menu
and click on “Save Menu.”So, we can go back to our website
right here under “Visit Sites.Now, you can see we have our menu.Don’t worry, we’ll customize it;
we’ll change the colors.here’s a lot to talk about but for now
just go ahead and leave it like that.Now, another thing I want to do
is make our home page,our actual home page so,
to do thatwe’re going to go down to –
here over this section,we’re going to go to “Theme Customizer.”Now, right here on
the static front page sectionsection all you need to do is click on thisand click on a “Static page”and set your front page as your home page.And, once you’re done,
click on “Save and publish.”Now, there’s a lot of options over here,but don’t worry we’ll come back
to this a little later.In fact, you won’t use a lot of this;maybe just for your logo and menubut right now, we’re not going to
mess with these settings.So, right here I’ll click on X.Now, we are ready to design our website.So, right here on the top,
this is the Visual Builder.So, this is what we’re going to
be using majority of the timeto basically create our website.So, if we go ahead and click on thisand you’ll notice that
we have this block right here.So, if you want to go ahead
and add somethingall you need to do
is click on this little plus iconand you’re going to see like all these modulesso these are basically different things.
You can add like a button,a comment, a call to action.Right here we have an email opt in,
a contact form, a gallery.There’s all sorts of really cool modules
that you can add.But right now, all we’re going to add
is a “call to action.”So, right here we’re going
to add a “call to action,”and we’re going to give it a title right here.So, I’m going to do something like
– you know, actually before that -so, right here we have this little green box.This green box controls this section;the blue box controls this section.So, all we’re going to do is okay,
you know what,I’m gonna take this
little icon structure right hereand we’re going to click on two.So, now we have one section on the right
and one section on the left.So, right here, I’m going to simply click on thisand we’re just gonna do something like,
you know,“All Shirts 50% off,”and in the “Button URL”,right now we’re just gonna
put a little number sign there.Don’t worry we’re actually going to
link that to our shop page just a little later.Now, right here we have “Button Text.”
So, what do you want your button to say?So, I’m going to put something like
– ops, I spelt that wrong.I’ll put something like
– so what should we put?“Shop Now.”Alright, and right here
we have a background color;now I do not want a background colorso, I’m going to take that off.Now, right here under the text color,
I’m gonna put “dark,”so we can actually see it.Now, scrolling down here,
we have “Text Orientation.”So, you can choose to have this on the left side,you can have it on the right side,you can have it you know, center,
justified – however you want.I’m gonna leave this centered for nowand if you scroll down right here
you can add in more content likelet’s see right here, we can put something like“The shirts are made with cotton.”And, you can add in all sorts of cool stuff here.You can put in more text, etcetera.You can add in an image right here,but we’re not going to do that just yet.Now, scrolling down right here,this right here, don’t worry about this,
we’ll talk about that a little bit later.And now for the design.
So, let’s sayyou want to go ahead
and decorate this right here.So, we have this header font.
So, this right here is the current header fontand this is the body font.So, you can actually change
the header fonts to whatever you’d like.You can make it bold. You can italicize it.
So, you can make it all caps.And guys, majority of these settings
are for all of the modules.So, once you learn this setting for one module,you basically learn it for all of the modules.So, it’s not like hard. All you need to do
is just understand oneand it applies to all of them.So, right here, we have the header font sizeand we can change that; make it bigger.We can make it smaller.But, I’ll use something like 40 pixelsAnd right here, the header text color,
you can decideto change the color to whatever you’d like,depending on your store.So, I’ll do something like…
I’m gonna do blackIt’s kinda too black. Let’s do
a little faded a little bit.Now the header letter spacing -so, if you want a little space in between
the letters, you can go ahead and do that.I think Nike does that a lot, yeah?
Maybe they do.So, yeah, if you want spacing,
you can go ahead and do it like that.Now also, the header line height -so, if you want more space right here
in between the height;you can go ahead and increase thator you can go ahead and leave it as standard.And, if you want to go back
to the original settings,all you need to do is click on this little
icon right there and it’ll take you back.Now, body font – so, this right here
is applying to this section.So, same thing like this, guys.
All you need to do is,okay, I want this font.. I want to make it a little bigger.I want the text, maybe like a blackand you can do the same thing
like letter spacing for thisand the body line height.And, for the background image,
we don’t want to add an image right herebecause we’re actually going to
apply it to the entire section;so, we’re not going to use a background image.You can put a little boarder around it.So, for example, right here, we can have this
little cool boarder around it if you’d like,but I’m not going to the boarder.
But, it’s just for, you know, if you want it.And, the margins settings and the padding,we’ll talk about that in just a little bit.
Okay.so right here, we have“Use Custom Styles for Buttons.”So, this button does not really work well.It doesn’t look that good.
I mean, it’s blue.We really don’t want that color.So, right here, click on thisand this is what you use
to design the button with.So, right here we have the button text size.So, how big do you want this text right here?So, I’m going to do something like,
you know, 21.You know, that’s actually already big –
that’s actually a good size.Now, the text color – so, what text color
do you want the text to be?So, right here, I’ll do something like black.
Okay?So, now we have the button background color.So, right here, we have
a white background right now,but if we want to change that,you can do something like red,
or orange, or yellow, or green.But, I think is looks actually
pretty good with white.Scrolling down here, we have
the button boarder width.So, you can choose to have a bigger boarder.You can see now the boarder is getting bigger.But you know, I gotta be honest,
I think it’s pretty good, you know?That is a really ugly button, but you know,I’ll leave it as a three – no,
two’s good – two’s good.Now, the button boarder color,you can decide to change
just the color of the boarder.So, for example, I’ll put red and
only the boarder is changed.But, I kinda like the black right there.Now, the boarder radius – so, what this does,we have a square right now, but if we want to
kind of round it or something like thatall you need to do is mess with it like thisand now you see that it has
this circular motion to it.Now, we have the button letter spacing as well.Same thing right there. We can change
the button letter spacing in the button.And now, we can actually scroll down
to the actual button.So, now we can change the actual button font.So, right here, I’ll put Able.Now, you can give it an icon -so, right now, we have
that little arrow right there,but if you want an icon – like a different one;you can like click on another one.Now, you see it’s a plus sign and there’s
all sorts of icons you can change it to.Now, you don’t have to have the icons.So, right here, I can say “No.”I don’t want a button,
so there is no button.Now, scrolling down hereso, the same settings that we did earlier,these are applied to only
when you hover over it.So, for example, right here we have
the hover background colorSo, I’m going to change it to red.Now, only when I hover over the button,then it’ll turn red.So, now you can see – red.Red. Red.So, the same thing for the text color.So, for example,
if you want this to be a blue.So, if I hover over it,
then it’ll be blue and red.So, we have the blue font
and we have the red background.Now, you can go through these settings
and try to mess withbecause this is all just for
hovering over the button.Now, a good combination
is when you actually have the -if you change your button on one,
you should change it on both.So, the hover boarder radius – you might
want to leave those the same for bothbecause you don’t want it to be squared
and then when they hover over it its circle.You know, I think you
should keep it consistentand you know these are basically
self-explanatory.So, I’m gonna go ahead
and leave these clear and that’s it.So, let’s go ahead now and do something else.Now, over here I’m gonna add an image.So, there is a drop box guys,
in the video of this descriptionand it’ll give you access to a bunch of imagesimages that you guys
can use for this tutorial.So, right here,
I’m going to go to “Add New Image,”and I’m gonna scroll downand I’m going to find “Image.”“Image.”
“Upload.”And, I’ll go ahead and select those imagesin the folder in the drop boxand right here I’m going to
click on “Select Files.”Go to Desktopand I’m going to go down to
“Darrel’s e-commerce tutorial”and I’m going to go ahead and
just upload all of these pic – pictures.So, this is gonna take a little bit of time.So, I’m gonna go ahead and
pause the video really quicklyand also remember that all these images arein the description of this video;
they’re all for free.They’re in my drop box and don’t worryI will give you guys a lot of good resourcesto go get some nice premium images.Alright guys, welcome back.
So, the images uploaded.Now, I’m going to select and image right here.So, I’m going to select this one right hereand go to “Upload An Image.”Now, you can see the image is right here.Now, let’s say I want to
go ahead and move this -I don’t want it on this side,so I’m gonna take this little icon right here,I’m going to hold it and I’m going to drag it.You see the little gray bar right there?So, if I let it go, that’s where the image
is actually going to show upNow, really quickly,
if I click on this gear icon,we have different animations for this.So, right here, scrolling down
you have the animation.Now, right here it says
we can have it right to left.We can have it top to bottom.We can have it, you know, bottom to top.
We can have it fade in.Now, we can also change the image alignment,but for this module right here we cannot
because as you guys can see,we have these two columns right here.
So, it’s sort of blocking it you know.So, right now, it’s just going to stay there.. I really don’t want to talk
more about that, don’t worry.And, right here we have these
other options like you know,you can move the space below the image
but right now we’re not going to use that.But, if you want you can click “Yes.”You can see the space gets deleted.Right here if I go to –
leave that as centered -so, you guys can choose
to have this or not.You know, I go and put “Yes.”
Why not?And, over here in the Designyou can change a lot of the settings for thisand not to worry guys, we’ll talk
more about this in the next sectionso, don’t worry about these settings.
So, here I click on check.Now, let’s go ahead and add in
a background image to this.So, we have this nice lining page,
but we have no background.So, right here at this gear icon,
I’m gonna click on this.I’m gonna go to upload. So, right here
it says “Background Image.”I’m gonna go to “Upload”and just select one of
these images right hereand click on “Upload an Image.”Now, you guys can actually
have a transparent coloror you know, your own background color.So, if you don’t want an image you can
simply do something like this right herewhere you can just have like a color like thator you can have it transparentand also right here you can add a video.So, right here I can click on “Upload”
and I’ll select this videoand don’t worry guys, I’ll show you
where to get videos right now.So, there is a website called Videvo.net.So, it’s vide – videvoI think it’s videvo.net
or something like that.Like me see here, it’s videvas.Let’s see – there we go, videvo.net.
Yeah, videvo.net.Now, right here you can
click on the Footage section,and they have all sorts of videos right
here that you can download for free,so that's if you want
a video background,You guys can sort of go through
these and check them out.Now, if you want like really nice images,
you can go to unsplash.com.Unsplash.com is a very well
known and respected site andthey give like really nice images you
guys can see, it's a beautiful pictureand you guys can go ahead
and just go through these.Now, if you want like a category,
let's say you're looking for something,so just to do something like, you know,
night sky or something like that,there you go. So, now we have the night sky
and we have all these pictures of the night sky.Okay? So, you guys can go
ahead and go through these.But for now, I'm just going to go ahead
and go back to my stock right here.And I'm going to go ahead and just
use this background image instead.And upload an imageSo you guys, you know,
finding an image will take time,you know, these things aren't easy.
I know I make it look easy, but trust me,the landing page is the most
important part of your website.This gives people maybe two
to three seconds to determineif they're going to shop
on your website.So, having a beautiful
landing page is crucial.So, we have this image right
here and this call to action,but you guys can see, the girl's kind of
blocking it, it doesn't really look good,So we can actually just go
ahead and just move this.Right here, I'm going to go ahead
and move this back over here.And take this module and
move it right under here.Now, let's say for example you just want
to duplicate this entire row or section.So, right here under this little duplicate
row icon you can click on thatand that will simply duplicate everything
that you've done in that little box.So, this will save us a ton of time in the future,
so if you like a pattern style website,the duplicate row would be
your best friend.But right now, I'm going
to click on delete row,now we can also duplicate
this entire section.So, we can actually duplicate
it just like that,but you know, that's just for [inaudible]
purposes. I'm not going to do that.So, I've showed you guys
how to do this landing page,and also, one more thing, now you
see where my mouse is right here?You can actually extend this like that,
or we can do this on the top as well,and kind of like put it
wherever you'd like.You can go ahead and do that.Now, this applies to all the models,
even the green section,so we can move the green section
down, or the green section up.So, you can go ahead and determine
where you want your picture,or how far you it to extend.
So, the next section right here,I'm going to click on this plus icon
and we are going to actually createthis section right here. So, it's really
simple this plus icon, click on itNow we want a regular section,now you see we have all these
different types of rowsSo, I just want the four-row
column right here,So I'm going to click on this right here.And now you see that we have these,
I'm going to close thisWe have these four little rows
right here, all right?So, I'm going to click on one, and we
can add in any module that we want,however, I'm just going to add in
the image module right now.I'm going to upload an image right here.And I'm just going to select one of these girls.So, I have one image there, all right?Now, I'm going to do the same
for these next three right here.And this is good, because it's creating
that category for our visitors,because we want to sort of direct
them on where to go.So, right here, I'm going to go to image,
upload an image,choose this girl, same thing right here.Now, I know it looks different
than the other section,and I'm going to show you how
I did that right now.So, this girl and then, right here I'm going
to add in a picture of this other one.All right? So, I have these
four girls right here,but you know, right here you can see
they're bigger, they're stretched outand it looks pretty different.So, right here under this icon right here,
we can control this row,So maybe I want to extend this row.So, right here, under the row settings, right here
I can say I want to make this row full width,So now this row is bigger, so you guys can
see the images are getting a little bit bigger.Now, we can also do something like, oops,a change the gutter width, so right here,
I'm going to click on yes.Now, right here, if I go to 2, the images
are going to actually get closer,so what that does is it's reducing
the amount of space right here.You see this white space right here?If I keep doing that, it's just going
to delete all of that white space,and now we just have the images
right here, all clumped together.Now, this is actually really
modern style look, too,but that's just not what I want
to achieve right here,I don't want to do this right here.So, I'm just going to go ahead and leave it
at maybe something like 2,I think this right here is something
good for us.So, now you guys can see it has that cool,
little like one, two, three, four.Now, we need to add like a title below, so there's
a lot of different ways we can do this,we can add a text module,
we can add in like a call to action.So, I'm gonna click on plus two module
and I'm gonna add in a call to action.So right here, I'm find the call to action,
so right here I'll do something like pants.Okay? So pants.And the butts in URL,
don't worry about it,we will be making our shop page
and produce in just a little bit,but I want to sort of get you guys
comfortable with this page builder.So, right here, butt's in text, so what
do you want the butts in text to say?I'm gonna put shop now. Now, we can
use the background color this time,I actually do want it, but I don't want
that color, that's a really ugly,like tacky color, it's like the old aunt's color,
you know, on like your aunt comes over?That's like the color she wears, you know?
But right here under the background color,I'm gonna select black and do
something like a grey, like that.Now, guys, one more thing, you really want
to keep your colors consistent on your website.So, if you're going for like a scheme
of like red and blue, or white and black,you want to sort of keep that
consistent on your entire website.You guys can see right here,
I have this grey color,and I've kept those colors consistent
throughout the entire website,because if you have a website
with the bunch of different colors,it's going to show, it's going to look clashy,
it's going to look really tacky.And people are just gonna say, “
This site sucks, I'm gonna leave.”That's really how people are. So, you have to make
sure the site is appeasing to the human eye,because that's truly what makes
them stay and buy items.So I'm going to do this
color from now on.Four nine, four nine, four nine, okay?So, right here scrolling down, we just,
you know, change these settings,You can add in more stuff
like all pants 50% off.Now, you might want to capitalize that,And also a good strategy is to capitalize
the beginning of every letter,That's what everybody does, I know that in English
world that does not make any sense,But in the online world and the e-commerce
world it makes total sense.So, right here we have
all pants off 50% off.Now, the same thing for the design,
just like we did up here, with this module,we can do the same
thing right here, okay?So, it's the same, exact settings and these
are generally the same for everything else.So, for the text module for everything else,So right here we can change it to ableAnd I'm gonna go ahead and just
mess with these things a little bit.We can go ahead and decorate this.Okay, that's enough, that is enough.So, right here, under the customs
sales for butts in,I want it round, I don't like this,
the square is not working for me.We're not doing that today, so here
we have the button border width,we can change that, but I'm going to go ahead
and just change the butts and border radius.And also the hover over radius, okay?All righty.So, basically, you know, you can
design this however you want it.But I'm just gonna go ahead
and leave that right now.Now, what I want to do is actually
move this section up,because you guys saw right here,You know, i have these things up
and it kind of looks good, you know?It kind of cuts them off, it looks good and
also don't worry about these glows,we will talk more about these glows
a little bit later in the tutorial.So, right here, I'm gonna click on this
gear icon, and go to design.Now, we're gonna scroll down,
scroll down.Now, I'm gonna talk to you guys about
the custom margin and the custom padding,So what is custom margin?
What is custom padding? Okay.So right here we have this top margin,
now, let's say I want 100 pixels.So, right here, I'm creating
100 pixel margin right there.Okay? So, it's starting from 100 pixels.Now, let's say I want to do
that for the bottom.So now right now, it's basically creating
100 pixels of space right here, okay?I know that seems a little strange,
you're like okay, I kinda get it.But we can actually go negative.
So, right now I can say, you know what?I want to do negative 50 pixels.50 pixels.So what that's doing, if you can,
if you think about it, it's pushing it up,So instead of going, instead of creating
space, now we're removing space.So right here I'm gonna say you know what?
I want minus 100 pixels.All right?So you can see right now that's,
we've achieved that look, so basically,I took this box and I moved it up, okay?Now, one more thing I want
to talk about is padding.So padding is space, that's it.So, right here you see padding, you can
do something like you know zero pixels,So right here there is
no more space, it's gone.Now, you can go through all this,
but this is a bad situation to use padding,There are some much better situations
to use padding, so for thisSection I'm not going to talk about
padding, but just the margin.So right here I want minus 100 and this is
a really good trick for a lot of other modules.Right here, I'm gonna click on check.So, we have this.Now, I'm lazy, I'm very lazy and I don't want
to have to do that all over again,So all's I'm going to do is click on this duplicate
row and simply drag this on every single one.Do this.Do this, and do this.Now, one thing I want to point out,
that if these boxes fade in your website,or if something happens that's
kind of strange, don't worry,I have a solution to fix that, I ran into it actually
I don't know why, but for strange reason,Sometimes these boxes were fading.When I made this site live,
so don't worry about it,I have a solution for it, okay?But anyways, if it doesn't happen to you,
cool, you don't got to worry about it.So, right here we have pants and right here
you can change it to something like a shirt.Can do like shirts.Now, also I want to point out that if you
start to like mess with the text right here,they give you these cool options.So, right here you can just
like put bold italicize,These are like shortcuts in a way,
they're just there to help you out.So, oops.So right here, if I click on it, you can see that
we can change all of these settings,So I want them underlined,
I click on underlined, etcetera.It's very simple to use and if you want
to change the fonts of the color,This is where you can do it as well. Okay?So, have you guys understood this section?So, again, you know, if you want these images
even closer, remember the gear icon?You can reduce the gutter width, so now
there's no space at all. You see that?Okay, so I'm just hoping that you
guys understand the logic here.So, the next thing I want
to do is move down,And we can create this space right here,
this section right here.All right? So, I'm going to click on
this little blue button right here.Go to regular, now I just need this
section right here, that's it,I don't want anything else because
we're not you know using this,we're just creating a little headline.Now, you guys can use a text
module, or a call to action.I favor the call to actions, but right now
we're gonna use the text module,'cause we've already used the call
to action module a few times.And I kind of want to get you comfortable
with the other modules.So, right here, text module.And it's extremely straightforward.So, I want to center this. And you guys can
see right here, we have our new arrivals.Our new arrivals.And that's basically it, you know,
so we can you know,Change it to whatever we want.Now, let's say we wanted to
go ahead and change the text.So, right here under design we can
go to our text font right hereAnd we can change this to able.
And you can make it look however you want it.So, we can go ahead and decorate this again.I'll just go ahead and put it black. Oops.So, black. And yeah, we'll just
leave it like that, you know?That's good, we're good. So,
now I want to add that little line.So, how do I add that line? So,
that's what we call is a divider module.So, right here, I'm click on this little plus icon,
and we are going to add in a divider module.And right here, under the color,
I want to select black and I want it to show,So visibility, I want it to show.Now, the purpose
of this module guys is,it's actually to it actually creates
space so if I go over here,and I click on it, I'm going to go ahead
and click on it. It's kind of hard to grab,There it is,So right here under the height.We do something like 500 pixels.So it's very similar to padding,
except it just basically creates space.So, we can go ahead and
leave it like this right now.And if you want it really,
really small, don't worry,I will talk about that more towards the later
in the tutorial, when we talk about CSS.So, I have this line right here, now maybe
I want to go ahead and add something likeYou know, a little tagline, below that.So, it's pretty simple, you just
click on this little plus icon,and we'll go ahead and select
the text module again.And I'm going to centre this,
and paste it.Now, this can also work right here, too.You know this line actually
looks kind of good,Long, or you can have it shorter, but later
on I'll show you how you can make it shorter.So, we have this section right here,
but this divider module,it actually is creating a lot of space and
I don't want that much space right there.So, you see where it says heights? 50 pixels,I'm just gonna put zero. Zero pixels,
oh, I don't know, that's a little too close.So, maybe like 10 pixels, or five, let's do five.
I'm so indecisive, it's terrible, all right?So, now we can actually go
ahead and click on this as well.And maybe we want to go ahead and say,
you know I want this full width, or you know,I want it you know just regular,
or you can change the padding,So the same thing we did right here?You can do the same,
exact thing right here.Now, right here under the design we can
choose to have like a border around it,so you want to go ahead and add a border,
you're more than welcome to.But later on, I'm going to show
you how to get this box around it,there's a special CSS that you need,but we will talk more about the CSS
features a little bit later,after the tutorial you get
much more comfortable,with the page builder itself.So CSS is basically like custom
modifications, but don't worry,I will show you how to do that.So, the next section, we have products,
but we have no products yet, we have nothing.So, let's go ahead now
and create some products.So, right here I'm going to click on
this icon right here and go to save.And we're basically saving our progress,
and the great part about this page builder,is that it will automatically create
back ups for us, it's simply amazing.So, let's say for example, one day
your [inaudible] just turns offand you're like “Oh my gosh,
my site's gone”.No, they will actually, they have
like a automatic like,it's like half an hour back up,
something like that.I'm not really sure how often they do it.So, right here, I'm going to go
to plug ins, dashboard.And now we're actually
going to go to plug ins.And go to add new.So, guys, plug ins,
so what are plug ins?Think of plug ins like apps
for your smart phone,just like these have like a special
thing you can give to your website,like you know when you have your iPhone
there's like an app for this, and app for that?This is the same, exact concept, so it's basically
just added features for your website.So, one feature we want is the ability
to sell online, right?So we need to go over here
and type in woo commerce.Now, this is a plug in, and basically
you can think of it like an app,that will basically allow you
to sell on your website.So, it is probably the most… no, it is the most
popular platform right now for selling.So, right now, click on install now.And click on activate.All right? So, welcome to the world
of WooCommerce.Okay, so let's go ahead and go through this,
we're going to go to let's go.Now, it's going to automatically
create these pages for us,so it's going to create the shop page,
the cards, the check out and the my accounts.We want it to create these pages,and I'm going to show you how you can
actually create your own shop page,and not the one by default.
'Cause by default,it gives you kind of a very limited shop
page and you can't really design it.Don't worry about it, we are going
to design our own shop page.So right here I'm going
to click on continue.Now go ahead and select
where you're from,so I'm from California.And I want it in dollar,so what units should be used
for product weighs?So pounds, grams, ounces,
and what dimensions,you can go ahead and
select what you want.But I'm just gonna leave it
on inches for now.Go to continue.Now, will you be shipping products? Yes.Will you be charging sales tax?This is up to you,
so all this is up to you,but right now, well we can talk
about that a little later,I'm just going to click on continue.Now, payments, so I recommend
stripe and I also recommend PayPal.Now, the stripe luckily for us,
that we are using site ground,and site ground will give us a free SSL,
and that's what we need to use stripe.Now, other hosting providers
some of them don't offer it,so we're very lucky that we have it.But right now, I'm just going
to click on PayPal Standardand we will actually use
Stripe a little bit later.So, go ahead and put your
PayPal email address,and what this does is that it will link
your PayPal email address to your store,so if someone comes and
they buy something,all that money will go right
to your PayPal account, okay?So, I'll do something likeall right. And I'm going to go
ahead and go to continue.All right? So, you guys ready?
Ready to create the first product?Let's do it. So, right here,
let's create our first product.All right, so give your product a name.And you know, really quickly, they're gonna
have these annoying pop ups,now if you're brand new,
you should read these,but you know, I don't read these,
because I… yeah, I know what to do.So, right here product name,
so what is your product name?So, whatever you're selling,
give it a name.So right now I'm gonna put something
like woman's t-shirt.Now, this section right here, I
'm gonna go right to my demo store,I'm going to show you exactly
where these will be.So, this bottom description right here,
you can see this right here, on the bottom.This section is the section,
so whatever you put right here,it's going to show up right here
on the bottom on this description.I know they should have
reversed that, you know?They should have this section up there,
but you know, they don't.So, they have this section
down there, okay?Now, scrolling down here, I'm going to keep
dismissing these they have them everywhere,it's like, okay, we get it, we get it.
It's so annoying, it's like those pop ups.Now, right here, we have product data.So we have a simple product, we have a group
product, affiliate and variable products.Now, I have tutorials
where I do all these,but this tutorial we're going
to do simple and variable.Now, if you guys need help
with WooCommerce,after this tutorial I have a link
in the description of this video,it will take you to my WooCommerce tutorialit's the number one rated tutorial
on YouTube and Udemy,so you can be confident that you'll
learn all about it and more.So, right here, we have simple product,so I'm going to go ahead
and give this a regular price.So, it's $100, it's $100.
Now, is that on sale?Well, if you want it on sale, you can put
$50 now you can even schedule that sale,so right here, I'm going to say, okay,this shirt is on sale between the dates
of the 20th and the 30th only.So, after the 30th this will go back
to the regular price, of $100.Now, inventory. Do you
have SKU numbers?You guys are doing those SKU
number things in the retail store?This is where you'd put them in,
if not, don't worry about it.Right here, are you in stock?
Or are you out of stock?So, obviously I'm gonna
put it in stock, right?Shipping, if you have the dimensions of your
product you can go ahead and put that in,if not, don't worry about it,
it's not a big deal,we will come back to that
a little bit later.Linked products? Now,
upsales and cross sales,we'll talk more about this a little bit later,
when we have more images,but upsales, now also you guys can also
go over these little icons right here,and these are kind of all over WooCommerce,
to help give you ideas.So, upsales are products which you recommend
instead of the currently viewed product.So, someone is viewing this product,we can you know recommend
different products to them,while they're viewing this product.And cross sales which
I do not recommend,are actually when they're actually
going to the cart.And I'll talk more about why I do not
recommend cross sells. Okay?Now, tributes, these are all for…
what's it called?Variable products, so we do not
need to worry about that right now,for simple products and advanced.So, if they purchase it, do you want
to give them a purchase note?Do you want to tell them something like,
“Hey, thank you so much”or “We love you,
we love your business”or whatever you want,
so you can put it right there.So, next we have the product
short description,so this right here is important, because
that will show up right here. Okay?So, I'm just going to copy this and just
simply place this right here. All right?So remember, this right here
is pretty important,because this is going to show up
right next to your product.And that text can determine if they're
going to buy it or not. You know?It really will, so you want to make
sure it's convincing,it's good stuff, you've got
to make sure it's good.Now, product image, so we want to select
a product image for this, right?So, I have woman's t-shirt.So, I'm going to select the product image,
which one should we add?Which one?I'm feeling lucky today,
which one's the cutest?I don't know.I'm going to put this one.Okay, I'm wasting way too much time,
I'm going to put this one, right here. All right?Now, the product gallery, so this
right here is the product gallery,so these are the extra pictures,
so I'm going to add product imageand simply select the other
one right here.So, it's basically just different
angles of the product.Now product tags? I'm going
to put something like shirts,that's if like someone searches
for it, or you know,it'll actually recommend also similar
product tags, so keep the tags consistent.Now, product category, so guys,
these are very important,and if you are, you know, making
a store, I make these mandatory.You have to have them, because this
is the only way you can organize your stuff.So, right here I'm gonna
put like fancy shirts.Fancy, oh, whoops, fancy shirts,
it's kind of hard to type,because I have the mike
in front of me, you know?So, fancy shirts, all right?So, this is now a member of fancy shirts
and it looks like we're all ready to go.So, we have our category, our tags, we have
an image, we've talked about this, right here.I'm going to go ahead
and publish this.All right, so woman's t-shirt,
so do you want to view this product?If so, right here on the top
just click on view product.And there you go, we have our product,
so you can see woman's t-shirt,we have all of this stuff right here,
and we have the categories,we have the shirt and everything
looks pretty good.Right, now one thing you've noticed,
that this page is in French, what? Really?They think this is French? It's not French.
It's just dummy text, so anyways,one thing you've noticed
on the top right here,we don't have the like the shop
page or the my account,and that's just because we have
not added it to the menu yet.But we have actually seen the little
cart now, the cart's come up.So, let's go ahead now and add all that
stuff to our menu, before we forget.So, going back over here to dashboard.I'm going to now do appearance,
and go to menus.So right here we go to view all,now I want to add the cart,
the my account, the shop,we can add the checkout,
but I don't recommend that.But we can actually make that
a drop down menu, we'll do that.All right, so we have all these added right here,
so I'm going to put the shop right here,and the my account,
and then the carts,and now the checkout, I'll make it
a drop down menu, like that.So, if they hover over cart, then
they will see checkout, okay?And I'll give you an example
of that in just a little bit.So, we can go to our site right now.So, now you guys can see on the top
right here, we have the about us,the shop, my account and
then if I hover over cart,you're going to see checkout appear,
so that is the drop down menu.Now, really quickly I want to go aheadand point out that if this
happens to you right here,don't worry about it, all you need
to do is go to enable visual builder.Okay? And scroll down right here,
so imply click on this little gear icon,and we're going to enter some CSS to
make sure that this works properly,so right here, so under the main elements
all you need to do is type in position,colon, space, relative and then this
other one, the semi colon right there.nd then, just click on check
and just do that for all of them.So CSS, main elements, paste it,
so position, and then the relative semi colon,colon I'm going to do this for every
single one in the main element.And this, basically, guys,it just makes sure that this section
will appear before this image.So, it is a little complicated
for this to appear,but it's still in the less
it's an easy fix.So right here I'm going to click
on this little icon and go to save.Now, that is only for like the margins,
that's basically when you start clashing stuff,so that was probably the most advanced
thing you're going to see in this tutorial,so don't worry about it, so we
can go to exit visual builder.Now, we can go ahead and view it,
and there you go, it all works just fine.So, below this section we want
to go and add some products,so we added one product, now how
do I add my products there?So, I'm going to go to enable visual builderand just like these other ones have modules
the image module, the call to action module,we're going to add
the shop module.So, clicking oh, we can do it like
this, this little plus icon.Click on this right here, and then
we're going to select the shop module.And you can use this shop module
on any part of your website.So we only have one product, so that's it,
only one product's going to show up.So, if you want to add in more,
you can go ahead and do that,so I'm going to click on this check icon,
click on this, and go to save.Now, let's just go ahead
and just do another one.Let's just do another simple product,just to make sure that you're comfortable
with it and you understand how it works.Now, we can also go over here
to plus new, and go to product,so this is like a shortcut menu, to do like
pages or posts, or whatever you want.So, I'm going to do product.And let's make another product,
so I'm going to do black shirt.And over here, I'm just going to
simply copy this, paste this right here.Now, we'll do one more simple product,
and then we will do a variable product next.So, it is a little bit more, but yeah,
it's still pretty easy.So right here, we're going to do
something like you know $150,the inventory so is this in stock? Yes.Now, one more thing I want to point out,
that if you want to enable stock,this will actually show people
how many you have left.So I'll do something like
ten right now. Okay?So, I'll put ten, now shipping,
same thing right here,just like before, attributes, we will do this
just a little bit later in the tutorial, not now.I'm going to go ahead and paste this.Set up product image, so we
will set this one right here.And we'll go ahead and
add in this right here.Okay?All right. So, here I'll do
something like shirt.And then I'm going to add it
to fancy shirts.All right. Now, I'm going to make one more,
just so I have three of each category?So, you don't have to follow me here,I'm just going to do this just to help you
visualize and understand how this works.We'll do white shirt. White shirt,
I'll go ahead and paste this right here.Everything is on sale today.Right here, I'll go ahead and
select a product image,I'll just select a white shirt right here,
then add this as a product gallery.Now, a little bit later into this tutorial,
I'll introduce you guys to variable images,and I'll talk about products and I'll talk
more about Woo Commerce settings.But we will talk about that
a little bit later in the tutorial.I want you guys to understand how
to actually use the page builder,before you start making
a lot of products.So, now if I go over here to my sites,
and scroll down right here,you're going to see these products
that are starting to show up,this one is not on sale, so tell you what,
let's make this on sale really quick.I'm going to click on this.
Now, if you want to edit your products,just click on edit product
on here at the top.And I'm just going to give this
a cool little sale right here.Oh, you know why? It's because
these dates don't work.So, I'm just going to take off
the date right there,'cause those dates don't exist for me yet,
'cause that's actually two weeks from now.So, I'll just click on update here,
and that sale price will now work.All right, scrolling down here, and there you go,
so now we have sales for everything.Now, how did I make it look
like this right here?And how did I have like the flip,
like the other website?We will talk more about that,
in just a little bit.But for now, I told you guys before,I want you guys to understand how
to use this page builder and everything.So, let's go ahead and create
this next section, right here.So, how did I create this split
screen effect right here?Well, it's pretty easy.So right here, I'm going to go to edit,
or enable the visual builder.And we're going to scroll down,
just keep scrolling, put that up,just keep scrolling, now here,
I'm going to go to plus.Add the regular section and just
add these two columns right here.Okay, that was weird. So, I'm actually
going to add in those images,so right here, so right here, if I scroll down,
and add in this image,I'm going to upload, and simply
grab this one right here.All right? So, I have image number one.Now, let's go ahead and add in
image number two.All right, so I have the images,
but how did I do that?Well, I hope you guys can understand,all I did was reduce the gutter
width and make this full width.So, this gear icon right here,
which controls the pictures?I'm gonna click on row settings,make this full width,yes, to gutter settings and
I want to reduce the spaceand I want these cluttered
together like that.So, now you can see that we
have this section right here,where we have this split screen effect,but a unique feature that I did was how
did I get that little column in the middle,if there's no other, you know,
icons available?Well, I created one below it and I
pushed it up.So, right here I'm going to click
on this plus new row,and I'll select we can use
this one right here.Now, in the middle right here,
I'm gonna click on this,and I want to add in the call
to action module.Nope, not the audio, oops.I'm going to delete that, click on that
and add in the call to action module.Now, right here we can give it a title,
like so right here, I just put get the look.And then, I'll put it in a little icon
and then we'll put shop now.Use background color, I'm gonna put
yes, we want a white color, all right?Now, we'll change the text a little bit,so right here we're going to do
something like dark,text orientation, I'll go ahead
and leave that centered,and right here I did something
like leather jacket 1999.And then I did also woman's shirt.Okay, so I'll go ahead and click on,
that's actually what I wanted to do,so the next thing I wanted
to do was design this.So on the design you can
change this to our font,which we've been using Able for a bit,so right here I'll go ahead, you can go
ahead and design these.Now, remember, these are the same
exact settings as before.So, the body font, I'll change that
to something like that I want.The body text color.We can go ahead and put that to
something like matteand crolling down here, we can
actually use the border here.Now, for the border color
I kind of want a block one.So, you can right now
we have this border?And of course, that button has to go,
that button is just, it, no.That does not…
that's not going to work out.So the button text color?Let's go and make it black,
and that looks nice,so that looks a little bit nicer.So, how did I do this?How did I push this icon up,
if these are different rows?Well, just like we did it before
with that margin right here,I'm gonna do the same exact thing.So, taking this, I'm going
to design,scroll down,and I'm gonna go minus
250 pixels, is that good?Maybe a little bit more, 500 pixels.Maybe like 400 would be good, right?
400, perfect.Now, guys, this is probably the most
advanced thing with this theme,so it's usually not like that, you know,this is a very advanced
method that I'm using.So, if you're brand new to word press
and you feel that's too complicatedfor you, you don't have
to do that, don't worry.I'm just showing how you can
kind of get that look for your website.So, the next thing I want to do
is actually go down here,and we have an Instagram,so how did I get this Instagram up?
How did this all happen?Well, guys, this is just
a plug in that I use,that's all it is, so going over here,I'm gonna go click on
this and go to save.So, now we're actually going
to use the Instagram feed.So going over here, now,
if you guys have an Instagram,you know, this is where you would
go ahead and you know, follow along.If you do not have an Instagram
and you think it's lame,I mean, I don't use Instagram,too much but I know it's very,
very famous, you know,a lot of people out there
use Instagram as well.So really quickly,I'm going to get the name of the plug in
that we're going to be using.See here, I think it's called
the Instagram feed.Instagram feed.The Instagram feed
by Smash Balloon, okay?So, plugins, add new,Instagram feed,'cause there are a lot of them,
you know, it's very easy to get lost.So right here, Instagram feed,
I'm going to click on install now.And I'm going to click on activate.All right, so on the left side right here,you guys will notice that the Instagram
feed now shows up,so I'm gonna go into…
click on this.Now, if you guys don't you know your
information don't worry about it,you guys can actually
click right here and log inand it'll get all your information.If the button's not working, you can
just click on button's not working,and this will actually take you to like a little
system of like how to actually get it.So, if you guys don't
know your information,or you don't know how to get it,
don't worry about it.This site actually has a tool right here,
and it can help you get your feed.So, right here I'm going to put
my access token in,and your user ID.Now, it's not like your actual like you
know your ads, it's your number,so you can actually find this
in the Instagram profile as well.So, right here, I'm going to go to paste,
and paste that informationand I'm going to go to save changes.Now, we can customize this feed, you
can make it have a lot of different looks.Right here, under customize
we can go to like generaland you have all these
settings right here,most of these right here are
actually pretty standard forlike the image sizing
and everything else,but for options like load more button,
you know, I don't really want that,and the follow button, you know,
actually I do want that.You can change the text of that,
so instead of saying follow on Instagram,it could be follow us.Follow us on Instagram,and scrolling down hereyou can go ahead and just
click on the save changes.So, you guys can actually go through
all of these settings right hereand decide if you want all
of these settings right here,or if you don't want them,
so also for header, you know,I don't want to show the header, so
that's basically like your your nameand everything else,
I just want the pictures,so I'm going to go to save changes now.Okay? So scrolling up here,
so I basically customize it how I want,and you guys can go ahead
and go through these settingsand decide which you like.Now, here I'm going to go to
display your feed.And you see this [inaudible]
right here?So Instagram dash feed?That's what we need to put on our text
module, so going back to our website,so wherever you want this
to show up on your website,you're going to type that in.So, let me give you an example.Right here, I'm going to go
to enable visual builder,I'm going to scroll down right here,now this section right here,I'm going to click on this plus I'm going
to click on this one right hereand add in a text module.So, scrolling down to text,you're going to add in a text module,now, there's two sections right here,
so remember right here,that's where you're just
going to type it in.But remember, it's not the visual,
it must be the text.The text is basically you're always
going to enter in like scripts or codeor something else it'll work right there.So, I'm going to type that in, brackets,
Instagram, dash feed, close bracket.Now see it starting to load up?And voila, we have our
pictures right there.So, I click on this, now I can actually
make this a little bit bigger.So, if I want to make this bigger,
I can make this full row.Now, by default, I only have four
pictures, but that's just because,I'm sorry per row, but that's just because
that's the way I customized it,so you'll need to actually go in there and
customize it to decide what you want.So, clicking right here,
I'm going to go to save,and now, let's just say I want
that section where was it?On the other site, right here, solet's say you want it, something
that looks like this right here.Where you just have five across,
so let's go ahead and achieve that look.So over here, I'm going to go to
dashboard, the Instagram feed.Now, we're going to go to customize.And I'm going to be honest, I don't use
this one too much, but right here,number of columns, we'll do five.And add padding around images,
we're going to put zero.Number of photos? I just want five.So, I just want five to show up,
and remember padding is space,guys, so when I say zero padding,I'm basically saying I don't
want any space, okay?So, now that I've changed that,
I think that's basically it,let's go ahead and
take a look at our site.Go ahead and scroll down right here,and there you go, so now we have
this section right here,and they're all lined up properly.Now, if I want to get of this padding right
here, I'll have to adjust my row column.So, I'm going to enable the visual builder,
I'm going to scroll back down there.And this section right here,I'm going to use the gutter width
and just change it to one.So, there you go now.So remember the gutter width makes it
so there's basically no spacein between the images.Now, one more thing I want to do,is I'm actually going to add in
another module.So right here under this plus two module,
I'm going to go to text,and I actually want to upload
the Instagram icon.So, text, now visual.So, remember, guys,you can either do like an image or you
can put the image in your text module.Now, I'm gonna show you why I did this,
so this is a text moduleand right here we can
type something in,so you guys see right here,
oh he's typing something in,but maybe I want to go aheadand add in an image,
so right here I can add in media.And I'm going to add in this
Instagram logo right here.And right here, I'm going to click
on it and go to center,so now I want it centered.Now, I'm going to click on this,and I'm simply just gonna
drag this up right above it.Okay? And that takes time to load,
'cause that's you know,a slower plug in, but you know,
why did I do this?Well, let's say you want to change
the size of this logo,you can do that with the text
module, however,if you're using the image
module, you cannot.So, right here, you see that
we have this highlighted?Now, you see that I have
this all squared up?So, maybe I want to go ahead
and make it smaller,or a little bit smaller,
just like that, okay?So, that's a really good shortcut and
technique to sort of resize your imagesif you're not familiar with the what is it?Photoshop, you can
use that, becauseif you use just the regular image module
it will not allow you to do this.So, this is a very good alternative,
it's just to use the text moduleand simply just resize the image
in the box to your liking, okay?So, pretty good, pretty cool.And also, don't worry
about these borders.We're going to come back to that
a little later in the tutorial,we're gonna talk more about CSSand we're basically gonna talk abouthow I got it to look like this right here,where we have this shadow.You see how I've achieved
this shadow right here?Don't worry, we'll talk about that
a little bit later in the tutorialwhen we talk about CSS.It's very easy stuff, it's simply copying
and pasting text, it's really, really easy.So, now that I've done this right here,
let's go ahead nowand do our footer section.So, I'm going to save this and I'll actually
want to go ahead and say,okay, so we
have this section right here,I want to go ahead and add in this footer
section, we want to customize that.Well, remember earlier how I talked
about the theme customizer?Now, we're gonna mess with that,
so right here,we're gonna go to theme
customizer.And always make sure
to save your settings, guys.Always make sure, like don't forget,
it's important,I don't want you guys to be like
oh my goodness you know?So let's go ahead and scroll down,now right here we have footer,so I click on this and we have layout.So you want like the four column row?Like I have one, two, three and four?You can change that to different styles,like three, they have two by two,
so right now we'll just do three.And the footer background color,
what color do you want it?You can change the color right here,so I'm gonna go to save and publish.And we have widgets,now widgets are basically
these little things right here,they're kind of like gadgets so I'll talk
more about that in just a little bit,but this is where you can customize
the widget section.So, footer elements, we have show
these social icons, so yes.You want to show the social icons
and there is a I'll talk more aboutwhere you guys can link these,
it's in your options,it's actually really easy to get to.Going back here, footer menu and we
can adjust the footer menu right hereto like whatever colors and
everything else that you want.And we have the bottom bar,and right here, instead of like the…all this text right here,
you can put in your own,like made by Darrel Wilson.All right?Click on save and publish,
so let's go back here.And let's go back one more time,so that was the footer section.But now we need to go to widgets.Now, you see where it says footer
area one? Two, three and four,so right here I'm going
to go to footer area one,and we're going to add a widget.Now, scrolling down here
I can add something like text.So, let's do like
about our business.And then, we sell some
really cute clothes.We opened in 1999,
with just a small let's see,everyone has those stories,
small shop with just ten items.Now we sell thousands.So you can see right here that
this is actually starting to show upand again, remember how I talked
about the color and everything else?You can actually change
that in the footer section,so about our business.
I'm going to go to save.Now, there's another
way how to get here,so instead of doing it like this,you can actually go to the back end.So, I've shown you how to do it
through the theme customizer,now I'm going to show you
how to do it the other way.So I'm going to exit this
visual builder, by the way.All right, so right here,
we have this section,but let's just say we want to go
ahead and use in the back end,so right here, we can go to widgets,now you right here it says
footer area one,footer area two footer area three
and footer area four?So we can go ahead and
just drag in whatever we want,so we have WooCommerce products,I'll put that as footer area two.Now, what do you want this to say?So, I'm just gonna say productsand how many products
do you want to show?I'll put five, you can show like
your features, your on sale,you can go ahead and mess
with the dates, etcetera,so that is one of the you know,
like the widgets that you can add.Now, the next one, I kind of want
to add something different,we can add in something like pages.So right here I'll put in
something like pages.Our pages and go to save. Okay?And if you ever want to see this,
you can go to visit site,and you just scroll down, you're going
to see your stuff come up right here.Now, guys one thing that I want to mention,
that I will be showing you the subscriptionand the other plug in,
the social media one,but not just yet.
I want to crunch a little bit morebefore I redirect you guys to email
subscription and all that stuff,because it's kind of going off topic.So, I'll introduce that a little bit later,but for right now, I just want to show
you how to use your footer.So, let's just say again,
you want to customize this,I'm going to go to theme customizer.And we're going to go ahead
and go scroll down right here.You can go to footer,
and of course, guys, rememberyou can change the colors, you can
change whatever you would like in this,so if you want to go ahead
and do like the active link,which is like when you click on it,
it will change to red,or it can change the background color
to something that you'd want.Like the footer background menu color,or we can do something like the bottom bar,
which is this section right here.So, you guys can go
through these settings,and if it doesn't update, if you actually
go to these and it doesn't update,just save and publish, refresh
the page and it will appear.So, it might now like show up live,like the visual builder, however,
it will show up, okay?So, again, this is where you go to make
all of these changes for your stuff, okay?So, I'm going to go to save and publish.Now, one more thing
I want to do this,before we go to the next page,
or a shop page,is show you how to link
these social icons.So, with these social
icons right here,and if you want to use them
on our plug in a little bit later,I'll show you how to actually link
these to your social media website.So, right here under dashboard,
I'm going to click on this.I'm going to go down to settings.I'm sorry, Divi and you
can just click on Divi.Now, right here, we're gonna
scroll down hereand right here we have our
Facebook profile URL,Twitter, Google Plus etcetera,you can go ahead and put
that stuff right there.Now, guys, remember, it must
be a fan page for Facebook,or your profile must be public,so if your profile is private
if they click on that profile,it's gonna take them to like
a does not exist pageor whatever your settings
are for Facebook.So you want to make sure
that's a fan page,now you guys can actually go
through some of these settingsand kind of like learn and explorebut these are very self explanatory.Now, a lot of these settings in Divi and
WooCommerce, sort of contradict each other,so you don't need to actually mess with
a lot of this stuff, like this stuff right here,because we can actually
change this in the shop module,we don't need to go to the backend
editor of Diviand change all this stuff, so we can
go ahead and leave all this blank.Now, if you don't want those to show up,
you can just say you know what?I don't want any of those
things to show up,and then they will not
show up at all. Okay?So, you know, feel free to explore this
section a little bit, get comfortable with it,also later this is where we're
going to upload our logo,but we will talk about that
a little bit later in the tutorial.I know I'm saying that a lot, guys,
but there's just a lot to coverand I want to guide this
tutorial on trackand not just kind of throw
you CSS first and this first,we're going to keep designing the
website and learning about productsand later on we'll get a little bit more in
the advanced section of word press.So, going forward, let's go ahead and
take a look at our website right here,and you guys can see it's
coming along pretty well.Now, later on in this tutorial guys,
we're going to do a lot of customization,so for example, right here, we're going
to go ahead and decorate these,we'll make them bigger, we will add in
a lot of animation, we'll add in the flip.There's a lot that we're going to do later,but that's like customization so I don't
want to go into that right now,and also we'll be talking about how to
create that border around this section.And scrolling down here, this
looks good. This looks good.And later on we'll be talking
about the subscriptionsso if someone wants
to come and subscribe,we'll talk about that just a little bit later.So, I want you guys to get a little bit
more comfortable with the page builder,so let's go ahead and now
create the about us section.So, we're going to create
this section right here.And this section is actually
kind of like, what was it?A pre-made template sort of,now Divi comes with a lot of templates and
I want to sort of introduce you to those,but I don't want to you rely on them,I want you to just understand
that they're there to help.So, right here under this plus icon,
there's this plus sign,and right here it says load from library.Now you guys can add, like save
certain parts of your website,add it to a library, load it somewhere else,but you guys can go ahead and
mess with these settings right here,you know, check out some of these,like for example our
product features page.So, these are basically
like pre-made templates.And they just help you know,
give you ideas and everything.But the one I want to use is actually
the our team one, right here.So, the our team one, okay I should
have actually done that like this.So, I'm going to click on replace existing
content, and I'm going to go to our team.So, now it's going to delete everything
and only give me this template.So, I like this template, it looks good,now I only want some parts of this
website, I don't want all of the parts.So, I'm going to teach you how to sort of pick
and choose which you want from this template,so right here, I like this section.But this recent project,
I don't want this section,and this blog post,
I do not want this section.And this next section right here, I don't
feel like I need that right here, either.And I like this fuller header, however
we can just go ahead and customize itand then right here maybe we
can add in our team matesand you know, it would actually look
really good with a little bit of work.So, let's go ahead and do that.So, right here, under this gear icon,now this is a full width header module,and the full header modules are basicallymodules that extend all the way
across the page.So, to give you an example, if I click on
this right here, you can see the full width.So, right now we're just using the
full width header module right here.So, we're using this one right here,but I'm not going to create another one,
because we've already created one right here,so I'm going to delete this, and we're
going to customize this one right here.So, I'm going to click on this
gear icon, and about the team.So, I'll do something like, I don't know, what's
a good one? What do people do today?Yeah, it's like meet the staff, right?Or they're kind of like modern,
they're like our friends or something,they kind of change it up,
so meet, well, meet the staff.And then right here,
I'll put these guys.No business. Right?Now, we can actually
decide to center this,and I wan to make this text color dark,
but it doesn't really matter,'cause we can change the color
on the next design tab,which is the same is the call to action.So right here, it says make full screen
now, of course, you can do this,but we're not going to do this feature.We just basically want this section,now we can also add in a button, however,no one really adds a button
for their about us section,so we're not going to add in
a button right here.But if you wanted to, you could
put something like yes,and then, this right here
would be the URL,so www.you know your website.com
dash shop, etcetera.You can actually add in
a button right there,but I'm not going to add
a button just yet.So, over here under design,now I might want to actually change
the title font color and everything else,maybe add like this little bit
grey here or something.And then scrolling dow here,now these sub header font color,
we can go ahead and change that as well.Now, the content font color, we
don't have any content right here,you know that's basically where
there's a bunch of writing right here,but we didn't add anything in.Now, under the general settings,
that'd be this section right here,so we don't have anything, because
I don't want to add a bunch right here,'cause that's just not necessary, you don't
really need to have a bunch of stuff.So under the design tab, you can scroll
down here and change our fonts.So I'm going to go ahead to change all our
fonts to Able make just a little bit bigger.Okay? Now under the general settings right
here, I actually want to change the color,so under the background color,I want to have that grey color that
I had consistent on my website.Now, under the design tab I might
want to make this a little bit bigger,and of course, you guys
should be capitalizingevery single letter of the beginning of the
word, so these should all be capitalized.So, don't follow my example,
these are…right here is good, meet the staff is good,
you'd want to capitalize every letter.That's just what you do in web design,it's really just it's one of those
things that goes hand in hand.So, all right, so over here,
we have this next section.So, this section is okay right here,
now this section right herenow I just want these bars, I don't
want this writing and this writing,'cause I want to use a person's
module instead.So, I'm going to trash this.And trash this, however, I'm going
to click on this plus icon,and I'm going to use the persons' module.This is a great feature
to introduce your team mates.So, here I'm going to put Darrel Wilson,And then position, I'll put owner.The image URL, well, actually, yeah.I'll change the name,
we're gonna put a girl right here.So, we're gonna put a picture of one of our girls
right here, so I'm gonna put upload an image.So I'll put, let's just do Jill Valentine.This is the girl from
Resident Evil, right?I think that's, yeah, I think
that's her real name.Now, also we have animation, so right
here this is what we're customizing.So animation, do you want animation?
If you do, you can do fade in,now also for the Facebook URL, so if you
have a Facebook like a professional page,you can go ahead and put
the URL right there.But I'm just gonna put a little,
you know, a number sign right now.And I'm going to go ahead
and do that for all of them.And I'm going to go ahead and copy
and paste this text right here.Simply just go ahead
and paste it right there.So this right here is our person module
so you guys can see it looks pretty goodand same thing, you guys, under
the design you can change the font.So, I want to keep it consistent, you know,I want to keep it all you know
under the Able font,then of course, these are all the same
settings for the call to action.So, there's no really reason for
me to go over all of these again,what spacing is, etcetera.
You guys understand the point,so going down here, I think this
is everything that I wanted.So, I'm going to go click on check.Now, I want to actually move this one
above it, so I'm just going to click on this,drag it above here, and there you go.Now, instead of redoing
this entire process,all over again, with your
fonts and everything,you can always just
duplicate the row.So, or I'm sorry, the module,so right here I'm going to click
on this duplicate row,I'm going to delete this, and going
to delete this other section.And I'm simply just going to take
this and drag it above it again.Okay? Now, same thing,
I'm going to click on duplicate,now I'm going to delete this
and I'm going to delete this.And I'm going to drag
this over here as well.So, here you can change the name, you know,
you can change it to your other team mates.So maybe this is we'll just
do like Rebecca.And I'm going to go ahead and change
this image, so image URL, upload.Find an image, let's see, right here,and also guys, make sure
to do the same size,so if you use one image size,use this same image size for all
of the images so it matches up,and I will be having a tutorial
on image resizing,so be sure to check that
out on my channel,because I know image sizing can be very
difficult when they come out a little distorted.And this one, last one, right here,I'm going to do something like,
let's see what we do here,see what we got here,
see what we've got.We've got let's see,
I had one more.I'm going to do something likeI'll just go ahead and we'll just, we'll just
duplicate it, we'll just duplicate this one.Or, you know what?
We'll just leave it, just leave it,and then right here I'll put
something like you know, justI don't know what, Jessica, her name's
Jessica today. We're doing Jessica.All right? So there you go,
that we have everything all set up,now scrolling down here,
we have these bars,so this is the bar counter module.And guys, it is very easy to understand.So, we have three bars,
we have customer happiness,tech support and community management.So, right here if you want
to go ahead and edit that,just simply click on the gear icon,
change it to whatever you'd like.And change the percent and
same thing under the design,you can change the background color.You can change the bar
background color, etcetera.So right here maybe I'll put
something like that.And you know you can go through
these and you know mess with it,design same thing, you can change the padding,
so remember padding is space.So, if you want a lot of space,
you can put something like that,or I'm sorry, push it up
like that, but generally,I would probably leave it as something,
you know, simple like that.Now, the title font, again, I want to keep it consistent,
you guys can see they're all changing.And you guys can just go
ahead and go through theseand just go, change these to whatever
you guys would like.So now it looks like that.Okay? Scrolling down here, okay?So that is basically like a quick run on
how you guys can decorate this,it's very self explanatory, I don't need to like
tell you again what letter spacing is,because we've gone
over that a few times.Now, if you want to add in another one,
click on add a new itemand then just simply give it a title,
so fun times.And then, it'd be 99%Okay. Now, if you want to delete one,
of course, same thing,click on the gear icon and just
simply delete it. And that's it.So, if you want the bar counters,
that is a good option to use.So, we've done this section right here,
now let's go ahead and scroll down.And I want to introduce
you to the parallax effect.So, earlier on this section right here, I had this girl right here with the parallax
effect and I bet you're wondering,how did you get that? So right
here under the gear icon,I want to add an image and I also
want to apply the parallax effect,so I'm going to click on this
section settings right here,I'm going to add a background image,
just like you know, anything else.I'm gonna find the picture of the girl.And scrolling down here,now you guys can see right now it doesn't do
anything, so there is no parallax effect.Now, all's you need to do
to get that parallax effectis simply just enable the parallax
effect by saying yes.So, now, if I scroll down, you now can
see that the parallax effect is in place.So, that's all you need to do for the parallax
effect to come into place.Now, there is another one.Now, this one's sort of, kind of cuts the screen off
like that, so you guys can see it's a different style.Parallax effect, so if that's something that you
want to achieve, you can do that as well.Or you can do the true parallax, which is
like that, so they're a little different,but rest assured they are
both parallax, all right?So, now let's get it into
the little tactical stuff,so I've shown you basically how
to use this section right here,I hope you guys are comfortable with these
modules, but let's get a little bit more technical.Let's say for example you want to center this stuff.
Well, you can't center this stuff just by default.It will not allow you, so over here, we're actually
going to start learning about custom CSS.And custom CSS, guys, is kind of like it's a little bit
more technical but I just want to expose you to it,so in the future, if you ever need it, or if there's
a question, at least you know what CSS is.So, over here in the CSS tab, I have this
command right here, for main elementsand I also have another command for like the member
image and the title is, sorry, text align center.Now, I know this looks complicated,
but it's really, really not.So, let's just go on over here to this setting
right here, and let's just go to the gear icon.All right? Now, I'm going to go to CSS.Now, guys, also remember that all of the codes
that you need, everything you need,there is a blog post on my website that
is linked in the description of this videoand it will run you through everything, so don't worry,
if you don't understand this the first time.This is probably, like I said,
CSS is more on the advanced side,but I just want to expose you to it, because
you're here and I want to show you what it is.So, right here we have title.Now, the command text align center
all it does is just text align center,it just aligns the text, so you just need to type text,
dot align colon space center semi colon.Now, you can do this for anything, so remember position,
same thing, you see how it's moving like that?Now, remember social links, same thing,
I want to center them, that's it.That's all you need to do and this command
will work for any module all over your website.So, the text align is actually a pretty
standard, CSS command,but if you're brand new to word press
and you have no idea what CSS is,then it might be a little bit
like advanced for you?But it's just a basic command
to center things.So, you guys can do that
for basically anything.So, now that I've centered that,
now I want to create a shadow,so I actually want to get this beautiful
little sort of look going on.So, how do I get it? Well, same thing, guys,
there is a command for a box shadow.And all's it does is like it says, it just creates
a box shadow, so going over here,now you guys can just go ahead
and copy this description, now this is also in the description
of this video.If you choose to have this, so over
here I put it in the member image.So right here I'm just going
to go ahead and paste it.And now you can see
we have that glow.Now, you can change this to any
color that you would like,so I bet you're wondering, Darrel,
where do I find these colors?Well, it's actually in every
single module.Now, under here on the design tab, if I scroll
down, oops, I move that girl a little bit.If I scroll down right here, you're
going to see this background color.Now, if I hover over the background color,
you see these little codes right here?This is the color of whatever
you'd want the shadow to be.So, for example, if you want a blue color, you would
just ned to go ahead and copy this code right here.And then I'm going to clear
that 'cause I don't want that.So, under the CSS if you want it
to have that blue glow?All's you need to do is simply paste it,
make sure there's not two of those,and there you go, so now it's blue,
you see that?So you guys can get very customizable and
this will work for every single module, guys.So, you can you know start outlining all
your stuff, and make it look really good.Now, the same thing for member description,
maybe you want to go ahead and paste that in there, too.You know? You can add it
to a bunch of different places.So, going down here,
you can add it to the title,you know, you can add it to basically
anywhere that you would like.So, over here, you can see that I put it under the member
image, and I put it under the main elements.So, going over here, I want to put it
under the main element.Now, the main element is basically
the like foundation of it,it's like the main… the main it's…
the main element.It's kind of hard to describe, it's like the bread
and butter of the module, kind of, you know?So, clicking on that, that is
how we achieve this look.And it's simply a CSS command, and
you can do this same, exact thing here.In fact, I'll go ahead and do it one more time,
so again, I want it under the main elements, and I want it where else do I want it?
I want it under the member image.I do that, because I want it to emphasize
more, you know?I want to really emphasize it, now,
how do we actually make this centered?I bet you guys remember. Text align,
colon space center, semi colon. That's it.So, same thing over here, I'm just
going to copy and paste this,'cause I am way too lazy to type this out,
so I'm going to copy this, right here.And again, title, now I know you
might not use this module,you might not use it for this module,
but later on, down the road,I promise you that you might it for something where
you're using like a product or a page, or some text,and you kind of want to position it somewhere else,
this is a great example of where you would use it,and you might want it for later, and it's just good
to know, it's free knowledge that you're getting.So, that's about it for this
little section right here.So, you guys can see it's very similar to mine now,
you know, except the colors we have the parallax effect,and we've basically successfully
created the meet the team page,and congratulations, you guys,
have just learned CSS.Which people go to like college and
spend like thousands of dollars for,like you've learned it for free,
that's it, it's that simple.So, I'm going to go ahead
and save this page.Alright.Congratulations, so the next section that we're going to do,
is we are going to do the what's hot page,and I'm sure you guys can already understand how to do it,
because now let's go ahead and take a look at it,and I kind of want you to understand
the modules that we used here,so I'm not even going to tell you
what we're going to use.I sort of want you to understand it
and expect what we're going to use,so right here, we have a text module,
an image, another text module, right?Right here, we have a text module with a call
to action, remember the call to action?We have the big font, the medium font
and then you have the button?And right here all's I did was I just simply put in the code
on the main element for both of these modules.Again, right here, we have a two column row,
so one column, two columns,I have an image and I have a call to action.
So that's it, that's all I did.And scrolling down here, one more time,
right here, we have a call to action again,and we have an image and I simply
just put the glow in that module.And going down here, now if you
don't know what this is, you're fired.So, this right here is just the same
exact thing we did on the last page,this is just a call to action,
I added a background imageand I just put in the parallax effect,
that's all I did.So, we can make this in a matter
of seconds, and in fact,we're going to use a template
for this next one right here.So, this is the what's hot page, and now
I'm going to enable the visual builderand we're going to create this next
page really fast and really easily.So, let's make our life a little easier
and let's go ahead and get a templateand sort of pick and choose what
we want from it. Now, over here,you guys can see I kind of want this section
right here, where we have the imageand the call to action
all ready for us.So, over here, I'm going to click
on this little icon, go to plus,and I'm going to go ahead and select the product
feature section, so this section right here.Alright. So we have this section right here,
now I don't want all this other stuff,like this all, this stuff is way, way too
much and I don't really like the color.I just actually want that one section,
where it's kind of like zigzag,this section right here,
this is exactly what I want.Now right here, we can
actually drag this up.And put it up here.And right here we can start from it, so right here,
we have this section right here, however,this is not the correct module,
so this is a call to action.I don't want to use a call to action again, so right
here I'm going to go ahead and trash this.So we're just left with just this
background right here,so right here I'm going to click on this
icon and let's change it up now,so for example, we're going
to add in a text module.And I'm going to center this, and we
can put something else, like you know,we're, what did I put right here, you know?
Get the hottest items in the summer.So I'm going to go ahead
and just like paste it in there.And you also want to make sure
that this is under heading one,I'll explain why we do that in just a little bit,
but make sure this is under heading one.Now, click on check. Now, I want you
guys to understand the logic of this.So, we can either go ahead
and add in a text module,and insert the image, or we can
just add in an image module.So, for example, I'm going to do both,
just to show you.So right here, I'm going to click
on this icon and go to image.I can either decide to upload this, and just
put this in right here and upload the image.Now, I can do it this way, but remember, if we do it
this way, we cannot change the size of the image,so I'm going to click on check. Or cancel,
and I'm going to do this again,so I'm going to go to plus new and now
I'm going to add a text module again.Now, over here,
under the add media section,I can actually just put the image
in the text module instead, now this is just an alternative
way to do it.I'm just trying to you know
expand your thinking,so you guys can achieve anything that
you want with this thing, you know?There's no really right or wrong way to use
this theme, it's just different styles of them,in my last tutorial we were
using images for blog posts,so it's just really what you can
think and achieve with it.And also, keep in mind that if you click on this image
over here, you can actually make it link somewhere,so you can actually decide to say,
hey, if someone does click on this,you can click on this little link icon,
and you can put in a URL.So, if you want them to click on it
and go somewhere you can do that.So, guys, it's all about just getting
as customizable as you can.The word press theme, there's no limits,
so you can do whatever you want with it,it's there's no limits, there's no right
or wrong way to do this.Now, I'm going to click on this check,
now you see right here?We just have another text module, so that's it,
that's just another way how you can do this,so it's pretty easy to understand
and of coursewe just need to change the background
to grey and we'll be all set.So, right here, plus, scroll down
to the text module,and I'm going to go to center,and all I'm going to do is just simply take this text
and just go ahead and paste it in there.Done, simple, easy. Now, earlier I mentioned about
the header text, well, header has a lot to do with SEO,but in this tutorial we're not going
to talk about it's likeH1 tags, H2 tags, 'cause this is not
an SEO tutorial.However, if I go to this gear icon, and go to design,
you're going to see how it says header font.Now, the H1 tags, the H2 tags,
refer to as header font,so if I want to change this section, we need
to go over here and change it from there.Now, is this were just basic text,
like here I'll just go aheadand give you an example really quick just to show you,
I'm gonna put hi, or I'll put JOOOO.If I go to design, you can see that the heater font
doesn't apply to this, because this is a text font.So, scrolling down here, this right here,
text font now applies to this section,so if I change this, you're going
to see this change.So, remember this is a header and this is text,
even though it's both in the same text box,we just kind of separated it, we made this
the header, and we made this just the text font,so I'm just going to go ahead and delete
this, we don't really need that.And we're done with this section,
except this ugly, ugly, ugly red color,we have to change it,
or I'm going to go crazy.So, the background color, let's go ahead
and change it to something like a dark gray.All right, I think that's good enough.And of course you guys can
change the font and everything,but I'm not going to over that because we've been
talking about that for quite some time now.So, right here we have product
feature and we have an image.Now, a good way to save time is just customize
one module, you know, to your liking,spend around five to ten minutes
just customizing itmaking it look really good
and then just duplicate it.So, instead of actually changing it for all of these,
we can just, “Okay, I'm going to change this module”,I'm going to decorate it then I'm just going to duplicate it
and we're just going to use this module instead.So, let's go ahead and do that,
so right here, under this gear icon,changes to whatever you would like, now the button
URL, change that also to whatever you'd like,but I just really want to change the button here,You know, you guys of course are not going
to have this text right here, of product feature.This is just all for tutorial purposes.So, I'm just going to just simply
kind of change this up a little bit.You know, I don't want to go too much into this,
'cause we've been talking about this, again.And for the button styles, I'm going
to change this to text color black.Oopsand I just want to change the button
border width, oh no, not that.I want to change the radius.So it looks like that, okay?So, now instead of actually doing this all over again,
I'm simply just going to go ahead and duplicate this.Delete this, and simply delete that, there we go,
and then simply drag this over here.So, we don't have to spend all of that time, you know,
editing it and messing around with it,now a quick way just to fix this, so, you guys
see right here that this is on the left side,we want to change that, so simply
just put on the right side alignment.So, scrolling down here,text orientation, we can do right side,
or we can even do justified,whatever you know,
are trying to achieve,but of course, I just want to do it on
the right side, so it looks consistent.So, now we want to go ahead
and add in some images.So closing this, click on this and
I'm going to select an image.Go ahead and find
the image module,I think I passed it, I do that a lot,
I really, it's bad.And we're going to go ahead and add in just like
one of these basic images, like that, okay?So over here, image URL, I'm going
to go ahead and add in,You know I don't think I added that girl in the background,
no I did not, so I'll make sure to update that.So, I didn't add that other girl, but I'll add
her in the drop box, don't worry.So, I'm going to click on this, and then click close.
Now same thing right here, I'm just gonna close this.Click on that and add in a button module.
Really, really simple stuff.Alright. And then I'll go ahead and add in something
that looks like that right there, okay?All right. Good perfect. So now
we have this section right here.Now, if you guys have noticed right here,
I actually kind of pushed this down a little bit,so I want to teach you a little
bit more about padding.So, right here, in this gear icon, let's say you
want to position this somewhere differently.And you're gonna come across that a lot,
when you're decorating your website.So, on the design, you can do it a few ways,
you can change the margin or the padding.So, the padding you want
to change it to like 300 pixels you can see that's creating
a lot of space right here,but maybe you just want to add 150 pixels,
maybe a little bit more, you know orif you want to go for that approach you
can do that, but I'm going to go 100 pixels.Now, you can also do percentage. So, for example,
you can do something like 10%,and that would work as well, but I actually
want to use pixels, for this.And then, maybe, maybe we should change the size
of the font, it's a little small, we can make it a bit bigger.And then also for this section
right here, as well, font size.Okay.So, we have this going
and we have this going.Now, same thing right here applies,
we can do the same thing, buthow did I get this glow around
everything like that?See you all have that dual glow? So I'm going to open up
this builder and show you exactly how I did it.So, instead of actually using it for the modules, I actually
use it for this row right here, so the green row.So, under the row settings, under CSS you're gonna see
that I put the main element on the actual row itself,so we don't have to use it for
you know the modules guys,we can actually use it for
an outline of the entire row.You guys can see,
that's all I did right there.So, over here, going scrolling back up,
I did it for the main elements, all right?So, over here, same thing, click on this
gear icon and CSS, and main elements.So, if you want to achieve that look,
then that is exactly how you do it.Now, I bet you're wondering, well,
how did you get the secondary glow?You know, there's two glows right here,
how did you achieve that look?Well, I decided just to put that
around the specific image.So, it's creating like
a dual glow effect.So, over here, under this gear icon, the CSS, same thing,
main elements, but this is just for the image module.Now, guys, one more thing
that I want to remember,that if you don't want this on your website,
the glow, you don't have to have it.However, it's just a really unique style
for your website and it adds a lot of décor.So, I felt that I was going
to add it in this tutorial,so over here, under my image module,
right here, main element, paste it, done.So, now that we have that, now you
guys can see that we have space.Now you see on this module right here,
how I can kind of drag it upto get rid of that space, and same
thing right here, drag it up.Now, a shortcut way I can
do this, is just to justYou know just duplicate the entire module
so I can just go ahead and delete this,And so you know what? I'm just going
to duplicate this entire row again,and I'm just gonna actually
switch these around,so I'm gonna put this on this side, and I'm
gonna take this and put it on the other side.So it's gonna save you a ton of time, you don't
have to spend time, you know, editing stuff,And it'll, it's easy, so whenever there's something
that can make your life easier, guys, just do it.So, over here we need to just basically
change this orientation to the right side.And again, we can go ahead and you know, you know,
that's basically it, of this section right here.Now, one thing I also want to point out, that maybe
you want to get rid of all this stuff right here?Now, there is a module right here
that is here, but you can't see it,so I want to show you what
happens when this happens.So, this might be a text module, or it might be something,
I don't really know, so it's a divider module.I don't know how it got there,
but I'm glad it showed up.Now, I'm going to go to edit page and this is the first
time I'm going to show you the back end editor.Now in the future Divi is actually going to put this
on the front page, so you won't have to do this anymore.So, you can see right here,
how it says divider?So, you see the modules right here, we have
an image, a call to action, and we have a divider.So, this is the reason why you can see that it doesn't
really look well. It's kind of, it's messing us up.So, let's go ahead and just view the page
and let's go ahead and fix that now.All right, so over here,
this one looks good,and over here I'm going to delete
that icon right there,then you guys can see, now it's actually
kind of looking a little bit better.Now, let's say you want to kind of
like have this perfect aligned,well we can actually go ahead and
just you know, use the gutter width,so you guys remember
the gutter width?So, under the row settings, we can just simply
go to gutter width, and we can reduce that all the way,and if I were to reduce this one all the way
as well, it will be perfectly aligned.But I kind of don't want to do that,
'cause it's really scrunched.And it'll cause me to do
a lot of other things.So, you know, if you guys want to go ahead and mess
around with these settings of your row, you can do that.I'm just basically letting you guys know what you
guys can do, get customizable with, etcetera.So, that's exactly how you achieve this sort of style
effect, now the CSS really adds to the website, guys.So, you know, if you guys have the time,
you know, just you know, go look, you know,learn new commands or learn about
like you know other things you can do.There's a lot of different CSS,
like creating arcs on your websites,so it want that arc-y style,
that's another thing you can do.But if you're brand new to WordPress,
I would not worry about it,if you've been around for a while,
you're watching this tutorial,Then I would recommend
to check it out.So, you guys can see we've basically
done the same exact thing right here,except I added this other sectionand all's we can do is just go ahead and
duplicate this row to achieve that look.I duplicated the row, now I'm going to go
ahead and drag it down below this one.And there you go,
so everything is all set, okay?Now, let's go ahead and add in the last one,
right here. So, the last one, again,is I want you to look at this
and understand what it is, it's just a call to action module
with a background, that's it.And I just added the background, so right here,
I'm going to click on this plus icon,regular,the big row right here.And simply just grab the call to action,put in something,
what did I put right here?So, sign up today
for the instant access. For the…now do like sign up.And then, for background color, we're not going
to put anything, I'm just going to put clear.And scroll down here, for text color, we just
need to do dark for now, so we can see it.And then, of course right here, you can go ahead
and add in some you know some dummy text orwhatever you want right here.
So, I'm just going to put in some text.And then of course, under the design,
remember you can change everything?So, I'm going for that same
fonts on my entire website,and also the button style,
you can change that as well.But I don't want to do that, because I've showed
you guys how to do that a few times.And in order to get that background,
remember the blue section? Section settings,and you know background image, now you
can also add in the video for these sections.So, I want to you know remind you that you can
do that, so I'm going to go ahead and do that.If you need the videos, like the free
ones you can go to vidivo.netand you have something that looks
like this, right here instead.So, it really just depends on how customizable
you want to get with your website.And you know, different themes
you can do with it, andyeah, that's pretty straightforward,
that's pretty standard.But right here, I'm going to enable the parallax effect
and I'm just going to add in a background image.And we're just going to go
ahead and use the image.I don't want the video
for this section.Okay? So something
that looks like that.And again, remember you can change
the button to whatever you would like, okay?So, over here I'm going to go to this
plus icon, and go to save.Now, one more thing I'm going to show you,
is how to actually save certain parts of your work.So, right here, we have this big,
blue section with all these girls.Now, it would be a pain in the butt to redo
everything and on another page,like for example, you're designing
this for somebody and he says,“Hey, can you do this all over
again on another page?”You're gonna say,
“Dude, that's a lot of work.”Not worry, don't worry about it. You guys
can actually save this entire section.So, right here you have this
little save section to library.So I'm going to click on that
and I'm just going to do test.And I'll click on save to library,
there you go, saved to the library.So, there's a lot of different ways
you guys can add it, so over hereso over here, on this plus,
new icon later on in this tutorialI might introduce you to something
like pre-made layouts.So, right here it says
add from library.So, if I click on test, there you go,
everything is there all over again.And it's just really, really clean,
it's such a fast way to work,so a lot of other themes
don't have this, guys,so you know, other themes they have to work
from scratch all over again, I'm just like,“Dude, I would never work with those themes.”
So, this is a really, really easy theme,it's just it's just so easy
what you can do with it.All right, so now that we've done this
section right here, the what's hot section.We're going to go
ahead and do our blog.So, if you want to go ahead
and blog, which you should,because blogging is very good for
SEO getting ranked, getting found,I'm going to show you
how to add in your blog.So we actually forgot
to create the blog page,so over here, under plus
new we can click on page, and let's go ahead now
and create our blog page.So, all's you need to do is go
right here, and put in blogor whatever you want to name your
page, and simply click on publish.Now, again, if you remember, if you want to add this
to the menu, you'll need to go to appearance,and go to menus and you'll need to go
ahead and add in this page now,to our current menu, so pages, view all,
click on blog and add that to the menu.So, maybe I want to drag it
up over here, like that?There we go, I like that,
that's good, that's good. All right, so going back
over here to visit site.Now, all we need to do right
here is go to blog,now, we can design our page first, but we don't have
any blog posts, so we need to first create a blog post,so in order to do that, you guys can
go to plus new, and go to post.So, this is basically where you know,
you talk about whatever you like to talk about,so over here under the blog, I'm going to give
you guys an example of what I put.Like how to get him to like you, or is blonde hair in?
Now, guys, one thing that I want to point out,that my YouTube channel actually 20 different places
you guys can list your e-commerce website,so after this tutorial, you know, I would definitely watch it and I have
a lot of other e-commerce tutorials,a lot of people ask me questions, I'm like you know,
I actually have a tutorial for it, it's there,so right here I'll do something like best
or 20 best websites to list products.And then, right here I'll just put some, I'll just go ahead and grab some dummy
text from one of these things right here.All right, I'm going to copy
and go to paste.Now, you can also use the Divi builder,now on my website, I do have something called blog
pre-made layouts and that's from Elegant Themes,and it's basically a pre-made blog page,
and if you guys go to Darrylwilson.com,under my blog you guys will see
exactly what I'm talking about,In fact I'll just show you guys,
right now. While we're here.So, that is like the standard way
to build a blog, but with Diviyou can actually get a little bit
more customizable with it.So, right here, I'm going
to click on this,actually, no it's under this one,
let's see which one I did it for.I did it for this one right here.So you guys can see the blog post
looks a little bit more professional.Looks really, really good.So I actually used a pre-made layout
from Elegant Themes to create this.So if you guys want something
that looks just like this right here,you guys can go to my Divi
child themes, Divi layouts.And I have a lot
of free layouts.So scrolling down here,
these are all free layoutsand they're basically just pre-made
websites for everybody so,If you want like a free website
and you can make right awayyou can just go ahead and download one
of these templates and just simply upload it.And I have a tutorial on that as well,
on how to upload these.It's really simple.It takes about two minutes, and I also
have premium ones which I make people,you know, pay for so, yeah.
But anyways.So going back over here,
I added this post in right here,and maybe I want to add in
like a featured image.Now the featured image
is this right here.So, this right here is the title, featured image
and then you have the post stuff right here.And don't worry about all the stuff
right here on the right side.This is very similar to the footer except we're
just going to apply it to the sidebar, okay.We'll talk about this a little
bit later into the tutorial.As far as the Subscription and
the Monarch plugin, it's over here.I have what I would like and I think
I'm ready, you know, to post it.So, going down here, I'm gonna
go ahead and set a Featured Image,and I'm going to select
this girl right here.Tags, I'll put something like news or something,
or whatever tags you would like.You can also categorize this. So,just like we had the Shop module
where you can categorize products,you can do the same
exact thing for blogging.So if you have like a website
that's just about blogging,you can sort of categorize those topics
so it shows up on certain parts of your website,and on others it will show up
on different parts.So, right here I'll put something like girlie,
or girl, girl talk, girl talk, yeah, girl talkand add that category.And it looks like right here
we are ready to go,So I'm going to go ahead
and publish this.Okay, so I basically
created our post.Now we need to actually
apply it to our website.So I'm gonna go back to our
websites, go to our blog.Now I'm going to enable
the visual builder.And you guys can see right
here on this other website.So this right here is just a text
module with a backgroundand then I just put in
the blog module.All right. So I'm gonna go
over all that right now.Over here I'm clicking
on this plus icon.I'm simply just going to go ahead and
add in a text module with a background.Just to let people know it's like,
“Hey, this is our blog.”So our blog,and the design, we can,
you know, change that.We can make the font
a little bit bigger.Or the… I'm sorry,
this is the text font.So text font, make it
a little bit bigger.Then you know, you can always add
in like a background image to thisBut we're not gonna… we're not gonna do it
for that section. We're gonna apply it…we can actually apply it to this entire
background right here in the row settings.But, you know, you get the idea.
So our blog,and… see right here,
we can choose to,you know, design it to whatever
you guys would like.So something like that, or you can
change the color to something.So just be creative, you know, this is just an example
of how to like introduce like your blog.But I'll just go ahead and
leave it like that right here.So, I just basically put in like a dark background.
Like small, simple blog.Now, over here under this plus icon…
now you can actually use it in the same row,or you can just make
in a whole other one.So, I'm just gonna make a whole
other one just for tutorial purposes,and click on regular.
Now, I want this one right here.Now right here you're gonna scroll down and
we're actually just going to grab the blog module.And what this does is that it automatically
uploads all of your posts right here.Now there's two layouts.So we have this one right here,
which we have the featured image.And then it just like talks about it.
Like the best websites to list products.And then you see it has a little bit of talk.
Now, this right here is a stock post.So this post comes automatic
with Siteground;when you install so you don't have
to have that. You can always delete it.So, right here under this gear icon,
you can click on it.Now, of course, you can, you know,
include the categories we talked about.And we can decide to show
the featured image.If you don't want the featured image,
you can hide that.You can show the excerpt
or show the entire content.So the difference between both is,
excerpt is just basicallyA small preview of it and then it
has like the read more button,which we can enable right here.
And the other one just lists all of the content.So now you guys can see right here it has like
the 20 best websites and it has the read more.And you can, you know, decide to hide
the author or hide the datesand, go through all these settings.
You know, these are pretty self-explanatory.It's really up to you now, we can
also have like an icon overlay,so if they hover over it,
it has that like that different color.Now, depending on your, your, you know,
your style going forward.You know, you might…
this might be necessary,but for me I just feel that
the icon overlay is excessive.It's too much for this.
And the same thing, guys,under design you can decide
to change all of the fonts for this.You can choose the header.
Now, the great part about this, guys,is that a lot of other themes,
they don't have this option, you know.It's basically like a template, you know.You use another theme and that's it,
you know. You can't change anything.So, there's a lot of different ways
you can customize your blog page.Now, under the layout we can also do grid.
Now, I actually did grid right here.So right here we have just an image a
nd some content right here and that's it.And you can choose like how many posts
you want to talk about or you know,all that good stuff.So right here I'm gonna click
on this Save Changes,click on this and then
I'm gonna click on Save.Now, I want to show you how to delete
this post without having to use this module.Now, I can just click on this trashcan and delete,
but I actually want to show you the Dashboard.Go to Posts. Now these are
where all your posts are.So right here we have 20 best websites,
aand then we have this one right here,which we can just go ahead and trash or we
can just go ahead and edit it instead, you know.I can make it something else.So, “Why is Siteground good?”And then right here I can simply
just add it to the category.You know, you can change the text
and I can set a featured image to this.And maybe I'll put something likeI'll just put this girl.Actually, that's a really bad title with
this girl. I'll put something like,”Why girls don't wear shoes anymore?”
Now that's a good one.A lot of those posts you guys
see are just like clickbait.Like they're just… they're not
really true or relevant.They're just trying to get you to click on it 'cause
they want as much ad revenue as possible.So right here under these edits,
we're actually gonna change the permalinks.So, this doesn't make sense, you know.It says, you know, “Why don't girls
wear shoes anymore?”and you see the permalink is WordPress resources
at Siteground. We need to change that.So if you wanna change that just do like,
“Girls don't wear shoes.”Now, this is more for SEO purposes,
but I'm just showing youhow you can basically change your
permalinks in case that happens.And I'm gonna go ahead
and just update this.All right, now I'm gonna add one more,
just for tutorial purposesto show you three posts in a row.So I'm just gonna simply just go ahead and just,
you know, steal some content right here.And you don't have to follow me. I'm just,
you know, creating a post just to help you guys out.”Why blonde hair is in.”And scrolling down here,
we'll add this to the category.I'll set a featured image right here.We'll go ahead and do something
like this one right here.And, yeah, I think that's it for,
you know, this post.It's not much… there's not much to it.You know, it's really self-explanatory.So let's go ahead and view
the blog page now.So right here I'm gonna go to my blog.So now we have this right here.Now, right here you see the category.Now we can choose to hide that
as well 'cause it's kind of annoying.We don't really want that to show up
on every single one right there.So, let's go ahead now and customize this.Let's make it look how I have it on this section.So, right here you can see I centered the textand I actually put in the glow around these images.So, maybe you remember how
to do that, maybe you don't.I'm gonna go ahead and run you through.If you decide to use the blog page
and you want to change it up,'cause by default it doesn't look that good
but we can make it look a little bit better.So again, gear icon, we go to my CSS.Now the title, I want to center that.So you guys can see text,
dash align, center etc.All right, so I'm gonna go ahead and copy
that and just put that on my title.Okay. And you can do it
for anything, you know.You can do it for your categories,
you can do it for anything. So, the title.Now you can see that all this goes up.So post meta, you can go ahead
and put it for everything right here.And the featured image, of course, it's already
centered, and also the Read More button.We wanna go ahead and align that. Oh, that actually
won't align because that's at the end of the content.So, you know, that's basically, you know,a quick rundown of how you can do that.Now, the featured image, we can sort of add
that glow around the featured image as well.So again, I'mma go over here to my content.And also, guys, remember this is
all in the description. All these codes,everything that you need
is in the description.So, featured image.
So it's pretty self-explanatory.So, the featured image controls
this section right hereand all they need to do is just
paste it in there and, voilà.So now we have this
showing up right there.Now I bet you guys are wondering,
you know, why is this a little bit different?And that's just because I decided
to add in a gray background.So there you go.Now it looks a little bit different,
and our blog page looks really really good.And you might want to, you know,
edit this or change it, or, you know,whatever you want to do.
You can go ahead and change it.Content, show excerpts.We don't want the categories to show up
because I think that looks a little ugly.I think that looks good just
like that right there, okay?So that is basically how you can put the blog
page or the blog module on any page you want.So if you want it on your About Us section,
even if you want it on your front-page section,that's a very good way to sort of
put it anywhere but,I decided just to put it on my
blog page. Now, by defaultif you choose to use like
the default WordPress one,I'll show you how to use it,
but you probably never will.So it's for other themes that
don't have this advantageover here under the Theme Customizer.Now, this is just for
educational purposes.You don't need to follow me here.Under the static front page where it says
Post Page, you would select a page.And basically, the default with WordPress
would just basically put those pages there.But we have modules and we have
a lot of more customization,So we don't need to follow the standard WordPress,
you know, way they do it.We can actually just create our own and make it,
and decorate it to however we want it.I mean, this looks much better than the default
one that comes with WordPress.All right, so that's about it.
We've actually created our blog page.Really, really simple stuff guys.
You know, it wasn't too hard.And you know blogging is a really great
way to keep your company alive.To tell them, “Hey guys.
You know, we're blogging.You know, come look at it,
come talk to us, etc.”So the next section we're going to talk
about is the Contact Us section,where people will be able
to send you an email.They can fill out a form and it will
go directly to your email box.So all we really need for this page
is just one simple plugin.It will automatically create everything.So let's go on over here to our Dashboard,
and we are going to install a plugin.So Plugins, Add New, and we are going
to install the Caldera forms.Now in the past, you guys have seen
my other tutorials, I've recommendedThe Contact Form 7 plugin. However,that's had a lot of issues
in the past three to six months.And me and, you know,
all of my other partners,we've kind of just walked away from
the plugin because it was just so inconsistent.So right here, Caldera Forms,
just click on Install Now,and when it's done click on Activate.
So we're going to basically create this form right here.So right here we have the First name,
Last name, Email address.I'll show you also how you can add like
a telephone number in and make it required.So going over here,I'mma go to the plugin now,
Caldera Forms.Now on the left side right here just
click on Caldera Forms, okay?And we're just going to make a new form.Now, if you guys are brand new to this,a little plugin might have come up
and it said like,”Hey, you know if you wanna learn more
about it, you know, click here for a guide.” You're more than welcome
to do that, guys, becauseIn this tutorial I can't go over all
of the options forCaldera Forms because it's so big, and there's
just so much you can do with it, you know.Even for this tutorial, I can't cover every single
module because it's just too much to cover.But right here I'm gonna
go to New Form.And there's different, you know,
templates they have.Now, I want you guys to actually
just grab the regular contact form.These ones are a little bit more
advanced like, you know, booking,and they have like the Check in/Check out date.But Caldera Forms is really
incredible what it can do.So right here, the contact form.
Now just go ahead and give your form a name.So I'm gonna put… I'll put, I don't know, The regular.
I don't know why I thought of that.So, The regular. And go to Caldera Form…
or Create a form.All right, so right here we have your details.
First name, Last name, Email address,How can we help, and Questions.So, it's basically created
everything for us.Now if you wanna edit this,
so right here on this right side.It's here, it says, Your details.
You can put something here like,”Shoot us an email,”
or something like that.So, “Shoot us an email.”Shoot us email, it's really hard
to type when I'm on mic right hereSo it's why I kind of like
mess up and stuff so,You're like, “This guy's
a really bad typer.”It's like no, I'm actually really fast. I just have
a mic in front me. It's kind of hard to do that.So right here I have,
“Shoot us an email.”And if you want to change
this text right here,just simply go ahead
and change this.Now, let's just say you want
to add in something new.Let's say you wanna add in
a new section right here.So right here we can do something
like clicking on this plus icon,and you can go ahead and
add in all of these modules.So, guys, I remember I told you it is
kind of hard to talk about every single one.But for example, I'm just gonna do like
the phone number basic right here.Now over here we're gonna put something like,
you know, your phone, or phone number.That's like this slang we do. I'll just…
I'll write it out, you know, I'll write it out, you know.There we go, the number.So we have this [inaudible] right there, the condition.
We're just gonna go and leave that.Now, I wanna make this required
so I'm gonna say, I want this required.So, when I put required I'm basically
saying I really want them to,You know, put in the phone number
because I just want that, you know.I really choose to have that information.So, I'm going to leave that as a required,and then here you can do
like Local or Custom.So that's basically a way
how you guys can add it.Now, another way you can add it,is by simply clicking on this right
here and then clicking on Add a field,and then dragging it down to this box.And it's gonna ask you
the same exact thing so,feel free to like kind of like
mess around with this, guys.And also there's like a file right here
where people can upload their files.There's like e-commerce stuff
like credit cards.There's all sorts of really,
really cool stuff.And I recommend checking
out their tutorials, guys,because I haven't even tried
their e-commerce one yet.I have no idea about it,
I've never really integrated thaton a contact form but that looks
interesting, so, you know,you might want to check that out.So right here I'm gonna do Phone
number right here again.And like I said you can go ahead and
just put in something like, you know,I'll just put in phone number.Okay. And then right here,You know, we can just go ahead and like,
you know, drag this up to where we want it to be.Maybe you want it right here, and of course
you guys can make it required, okay.So if you guys are looking for something
like this, Caldera Forms can do that.Now, let's take this section right here.You know maybe we, you don't want to have this
section anymore because we already have it.Simply go down over here
and just delete the field,And there you go.So right here we have, Shoot us an email, First name,
Last name, our Phone number, our Questions.So I'm gonna go ahead
and save this form now.So I'm gonna go and save it.
Now, one more thing.You're gonna go to Form settings right here
and right here we have the Form name.We have the Shortcode,
which is what we need for this.And you guys can go ahead and like
mess with these settings, like, you know,when they send the email like
what will it say? Will it say, “Cool, thank you,” or something?So right here just put like what
you would like it to say to them so,So, “It's been submitted.
Thank you very much.”And all this other stuff is a little bit more technical
so you don't need to really mess with this.Now over here under the Email,
make sure that you have your email right here.And also when you get the email,
this right here will be your response,Or it will be from the website so make
sure you put your website.com.Because you may…
you wanna like, you know,make sure that you know it's
coming from that website.So put like puppyplanet.com or something,
or whatever your e-commerce store is.Put your domain there or something to help
you remember that it's coming from the…your website, all right.So, I'm gonna go ahead and
go to save form now.And now I'm gonna go ahead and place
this shortcode on to our Contact us page.So right here I'm gonna go
to enable the visual builder.I'mma go to this plus, and I'm gonna
grab the text module and paste it right there.And it's calibrating, and voilà,
we have a beautiful contact form.Now, I kind of wanna change the background right here.
So the background color,I'm gonna change it
just a little bit.And there you go. So we have
a very nice contact form.First name, Last name, Email address,
Phone number. Questions, Comments etc, okay.So, basically we set up a contact form,
guys. It was really, really simple.These will all go directly
to your email inbox,'cause I've used a lot in the past
and it took me a whileto find a very good and very reliable contact
form so I recommend the Caldera Forms.So the next thing that
we're going to do now isWe are actually going to go
back to the front pageand we're gonna mess a little
bit with the CSS features.So I also want to let you guys know
that you guys are actually doingreally, really well if you've
made it this far.You know, we've actually touched
base on almost everything.You know, we're designing the homepage,
we're creating some products,we're learning a little bit of CSS.And the important stuff
will come a little bit later,such as the WooCommerce settings.So just bear with me and let's keep going,
and we'll crack one thing at a time.So the next thing I want you guys
to do is go to your front pageand I wanna show you how to actually
design it just a little bit nicer.So right here you can see that we
have these glows around everything.I have this shadow right here. You can see
I have the glow around the product as well.And scrolling down here I also have
the shadow right here around this box.Now, this might look
like nothing, you know.You might not even notice it,
but when you're actuallyvisiting a website for the very first time
it just looks bland, you know.Compared to this right here,
we have a much better odds ofpeople clicking on our stuff, because
this looks nicer and this doesn't.So I want you guys
to be able to succeed.And, guys, really, honestly, a lot of these
images and a lot of these like sales that you getare just from images, guys.It's just from positioning and appealing
to the human eye, that's it.People actually don't really focus
too much on your product.So right here, we click
on Enable visual builder.And I'm gonna show you guys the CSS that
you need if you want to accomplish this look.Now, remember, this is totally optional.You do not have to do this, but if you want
a little bit more for your website,and you wanna get a little bit more decorative,
I'm going to show you what you need to put.So right here is the Main Element
and I'm gonna simply copy this.Now, this is also in the description.You just need to simply copy it and just put it in your
module in the CSS in the Main Element.So going over here, I'mma scroll down
and I'm gonna grab this one right here.CSS, Main Element,
and just paste it in there.Now, remember, if you want
to change the color,earlier we talked about all you
need to do is find the codeand simply just change it
to whatever you like.Now you guys can get as you know,
as customizable with these shadows as you want.You can even put it over here
under your Call To Action.So right here I can put it over the same thing,
but I probably might not want to.That might be just a little bit
too much, you can see.So, you know, I actually don't wanna add that,
so I'm not going to add that in.It's a little bit too much.Okay, so over here, same thing.You go to this image, you can go to CSS,
you can put in the Main Element.And this is a much better presentation
than just having blank images, you know.That glow really affects sales.You know people will actually determine to buy
something just because of a few colors.It's really how e-commerce works.Trust me, I've been doing it for
awhile and it's really funnywhat makes sales and
what doesn't, you know.So scrolling down here.
Now we have this next section right here.So I've actually added a different
shadow to that one.So right here I'm gonna click on the settings and I'm
gonna show you exactly what I did under the CSS.We're gonna go ahead and
scroll down right here.Oh, I'm sorry. It's under this box.
So under the actual row,Under the CSS,
I'm gonna scroll down.And I actually used this right here.So basically I just created a border
and I created a box shadow.So you guys can actually go ahead
and just take this script,Copy it and put it in your, in your, in your…
what's it called? In your row.So, remember, this must be in your
green row right here, okay?So you're going over here, you can click
on that, CSS, and simply paste this.There you go. So now we have that
same border shadow. And remember,these pixels are basically just the space.So, you know, we have 20 pixels,
20 pixels, 20 pixels,qnd then right here is the color.
So that's all I'm doing right there.So if you guys wanna go ahead and change
that to something that looks like this,you guys are more than
welcome to do that.Now you see right here under this border
right here, there's that shadow.So that is what the box
shadow is for, okay?So if you wanna achieve that look,
that is exactly how you do it, okay?So, yeah, that's basically it for that section.Now, I will talk more
about the divider.The divider I feel that it can be very
confusing to a lot of people.I'm going over here to the divider.I'mma go to the CSS.
Let's scroll down.Now, all you need to do is
simply just say, the width,I want it 70 pixels and
the margin means auto.Now, guys, this is totally optional.
This is a little bit more advanced.So if you're brand new to WordPresss,
it might be just a little complicated.But if you've been around WordPress for awhile,
you wanna know how to do this stuff,it's very simple, guys.
It's very, very easy.Now for the width, you can
change it to semthing like 100.You're just controlling the width of it
and you're saying,”I want the width to be 100 pixels.”
And margin,the auto control basically says,
“I want it in the middle, okay?”So that's all I did right there.All right, so let's go ahead and save our
progress right here before we keep going.Now, for this section right here,
I bet you guys already know what I did.So going over here, I just basically took those same
commands and I just put it over here instead.So going over here. Now, first off,
how do I make it look like this right here?This looks much better
than this right here.Now, you see right here where we have two images?
That's only because I enabled the visual builder.But on how people will actually see it,
it will look just like this right here.So it will not have that… it won't
have that double image look, okay?So right here under the… I'mma go ahead
and enable this again just to show you guys,and compare and constrast.I'm gonna show you
exactly what I did.Now going over here, I'm gonna click
on this gear icon and go to the CSS.And scrolling down right here.Now what I did right here was
I aligned the text to the center.You guys can see right here earlier
we did that with the profile, remember?So I just align the text center and
I just gave it a box shadow.That's all I did for that. So that is
basically how I achieved that look.Now, scrolling down here,
I added an overlay as well.So you guys can see right
here I have this overlayon the box shadow as well.So let's go ahead and
put this in one by one.So for the products, I'm gonna go ahead
and goes to our Shop Settings right here.And I believe I put it
in the Products section.Now, another thing I wanna
show you guys thatif you guys have issues with
this or if this is not working,ask Elegant Themes to give you
the correct code and it will work.Now, this is the correct code.
But, guys, if you're missing a single space,if you're missing a single period,
if you're missing a hair, it will not work.It must be exact. So make sure
that the code is correct.And again, I will put this in a blog
post on my website.You can always refer back to it if
you wanna achieve this sort of likelook right here we've got going on.So right there you can see that I have
the text aligned to the centerand I added this beautiful
little shadow behind it.But I've also added something else.I've actually added the overlay
image right here.So I'm going to take this, and I'm just gonna
simply go ahead and go over here to Overlay,and add that in right there.So after we've entered that in, you're going to notice
that you're going to see this glow. However,you guys will still need to enter
a piece of CSS intothe Theme customizer because on some
webhosting servers, this does not work.So this is another webhosting company,
and right here are the products.Now, if I hover over it you're going
to see that it does not work.So you guys can go
to my blog right here,and I have actually a post right here.
I'll go ahead and click on my blog andshow you guys exactly which it is.So this one right here, “How to make
an e-commerce website with WordPress.”I'm gonna click on that.And you know all the CSS
guides is in here.So if you wanna achieve
this really nice glow effectsor get customizable, all the codes are here.If you do not want it then just simply…
just hang it.So scrolling down here.
Now right here it says,”These next two must be placed
in the theme customizer.”So all you need to do is simply
go ahead and copy this right here.Just like that. Just like I've done it
right here, and copy that.Now, this is my other website.And this is on a different
webhosting company.So I'm gonna go ahead and just
paste it in here just to give you guysan example of how it
doesn't work right now,and then how it will work
when I enter in the CSS.So we're going over here.
I'mma go to my Dashboard.And I'mma go to Divi and then
go to Theme Options.So scrolling down here.All I need to do, guys, is simply just go
ahead and just paste this code right there.That's it. That's all you need to do.
So now I'm just gonna click on Save Changes.And then I'm gonna go over
here and go to Visit Site.Now this was my demo website,
and this is on a different webhosting company.And now as you guys can see
I'mma go ahead and scroll down.And now you see the glow is there.So if you're using my recommended hostingon this tutorial you may or may not need to,but I'm just gonna tell you
just to do it anyways.So right now if I go
click on this and Saveand I'm gonna go ahead
and exit the visual builder.If I scroll down right here,
you're gonna see that it does work.But for some hosting providers,
it may or may not work.So just to be on the safe side,
I want you guys to do it anyways.So you can go to your Dahsboard, Divi,
Theme options, and then simply scroll down.And again right here
I've entered in the code.However, if I delete it and I go
ahead and Save Changes,on my server for this current
hosting company it will still work.So I'm just, you know, showing you that
for some webhosting companiesit may or may not work.
So just to be safe,Go to my website and enter that inBecause I know everybody not might
be using my recommended hosting.And that is how you
would fix that issue.Now another thing I wanna point
out that if you guys wannadecorate this and make it look
really cute and nice,so however you want to do that, you guys
can go right here to your gear settingsand go to Design tab.Now here you have the Sale Badge Color,which controls this section right here.I can go ahead and change it
to like, black.The icon hover color, the overlaid
color we can go ahead and change thatso right now we have that like,
kind of like that faded look to it.But we can go ahead and change that to
anything we’d want to something like blue,and the icon color which is like purple.So, you go over it and now you
see that it changes colors.You guys can simply go through
this and mess around that;of course, that looks really ugly,
and I don't recommend that you do that.But you know, depending on your website,
guys, there’s always a need for something.You know, there is really a need
for something all the time.So, I understand even though it looks tacky,
some businesses might need that.So right here we can change the title
font to something else,so anything we want, but we want to keep
a Poppyont Able and scrolling down right here,we are able to control the font size,and again we can change the title
text color right there.We can also change the letter spacing
right here, so maybe, maybe one is good.And right here we can go ahead and
change the price font or something else,so you can go ahead and
have fun with that.And again, you know, these are all
very self-explanatory, guys,so I'm just letting you know that this
is where you would go to changethe sharp settings and
everything else. Okay.So basically, out of this part in the video,because I asked to test it on different servers,and some of them worked but just entering
that CSO skies, and then it will work fine.Now how did I achieve this look?
How did they make it look like this?Well, all they really did was make the row
full width and I just made more space.So right here we could go to this icon,
we make this full width,now we can also mess
with the gutter settings.So earlier we talk about
the gutter settings.You can see now that the gutter
settings is getting a little bit bigger.If you want it like that, you can do it like that.If not, you can go ahead and leave it like that.So that right there looks a little bit better
than what we had before.And again, right here we can click on…
exit the visual builderand it looks very similar to
what we have right here.So these do look a little bit smaller and
that's because just probably the image sizebut not to worry, we'll go over
all that etcetera. Okay?So, showing you guys how to use this,
it's pretty simple, it's pretty straightforward.The next thing that we're going to do
is actually learn how to use our logo.I mentioned about a logo, so guys,
I've seen other tutorialswhere they give you like free
logo maker’s guide.So, if you're really serious about ecommerce,
if you're really serious about a business,just get a logo, you know,
pay someone to do it.And I‘d actually got my logo from this website,
there’s a website called fiver.comand there is a link in the description
of this video,and it will actually take you to fiver.com.So, this website right hereand these guys will make beautiful
logos for just five dollars.So, for example, you're going
to type in logo up here,and simply go to one of these.Now guys, these guys produce
some really, really nice stuff.And for five dollars, you can get
a really nice looking logothat looks something like this right here.And your other alternative is just
to go to some free website,get like a stick figure logo,
that nobody would want.But if you guys are really
serious with your store,I would recommend these guys because
these guys provide some beautiful logosand for five bucks it's kind of a like
a really, really good deal.You know what, there's a lot
of work that goes into thisso I recommend going to fiver.com
to get your logo.And if you guys choose to use like the free
resource, you guys can always do that.But remember your logo makes you look more
professional and people will see your logo,they'll see the image like this right here
and they'll say, “Oh, that's a cool logo.Maybe this is really a professional store.
They get intrigued and they'll come and say,I’m gonna buy from that store now because these
little things here and there, like your images,your pictures, everything adds up.It really adds up and people
will buy based off images.Let's go ahead and go back
to our website right here.So, scroll down here. We have
added in the glow effects,now remember you can add that
to any module that you want, if you want to achieve that look.
Just remember to change that code.And the color you can find
on any module.So, for example, right here, I'll go to
the design, and scroll down right here,and we'll need to find the color,and this is really where we find
the color right here guys.So this little number right here,
whether you want to change it to the glow,it's going to be right here, okay.
So you would take that and put that for the glow.Okay. So that little number
right there okay.And ah. That’s about it for
that section guys,and the next section we're actually going
to go finally design our shop page.Oh, I’m sorry, one more thing;
let’s add that overlay right here too.We didn’t add it right here.
So over here, scrolling down,you can see I have a cool shadow.I did the same exact thing guys,
all I did was add that shadowand the reason is why is
because this looks boring.It looks nice, but we can
improve on it you know.And why not just do it, you know, like
there’s no reason to be lazy and not do it.So, scrolling down here I'm gonna
show you exactly what I put in that.So this little gear icon, the CSS and this
one, sorry… it’s the [inaudible] icon, whoopsies.So scroll down here, I did the same
exact thing guys,I just basically copied the same exact one for
this one and I did it for this one right here.It is the same exact code.Okay, and again you guys can go to my blog
or even ask Elgin Teams to provide youwith that code to make sure it's
exactly what you want. Okay?So, I put it in the main element.
Let's go ahead and do that.So right here under this icon… I'm gonna
click on the row settings, this teal setting,and go to CSS, and go to the main element
and simply paste that in there like that. Okay.Now the reason why it looks like that is we
have padding right here, we have space,so I just kinda want a, take it out,
and same thing right here on the bottom.Want to reduce that so we have that
little look right there of this section right here.So, It's kind of have that overshadow,
that’s really, really good.And of course, we have the same thing on top.And again also, you can also reduce the
padding right here to, you know doing that.And this section right here, there are
a lot of different ways we can do this.We could have just made a whole
different blue row right here,but instead I connected the blue row.So an alternative method would be
to create a whole other blue sectionto sort of get rid of the white section
right here. To get rid of some of it,I could have done that as well. But I think
you guys might be comfortable enoughfor the page boulder to sort of explore
different options with it.I'll leave that up to you, but this really
isn’t that big of a gap anyways.If there were like a lot of white, I would
say okay, we have to fix it,but that's acceptable. That amount
of white is acceptable,I mean from here to here that’s not too
much and we can reduce it even more,so I think that’s totally acceptable. So,
I'm going to click on this, and click on save.And that dark shadow is really is fun.
You can add it to different parts of your website,you can add them to a lot of different
places and it's really a fun piece of CSSor your website. So, I've been telling
you guys a little about the CSS,we've talked about this right here,
so these images don't flip over,so we're going to go over that and the
shop page which is the next section.A really quick before we go to the shop page,I want to actually introduce you to the
menu and also show you how to fix its logo.So, I told you where to get the logo,
right? Fiver.com,so if you want to change this logo,
there's a few ways you can do it.But I'm gonna go show you the correct way,
so right here you go to your dashboard,and we're gonna go down to Divi
and go to theme options.Now right here it's simple:
logo, upload, logo, upload.Now what's a favicon? Well,
you see on this top left right herewhere we have this little YouTube
symbol? That’s the favicon.So, if you want to change that for your website
which I recommend, because if you don't,it’s just going to give you the default one
that comes with your web hosting company.You will change it right here so I’m gonna
go ahead and show you how to do both.So here, logo upload, I’m going to select
the sun right here, and also for the favicon.Same thing, upload, and I'll choose
the Instagram one, you know.So, that’s favicon, and there you go.
So I'm gonna go down here.Also make sure to go to the settings,
you know if you choose to,you know mess around with the settings,
this is where you'll find a lot of the settingswhere people asking questions like,
“how you do this, how you do that?”that's exactly where it is.And also, they have a navigation,
but you know, all this stuff right here,guys, I truly would not mess with it because
the modules themselves can do a lot of this stuff.So, it's really not necessary to even mess
with some of these settings right here.And a lot of these are kind of outdated,so it's cool and let's go back to the site,
and cool, we got our logo right there.But really quickly, we don’t have our menu,
we really wanna change it.You know it's not appealing, I don't want
this whole, this white thing right here.I kind of wanna make it transparent.So, let's go ahead now and customize
the menu before we go to our shop page.So over here we go to theme customizer.And the great part about this is
that everything is like visual.You can see exactly what you're doing.So here under our header navigation,
you click on that, all controls the menu.So, we can have like two menus;
we can have the fourth header module as well.So, I'll talk about that after
we're done with this,cause I don’t want to jump all over place.So first we have to have our header format
and you can choose to have this like centered.You can choose to have it like center aligned
with the logo, or sliding or full screen.So, you see how if I click on this right here,
it's going to have it as full screen.So, there's a few different options
that you can have this with now.If I scroll down right here, we can choose to hide
the navigation until the scrolling is wellso we can do that as well, or you
can have it like that as well. Okay.So, I’m gonna leave it default for now.
Cause I'm going tocustomize this and I want to show
you on what I'm going to do.So, next is the primary menu bar.
So, this right here is the primary menu bar.Now we can make this full width,
we can hide the logo, we can use the max height,or we can kinda mess round with that.The logo max high I recommend always
just doing it like big. I like it big.I think the logo, we wanna extend
the logo as much as possible.Now the text size, again right where we can
make it bigger or we can just make it smaller.The letter spacing… now guys if you
notice, this looks very familiarbecause these are basically the same
exact settings in the modules,so we make it pretty much consistent,
kind of told you guys from the start,you guys learn the setting for one module,
you basically fit the entire website. Right?So right here font. So, I'm gonna do Able,
so how you pronounce it, A-B-L-E, AB-LE.I believe someone in the comments is gonna
be like, do you, you're saying it wrongthe entire time which is happened.So right here you have like
the font size, they style as well,so they'll be bold or you want to italicize.Now here you might want
to change the text color.Now that's really ugly. But that's would
be really good for like an organic storeor something like that.So, we're gonna make it a little bit bigger,
so we can see it a little bit more;and the text color I'm gonna
leave it as blackand right here you can control
the transparency of the text.So now you see it's really dark,
now over here it's fading away.Active link color. So, if someone clicks on this.
What color do you want the link color?You can even decorate that. If you don't
want a link color? A really quick wayto get past that is just to reduce it
all the way like that,and then when you click on it,
there will be no link color.Background color. Click on that,
I can scroll this all the way down toget a transparent color, so that
color is all the way down.ou see how the menu is fading away,and wallah, now I have that beautiful,
transparent style or I can just add in colorthat I want I can make it also transparent.
You see how it's a little transparent right there.So, this controls the transparency,
this controls the color on this other side,.Now I'm gonna leave it transparent,
because I kinda want that look.I think that the black with this
text matches everything else,I'm gonna leave it like that.Now the drop-down menu
background color…so right here we have the dropdown
menu background color.So right now, it's sort of transparent.But of course, you can change it
to anything you guys would like.So now you see it's purple, so you
can go to this, mess with that.Now also the dropdown
menu line color is well,so over here you see that
blue little line right there,that is what is the dropdown
menu line color.So, you can go ahead and change
that to whatever you want.And also, right here the dropdown
menu text color as well. Okay.So that's pretty self-explanatory. You know,
this is actually very easy to understandand as you can l see everything
live as you're doing it.Going back over here, now we
have a secondary menu bar.So, if you want a secondary menu bar,
which is the one above it,we need to actually activate it.So, going over here, I think it is
under the header elements,which is showing the social icons,
and right here you put like a phone number,7800 -58… then also your email,see you put besttutorial@gmail Okay.Now we can’t see it right now just because we
have to see them published in order to see it.So, we're gonna do that really quickly just to
show you guys about the secondary menu.Now we need to make sure the secondary
menu is, it's active.So here you see it active. So, let's
go ahead and close this really quick.And Voila! Now you see we have this
secondary menu right here. Okay.Now, the same thing applies if you want to
customize it, okay. So, theme customizer,and that is considered the secondary menu.So menus, I'm sorry, I had our navigation
a secondary menu bar and then right here,you know, you can go ahead and
decorate to whatever you want.You can change the background color,
you can see how up here's changing.Now if you guys sort of wanna move stuff
around, you could email Elegant Themesand get some custom CSS to position
it anywhere you want.But by default, and you know guys,
Elegant Themes have been announcingto really big changes, so there might
be changes in the future.I don’t know, but as of right now,
this is basically the default settings for it.You can make it like full width.Or you can mess around
all these settings.These are also the same exact settings
as the primary menus. I actually don't want,I really don't want this menu here so I’m
just gonna go ahead and delete everythingbecause I just choose not to have
a secondary menu. Okay.Just going over here to fix navigation elements.Now you guys can just kinda go through
these. It’s pretty kind of self-explanatory now.The fixed navigation guide is actually
when you scroll down.So, if you scroll down, you want to
make sure that the primary new barand the fixed are the same, because the
scroll down gonna look the same. Okay.So again, primary menu bar is basically
how it looks, fixed is when you scroll down.The secondary menu bar is the one
above it and the header elementsis just like the options inside
of the secondary menu.So, it's pretty easy to understand.Now since we're here, a lot of these
other gadgets and widgetsare just basically like a general settings.Like identity. Remember we talked
earlier about how you can changethe name of your website, so here, you can
do that right here, you can add a site icon.However, we don't really need to do that
cause we’ve already done that in the backend,but you can do it again. So right
here I’ll just select an imageand put the Instagram one
and you can position it.They’re gonna show you right here to see
what it would look like. You see that?So crop the image and going back.Now remember I told you earlier how some
of these contradict each other so we alreadybasically set this in the back end and
we just kinda did it again right there.So, but it's up to you whatever you
want to do, so layout settings,you can have a box layout which looks
like this or you can do a full width.Now, I gotta be honest.
Box setting is like 1990;a lot of sites don't do box setting anymore,
so you might not want to do that.Now the reason also that it looks like this
is because the screen is scrunched together.So, it only looks like that because
we enabled the box layoutand also because we're using
the theme customizer.So, you know you go ahead and check out.
Some of these settings guyson the left side is like, the layout
settings, background;a lot of these can be done with
the modules themselves,so I think it's not a good idea to design
your page from the theme customizer,So I would not recommend doing it.
So that's just my two cents,but it's your website so you guys can do
whatever you guys would want with it.So that’s about it for the menu
section and also the logo.So, let's go ahead now and
go to our shop page.Now, I actually made the active
link color transparent,so I need to change that
before we continue.So basically, when you click on it,
it turns invisible,so I need to actually give to give it a color.So, I’m gonna show you what I… but the mistake
I made was… okay, so today was my fault.So, header navigation, primary menu bar,
now the active link color,I wanna keep that the same, so black.And then go over here and make the
transparent color and then to save and publish.Okay, so that's basically,
why that was invisible. All right.But it was by default you get
a sharpie that looks like this,and we're lucky we have the Divi
theme because by default, guys,you can't edit the shop page; in fact,
even up here the visual builder is gone,so a lot of the themes that you get,
you can't customize the shop pageand if you don't want the way it looks,
tough me. That’s all you get.But with a DB theme, you can
create your own shop page.So I highly recommend that you do that
because this shop page is not appealing.People might not buy on it, or spend the time
to design it yourself and get sales, right?I mean, this doesn't look ideal.
Not even if you go to any website.This doesn't look that good, so let’s go on
over here to Plus New, and go to page,and we're gonna create a new shop page.So here I'm gonna do Shop page.We all just do shop and then we
activate use the visual that’s right here.Now a very big thing I want to recommend…now you must have a different promo
link than dash shop.So, this is okay or you can do something
like dash shop page.But if it's like this right here, Blue Commerce
will think that it is the same shop pageand Blue Commerce will actually
override the settingsand it will make it look like the ugly one.So you wanna make sure that
your permalink is different.So, Sharp page or sharp dash product
or sharp dash showcase or something.So, Sharpdashpage is my permalink. Okay.Now this can be the same title, that's okaybut the permalink must be different than
that sharp. I can't stress that enoughbecause Blue commerce will override
the setting because they thinkthat's it's actually the same sharp.So right here I'm gonna go to use
the visual builderand I'll just go ahead and design it.
Let’s go ahead and decorate it.Now, I'm gonna do exactly what I did
over here for the shop page.So really quickly I'm gonna
educate you guys,this right here is just a fourth module
and I just add some background and text.This right here we can do either a text or
a call to action, and reduce the paddingand we can make it full width.Right here we have a sharp module and
then over here we have a side bar module.And after we're done with
the products and everything,and the verbal products
and everything else,I'll show you actually how the subscribed
works and also the follow us.And also, this review thing right here,
don't worry about that.I'll talk about that in just a little bit.
I purposely left that there.So, let's go ahead and go to our shop
and we’re going to create the shop page.So first you click on this little plus
icon, and go to full width.Then we grab a full width header and,
you know, welcome to our shop,and then go crazy.Now remember a big tip, guys, is to always
capitalize the first letter of everything.I know in English, that's like F-F-F,
but here it's A-A-A, so,that’s what everybody does on the internet.That's what makes sales.All right. Also, right here, we can design it,
we can do something likechange the title fonts, or whatever else,
or you know, all this stuff right here.I think it actually changes to white up here.
Yes, so white was a little bit more easier to see.So, I do like whites and then the sub
header font. Also do white as well. Right?I see here, content, white and then the…
yeah. Why is that one changing?That one shouldn’t be changing.
Subheader font color. Oh, there it goes. Okay.All right. So, I'm gonna click on check.Now, right here I’m gonna add
a background image. So, settings,background image. Now, you can also
add in a video, so you go to video.netand download those free videos,
or you guys can go to likeShutterstock or Getty images
and download the videos there.So right here I’m adding a picture of this girl,
and go to upload image and go to check.Now right here, I’ll delete this module,
I don't really need it. And there you go.So now I have the scroll on top right here,
and that’s actually appealing.That looks quite good.So, the next thing I'm going to do is add
on this section right here. So very simple.We're gonna go click on plus,
regular and this one right here.Now guys, there's a lot of ways to do it,so I don't want you to feel you that
have to do exactly what I am doing.You can add in a text module,
and add in the background,or call to action or you can add in
another fourth style.There's a lot of different
ways you can do this.So, I’m gonna just add in a call to action
and I'll just put a like a shop page.For a shop, the latest stuff.Of course, you can bring in anything that
you want and I do not want a button here.Now, background color, yes. I'll change
the background color, like this right here.And maybe like fade it up a little bit,
and then for the design,you might want to change the font
and make it just a little bit bigger.Right? So, it's there. But you know,
it doesn't really look good you know;we have too much white space.So, we need to actually reduce the padding
so right here under this gear icon, so this row,for this row I want to extend
this row all the way across.So, row settings, make this full width,custom gutter and reduce this
to do you remember, one.Okay, and there you go.
Now one more quick thing before I continue.I wanna actually introduce you
guys to the fourth menu.Just in case you want to add a menu
to your page or something,so right here add a new section, full width.
Now we can add in the fourth menu.And guys, It's literally just another menu.
And you kinda like change it, you can center it,you can customize it so this is another
way you can add another menuto any part of your website. Okay.I did mention that earlier before I got
carried away so this the fourth modulethat you can use for menu. But I'm not
gonna use it because I don't want that.I'm latest. So, we have all this
padding and stuff right hereso let's go and reduce all this padding.And now for this teal section right here,
same thing, I wanna reduce all this.And over here, same thing;
and over here same thing.Cool! So now I'm going to click on
this little plus sign and go to regular,and I'm going to add in this one right here.So, you see right here this is actually perfect,
so right here we can have our products,and then this little right section,
can we get our sidebar.So, we've already kinda like,
you know, picture perfect day.You know we’ve kinda like picture
how it’s gonna look.So going down here, let’s go ahead
and find the sharp module,Now guys, I do have other tutorials,
as far as, I do have a lot of other tutorials butIf you guys want a specific thing
on your products, like checking,I’m sorry, like party add-ons, like bookings,
like dynamic pricing,like buy two get one free,
or like a specific shipping style.After the rule commerce, after this tutorial,I have a lot of commerce tutorials among that.But don't go there yet because we have
to first talk about tool commerce setting,we'll talk about in just a little bit.Now over here I want to add in a sidebar.So right here, sidebar,And that's here. here. Oops.
And also check my channel.I have another one; it gives you like thirty
sites where you can list your products guys,because the ecommerce site
is great to have, no doubt,but you want to link your products to
have as many different types as possible,which is what I do and a lot of other
people do to make money.So, all right. So, we add in the sidebar,
we have our products.Now you’re gonna want to make
this bigger, I want to extend this.You know, I wanna make this bigger,
and I wanna gutter it like two.So, we have it like that.
Now let’s say for example,you want to actually change this to sort
of have more products. So right here,call number will do for this time.
So now you’re gonna see that we have four.So now I bet you guys are wondering why
doesn’t our shop page like the default one,like we had on the front page
or this one over here.So, guys, it’s very simple. all we have
to do is take the same exact CSSand just apply it to the same module.
That’s it. We're just takingthe same stuff from this one
and put it in the other one.So, this is also in the description of this video.Also, guys make sure to check on my blogpost,
if you guys are having problems with the CSSor If it's not working for you, so right
here I'm gonna simply just copy thisand just go ahead and apply this. So, CSS,
they just wanna add this to the product.So, CSS, and then wanna
add this to the productand just paste it in there like that.
So right there, it already looks much better.You know we have that box shadow,
and we also have everything aligned in the center.Now another thing I have over
here is I have the overlay.So right here, we have the overlay,
I'm gonna go ahead and copy this.Now guys, if you want to have this
just around like the actual product, it’s like you don't want it over the… like the actual,the… if you don't wanna want to have it over it,you just apply it to the actual product itself.So, we can do something like apply it
to the main element right here.And we can add it like that or you can
actually add it to something else like,you can actually add it to like the title
or something like that.So actually, the title will not work.But going over here it’s kind of like
mess around with this now.So, you can add it to the image.
Right here you can put image.Now if you guys want something
like that in there,now you don’t have to scroll
over it for that to work.So, it basically just works by default.Now you can also do that for like
the actual part over here.So, you can just like change the box
shadow right here as well.So, if you’re looking for that you can
go ahead and do this as well. Okay.But I actually have for the overlay.So right here that's basically
saying only when they hover it,it’s going to turn that that color. Okay.So, if you want to apply this to any
part of your website, you can do that.You can probably even add it over hereto the sidebar right here around the main elements.So, you guys can see and we can also center
that text, do whatever we want. Okay.So, I'm just trying to make you
understand the logic behind it.Now quickly if you guys don't want your
own shop page but you want the overlay,you want the overlay effect to that glow.I would give you a piece of script
and just a little bit.That is only if you choose to use the default
one and not overdoing right now. Okay.So those of you who don't wanna do
the custom shop page, don't worry.I will still give you the CSS for that.Right. So I'm going to click on publish,
and we’re actually gonna publish this page.Okay, so let's go ahead and
exit the visual builderand wolla! you know we have
our cool shop page.Now there are somethings that
really want to be changed,maybe you want to change
the sale to a different color,and maybe also we want
to change the text as well.So, remember, settings, everything
is in the designs, guys.By now you guys are probably
learning how to do this,so icon hover color, you know,
so the overlay color,we're gonna put that dark and title we
can change like the spacing of these.We can change the line height, the price font.We can go through all these settings right
here and make any changes that we'd like,so price font we can make it even bigger,so like I said, there’s always a…
it is so customizable.You know, you can get as customizable
as you want.And make it look however you want.So, we click on this right
here and go to save.So, another thing I want to
go ahead and point out,I'm going to give you guys
another CSS lesson.Now on this shop page right here,you guys have noticed that if people
decide to give you a product reviews,it's gonna look like this right here.And the reason why it looks
like that is becauseto be it so, things, everything is to the left.So, you wanna make sure that these
stars are to the, I'm sorry in the centerSo, going over here, you can see
that I have no reviews yet,but that we're gonna go ahead
and fix this right hereso in the future if someone
does review somethingand you decide to text align
center to everything,that it will work properly.So again guys, everything is
on my blog page right here.So right here we have the center
of views for your website,all you guys need to do is go over
here and copy this right here.And simply go ahead
and paste this in.Now you guys again this is just if you
want to be you know customizable,if you want to go a step
further you know.So let's go over here
to our dashboard.I'm going to enter this
in the theme customizer.So Divi – Theme – Options.Imma scroll down, just keep
scrolling, just keep scrolling.Now, this over here was again
for the product shadow,so around all of our products we have that
hover over glow and I talked about it earlier.So again, remember that if you want
that glow around all of your products, just go ahead and use that code, okay?Now I want to go ahead enter
in this code right below it.We're going paste it, we’ll go ahead and make
sure that these aren't touching like thatand click on save changes.All right so now they have entered in this code right
here let's go ahead and go back to our website. Now earlier again remember it was actually
showing that it was on the left side,so now let's go to our shop pageand now you can see that it's really beautifully
aligned in the center right there, okay?If you want to go ahead and achieve that
that center review that's exactly how you do it you guys always refer back to my blog
page and if you have any questionsor if something did not work for you or you
just want to know how to do something elseand also remember to hit up elegant themes cause
again all these codes came from elegant themes these guys provided me with everything,so that’s because if guys ever need help
with your website or you have a problemor you want just like an added you
know kick to it or something like that, these guys can help you out
with your websites, okay?So let's go ahead now and
go back to the tutorial.So us go back to our shop page now, you guys have
probably also noticed on our other shop page right herethat we don't have that product
flip, you know, it doesn't work,you know the price aren’t flipping over like we
had earlier, so let's go ahead and do that.So that is basically a small plug in, so
right here we’re gonna go to dashboard,we’re gonna go to plug ins and go to add newand I believe it's called product flipped image or
Woocommerce or we’ll just do like product flipped.Product flip.And I think the one that worked for me was,let me double check, let me double
check right now.So go over here to my dashboard.
Now this is actually my other demo websitesand you know it's hard because a lot of plugins
come in, they come out, you know they update, they're good, they're not good anymore
and the one I use over here,was I used the Woocommerce
product flip image.OK so you guys want to go over here
and type that exactly into here. Now guys this is a free one and it works
because I have spent a lot of timeor a lot of time trying to find a really
good plug in for you guys,so right here Woocommerce product
image flipper, just click on install.There's a lot of like websites that
offer them like for like thirty bucksbut I've done my research
and this one works perfectly.So remember under your products now
there's no little like option for the left side but on the products you can go
your products and click on them.Whatever your secondary images right here, the product
gallery, that is what it's going to flip as, okay?So whatever you have here. Now, if you have like five
pictures, it's going to do the first one right here, okay?And it's all automatic, there's no like
settings for it, nothing like that in there,so going back over here,
I’m gonna go to my shop page and if we…Let me see here.Oh, you know what, I didn't change
it in the menu, sorry about that.So I have to add the shop page to the menu.
I was like wait why do I have this one again,so here I’m gonna go to our pages
and we're going to add in our shop. I believe that’s the right one.We’ll see if it is or not we’ll add both of them.Okay, I’m gonna save this to the menuand it's one of these, it's one of them. All right.Sorry about that, so now we go over here, you can see
the image is now flipping over, do you to see that.So if you want that affects you can actually use that
plugin for its and it will apply to your products.Now the next thing I want to talk
about before we do the variable product,which is the other part we talked about
earlier, we did the simple productand now we're going to variable product but
I want to introduce you guys the live chat, you know, live chat feature guys is very easy, it's
simple and it's actually really really really easy to use.So there is a link in the description of this video it'll take
you to a website called Tidochat.com and it's freeso it's not going to cost you
anything so Tidochat.com.And like I said it's a free live chat,
so it doesn't cost anything ,now it does if you want like their premium
features, so if you want like they're pro features,if you want something that's like a little bit better but once you maybe get like a lot of
traffic you might wanna upgrade to thatbut for now I'm going to go ahead and say, Okay try Tidio
now, go ahead and make up in an account right here.Now I’m gonna go ahead and log in because I already
have an account these guys, I already use themand they have a really good live chat system.So right here you can see it's loading up.Now right now my trial period has ended so
I basically have to just select the free version,so I'm going to downgrade to basicAs I said you guys can use it, you
don't have to have a paid version,you guys can still use it for free on your website.Alright now I want to actually
install the Tidio chat pluginthat will connect to this so this right here is our
dashboard so going over here to our website,I'm gonna to my dashboard and we're
going to install the Tidio chat pluginand that basically connects
our websites to Tidio chat,so Tidio chat.There it is right there so right here install now.And I'ma click on activate.Alright so I have Tidio chat activated.Now over here on your left side you're going to see
Tido Chat come up so just simply click on that.Now you need to actually integrate this or you
can just go ahead and enter in your accountYou can do either or but that you'll only have
to do this one time and then after thatit's just going to link you to your page,
so I'll just do integrate with site.Alright so your site is already integrated with
Tidio chats now I’ma go to click to panel.Now I'm actually going to close this
again and do this just from scratchso you understand how this
works one more time. Alright so, you know I really
don”t want [inaudible]I have to do that. I will just enter in right here.Alright, so I guess they want us
to like sort of decorate thisbut you can always do this in the settings
guys, so don't worry about that .Now going to close this Ooay,
so going to close this.Now again if you click on Tidio chat it's going
to keep opening up this section menu.so in order to find out if you have visitors
on your website or something like that,you need to make sure
that this is open OK. So right here we have this
section open right here OK.Now, if I click on this dashboard and you can
go through all these settings right herelike, you know ,visitors so you know
you can go and check this out. Now right here we can create an account like I said
I recommend doing that already so here we go.Okay, so it's actually using my other one so it doesn't
really matter we’ll just go to dashboard right hereand let's say for example like you know
we're available now.Alright!So now we’re gonna go to our visitors.Now I'm actually gonna visit my website I'm
actually to go to it right now and let’s see here,So I’ll do to, whats the domain right here?We’ll to Tidio Chat tutorial.So I'm actually going to go to that on my other
computer and we're going to see the visitor, we’re gonna see someone come up.Alright, so now I'm on the website, so I'm gonna
go ahead and go to like visit site visit site. Now over here on the right side you can
see that it says we’re available nowso people can already start talking but I'm actually
going to go to the backend and right hereand now you see that we have visitors on site so now you
see that Tidio Chat says OK we have two visitors on site.Now you can actually see everything about
them, you know you can click on them,you can find out where they're from, you can find
out what country, what page they’re on etceteraand if you want to sort of engage
them like while they're shopping,you click on join conversation and
then simply say hey what's up.Now whatever pages are on or whatever they're doing it's actually going to make a pop up for them like saying
hey guys do you need help or you need something,so it's a very easy process to use and
if you want to like leave the chat,you just click on leave and there you go.So again, you know, go to our dashboard and
like I said you know we’re available now,any questions, let's chat or chat with
us you can do all sorts of cool stuff,so it's a very easy thing to understand.Now, you can also see right here that
there's two visitors and they're both me,so again, cause I’m on a laptop on my other
computer so it's very easy guys to engage inbut I recommend making the account
because this is really annoyingyou know you want to have this keep coming
up but I just create the account, integrate itand then you know mess with all the settings,
so you can go through the settings right here,you can decorate this, so I think created mine, you can
ban visitors, you can do all sorts of really cool stuff,you know, notification of an incoming visitor.So if you want to know if someone's actually visiting
your websites you know you hear that noise,I mean you do quick responses, now the
premium features, they include stuff like…see I did this one right here, so this is the one
I did for my demo and I added like an avatar,you can like to use a file and
select whatever you want but the Pro versions they have like the automated
ones where they like always hit them up or something like that.You can hit up like maybe like five or six
there's a time but with the free versionI think it's limited to just three people
you can talk to at a time OK?So use Tidio Chat, it's a free service but
once you start getting heavy trafficand you think that's going to help your business,
you might want to upgrade your websiteso that you can actually, you know decide
to you know e-mail a lot of people at once or you know etcetera OK.So Tidiochat.com, the link is also
in the website if you guys need it.Now going back to our website over here, you guys can
already see that it’s like hey what's up you know, it's already starting to engage because
Tidiochat actually thinks I'm a visitor,so they don't actually know the admin
but that's just good to know so againyou can also decorate all this stuff and make
it customizable and I can close it, you knowso and it's actually good because
as I talked about on the checkout,if people have problems with their
credit card or somethings not workingmaybe there's something
wrong with your websiteand these people are just saying hey
you know there's something wrong sothat's also kind of like free feedback
you're getting in a way, okay?Now, another thing I want to introduce
you guys to is the social share,so if I go to one of these products right here, I click on it, I can't really share it to anybody
you know it's kind of sad you know, I kind of want to share it to people and tell people
about my website but as of right now I cannot,I’ll close these ones.So I want to basically add in the social
share now there's a lot of plugins guysand I believe the one that I use over here,
now I want to give you guys the exact oneso that you guys don't mess up is the
Woocommerce social media button share.You guys will notice as you guys mess with
Woocommerce and mess with pluginsyou're going to come across a lot of plugins that
just kind of suck and they just don't workand you know you can see like the ratings
on them and everything so it's just like,it's just maybe some people made these
plugins and then they just like depreciated it,they just stopped working on it so, I spent a lot of time kind of going to plugins
and understanding which ones workNow this one right here Woocommerce social
media share button, you click on install nowNow you can also see like the number
of active installs and the ratings as wellto sort of help you get an idea of, if it's a good plugin
or not so here we’re gonna click on activate.And guy’s even myself you know, I'm very
fluent with Woocommerce and e-commercebut there's so many new plugins that
come out there’s so many new trends,it's hard to kind of keep up with it because
technology evolves so fast you know.So let's go to our install plug ins right here, I'm close
this one right here here, I don’t want to use jetpack,I don't like jetpack.So going down here we can
actually go ahead and find the…So this right here is the Woocommerce
social media button shareand you can either, you know, edit or deactivate
it, but don't mess with the settings, okay?So in order to find that,
we’re gonna to our productsand we’ll click on one of these
products right here.Now we can also go ahead
and click on view product.Alright, so we have these social
shares now that are coming up.So you can see we have, we can tweet,
we can share it, we can pin it,we can you can you know put it
on LinkedIn or whatever.Now let's say you want to control the
amount of shares that you havecause we have one, two, three,
four, five, six seven, eight.Maybe that's too excessive,
maybe you want like just five right.So let’s go ahead and do that,
let’s go over to our dashboard.And I believe it is, it’s over here somewhere.Oh Share buttons, duh, share buttons, okay?So right here, you can actually decide to you
know say Facebook, Twitter, Google Plusbut I just kind of want these ones right here
you know and I don’t want these other ones.Now they have like a pro version where
you can I do all sorts of other stuffand if they share it what will it say,
you can control that.Now you can also control the amount of like the buttons,
so for Facebook you can use your own custom button,if not you can use the blank one.Now you can have like a button with a counter,
a box with a counter something like this right here.Now, I don't know if you can control it,
Now you can have like a button with a counter,
a box with a counter something like this right here.Now, I don't know if you can control it,I'll be straightforward you guys I don't know
if you can control the number of sharesbut that would be pretty cool if you could,
I don't know if there's a way to do thatbut you don't want to see like a button with zero
shares you know it's kind of embarrassing,it's like well you know once
you're on your stuff I'm leaving.So it can work against you hypothetically, so you
can actually just go ahead and go to save settings.Now also you guys can use post this
anywhere on your website with a short codebut I don't really want to do that.So let's go ahead and just go
to our website againand we’ll go to our shop pagenow click on this one and there you go.So, now we only have four.And that looks much better than having it…
so, if I click on share right here,I can actually just share it to my Facebook.So, there you go. Now, I’m sharing that product to
Facebook and people can buy it.So, it’s very good to share, you know, have that
option at least, because you have nothing to risk,you know, you have no risk here, so it’s just
like good, positive things that can happen, you know, somebody buys your stuff.So, it’s kind of worth it to actually
add that in, okay?So, I’m going to go ahead and close this and we’re actually going to… So, basically, guys, we’ve pretty much,
you know, added all the plugins for this.We’ve added live chat, we’ve added the social
shares, we’ve added the product flip.So, the next thing we’re going to do is we’re
going to do, like, the WooCommerce settings.We’re going to do the available products, we’re going to do the… the products, we’re
going to do, like, the available products as well,and lastly, we’ll do something like the free taxes,
where basically it enables all the taxes for you,and then we’ll do the stripe,
but really quickly before we do that,I want to actually show you how
to customize this sidebar and actually enter in all those things
we talked about earlier, okay?So, we have this sidebar right here.
It doesn’t really look good.You know, it doesn’t have anything.
So, how do we decorate this?Well, we can go to our dashboard right
here and we can go down to our widgets.So, appearance and widgets.So, you see where it says sidebar right here?
Now, I want to delete everything here.I don’t like any of this stuff.This stuff looks ugly, it doesn’t look good,
I’m just going to delete everything.I mean, who has this on their website,you know? Like, nobody, like a meta.What’s a meta? I don’t even know what that is.So, we’re just going to delete everything right here
and there’s different plugins that we can add.So, right here we have like
the WooCommerce cart.So, whatever people have added in their
carts we can actually put that right there.We have product categories, so maybe
you want to put that over there.So, we have product categories, we have top-rated
products, we have recent reviews, recently reviewed.So, what that means is if someone recently reviewed
a product, it’s going to recommend it againor it’s going to show that to them again.So, if you want that you can do
that, also WooCommerce products,you can, you know, just have a
list of some of your products. Like I said, all you need to do is just simply take one
of these and just drag and drop right there, okay? So, I’m going to save this, save this, now, if you want
to add anything else, you can go ahead and add, you know, those over there, but I’m going to
go back to visit site, we’ll go to our shop,and you can see that we have our top-rated products
right here on the right side and the product categories.Now, how did I actually get it to the other side or the other site where I had it like
the other thing that you guys saw?So, right here we have our subscribe
and we have our follow us.Now, that looks much betterbecause this just looks really customizable and
this just looks really colorful and it looks vibrant,you know, makes people
want to click on them. And here I just put, like, the top-rated
products and search for stuff.So, let’s go ahead now and before we actually
mess with WooCommerce settings,let’s go ahead and do the Monarch
plugin and the Bloom plugin,because you guys already
get that with the Divi theme.So, it’s a really amazing thing and, like I said,
it’s just a little bit of work you have to doBecause think about it, someone’s
shopping on your website, you know, why not give them
the option to get your email,you know, why not? You have
nothing to risk there.So if you want, go to Elegantthemes.com
and go ahead and log in. And now we are going to download the plugins.So, remember I told you earlier that
you get a bunch of premium plugins?Well, Bloom is one of them
and Monarch is one of them.So, I’m going to click on
download and download. So, we have Monarch
and we have Bloom.Now, I’ll be straight-forward with you guys.
Monarch is really easy to understand.Bloom does take a little time to learn,
however, I have a whole other tutorial on it,but I’ll kind of run you through the
basics of it, so you can understand it,and if you want to go to the advanced section, you can always check out my other
tutorial that I have on the Bloom plugin.So, we’re going to go over here,
actually over here.Let’s go ahead and upload these.So, I’m going to go to my blog, or our
dashboard, appearance, and add new.Now, we’re going to upload a plugin.Now, these are not available on WordPress, so if
you search for them, they’re not going to be there.So, these are, like, premium, exclusive plugins.So, choose the file, now it’s under
my downloads, Bloom, open, install.And I guess to use this plugin, you guys
will have to have a MailChimp account and making a MailChimp account is free. I currently have MailChimp and
it’s a free one for, like, 2,000 subs,and I have a whole another
tutorial for that as well,but you don’t need to, like, you know, you don’t need
to look at it, but it’s not that hard. It’s really not.So, right here under Bloom, we’ll click on settings.Now, I want you to open up another tab
and I want you to go to MailChimp.com.Alright, and I guess you guys
can sign up for free. It’s a free service for… especially,
if you’re brand new, I highly recommend it.However this is my account, so I’m just going
to show you really quickly how it worksAnd, you know, if you want to
use it, I recommend you do itbecause it’s really, really good to have, because people
can subscribe, you can send them all sorts of coupons, and it’s just part of ecommerce, guys.
You know, mailing lists, right?So, over here we have active optins and
we have nothing. We got nothing.So, over here, new optin.Now, you can have different styles, you know, you can
have it pop up, you can have it fly in, below the post,in line, locked content, or as a widget.So, I’m going to do widget.I only want it as a widget. Now, you can always have it pop up, but for this
tutorial I’m just going to do a simple widget.Widgets are, remember, these
things on the side right here.These are widgets, like widgets and
gadgets, that’s basically what they are.Alright, so give it a name. I’m just going to put my
new optin right here, I’m going to select MailChimp.Now, they recently added some
new ones, so if you guys needed,you know, like, you’re thing linked up, then—or your
provider—they added, like MailerLite and some other ones,but I’m going to go ahead
and add the account.Now, this is my account name, is this right here,
now your API key, you guys can get in your settings.So, if you guys go to MailChimp
right here under your profile,maybe it’s under the settings,
let’s see, details, it’s in here somewhere, extras…
yeah, API keys.You can always go there and
get your API key, okay?So, I’m going to go ahead and copy
and paste mine really quick.Now, I have my API key copied,but the thing you need to do before you actually take
the API key to the Bloom plugin is to create a list.So, right here under lists, click on lists, now
you see this is one of my lists right here,so this is my current email subscriber form,
and basically I have around 2,370 subscribers.So, you’ll need to create a listand basically what this does is it stores all
of your subscribers on to a list, right?They have to go somewhere.So, over here click on create list
and I’m going to create list. Now, for you it might look different, it might just have, like, something that’s
just, like, nothing’s here, create a list.So, go ahead and give your list a name.So, right here you can put something like, you know
Darrel’s, you know, or your website’s newsletter. And remember, your subscribers will see this, so make
sure it’s professional and make sure it looks good.Now, right here you’re going to put the default
email address, so people will reply to it and right here is the name.So, for example, I’ll put Darrel Wilson,
so people will know it’s from Darrel Wilson.Now, scrolling down right here, you’re going to, you
know, remind people how they sign up to your lists.So, just tell them, hey, you know, you guys, sign up to my
list and, you know, thank you for subscribing, etcetera,and then go ahead and put in
your contact information.Now, they do recommend that
you put your information,it’s probably like a CAN-SPAM Act
law or something like that,but you can just put like a PO Box
or something like that.Here I just put my city and my business name,
etcetera, and the notifications will be sent to,and then you can put something like a daily
summary one-by-one as they subscribeor one-by-one as they unsubscribe.And once you’re done with that,
you’re going to click on save, okay?So, then you’re going to go
ahead and create your list.So, it’ll look something like this right here.
Of course, yours will say zero.Now, MailChimp is very comprehensive, so I, again, I have another tutorial just for like,
you know, setting up campaigns, how to style it, how to send out links and everything
like that, so be sure to check that out.Now, once you have your API key and you have your
list created, you’ll have to go back over to the website.Okay, so I basically took my API key, I put it there and
my account name, so I’m going to now authorize this.So, I’m basically connecting it.Now, select an email list.
So, I’m going to select my email list. Now, again guys, you guys will need to make a list,
and like I said, I have another tutorial on that,but I’m just showing you how you
can use this and how easy it is.So, right here, I’m going to say, okay, select
your design. So, I’m going to select the design.And they have a bunch of really nice, cool ones.I’ll select this one and just go to save and exit.Alright, so I’ve basically linked that
with my MailChimp account,so if anytime somebody enters in
their email onto my Bloom plugin,it will just go right to my MailChimp account
and just link it up, you know, so it’s automatic, it’s an automated process.So, now let’s go over here to our
appearance and go to widgets.Now guys, you don’t have
to follow me here.This is if you choose to use the Bloom plugin,
which I highly recommend that you do.So, Bloom, I’m just going to take this and put it right there. Now, this, I’m going to say, select my optin, my new optin,
which is the one I put, and right here I can put subscribe.So, I’m going to save it.Now, let’s go ahead and look
at the sites to see our sidebarand voila, we have that cool subscribe then right
there, so the site’s starting to come together,but now I want the Monarch one, you know,
I want the social media following stuff.And also guys, remember,
you can add this to your footer.So remember at the bottom right here we
talked about earlier, this are also widgets.So, if you don’t want it right here, you can also
put it on your bottom section right here, okay?So, now I’m going to go ahead
and add in the Monarch plugin.So, plugins, add new, upload plugin, choose the
file, and I’m going to select the Monarch plugin.This one I like because you can actually set the amount
of numbers of fans that you have and everything,maybe you kind of want to like, lie on it,
like, I have like, 10 million followers,and people are going to be like “Oh my god, that’s
so cool, I’m going to go, like, watch this guy’s stuff,” and then they click on it and you have, like, two
followers, like, oh, this guy’s a loser, never mind. He’s a nobody.So, here is, like, the basic settings, guys, and
same thing, you know, you can have the sidebarand line pop up, fly in, or media. Now, you can choose, like, anywhere you want,
so I’m going to do sidebar for this one.Now, networks. So, what networks do you want?Well, we can have, like, Facebook, Twitter,
Google, all sorts of really cool stuff.So I’m just going to do, like, Twitter, Pinterest,
and I’ll just do those four, you know? And, you know, I’ll leave it like this right now.Now, for example, if you guys want to use this,
you have to basically put in your URLbecause all this is, guys, is just a URL.So, simply go ahead and put in
your Facebook address.And then when they click on this, it’s just
going to take them to your Facebook.So, I have a fan page.I think it’s Facebook.com,
let’s see right here.I’ll go ahead and enter in mine.It’s right here. I’m going to go
ahead and enter in my name.This is my link right here. So, guys, remember, it’s all
just a link is basically what it is.So, you can actually choose to have
it automatically upload all your stuff,but that’s in a separate tutorial,
I will not go over that right now.So, I’ll do something like, so, let’s see right here,
Google Plus, I’ll just leave all this standard right here.I don’t want to go ahead and
mess with any of those.Alright, so I’ve saved changes.Now, social follow as well.So, the social follows, guys, is if
they choose to, like, follow it or not.You can also have that right here and you
can do the same thing, add the network.So, one was social sharing and
one was social following, okay?So, social sharing is basically sharing it to
their Facebook or sharing it to wherever,but the social follow is basically
when they want to follow it.So, I hope you understand social sharing, they share it to
Facebook, social follow is when they follow you, okay?So, same thing right here.And I’m going to go ahead and enter
in my username and just put Darrel.Now, how many subs do I have?Well, I got 1 million or something
like that. I got a lot.Twitter, same thing.I’ll do something, like, I’ll just put in your Twitter
thing and then put, like, an at Darrel Wilsonand I’ll say I have that many, okay?Now, you can also do get counts via API,
but guys, I’m just introducing you to the plugin.I don’t want to get, like, too extensive on
this, because there’s a lot you can do.So, we’re going to save changes, okay?Now, let’s go ahead now, and
if you guys want to put it anywhere,you guys can just get the short code for it
and it’ll, you know, it’ll produce a short code, but I just want it as a widget.So, general settings, of course, you guys can go here
and go to, you know, get your Facebook API keyif you choose all your APA secrets.Now, again, that is only for the
automatic updating of your followers,so if you choose to have that, go ahead, now keep in mind,
guys, I do have a separate tutorial on Monarch and Bloom,so I know this isn’t extensive, I know
I’m kind of rushing through it a little bit, but I don’t want to go too much into these
plugins, because I can talk about this for hours.So, I don’t want to go to much, too far into it, okay?So, social follow, social sharing, okay?So, now let’s go ahead to our
appearance and go to widgets. And scrolling down here we’re going to find the Monarch,Monarch follow right here and l’ll simply go
ahead and add it there and put follow us.Now, I’ll also put this on our footer areas, so
I’ll put, like, a, right here I’ll put it under our…I’ll do footer area three, you got four, and then number one,
I’ll go ahead and just delete this about us right here.And then I’ll go ahead and add in,
what’s it called?The Bloom plugin. So, the Bloom, okay?And put my optin form.So, now let’s go ahead and see the changes
we’ve made to our website, okay?Now guys, I understand that I’m going fastand as a beginner you might not have
understood everything I just did,but you know, go back and just kind of
read it over, study it, and look it over,because, guys, ecommerce
and WordPress takes time.It truly does take time, so it does, you
know, it’s not as easy as I make it look.Now, right here we have the subscribe,
however, the follow us is on the bottom,and the reason why it’s on the bottom is because
the format that we have is not correct.So, let’s go ahead and change
that really quickly.I’m going to go to my theme customizerand I believe it’s under footer, layout.So, you see here I have three.
Now, I want to select four, and save and publish.Now, scrolling down here,
you can see that it looks better.Now guys, that alone right there makes
your footer look more actively friendly. It makes it already look good, so
I really recommend those plugins, guys. It’s so imperative that colors
and images will get you sales.That’s really what will happen,
so I recommend this. If you guys choose not to use it, you guys always have
the option to then download it later and mess with it.And right here it says you have
59—58 million followers, like …..This makes your shop already look
popular, you know? It already does.So, I recommend it.Now, let’s go to the shop page
right here, and again, same thing.So, we have our subscribe and
we have our follow us, guys.So, you can have, I think, up to, like,
four on the page, something like that.So, that’s exactly how you guys would do the subscribe
to our newsletter and also to these right here. Now, again, MailChimp is very… what’s the word for it…
MailChimp is very dynamic, so you can do a lot with it.So, I recommend watching my tutorial on MailChimp,
so you can get your account all set up,so people can come to you website and
they can go ahead and, like, select it.Now, over here you’ve noticed that we
have those social follows right here,so if they click on it they can actually, you know,
share it to their followers, etcetera, okay?So, if you guys choose to use that, you know,
it’s a very good plugin, guys, I gotta be honest,this is definitely, like, one of the best plugins
that you’re going to find on WordPressbecause it’s a premium one and it’s free with
Divi, so you might as well really use it.These small things, they really add up and make,
you know, make your site look really, really good. So, just by looking at our site, you know, it already
looks more, you know, more user-friendly, you know, we have the logo, we have our,
you know, our social sharing to the left,we have, like, all this stuff, it’s already starting
to look like a real ecommerce website.So, again, I recommend doing
most of those, but it’s up to you.So, the next thing that we’re going to do is we’re
going to learn more about WooCommerce,the products, and also the settings.Now, another thing I want to point out is that
as you guys venture off with WordPressand you want more for your products
such as, like, product add-ons… So, if I go to one of my products right here,you know, let’s say, for example, I want, like,
a product add-on, like giftwrapping for 5.99or you want to create a booking website, or you want
to create, like, a buy two, get one free kind of thing,or you want to modify your shipping,
there’s a website called Woomill.comand you guys can, like, join it for, like, 15 bucks. And you get access to like all,
like 190 WooCommerce plugins.Now, the difference is is that this website
will not give you support for the plugins,so they don’t give you, like, a key code or
anything, but they do update their plugins,and like I said, they have a whole lot of plugins
and you guys can get them for extremely cheapand again the only difference is that
these guys do not offer support.So, right here they have
like a bookings plugin,so if you wanted to have, like, a yoga
booking website, you can do that.If you want to have people sell on your
website, this plugin right here does that.And I have tutorials on all of these, so if you guys
are interested in that, I highly recommend it.So, this is the table rate shipping, like,
you know, buy three, get free shipping,or product add-on’s, like I told you about the
gift wrapping, and they have, like, square,and all sorts of really cool plugins.So, be sure to check out Woomill.com if you
guys are interested in getting plugins. You’ll save a lot of money going to WooMill
rather than going to WooCommerce, but then again, you guys
won’t receive support.You guys just receive the plugin itself.And you guys can use the code “Darrel 25” to save 25%
off any of your purchases from Woomill.com, okay?So, that’s, like, later on once
you want more for your store,because by default, WooCommerce doesn’t have
much, you know, they don’t have add-on’s, they don’t have, like, gravity forms,
they don’t have any of that stuff,but you can get all that from just,
like, you know, for just, like 15 bucks.And the code will save you
quite a bit of money.So, let’s go ahead and go
back to the tutorial.Now, lastly, before we go to the WooCommerce settings
and I talk about Stripe and checking out and tax and all that stuff, I want to let you guys know that you guys
can actually edit your mobile view, this right here.So, unlike other themes, like, for example, like, you know,
the way it looks is basically how it’s going to look,but you can actually decide to actually
change how this looks on mobile devices.So, right here I’m going to click on this.You guys see now that this is how it looks on a
tablet, this is how it looks on a phone, right?Now, let’s say, for example, you want to
exclusively change something just for the phone.Well, if I click on this gear icon, if I scroll down right
here, you can see where it says disable on,and then I can disable this on
the tablet or on the phone.So, basically, I’m saying if someone comes to the
website on a tablet or on a phone, this website…or, I’m sorry, this section right here will
not exist. They will not see it, okay?And you guys can see it’s
already greyed out.Now, if you guys want to change
something, particularly just for the phone,you can click on the gear icon and this works
for every single module guys, okay? Not just this one.So, right here we’re going to go to design.Now, let’s say, for example, I want to… well,
actually, no, we’ll do this one right here,we’ll do something a little bit more dynamic.So, design. Now, you see right
here it says, like, header font size? Maybe on the phone I want to make it bigger.So, let me see right here. Going back up…So, right here, I’m going to actually
push this up just a little bit bigger,so this is only going to change on the phone.
So, it’s actually this one right here.That was a little strange, I don’t know why it
did that, but weird things happen sometimes.So, only on the phone will this module
have bigger header font size.Now, the same thing for the smartphone.
So, that was for the tablet. Now, this is for the phone.So, scrolling down here, you
can make this look bigger, okay?So, keep in mind this is only for the smartphone. If I go back to desktop, you’re going to see that
it actually looks the same right here, okay?Now, let’s just say you want
to make a section disappear.Now, there is a reason why you
would want that to happen.One of the reasons why is because video backgrounds
will not play on any iOS device or Android phone,so if you choose to have a, like, a background video,
you might want to, sort of, hide that sectionand maybe create another section, you know, to do that,
so, for example, let’s say I’m going to duplicate this row.I know this seems strange, but just follow with me.So, let’s say you have a video background right here.So, over here I’m just going to go
ahead and put in a background. Alright? Now, I want you to
understand what I’m doing right here.So, right here I have this video playing, right?However, this section will not
play on a phone or a tablet,so we don’t really want to have it
enabled for mobile users, right?So, over here on this gear icon,I’m going to scroll down right here and say, okay,
disable on the tablet and on the phone, okay?So, when someone comes to the
website on a tablet or a phone,they will not see this section,
they will only see this section.Now, we can kind of inverse this.So, I don’t two lining pages, right? We don’t
want two. There’s no reason to have two.So, instead, we can go on this gear icon,
scroll down right here and say ok look,since this is already, you know, here, I don’t
want this available on the desktop, okay?So, do you see what I’ve done right there?
I’ve basically inversed them.So, if you come here on a desktop,
you’re going to see this videoand you will not see this… and you won’t see this
section, okay, do you understand what I’m saying?So, theoretically, we have two landing pages,
we have one for our mobile users and we have one for our desktop users, okay?So, if you come to this website with a phone,
you will see this landing page right here, okay?You come to it on a mobile device, I’m sorry, on a
computer, you will only see this one right here, okay?So, that is a reason why you’d want
to disable certain sections, okay?Now, a lot of you probably didn’t know a lot about the
video sliders not being played on iOS devices.That is a very common error.
I’m hoping Apple in the future will fix that, okay?So, right here I’m going to click on this
plus icon and go to save changes.Oh, it’s kind of blocking that
little thing right there. That’s really annoying.Okay. Well, I guess I’m not doing
that, okay, I’m not doing that. Another way I can save it is just by
clicking this and clicking on save and exit.Okay? So, what I just did,
I hope you guys understood it.So, if you come here on a computer,
you will only see this section.Now, if I scroll down, you see that
section does not appearbecause that section with the girl will only
appear for mobile and tablet users, okay?So, that is a quick little rundown of how
to, sort of, optimize your site for mobile
because that section with the girl will only
appear for mobile and tablet users, okay?So, that is a quick little rundown of how
to, sort of, optimize your site for mobileand how to sort of like mess
around with each module.You can make anything look
different on mobile devices, guys, so it’s not like you’re stuck with
one template and that’s it.It can get as customizable as you want with every
single module to make it look different on any,you know, any mobile device or
anything else that you want, okay?So, now I’m going to talk to you guys about
the, like, the homepage and everything else,let’s go ahead now and go to
our WooCommerce settings,which is probably going to be the
most important part of this tutorial.Now, I do want to recommend that I do have
another tutorial on a lot of these things,but I’ll talk more about that
when we get there. So, right here under our dashboard, we’re going
to go to WooCommerce and go to settings. And I’m going to explain what
everything here does.Okay, so, first off, this is our
general section right here.So, we’re based in California.Do you want to sell to all locations? Yes.Shipping locations.Now, if you don’t want to sell to all locations,right here we have sell to all countries,
except for, or sell to specific countries.So, for example, if I only want to sell to Russia and United
States, I’m going to put Russia and United States.So, now I am only selling to Russia and United States
and anybody else will not have access to our store.Shipping locations.Ship to all countries, ship to specific
countries, or just disable this all together. Well, I’m just going to say I only want
to do United States and Russia,because if I’m only doing business,
you know, in United States and Russia, then there’s no reason to ship anywhere
else, right? That kind of makes sense.Now, right here we have taxes and calculations.Go ahead and enable that.And don’t worry, guys, I will talk more about alternatives
for you if you don’t want to learn about taxes okay?Now, right here we have the store notice.So, what does this do? Well, just check it and I will show
you in just a little bit, okay?So, right here I’ll put happy birthday.Happy birthday.Now, the currency, I would leave this all blank.This is how it’s supposed to be, so if you’re
using, like, a euro, or if you’re using a peso,generally, they kind of like, set it the way it’s
supposed to be, like, for example, right here This is how the… you know, in the United
States, actually, that’s how it looks.So, if you want to change that you
can, but that wouldn’t make any sense. But you’re more than welcome to.So, right here I’m going to click on save changes. Now, let’s go and visit the store really quick just
to show you what that site-wide store notice did.So, here on the bottom right, or on the bottom
right here, it says happy birthday, dismiss.So, if you want to have that that is actually
what the site-wide store notice is.Going back over here, let’s go ahead and keep
going through the WooCommerce settings.Okay, so we’ve done our general,
now let’s go ahead and do our products. So, right here we have our products.And we did this earlier when we first set
up WooCommerce, you remember that?We did, like, the weight and the dimensions,
and people can enable reviews, etcetera.So, over here on the display,
we have our shop pageand this is basically…
this doesn’t apply to usbecause we’ve actually created our
own shop page with the Divi theme,but if you’re using, like, another
theme, you just create a pageand put it on whatever page you
want for your shop page to appear.Right here, shop page display.You can have something
like categories only. So, for example, if I go to categories and I go
to my shop page, the categories will show first,and then the products after I click on it.You understand? Or you can do category and products, but that’s a total
waste because either of these would be suffice. There would be no reason to do this one.But, they gave us that option anyways.So, right here you have default product settings. Now, this doesn’t really apply to us, guys, and
the reason is because the Divi theme actuallyhas the power to do all of this,
but a lot of other themes do not,so a lot of other themes have to
sort of rely on these settings. But for us, we don’t need to, because we can
customize our shop any which way we want.I know, right? It’s kind of funny.A lot of shops, they’re extremely limitedand I don’t even know why people use
some of the themes I’ve seen,but some themes are really good, you
know, but Divi is also one of the best.So, inventory, again, right here we have manage
stock, so we can enable the stock management. Now, hold the stock, so right here you guys
can actually put this for like a pending order, but you know, we don’t really need
to mess with this right here.The only thing that we would need to mess
with is probably the low stock threshold,which basically says when do you want to be
notified about when your stock is running low.At two items, at three items, at 20 items, at 100
items, you would go ahead and set it up there. Now, the out of stock threshold is basically
saying when you run out of a certain product,then it’s going to say you’re out of stock.So, out of stock and your store
will also be out of stock.Now, over here you can choose to hide the out of
stock items, so if an item becomes out of stock,you can check that and it will
disappear from your catalog.However, if you allow back orders,
then you might not want,you know, you might not want
that feature to be checked, but, you know, this is, like, you know,
kind of, like, in very rare circumstances,so this really won’t apply to us
or a lot of other people.Now, I’m just going to click on save right
here and go to downloadable products.So, downloadable products right here, they have
the forced downloads, which I recommend.That basically let’s people download
the product once the purchase it.If not, you’ll have to do something else, like
redirect or X-Accel, but I don’t recommend those. I recommend just these ones right here, okay?So, save changes.So, now we have the tax right here, okay?And I also mentioned about tax and how
you guys can get your taxes automated.And that’s true. There is a way. But really
quickly let me introduce you to tax first,and then we’ll talk about you
can get your tax automated.So right here we have, you know, the option to put
your tax inclusive of tax or exclusive of tax.Now generally you probably want to leave them
as exclusive, and I’ll talk more about why in a little bit.Now right here we have calculate tax based on the shipping
address, billing address, or the shop address.Well, generally you probably want to do the shipping
address or you can do the billing address.It’s up to you, but I’m going
to do shipping address.Shipping tax class… I’d basically
leave this standard right now.We’ll talk more about the standard
rates in just a bit.Now the rounding, you know, I’m still not
sure why WooCommerce added this in,so I’m just going to not talk about this
because I think rounding is a little strange,and it’s a new feature, so I’m not
going to go too far into rounding.Now, display prices in the shop.
So excluding tax or including tax?So what that means is, if someone sees a product,
do you want to include the tax in the shop,or do you want to exclude
the tax in the shop?Now, display prices during cart and checkout.
Well, you might want to do that including.So if they go to their carts or the checkout,
it’s going to be including tax. Okay?And these other ones right here,
price display suffix,I don’t want to go too far into this because
these are actually kind of unnecessary,like as far as itemized and single total,
we’ll talk more about this a little later.So I’m going to go ahead and click on save changes.
And now we’re going to go to standard rates.So this is basically how, you know, you guys would
do your taxes and everything and set everything up.So first I’m just going
to go to insert row.Now guys, really quickly before I go into this,
I actually have a tutorial on WooCommerce.Okay, so I’m going to go to WooCommerce,
and on number one. This is my video.Now I’m going to link this
video in the description.Now this is an hour-and-a-half video just
on all the WooCommerce settings,and getting very, very advanced into
every single setting, and very technical.And I talk about everything. I talk
about taxes; I talk about shipping;I talk about if you’re shipping
to different areas,if you should charge sales tax or not because some
places might have no sales tax rate, right?But not to worry, because I’m very
comprehensive in this tutorial.You guys can see that a lot of people
like my content, and in this tutorial,I’m not going to go too far into all these settings
because I already have a tutorial for it,so I don’t want too far into taxes
and too far into shipping becauseI already have a very large, comprehensive tutorial
for it, and that video is also in the description.But, I’m just going to go ahead and do one,
just so you guys get a little understanding on it,and you guys kind of, you know,
get your feet wet. So country code.So here I’m going to put United States.State code: so, maybe California, right?I’m from California, and now, if you guys leave the zip
code blank, it will just do the state code, okay?So right now, we are taxing California,
and the zip code is in the United States.So what is the rate in California?
Well, you guys can go to TaxJar.com,which is actually in the other video,
where I talk all abouthow to pick up tax rates and
everything from the other states.Now, that being said, we will talk
about the automation in just a bit,but for California it’s around
seven point five zero, I think.It’s probably not, guys, so you might want to check
with TaxJar.com, and that is also in the description.So tax name, you can go ahead
and give it a tax name.Now, is shipping taxable?
Well, I’m not really sure.So again, I’m going to refer you to TaxJar.com
to find out if it is taxable or not,and also if you want to add a compound tax
rate applied on any other taxes, okay?Okay so right here, I’m going
to go to save changes.So basically, I set the tax
rate for California.So if you’re only a one-store shop, and you’re just selling
in your own state, that’s all you’ve got to do.That’s it. So it was very easy.
If you’re a full e-commerce website,and you want to sell to this state,
this country,and any other country, you might want to watch
my other tutorial on WooCommerce.However, stick around, because I’m going to talk
about the automation. Reduced tax rates.So, in certain cases, some places have a lower tax
rate than others, so you would enter them in this row.So for example, let’s just put, let’s
see here, we can put something likeI think certain parts of California maybe have
a different tax rate than others. Now that’s not ideal,and that’s not likely,
but in certain rare cases,some places do have reduced tax
rates based off where they are living.So you would go ahead
and enter that there.So for example, I think in California, like some
parts of like San Bernardino it’s cheaper tax;it’s sales tax, it’s lower.So right here I’d put United States,
put California,and then I’m going to go ahead and put the zip
code, like 9-1-something like that.And then here you can put the city, but it’s not really
necessary because we just need the zip code.And the tax rate there, let’s
just say, is five percent.So that is an example of the reduced
rate for taxes.So it can get a little complicated and a little dynamic.
So I’m just I’m going to click on save changes.But don’t worry guys, you know.It’s actually really easy, you know, because
you only really need to set this up once,and then you’re good to go. And if, you know,
you’re just selling in one state, it’s not that difficult.If you’re selling across the nation
and in other countries,then you might have to add in
a few of these standard rates.And also zero rates, where some
places have zero sales tax.So certain states do have zero sales tax,
but you can go ahead and enter that there.So, I’m not I’m going to go ahead and click on
save change, because I already added that.Now, TaxJar actually have a free
plugin that you guys can use.And this plugin will actually pull all of the rates
from all of the states and everything else.However, they give you a free trial. So right here
I’m going to go to plugins and go to add new.So right here we go to TaxJar.Oh, let’s see right here,
so it’s tax – is it tax jar?Oh there it is, it’s TaxJar. So right here: TaxJar
Sales Tax Automation for WooCommerce.So I’m going to click on install now, and I’m going to go
ahead and log in to my TaxJar, my TaxJar account.Okay, so I’m going to go ahead
and log in to my account.Let’s see, one more time.Okay, so this is my TaxJar account.Now, it you guys choose to have the tax…
like the automation and everything else,you guys can use this and link it
to your Tax Jar account.And I actually have a coupon code for you guys,
so if you guys do decide to purchase it,then you guys will actually
get a small discount.So let’s go ahead and go back
to our store right here.So I’m going to go ahead
and activate this now.Alright, so I’ve activated the plugin, and we’re going
to go ahead and click on settings right here.So step one: activate your TaxJar
WooCommerce Plugin, the API key.So right here, click to get your API token.I’m going to go ahead and click there, and since
I’m already logged in and I already have an account,all’s I need to do is take in the API key, and it’s
going to go ahead and link our site with TaxJar.Save changes, done. So right here,
you know you can configure sales tax.Right here, if enabled, TaxJar will calculate
all the sales tax for your store.So you’re going to click on that. If enabled,
TaxJar will download your orders for reporting.That’s actually really good, you know, because
they’re actually going to give you a store databaseand everything else.
So that’s really, really helpful.And here you want to put…
they actually know where you are.So right here it says, you know, we already know
your store is in CA, so ship from what city?Put whatever city.Ship from what zip code?I’ll just put something like Rosemead,
91770, and click on save changes.All right?And as you guys can see right here,
if I go to the taxes section right here,you’re going to see that
everything is all done.We can’t really edit tax anymore, because TaxJar
has basically controlled our tax section.So we don’t really need to deal with
taxes any more, guys. That’s it.So whenever someone buys something
from your store, it will all be automated.Now again, this is a free trial that they give you,
so I think that’s a… I don’t know how much it costs,but I know that my coupon
code is Darrel,so let’s go ahead and see
if we go to accounts,update billing and information.So, this is where you guys would need…
and it’s twenty bucks a month.And the coupon code is going
to be on the screen.So you guys can choose to use that;
it will save you ten percent on your purchase,and it actually helps me
to continue to create these.Now you don’t have to have TaxJar.You guys can just, you know, do it yourself,
but the coupon code will save you ten percent.Alright, so let’s go back to our website right here,
and let’s keep going through these settings.So we’ve done our products, we’ve done our tax, we’ve
done our general. Let’s go ahead and go to shipping.Alright, so we have our shipping
zones and shipping classes.Now for this tutorial,
I’m just going to do one.Now if you guys want to learn
more about shipping classes,you guys can check my other tutorial, but for starters,
you might just need like a basic shipping zone.So right here, add a shipping zone.
Now give your zone a shipping name.So right here I’m just going to put, like, USA.
Now what regions? So what regions is this going to?So I’m going to do United States.Now you can actually decide
to limit specific zip codes.So for example, if you do not want your sales
to go in a certain zip code in the United States,you can go ahead
and put them here.If not, you can go ahead
and leave that blank.Now, I don’t know why. Maybe some items
might be illegal in certain zip codesor something like that…
something weird, you know.I don’t really know why you would need it
like that, but they offer it nonetheless,and that’s actually a really good
thing because, you know,I’m sure there are situations
where you would need that.So right here add a shipping method. So we could
have a flat rate, free shipping, and local pickup.Now local pickup is probably the dumbest
option, but it’s still there.Now, I’m just going to do flat rate,
and go to add a shipping method.Alright, so you can see right here we have a flat rate,
and if you ever want to change it, you can click on edit.Now, is this taxable? Yes or no?
You can put yes or no.Now what’s the cost for your flat rate?
Well, maybe it’s 9.99.Alright.Now let’s go ahead and add in a second rate.
So I’m going to click on add a shipping method.Click on this, and click on free shipping.Now I’m going to click on add
a shipping method and go to edit.Now, the title. So you’re going to put free shipping,
but maybe there’s like an exception.You know we can’t offer them a flat rate
and free shipping at the same time,so I’m going to put in parentheses
right here over fifty bucks.Ok, and don’t worry if you don’t
understand this right now, guys.When you go to the shop page and the check out,
you will understand what I’m doing right now.So free shipping requires what? A valid shipping
coupon, a minimum amount order, both, or and.So that basically says:
do they have to have, like,do they have to spend a certain amount
and have a coupon, or have both.So generally you probably want to do a minimum
order amount and then just put fifty bucks.So right here I’m saying: look, if you guys come
to our shop and you buy something over $50,then we will give you free shipping.We’ll click on save changes.Okay. Now shipping classes,
we’re not going to do.I’m just going to do, like, the shipping zones,
and let’s do shipping options.So enable shipping calculator at the cart page.
You can choose to have that or not.Hide shipping costs until an address
is entered? Yeah, maybe.I think that might be a good idea because,
if they’re already going out to buy it,and then they just see the shipping
costs at the way end,they might be like, ah, it’s okay, forget it,
I’ll just buy it, you know.So you can have that checked, but for tutorial purposes
I’m going to uncheck that and save changes.Alright. Check out.So right now we just have PayPal tight here,
and also we have enable guest checkout.So if you want to force a secure checkout,
we can click on that.If not – now, the great part about the Siteground
is that we actually have a free SSL.So that costs like 50 bucks on other hosting providers,
but if you use Siteground, you get it for free. Okay?So you can enable the use of coupons,
which we will do at the end.Checkout page – now again, guys, this is basically
if you don’t have a cart page or checkout page,you can create a page and then apply it to any other
page. Now these are your checkout endpoints.You don’t really need to mess with this
right now. These are for your URLs,and since we have our URLs to post name,
we don’t need to edit this.And right here we only have
PayPal as our basic option.So I’m going to click on save changes,and over here I’ll click on PayPal.So right here we have, we’ve enabled PayPal,
and right here it says, you know, the title is PayPal.The description is, you know,
pay with your credit card or etcetera.But guys, I’m going to be very honest:PayPal can be a very big hassle, and I don’t
recommend it only as your only method.I do recommend it as an option, but as your number one,
only method of payment… no. Absolutely not.So right here, we have our receiver email, which is
the email for your PayPal account that you will need.And if you guys need a PayPal account,
you guys can make one for free, okay?So don’t worry about it; it doesn’t
cost you anything. It’s all free.So scrolling down here,now we have our API
credentials right here.I don’t really need any of this right here,
so I’m going to make sure that this is all, like, blank.I don’t really need any of this right here,
so I’m going to click on save.That’s for, like API stuff like that, and like your
API credentials, but you do not need that.So again, we’re going
to go to accounts.Alright, so our account page… now enable
customer registration on the checkout page.So that’s basically saying, do they
have to make an account?So same thing right here, enable customer
registration on my account page.So you can have it on either the checkout page
or the my account page. You can have it on both.So, don’t worry about that too much.Account creation, this will automatically
create a user name from their customer email.Now, I do recommend that,
because people like everything easy.You know, if they have to go make an account
first, it’s like, oh, so much of a hassle.But if you just, you know, automatically create it
from their stuff they already gave you,it’s… everyone’s happy.
You know, it’s a faster process.So scrolling down here. I’m going
to go and save changes.Again, these right here are for the URL’s,
so if you want to change it,you can always go ahead
and change it right there.Alright, now emails.So these are the emails that
people will actually receive.Let’s say, for example,
you get a new order.Then you’re going to get an email
that says, new order.Now, you see right here, it says
recipients, right here so,this right here, new order,
will go to your email address on file.Now, you can always change this in the settings
in the general, for your website,if you want it to go to a different
email address.So, cancelled order.If someone cancels their order,
you’ll receive an email.Now if you go and click on the gear
icon, you can configure it.You can sort of change this, or you can just say,
I don’t want to get notifications whatsoever,if somebody cancels
their order. Okay.Now go and save changes.I’m going to go ahead
and go back to emails.So these are the emails you’re going
to receive, and you guys can just clickon the little thing right here to configure.And if you don’t want it, then you can
go ahead and just, like, change it.You can also view the template,
and you can, you know, etcetera,So that’s basically, like, how it
will look. But going back here.Now, let’s just say, for example,
you want to decorate your email.So from sender name, you’re going
to put, probably, your website, right?So, yourwebsite.com. So I’ll put likedivichildtutorial.com.And then from the address,
you’re going to put your email addressthat you currently have for your store.
The header image.So this is actually going to be
in your media, right here,and I’ll talk about that in just a second.But scrolling down here, to the footer
text, like best place for your items.Or best place for goods.We can change the base color.So I don’t want this color,
I want it to be black.Background color.Maybe like, you know,
a darker something.Body background color,
we can change that.And then the text color. So I’m going to click
on save right now, really quick.Now I’m just going to go ahead
and show you what I’ve just done.So, I made some changes.
So, best place for goods.You know, davey childs tutorial.Now right here I’m going to click on this
template, and you guys can see,this is what it’s going to look like,
right here. So,I changed the header, it’s black.And this is black, and this is grey.
We have a white background.Best place for goods.
So any changes that you make right here,will be on all of the emails.So you want to make sure that
you have a design that you like.Now let’s just say, for example,
you want to add in your logo. Right?So over here under media,
you click on library.Alright.And now the URL that you need is…
click on any of your images.Now you see right here it says, URLI’m going to click on copy.And we’re going to go back
to our WooCommerce.WooCommerce and settings.I’m going to go to emails. And we’re going to go
ahead and paste that in there, right there.And go to save changes.Okay? Now we can actually
go ahead and click on preview.And there you go. So now
our logo is there, okay?So if you want that, you can go ahead and
do that, that’s how you decorate your emails.So, save changes.Integration.We’ve already done that. And API,You don’t need to deal with web hooks
or keys or any of this stuff.This is more for the developer aspect,
and it’s a little bit more complicated.So later down the road when you get,
you know, advanced,you might need to use this,
but for now, we’re not going to.So let’s go ahead now and
check out on our website.So, visit site.I’m going to go to our shop.
This one right here.And let’s go ahead
and buy one of these.So right here I’m going
to go to add to cart.View the cart.So here we have flat rate. 9.99,
just like we did before, right?Or we have free shipping,
and then I put (over $50).So I’m basically letting the customer know that,
if you buy something over $50,Then you will actually
receive free shipping.So that is a way that you can,
you know, get free shipping.So right here, I’ll go to proceed to checkout.And the customer will need to put
his billing information right here.Last name, company name,
all this stuff right here.Then, right here you can see
that we have the shipping.And then the tax right here, we put the…
we actually set the tax for a tax dollar,So they calculate the tax for us.
And then we have the subtotal right here.So, right now we only have PayPal.Okay, so, we need to basically
figure out how to get Stripe,Because let’s be honest, you know,
they have to proceed to PayPal.They have to go, you know, to another part,
they have to go checkout, make an account.And if they don’t want to, guys,
that’s it, you just lost a sale.So, doing that with just PayPal
is not recommended.So we’re going to download
a plugin really quick,and we’re going to show you how
to actually checkout with Stripe,which is basically a credit card.
And since we have the SSL on our website,we don’t need to worry about that,
because Stripe requires an SSL,however, we already have one.
So that’s pretty cool that we have it.So, dashboard. I’m going to go ahead
and scroll down over here to plugins,and go to add new.And we’re going to go over here and type in Stripe.And the great part about Stripe, guys,
is that you don’t need to have like a credit thing,nothing like that, so you don’t
have to apply for credit.A lot of the payment processors,
they require that stuff, so it’s pretty crazy.So you are right here.You guys can do a Stripe payment gateway
and make sure it’s by WooCommerce,and click on activate.Alright, so we’ve activated
the Stripe plugin.Now we’re here, WooCommerce
Stripe gateway.Settings. Guys, this is really,
really, really easy. Okay?So you want to go ahead
and enable Stripe.Now, title. Let’s just put credit card.
We don’t want to say Stripe.We don’t need to tell our customers
like who we’re checking out with,or who we’re working with. T
hey don’t need to know that.So pay with your credit card.Okay?So we have this section.Now, the only thing that we really
need is this information right here.So we have test mode, and we
have the secret key etcetera,So all you need to do is
go to stripe.com.This website right here. Go to dashboard,
or go ahead and click on sign in.Go ahead and create
an account. It’s free.It’s free to make the account, guys,
you don’t have to pay for anything,It’s all free to make the account. Okay?And once you’re done
making the account,You’ll be brought to a page that looks
something like this right here.So this is my home. Now you might see like
a bunch of pop ups or something like that,Saying, hey, you know, you know, let’s show
you how to use this, or something like that.You can follow those. You know,
it’s always good to learn more.This site’s really good, because they take like a…
like a 2% fee or something like that, 3% fee.And that’s it. And they automatically
take it to your bank account,So they do automatic transfers
all the time.So this is a really, really,
really famous processor.So, you’ll first need to activate
your account.So, of course you’ll have
to activate your account.Tell them about your product, your…
you know, your account information.If you have a EIN number.
If you do, you can enter it.You can enter in all your
information right here.Your statements, your phone
number and your bank details.Now, why they need your bank details, because once they transfer it,they’re going to need to transfer it
to a bank account, right?They’re not going to transfer it
to your PayPal account, because,You know, they’re already a processor.They want to basically take the money
that you get from your website,this money right here
will then go to Stripe.This money right here will automatically
go straight to your bank account.So, you will need to give them
a bank account number.Now this is only if you want to use Stripe.And I recommend that you do,
because it’s very simple to set up, okay?So once you’re done verifying your
account and all that other stuff,you can kind of like, you know,
go through all these settings right here.I check all these out, like customers.Right here, they’re like, hey,
you know, this is on hold.You know, make sure to add your bank account
right here because you have $320 on hold.You have customers.
People have bought your stuff.Your products. You have your API, etcetera.So right here I’m going to enter in
my information, for my API.The API is very important.So right here, I’ll do it one more time.You know, I always forget my passwords.Okay.So, this is really what you need right here.So after you’re done verifying your account,
you know, confirming it in your email,Entering your information,
this is all you need. Okay?And this is going to connect
the site together.So right now, you can see
this right here, it says,Do I want to enable this in test mode?If I do, enter your secret key right here.And that can be found right here.Okay? Paste that.Now enter the other one right here.Now once your site is ready to go live,You would uncheck that box and
then put in your live secret key,and your live publishable key, is that how
you pronounce it? Publishable? Alright.So over here I’m going to go ahead and say, okay,I want to go ahead and do that.
Now you can also haveThe Stripe checkout, which is like
a more hip way of doing it.They also have Apple Pay.
Really, really cool stuff.So right here, oh, you can
also save credit cards.So I’m going to go to save credit cards.
And that’s also very helpful.I mean, that will make a sale guaranteed.So let’s go to visit site.And let’s go ahead and go straight to our cart.Actually, let’s go to our shop really quick,
and let’s go ahead and add in,Like, an item or two, or something like that.So we’ll click on this right here.I’m going to add this to the cart.
Now really quickly, If you want to edit this, right here,Your shop page and everything like that,
you’ll need to go to your theme customizer.And this is just, like, a quick thing, I’m not going
to show you how to customize everything.And you can go to, like, buttons right here.
Buttons and style.And simply just, like, change the stuff
how you want it to look right here.And also, like, thethe like the general settings,
or the general settings right here,Topography right here. Now keep in mind,This will change it for your entire website.So that’s a big drawback.
But it you want this look, like,where you can decorate
the buttons with everything else,you can go ahead and do
that right here. Okay?But I’m going to go click uncheck right here.Now I’m going to add this to the cart.
I’ll add another one.I’ll add another one.And I’ll click on view the cart.Now the great part about this guys,
is that our tax is already automated.So they already know what tax, where I’m at,
so they’re just charging me the correct tax.So proceed to checkout.So right here, I’m going to put in
my billing details.So I’ve put in all my billing
details right here.Now scrolling down right here,I’m going to go ahead and enter in
like a credit card number.And then right here I’ll do, like, 25, And then one, two, three.Okay, so keep in mind, the order
is for $163.13, alright?So 163.13, remember that number.So right here, I’m going to go to place order.And the order is processing, just like I showed
you guys in the tutorial, and there you go.You have just made money.Now, you can always double check
this by going to your Stripe account.So I’m going to go to home right now.Now you see how this kind of
went up right here?So we can actually go ahead and
use our… see our transactions.So let’s go ahead and
load new payments.So you see right now, $163.13
is what we just made.So this goes right to your Stripe account,And then this will automatically
go to your bank account.It’s actually on, like, a two day
cycle or something like that.So, again, over here, 163.13, and
it goes right to your Stripe account.Now, I recommend this big time guys,
because PayPal alone is just not enough today.You know, it’s going into 2018
next year, and, I mean,only one payment method for
PayPal is really not ideal.So also, if you want to set up the likethe payouts and everything, you can,you know, do your add to bank account.And I think over here, you see where
it says the payout schedule?You can do, like, daily,
or change the schedule.Or just switch to automatic payments.I’m sorry, to manual payouts,
which is basically saying,you decide when you want the money.But they will actually transfer all the money
in your Stripe account to your bank accountevery two days.Now you can change this to every week.You can change this to twice a week.You can change it to once a month.Whatever you would like. Okay?So that’s basically how you
guys would set up Stripe.You guys can see it’s very easy to set up
and it’s all an automated process.So now let’s go ahead and
talk about coupon codes.You know, up here, click on plus
new and go to coupon.So, I mentioned coupon codes,
and guys, coupon codes are like,The bread and butter of your store.If people think they’re getting a deal,they will use it, and they will buy something.You know, if you give someone 20% off,they’re going to use it. I guarantee it.Even just now, when you guys
saw the coupon code,10% is better than nothing, right? Soit’s really, really good to have.So, if you want to have coupon
codes for your store,Let’s go ahead and add one.
So right here I’m going to putDaryl 100,and you can give, like, a description
of it, talk about it.Now you have a percentage, a fixed cart,
or a fixed product discount.So if you want a fixed discount
on the cart, you would put that.And then you can, you know,
put a number.Or, a specific product discount,
you can go ahead and put that.But generally, I think most people
use the percentage discount.It’s just easier for everybody, it’s easier to understand,
and it just makes everybody happy.So I’m going to put 25%.So basically I’m saying,
if they use this coupon code,at checkout they will get 25%.Now, do they get free
shipping with this?Well, probably not. I’m going to say no.Now when does this coupon expire?
I’m going to say to the end of 31st, or whatever.Usage restrictions. So, do they have
to spend a minimum or a maximum?Can this be used with
other coupon codes?So basically, can this stack
with other coupon codes?Now, if you have an item already on sale,
do you want to exclude those items?So, for example, if you made
an item 50% off already,will this coupon code apply to it?If you do not want it to, then you can
click on this check box right here.And also, you can set up specific
items for sale right here.And also, specific categories.
And you can alsoexclude certain categories as well.So usage limits. Right here we have
the usage limit per coupon.So how many times can
they use this coupon?Limit usage to x items.So how many times can a specific
item be used for that coupon?And then also here, per user.So right here, I’m going to click on publish,
and let’s go ahead and use the coupon code.Alright? So let’s go to our store.And I’m going to go to our…
let’s go ahead and go to our shop again.Let’s go ahead and add something in.I’m adding this cute shirt.View the cart.And I’ll simply go ahead
and paste this right here.Oh, not this one. So, Daryl 100.So this will give a 25% discount.So click on applied coupon code,and you can see that’s moved $12.50.So we’ve basically saved money. So that’s basically
how you guys can apply coupon codes.It’s very straightforward, it’s very easy.And a good idea is to promote those on, like, you know,
Instagram or Facebook or something else.So in this section, guys,
I’m going to show you how toCreate product categories
on different pages.I’m going to show you how you
can add it to your menu.And I’m going to show you how you canput them anywhere on your website,So if someone were to click
on a certain button,it would take them directly
to your product category.So the first thing I want you guys to do,
is enable the visual builder.I’m going to show you guys a really, really
cool trick that will save you a ton of time.So right here we have our shop page.Now right here, under this purple icon,
I’m going to click on that,and click on these
two arrows right here.Now I’m going to export this layout.So I’m going to put something
like the shop page demo one.And go to export divi builder layout.So basically, what I’m doing,
is I’m making a copy of this page.So we don’t have to redesign
everything all over again.So after I’m done with that,I’m going to go over here to plus
new, and go to page.So, whatever product category that
you have, or like for example,let’s say you have belts,
you would type in belts here.So this is going to be your
product category page.So if you’re selling shirts,
you’re going to put shirts.Or if you want to link them to belts,
or pants, or shoes, etcetera.So here I’m going to put
women’s on sale shirts.And I’m going to click
on enable the divi builder.And right here, I’m going to click on,
use the visual builder.Alright?So we have this thing right here. Now again,
we’re going to click on this purple icon,and click on these two arrows.
And now this time, we’re going to go to import.And we’re going to go ahead
and choose the file.So, this is under my downloads right here,
and I think it is like, the shop demo,the shop page demo one,
and click on open.Now, I'm going to click on import
the Divi builder layout.So all’s I’m doing,
is I’m just creating a replicaof exactly what we created before.So we don’t have to spend all that time
redesigning everything, right?It’s going to save us a lot of time. Now,
instead of actually putting the products right here,you would click on the gear icon, and then you
would simply select the category right here.So for example, if this were only the belts page,
you would click only the belts.If this were only the shirts,
you would click only the shirts.So right here, this was the on sale clothes.So, only the on sale clothes
category will show up.So I hope you guys understand
that you don’t have to,like, you know, recreate
everything all over again.So right here, the shop module
makes it very easy for us.So right here you can see that it’s just
the on sale clothes, okay?So I hope you understand that, it’s very
straightforward, very easy to understand.So right here we click
on check and publish.So now this is the on sale shirt section.So let’s say, for example, that I want to link
this part to a different part of our website.So right here, I’m going to click
on exit the visual builder.Now you see this permalink up here?
I’m going to go ahead and click on thisand go to copy.So now we can go to any part of our website,
and link this to our website.So let’s go ahead and scroll down
right here. Or go to home.Now right here, I’m going to go
to enable the visual builder.Alright?I’m going to just click on that,
it’s asking for a restart.Now I’m going to scroll down
right here. All the way down.Now you see this right here? Maybe this is
the section for on sale women’s clothing.You know, depending on how
you make your website.So right here I’m going
to say this is on sale.So right here, on this gear icon,
I’m going to paste that permalink right there.Click on that, then I’m going
to click on save.So remember, you can guide them to any product
category that you would like for your website.So I’m going to click on
exit the visual builder,and now I’m going to go
ahead and scroll down.Just keep scrolling.So right here, how it says get the look.Now if I click on this, it’s going to take
them to the on-sale products only,because we’re linking them
to that specific page, okay?So it’s pretty amazing what you guys can do.A lot of other themes don’t have this, guys,
so it’s truly, it’s a beautiful piece of technology.Now another thing. Let’s say they
go ahead and hover over your shop.How are we going to show
them where to go?So let’s go on over here to our dashboard.
I’m going to show you how to do that.So appearance. And go to menus.Alright?So, this right here, for the categories,
I want you to go ahead and delete that.Or if you have a category, do not use the product
categories for this section right here.Now the reason why we don’t want
to use these product categories,is because it’s actually going to use
the old default one from WooCommerce,and we don’t want that. Now,
under pages right here, go to view all.We’re going to go ahead and find
that page that we created.So, women’s on sale shirts.So instead of using these old
product category pages,The ones that are default, we’ve actually
created our own special page for it.So click on add to menu. Now right here,
I’m going to take this section right hereand simply go ahead and
put that under the shop.Now right here I’m going
to click on save menu.So what I’m doing right here, is I’m actually
saying, this is a sub-item for the shop.So if they hover over shop, they’re going
to see women’s on sale shirts,right there.And again, if they click on it,they’ll be taken directly to that page
that we just created, right here. Okay?So, in that aspect, you guys can link them to any
sort of product category that you would want,or any specific sale.Now another thing I want to point out about
those importing and exporting layouts,depending on your sever, it’s kind of
funny for some of them.For Hostgator's kind of weird,
for other companies it’s like, eh,It doesn’t work sometimes. So,
another way how you guys can do this,is by going over hereto our dashboard.And we’re going to go ahead
and scroll down right here.Now, under divi, there’s a divi library.Now this is another way
you guys can do it.So, the layouts.
You can click on add new.Oh, I’m sorry, import and export.And we can actually import
that layout from here as well.So if that did not work for you earlier,this is just another way how you
guys can import those layouts.So you guys can see right now,
it’s importing.But for sometimes guys,
it just doesn’t work,and just go ahead and just,
you know, give it a try.You know, I know for some servers
it’s a little strange.Now, another way you guys can do this
besides the way I showed you,was to go to all your pages.And then, you know, click on add a new page.Then click on the visual builder. And you can
actually import it from here as well.So right here I’ll put, like, pants.Now, the layouts guys, I got to be honest.It just depends on your server,
guys, it really does.It just works for these three methods.And I don’t know why it’s like that.But depending on your hosting company,Importing the layouts can be kind of strange,
depending on your server.So right here you guys can see,
using this method, it worked. Okay.So there’s three methods.
There’s one using the visual builder.There’s one using the back end. And then
there’s one using the divi library. Okay?So, go ahead and mess around
with each of those threeTo actually import and
export your layouts.And depending on your server,
or your hosting company,it will work from these three methods. Okay?Now, another thing that I want to point out,that we’re going to talk about
the variable product next.But I want you guys to actually,like, go to YouTube and just
type in like WooCommerce.Now, my tutorial is number
one right here.So this is my tutorial on WooCommerce, and guys,I go over everything. I go over
every single option,so I don’t want to spend a lot of time
talking about other products,or, you know, deep, you know, shipping,
or API’s because this is my tutorial right here.And, Oops.So right here I talk about, like,
is shipping taxable etcetera.And you guys can see, you know,
I have a lot of likes, a lot of people like it.So I don’t want to spend another two
hours talking about WooCommercebecause a lot of the options… I’m sorry,
it’s just very repetitive for me just to create,you know, duplicate content
and keep talking about this.So if you guys have questions
about WooCommerce,and you guys want to learn
about the other products,Because right now I’m just going
to show you about variable products.But if you guys want to learn more about,
you know, grouping, upsells, cross sells,all that other stuff, I have a complete
tutorial dedicated for that, okay?So let’s go ahead now and
create a variable product.Alright, so go ahead and give
your product a name.Let’s go ahead and do,
like I’ll do girls cool shirt.And then right here again, you guys can
add in your long scale description.I’m going to go ahead and delete some
of this right here, I don’t need all of this.So over here, I’m going to grab
some demi text really quick.Just for (inaudible) purposes,
you know, just to make it easier. Alright?So right here is what we’re going to create.
We’re going to create the size, the color, etcetera.So I’m going to go ahead and
just copy all this demi text.Okay, so a variable product.So if you want it to look
like this right here,Where they have a size and
a color, something like that.We’re going to go ahead
and make that right now.So right here, this is your
long scale description.Okay, so, again, it’s going
to show up right here. Okay?So anything that you put right here,
is going to show up right there. Okay?Next, let’s go ahead and change
this to a variable product.Now again, if you want to learn how
to do grouped and affiliate,I recommend watching my other tutorial.So again, guys, we have like the inventory.
We have already kind of done this with the single product,So you know, you can manage stock, tell them
how many you have. I have 50 of these shirts.Shipping.Now we don’t need to mess with shipping, but you guys
want to learn more about shipping classes,you guys can watch my other tutorial.Also over here are attributes. So we need
to actually add some attributes.And we actually need
to add in some variations.So if you go to variations right here,
it’s saying, before you can add a variation,you’ll need to add some variation
attributes to the attributes tab.So over here, attributes.
I’m going to add one right here.So we have none. Let’s go
and add one. Let’s add size.Now right here I’ll put small.Then right here I’ll put medium.And I’ll put large.And I’m going to select
use for all variations.Right here I’m going to click
on save attributes.Okay?Now for variations,
I’m going to click on that.Go over here, and go create variations
from all attributes. And go to go.And it’s basically saying, are you
sure you want to do this? Yes.Yes, I am sure.Alright? So we have large,
we have medium, and we got small.So large over here,
I’m going to click on this icon.And I’m going to put a picture for large.Now, you have to do this
for each specific one.Okay, so for large,hw much does this cost? Now guys,
you must put a price. Okay so,it costs $50 for the large.Okay, you can select a sale price.
You can put in stock.You can put the weight for the large.
You can put all these settings right here.If you want to put a sales price,
you can put it right here.And you can also schedule
the sale as well.Okay, so let’s go ahead and move
down to the medium one.Medium?Same thing. I’m going to go ahead
and just put in this one right here.And then again, we’ll put $50.I’m going to leave all this blank.And the last one.Click on that one, and we’ll do this one.And you’re going to put $50 again.Okay? And then I’ll click on the… actually,
I need to set an item right here.So on the product image,I’m going to go ahead and
select the girl right here.Or, we can just do that
one right there instead.Now you don’t really need
to have a product gallery,because when they hover over it,
it’s going to change image anyways.So, it’s up to you if you want that or not.Now, also, product tags.You can add in a tag. So,
for example, like, shirt.And you can always, you know,
add in a categoryor make it, you know, a new category.So I’ll just put, like, a variable.
Or actually, no.Because we’re actually going
to see the product name.So put, like, women’s shirts.And categories, guys, are very,
very helpful becauseRemember, you can link them
to certain parts of your websites.So let’s go ahead and publish this site,
I think we’re all ready to go.So I’m going to click on publish.I’m going to do that one more time,
that was kind of strange.Okay. I’m going to go to view product.And there we go.So, right here we have size.
We have small.Medium. And we have large.Now, right here it says 50 in stock,
because I entered 50.And also there’s no, there’s no,What do you call it? There’s no
text right here thats becauseWhen I made the product,
I didn’t add anything right here.So you want to make sure that you
add a lot of stuff right here, okay?So just for your own knowledge, that you’ll
actually need to put some text right there, okay?So right there I can go to update.And now if I go to it, you’re going to see that
the product now has the text right there, okay?Now let’s say you want to add in a secondary one.So we just have size. But what about color?
Maybe there’s a specific color for this, right?So I’m going to go to edit product.Scroll down right here.Now, attributes.We’re going to add in one more.
So right now we have just size.But let’s go ahead and add in
another one. We’ll do color.And then we’ll just do
something like black.And we have like.And I’ll also put use for all variations.
Save attributes.Now for the variations. I’m going to go ahead
and do create variations from all attributes.And go to go.Okay, so we have the large.We have the… well, we need
to delete this one.So we only need the large white, the large black.
We don’t need the any color.So I should have actually changed that up there.
So right here I’m going to remove this one.Remove this one.And remove this one.So the any color, we don’t need that.So right here we have a large white.
A large black.A medium white. A medium black.And a small white and a small black.So right here, we need to set the image
and the price for each one.So I know this can be a little tedious,
guys, I know it’s like, a lot.But you only have to do it one time.So right here, I’m going to select
that one, and I’ll put $100.Or, yeah, I’ll put $50.Now for the large black. Now, you’re going
to have to change the image here,Because if you have it on, like, a white, it’s going
to look different, or it’s going to look white.So you need to make sure that
it’s the color it’s corresponding to.So scrolling down here,
I’m going to put $50.Medium white. Go ahead and select this.And I’ll put the white one right there. $50.Medium black, same thing.I know this looks a little tedious, guys,But this is e-commerce,
and this is kind of what it takes.Because people out there
want convenience.They want it simple, they want it easy.Oh, this was actually white.
I put the wrong one. So I’ll put white.Why didn’t you guys tell me? Huh?I told them so the medium black,
we’ll put the medium black right hereAnd then $50. Scroll down here.And lastly, we have the small black.So I’ll put this one right here again.And I’ll put the $50.Alright? And save changes. Alright?Alright So now let’s go ahead
and click on update.And now let’s go ahead and view the product.Alright, so we have the size.
I’m going to do a medium.What color? Black.So you can see now, black appears.Now we have white. A large white,
or a large black.So it’s going to basically change
because of what we put on there.That is a variable product.And guys, if you want to learn more about
WooCommerce and all of the settingsand all of the products, I highly
recommend to check my tutorial.I’ve made one specifically for WooCommerce.It’s about an hour and a half long,
it’s very thorough, it’s free,and it’s very easy to use.Now if you guys are interested
in doing something likea booking website, or product add ons,Such as like,for this, you know,
for 5.99 more, you can do this.I have a complete list of tutorial guys,
for shipping, for like naming your own price,for bookings, for product add ons,
for subscriptions, for add on…I mean, all sorts of stuff, guys.
I have a lot of tutorials for a lot of different things.So I’m very comprehensive and
I’m very thorough on all of these.So go ahead and check out my channel,
go through all of these.They’re very, very helpful, they’re very
thorough, they’re very highly rated,and it will save you a ton of time
trying to learn it yourself.Just spend the time to like you know,
just go through it, learn it, understand it,and I guarantee you after that you guys are
going to be saying, dude, I’m so happyyou made these tutorials and it was actually
very, very, very easy, okay?So that’s about it, guys, for my tutorial.
I know it was very, very long.But hopefully by now, at the end
of this tutorial, you guys understandhow to, you know, set up your
e-commerce websites.It’s very, very simple. It’s not hard.Everything’s, you know, pretty automated,
and you know,feel free to comment on this video and
let me know what worked for youor what was difficult, etcetera. Okay?So other than that, guys,I hope you guys enjoyed this tutorial,
and I’ll see you guys later.
Source
