Make coupons on your WordPress website with this simple workaround using the Divi Builder or the Beaver Builder. You can customize them to look any way you want and they are fully responsive.
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.
Make Coupons In Divi
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.
Make Coupons in Beaver Builder
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. S
o 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.