Add a "Copy Code" Button in the Divi Code Snippet Module

Written by Dan Mossop

The Divi Code Snippet module lets you display syntax highlighted source code within your Divi Builder pages. If you'd like to include a "Copy Code to Clipboard" button to allow users to quickly and easily copy your code samples, you can do it by setting:

Code Snippet Settings > Code Snippet > Copy-to-Clipboard Button = Yes

Like so:

You can optional also set the tooltip text displayed when the user hovers over the copy-to-clipboard button.

Here's how the copy button looks on the front-end (with hover tooltip shown):

Add Text Next to the Copy-to-Clipboard Button

If you'd like to add text next to the button, you can do so with some CSS like so:

.dbcs-clipboard-button:after {
    content: 'Copy';
    font-family: arial;
    margin-left: 10px;
}

We may earn a commission when you visit links on our website.

About Divi Code Snippet Module

Divi Code Snippet Module lets you display syntax-highlighted source code in your Divi Builder pages. Featuring syntax highlighting for 70+ languages, formatting options and automatic language detection. Plus, you can easily add a 'Copy Code' button for enhanced user interaction.

Get Divi Code Snippet Module

| divi code snippet module

Latest Posts

Customize Lightbox Title Styling in the Divi Gallery Module

Adjust the appearance of the lightbox title that appears when visitors open images from a Divi Gallery to align with your brand and improve readability. Refining the title’s color, size, and weight enhances visual hierarchy, accessibility, and overall polish. In this...

Center the Lightbox Image Count in the Divi Gallery Module

Centering the image count in a gallery lightbox creates a cleaner, more balanced presentation and makes it easier for visitors to see where they are in the image set. This simple visual tweak can enhance readability, especially with larger images and longer captions,...

Style the Divi Gallery Module Lightbox Image Count

Tailor the appearance of the image counter in the Divi Gallery module lightbox to match your brand and improve readability. By customizing the counter’s color and typography, you ensure it displays clearly and suits your design. In this guide we show you how to style...

Customize the Lightbox Image Background Color in the Divi Gallery

Control the color that appears behind your images when users open in the gallery lightbox, including support for semi-transparent hues. This helps improve contrast for transparent images, align the experience with your brand palette, and create a more polished viewing...

Style the Divi Gallery Lightbox Close Button

Give your gallery lightbox a clear, on-brand close button by customizing its color and size. This improves visibility and usability against varying image backgrounds and ensures the button renders at full opacity for a consistent experience. In this guide we show you...

6 Comments

Alexandra Höller on June 4, 2024 at 4:48 am

Hello, the copy function does not work… I've enabled the button, set the tooltip but when I click on it, nothing happens. Nothing is getting copied.
Reply
- dan on June 4, 2024 at 7:57 pm
  
  Hey Alexandra, sorry to hear it's not working for you. Are you able to share a link to an example page? It's currently working on my test sites so I'm not sure yet what would be preventing it from working on yours. I should be able to tell you more once I've taken a look at it. Thanks!
  Reply
  - Alexandra Höller on June 5, 2024 at 2:01 pm
    
    Hi Dan,
    yes. It's on my staging-area on a testing blogpost.
    https://staging.cca-media.at/glass-morphism-in-divi-so-erreichst-du-den-blur-effekt-als-hintergrund/
    Reply
    - dan on June 6, 2024 at 3:10 am
      
      Thanks Alexandra, it looks like you have a performance plugin set up to defer loading of the jQuery, which is making jQuery unavailable at the time the copy to clipboard feature tries to use it. Are you able to tell me which performance plugin(s) you're using so that I can do some testing and figure out the best way to deal with this? Thanks!
      Reply
      - Alexandra Höller on June 6, 2024 at 3:17 am
        
        Hello Dan! Thanks for the heads-up. I have just resolved the issue by going to Divi's Theme Options / Performance and disabling the "Defer jQuery and jQuery Migrate" option. :)
      - dan on June 6, 2024 at 12:24 pm
        
        Hey Alexandra, thanks for letting me know! It looks like it was only happening when "Defer jQuery and jQuery Migrate" was enabled AND "Enqueue jQuery Compatibility Script" was disabled. I've just released an update (v1.4.4) that should fix this an allow the copy-to-clipboard button to work even if jQuery is deferred and the compatibility script is disabled. That should let you keep using the defer jQuery option if you wish. Thanks again!

Divi Booster