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
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.
Step by Step Menu
FREE LAYOUT DOWNLOAD
Skip the tutorial and download the Divi Coupon Code banner layout for FREE.
DEMO: Coupon code banner with a “click to copy” button using Divi Bars
#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)
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
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.
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.
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.
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.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.
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.
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
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!Fancy trying another tutorial?
Figma vs InDesign: A designer’s perspective
Today, I'm going to compare Figma and InDesign, two tools I’ve been using for a while now (it’s...
Instagram Reels vs TikTok vs YouTube Shorts: A side-by-side comparison
Together, Instagram Reels, TikTok, and YouTube Shorts capture the majority of the world wide webs...
How Instagram capitalised on TikTok’s short-lived US ban
The TikTok ban in the USA caused chaos. Lasting only 12 hours, but having lasting effects on...
