Divi theme eCommerce tutorial First Product Page Creation


hi guys and welcome to another Divi
theme ecommerce site bill this is Jamie from system 22 and web designer tech
tips calm in our last video we pretty much created
our or completed our front page here so I’m fairly pleased with it so far now in
this video let’s just create a product page to sell some of our products once
we’ve got the one we’re gonna save it as a template so we can create the other
pages really quickly and before I do that I want to slightly modify this
little section here and I’m going to use this section as a template
for the top of our product pages so if I
enable our visual builder a minute and once it’s enabled what I wanted to I
think I’m gonna bring this down slightly if it’ll let me don’t think it’s gonna let me do it from
right here don’t want to do it too the whole thing I just wanted to do this
particular section right here okay let’s sit at this section and I’ll add some space at the top so this
title is more central here so we’re gonna have some custom padding at the
top say it’s Troy 150 pics and see what that
looks like a little bit too much you try yeah I think that’ll work that’s that’s
kind of almost central there now what I’m gonna do is I’ll just save this
quickly I’m going to save this whole section right here I’m going to call it
header so I’m going to use it for the head of our next pose so let’s save our changes and once saved we can exit the visual
builder I’m just going to hit the plus for a new
page you now let’s call this page dresses I am
definitely going to use the Divi builder and for a start I’m just gonna add from
the library there’s this header section we just
saved to get rid of this section alright let’s
just update this or I’ll publish it and preview the changes
and what we’ll do we’ll do everything else with the visual builder okay so
here’s what we’ve got so far obviously I don’t want these two here so I’m gonna
enable my visual builder you now that’s enabled I’m gonna edit this
module right here which is a shop module and I’m gonna just say
product category really just wants to showcase a couple of shirts or dresses – in there that’s fine save those changes over here I want to
edit this to say dressy and obviously put your own content in
there I’ve just got some lorem ipsum dummy text for the time being and what
I’ve created another section below which I’ll do in a second I’m going to
have that button go down to it so that’ll do fragile you know this
makes a good little segue into our next page and I can use this and just modify
it for each one this background image I’m gonna change cuz I don’t want that
belt yeah I’d rather have one of these young ladies in a dress so let’s go
ahead and change that you we’ll be the background
let’s get rid of that now let’s see what we can find can probably use one of our
slide images that we had before we want somebody on the right something like that or here’s our slider images any of these
with an image on the right not that one because it’s got shoes on it
drop bags on it let’s use that one and see what happens
yeah I work fine okay I’m gonna do this pretty quickly because
you know how to do most of this so I’m going to move on down now I want to add
a new section have a regular section can I have just
one row there and of course we’ll use our
shop module but I’m gonna add it from the library because it’s got all our
customizations in it it’s fine and let’s go in and I’ve got the wrong thing
one of me let’s go in and say dresses I’ll be a bit of duplication because I’ve only got you
four or five of each runs well say yeah six chuffing already got four you yeah addresses category thinkers I’ve
only got four let’s just make this a little more
interesting and let’s change this it’s what’s around
it’s changed this too
let’s say half-and-half you in this module over here
you so I shot module with our dresses in it
and what I want to do is because I’ve only got four products I’m going to add
something else here I’m gonna have a slider I’m just gonna click on that
first I’m gonna give it a title let’s give it a title white which we
won’t see at the moment because the background is white so let’s
change that quickly change our background color to our blue color we’ve
been using which is 10 ca ca there we go you can see the title now okay and just change this to something
like chic or something like that if that’s how you spell and a little subtitle subtitle text white as well you you don’t think I won’t take shadow but I
will make it central ok now under here let’s put a slider
Oh your photo Slyder you okay simple slider get rid of that long edit this one you
I’m not going to have a total that’s what I’m going to have on the button and I don’t want it content now all I
want is an image in the background yeah
working with dresses let’s start with this one let’s add a bit of padding to that
button or
would have been a custom CSS that’s the button see same margin-top Oh
let’s give it hundred and fifty pixels and see where that takes us
bit more pretty much there
you yeah work that way we’ve got our just
a single image here with our button and that tag I’m gonna copy this link
address here click it and open it in a new tab it’s taking it that’s the URL I
want to use for this button right here so if we go back here the link I’ll put that in there so if
they click on this show me it’ll take them to the product page for the dress
and in further videos we’re going to show you how to customize that product
page so I’m gonna Duke
okay that slide this one again I’m just going to change that
background image so use that one I’ll use that one next again I’m not going to do it here but
I’d change the link now to that product page for this dress here and let’s move on to the next one this one and again we’ll change the background
image and let’s use I guess this one and again I’m not gonna do it now but
all you need to do is change the link over this dress’s page okay so I’m happy with that turn on animation so it scrolls through automatically
so I’m going to turn arm on the design tab I’ve gone down to the bottom I’m
gonna go to automatic animation just switch it on I’m going to change that
from 7,000 to 4,000 and save it as I put for him
I mean it clicks slightly it’s just save that and I’ll relay the page there we go let’s reload the page you there we go a little slide it should be
working normally that’s fine also what I’m going to do is
I’m going to give this section an ID so in advance custom CSS CSS IDs and
classes I’m going to give it an ID of di s dresses why am i doing that you
asked but some of you probably already know we go back up to this one now and
edit this button and we want to go to the button link we
put hashtag DRS because it’s an ID we use a hashtag and the name we use with
DRS saver click on it now click on it now takes us
to our dresses page let’s just say this I wanna turn on
smooth Scrolls see if we can get that scrolling smoothly it’s a tough one to
say rather than jumping down there let’s just see it me because I had that
visual builder on so I turn it off let’s just try that again oh it does smooth
that’s fine because I had a visual wheel wrong
so now it just goes down to the dresses which is just exactly what I wanted okay let’s just add another little
section below this one and evil laugh is your builder again you they say I’m rushing through this quite
quickly is that we’ve covered most of this before it’s a new section again I’m gonna have
a regular section and again I’m gonna have one single row there inside it I’m
gonna have our shop module for a change so what we are using this sage one now
all the time because it’s got our custom CSS saved for our Styles here okay and
let’s go in and change what we’ve got sale products is what I want there no
it’s not let’s go for accessories seen your checkout page later on we’ll have
some blocks that use the featured products and stuff like that which is
great if people been recently looking at stuff you can have recent products and
fantastic little features here right so on a product category and I’m going to
go for accessories which would be by my understanding bags and belts stuff like
that I guess okay yeah let’s have six of them and let’s have three columns column number three should do that I just want a little
title in there there’s our three little things which is
great just want to add the title I don’t want
that’s a white title I want one that said just title which is blue great it
actually says accessories which is even better because that’s what I was gonna
write in there fantastic now let’s just add a little
section to segue between the two I’m not sure if
I want to put it on the bottom of this one all the top of this one it’s
dripping on the top of this one design dividers
top and that’s what we use that curvy one we’ve been using
is that one that’s it that is exactly what I want right there why make that curve a little more
actually designed to dividers here we go let’s
meet the divider hike just a little bit more
you now I know it’s bitten off our
accessories right there some of this by taking them up a little
bit and actually free
this module so there we go to about there just so we
can see that okay and just that’s pretty much what I
wanted there just make this a little more interesting I quite like the
background because it offsets everything here but what we’ll do these titles here
don’t stand out they really need to be back color our thought so let’s just
modify this and it’s gonna be the title text which is the moments right
but which at the moment is white I should say let’s make it that blue color
10 ca ca okay it’s okay but I don’t like the drop shadow now because it’s sort of
giving me double vision there so let’s take the drop shadow off is text-shadow that’s a lot here that’s
better and what I want to do I’m now going to
see this module is shop blue so we’ve got a version with white writing and
we’ve got a version with blue writing you now then like I said I quite like that
white background but let’s just make it a little more
interesting I’ve got a background which has got a bit of this split like this
background up here it’s got blue on one side and white on the other I think that
might help like this look a little more interesting so let’s just try it and see background
you background image this one’s got a person on it but I
think if I put it on the left you won’t see that person let’s try it
it’s fine like that it’s fine see if either lined it to the right you see that lady in there actually not
too bad really didn’t want anybody in there four align it to the left you’ll
probably have too much blue yeah it covers our accessory so let’s keep it
Center centered
you you you
yeah I think never worked top center that kind of fades in nicely there and
still see all these products you can still read that writing fine good right moving on down let’s quickly
add another section I’m going to add a parallax section again it’s going to be a regular section again
single now I want the shop module with the
white so ad from library which we just shot on its own that’s pretty much what
I want I have all the sale items here so
she’s just put in my background quickly I’m gonna make this a parallax
background again like we did in the earlier videos I had a background image
that’s the one I’m going to use again I’ve not been putting in old text
if you’re building your site for yourself or somebody I’d advise you to
put in some keywords here either describing your image or keywords about
the products that you’re selling on your site that’s fine and let’s set the
parallax now choose great blow on a little bit more dramatic than true
because it’s loose slightly but I’m just use CSS products which really isn’t
parallax but everybody calls it I like so I shall
continue to do so alright now let’s edit this section you and you have a product count of eight
hopefully I’ve got eight sale product and again four columns that’s fine
yep good I have got eight good that works and let’s add a title now I want a white
title is when we saved title white n Topsail that is fantastic I’ll call this one up here good we’ve almost done our page I don’t
know how long it’s taken about 20 minutes but because I’ve been yakking
all the way through it and let’s add a little Segway divider
here I think our regular one might work – look divider top anyone again yeah that’s perfect he looks just justice lightly we’ll
bring that down just a tad it’s fine all right well we’re about done with
this page now thank goodness you say I just want to get this done so I can show
you how to save a template page template then it’s gonna be so easy to build our
other product pages it’s just ridiculous okay a new section this time I’m just
gonna add one from the library I’m gonna add that counter section that saw sale
sale section that we have it’s fine good and let’s put a divider this will
put it on the bottom of this one use that same divider obviously inverted kind of been setting the theme for it
really let’s see what it looks like yeah I’ll work Debbie makes it so easy now
just got to add one more section with an external library and it’s our
footer bingo let’s save you you you and exit the visual builder you there we have it there’s our product
page one for our dresses well that’s quite legible there let’s let’s just move this
little lady across the right-hand side I’m not this will work or not it’s top left at the moment
I had it’s moving that I can’t move around the way unfortunately I really can’t read that writing there
so I got two options I can put something behind here to make it more legible or I
can use a different picture I think I’m going to use a different picture
I mean I could stretch the picture but let’s just use different she’s just a little tooth
over yeah Oh works are good okay so there’s our page you now let’s exit say you there we go and now I’m going to edit
the page you I’m going to say this to the library pyaare peach product pee now I can add anything now there’s no say there’s no changes to
save there okay let’s cool this one Sheriff’s use the Divi Builder load layer my
save lives Meredith Prabhat Paige PRP and right away
I published this you as long as you’re happy with the styling
of your initial page you we go to the preview changes you okay that’s not what I want let’s fill
it what’s going on here page layout don’t want any sidebar so it
wants to be full width don’t want to show the page type want to hide
that something’s that you I’ve hit the preview changes
and when it loads that particular that’s more like it that’s what I wanted that’s
all we needed to change so now what I need to do is enable my visual builder I’m not going to go through all of this
I’ll just show you in the first couple of steps I’m gonna take and it’s all
pretty obvious I’m sure you know what to do and once our visual build is loaded here you I’m going to go in here I’m going to
change this to product category of shirts check dresses I’m gonna save the changes I’m gonna go
over here I’m gonna change dresses to shirts and we don’t even need to change the
link because it’s same IV below its gonna go down to it like that and let’s
change that background image I mean it’s very pretty lady but I guess we don’t
want on every single page and again I think we’ll use one of the slider images
hopefully a winning coach too much let’s see you we can probably even use that when we
use before we’ll try our yeah I think that’s still legible moving on down just need to change the
title change what you want to change your slide backgrounds
change your shop versions and all the way down now I’m not gonna go through it
cuz I’m sure you know how to do it but you can continue doing this until you’ve
got as many pages as you like for your product then you’ve got some great
looking product pages and it really takes minutes once you’ve created the
first one so there you have it I hope you’ve enjoyed that that’s how to create
your product pages quickly using the Divi theme saying this makes it
I hope you enjoyed that if you have please like the video and subscribe to
the YouTube channel if you’re interested in web development
please take one of our courses below we’ve got some great courses down there
they’re hugely discounted for our YouTube subscribers we’ve also got some
fantastic free courses once again this has been Jamie from
system 22 and web design in tech tips comm thanks for watching have a great
day

One Reply to “Divi theme eCommerce tutorial First Product Page Creation”

  1. Hi Jamie – Thanks again great stuff – can't wait to see the customisation of the product page so nice to see Divi being used with WooCommerce – Thanks again

Leave a Reply

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