Crear enlaces de descarga de archivos en una página web

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.

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.

1. Accede al hosting por FTP
2. Crea una nueva carpeta en la raíz de tu sitio web llamada «descargas-pdf».
3. Abre la carpeta recién creada (clicando sobre ella).
4. Desde la parte local, navega por tu ordenador hasta encontrar la carpeta donde almacenas el archivo para descargar.
5. 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.

Me interesa!

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.

1. Sube el archivo a Dropbox.
2. Clica el checkbox para que se muestre el botón de compartir.
3.  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 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:

1. Abrir el archivo en la misma ventana del navegador.
2. Abrir el archivo en una nueva ventana.
3. 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>

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.

Más sobre el autor

Ernesto Barrachina

¿Quieres saber cómo llegué a ser diseñador web?

Me dedico al diseño web Valencia, y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

¿Necesitas un Diseño Web Valencia?