Agregar un PDF descargable o cualquier tipo de archivo para descargar desde un enlace, permite ampliar información o aportar valor a un post sin necesidad de enlazar con páginas externas.
Por todas partes vemos enlaces de descarga a catálogos, eBooks, manuales…, como en el caso de mi web, que ofrezco descargar un curso de Photoshop al registrarse en mi lista de suscriptores.
➡ Pero ¿sabemos cómo se implementa un enlace de este tipo?
Es un procedimiento sencillo para unos que puede convertirse en tortura para otros, bien por falta de conocimientos básicos de HTML o por que no se apañan del todo con la gestión de su web.
Asà que, para que no tengas que preguntar a nadie, voy enseñarte cómo añadir un pdf descargable mediante un enlace de descarga, que se presente en tres formatos diferentes.
- Enlace con previsualización del archivo en la misma ventana.
- Enlace con previsualización del documento en una ventana nueva.
- Un enlace con descarga directa del archivo.
Esta información será válida tanto para una web HTML, como para páginas web WordPress.
Contenido
Dónde y cómo almacenar el archivo de descarga
Cuando el archivo sea tuyo, tendrás que subirlo a alguna parte para que sea accesible desde cualquier dispositivo y lugar del mundo.
Mientras que si el documento a enlazar ya está en internet no tienes que preocuparte por nada. Más adelante veremos cómo enlazar el archivo para descargarlo mediante un link.
- Puedes optar por subirlo al hosting por FTP.
- Subirlo a la biblioteca de medios de WordPress.
- Subirlo a otra plataforma del tipo Dropbox.
➡ Cualquiera método que elijas permitirá crear un enlace de descarga más tarde.
Subir el archivo descargable al hosting por FTP
Este sistema vale para cualquier tipo de páginas web. 😉
El proceso consiste en crear una carpeta en el hosting e introducir en ella el archivo al que darás acceso a través de un enlace. Realmente no es preciso que esté dentro de ninguna carpeta, pero es lo ideal para que no se entremezcle con los ficheros pertenecientes a la página web.
- Accede al hosting por FTP
- Crea una nueva carpeta en la raÃz de tu sitio web llamada «descargas-pdf».
- Abre la carpeta recién creada (clicando sobre ella).
- Desde la parte local, navega por tu ordenador hasta encontrar la carpeta donde almacenas el archivo para descargar.
- Añade dentro de la carpeta «descargas-pdf» tu archivo descargable, arrastrándolo desde el lado local hasta el lado hosting.
La ruta para acceder al archivo de descarga será parecida a esta:
http://tudominio.es/descargas-pdf/pdf-descargable.pdf.

