Webstick.nl logo Webdesignburo en Wordpress-blog

Hoe maak je een downloadlink in WordPress 💥

Hoe maak je een downloadlink in WordPress


We laten je snel zien hoe je downloadlinks maakt in teksten (en buttons) voor alle grote pagebuilders. Oké, daar gaan we.


Advertisement

Divi Ad 680px


1. Een downloadlink maken met Gutenberg

In principe worden alleen ZIP-bestanden automatisch gedownload. WordPress heeft geen optie om een link te downloaden in plaats van deze te openen. We zullen de HTML dus handmatig moeten bewerken als we andere bestanden dan ZIP-bestanden willen downloaden wanneer we op een link klikken. Selecteer het alineablok dat uw downloadlink bevat. Klik vervolgens op het pictogram Meer opties (3 stippen) en selecteer "Bewerken als HTML".


Hoe maak je een downloadlink in WordPress Gutenberg


U ziet nu de HTML van die alinea en we gaan een downloadattribuut aan de link toevoegen. We zullen toevoegen:


download="filename"

aan het einde van de link, zoals te zien is in de onderstaande schermafbeelding. Als een persoon op deze link klikt, neemt de browser automatisch "bestandsnaam" als bestandsnaam. U kunt het vervangen door wat u maar wilt.

Het resultaat van de volledige link zou er zo uitzien.


<a href="https://webstick.blog/file.pdf" download="filename">example</a>


Hoe maak je een downloadlink in WordPress Gutenberg download link


2. Een downloadlink maken met Divi

We gaan door met Divi , de beste paginabuilder die er is, gebruikt door miljoenen van jullie. We beginnen natuurlijk weer met een stukje tekst in een alinea. Aangezien Divi in de eerste plaats een inline-editor is, moeten we de zijconsole openen. De grijze kleuren zijn voor de modules, in dit geval het tekstvak. Klik op het tandwielpictogram met de tekst "Module-instellingen". Zie screenshot hieronder.


Hoe maak je een downloadlink in WordPress Divi


In de zijconsole die verschijnt schakelen we van "Visual" naar "Text". Net zoals we deden in Gutenberg voegen we de onderstaande code toe aan de HTML voor de link. Als een persoon op deze link klikt, neemt de browser automatisch "bestandsnaam" als bestandsnaam. U kunt het vervangen door wat u maar wilt.


download="filename"

Het resultaat van de volledige link zou als volgt zijn.


<a href="https://webstick.blog/file.pdf" download="filename">example</a>

3. Een downloadlink maken met Elementor

Oké, laten we hetzelfde doen voor Elementor, de op één na beste paginabuilder die er is. We beginnen weer met een stuk tekst in een paragraaf. Klik ergens in het vak met tekst. Zo verschijnt dezelfde tekst in de linker console. Hier schakelen we over van "Visueel" naar "Tekst". Voeg nu het onderstaande attribuut toe aan de link in de HTML.


download="filename"

Het resultaat van de volledige link zou als volgt zijn.


<a href="https://webstick.blog/file.pdf" download="filename">example</a>


Hoe maak je een downloadlink in WordPress Elementor


In alle voorbeelden hebben we downloadlinks in platte tekst gemaakt. Wat betreft knoppen of afbeeldingen, het werkt precies hetzelfde. In plaats van een alinea open je een blok voor een knop of een afbeelding. Vervolgens zet je er een link in naar het downloadbare bestand. Schakel over van Visual naar Text en voeg het download-attribuut toe aan de link.


Advertisement

Divi Ad 680px



Scroll naar boven