April 2, 2020
Divi theme eCommerce tutorial Add Pages To A Menu

Divi theme eCommerce tutorial Add Pages To A Menu

hi guys and welcome to another Divi
WordPress theme ecommerce site built this is Jamie from system 22 and web
design and tech tips comm well in our last video we created this product page
and once we created it we saved it as a template now since then I’ve just gone
ahead and created a bunch more pages and shirts shoes etc addresses that template I’m just gonna go over
that again quickly in case you didn’t see the last video or anybody watching
didn’t see that one so I’m going to go out to new go down the page
you now let’s call this page accessories I’m
going to use the Divi builder I’m going to load a layout I’m going to load that
layout that we saved last time a page layout there it is PR page product page once that’s loaded I’m gonna go ahead
and publish it I’m going over this fairly quickly because if you want to
see again in detail watch that last video but this should show you exactly
how easy it is to create another product page if that’s published let’s go and preview
the changes and we’ll use the visual builder to just create our new page from
the existing template that we’ve got here
so here’s our existing template page and it’s for dresses
let’s do accessories this time because that’s what we called it
so enable the visual builder now let’s start editing I want to change
this background image so this is the section right here click on the cop go
to background hit that little trash icon there to get
rid of that image put in the image that we want and this is accessory so I’m
going to use that one of the belts on it you
save that now this little section right here is a little darker box here just
want to change that to the accessories or belts so I don’t want dresses I want
bags and belts and we’ll save that
go over here I’m just going to change this title obviously you want to change
that script that’s in there that’s that done if you want to change the script
that’s there just type in what you want to there moving on down let’s just change that chic
I don’t know something like elegant moving on down let’s change these slider
images here we just hit that cog again and hit the slide cop go down to the
background remove the image that’s there and add our new one in save that slide back up move on to the
next one same thing as you see you can do this
pretty quickly especially if you’ve got your image is already there that we have
by backup and let’s do that last one and I guess we’ll do that save that and again now let’s change
these this category to our accessories category
or to whatever category you will want to not dresses though bags and belts I
don’t think there’s anything else that could be called accessories there will
say that those have changed now now underneath here we’ve got term
accessories and top sale items top sale items we’re gonna leave as is but we
don’t want that accessory section I mean you can just cut that out if you want to
let’s just change it let’s just call it something else I’m gonna call it fashion now doing this one my flight not giving
you a lot of thought obviously you don’t want to put a lot more thought into what
you’re doing and in this section here let’s change the categories from bags
and belts two dresses pants shirts and shoes you think that there’s a little bit of
everything in there for everybody okay and that is that page done you see
you’ve just created a brand new page in a few minutes and we’ll exit the visual
builder and it’ll prompt us to save it save and exit you there we have it now what we want to do
now we’ve got these pages created if I go back here see I want to go back here
and refresh here’s the pages we’ve created we just
created that accessories one we’ve got addresses one we’ve got a pants one we
got shirts were now we’ve got a shoes page what I want to do is I now want to
put these up here it’s up to you you can put them here if you want to but I’m
gonna put them up here this is the secondary menu and this is the primary
menu in Divi so to do that let’s go back to our
dashboard and we want to go down to appearance and menus who want to create a menu let’s create a
new menu and call it products hit the create menu button now we simply want to drag the pages
that we want over there and here here we are with the pages if you want to do
posts you do this one you want to do products you do this one custom links
have it link to anywhere I’ll put everything in their categories etc etc
but we want pages right now so let’s open that up I want to add accessories
shoes shirts dresses do we want home up there don’t think I do want home up
there for the time being I might put that there later accessories shoes shirts dresses is that
all there was I guess so all right let’s put home
there as well hit the add to the menu button we’ll save that menu go over here and
hit save menu if you want to reorder any of these like I want to put that home at
the top just mouse over it left click and drag it up to where you want to put
it and put things any way around you want to put it I know I’ll add another sale page in a
minute and we’ll put that there let’s save this menu okay now that’s been saved let’s open up
our theme customizer so down at Divi theme options just below that theme
customizer you now we want to get that menu that we
just created to appear up here let’s go down to menus many locations view all locations
remember this is the secondary although it’s on the top this is secondary this
one is the primary with the Divi theme so here’s a secondary menu so if we hit
that drop-down many of the many we just created called products should be there
and there it is simply do that there it is it’s got home accessories
shoes shirts and dresses so that’s how to update your menu with the Divi theme
very easy to do go ahead and hit the publish that’s pretty simple I’ll be adding a
few more pages like sale and shop to here and there’s actually a cart right
there I’ve done if you can see her or not we need to change the color of that
so you can actually see it you so I published that let’s go back to our
site and refresh and that should change now to our new
menu there we go
and let’s see what we need to do to edit this cart there it is right there so let’s see if we can add background use that blue color we’ve been using yep
that’s giving it that blue background there so we just need it give it some
padding whatever it was we gave the other one I go back let’s just click on
one of these for a moment there’s the padding we used there let’s
use the same padding and the background color so let’s just copy that go back
right-click and inspect on this I’m using the Chrome browser if anybody
didn’t realize here and it’s got this great inspector tools that we’re using
here a chrome inspector yeah that padding is a little bit too much for
that it’s made that button all larger so top and bottom first one the left and
right second one left and right it’s fine and we gotta take that top and
bottom down a bit so I’m gonna select that 10 and just roll down with my mouse
until I get it about right little too small so about seven pics that looks
like it’ll work so now I wanna do is select from that
little hashtag right there all the way to that closing curly bracket that’s
grayed out because we’re not actually on that at the moment but we’ll continue to
do this hit ctrl C to copy that we’re going to go back to our dashboard
close out of here we’ve published it it’s all saved
we want to add this to our custom CSS if we go down to Divi theme options general tab and here’s our custom CSS this is where
we want to put it there’s a secondary mini link so I guess
I’ll put it in there I’m not going to give it another title
I’m just gonna hit control V and paste that in there Save Changes now if we go back to this page let’s
close out that chrome inspector for those have not used that you can just
hit f12 to get that back up or right click on any element that you want to
inspect and hit the inspect button so let’s refresh this and that should stay
exactly the same now that we’ve changed that
custom.css there we go that seems that’s great I
didn’t have to use any forces like important or anything so now this should
take us to all our various different pages and we’re already on accessories
page shoot shirts dresses you and there’s our car there’s nothing in
our cart I think at a later date I’m gonna
customize these stars a little bit further perhaps have these different
colors using our theme colors we’ve got here that and that pink color the sail
color we use there that hopping I think about that will do it but we will
decorate these further and obviously we’ll decorate this menu as well further
on down the road we’re gonna have things like policies page contact us page and a
few other things here we may have our sale page here I might decide to put it
up there but we’ll do that at a later date just make sure our home button
works too yeah that’s fine so it works there you
go there’s how to create and add your pages to your menu
I hope you’ve enjoyed that if you have please like the video and share and
subscribe to the channel if you’re interested in web development take one
of our web development courses below we’ve got some huge discounts for our
YouTube subscribers there’s also some great free courses down there so do take
a look once again this has been jamie from system 22 and web design and tech
tips comm thanks for watching have a great day

Leave a Reply

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