---
title: "How to Create a Peel Off Discount Code Card in Elementor?"
url: https://theplusaddons.com/docs/peel-off-discount-code-card-in-elementor/
date: 2024-02-21
modified: 2026-09-22
lang: en
author: "Aditya Sharma"
description: "A peel-off card turns a discount into a small piece of theatre: the visitor drags a corner of the card away and the code underneath appears. The Coupon Code widget..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-a-Peel-Off-Discount-Code-Card-in-Elementor_-1024x536.jpg
word_count: 734
---

# How to Create a Peel Off Discount Code Card in Elementor?

## 

- Coupon Code widget ships only in The Plus Addons for Elementor Pro, and the free plugin contains no coupon widget at all.
- Peel layout in Content > Layout replaces Standard settings, and Width and Height are responsive pixel sliders with Width applied as a maximum.
- Peel behavior keeps both sides on the page from the start, then removes the front side after a corner drag, leaving the back side’s title and description visible.
- Limitations include no Standard Style picker, no copy button on Peel cards, and Font Awesome icons can render as empty boxes when The Plus Addons does not load Font Awesome by itself.

A peel-off card turns a discount into a small piece of theatre: the visitor drags a corner of the card away and the code underneath appears.

The **Coupon Code** widget builds one with two panels of settings - what is on the front, and what is underneath.

For the full settings tour of the **Coupon Code** widget, see [Coupon Code Widget: Settings Overview](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/).

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/coupon-code/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — **Coupon Code** ships only in The Plus Addons for Elementor Pro. The free plugin contains no coupon widget at all, so there is nothing to fall back to.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Coupon Code** and turn its toggle on. This is the **Widgets** screen, not **Extensions**.

## Build the card

- Edit the page with Elementor and drag the **Coupon Code** widget onto it.- In **Content > Layout**, choose **Peel** under **Coupon Type**. The Standard settings disappear and the card settings take their place.- In **Content > Content**, set **Width** and **Height**. Both are sliders in pixels and both are responsive; **Width** is applied as a maximum, so the card can be narrower on a small screen but never wider.- Open **Content > Front Side**. Leave **Content Type** on **Default**, put the teaser in **Content** and pick the heading level in **Content Tag** (**H3** by default).- Open **Content > Back Side** and fill in **Title** (the code itself reads well here), **Title Tag** and **Description**.

![Setting up a peel off coupon card in the Elementor panel.](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Peel-Effect.gif)

