Blog post

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

Date of post

3 July 2021

Blog categories

Read time

10 mins

Make a simple coupon code banner with a “click to copy” button with Divi (Uses Divi Bars or Divi Theme Builder)

By Josh Stapleton (Read time: 10mins)
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:
  For 20% off your order, use the coupon code:     MLABS20  
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.
  For 20% off your order, use the coupon code:     MLABS20  
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.
  For 20% off your order, use the coupon code:           MLABS20       Copied!  
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.
class=”coupon-banner”>
  For 20% off your order, use the coupon code:     id=”coupon-btn” class=”et_pb_button et_pb_custom_button_icon” data-icon=”i”>       MLABS20       Copied!  

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:
4.2 - Now for the additional button CSS code. This gives our button a background colour, border radius, removes the border, sets the font size & colour and adds a margin to the left of the button, moving it away from the text on its left. We also added "cursor:pointer;" to change the user's mouse cursor when hovering over the button. Feel free to edit any of these design settings to make sure the banner matches your website's look and feel.
.coupon-banner #coupon-btn{   Background-color: #0094D9 !important;   border-radius:5px !important;   border-width:0 !important;   font-size:16px !important;   margin-left:10px !important;   color:#ffffff !important;   cursor:pointer !important; }
4.3 - DEMO EXAMPLE so far.
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  tags into your CODE module.
  • Line 1 defines our code span as “copytarget”.
  • Line 2 then listens for a click on our “copytarget” and when a click is made, performs the function “copyToClipboard”
  • The “copyToClipboard” function (line 3), first creates a “textarea” and defines it as “temp”. Then defines this “textarea” value as the text content inside “copytarget”. Then temp is selected, a copy command is performed and temp is finally removed.
5.3 - Here's a FULL Javascript code example for you to copy.

Tutorial Summary

That's it! Congratulations...you've created a coupon code banner with a 'click to copy' button. Remember, please edit any of the above styling code to match your website's brand colour and design. If you have any issues or questions, feel free to email the writer of this post via josh(@) https://stg-marketinglabs-stgml.kinsta.cloud.

FINAL Layout Demo: Coupon Code Banner with 'Click to Copy' button

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

Would you like our FREE Divi Coupon Code Banner Layout?

Built by professional web design experts, our FREE layout would look great on your site!

Subscribe

* indicates required
Groups
Please select all the ways you would like to hear from Marketing Labs:
You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.
We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.

Fancy trying another tutorial?

Post author

Josh is a talented web developer and designer who loves all things creative in life. He started out working in graphic design but quickly realised that his real passion was in web development.

More content like this

Get in touch with Marketing Labs®

Recent blog posts

Psst! Did you know we've got our very own podcast?