Cómo crear un botón de descarga directa con un solo clic en Divi

Resumen rápido

Para hacer que ocurran las descargas automáticas con el botón de divi, solo sigue los siguientes pasos

  1. Crea el módulo botón y agrega la siguiente clase en Avanzado > ID y clases de css > Clase CSS > Añade la clase «rm-descarga»
  2. Es una buena práctica «abrir enlace en una nueva pestaña», hazlo cuando agregues el módulo botón.
  3. Añade el siguiente fragmento de código, vaya a Divi → Opciones de tema. En la pestaña Integración, inserte el siguiente código en el cuadro de texto «Agregar código al head de su blog»:
<script>
jQuery(document).ready(function() {
  var downloadButton = jQuery('.rm-descarga');
    
  downloadButton.each(function(index) {
    jQuery(this).attr('download', '');
  });
});
</script>

Y listo ! las descargas empezarán automáticamente. Si quieres saber que significa todo lo que hemos hecho o deseas hacer lo mismo sin usar el módulo botón te invito a leer el siguiente artículo.

Está inspirado en el artículo de Elegant Themes, pero redactado al español y usando un lenguaje un poco más sencillo.

Artículo: elegantthemes.com/blog/divi-resources/how-to-create-a-direct-single-click-download-button-in-divi-using-the-download-attribute

¿Qué es un enlace de descarga directa?

Se trata de un enlace que comienza a descargar el archivo al hacer clic en lugar de abrirlo en una nueva pestaña en su navegador.

Por defecto, esto ocurre al subir archivos PDF en Divi. Al hacer clic para descargarlo, este se abrirá en una nueva pestaña.

En HTML existe un «atributo» (una palabra especial utilizada dentro de la etiqueta de apertura, para controlar el comportamiento del elemento). Este atributo es «download», en español «descargar».

Este atributo busca lograr dos cosas principales:

  1. El atributo especifica que el enlace de destino se descargará al hacer clic
  2. El valor del atributo servirá como el nombre del archivo descargado.

Esta función es muy útil para cuando deseamos que una persona descargue alguna oferta de libro electrónico, una imagen, o un video por ejemplo.

Para archivos .rar o .zip (archivos que hayan sido comprimidos) esta función no es necesaria, automáticamente se descargarán.

Sin embargo, te enseñaré rápidamente cómo crear un enlace o botón de descarga directa. Lo aprenderás ha hacer tanto de forma manual y usando el módulo botón de divi.

Creación manual del botón de descarga directa

Agregue el atributo «download»

La estructura de un enlace con el atributo «download» es sencilla. Simplemente agregue «download» dentro de la etiqueta inicial <a> junto con su atributo «href» que contiene la URL de su archivo.

<a href="/archivo/Canva5.pdf download >descargar</a>

Agregue el valor a este atributo (nombre de su archivo)

Este atributo, le permite poner un nombre de archivo que no sea el nombre del archivo original, por ejemplo, su archivo se llama «Canva5» pero puede darle un nombre cuando inicie la descarga «5 recetas fáciles.pdf».

Para hacerlo simplemente agregue el nuevo nombre como valor del atributo de descarga:

<a href="/archivo/Canva5.pdf" download="NUEVO-NOMBRE" >Descargar</a>

En el ejemplo anterior, cuando un usuario hace clic para descargar el enlace, el archivo se almacenará en su computadora con el nombre «NUEVO-NOMBRE» en lugar del nombre del archivo original «Canva5.pdf». Esto es útil cuando tiene un archivo con un nombre largo o una cadena de caracteres. El nuevo valor de nombre de archivo proporcionará un nombre de archivo simple y fácil de usar.

Como nota, en la mayoría de los casos, no es necesario agregar la extensión del archivo (es decir, .pdf) al nuevo nombre de archivo ya que el navegador agregará automáticamente la extensión al archivo.

Agregue el respaldo del atributo de destino

Este atributo de descarga aún no es compatible con todos los navegadores, por lo que es buena idea agregar el atributo target = ”_ blank” a su enlace. Esto abrirá el enlace en otra pestaña. 

