- Hey, y'all, my name is Kori Ashton,
and welcome to another WordPress Wednesday.
Today's tip is teaching you how to build out coupons
that can look like this on your WordPress website.
Everybody loves to shop by coupons.
And so, how can you actually create this really cool
kind of dotted, old-school style, coupon looking effect
on your WordPress website so that people know
and can identify those very quickly as great deals
and savings with your brand.
How can you also do this in a way that's easy
and that is fully responsive?
I'm gonna show you today how to do this two different ways.
We're gonna look at building it out first
in the Divi Builder,
and then we're also gonna look at a totally free tool
called the Beaver Builder,
and we'll learn how to do this
using both of those page builders today,
right now, in this free tutorial.
Let's get to it. (upbeat music)
So by default, Divi does not offer a coupon module,
but they make it really easy for you to build these out
using a different module.
So you're gonna come into your Divi WordPress website,
and you'll go ahead and enable your visual builder
on the page where you wanna build out these coupons.
I'm gonna show you just quickly how I built these out,
and then I'll actually build one for you
so you can follow the steps.
I am using the blurb module, as you see here.
And I'm using the title for the larger discount area.
I'm using the WYSIWYG here for
just adding in the kind of description area.
And then I'm using the image or icon to choose an icon
that this particular one looks like that price tag.
So that's how I'm doing it.
And then I'm going to, in the design area,
kinda customize the style, and then add in a simple border.
So let me show you how to build these out.
I am just going to go ahead and add another row here.
I'm gonna go ahead and duplicate this look
by doing three columns.
And I'm gonna go ahead and use this blurb setting here.
Again, we're gonna dd in the major title or discount,
and we're just gonna say half off.
Making something different here, right,
than the other options that we have up above here.
All the content goes in here.
This would be the deal description, right?
Whatever you wanna say in there.
And then the image and icon, I'm gonna go ahead and say,
I wanna use an icon instead of an image.
You could put your logo in there.
You could put a picture of a deal
and whatever you wanna put in there really.
I'm just trying to, for the sake of this tutorial,
use something that just kinda looks like a sale tag
or a price tag.
That's what I'm gonna do in that area there,
and I'm gonna go ahead and then move into the design area
to actually start changing the look and style of this
to make it look more comparable
to the other ones that I've already mocked up.
If you know anything about Divi,
you know you could, if we wanted to,
I'll go ahead and check mark this.
You could come up here, click on the little three dots,
and say, copy module styles, right?
And then come down here to this module,
click on the three dots, and say paste module styles,
and it will automatically, in a really cool way,
apply all the settings that I had on these up here.
But for the sake of this tutorial,
I'm going to undo that so that I can show you
how to actually manually make those settings happen.
So going back into our little blurb settings area here,
I'm gonna go into the design mode.
The first thing we'll address here is the image and icon.
You can set it to any color you want it to be
to be perfectly associated with your brand.
We're not gonna add a circle around the icon.
The icon image placement is going to be fine there
right where it is on the top.
We want it to be in the center.
And we're not gonna use an icon font size.
We're just gonna leave it that size.
Next is gonna be our title text.
We wanna come in here and play around with the font size.
I'm gonna also center it here.
The color of it, we want it to be
that same kind of orange color for us.
Kind of enlarge the font.
If you wanna do the font weight
to be a little bit more bold, we can do that.
And of course, you can play around with the line height
on any of this having to do with the responsive mode.
Next, we'll go into the body text area,
and that's what's gonna affect that description.
I'm gonna leave it as regular,
but I want to center align it,
and then I also wanted to increase that font size
to make it kind of look a little bit more bold.
And that addresses those things.
Now, what we're gonna do is add in a border to this area,
and we want it on all four sides.
You see that option there.
Border width, let's go ahead and give it
maybe a four pixel width,
and we're gonna go ahead and keep it a black border.
You can make it anything you like.
And then the border style is where we can opt
to have that dashed look.
You have a lot of different options out of the box here,
but we're gonna choose dashed,
and you'll start to see it come to life here.
I really don't like this spacing though.
This is all a little too snug for me.
So I wanna come back up here into this spacing area,
and I wanna click this little link icon
here in the middle of this section
to sync up these options for the top and the bottom padding,
and we just wanna play around with the spacing here.
And I'm gonna say about 25 pixels looks nice to me.
And if you want a little bit more distance on the sides,
you can apply padding to the left and right as well.
We're gonna go ahead and increase that,
and just kinda bring that in just a little bit as well,
making it all nice and uniform there.
And click that check box.
There ya go.
If you'd like to replicate this across the row
of course using Divi, you can just duplicate the module,
drag and drop it over into the space you want it to be,
duplicate the module, drag,
and drop it in the space you want it to be.
And then you can go into these and make changes to them
to however you want them to list out.
And then Divi, of course, if you know the theme,
that's where you come over here and click save,
and now that change is live to our website.
So that was using Divi, the Divi builder.
If you're familiar at all with the Divi theme,
that is some of the power that's under the hood
of the Divi theme that I love.
But let's talk next about a free solution on the market.
This is the Beaver Builder.
And simply even with the free solution,
you're able to get this same type of coupon feature
on your WordPress website easily and quickly.
I'm gonna walk you into their demo site here
and just build it out for you right here.
Because they actually have a module
that's kind of already set up very comparable
to what I just showed you with our blurb settings
inside of Divi.
This particular module, all we're gonna do is
use a call out module.
That's what the Beaver Builder uses here
to create this kind of icon and same setup.
We're gonna go into this,
and you can change all the features you wanna change here.
Same idea, playing around with the alignment,
playing around with the font, and the spacing,
and anything you need to play around with there.
Change out, if you wanna change out the icon,
you can certainly do that as well.
Go in here and change out the icon.
Let's do a search for tag.
There you go right there.
So, we're going to see that tag change for us, nice.
Of course, you can change the color
to whatever you needed it to be.
If we wanted to go find out orange again,
or changing it there, that looks brilliant.
Love it.
You could easily quickly change the font size as well.
If you need that to be a little bit larger,
You can play around with that.
But what we wanna do is add in that dashed border, right,
to make this look like a coupon.
So you're gonna go back to the style,
and you're gonna go into border general here.
And super simple as well,
we're gonna go ahead and choose dashed.
We're gonna give our color of black.
Back that out there.
There's black.
And then we're going to go ahead and give it
that width all the way across the board, right?
So you can put it, set it to anything you'd like it to be.
Six, six, six.
That's a little too thick.
I don't know.
Again, you can play around with this.
Not 64.
And look how simple this is though
for you to just play around with
and create the look that you want.
And again, you're able to go in and put in
any sort of padding or distancing
that you might need around it right down here.
We can throw in that 15, 15.
There it is, already starting to look the part
that we wanted.
So, very nice, very easily done.
We'll save that.
Of course, you can type in here anything you want
and say half off, right?
Really nice, easy to use.
This is the best solution in the free budget, right?
There ya go right there.
Easily done with the Beaver Builder.
So I hope this helps you guys.
This is a really cool solution
that you can put on your own WordPress website,
or perhaps you can call up your clients
and say, hey, let's build out a coupon page
on your WordPress website,
and put all your latest and greatest deals on there
for all of your customers to easily see.
I hope this helps you.
I hope you're having a great WordPress Wednesday.
Be sure to like and subscribe.
Hang out with me here every single Wednesday.
I'm creating the content to help you improve
your online marketing inside the world of WordPress.
If you have questions,
leave 'em in the description box below.
Also, if you're building out this coupon page
with either of these solutions,
or a different solution for that matter,
be sure to add that like in the thread below.
I would love to come in and read your comments
and see how you're using this solution
inside of your WordPress website.
I'll catch ya next time.
Have a great one, y'all.
Bye, everyone.
(uplifting music)
(ringing)