Coupon Code

< All Topics
Widget Used
Coupon Code
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to build any offers with a coupon type layout on which shows you product discounts for your website. Then we have created a superior and well-designed widget. The coupon code offers a standard design for users to create custom layouts. With widgets type, you can display a discount coupon offer.

Table Of Contents
Pro tip
Why don’t you use this widget? Because with the help of this widget, you can embed and implement coupon layout using many options as there are for your post, product, article, etc.

How to use the Coupon Code Widget of The Plus Addons For Elementor

The Coupon Code widget comes with four coupon types. With the custom styling options, you can make a pleasant and suitable layout.

General Steps

Search for the Coupon Code element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Coupon Code widget. First, click on the Content tab.

1. Content

1) Content

Coupon Type

We have given four types of coupons for the show code. Select your desired type for the show code.

You will be able to do see its options & make a custom layout according to the selected coupon type.

The types we provided are:

1. Standard
2. Peel
3. Scratch
4. Slide Out

Standard Style

We have given five styles of standard coupon type for the show code. Select your desired style for the show code.

You can use the style option to see the different layouts of the show code for the standard type.

The styles we provided are:

1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Style 5

Title

You can set the title text of the show code for the standard type.

Redirect Link

You can set the link of the URL which you have opened as a click event on the show code button for the standard type.

Content Alignment

You can set show code text (Content) alignment left, center, and right.

Box Alignment

You can set show code box alignment left, center, and right.

1. Copy Code

Copy Code Style

We have given five styles of coupon copy code type for the show code. Select your desired style for the show code.

You can use the style option to see the different layouts of the coupon copy code for the standard type which you can see by clicking the show code button.

The styles we provided are:

1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Style 5

Code

You can set a custom coupon copy code text which you can see by clicking the show code button.

Select Action

We have given two action types of show code for the standard type. Select your desired action type for the standard type.

You can select the way you want to view the coupon copy code by clicking on the show code.

The action types we provided are:

1. Click
2. Popup

Title

You can set a popup title heading which you can see by clicking the show code button.

Description

You can set a popup description which you can see by clicking the show code button.

Copy Button

You can set a popup copy button text which you can use to copy the coupon code.

After Copy

You can set and use this text to know if the code has been copied after you click on the copy button.

Visit Button

You can set the popup visit button text and you can visit it on a page by setting a link to the website.

Close Icon

You can set a popup close icon clicking on which you can close the popup menu.

Code Alignment

You can set popup code box alignment left, center, and right.

Width (Peel, Scratch, Slide Out)

You can adjust the box width.

Height (Peel, Scratch, Slide Out)

You can adjust the box height.

Peel

Fill Percent For Reveal

You can set the percentage value according to a similar space you want to erase from the box.

The Number Percentage you have set will be erased, so the remaining part will be erased automatically.

Scratch

Slide Out Direction

You can set the front side left, right, top, the bottom direction of the box from which side you want to slide.

Direction Hint Icon

By enabling this option you can see the slide icon as a hint icon on the box which you selected from the slide-out direction option using to know from which side you have to slide.

Slide Out

2) Front Side

Content Type

We have provided two different types of content.

Select your desired type which according to content you can see on the screen for the front side.

The types we provided are:

1. Default
2. Template

Content

You can set the content title for the front side.

Template

If you do not have a create template then you will see this message in the dropdown.

You Haven’t Saved Templates Yet.

3) Back Side

Content Type

We have provided two different types of content.

Select your desired type which according to content you can see on the screen for the backside.

The types we provided are:

1. Default
2. Template

Title

You can set the content heading title for the backside.

Description

You can set the content description for the backside.

Template

If you do not have a create template then you will see this message in the dropdown.

You Haven’t Saved Templates Yet.

4) Extra Options

Popup Width

You can adjust the popup custom width.

On Scroll

By enabling this option you can see the scrollbar on the popup by setting the height of the popup.

Height

You can adjust popup custom height and after setting which you can see the content of popup by scrolling.

2. Style

The Style tab is used for customizing the look of all the Coupon Code widget components such as Standard, Popup Close Icon, Popup Title/Description, Popup Copy Code, Popup Copy Button, Popup Visit Button, Popup Scroll Bar, Popup Modal Box, Front Side Content, Back Side Content, Box Content and Extra Options.

Standard Style

Set Button (Padding, Typography, Width, Arrow Color, Color, Background, Border Left Color, Border Bottom Color, Background, Border, Border Radius, Box Shadow), Icon (Width, Size, Icon Color, Background, Border, Border Radius) and Copy Code (Padding, Typography, Width, Arrow Color, Color, Background, Border, Border Radius, Box Shadow) for the Standard.

Popup Close Icon Style

Set Padding, Margin, Width, Size, Icon Color, Background, Border, Border Radius, and Box Shadow for the Popup Close Icon.

Popup Title/Description Style

Set Content Padding, Content Margin, Title(Padding, Typography, Color, Background, Border, Border Radius, Box Shadow) and Description(Padding, Above Space(Margin Top), Typography, Color, Background, Border, Border Radius, Box Shadow, Title/Description Alignment) for the Popup Title/Description.

Popup Copy Code Style

Set Padding, Margin, Typography, Width, Arrow Color, Color, Background, Border, Border Radius and Box Shadow for the Popup Copy Code.

Popup Copy Button Style

Set Padding, Margin, Typography, Color, Background, Border, Border Radius and Box Shadow for the Popup Copy Button.

Popup Visit Button Style

Set Padding, Margin, Typography, Color, Background, Border, Border Radius, Box Shadow and Alignment for the Popup Visit Button.

Popup Scroll Bar Style

Set Background, Width for the Scroll Bar.
Set Background, Border Radius, and Box Shadow for the Thumb.
Set Background, Border Radius, and Box Shadow for the Track.

Popup Modal Box Style

Set Padding, Margin, Background, Border, Border Radius, Box Shadow for the Popup Modal Box.

Front Side Content Style (Peel, Scratch, Slide Out)

Set Title Typography, Title Color, Background, Border, Border Radius, Box Shadow and Hint Icon Color for the Front Side Content.

Peel Style

Back Side Content Style (Peel, Scratch, Slide Out)

Set Title Typography, Title Color, Description Typography, Description Color, Background, Border, Border Radius and Box Shadow for the Back Side Content.

Scratch Style

Box Content Style (Peel, Scratch, Slide Out)

Set Background, Border, Border Radius, Box Shadow for the Box Content.

Slide Out Style

Extra Options Style

Set Overlay Color for the Extra Options.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?