Esta es siempre una buena práctica al vincular un archivo. De esa manera, si el navegador no admite el atributo de descarga, simplemente abrirá el archivo en una nueva ventana tal como lo haría sin el atributo de descarga. Además, si el navegador admite el atributo de descarga, descargará la imagen sin abrir una nueva ventana. Así que esta es una buena opción alternativa.

<a href="/archivo/Canva5.pdf" download="NUEVO-NOMBRE" target="_blank" >Descargar</a>

Usa este enlace y conviértelo en un botón de divi

Una forma rápida de convertir su enlace en un botón Divi es agregar la clase «et_pb_button» a su enlace. La clase aplicará el CSS ya integrado en Divi. El botón heredará el color del enlace de su cuerpo, por lo que si desea cambiar el estilo del botón, deberá agregar un estilo en línea a su enlace o agregar una clase adicional al enlace y darle estilo usando CSS.

Es decir, tu enlace pasa de ser esto a esto

<a href="/archivo/Canva5.pdf" download="NUEVO-NOMBRE" target="_blank" class="et_pb_button" >Descargar</a>

Enlace de descarga directa con el módulo botón de Divi

Para agregar la funcionalidad de descarga directa a un módulo de botón de divi, primero debe crear un botón que se vincule a su archivo como lo haría normalmente.

Inserte un módulo de botón desde Divi Builder.

En la configuración del módulo de botón, ponga la siguiente configuración:

URL del enlace del botón: (debe ser la URL completa del archivo para descargar)
Botón enlace de destino: en la nueva pestaña (esto es importante como alternativa)
Agregar texto del botón

Luego vaya a Avanzado > CSS personalizado > Clase CSS y agregue la clase «rm-descarga». Esta clase se usará para apuntar al botón con jQuery y agregar el atributo de descarga.

El botón esta casi listo para que funcione como lo queremos, a continuación debemos agregar algo de jQuery.

Agregando el jQuery

Para agregar el atributo «download» al módulo botón, podemos agregar algo de jQuery. Este jQuery creará la función de descarga automática.

Lo que tendrás que hacer es agregar este pequeño fragmento de código, vaya a Divi → Opciones de tema. En la pestaña Integración, inserte el siguiente código en el cuadro de texto «Agregar código al head de su blog»:

<script>
jQuery(document).ready(function() {
  var downloadButton = jQuery('.rm-descarga');
    
  downloadButton.each(function(index) {
    jQuery(this).attr('download', '');
  });
});
</script>

Nota* WordPress aveces hace que las etiquetas scripts no aparezcan, por lo que si no aparecen asegúrate de agregarlas.

Lo que este código hace es agregar el atributo «download» en cualquier enlace creado por el módulo boton con la clase «rm-descarga».

Sin embargo, este código no agrega el nuevo valor de nombre de archivo al atributo «download» que reemplaza el nombre de archivo original. 

Pero si quisieras hacerlo, vas a encontrar que hay unas simples comillas que no hay nada dentro .. es algo parecido a esto -> ‘ ‘.

Si tu escribieras algo ahí dentro, lo que hará el jQuery es que al descargar cualquier cosa, la descarga tendrá el nombre de lo que puso ahí dentro, por ejemplo:

<script>
jQuery(document).ready(function() {
  var downloadButton = jQuery('.rm-descarga');
    
  downloadButton.each(function(index) {
    jQuery(this).attr('download', 'HOLA-XD');
  });
});
</script>

Si copias y pegas esto, cualquier descarga que se haga, el nombre del archivo descargado tendrá «hola-xd.pdf» por ejemplo.

Y eso sería todo !. Ahora puedes agregar la funcionalidad de descarga directa a cualquiera de sus botones usando el Módulo de botón de divi 🙂

Este post fue basado en: elegantthemes.com/blog/divi-resources/how-to-create-a-direct-single-click-download-button-in-divi-using-the-download-attribute

¿Necesitas una página web? Hazlo presionando el botón de abajo

Pin It on Pinterest