Divi theme eCommerce tutorial – Add Circle Counters
Articles,  Blog

Divi theme eCommerce tutorial – Add Circle Counters


hi guys and welcome to another Divi
theme ecommerce website bill this is Jamie from system 22 and web designer
tech tips calm in this series of videos we’ve been
putting together this ecommerce site using the fantastic Divi theme from
elegant themes now if you build with WordPress at all I suggest you look at
this thing it’s just got some absolutely awesome features and it just keeps
getting better so this is where we left off last time
put in some dividers let’s add another little section here
so I’m going to enable of the visual builder I am once that’s loaded let’s go down to
the bottom and let’s add a new section so I hit the
little blue plus icon here please a regular section make it four
inside here let’s put in well then the counter you I don’t want to do percentage I just
want to do a straight number so I’m going to go to elements
take that off so I think if you leave it on you can only go up to a hundred I want go up a lot higher than that
let’s have a look say titles going to be dresses 8:12
random-number there you see it’ll count up all the way there what I want to do is just say that I want to make this background our green
color there that we use for our tags so if I hit its little cog here
and go to background go over to ah we used Adobe color here this is the main
color we’ve been using the 10 ca ca and I went to Adobe color and just put it in
there and asked for compound colors that will go with it and I really like this
green and that hot pink I think will work well with this site so I’m gonna
make this section that green color so I’ll just copy that and the background-color here I’m gonna
paste that color in there there we go we’ve got that green color for the
background there don’t want to go back to our element
here so let’s just save that let’s get this how we want it them or
copy it over it’s fine total text I’m gonna want that white
don’t want it bigger than I think I’ll leave it just as it is at the moment we
will have it white number text as well my we should put a bit of shadow on that
it’s Lucy you know yeah I think I’ll use that shadow right
there to save our changes it’s thinking what we got up here we got
any stats up here we just had a countdown timer don’t just have the
numbers let’s change this let’s use a let’s use circle counter instead so the
numbers encased in a circle let’s just get rid of this make a quick change there we go we use this circle counter title text
again I’m gonna have as white Circle itself
Bar background-color I’ll have as white circle color don’t need any color in
that of the room you can have a different color for the background I’m
gonna leave it as is number text again when he’s right yeah I don’t know if I use a shadow on
this one because of the circle I don’t really want to put it on that circle
again elements I don’t want that percentage sign on a flat number texts if that’s what we put the school it’s fine think that’s gonna work for
what to copy this element four times one two
three three times so we’ve got four I don’t want them side by side like that I
want them over next door to each other so just using the drag icon that little
X right there and we can move them where we want so we’ve got for those now let’s
say dresses this one can be shirts you and this one can be shoes
pants okay and this last one I’ll make this a bit
higher because there’s two of each of those when you sell them unless you’re
selling to one legged person yeah we go in there we’ve got our little
number field going on there um let’s just add have a little row here
and we’ll put a title in here and we’ll use it something we saved an element we
saved last time which is a white title title white there it is right there let’s just move this whole section up to
the top and edit the content let’s say we sold there we go we’ve got a little circle-k
on a stats section there how easy was that
once again Thank You vivvy and elegant themes you’ve made it very easy to do
this that is how you make circle counters
with a Devi thing really easy well I hope you’ve enjoyed that if you have
please like share and subscribe to our YouTube channel if you’re interested in
web design take one of our courses below we’ve got some huge discounts for our
YouTube subscribers there’s also some great free courses down there once again
this has been jamie from system 22 and web design in tech tips comm thanks for
watching have a great day

Leave a Reply

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