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.
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.
En esta opción solo tenemos que escribir el texto que va sobre el botón.
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.
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.
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.
Nos permite establecer la posición que ocupará el módulo Botón dentro de la columna, disponiendo de 3 opciones:
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.
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.
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:
Las opciones de Transformar te permiten aplicarle una transformación al módulo Botón de Divi.
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:
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:
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:
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.
Consta de tres cajas en las que podemos escribir directamente el CSS que queramos aplicarle al módulo.
Estos son los atributos que podrás activar o desactivar:
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.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…