📌 Steps to Add “Copy Code” in Divi Post Module
1️⃣ Add Code Snippet Inside Blog Post Content
Whenever you write a post and want to include copyable text, add this inside the post content:
htmlCopyEdit
<div class="custom-code-container">
<pre class="codeBlock">Hello World</pre>
<button class="copy-code-btn">Copy Code</button>
</div>
👉 Replace "Hello World" with your actual text content.
2️⃣ Add Custom CSS for Styling
Go to Divi → Theme Options → Custom CSS, then add:
.custom-code-container {
position: relative;
background: #1e1e1e;
padding: 20px;
border-radius: 8px;
color: #ffffff;
font-family: monospace;
display: flex;
flex-direction: column;
gap: 10px;
}
.custom-code-container pre {
margin: 0;
padding: 15px;
background: #2d2d2d;
border-radius: 5px;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
color: #ffffff;
}
.copy-code-btn {
align-self: flex-end;
background: #ff9800;
color: white;
border: none;
padding: 8px 15px;
cursor: pointer;
border-radius: 5px;
font-size: 14px;
transition: 0.3s ease-in-out;
}
.copy-code-btn:hover {
background: #e68900;
}
3️⃣ Add JavaScript (Works with Multiple Posts Dynamically)
Go to Divi → Theme Options → Integration → Add code to the <head> of your blog, then insert:
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".copy-code-btn").forEach(button => {
button.addEventListener("click", function() {
var code = this.previousElementSibling.innerText; // Get text from the previous <pre> element
var textArea = document.createElement("textarea");
textArea.value = code;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
this.innerText = "Copied!";
setTimeout(() => {
this.innerText = "Copy Code";
}, 1500);
});
});
});
</script>
💡 How This Works in Divi Post Module
3️⃣ Add JavaScript (Works with Multiple Posts Dynamically)
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.