---
title: "How to Create a Slide Out Discount Code Card in WordPress?"
url: https://qa.nexterwp.com/docs/create-a-slide-out-discount-code-card-in-wordpress/
date: 2024-12-31
modified: 2026-04-14
author: "Aditya Sharma"
description: "Are you looking to create a slide-out discount code card in WordPress? With this design, users slide out the front side to reveal the content on the back, adding an..."
image: https://qa.nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Slide-Out-Discount-Code-Card-in-WordPress_-1024x519.jpg
word_count: 355
---

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

## Key Takeaways

- Utilizes the Coupon Code block from Nexter Blocks to create a slide-out discount code card in WordPress.
- Enables customization of the card's dimensions and slide direction, including options for Left, Right, Top, or Bottom.
- Allows content addition for both the front and back sides of the card using Text or WordPress pattern options.

Are you looking to create a slide-out discount code card in WordPress? With this design, users slide out the front side to reveal the content on the back, adding an interactive and engaging element to your discount offers.

With the Coupon Code block from Nexter Blocks, you can easily create a slide out coupon code card on your WordPress website.

*To check the complete feature overview documentation of the Nexter Blocks Coupon Code block,* *[click here](https://qa.nexterwp.com/docs/add-a-coupon-code-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-coupon-code/)

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

1. Select **Slide Out** from the **Coupon Type** section.

You can set the coupon card width and height from the **Width** and **Height** sections respectively for responsive devices.

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

By enabling the **Direction Hint **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** section, you have to select the content type. Here you’ll find two options - 

- **Text** - To add normal content.

- **Pattern** - To add content using a WordPress pattern.

Select the option as per your requirements, let’s select Text here.

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

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** section.

- **Text** - To add normal content.

- **Pattern** - To add content using a WordPress pattern.

Select the option as per your requirements, let’s select Text here.

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

Then, from the **Description** field, you can 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.