When creating a post on a wordpress website with the Divi theme, you can allow your users to download an image (picture) by linking to it with the text module. Unfortunately this is not currently possible with the Divi button module as it doesn’t support the download attribute. 

Here are 3 ways to make a “Download Button”

1. Add a CSS class to the html content
2. Add a CSS class to the block in Gutenberg
3. Add a Divi Button module

Option 1: Add a CSS Class to the html in Your Content

Use the following html in your post, and add the Divi et_button class to the html to make it into a button. It will look and feel the same as if you were to add that button in a Divi builder layout. This will tell the browser to immediately download the file.

* This can be done in the Classic WordPress Editor or in a Gutenberg HTML block. You can also edit the html in most page builder modules to achieve the same result.

Below is an example, just swap out:

• The link to your file
• The name of the image or file (eg. PDF filename)
• Change the text that shows up on the button (eg. Change “Download Now” to “Get PDF”)

HTML Code:

<a href="/wp-content/uploads/filename.jpg" download="image-name" target="_blank" class="et_pb_button">Download</a>

The result using your own html code:

Download Now

Note that this method works best when you want the button size to be the same size of the call to action text.

Option 2: Add the Divi Button Class to Gutenberg Block

Another way to keep your blog simple and add a button that stays inline with the branding on your pages is to simply apply the Divi class et_pb_button to a particular block. This will use the link color that is defined in your style sheet if you are using a child theme. So it may be necessary to set the text color for the block.

You can do this by:

1. Click inside the block that will become a button
2. Click “Block” at the top of the sidebar on the right side of the post (the tab should automatically be selected)
3. Click “Color settings” and choose the “Text Color” that will look best with your button background.
4. Click Advanced at the bottom and paste the following class name under “Additional CSS Class(es)”:
   1. et_pb_button

Here’s an example:

Download a Cool Picture

Note that this will make the entire block into a button. This means the button will extend the full width of the content.

Option 3: Use a Divi “Button” module

If you are already designing your page in the Divi builder, simply add a Button module. Set the the title text and add the link. To stay on-brand, your styling should be set in Divi > Theme Customizer > Buttons. However, if you haven’t set that yet or need this button to look different for some reason, you can set the styling in the module design tab.

As you can see, both buttons like identical. This is because both methods use the same CSS class: et_pb_button.

The result using the Divi Button module:

Quick Tip

While it may be tempting to write your blog posts in the Divi builder (or any WordPress page builder), I always recommend that my clients use the Gutenberg editor instead. It keeps the formatting simple and clean, and easy to read. It also helps you avoid page clutter and distracting design elements that could take away from the content of the post.

Another reason to use the WordPress built in editor instead of a page builder is speed. Your website performance will increase with the less code you use to create it. Page builders are great for creating beautiful designs, but add a lot of code to make it happen. Keep it simple whenever possible.

Divi Tip for Advanced Bloggers

This post was actually written in Gutenberg, not Divi. The above Divi module button was created using a Divi Layout Block, which is embedded in the middle of the post! You can add a Divi layout to the middle of a post by typing:

/Divi

Shortcut to add a Divi Layout in a Gutenberg

Or click the + to add a block and choose “Divi Layout”.

Still having trouble figuring it out for yourself?

All of our WordPress Care plans include time for us to add or update your posts. Click below to schedule a consult and see if one our plans would work for you:

Check Out Our Care Plans