[et_pb_section fb_built=”1″ _builder_version=”4.4.1″ background_color=”#7cda24″ custom_padding=”5px||5px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”4.4.1″ custom_padding=”6px||5px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|800|||||||” text_text_color=”#e02b20″ text_font_size=”22px” text_orientation=”center” global_colors_info=”{}” theme_builder_area=”post_content”] DEMO BANNER[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.4.1″ custom_padding=”5px||5px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_code _builder_version=”4.14.7″ background_color=”#ffffff” text_orientation=”center” custom_padding=”2em|2em|2em|2em|true|true” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”]
[/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″ background_color=”#efefef” custom_padding=”32px|0px|30px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”3.25″ background_color=”#ffffff” custom_padding=”25px|15px|25px|15px|false|false” border_radii=”on|5px|5px|5px|5px” border_width_all=”2px” border_color_all=”#7b9100″ border_style_all=”dashed” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”||||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”] We were recently asked to add a ‘click to copy’ coupon banner to a client’s website which has been built using Divi. As these banners aren’t standard within the Divi builder, we’ve taken this opportunity to document and share how we achieved the final design for other Divi designers to use – we hope you find this tutorial useful.
To create a banner before the header on your Divi site, you’ll need to use a plugin. For this tutorial we’ve used “Divi Bars” as we’ve had a lot of success with this plugin in the past – it’s a premium plugin but it offers a lot of functionality and is supported. Another way to approach this Divi addition would be to use the new Global Divi Theme Builder, this would allow you to build your header from scratch and easily add a global banner to display above the main website navigation and logo.[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.3.1″ background_color=”#efefef” custom_padding=”32px||64px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row column_structure=”1_3,2_3″ make_equal=”on” _builder_version=”3.25″ custom_padding=”5px|0px|0|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
Step by Step Menu
[/et_pb_text][et_pb_text _builder_version=”4.4.1″ text_font_size=”18px” custom_margin=”||50px|” global_colors_info=”{}” theme_builder_area=”post_content”] #1 Adding a Divi Code Module
#2 Module align & add code
#3 Adding an icon to the button
#4 Styling the coupon code banner
#5 Adding Javascript
#6 Tutorial summary[/et_pb_text][et_pb_text _builder_version=”4.4.1″ text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”] FREE LAYOUT DOWNLOAD
Skip the tutorial and download the Divi Coupon Code banner layout for FREE.[/et_pb_text][et_pb_button button_url=”/wp-content/uploads/2020/03/Coupon-Banner-MLABS20.zip” button_text=”Download Layout” button_alignment=”left” _builder_version=”4.14.7″ button_text_color=”#ffffff” button_bg_color=”#13BF04″ button_border_radius=”0px” button_font=”|700||on|||||” custom_css_main_element=”width:100%;||max-width:250px;||border-radius:10px !important;” box_shadow_style=”preset1″ button_border_radius_hover=”5px” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5px” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off” theme_builder_area=”post_content”][/et_pb_button][/et_pb_column][et_pb_column type=”2_3″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
DEMO: Coupon code banner with a “click to copy” button using Divi Bars
[/et_pb_text][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/03/divi-code-copy.png” alt=”coupon code banner example on website ” show_in_lightbox=”on” force_fullwidth=”on” _builder_version=”4.4.1″ custom_css_main_element=”width:100%;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_code _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”]
[/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.22″ custom_margin=”|||” custom_padding=”38px|30px|38px|30px|false|true” custom_css_main_element=”border-radius:10px;” border_radii=”on|10px|10px|10px|10px” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row module_id=”adding-a-tabs-module” _builder_version=”4.3.1″ custom_padding=”16px|0px|14px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text module_id=”add-divi-code” _builder_version=”4.4.1″ header_font=”||||||||” header_4_font=”||||||||” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
#1 Adding a Divi Code module
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”3.25″ custom_padding=”0|0px|21.3px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_gallery gallery_ids=”42075,42076,225293″ fullwidth=”on” _builder_version=”4.4.1″ custom_margin=”||2px|||” auto=”on” auto_speed=”5000″ custom_css_main_element=”width:100%;” custom_css_gallery_item=”width:100%;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_gallery][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_text_color=”#474747″ text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”] 1.1 – Either open the Divi Theme Builder or create a new Divi Bar and choose to use the Divi Builder.
To begin with, click ‘Build From Scratch – Start Building’. First, add a SECTION to the page, followed by a ROW (nested within the section) and finally, we insert a CODE module inside of the row.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.4.1″ custom_padding=”38px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text module_id=”module-align” _builder_version=”4.4.1″ text_font=”|600|||||||” text_text_color=”#474747″ text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” global_colors_info=”{}” theme_builder_area=”post_content”]
#2 Set module to align text & add initial banner code
Before adding anything to the CODE module, we need to set the module to align text to the centre.[/et_pb_text][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”] 2.1 – Hover over the module and click “Module Settings”
2.2 – Go over to the design tab, then click on “Text”
2.3 – Adjust the ‘Text Alignment’ to your preference (for this tutorial we’ve chosen to align to the centre)[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/03/Coupon-Banner-How-to-2.png” alt=”Text alignment module box” show_in_lightbox=”on” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.4.1″ custom_css_main_element=”width:100%;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.4.1″ custom_padding=”44.3px|0px|44.3px|0px|true|false” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”] 2.4 – Inside the code module, we’re going to start adding some content to our banner.
To start things off we’re going to add the following code into the ‘Text – Code’ box:[/et_pb_text][et_pb_text _builder_version=”4.14.7″ text_text_color=”#000000″ text_font_size=”18px” background_color=”#e7e7e7″ custom_padding=”15px|15px|15px|15px|false|false” border_radii=”on|10px|10px|10px|10px” global_colors_info=”{}” theme_builder_area=”post_content”]
<div>
<p>For 20% off your order, use the coupon code:
<a class=”et_pb_button et_pb_custom_button_icon”>MLABS20</a>
<p>
</div>
[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/03/Coupon-Banner-How-to-3.png” alt=”text code box Divi ” show_in_lightbox=”on” align=”center” _builder_version=”4.4.1″ custom_css_main_element=”width:100%;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″ custom_padding=”0|0px|0px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” custom_margin=”||6px|||” global_colors_info=”{}” theme_builder_area=”post_content”] 2.5 – DEMO EXAMPLE so far.[/et_pb_text][et_pb_code _builder_version=”4.14.7″ background_color=”#f7f7f7″ text_orientation=”center” custom_padding=”2em|2em|2em|2em|true|true” hover_enabled=”0″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″]
[/et_pb_code][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_text_color=”#474747″ text_font_size=”18px” custom_margin=”15px||15px||false|false” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|desktop” global_colors_info=”{}” theme_builder_area=”post_content”] Notice that we have added the class “et_pb_button” which pulls through Divi’s default button styles and the class “et_pb_custom_button_icon” because we will add an icon to this button later down the line. You can also see that we have left out href=”” because we don’t want the button to link anywhere just yet![/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.3.1″ background_color=”#00f2b9″ custom_margin=”43px|auto|24px|auto||” custom_padding=”28px|25px|25px|25px|false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_button button_url=”/wp-content/uploads/2020/03/Coupon-Banner-MLABS20.zip” button_text=”Download Layout” button_alignment=”left” _builder_version=”4.14.7″ button_text_color=”#ffffff” button_bg_color=”#13BF04″ button_border_radius=”0px” button_font=”|700||on|||||” custom_css_main_element=”width:100%;||max-width:250px;||border-radius:10px !important;” box_shadow_style=”preset1″ button_border_radius_hover=”5px” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5px” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off” theme_builder_area=”post_content”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row module_id=”add-icon” _builder_version=”4.4.1″ custom_padding=”35px||18px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” global_colors_info=”{}” theme_builder_area=”post_content”]
#3 Adding an icon to the button
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ module_id=”styling-the-tabs-module” _builder_version=”4.4.1″ custom_padding=”5px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.3.1″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” custom_margin=”||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”] 3.1 – Next, we are going to choose an icon to add to the button in the banner. To do this, you’ll first need to create a dummy button within your Divi page.
Simply, add a new BUTTON module anywhere on your page. To choose an icon, you may need to toggle on ‘USE CUSTOM BUTTON STYLES’ – you will then be able to select an icon that displays next to the button text. An example button with icon is shown to the right or below if you reading this on a mobile device.[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/03/Coupon-Banner-How-to-5.png” alt=”Divi button example” show_in_lightbox=”on” force_fullwidth=”on” _builder_version=”4.4.1″ custom_css_main_element=”width:100% !important;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_5,3_5″ module_id=”styling-the-tabs-module” _builder_version=”4.4.1″ custom_padding=”20px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_5″ _builder_version=”4.3.1″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” custom_margin=”||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”] 3.2 – To find the icon code that we need to copy for our banner, we need to ‘right-click’ on the button and ‘inspect’ the button’s source code. NOTE: To do this, you may need to save your page and view what you have created so far in a front-end format.
When you can see the button’s source code, look for the code which mentions data-icon=”” – within the brackets you will find the icon’s shortcode.[/et_pb_text][/et_pb_column][et_pb_column type=”3_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” custom_margin=”||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”] 3.3 – As shown in the screenshot below, our button code displayed as follows data-icon=”i”, (your code may differ depending on what button icon your have chosen). Copy this code and add it to the CODE module section that we created in Section 2.4.[/et_pb_text][et_pb_gallery gallery_ids=”225296,225247″ fullwidth=”on” _builder_version=”4.4.1″ custom_margin=”||2px|||” auto=”on” auto_speed=”5000″ custom_css_main_element=”width:100%;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_gallery][/et_pb_column][/et_pb_row][et_pb_row module_id=”styling-the-tabs-module” _builder_version=”4.4.1″ custom_padding=”20px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” header_4_line_height=”1.4em” custom_margin=”||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”] 3.4 – To make the discount % number within your banner bold, wrap the percentage discount (in our tutorial, we’ve used “20%”) inside “” tags – you can see this code edit in the example below.[/et_pb_text][et_pb_text _builder_version=”4.14.7″ text_text_color=”#000000″ text_font_size=”18px” background_color=”#e7e7e7″ custom_padding=”2em|2em|2em|2em|true|true” border_radii=”on|10px|10px|10px|10px” global_colors_info=”{}” theme_builder_area=”post_content”]
<div>
For <b>20%</b> off your order, use the coupon code:
<a class=”et_pb_button et_pb_custom_button_icon” data-icon=”i”>MLABS20</a>
</div>
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.4.1″ custom_padding=”0|0px|14.3px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” custom_margin=”||6px|||” global_colors_info=”{}” theme_builder_area=”post_content”] 3.5 – DEMO EXAMPLE so far.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.4.1″ background_enable_color=”off” custom_padding=”0px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_code _builder_version=”4.14.7″ background_color=”#f7f7f7″ text_orientation=”center” custom_padding=”2em|2em|2em|2em|true|true” hover_enabled=”0″ border_width_all=”3px” global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″]
[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.3.1″ custom_padding=”26px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”] 3.6 – So, now we have a banner with a line of text followed by a button with an icon that currently does nothing… let’s change that by adding some functionality!
We want our button to show the coupon code “MLABS20” which when clicked copies the coupon code for the user. After this command, we then want the button to display the message “Copied!”.
To do this, we need to add further code to our CODE module (created in Section 2.4). The new additions include “code” and “alert” – as highlighted in the code demo below.[/et_pb_text][et_pb_text _builder_version=”4.14.7″ text_text_color=”#000000″ text_font_size=”18px” background_color=”#e7e7e7″ custom_padding=”2em|2em|2em|2em|true|true” border_radii=”on|10px|10px|10px|10px” global_colors_info=”{}” theme_builder_area=”post_content”]
<div>
<p>For <b>20%</b> off your order, use the coupon code:
<a class=”et_pb_button et_pb_custom_button_icon” data-icon=”i”>
<span id=”code”>MLABS20</span>
<span id=”alert”>Copied!</span>
</a>
</p>
</div>
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.4.1″ custom_padding=”16px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”] Now, instead of the button containing “MLABS20”, it contains a containing “MLABS20” and a containing “Copied!”.
Notice that we have given the “MLABS20” span id=”code” and the “Copied!” span id=”alert”. We will later use these ID’s to show and hide the using Javascript, based on a click.[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/03/Coupon-Banner-How-to-9.png” alt=”custom button code being added” show_in_lightbox=”on” align=”center” _builder_version=”4.4.1″ custom_css_main_element=”width:100%;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.4.1″ custom_padding=”0|0px|14.3px|0px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” custom_margin=”||6px|||” global_colors_info=”{}” theme_builder_area=”post_content”] 3.7 – DEMO EXAMPLE so far.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.4.1″ background_enable_color=”off” custom_padding=”1px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_code _builder_version=”4.14.7″ background_color=”#f7f7f7″ text_orientation=”center” custom_padding=”2em||2em||true|false” hover_enabled=”0″ border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″]
For 20% off your order, use the coupon code: MLABS20 Copied!
[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row column_structure=”2_5,3_5″ _builder_version=”4.3.1″ custom_padding=”19px||16px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”] 3.8 – That’s almost it for the HTML part of the tutorial. To finish off this section, we just need to add a ‘class’ label to the first ‘div’ and an ‘id’ label to the button in the CODE module (you can use any words you like, however, we recommend using descriptive text – note these down for later use too). Our label code additions are marked in RED.[/et_pb_text][/et_pb_column][et_pb_column type=”3_5″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.14.7″ text_text_color=”#000000″ text_font_size=”18px” background_color=”#e7e7e7″ custom_padding=”2em|2em|2em|2em|true|true” border_radii=”on|10px|10px|10px|10px” global_colors_info=”{}” theme_builder_area=”post_content”]
<div class=”coupon-banner”>
<p>For <b>20%</b> off your order, use the coupon code:
<a id=”coupon-btn” class=”et_pb_button et_pb_custom_button_icon” data-icon=”i”>
<span id=”code”>MLABS20</span>
<span id=”alert”>Copied!</span>
</a>
</p>
</div>
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.3.1″ background_color=”#00f2b9″ custom_margin=”43px|auto|24px|auto||” custom_padding=”28px|25px|25px|25px|false|false” border_radii=”on|15px|15px|15px|15px” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” global_colors_info=”{}” theme_builder_area=”post_content”]
FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_button button_url=”/wp-content/uploads/2020/03/Coupon-Banner-MLABS20.zip” button_text=”Download Layout” button_alignment=”left” button_alignment_tablet=”center” _builder_version=”4.14.7″ button_text_color=”#ffffff” button_bg_color=”#13BF04″ button_border_radius=”0px” button_font=”|700||on|||||” custom_css_main_element=”width:100%;||max-width:250px;||border-radius:10px !important;” box_shadow_style=”preset1″ button_border_radius_hover=”5px” global_colors_info=”{}” button_text_size__hover_enabled=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_text_color__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_border_width__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_border_color__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_border_radius__hover_enabled=”on” button_border_radius__hover=”5px” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_letter_spacing__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”off” button_two_letter_spacing__hover_enabled=”off” button_bg_color__hover_enabled=”off” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off” theme_builder_area=”post_content”][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row module_id=”styling-individual-tabs-module” _builder_version=”4.3.1″ custom_margin=”|||” custom_padding=”41px||19px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text module_id=”styling-the-banner” _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”]
#4 Styling the coupon code banner
Depending on whether you’re using Divi Bars or the Global Divi Theme Builder, you’ll want to add the CSS in different ways.
When creating the coupon banner using the Divi Bars plugin you need to add the following CSS to the CODE module (as created in Section 2.4) before the HTML, wrapped in
tags. If you are using the Global Divi Theme Builder we recommend adding the following CSS into the GLOBAL HEADER SETTINGS – “Custom CSS” box – it keeps the CSS neat and tidy and in one place for the whole page (see screenshots below).[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.4.1″ custom_padding=”10px||35px|||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/03/css-in-code-module.png” alt=”CSS added to CODE module” show_in_lightbox=”on” align=”center” force_fullwidth=”on” _builder_version=”4.4.1″ custom_css_main_element=”width:100%;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.4.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https://stg-marketinglabs-stgml.kinsta.cloud/wp-content/uploads/2020/03/header-css-in-on-page-css.png” alt=”CSS code added to header settings box” show_in_lightbox=”on” align=”center” force_fullwidth=”on” _builder_version=”4.4.1″ custom_css_main_element=”width:100%;” border_width_all=”2px” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.4.1″ custom_padding=”4px||32px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.3.1″ global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.4.1″ text_font=”|600|||||||” text_font_size=”18px” header_4_font_size=”30px” global_colors_info=”{}” theme_builder_area=”post_content”] 4.1 – Add this CSS via the options mentioned above (Note:
[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.4.1" custom_margin="||25px||false|false" custom_padding="4px||1px|||" global_colors_info="{}" theme_builder_area="post_content"][et_pb_column type="4_4" _builder_version="4.3.1" global_colors_info="{}" theme_builder_area="post_content"][et_pb_text _builder_version="4.4.1" text_font="|600|||||||" text_font_size="18px" header_4_font_size="30px" custom_margin="||23px|||" global_colors_info="{}" theme_builder_area="post_content"] 4.4 - Now to style the icon. This CSS code sets the font size & line-height to inherit the properties of the button and gives the icon a left margin, moving it away from the button's text.[/et_pb_text][et_pb_text _builder_version="4.14.7" text_text_color="#000000" text_font_size="18px" background_color="#e7e7e7" custom_padding="2em|2em|2em|2em|true|true" border_radii="on|10px|10px|10px|10px" global_colors_info="{}" theme_builder_area="post_content"]
.coupon-banner #coupon-btn:after{
font-size:inherit !important;
line-height: 2em;
margin-left: 0.4em !important;
}
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.3.1" custom_padding="4px||1px|||" global_colors_info="{}" theme_builder_area="post_content"][et_pb_column type="4_4" _builder_version="4.3.1" global_colors_info="{}" theme_builder_area="post_content"][et_pb_text _builder_version="4.4.1" text_font="|600|||||||" text_font_size="18px" header_4_font_size="30px" custom_margin="||23px|||" global_colors_info="{}" theme_builder_area="post_content"] 4.5 - To finish off adding the CSS code, you need to hide the alert span, so it only displays when the button is clicked. And that's all the CSS you need![/et_pb_text][et_pb_text _builder_version="4.14.7" text_text_color="#000000" text_font_size="18px" background_color="#e7e7e7" custom_padding="2em|2em|2em|2em|true|true" border_radii="on|10px|10px|10px|10px" locked="off" global_colors_info="{}" theme_builder_area="post_content"]
.coupon-banner #alert{
display:none;
}
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.4.1" global_colors_info="{}" theme_builder_area="post_content"][et_pb_column type="4_4" _builder_version="4.4.1" global_colors_info="{}" theme_builder_area="post_content"][et_pb_text _builder_version="4.4.1" text_font="|600|||||||" text_font_size="18px" custom_margin="||6px|||" global_colors_info="{}" theme_builder_area="post_content"] 4.6 - DEMO EXAMPLE so far.[/et_pb_text][et_pb_code _builder_version="4.14.7" background_color="#f7f7f7" text_orientation="center" custom_padding="2em|2em|2em|2em|true|true" hover_enabled="0" border_width_all="2px" global_colors_info="{}" theme_builder_area="post_content" sticky_enabled="0"]
[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row column_structure="3_5,2_5" _builder_version="4.3.1" background_color="#00f2b9" custom_margin="37px|auto|24px|auto||" custom_padding="25px|25px|25px|25px|false|false" border_radii="on|15px|15px|15px|15px" global_colors_info="{}" theme_builder_area="post_content"][et_pb_column type="3_5" _builder_version="3.25" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||" theme_builder_area="post_content"][et_pb_text _builder_version="4.4.1" text_font="|600|||||||" text_font_size="18px" global_colors_info="{}" theme_builder_area="post_content"]
FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
[/et_pb_text][/et_pb_column][et_pb_column type="2_5" _builder_version="3.25" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||" theme_builder_area="post_content"][et_pb_button button_url="/wp-content/uploads/2020/03/Coupon-Banner-MLABS20.zip" button_text="Download Layout" button_alignment="left" button_alignment_tablet="center" button_alignment_phone="" button_alignment_last_edited="on|desktop" _builder_version="4.14.7" button_text_color="#ffffff" button_bg_color="#13BF04" button_border_radius="0px" button_font="|700||on|||||" custom_css_main_element="width:100%;||max-width:250px;||border-radius:10px !important;" box_shadow_style="preset1" button_border_radius_hover="5px" global_colors_info="{}" button_text_size__hover_enabled="off" button_one_text_size__hover_enabled="off" button_two_text_size__hover_enabled="off" button_text_color__hover_enabled="off" button_one_text_color__hover_enabled="off" button_two_text_color__hover_enabled="off" button_border_width__hover_enabled="off" button_one_border_width__hover_enabled="off" button_two_border_width__hover_enabled="off" button_border_color__hover_enabled="off" button_one_border_color__hover_enabled="off" button_two_border_color__hover_enabled="off" button_border_radius__hover_enabled="on" button_border_radius__hover="5px" button_one_border_radius__hover_enabled="off" button_two_border_radius__hover_enabled="off" button_letter_spacing__hover_enabled="off" button_one_letter_spacing__hover_enabled="off" button_two_letter_spacing__hover_enabled="off" button_bg_color__hover_enabled="off" button_one_bg_color__hover_enabled="off" button_two_bg_color__hover_enabled="off" theme_builder_area="post_content"][/et_pb_button][/et_pb_column][/et_pb_row][et_pb_row module_id="styling-the-tabs-content" _builder_version="4.3.1" custom_margin="|||" custom_padding="40px||14px||false|false" global_colors_info="{}" theme_builder_area="post_content"][et_pb_column type="4_4" _builder_version="3.25" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||" theme_builder_area="post_content"][et_pb_text module_id="add-javascript" _builder_version="4.4.1" text_font="|600|||||||" text_font_size="18px" header_4_font_size="30px" global_colors_info="{}" theme_builder_area="post_content"]
#5 Adding Javascript
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.3.1" custom_padding="2px||35px|||" global_colors_info="{}" theme_builder_area="post_content"][et_pb_column type="4_4" _builder_version="4.3.1" global_colors_info="{}" theme_builder_area="post_content"][et_pb_text _builder_version="4.4.1" text_font="|600|||||||" text_font_size="18px" custom_padding="0px||||false|false" global_colors_info="{}" theme_builder_area="post_content"] Finally, we want to make our button actually do something when clicked - for this to happen, we need to add some Javascript.
The idea of the 'click to copy' banner is that a user will click the button which will copy the code to their 'clipboard' for use at checkout. We also want the button when clicked, to hide the coupon code and display the "COPIED!" alert message (then a few seconds later, display the code again and hide the alert). This can be achieved with some simple Javascript.
This Javascript code will need to be added inside of new [/et_pb_code][et_pb_button button_url="/wp-content/uploads/2020/03/Coupon-Banner-MLABS20.zip" button_text="Download Layout" button_alignment="left" _builder_version="4.14.7" button_text_color="#ffffff" button_bg_color="#13BF04" button_border_radius="0px" button_font="|700||on|||||" hover_enabled="0" custom_css_main_element="width:100%;||max-width:250px;||border-radius:10px !important;" box_shadow_style="preset1" button_border_radius_hover="5px" global_colors_info="{}" button_text_size__hover_enabled="off" button_one_text_size__hover_enabled="off" button_two_text_size__hover_enabled="off" button_text_color__hover_enabled="off" button_one_text_color__hover_enabled="off" button_two_text_color__hover_enabled="off" button_border_width__hover_enabled="off" button_one_border_width__hover_enabled="off" button_two_border_width__hover_enabled="off" button_border_color__hover_enabled="off" button_one_border_color__hover_enabled="off" button_two_border_color__hover_enabled="off" button_border_radius__hover_enabled="on" button_border_radius__hover="5px" button_one_border_radius__hover_enabled="off" button_two_border_radius__hover_enabled="off" button_letter_spacing__hover_enabled="off" button_one_letter_spacing__hover_enabled="off" button_two_letter_spacing__hover_enabled="off" button_bg_color__hover_enabled="off" button_one_bg_color__hover_enabled="off" button_two_bg_color__hover_enabled="off" theme_builder_area="post_content" module_id="download-layout" sticky_enabled="0"][/et_pb_button][/et_pb_column][/et_pb_row][/et_pb_section]
