Blog post

Make a coupon code banner with a “click to copy” button with Divi

Date of post

3 July 2021

Post author

Categories

Read time

10 mins
DEMO BANNER
For 20% off your order, use the coupon code: MLABS20 Copied!
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.

DEMO: Coupon code banner with a “click to copy” button using Divi Bars

coupon code banner example on website

#1 Adding a Divi Code module

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.

#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.

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)
Text alignment module box
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:

<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>

text code box Divi
2.5 – DEMO EXAMPLE so far.
For 20% off your order, use the coupon code: MLABS20
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!

FREE LAYOUT DOWNLOAD

Download the Divi Coupon Code banner layout.

#3 Adding an icon to the button

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.

Divi button example
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.

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

<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>

3.5 – DEMO EXAMPLE so far.
For 20% off your order, use the coupon code: MLABS20
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.

<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>

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.

custom button code being added
3.7 – DEMO EXAMPLE so far.

For 20% off your order, use the coupon code: MLABS20 Copied!

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.

<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>

FREE LAYOUT DOWNLOAD

Download the Divi Coupon Code banner layout.

#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).

CSS added to CODE module
CSS code added to header settings box
4.1 – Add this CSS via the options mentioned above (Note:

For 20% off your order, use the coupon code: MLABS20 Copied!
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.

.coupon-banner #coupon-btn:after{
font-size:inherit !important;
line-height: 2em;
margin-left: 0.4em !important;
}

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!

.coupon-banner #alert{
display:none;
}

4.6 - DEMO EXAMPLE so far.
For 20% off your order, use the coupon code: MLABS20 Copied!

FREE LAYOUT DOWNLOAD

Download the Divi Coupon Code banner layout.

#5 Adding Javascript

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 

Pssst! Did you know we have our very own podcast?

If you’re a business owner or a like-minded marketing professional then this podcast is for you. It’s full of insights, industry news, tips and advice. You’ll learn about search engine optimisation (SEO), pay-per-click (PPC), content marketing, branding and website design.