The Coupons module is equipped with all the features you will need to start creating and advertising coupons and deals online. Due to the nature of React, which is the JavaScript Library used to create Divi Builder, it may take a split second for the Module to load when initially added. Let’s dive deeper into this module and explore its options and features.

Offer Details

The Coupons module has three offer types to choose from. The following color code will be used through this guide to help you identify options specifics for each type:

• Coupon
• Deal
• Image

1. Offer Title: Enter your offer title. Coupon & Deal offer type only.
2. Offer Type: The Coupon offer type will display a coupon code that can be copied when the user clicks on it. The Deal offer type will display a link to get the deal instead of a coupon code. The Image offer type will allow you to use a simple image to display your offer.
3. Template These templates apply to Coupon & Deal offer type only:
   • Template 01 Standard Formatted Date.
   • Template 02 Countdown Modern Clock.
   • Template 03 Countdown Text.
   • Template 04 Countdown Flip Clock.
4. Template Alignment: Choose whether to display your offer horizontally or vertically.
5. Hide Left Column | Top Row: This will hide the First Column or Top Row of the offer depending on the Template Alignment selected above. The Left Column | Top Row contains the Offer Ad Image, Discount Amount or Deal Text, and Coupon or Deal Tag, therefore they will not be displayed if this setting is enabled.

   The following options can be set individually if Hide Left Column | Top Row is set to DISABLED:

   1. Hide Offer Tag: Choose whether to show the Tag of your offer.
      • Coupon Offer or Deal Tag: Enter your Coupon or Deal Tag text. Depends on Hide Offer Tag is set to DISABLED.
   2. Hide Discount Amount or Deal Text: Choose whether to show the Deal, Coupon or discount text of your offer.
      • Discount Amount or Deal Text: Enter the discount amount or deal text to be shown for your Coupon or Deal. Example: 25% Off. Depends on Hide Discount Amount or Deal Text is set to DISABLED.
   3. Hide Ad image: Choose whether to show the Ad Image of your offer.
      • Ad Image: Upload and choose an Ad Image. Depends on Hide Ad image is set to DISABLED.
      • Ad Image Alt text: Short alternative text HTML attribute describing your Ad Image. Good for Search Engine Optimization. Depends on Hide Ad image is DISABLED.
6. Coupon or Deal Tooltip Text: Enter your Coupon & Deal Tooltip text. The Tooltip will show when the user moves the mouse over the button with the coupon code or the deal button Depending on the Offer Type.
7. Coupon Code: Enter your Coupon code. This will be copied when the user clicks on it Coupon Offer Type Only.
8. Hide Coupon: Choose whether you want to cover the coupon code. When the covered coupon is clicked, a modal will open on the page revealing the coupon Coupon Offer Type Only.
9. Go to Offer Button Text: Enter the text that will show on the Link Button displayed inside the modal Hide Coupon is ENABLED Coupon Offer Type Only.
10. Offer Link URL: Link to be opened when the user clicks on the Coupon & Deal code button or Image Depends on the Offer Type.
11. Coupon or Deal Image: Upload your Coupon or Deal image Image Offer Type Only.
12. Coupon or Deal Alt Text: Short alternative text HTML attribute describing your Coupon or Deal Image. Good for Search Engine Optimization Image Offer Image Only.
13. Offer Link Target: Here you can choose whether your link opens in a new window.
14. Offer Description: Enter a brief description for your users to know what the Coupon or Deal is about.
15. No Expiration Text: Text to show if your offer never expires Depends on Does the Offer Expire is DISABLED.
16. Does the Offer Expire: Choose whether this offer will expire.

    The following options can be set if the option Does the Offer Expire is ENABLED:

    1. Date Timezone: Select the Timezone for your Offer expiration date. This is useful if you have multiple offers in different timezone locations. If not selected, the default value is UTC or Coordinated Universal Time, which is the primary time standard by which the world regulates clocks and time. It is within about 1 second of mean solar time at 0° longitude and is not adjusted for daylight saving time.
    2. Expiration Date: Choose the date this offer will expire. Your date is based on the Date Timezone selected above.
    3. Expiration Date and Time Format: Choose the date format for the expiration date Applies only to Template 01.
    4. Expire Text: Text to show before the expired date.
    5. Expired Text: Text to show when the offer has expired.
    6. Hide Expired Offer: Hide Offer when it is expired. Default – Not to hide.
17. Show Print Button: Choose whether to show a print button of your offer If the option Hide Coupon is ENABLED, this option will not show.

Share Options

By default, all share options are enabled, but they can all be DISABLED at once or individually. These are the available options:

