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

|

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;
}

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.