April 9, 2020
Divi theme eCommerce tutorial Parallax countdown section

Divi theme eCommerce tutorial Parallax countdown section


hi guys and welcome to another Divi
theme ecommerce site build this is Jamie from system 22 and web design and tech
tips calm in our last bill week in our last video I should say we did a bit of
customization oil price tags here let’s go ahead and start building some more of
this site now I’m pretty much gonna scrap everything below this blue line
here anyway cuz I just put that in to demonstrate
the shop module so let’s start let’s add little parallax section
I’m going to do a regular section I’m gonna have it and I want to put in a
countdown timer there it is right there and let’s have a looksie little
countdown to random date 28th of June 1042 is
absolutely fine now design-wise I don’t a background even though the content here background
area I don’t want a background so it’s gonna
disappear there she saved that from my own I’ll come back and edit it in a
minute now let’s edit this module and give it a background image and make it
parallax you on image they’re dragging an image that I wanna
ease here and I’ve made it quite long actually it
could be wider but I’ve made it 1578 by 1502 s almost square but because
we’re gonna have it as parallax it wants to be fairly long so you can scroll up
and down with it okay I want it full sir there we are
we’ve put that in the background there I might want to make that a little bit
darker now our use parallax now with true parallax say you see it’s just
moving slightly that’s true parallax it’s actually moving but moving at a
different rate to everything else but I’m gonna make it CSS which is a
little more dramatic which actually makes our image stationary and
everything whoops I turned it off I’ll make it CSS parallax which makes it
stationary and everything else moves round if you like that which is a little more dramatic the
other one’s very clever but that’s the effect I wanted this time so come on
when you’re rolling down it sort of reveals that young lady there
so that’s good one pretty happy with that so let’s leave that there and now let’s edit this module
and it was a huge fashion you and I want to make that text a little
bit bigger like an h2 I might want to use that volcko again
try it and see it’s one I’ve been using before and it’s sort of similar to their
palette well they get a lot bigger they’re the
size colors okay you you that’s fine we might try a little shadow
yet that makes it stand out a lot better it’s not too bad that’s fine I really all we use exactly the same
ones as I’ve used before but I can’t know what they were I don’t want to change anything else
there that it’s okay now our numbers text we want to do a
similar thing I’m not going to change the style of ammo do you want to make them a bit bigger that’s better take scours fine as it is and again
we’ll use that shadow we use this one just now that makes it stay there a
little bit better there you label text I don’t know if it looks
gonna work with a shadow for that yes we can bring I want to make that slightly
bigger I’ll leave it as a default font say make it 16 don’t lie to you shadow on smaller
things like that but let’s see actually that’s not too bad is it don’t just
bring it out a little bit more you that’s fine you you now how about we just add a little button underneath it what should I say I’ll say don’t miss it and as you can see it’s come out with
that default color for our button there which is fine I need to change that text
so it’s white though let’s go into our design just change that to light and alignment
wise we want it to be central I wanted to be central there we go
and I’ll have that hooking up to a contact page or a sales page of some
sort let’s just say that there we go we’ve got a nice little
parallax section going on there quickly you you
so I’m happy with that save our changes and exit you there we are there’s our little parallax
section with our countdown timer so I hope you found that useful if you have
please like and subscribe to the video if you’re interested in web design take
one of our courses below there’s some huge discounts for our YouTube
subscribers there’s also some great free courses down there so take a look once
again this has been jamie from system 22 and web designer tech tips comm thanks
for watching have a great day

1 thought on “Divi theme eCommerce tutorial Parallax countdown section

  1. Thanks Jamie – great stuff – makes me want to code again. Are you going to do variable products at any point.

Leave a Reply

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