![The peel card before it is peeled.](https://theplusaddons.com/wp-content/uploads/2026/09/couponcode-result-peel-before.webp)

## The fields

| Setting | Where | Default |
| ------- | ----- | ------- |
| **Coupon Type** | **Layout** | **Standard** - change it to **Peel** |
| **Width** | **Content** | empty (the card takes its column's width) |
| **Height** | **Content** | empty |
| **Content Type** | **Front Side** and **Back Side** | **Default**; the other option is **Template** |
| **Content** | **Front Side** | `Front Content` |
| **Content Tag** | **Front Side** | **H3**; H1-H6, div, p and span are available |
| **Title** | **Back Side** | `Back Title` |
| **Description** | **Back Side** | `Back Description` |

## How It Behaves

- **Both sides exist from the start.** The back side is already on the page, underneath the front side, at exactly the same size and position.- **Dragging from a corner peels the front away.** On a published page, dragging from the top-right corner towards the bottom-left removed the front side from the page entirely, leaving the back side's title and description on screen.- **It is one-way.** Once peeled, the front side is gone until the page is reloaded.- **The styling is split.** **Style > Front Side Content**, **Style > Back Side Content** and **Style > Box Content** cover the two faces and the card's own background.

![The same card after peeling, showing the back side and the code.](https://theplusaddons.com/wp-content/uploads/2026/09/couponcode-result-peel-after.webp)

![A peel off coupon card being peeled on the front end.](https://theplusaddons.com/wp-content/uploads/2024/02/coupon-code-peel-demo.gif)

## Limitations

- **The card has no style presets.** Unlike the **Standard** type, **Peel** has no **Standard Style** picker. Everything visual comes from the Style tab.- **There is no copy button on a card.** Copying to the clipboard is a feature of the **Standard** type's popup only, so put the code somewhere the visitor can select it easily.- **Icons can render as empty boxes.** The widget's scissors icon and the **Close Icon** use Font Awesome, which The Plus Addons does not load by itself. On a page with no other Font Awesome icon they can come out blank.

## Not verified

So you know exactly what has and has not been checked:

- **Touch devices.** The peel, scratch and slide-out gestures were driven with a mouse on a desktop viewport. The widget binds touch events too, but a real touch device was not used.- **The Style tab.** Standard **Style 1** and **Style 3** were rendered; no colour, typography, border or popup-styling control was exercised.- **How far you have to drag.** One drag, from the top-right corner to the opposite corner, was enough. No threshold was measured, and there is no setting for one.

## Troubleshooting

### The card is a thin strip

**Height** is empty, so the card is only as tall as its content. Set a height in **Content > Content**.

### Nothing happens when I drag

Check it on the published page rather than in the Elementor preview - the peel is set up by front-end JavaScript. Start the drag on the card itself, not on the space around it.

### The back side is showing before anyone peels

The front side has no content, or its text is the same colour as the card. Fill in **Front Side > Content** and check **Style > Front Side Content**.

## Related Docs

- [Coupon Code Widget: Settings Overview](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/)- [How to Create a Slide Out Discount Code Card in Elementor?](https://theplusaddons.com/docs/slide-out-discount-code-card-in-elementor/)- [How to Create a Scratch Coupon Card in Elementor?](https://theplusaddons.com/docs/scratch-coupon-card-in-elementor/)- [How to Show Promo Code in an Elementor Template?](https://theplusaddons.com/docs/show-promo-code-in-an-elementor-template/)

## Frequently Asked Questions

**Q: What do I need before creating a peel off discount code card in Elementor?**
A: The peel-off card is part of The Plus Addons for Elementor Pro, so the Pro edition has to be installed and activated first. Elementor itself also needs to be installed and active. In The Plus Addons, the Coupon Code widget must be enabled from The Plus Addons > Widgets, which is a different screen from Extensions. That matters because the free plugin has no coupon widget at all, so there is nothing to switch on there.

**Q: How do I make the discount card peel instead of using the standard coupon layout?**
A: The key switch is Content > Layout, where Coupon Type has to be set to Peel. That replaces the Standard settings with card settings and changes the widget from a normal coupon block into a two-panel peel-off card. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses separate front and back sides here, so the code sits underneath the teaser instead of inside a popup-style coupon.

**Q: Why is my peel off discount code card showing as a thin strip?**
A: That usually means Height is empty in Content > Content, so the card only grows as tall as its content. Setting a height gives the peel area enough surface to behave like a card instead of collapsing into a narrow bar. Width is handled differently because it acts as a maximum, which means the card can shrink on smaller screens but will not grow wider than its column.

**Q: Why does nothing happen when I drag the card?**
A: The peel effect runs on the published page through front-end JavaScript, so Elementor preview is not a reliable test. Dragging also has to start on the card itself, not in empty space around it. That distinction matters because the gesture is tied to the widget area, and if you test in preview or miss the card surface, it can look broken even when the setup is fine.

**Q: Can I use this peel off discount code card on touch devices?**
A: Touch events are bound by the widget, but this tutorial only verified the gesture on a desktop viewport with a mouse. That means mobile behavior was not actually tested here, even though touch support exists in the implementation. If you are building for phones or tablets, treat desktop testing as only part of the picture and verify the interaction on real devices before publishing.

**Q: What should I use instead of a peel off card if I need copy-to-clipboard or preset styling?**
A: The Peel type does not include style presets or a copy button. Copying to clipboard belongs to the Standard type’s popup only, and Peel gets all visual styling from the Style tab instead of a Standard Style picker. If you need users to copy easily, place the code where it can be selected without friction; if you want preset looks, compare it with [How to Create a Slide Out Discount Code Card in Elementor?](https://theplusaddons.com/docs/slide-out-discount-code-card-in-elementor/) or [How to Create a Scratch Coupon Card in Elementor?](https://theplusaddons.com/docs/scratch-coupon-card-in-elementor/).