{"id":7052,"date":"2021-12-09T13:27:57","date_gmt":"2021-12-09T13:27:57","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=7052"},"modified":"2023-02-21T09:47:23","modified_gmt":"2023-02-21T09:47:23","slug":"how-to-create-a-file-download-button","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/","title":{"rendered":"How to Create a File Download Button"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7052\" class=\"elementor elementor-7052\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3dd0404b thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3dd0404b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-55f49adf\" data-id=\"55f49adf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6d39d23b elementor-widget elementor-widget-video\" data-id=\"6d39d23b\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/5nnOVYNqKDk&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d85fea thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1d85fea\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-77503ffa\" data-id=\"77503ffa\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-55dba325 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"55dba325\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1441\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1441\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1442\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1442\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1441\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1441\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1441\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we&#8217;ll learn how to turn a button into a file download button to prompt visitors to download various types of files, such as zip files or ebook samples. The files can be downloaded easily by your website visitors, with one click, onto a computer or any other device.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e Adding files to the Media Library<br \/>\u2714\ufe0e File types allowed<br \/>\u2714\ufe0e Button configuration<br \/>\u2714\ufe0e And much more!<\/p><p>Related Links:<br \/><a href=\"https:\/\/elementor.com\/academy\/how-to-use-the-button-widget-in-elementor\" target=\"_blank\" rel=\"noopener\">Button Widget Tutorial<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/how-to-use-the-icon-library-in-elementor\" target=\"_blank\" rel=\"noopener\">Icon Library<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/the-kit-library\/\" target=\"_blank\" rel=\"noopener\">Kit Library<\/a>\u00a0<br \/><a href=\"https:\/\/library.elementor.com\/digital-design-courses\" target=\"_blank\" rel=\"noopener\">Digital School Kit<\/a><br \/><a href=\"https:\/\/codex.wordpress.org\/Uploading_Files#About_Uploading_Files_on_Dashboard\" target=\"_blank\" rel=\"noopener\">Supported File Types<\/a><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1442\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1442\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1442\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Aviva from Elementor. Today we\u2019ll learn how to set up a Download button in Elementor, without using any code or external plugins.<\/p><p>We can use buttons in a variety of settings, to prompt visitors to download various types of files, such as a zip file to download multiple files at once, or an ebook sample. The files can be downloaded to a computer or any other device.<\/p><p>The download settings are located within the button widget, so if you\u2019re not yet familiar with this widget, we recommend you first watch our dedicated <a href=\"https:\/\/elementor.com\/academy\/how-to-use-the-button-widget-in-elementor\" target=\"_blank\" rel=\"noopener\">button widget tutorial<\/a>, linked below in the description.<br \/>For this tutorial we&#8217;ll use the Mobile App Design course page from the <a href=\"https:\/\/library.elementor.com\/digital-design-courses\" target=\"_blank\" rel=\"noopener\">Digital School Kit<\/a>, which you can find in the Elementor library. I\u2019ve gone ahead, and made a few changes to the content and style, to reflect my website\u2019s needs.<\/p><p>As you can see, we already have a button widget placed here on the page, which we\u2019ll configure to allow our users to download a PDF file of the course Syllabus.<\/p><p>So all we need to do is upload our file, and edit the button settings to download it, upon click.<\/p><p>We\u2019ll start by uploading the Course syllabus file to the WordPress Media Library. Hold down Command or Control E to launch the Finder, and type in \u201cDashboard.\u201d Then hold down Command or Control, while selecting Dashboard, to open it in a new tab. Now we\u2019ll go to Media &gt; Library, and click Add new.<\/p><p>Note that there is a default maximum upload file size, which depends on the hosting provider\u2019s settings. The file should not exceed this size, or we will receive an error message.<\/p><p>We have many different file types to choose from, including various Image, Document, Audio, and Video file types. See the link in the description for the full list of file types supported.<br \/>We\u2019ll be using a PDF Document file for our example. We can click Select File to choose the Syllabus file, or drag and drop it straight into the Media Library. Cool.<\/p><p>Next we\u2019ll need to copy the file\u2019s location, so we can tell the button where to find it. We\u2019ll click the file to enter its settings.<\/p><p>And now we\u2019ll click the File URL field, select it, and copy it to our clipboard. Great. That\u2019s all we need from the Media Library, so let\u2019s head back to the Editor tab. Next we\u2019ll click the button to enter its settings, and in the link field, paste the URL that we just copied.<\/p><p>We\u2019ll set it so that our visitors can download it directly to their computer or mobile device with a relevant file name. To do this, we\u2019ll click the gear icon, and in Custom Attributes, type Download, the pipe symbol, or vertical bar, and the file name.<\/p><p>Great, we\u2019re all set. Now Update, Preview, and let\u2019s test it out. The file downloads straight away, and opens in one click. Perfect!<br \/><br \/>And that\u2019s it. Now you know how to create a Download Button in Elementor. So go ahead and share your download files with your website visitors.<br \/>How will you use the download button? Let us know in the comments below.<\/p><p>For more tutorials, subscribe to our Youtube channel and check out the Elementor Academy. Thanks for watching.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial we\u2019ll learn how to turn a button into a file download button to prompt visitors to download various types of files, such as zip files or ebook samples. The files can be downloaded easily by your website visitors, with one click, onto a computer or any other device. The [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":7071,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41,48],"class_list":["post-7052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials","tag-widgets"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create a File Download Button - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a File Download Button - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we\u2019ll learn how to turn a button into a file download button to prompt visitors to download various types of files, such as zip files or ebook samples. The files can be downloaded easily by your website visitors, with one click, onto a computer or any other device. The [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-09T13:27:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:47:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/download-button.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aviva Darab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aviva Darab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a File Download Button - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a File Download Button - Academy","og_description":"Overview Transcript Overview In this tutorial we\u2019ll learn how to turn a button into a file download button to prompt visitors to download various types of files, such as zip files or ebook samples. The files can be downloaded easily by your website visitors, with one click, onto a computer or any other device. The [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/","og_site_name":"Academy","article_published_time":"2021-12-09T13:27:57+00:00","article_modified_time":"2023-02-21T09:47:23+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/download-button.jpg","type":"image\/jpeg"}],"author":"Aviva Darab","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aviva Darab","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/"},"author":{"name":"Aviva Darab","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449"},"headline":"How to Create a File Download Button","datePublished":"2021-12-09T13:27:57+00:00","dateModified":"2023-02-21T09:47:23+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/"},"wordCount":674,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/download-button.jpg","keywords":["Guides and Tutorials","Widgets"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/","url":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/","name":"How to Create a File Download Button - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/download-button.jpg","datePublished":"2021-12-09T13:27:57+00:00","dateModified":"2023-02-21T09:47:23+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/download-button.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/12\/download-button.jpg","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-create-a-file-download-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Create a File Download Button"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449","name":"Aviva Darab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","caption":"Aviva Darab"},"description":"Aviva is a Designer and Educator at Elementor. She\u2019s experienced in web and graphic design and enjoys sharing her knowledge with others. She stays fueled with coffee, dark chocolate, and Pinterest.","url":"https:\/\/elementor.com\/academy\/author\/user-5e36e0380be94\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=7052"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7052\/revisions"}],"predecessor-version":[{"id":9500,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7052\/revisions\/9500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/7071"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=7052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=7052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=7052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}