El Módulo Botón de Divi

Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia. El módulo Botón de Divi nos permite, como su nombre lo indica, insertar un botón independiente en cualquier área de la página con la finalidad de enlazar a una URL específica. Con el módulo Botón de Divi podemos enlazar […]
  1. Inicio
  2. Divi
  3. Módulos Divi
  4. El Módulo Botón de Divi

WordPress es Mejor con Divi

  • Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.

El módulo Botón de Divi nos permite, como su nombre lo indica, insertar un botón independiente en cualquier área de la página con la finalidad de enlazar a una URL específica.

Con el módulo Botón de Divi podemos enlazar tanto a una página del mismo sitio web como a otro sitio. El módulo Botón de Divi es el equivalente al bloque de botón de Gutenberg, pero con muchas más posibilidades.

¿Cómo usar el módulo Botón?

El módulo Botón funciona de forma realmente muy simple. Lo primero que vemos cuando insertamos un nuevo módulo Botón es la pestaña Contenido cuya primera opción es la que nos permite indicar el texto del botón.

Texto

En esta opción solo tenemos que escribir el texto que va sobre el botón.

Enlace

En esta sección del módulo botón de Divi debemos indicar la URL a la que va a dirigirnos el botón cuando pulsemos sobre él. Además tendremos la posibilidad de elegir si abrir la URL en la misma ventana o en una pestaña nueva.

Etiqueta de administración

Más abajo, en la misma pestaña, encontramos la opción Etiqueta de administración. Se trata un campo donde podemos escribir un nombre para identificar al módulo actual cuando estemos en la vista de esquema del editor Divi.

¿Cómo configurar el módulo Botón?

Para configurar el módulo Botón de Divi tenemos que cambiar a la pestaña Diseño. Ahí vas a encontrar todas las opciones de configuración del módulo.

Las opciones de configuración que vas a encontrar en la pestaña Diseño están agrupadas en secciones que se pueden ir abriendo y cerrando al mismo tiempo que nos desplazamos hacia abajo.

Alineación

Nos permite establecer la posición que ocupará el módulo Botón dentro de la columna, disponiendo de 3 opciones:

  • Izquierda.
  • Centrada.
  • Derecha.

Botón

Esta sección es la más importante del módulo Botón ya que en ella encontraremos todas las opciones para ajustar el aspecto del botón.

  • Estilos personalizados para botón: activando esta opción se habilitan todas las opciones de ajuste de diseño del botón.
  • Fuente del texto del botón: seleccionamos la familia de fuente que queremos usar para el texto del botón.
  • Tamaño de fuente del botón: definimos el tamaño del texto del botón.
  • Espesor de la fuente del botón: claro, regular, semi-negrita, negrita, ultra-negrita.
  • Estilo de la fuente del botón: cursiva, mayúsculas, letra capital, subrayado, tachado.
  • Color del texto del botón.
  • Espacio entre letras.
  • Color del fondo del botón: puede ser un color sólido, un gradiente de dos colores o una imagen.
  • Ancho del borde del botón: definimos grosor del borde del botón o cero para que no tenga borde.
  • Radio de las esquinas del botón: permite definir la curvatura de las puntas.
  • Icono del botón: Activando esta opción podemos elegir un ícono que aparece junto al texto del botón.
  • Colocación del ícono del botón: puede ser a la derecha o izquierda del texto.
  • Solo mostrar el ícono en hover: activando esta opción muestra el ícono del botón solo cuando pasamos el mouse por encima.
  • Sombra del texto del botón: esta opción nos permite definir una sombra para el texto del botón. La sombre del texto sombra es independiente de la sombra del botón.

Separación

La sección Separación hace referencia a los márgenes del módulo Botón de Divi y desde aquí podemos ajustarlos como mejor nos parezca.

  • Margen. Hace referencia al margen externo del botón (margin en el CSS). Es el espacio que hay entre el borde del botón y el borde de la columna o la fila que lo contiene.
  • Relleno. Hace referencia al margen interno (padding en el CSS). Es el espacio que hay entre el borde del botón y el texto del propio botón.

En ambos casos podemos asignar márgenes diferentes según el tipo de dispositivo con el que se conecta el usuario a nuestra página.

Sombra

La sombra de la caja del botón es independiente de la sombra del texto del botón que vimos más arriba.

Con ayuda de las opciones presentes aquí podremos darle sensación de profundidad al botón, creando un efecto de relieve aplicado al módulo.

Filtros

Los filtros del módulo Botón de Divi son como esos ajustes que utilizamos para aplicar a las fotografías en los programas de edición de imágenes.

Aquí disponemos de un conjunto de efectos que podremos aplicar al botón para alterar su tonalidad natural y darle el acabado que deseamos a través de la graduación de los siguientes atributos:

  • Tonalidad.
  • Saturación.
  • Brillo.
  • Contraste.
  • Invertir.
  • Sepia.
  • Opacidad.
  • Desenfoque.

Transformar

