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.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
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.
