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? In this article, we will see how you can make an interactive and attractive coupon page on your site with Elementor.

In this tutorial, we will use 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 complete customization options, allowing you to customize your Coupon. You can make all the sections of the coupon widget look precisely the way you want. The style tab hosts all the styling options that you can use to make your Coupon look precisely 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 as you want in your widget and add custom content to each 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 show your link as a text button and add an icon to the link.

With all these features, you can make your coupon widget look and function exactly 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 difficult, and you can easily do it yourself. Instead of rushing through the steps, we will look at every step in detail and see what customizations you can do with the Coupons widget of PowerPack addon for Elementor.

If you would 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 go to your WordPress admin dashboard> pages and click the add new button. Give your page a proper name, then click the “Edit with Elementor” button.

If you wish to add the coupons section to an existing page, 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 on the page.

Step 3: Customizing the Content

The first thing we will do here is to customize the coupons’ content, which can easily be done from the content tab. If your coupons are posted as individual posts, you can set your coupon source as posts, which will pull the data automatically. Here, we will be entering the data manually.

For the layout, you can select the grid or carousel type and 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 to add 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 add more coupons 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

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

Step 4: Styling the Coupons Section

Now comes the styling part, Here, you can change and alter how your 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 also customize the discount text. You can change the positioning, typography, color options, hover effects, box shadow, margin, padding, etc.

Now, for the coupon code text, you get the option 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

Like other sections, you can change and customize the content. You can change how the text looks in 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. The user will not go for it if it is too loud or shady. 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 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 coupon pages on your website without touching a single line of code. You can get more creative and add more sections to the coupons page. You can even categorize your coupons, add multiple widgets, and group the common ones together. It is totally up to your imagination how you wish to do it.

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

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