---
title: "How to Create a Slide Out Discount Code Card in Elementor?"
url: https://theplusaddons.com/docs/slide-out-discount-code-card-in-elementor/
date: 2024-02-21
modified: 2026-09-22
lang: en
author: "Aditya Sharma"
description: "A slide-out card asks for one small gesture: drag the front of the card aside, and the code behind it is there. It is the gentlest of the three card..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-a-Slide-Out-Discount-Code-Card-in-Elementor_-1024x536.jpg
word_count: 732
---

# How to Create a Slide Out Discount Code Card in Elementor?

## 

- The Plus Addons for Elementor Pro ships the Coupon Code widget, while the free plugin contains no coupon widget at all.
- Slide Out in Content > Layout lets the card move its front side aside to reveal the code behind it, with Slide Out Direction set to Left, Right, Top, or Bottom.
- Direction Hint Icon adds a small arrows symbol on the card, and Left is the default Slide Out Direction.
- The card has no style presets or copy button, and its scissors icon and Close Icon can render as empty boxes because Font Awesome is not loaded by The Plus Addons.

A slide-out card asks for one small gesture: drag the front of the card aside, and the code behind it is there.

It is the gentlest of the three card types - nothing is destroyed, the front simply moves out of the way in whichever direction you choose.

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 **Slide Out** under **Coupon Type**.- In **Content > Content**, set **Width** and **Height** (responsive sliders in pixels), then pick a **Slide Out Direction** - **Left**, **Right**, **Top** or **Bottom**. **Left** is the default.- Turn on **Direction Hint Icon** if you want an arrows symbol on the card showing the visitor what to do. It is off by default.- Fill in **Content > Front Side** and **Content > Back Side** exactly as for the other card types.

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

![The slide-out card with the direction hint icon.](https://theplusaddons.com/wp-content/uploads/2026/09/couponcode-result-slideout-before.webp)

## The fields

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Slide Out Direction** | Which way the front side moves when it is dragged. | **Left** |
| **Direction Hint Icon** | Draws a small arrows symbol on the card as a cue. | off |
| **Width** / **Height** | The card's size. Responsive; **Width** is a maximum. | empty |
| **Content Type** (front and back) | **Default** for plain fields, **Template** for a saved Elementor template. | **Default** |

## How It Behaves

- **The front side slides, it is not erased.** On a published page with **Slide Out Direction** set to **Left**, dragging the card left moved the front side well past the card's left edge while the back side stayed exactly where it was and stayed visible. With **Right**, the front moved the same distance the other way.- **Drag, do not click.** A click does nothing; the card responds to a press and a drag along the chosen axis.- **Direction Hint Icon** renders as a small arrows graphic on the card, drawn in the current text colour.- **Styling** comes from **Style > Front Side Content**, **Style > Back Side Content** and **Style > Box Content**.

![The front side slid to the left, revealing the code.](https://theplusaddons.com/wp-content/uploads/2026/09/couponcode-result-slideout-after.webp)

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

## Limitations

- **The card has no style presets.** There is no picture picker for **Slide Out**; the look comes entirely from the Style tab.- **No copy button.** Copying to the clipboard belongs to the **Standard** type's popup. On a card the visitor selects the code by hand.- **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:

- **Slide Out Direction set to Top or Bottom.** **Left** and **Right** were driven and measured on a published page. The other two were read from the plugin's code only.- **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.

## Troubleshooting

### The card does not move

Try it on the published page - the drag is set up by front-end JavaScript that does not run in the Elementor preview. Then check you are dragging along the axis you chose: a **Left** card ignores an up-and-down drag.

### The visitor does not realise it can be dragged

Turn on **Direction Hint Icon**, and say so in **Front Side > Content**.

### The back side is visible around the edges

The two faces are the same size, so a front side shorter than the card leaves the back showing. Give the card a **Height** and check the front side's padding under **Style > Front Side Content**.

## Related Docs

- [Coupon Code Widget: Settings Overview](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/)- [How to Create a Peel Off Discount Code Card in Elementor?](https://theplusaddons.com/docs/peel-off-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 slide out discount code card in Elementor?**
A: The key requirement is the Pro version of The Plus Addons for Elementor, because Coupon Code ships only in The Plus Addons for Elementor Pro. The free plugin has no coupon widget to fall back on. You also need Elementor installed and active, then enable Coupon Code under The Plus Addons > Widgets. That matters because the slide out behavior is part of the widget itself, not a separate add-on.

**Q: How do I make the discount card slide out instead of peel off or scratch?**
A: Use the Coupon Code widget and set Coupon Type to Slide Out in Content > Layout. That choice changes the interaction from destructive effects to a simple drag gesture where the front moves aside and the code stays behind it. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this as one of three card types, alongside Peel Off and Scratch.

**Q: What is the best direction to use for a slide out discount code card?**
A: Left is the default Slide Out Direction, but the right choice depends on where you want the visitor’s drag gesture to go. The widget supports Left, Right, Top, and Bottom, and the page notes that Left and Right were tested on a published page. If you want the interaction to feel obvious, pair the direction with Direction Hint Icon so people see an arrow cue before they drag.

**Q: Why does my slide out discount code card not move in Elementor preview?**
A: The drag interaction runs on front-end JavaScript, so it does not work in the Elementor preview. Test it on the published page instead. Also check that you are dragging along the axis you chose: a Left card ignores an up-and-down drag. That mismatch is easy to miss because the card responds to press-and-drag, not a click.

**Q: How do I make visitors realize they can drag the discount card?**
A: Turn on Direction Hint Icon and mention it in Front Side > Content. The icon renders as a small arrows graphic in the current text colour, so it acts like a visual affordance rather than extra decoration. That helps because a slide out card does nothing on click and only responds when someone presses and drags it along the chosen direction.

**Q: Why can the back side show around the edges of my slide out card?**
A: The front and back faces are the same size, so if the front side is shorter than the overall card, the back will peek through. Give the card a Height and check padding under Style > Front Side Content. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that sizing model for this widget, so uneven spacing usually comes from front-side content being too short rather than from the drag behavior itself.