Do you want to create dynamic download link on your Elementor-powered WordPress site? If yes, this article will show you how.
As you have probably known, the pro version of Elementor has the ability to add a dynamic link to a page or template. There are two type of dynamic links you can add: internal link and external link.
To create a dynamic download link itself, you will need the help of ACF to create a custom field to place the download links. About the link, you can add whether an internal link or external link.
When Do You Need to Create Dynamic Download Link?
Say you want to create a type of website in which on each content you want to add a download link whereby the link is pointed to unique file (e.g., photo, PDF file, template, etc.).
In such a case, you need a custom field to accommodate the unique link (link to the file).
Steps to Create Dynamic Download Link in Elementor
Step 1: Create the Custom Field Using ACF
First, you need to create a custom field to place the download links. To make the data you enter to the field work as a link, you need to set the custom field type to link/URL. ACF is one of custom field plugins that supports link field type.
You can assign the custom field to an existing post type (e.g., blog post, page) or a custom post type. If you want to assign the custom field to a custom post type, you can use plugins like Pods, CPT UI, to JetEngine to create a new custom post type. In this example, we will assign the custom field to blog post/post.
Before getting started, make sure you have installed and activated the ACF plugin on your WordPress site. Once you are ready, go to Custom Fields -> Add New on your WordPress dashboard to create a new custom field group. Give your new custom field group a name and click the Add Field button to add a custom field.
Fill out all the necessary fields to add your custom field. On the Field Type section, set it to Url.
For this purpose (dynamic download link), you only need one custom field, but if you want to add more custom fields, you can simply click the Add Field button to add more custom fields. Once done adding the custom fields, go to the Location block to assign the custom field group to. By default, your custom field group is assigned to Post (blog post). Click the Publish button to publish your custom field group.
Step 2: Create a Custom Template for the Post
Once the custom field is ready, the next step is to create the custom template for the post type where you assigned the custom field to. Since we assigned the custom field to blog post, we will create a custom template for blog post.
On your WordPress dashboard, go to Templates -> Theme Builder (make sure you have upgraded to Elementor Pro to access this feature). Hover your cursor over the Single Post label on the left panel and click the plus icon.
On the appearing template library, select a premade template if you want to use a premade template. To create the custom template from scratch, you can simply close the template library. Add all the widgets you need to the canvas area. Once done, add the Button widget.
Once the Button widget is in place, go to the settings panel to make some settings. The most crucial setting you need to make here is the link. Click the Dynamic Tags icon on the Link field and select ACF URL Field.
Click the wrench icon on the ACF URL Field field and select a key (custom field) you have just created.
Next, click the gear icon on the ACF URL Field fieldf and type download on the Custom Attributes field. This will make sure all file types associated with the link — including images — automatically downloaded.
Go to the Style tab on the settings panel to style up the button.
Once done editing the custom template, click the PUBLISH button on bottom side of the settings panel to publish it. On the appearing dialog, click the ADD CONDITION button to add a condition. Since the custom template is intended to blog post, make sure to select Post on the options list. Click the SAVE & CLOSE button to apply the changes.
For more detailed tutorial on how to create a custom single post template in Elementor, you can read our previous article.
Step 3: Create a New Post
Once done creating the custom template, you can start to create new post. Make sure to create a post type according to where the custom field is assigned to (blog post in our case). After adding the content, don’t forget to add the link on the custom field section beneath the editor.
Publish your content once done editing it.
The Bottom Line
The ability to create custom template and to add custom fields are useful features that Elementor offers. The features allow you to create a professional website with a no-code approach. No need to deal with code.
One of the implementations of the features is to create a dynamic download link, which will be very much useful when you want to create a stock photo website or a website that offer other types of digital products.