1. Disable All Share Buttons
2. Disable Facebook Share
3. Disable Twitter Share
4. Disable Pinterest Share
5. Disable Instagram Share
6. Disable LinkedIn Share
7. Disable Email Share
8. Disable Text Message Share

The default Divi Builder Module options Background for the entire module and Admin Label is also part of this Content Tab.

Most of the Coupon module elements used the default Divi Builder options to change their appearance as well as some custom-built elements. Here is a list of the sections and options that can be stylized for the Avatar Coupon Module:

Offer

Refers to the full container of the offer itself, not the module, therefore its styles can be set individually. Here is the list of parameters that can be affected to create a unique style for your offer:

1. Divi Builder Default: Margin, Padding, Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.
2. Offer Background: Please refer to the Custom Background Documentation.

Left Column

1. Use Custom Styles for Left Column: Enable to customize the appearance of this module’s Left Column. Depends on Hide Left Column | Top Row is DISABLED

   The following options can be set if the option Use Custom Styles for Left Column is ENABLED:

   1. Left Column Width: Select the size of the left column. This will affect the size of the other two columns.
   2. Divi Builder Default: Margin, Padding, Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.
   3. Offer Background: Please refer to the Custom Background Documentation.

Center Column

1. Use Custom Styles for Left Column: Enable to customize the appearance of this module’s Center Column.
   1. Center Column Width: Select the size of the left column. This will affect the size of the other two columns.
   2. Divi Builder Default: Margin, Padding, Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.
   3. Offer Background: Please refer to the Custom Background Documentation.

Right Column

1. Use Custom Styles for Left Column: Enable to to customize the appearance of this module’s Center Column.
   1. Center Column Width: Select the size of the left column. This will affect the size of the other two columns.
   2. Divi Builder Default: Margin, Padding, Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.
   3. Offer Background: Please refer to the Custom Background Documentation.

Title • Coupon & Deal

1. Divi Builder Default: Margin, Padding, and all the default Text and Font style options provided by the Builder.

Description • Coupon & Deal

1. Divi Builder Default: Margin, Padding, and all the default Text and Font style options provided by the Builder.

Coupon/Deal/Ad Image • Coupon, Deal & Image

Depends on Hide Left Column | Top Row is DISABLED when used on Coupon, Deal offer type.

1. Ad Image Width: Adjust the width of the image within the column.
2. Divi Builder Default: Margin, Image Alignment, Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.

Deal Text • Coupon & Deal

Depends on Hide Left Column | Top Row is DISABLED

1. Divi Builder Default: Margin, Padding, Round Corners, Border Styles, Border Width, Border Color, Box Shadow, and all the default Text and Font style options provided by the Builder.
2. Offer Background: Please refer to the Custom Background Documentation.

Offer Tag • Coupon & Deal

Depends on Hide Left Column | Top Row is DISABLED

1. Divi Builder Default: Margin, Padding, Round Corners, Border Styles, Border Width, Border Color, Box Shadow, and all the default Text and Font style options provided by the Builder.
2. Offer Background: Please refer to the Custom Background Documentation.

Offer Button • Coupon & Deal

1. Offer Button Border Style: Borders support different styles, each of which will change the shape of the border element.
2. Use Avatar Button Icon: Using the Avatar Button Icon option allows you to select a custom icon font for your button. If ENABLED, it will overwrite the default Offer Button Icon option when Use Custom Styles for Offer Button is ENABLED. The rest of the options will remain the same.
3. Offer Button Icon Coupon: This option will allow you to select custom Scissors icons that are not included by default in Divi Builder icon package. Depends on Use Avatar Button Icon is DISABLED
4. Button Cover Background Coupon: This option only applies if Hide Coupon is ENABLED. Please refer to the Custom Background Documentation.
5. Use Custom Styles For Offer Button: If ENABLED this option will display the default styling options for the Divi Builder Buttons.
6. Button Alignment: Align your button to the left, right or center of the module.

Does Not Expire Block | Will Expire Block | Expired Block • Coupon & Deal

Style the block and text containing the Expiration text, Modern Clock and the Flip Clock. Applies to Template 01 | 02 | 03 | 04

1. Divi Builder Default: Margin, Padding, Round Corners, Border Styles, Border Width, Border Color, Box Shadow, and all the default Text and Font style options provided by the Builder.
2. Offer Background: Please refer to the Custom Background Documentation.

Calendar Expires Text • Coupon & Deal

Style text label above the Modern Clock and the Flip Clock Template 02 | 04

1. Divi Builder Default: Text and Font style options provided by the Builder.

Calendar Cards • Coupon & Deal

Style the calendar cards for the Modern Clock and the Flip Clock Template 02 | 04

1. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, Box Shadow, and all the default Text and Font style options provided by the Builder.
2. Offer Background: Please refer to the Custom Background Documentation.

