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)Step by Step Menu
#1 Adding a Divi Code module
#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.FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
#3 Adding an icon to the button
FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
#5 Adding Javascript
5.1 - Add the following Javascript code within Javascript codes goes here tags into your CODE module.
const copytarget = document.getElementById("code");
copytarget.addEventListener("click", copyToClipboard);
function copyToClipboard() {
const temp = document.body.appendChild(document.createElement('textarea'));
temp.value = copytarget.textContent;
temp.select();
document.execCommand("copy");
temp.remove();
}
That's all the Javascript needed to perform a copy.
5.2 - Now to 'show' and 'hide' our spans accordingly, we need to add the following to the end of the “copyToClipboard” function within the Javascript code.
The first two lines of this last bit of code simply set the display style of the code to “none” and the alert to “unset”. Then we add a Timeout function that after three seconds switches the code back to display “unset” and the alert to display “none”. You can edit the timing of the coupon code reappearing by editing the 3000 number in the code.
document.getElementById("code").style.display = "none";
document.getElementById("alert").style.display = "unset";
setTimeout(function(){
document.getElementById("code").style.display = "unset";
document.getElementById("alert").style.display = "none";
},3000);
const copytarget = document.getElementById("code");
copytarget.addEventListener("click", copyToClipboard);
function copyToClipboard() {
const temp = document.body.appendChild(document.createElement('textarea'));
temp.value = copytarget.textContent;
temp.select();
document.execCommand("copy");
temp.remove();
document.getElementById("code").style.display = "none";
document.getElementById("alert").style.display = "unset";
setTimeout(function(){
document.getElementById("code").style.display = "unset";
document.getElementById("alert").style.display = "none";
}, 3000);
}
Tutorial Summary
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...