Back to contents

JetElements Download button. How to allow the visitors download files stored in Media library

 

Follow the tutorial below to find out how to use the Download Button widget, which is a part of JetElements plugin for Elementor.

The Download Button widget of JetElements will come in handy if you want your visitors to download files of any type. With it, you can share a price list, an info document, etc.

Download Button widget

Creating Download button

Step 1 — Open Elementor page builder and find Download Button widget. Drop it into a new section.

Download Button widget

Step 2 — Navigate to the Content > Content block. Type in the Download ID field the ID of a media library element you want to be available at the button click. You can find it in the element’s URL after it’s been uploaded to WordPress media library.

Attachment settings

Step 3 — You are able to change the text, which will be displayed on a button. Just move on to the Download Link Text field and change the text inside it (you can use the %size% macros if you want to showcase the size of the file in the label). In case the main title is not enough for you, there is also the Download Link Sub Text field, where you can type in a short piece of additional information (or you can still use the %size% macros in order to showcase the size of the file).

Content settings

Step 4 — Navigate to the Download Link Icon dropdown list, where you can select a decorative element (an icon) to add to the Download button.

Download Link Icon dropdown

Step 5 — Move on to the Style > Button block, where you can personalize the button. There are multiple settings, such as Size, Alignment, Margin, Width, Color, Typography and much more!

Button block in the Style settings

Step 6 — if you don’t want your button to shrink when one hovers over it, set the same Padding for the Normal and Hover options. To make your button more attractive, you can select the plain color, the gradient or even an image background.

You can be proud of yourself. You are done! Now, go to your website, refresh it and have a look at how Download Button works. Enjoy!