Calendar Time Labels Text • Coupon & Deal

Style text label below each calendar card for Modern Clock and the Flip Clock Template 02 | 04

1. Divi Builder Default: Text and Font style options provided by the Builder.

Calendar Top Dot Divider

Style Top Dot Divider for the Flip Clock Template 04

1. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.
2. Horizontal Position: Adjust the Horizontal Position of the top Calendar Dots Divider.
3. Vertical Position: Adjust the Vertical Position of the top Calendar Dots Divider.

Calendar Bottom Dot Divider

Style Bottom Dot Divider for the Flip Clock Template 04

1. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.
2. Horizontal Position: Adjust the Horizontal Position of the top Calendar Dots Divider.
3. Vertical Position: Adjust the Vertical Position of the top Calendar Dots Divider.

Tooltip • Coupon & Deal

1. Enable Visual Builder Tooltip: This will enable a visual representation of the Tooltip in the Visual Builder allowing you to conveniently style it. This option is only used in the Visual Builder.
2. Tooltip Background Options: Please refer to the Custom Background Documentation.
3. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, Box Shadow, and all the default Text and Font style options provided by the Builder.

Print Button

1. Use Custom Styles For Print Button: If ENABLED this option will display the default styling options for the Divi Builder Buttons.
2. Button Alignment: Align your button to the left, right or center of the module.

Modal Options

All Modal options only apply to Coupon and if Hide Coupon is ENABLED.

1. Visual Builder Modal Helper: Enable Visual Builder Modal will enable a visual representation of the Modal in the Visual Builder allowing you to conveniently style it. This option is only used in the Visual Builder and can be enabled and disabled at any time without affecting your frontend.

Modal

1. Modal Background Options: Please refer to the Custom Background Documentation.

Modal Title

1. Divi Builder Default: Includes all the default Text and Font style options provided by the Builder as well as margin and Padding options.

Modal Content

1. Divi Builder Default: Includes all the default Text and Font style options provided by the Builder as well as margin and Padding options.

Modal Close Button

1. Horizontal Position Offset: Adjust the horizontal position of the Modal Close Button.
2. Vertical Position Offset: Adjust the vertical position of the Modal Close Button.
3. Use Custom Styles For Modal Close Button: If ENABLED this option will display the default styling options for the Divi Builder Buttons.

Modal Coupon Container

1. Divi Builder Default: Margin and Padding for the Coupon Container.

Modal Coupon Code

1. Modal Coupon Code Background Options: Please refer to the Custom Background Documentation.
2. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, Box Shadow, and all the default Text and Font style options provided by the Builder.

Modal Copy Code

1. Use Custom Styles For Modal Close Button: If ENABLED this option will display the default styling options for the Divi Builder Buttons.

Modal Go To Offer Button

1. Use Custom Styles For Got To Offer Button: If ENABLED this option will display the default styling options for the Divi Builder Buttons.
2. Button Alignment: Align your button to the left, right or center of the module.

Share Buttons

1. Share Buttons Icon Size: Set the size of your Share Buttons.
2. Divi Builder Default: Margin and Padding for the Sharing Buttons.
3. Button Alignment: Align your button to the left, right or center of the module.

Facebook Share Button

1. Facebook Share Button Color: Set the color of the Facebook icon.
2. Facebook Share Button Background Color: Set the Background Color of the Facebook icon.
3. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.

Twitter Share Button

1. Twitter Share Button Color: Set the color of the Twitter icon.
2. Twitter Share Button Background Color: Set the Background Color of the Twitter icon.
3. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.

Pinterest Share Button

1. Pinterest Share Button Color: Set the color of the Pinterest icon.
2. Pinterest Share Button Background Color: Set the Background Color of the Pinterest icon.
3. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.

Instagram Share Button

1. Instagram Share Button Color: Set the color of the Instagram icon.
2. Use Instagram Gradient Background: If ENABLED the default Instagram gradient background color will be used color for your icon.
3. Instagram Share Button Background Color: Set the Background Color of the Instagram icon. Depends on Use Instagram Gradient Background is DISABLED
4. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.

LinkedIn Share Button

1. LinkedIn Share Button Color: Set the color of the LinkedIn icon.
2. LinkedIn Share Button Background Color: Set the Background Color of the LinkedIn icon.
3. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.

Email Share Button

1. Email Share Button Color: Set the color of the Email icon.
2. Email Share Button Background Color: Set the Background Color of the Email icon.
3. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.

Text Message Share Button

1. Text Share Button Color: Set the color of the Text icon.
2. Text Share Button Background Color: Set the Background Color of the Text icon.
3. Divi Builder Default: Round Corners, Border Styles, Border Width, Border Color, and Box Shadow.