---
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-04-09
lang: en
author: "Aditya Sharma"
description: "Are you looking to create a slide out discount code card in Elementor? In these types of cards, users have to slide out the front side to see the back..."
image: https://theplusaddons.com/wp-content/uploads/2024/02/How-to-Create-a-Slide-Out-Discount-Code-Card-in-Elementor_-1024x536.jpg
word_count: 410
---

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

## 

- Creates a slide out discount code card using the Coupon Code widget from The Plus Addons for Elementor.
- Selects Slide Out from the Coupon Type section in the Layout tab to enable the slide out feature.
- Sets content for both front and back sides of the card using Default or Template options in the Content Type dropdown.

Are you looking to create a slide out discount code card in Elementor? In these types of cards, users have to slide out the front side to see the back side content, which can add a touch of interactivity. 

With the Coupon Code widget from The Plus Addons for Elementor, you can easily create a slide out coupon code card in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Coupon Code widget, [click here.](https://theplusaddons.com/docs/coupon-code-widget-settings-overview/)*

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

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

To do this, add the Coupon Code widget to the page and follow the steps - 

1. In the **Layout **tab, select **Slide Out** from the **Coupon Type** section.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Coupon-Code-Slide-Out-Effect.gif)

Under the **Content tab,** you can set the coupon card width and height from the **Width **and **Height **sections, respectively, for responsive devices.

From the **Slide Out Direction** dropdown, you can set the card slide direction to Left, Right, Top, or Bottom.

By enabling the **Direction Hint Icon** toggle, you can show an icon indicating the slide direction.

2. You have to add the content of the card's front side from the **Front Side** tab. 

From the **Content Type** dropdown, you have to select the content type. Here you’ll find two options - 

- **Default** - To add normal content.

- **Template** - To add content using an Elementor template.

Select the option as per your requirements. Let’s select Default here.

In the **Content** field, you can add the text content.

Then, from the **Content Tag** dropdown, you can select the HTML tag of the text.

3. Then, from the **Back Side** tab, you have to add the content of the card's back side.

Similar to the Front Side tab, you have to select the content type from the **Content Type** dropdown.

- **Default** - To add normal content.

- **Template** - To add content using an Elementor template.

Select the option as per your requirements. Let’s select Default here.

In the **Title** field, you can add the card's back side title.

From the **Title Tag** dropdown, you can select the HTML tag of the title.

Then, from the **Description** field, you add the description for the card's back side.  

Now users will have to scratch the front side content to see the back side content.

![Coupon Code Slide Out Demo](https://theplusaddons.com/wp-content/uploads/2024/02/coupon-code-slide-out-demo.gif)

*Suggested Read: [How to Add Coupon Code With Masked Link in Elementor](https://theplusaddons.com/docs//coupon-code-with-masked-link-in-elementor/)*