How to Create a Coupons/Deals Page Using Elementor?

Are you planning on listing deals and coupons on your website? Are you looking for a simplified way to create a coupon section on your website? Here in this article, we will see how you can create an interactive and attractive coupon page on your site with Elementor.

In this tutorial, we will be using the Coupon Widget of PowerPack addon for Elementor. Before that, let’s check out the features of the Coupon widget.

Features of Coupon Widget for Elementor

Coupon Styles

You can choose the style of coupon code easily from the content tab. You can choose your coupon to show as “Click to copy”, “Click to Reveal & Copy”, and “No Code Needed”.

Design Freedom

You get full customization options that allow you to customize how your coupon looks. You can make all the sections of the coupon widget look precisely the way you want. The style tab hosts all the styling options which you can use to make your coupon look exactly the way you want.

Multiple Coupons

You can add as many coupons to your widget by clicking on the “Add Item” button. You can add as many coupons you want in your widget and can add custom content to each one of those widgets using the content tab.

Dual Layouts

You get two layout options with the coupon widget: grid, and carousel layout. You can choose either of the widgets from the settings, and the coupons will be displayed in that layout automatically.

Link Customization Options

Want to take full control over how your link looks? You can do that easily with the link settings. You can choose to show your link as text, button, and can add an icon to the link as well.

With all these features, you can make your coupons widget look and function exactly like the way you want. Let’s see how you can use this widget to create a coupon page on your website.

Tools Required:

• Elementor Page Builder
• PowerPack addon for Elementor

Creating a Coupons Page with Elementor

Creating a coupon page is not at all difficult, and you can easily do it yourself. Instead of rushing through the steps, we will take a look at every step in detail and will see what all customizations you can do with the Coupons widget of PowerPack addon for Elementor.

If you would rather prefer watching a video, here is a video tutorial of the coupon widget.

Step 1: Adding a New Page

If you want to create a new page, simply do it by going to your WordPress admin dashboard> pages and clicking on the add new button. Give your page a proper name and then click on the “Edit with Elementor” button.

If you wish to add the coupons section to an already existing page, then open the page by going to Pages, and then opening the respective page in Elementor editor.

Step 2: Adding the Coupons Widget

Now we need to add the coupons widget on our page. Simply look for the Coupons widget and drag and drop it on the page wherever you want. As soon as you drop the widget, you will see three default coupons showing up on the page.

Step 3: Customizing the Content

The first thing we will do here is customizing the content of the coupons, and that can easily be done from the content tab. If you have your coupons posted as individual posts, you can set your coupons source as posts, and it will pull the data automatically. Here we will be entering the data manually.

For the layout, you can select the type as grid or carousel and can change the number of columns you wish to see there from the respective options.

For the coupons, you get three options, ‘click to copy code’, ‘click to reveal code’, and ‘no code needed’. Select the one you want to be displayed.

Adding the Coupons

Now for adding the coupons, go to Content > Coupons and click on the ‘+ Add Item’ button. Here you can change the image, discount text, coupon code, title, description, and the link for the coupon. You can enter the coupon details here and can add more coupons as per your requirements.

You can change the arrangement of the coupons by simply dragging the coupons up or down in the coupons section under the content tab.

Modifying the Coupon Link

Now, if you wish to alter the link, you can do it too. You can change the link type to button, title, or box.

Step 4: Styling the Coupons Section

Now comes the styling part, here you can change and alter how you coupon’s each individual section looks easily from the style tab.

Starting with the coupon box, you can change the alignment, spacing, background, bg color, shadow, etc. for the boxes. These settings will be applied to all the coupon boxes in the widget.

Discount Percent and Coupon Code

If you have enabled the ‘show discount’ option in the Content tab, you can customize the discount text as well. You can change the positioning, typography, color options, hover effects, box-shadow, margin, padding, etc.

Now for the coupon code text, you get the options to customize that as well. You can make all the changes we discussed for the discount text, and in addition, you can customize the icons too.

Modifying the Content style

Just like other sections, you can change and customize the content as well. You can change how the text looks in terms of color, typography, font, weight, color, margin, etc.

You can make these changes for both title and description separately.

Button

The button is considered the most important aspect of the Coupon. If it is too loud or shady, the user will not go for it. Try to keep it matching with the overall design of the coupon. Remember not to make it too flashy.

Regarding styling, you can change the size, spacing alignment, text color, radius, typography, shadow, icon, separator, etc. With these settings, you can change and modify your button to look exactly how you want it to look.

Here is what our coupons section looks like after making all the changes:

Over To You!

With the Coupons widget, you can create impressive coupons pages on your website and that too without touching a single line of code. You can get more creative and can add more sections to the coupons page. You can even categorize your coupons and add multiple widgets and group the common ones together. It is totally up to your imagination how you wish to do it.

If you do not have the Coupons widget or the PowerPack add-on, you can get it here. You’ll get more than 60 creative widgets for Elementor, which you can start using right away!

Let me know what do you think of the coupons widget by leaving a comment below!