Cómo crear botones para descargar archivos en Wordpress

Cómo crear botones para descargar archivos en WordPress

En este tutorial te vamos a explicar cómo crear botones para descargar archivos en WordPress. Y te vamosa a explicar a cómo crearlos de 4 formas distintas: DIVI, Gutenberg, Elementor y el editor clásico.

Índice de contenidos

Subimos el archivo a descargar a la biblioteca de medios

Este paso es igual para todos los ejemplos que vamos a explicar en este tutorial. Subiremos nuestro archivo a descargar a la biblioteca de medios y nos guardaremos la URL del archivo.

En el caso de que almacenemos el archivo en un servicio externo a nuestra web deberemos guardar la URL del archivo que nos ofrezca dicho servicio.

Subir archivos a la bliblioteca de Medios WordPress

Botón para descargar archivos en WordPress con Gutenberg

Para crear un botón para descargar archivos con Gutenberg buscaremos el módulo y lo insertamos. 

Una vez realizados todos los ajustes de personalización (texto, color, fuente, etc) definiremos en enlace del botón. Para ello clicamos sobre el icono de la cadena y en el popup emergente pegaremos el enlace del archivo.

botones para descargar archivos con Gutenberg

Después de definir el enlace clicaremos sobre el icono de los 3 puntos y seleccionamos la opción editar como HTML.

descargar archivos con Gutenberg

Lo siguiente que haremos será añadir un atributo a la etiqueta HTML <a>. Para ello nos pondremos después del inicio de la etiqueta y añadiremos el atributo download=»true» (marcado de color rojo). El código quedará asi:

a download="true" class="ws-block-button__link" href="https://enlace al archivo">Haz click para descargar aquí
boton para descargar archivos con Gutenberg

Publicamos la entrada y ya tenemos nuestro botón para descargar archivos con Gutenberg.

Al final del tutorial tienes un post en el que repasamos todos los pasos.

Botón para descargar archivos con el editor clásico.

Si tienes conocimientos de CSS y HTML puedes crear tu mismo tu botón para crear descargas de archivos. Si no es tu caso puedes utilizar algunos de los botones ya creados o personalizar el tuyo en CSS button generator. Después de personalizar el botón copiaremos el enlace HTML (recuadro rojo de la imagen) y lo pegaremos en el editor clásico. Cambiaremos el símbolo # por el enlace del archivo y añadiremos al enlace el atributo download=»true». El enlace quedará así:
a download="true" href="https://enlacealarchivo.com" class="myButton">Click aquí para descargar
Cómo crear botones para descargar archivos con el editor clasico

Una vez actualices y visites la página podrás comprobar que aparece un enlace en lugar del botón que habíamos personalizado. Para darle los estilos del botón nos iremos a apariencia/personalizar/ css adicional y pegaremos el código CSS (recuadro azul de la imagen)

botón para descargar archivos con el editor clásico

Y ya tenemos creado nuestro botón para descargar archivos con el editor clásico.

Puedes seguir todos los pasos en el vídeo que hay al final del post.

Botón para descargar archivos con DIVI.

Para crear un botón para descargar archivos con DIVI insertamos el módulo de botón, personalizamos el botón al gusto y insertamos la URL del archivo a descargar y guardamos los cambios.

bóton para descargar archivos con DIVI

El siguiente paso será ir a divi / opciones del tema / integración. Habilitamos la opción de insertar código en la cabecera y pegamos este script:

<script>
jQuery(document).ready(function() {
var downloadButton = jQuery('.download-button');

downloadButton.each(function(index) {
jQuery(this).attr('download', '');
});
});
</script>
botones para descargar archivos con DIVI

Guardamos los cambios y ya tenemos habilitado nuestro botón para descargar archivos con DIVI.

En el vídeo también podrás seguir los pasos.

Botón para descargar archivos con Elementor

Sobre cómo crear un botón para descargar archivos con Elementor ya tenemos un tutorial creado por lo que invitamos a que cliques en el siguiente enlace:

Cómo crear un botón para descargar archivos con Elementor

De igual forma, si no quieres visitar en enlace tambíen lo explicamos en el siguiente vídeo.

Bien pues hasta aquí este tutorial en el que os hemos explicado 4 formas sobre cómo crear botones para descargar archivos en WordPress. Si tenéis cualquier duda o pregunta os invitamos a dejarla en los comentarios.

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Cómo crear pop ups en Wordpress con Elementor

Cómo hacer popups en WordPress con Elementor

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter ¿Quieres crear una llamada a la acción en forma de popups y no sabes como hacerlo. Hoy te explicamos Cómo hacer popups en WordPress con Elementor. Índice de contenidos

Tablas de contenidos para Wordpress con elementor

Cómo crear tablas de contenidos con Elementor

Entre las novedades más destacables que ofrece la versión 2.8 de Elementor resalta la de un nuevo widget para poder crear tablas de contenidos. Simplifica considerablemente que el contenido más sea accesible, permitiendo a los usuarios  escanearlo y tener una idea de la estructura del

Como añadir iconos a tu menu Wordpress con y sin plugins

Cómo añadir iconos a tu menú de WordPress con y sin plugins

Si estás intentado añadir iconos en tu menú principal de tu WordPress y no sabes cómo hacerlo, sigue leyendo este artículo porque te vamos explicar cómo añadir iconos a tu menú de WordPress con y sin plugins. Índice de contenidos Insertar iconos al menú con

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba