April 1, 2020
Divi theme eCommerce tutorial Custom Sale Tags and Image

Divi theme eCommerce tutorial Custom Sale Tags and Image


hi guys and welcome to another Divi
theme ecommerce site bill this is Jamie from system 22 and a web designer tech
tips comm we’re building an online e-commerce store using the fantastic
Divi theme from elegant themes if you don’t have it you can get it from my
affiliate link below here if you don’t want to use my affiliate link just go to
elegant themes calm and get it from there Divi is a premium theme you have
to pay for it but it is just absolutely awesome the features are fantastic I’ve
been using it for years now on hundreds of builds for various different types of
site and it just keeps getting better and better so if you’re gonna be
building in WordPress I recommend you take a good look at this thing okay so
this is where we left off last time what we did is we customize our nav links up
here and added some custom CSS also for our button so let’s add a new section and let’s just add a button to test out
our theory with our CSS there so what I’ve done I use Photoshop I know
everybody can’t afford Photoshop and I’ve just created an image here with a
bit of blue on one side a bit of white on the other side on our image here
which I’m going to use for a background picture I know there’s something called
GIMP which is a free version like Photoshop I’ve never used it but
everybody tells me you can do the same thing with GIMP so if you don’t have
Photoshop go ahead and have go get a graphics program like GIMP or something
and I’ve just made this image it’s about 1920 wide by about 600 deep I think I’ll
find out by just trying to save it I’ve already saved it it’s 1920 by 800
and I’m just saving it as a JPEG with a fairly small file size that
we’ll keep things easy to load for the website already actually save that so
I’m going to cancel out and I’m gonna add a new section I’m gonna enable my
visual builder and now our visual build is loaded I’m
gonna add a new section regular section I’m gonna make it let’s make it 1/3 and
2/3 in this particular sign I’m gonna have
our shop module with just a couple of items so I’m going to scroll down
finding that shop module that we’ve been using now recent products that’s great
for people that have been viewing it already and if they want to be recent
products I’m just gonna have sale products just for argument’s sake and
I’m only gonna have two of them and I’m gonna have also two columns it’s done
that by default while loops of things anyway that’s fine and what I want to do
is I want to put a background image behind here so let’s just save this I’ll
put that column in there oh I got this one hit the little cop is the background
go over to image I’m gonna add a background I’ve got some
in a folder over here and that one I just showed you with Photoshop I was
just going to drag it over and put it in again you can put some alt text in with
some keywords or something descriptive about your image I’m not going to
completely for it expediency alright so let’s drop that in just gonna save that
I’m gonna have a bit of text over on this side now I think I’ll use perhaps a
call to action so we’ve got a button and from
little hot deals here click here oh I don’t usually like to use click here let’s put let’s go not gonna have any meteor in their texts
I’m just gonna add some of this dummy lorem ipsum filler text again and I
don’t want too much sentence or so finally the moment
gonna put a hashtag in there just take it saw the page when I’ve done this I’ll
take it to a special sales page or a deals page once they open in the same
window I don’t know II want a background color and as you can see it’s already
added the button and it’s giving it our default green with the blue now on this
one I’m gonna let it have that little arrow – let’s go that’s fine think I
might add exclamation mark just after that let’s
go think it’s for that tech scene but I don’t think we can see it because it’s
probably why yeah it looks like it’s in there yeah there’s our
so let’s make that text the correct color with our design
hey here’s our title text I’m going to use different font this time I’m gonna
use something more like this form which is Volk horn I believe I’ll make it
light and there it is right there now we can’t see it because I’m gonna color I
want to make it italic let’s add our color there we can see it now and I want
it a lot bigger than that so we’re 26:34 you forty-two that looks about right and
think I’m going to align it right and now we want
regular text try a bit of shadow on that’s too much sure that’s okay leave that for the time be now here’s
our body text font can stay the same think size wise I want about 16 but
again we’re gonna want that same color the 10 ca ca there we go
and again I’m gonna align it to the right hand side let’s make it 16 just slightly bigger there and that’s our line and our button over
to the right as well which is pretty cool so that’s good I’m happy with that let’s just say that I edit these I want
to give them that same box shadows we’ve got on these and also you know price is
a bit too big only wait have a look what we can do with the
text and title I’m also going to change those sale price tags there I might do
that with some custom CSS pure liter so that we don’t have to do it every time here’s our title text Regulus five you get that blue I might lose it might
get lost in that color there let’s try it and centralize it make it a lot bigger 24:04 align heights okay sure is making it stand out a bit more I
think that one makes it stand out where so you use that one now our price our price is anger with our price Tech’s I’m probably gonna
use some custom CSS to make this a lot more interesting looking but we’ll do
that on another one let’s get this done for the time being
price text color we’ll keep that blue color again in make it a bit bigger don’t it too big
for what I’ve got in mind that’s okay and again we want it to be centered and what’s this a box shatter like we
had last oh that’s getting our whole element one
which is not what we want and we were using it but overlay color which is that
10 C ACA but we had quite a bit of OPC family here’s an image and this is what we put the box shadow
on before okay well that seemed to work that’s
fine we’ll leave that as it is let’s just say that let’s just I want to go back in here I
want to align that background picture top left think it’s in the middle of the
minute Center topless there we go this is a little gap between the top there that’s better okay let’s just save this I’m gonna hit exit it’ll prompt us to
save and I’ll save and exit all right so there we have it at the moment
flowing okay and these are little sales boxes I want
those you remember last time we use this cooler Adobe cooler it’s a three color
wheel from Adobe com I’m gonna make those that hot pink color
right there now you can do this within the modules itself but I think I’m gonna
try doing it with custom CSS so I don’t have to keep changing it every now again there it is right there okay so we’ll
call my span on sale there we go that’s changed those purple
colors to see if it’s worked on the ones below one below I think we’ve used a
custom one in their actual module for those so I have to change it with the module
singers we’ve actually done it so let’s do this let’s I’m gonna take this delete
most of this just down to that color there and go into our custom CSS Divi
theme options general tab down the bottom custom CSS and just add a new
title of on sale and paste in what we copied there and we’re gonna get rid of
most of it okay good color colorize down the bottom Oh how I should say and it’s very good
because it’s told us that we’re missing a curly tag or a brace which I knew
anyway but just in case it’s got a little flag up there so it’s really
handy dipping well done and yet again don’t you put the closing curly bracket
in there to correct that error and let’s give this a bit of box shadow as well just for a nice nice bit of effect
let’s give it five pics about five pics like 25 pics dark grey I have sent my
coop hopefully that should work all right we’ll see save our changes back to
here will refresh get that inspector out of the way they should stay the same
because of that and they should also have a little drop shadow appear just
under him so let’s try that though they did stay the same but we
didn’t get any shadow wonder why that was this toilet that is
important save that there we go we’ve got our drop shadow
there now just gives it a little more depth and makes it kind of interesting
to look at and I’ve noticed we’ve lost the hard text up here well we haven’t
actually lost it it’s just it’s still edge just overwritten with the color so
let’s just go and change our text color in there that’s in our customizer that’s
back to the dashboard to our theme customizer when he loads we want to go to the
header in navigation so the secondary menu right there he is
our text color hey it’s changed that to white publish that now when we go back those Styles should
be Universal again so we should get our text back there we get birds more like
it okay well that will do for that video
we’ve just added a quick module there and done some custom CSS for our on sale
tags and our button here so I hope you’ve enjoyed that if you have please
like and share the video please subscribe to our channel if you’re
interested in web design please 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 so have a look once again this has been Jamie from citizen 22 and
web designer tech tips comm thanks for watching have a great day

Leave a Reply

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