¿Hacemos juntos tu
Página web?
Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.
Subir un archivo para descargar posteriormente a la biblioteca de medios de WordPress
Si no te convence el acceso por FTP y usas WordPress, también puedes subir el archivo de descarga directamente a la biblioteca de medios de la misma forma en que se sube una imagen a WordPress.
En este caso quedará mezclado entre las imágenes y por eso me gusta subirlo por FTP.
Encontrarás la ruta para el enlace de descarga en los detalles del documento, clicando sobre la miniatura del archivo que acabas de subir.
Subir un archivo a Dropbox y crear un enlace para compartir
Otro lugar donde ubicar los archivos para enlazarlos desde un post son las plataformas de almacenamiento, como Google Drive o Dropbox.
- Sube el archivo a Dropbox.
- Clica el checkbox para que se muestre el botón de compartir.
- Â Crea un enlace para acceder al archivo.
El enlace será asignado por Dropbox automáticamente y tú solo tendrás que guardarlo para añadirlo al link de descarga más tarde.
Sea cual sea el método elegido, tenemos todo preparado para añadir el link de descarga del archivo.
Cómo almacenar un catálogo para que lo descarguen desde mi web Cuéntalo en las redesCómo crear un enlace de descarga de archivos en WordPress
Me centro en WordPress porque hay muchas probabilidades de que este sea tu CMS, pero el tutorial te dará pistas igualmente para añadir enlaces de descarga en cualquier gestor de contenidos.
Está claro que todo esto puede hacerse a través de plugins, que además ofrecen otras posibilidades como el conteo de descargas, pero personalmente prefiero no instalar complementos innecesarios.
Una vez subido el archivo, que en este caso es un PDF, hay que crear el enlace para la posterior descarga del documento.
Es posible crear enlaces para descargar archivos de 3 formas distintas:
- Crear un enlace al archivo multimedia.
- Generar un enlace desde el editor visual.
- Crear el enlace en el editor de HTML.
Crear un enlace de descarga desde la biblioteca multimedia
Puedes crear el enlace en una página o post insertando el archivo igual que cuando añades una foto, desde Añadir objeto, y enlazándolo a Archivo multimedia.
âž¡ En el ejemplo el anchor text quedará asÃ: pdf-descargable
Tendremos creado el enlace, y clicando sobre el texto que hará de enlace accederemos al archivo.
Crear un link de descarga desde el editor visual
También se puede añadir el enlace al PDF descargable como lo haces con cualquier otro enlace, desde las herramientas del editor visual.
Escribe el anchor text y selecciónalo para convertirlo en enlace desde el botón del editor.
Añade la url y listo. Tienes tu enlace de descarga 😀
Crear un enlace al archivo descargable desde el editor HTML
Si lo prefieres puedes añadir el enlace de descarga desde el editor de código HTML de WordPress escribiendo su código directamente.
âž¡ Utiliza el siguiente como referencia:
<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf">Descargar archivo desde aquÃ</a>
El código y el resultado de todo esto será el mismo para cualquiera de los tres sistemas, aunque si has subido el archivo a la biblioteca de medios, la url te la proporcionará WordPress y quedará algo asÃ:
➡ Quedando el código para tu enlace:
<a href="http://tudominio.es/tu-plantilla/wp-content/uploads/2017/04/pdf-descargable.pdf">Descargar archivo desde aquÃ</a>
Añadir pdf descargable en una web HTML
De no ser que tu web disponga de un panel de control que permita subir archivos al hosting, deberás seguir las instrucciones para subir el pdf descargable por FTP vistas anteriormente.
Para escribir el código del enlace de descarga deberás acceder al documento HTML que corresponda e insertarlo manualmente como en el último de los casos propuestos.
Opciones de los enlaces de descarga de archivos
Una vez enlazado el archivo podemos decidir el comportamiento del enlace al clicar sobre el link.
Las opciones son:
- Abrir el archivo en la misma ventana del navegador.
- Abrir el archivo en una nueva ventana.
- Descargar el archivo directamente.
Para abrir el documento enlazado en una ventana diferente o para su descarga directa es necesario manipular el código HTML del enlace, pero es algo muy sencillo que te explico a continuación.
Entra en el editor HTML de WordPress y busca el enlace dentro del código para poder manipularlo.
Visualizar el archivo descargable en la misma ventana
Que es la forma habitual de mostrar cualquier enlace, ya sea para la descarga de archivos o no.
En este caso no hemos tenido que añadir nada al código del enlace.
<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf">Descargar archivo desde aquÃ</a>
Visualizar el documento descargable en una nueva ventana
➡ Aquà la cosa cambia.
La diferencia con el código anterior es que hay que añadir el atributo target=»_blank» al enlace.
<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf" target="_blank">Descargar archivo desde aquÃ</a>
Descarga directa del documento
Observa que se ha añadido el atributo «download» al enlace.
<a href="http://tudominio.es/descargas-pdf/pdf-descargable.pdf" download>Descargar archivo desde aquÃ</a>
Tres formas de presentar los enlaces de descarga en una página web Cuéntalo en las redes
Recibe nuevos artículos mensualmente
y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.
Personalizar los enlaces de descarga
Los que nos dedicamos al diseño web en Valencia sabemos que tanto el diseño de la web en general, como el estilo de cada elemento afecta a las conversiones.
Por tanto, hay que mostrar los enlaces de descarga bien visibles para que no pasen desapercibidos.
Si solo tienes uno, por ejemplo el catálogo de tus ofertas para este año, puedes presentarlo en forma de banner para que destaque entre el resto del texto.
<a href="url del enlace"><img src="tu-imagen.jpg" title="tÃtulo de la imagen" alt="texto alternativo" width="800" height="156"/></a>
En cambio si la página dispone de varios enlaces de descarga, te recomiendo presentarlos en forma de lista presentada de manera especial.
<ul>
<li><a href="url del enlace">Anchor text</a></li>
<li><a href="url del enlace">Anchor text</a></li>
<li><a href="url del enlace">Anchor text</a></li>
</ul>
-  Actividades extra escolares curso 2018
-  Excursiones 2018
- Â Reuniones de padres 2018
Podrás darle por ejemplo el aspecto de un botón o presentarlo dentro de cajas de colores diseñadas con HTML y CSS 😀
Para personalizar los enlaces de descarga u otros elementos de WordPress con seguridad, lo primero que te recomiendo es la instalación de un tema hijo. Aunque si tu plantilla permite la personalización del código, también puedes hacerlo desde ese apartado.
Para ir más allá en el personalizado web, te dejo el enlace a un curso CSS gratuito, y de paso, si quieres crear mayor impacto te propongo que hagas el PDF interactivo.
Van a alucinar con tu catálogo 😀
Gracias por leer hasta aquÃ, y si te ha gustado el artÃculo no olvides compartirlo en las redes sociales.
Si te ha gustado comparte
21 Comentarios en “Crear enlaces de descarga de archivos en una página web”
Hola! Muchas gracias por el post! Necesitaba subir ejercicios a mi sitio web educativo y hace mucho que estaba intentando distintas formas que no me funcionaban. Ahora agregué los PDF a la biblioteca de medios de WordPress y listo! Es super fácil. Muchas gracias por compartir la información.
Muchas gracias a ti, Sofia!!!
SÃ, la biblioteca de WordPress es genial para no tener que crear nuevas carpetas para almacenar ficheros. Lo que pasa es que a mà no termina de convencerme, porque cuando tienes muchos PDF son difÃciles de identificar.
Aún asÃ, es una muy buena opción 😉
Muchas gracias, andaba buscando para crear mi aula virtual con vÃnculos para descargar, tenia noción pero me faltaba una información y solo aquà la encontré, muchas gracias!!!!! 🙂
Me alegro Khris!!!
y muchas gracias a ti por las explicaciones para Flor.
No sabes lo que me costado encontrar un articulo que explique bien como el tuyo.
Muchas gracias.
Pues muchÃsimas gracias Lola!!!
Espero que le saques provecho a tus enlaces de descarga 🙂
Muchas gracias, un tutorial muy claro para los que estamos empezando.
Como serÃa para poner una contraseña antes de que se inicie la descarga?
Saludos.
Hola Meritxell,
revisa el plugin WordPress Download Manager, a ver si te acopla.
Buenas tardes, me llamo Mercedes. Estoy intentando vender unos recursos educativos en formato pdf desde mi blog. Ya tengo asociada mi cuenta paypal, y subido el archivo en Drive. La cuestión es la siguiente, cuando me hagan una compra me gustarÃa hacer un link directo a la pagina de descarga dando las gracias y con el enlace de descarga pero y lo mas importante es que quiero que no pasen ese link a terceros y en Drive no se como hacerlo para no dejar ese enlace abierto al publico.
Solo se me ocurre hacerlo manualmente enviando un mail a la persona que me compre el documento tras depositar el dinero en Paypal, aun asi, el documento lo tendrÃa alojado en drive y seria visible y lo podrÃan copiar… ando muy perdida.
Decir que mi blog se hospeda en blogger y no tengo intención que cambiarlo.
¿Hay alguna solución para este problema?
Espero haberme expresado bien.
Muchas gracias, un saludo.
Hola mercedes,
te has expresado perfectamente. Con blogger no tengo ni idea de cómo puedes hacerlo 😉
Hola! muchas gracias por el aporte. Pero no logré hacer la descarga directa. Tengo mi archivo subido a Google Drive . Mi lÃnea de código es ésta : Ayuda Estoy usando React. Logro abrirlo en otra ventana, pero no me descarga direcamente aunque ponga la etiqueta dowload. PodrÃas ayudarme? gracias!
Hola Flor,
Para descargar un archivo desde Drive, tendrás que crear un enlace de descarga desde él.
No obstante, este post presupone que el archivo a descargar «directamente» está en tu hosting.
Yo también andaba buscando eso!!!! … en tu drive dirÃgete al archivo y haz clic derecho sobre él,
selecciona el que dice «obtener vÃnculo para compartir»,
te dirige a una ventanita y hay un botón que dice «copiar vÃnculo» (ese dato es el que vas a pegar en donde desees hacer el enlace),
en la misma ventanita selecciona «cualquier persona que tenga el vÃnculo»,
y LISTO
Buenas tardes, Ernesto:
Muy bueno su tutorial, especialmente por su claridad. Quisiera saber si una página creada en webs[.]com permitirÃa colocar un archivo descargable o, en caso negativo si existe otro hosting gratuito que lo permita. Gracias anticipadas,
Ariel
Buenos dÃas Ariel,
gracias por la visita 😉
No importa en qué plataforma diseñes tu web. El archivo descargable no tiene porqué estar en el propio hosting. Puedes almacenarlo, por ejemplo, en Dropbox.
Gracias!!
De nada!!! 😉
Graciaas men!!!!!!
Gracias a ti por la visita, Jack 😉
Hola,
Tutorial muy bueno. Claro, simple y muy pedagogico.
Gracias por compartir!!
Saludos.
Por tu comentario entiendo que has conseguido incorporar el archivo descargable a tu página.
Gracias a ti por la visita 😉