Las opciones de Transformar te permiten aplicarle una transformación al módulo Botón de Divi.

Animación

La sección Animación es la última de las opciones de configuración del módulo Botón de Divi que encontramos en la pestaña Diseño.

La animación es el efecto con el que aparece el módulo en la página. Si elegimos la opción None (desactivado) el modulo se carga junto con el resto de los elementos de la página de forma natural.

Si en cambio, seleccionamos alguna de las siete opciones de efectos que tiene Divi, el módulo permanece apagado hasta que el usuario llegue hasta su lugar y, en ese momento, irrumpirá en la página con el efecto elegido.

Por el momento el módulo Botón de Divi cuenta con siete efectos posible:

  • Desvanecer. El módulo Botón va apareciendo suavemente.
  • Diapositiva. El botón ingresa en la página como una diapositiva desde alguno de los lados.
  • Bounce. El botón ingresa por alguno de los lados y hace un efecto de rebote.
  • Zoom. El botón se va agrandando desde un punto hasta llegar al su tamaño definitivo.
  • Invertir. El botón aparece girando sobre su propio eje.
  • Fold. El botón aparece como una hoja de cuaderno que se abre.
  • Roll. El botón aparece en la página rotando sobre un punto.

Según el efecto que elijamos se van a activar más opciones de configuración para que podamos definir cómo funciona el efecto. Por ejemplo podemos definir:

  • La duración del efecto.
  • El retardo del efecto.
  • Y varias cosas más…

 

Si nos vamos a la pestaña Avanzado del módulo Botón de Divi nos encontramos con tres secciones de configuración más:

ID y Clase CSS

La primera de estas opciones es ID y Clase CSS, la cual nos va permitir asignarle al módulo Botón determinados ajustes desde la hoja de estilos CSS.

Si bien el módulo Botón de Divi cuenta con un montón de opciones de configuración y personalización. Es posible que necesites hacer algún ajuste más fino que no está entre las opciones disponibles.

Entonces vas a tener que recurrir a la hoja de estilos, o a la opción CSS personalizado del Personalizador. Pero antes es necesario asignarle al módulo Botón un ID o bien una clase CSS que puedas utilizar en la hoja de estilos para referirte a él.

CSS Personalizado

La sección CSS personalizado del módulo Botón de Divi también sirve para asignarle estilos mediante CSS de una forma aún más sencilla, pero también más básica.

Consta de tres cajas en las que podemos escribir directamente el CSS que queramos aplicarle al módulo.

Atributos

Esta sección hace referencia a la propiedad que tendrá la ventana o pestaña que se abrirá cuando presionemos el botón, a fin de establecer el vínculo entre esta y la página de nuestro sitio web donde se encuentre el modulo botón de Divi.

Estos son los atributos que podrás activar o desactivar:

  • Bookmark: Este atributo garantiza que la URL de la página que se abrirá al presionar el botón se mantendrá inalterable sin importar los cambios que se realicen en el contenido asociado a esa URL.
  • External: Este atributo indica que el contenido de la URL de la página mostrada en la nueva ventana pertenece a otro sitio web y no al nuestro.
  • Nofollow: Sirve para indicar al motor de búsqueda que no incluya la URL de esa página cuando realice el rastreo de nuestro sitio web.
  • Noreferrer: Este atributo indica al navegador que la página que se abrirá al pulsar el botón no tendrá incluido los datos de nuestro sitio web con el propósito de mantener anónima la vinculación.
  • Noopener: Este atributo sirve para proteger a tu sitio web de un ataque malicioso que pueda provenir de la página abierta en la nueva ventana.

Visibilidad

La sección Visibilidad del módulo Botón de Divi nos permite definir si el módulo se ve en todos los dispositivos o solo en alguno de ellos (teléfono móvil, tablet y/o escritorio).

 

Estas son todas las posibilidades que nos ofrece, hasta la fecha de redacción de este manual, el módulo Botón de Divi. Lo cual no quiere decir que no vayan a incorporar funcionalidades nuevas en el futuro.

Jorge B.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

3 Comentarios

  1. Javier

    Buenas tardes Jorge, gracias por este contenido que e muy útil. En el caso en que quiera incluir un enlace dentro de un texto, cómo puedo indicarle a DIVI que ese enlace sea nofollow?

    Entiendo que cada vez que asignamos un enlace a una palabra dentro de un módulo de texto, estamos creando un enlace dofollow, es correcto?

    Desde ya, muchas gracias Jorge, un saludo.

    Responder
  2. Carlos

    Hola Jorge
    gracias por la explicación básica y detallada del módulo botón.

    Saludos,

    Responder
  3. Lara

    Hola Jorge,

    ¿cómo hago para que haciendo clic en el botón, en vez de visualizar el enlace, lo descargue? en este caso quiero que descargue un fichero sin necesidad de que lo muestre en la misma página u otra pestaña.

    Gracias,

    Lara

    Responder

Enviar un comentario

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