---
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
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?

## Key Takeaways

- Coupon Code widget from The Plus Addons for Elementor allows users to create a slide out coupon code card.
- Users can set the slide out direction of the card to Left, Right, Top, or Bottom using the Slide Out Direction dropdown.
- The content type for both the front and back sides of the card can be selected as Default or Template.

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/)*

## Frequently Asked Questions

**Q: What should I do if the slide out discount code card isn't displaying correctly?**
A: If the slide out discount code card isn't showing as expected, check that the Coupon Code widget from The Plus Addons for Elementor is installed and activated. Also, ensure you've selected 'Slide Out' in the Coupon Type section under the Layout tab. If the issue persists, verify your card dimensions and slide direction settings, as incorrect values can cause display problems.

**Q: What are the best practices for setting the dimensions of the slide out discount code card?**
A: When setting the dimensions for the slide out discount code card, consider the responsive design. Use the Width and Height sections under the Content tab to ensure the card looks good on all devices. A common practice is to keep the card size proportional to your overall layout, ensuring itu2019s neither too large nor too small, which can affect user interaction.

**Q: Does the slide out discount code card work on mobile devices?**
A: The slide out discount code card is designed to be responsive, meaning it should work on mobile devices. However, always test the card on various screen sizes to ensure the dimensions and slide direction are appropriate. Adjusting the card's width and height for mobile can enhance user experience and interactivity.

**Q: Are there any limitations when using the Coupon Code widget for the slide out card?**
A: The main limitation is that the Coupon Code widget is exclusive to The Plus Addons for Elementor and does not work with other page builders like Gutenberg or Divi. This means you must use Elementor to create the slide out discount code card. If you're using a different builder, you won't have access to this specific functionality.