Es posible que ya se te haya pasado por la cabeza crear diseños únicos de botones Divi utilizando un módulo de texto. Si es así, ¡eres más creativo de lo que crees! Con el lanzamiento de las opciones de desplazamiento en Divi, se puede hacer clic en todos los módulos. Esto abre la puerta para usar cualquier módulo (con todas sus configuraciones de diseño integradas) como un CTA o botón en el que se puede hacer clic. Un módulo de texto, por ejemplo, le permite agregar tanto texto como desee al módulo en diferentes formatos. Además, el módulo de texto también tiene algunas opciones de diseño robustas para personalizar las esquinas redondeadas para crear formas únicas.
En este tutorial, voy a explorar algunos diseños únicos de botones Divi que son posibles usando un módulo de texto.
¡Empecemos!
Aquí hay algunos ejemplos de diseños de botones que crearemos fácilmente con el módulo de texto.
Este es un botón con texto en dos líneas…
Este es un botón que usa un elemento de lista…
Este es un botón que usa esquinas creativas…
Suscríbete a nuestro canal de Youtube
Como se mencionó anteriormente, el módulo de texto permite una cantidad ilimitada de texto, por lo que sería fácil crear un botón con solo dos líneas de texto usando el módulo de texto en múltiples formatos. Usando el editor de texto o wysiwyg, puede agregar texto de párrafo, encabezados, enlaces, listas y citas en bloque . Y la mejor parte del módulo de texto es que puede orientar y diseñar cada uno de estos formatos de texto individualmente utilizando la interfaz de usuario de la pestaña integrada en la configuración de diseño del generador visual.
Esto hace que sea realmente fácil agregar varias líneas de texto y luego diseñar cada línea de texto por separado para un diseño de botón único.
Aquí hay un ejemplo rápido de cómo configurar el módulo de texto como un botón con varias líneas de texto.
Si aún no lo ha hecho, cree una nueva página e implemente el generador visual. Elija la opción «Construir desde cero». Luego crea una nueva sección en una fila de una columna. Luego agregue un módulo de texto a la fila.
Para el contenido de texto, use la pestaña html e ingrese lo siguiente:
|
01
02
|
<h3>Contact Us</h3><h4>WE CAN HELP</h4> |
Hay muchos estilos de fondo diferentes que podemos agregar a nuestro módulo, pero para este ejemplo, agregamos un fondo degradado simple:
Color de fondo degradado a la izquierda: #FEE140
Color de fondo degradado a la derecha: #FA709A
Luego vaya a la pestaña de diseño y use la interfaz de usuario de la pestaña de encabezado para diseñar las etiquetas de encabezado h3 y h4 de la siguiente manera:
Encabezado 3 Peso de fuente: Ultra negrita
Encabezado 3 Estilo de fuente: TT
Encabezado 3 Color de texto: #ffffff
Encabezado 4 Estilo de fuente: TT
Encabezado 4 Color de texto: #ffffff
Encabezado 4 Tamaño de texto: 16px
Ahora todo lo que tenemos que hacer es dimensionar el módulo de texto para que se parezca más a un botón. Para ello actualiza lo siguiente:
Ancho: 230px
Relleno personalizado: 1em arriba, 0.5em abajo, 2em izquierda, 2em derecha
Desde el lanzamiento de las nuevas opciones de desplazamiento de Divi, se puede hacer clic en todos los módulos como si fuera un botón. Para hacer esto, regrese a la pestaña de contenido e ingrese una URL de enlace del módulo.
Aquí esta el resultado final.
Como efecto de desplazamiento, puede agregar una sombra de cuadro que barre el botón y, en última instancia, aplica un nuevo color de fondo para reemplazar el degradado.
Para hacer esto, abra la configuración del módulo de texto y actualice lo siguiente:
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: 0px (predeterminado), 230px (pasar el mouse)
Posición vertical de sombra de cuadro: 0px
Color de sombra: rgba(0,0,0,0) (predeterminado), #fee140 (pasar el mouse)
Así es como se ve al pasar el mouse.
Debido a que los módulos de texto le permiten agregar listas (ordenadas o no) al contenido, puede aprovechar esta característica para crear un botón de lista. Básicamente, todo lo que necesita hacer es crear una lista con un elemento de lista dentro del cuadro de contenido. Luego envuelva el elemento de su lista en una etiqueta de encabezado para que pueda diseñar el elemento de viñeta de la lista y el texto del encabezado por separado.
Si aún no lo ha hecho, cree una nueva página e implemente el generador visual. Elija la opción «Construir desde cero». Luego crea una nueva sección en una fila de una columna. Luego agregue un módulo de texto a la fila.
Luego agregue el siguiente html en la pestaña de texto de su configuración de contenido:
|
01
|
<ol><li><h3>Contact Us</h3></li></ol> |
Es importante envolver el texto del elemento de la lista en una etiqueta de encabezado para que podamos diseñar la viñeta/número del elemento de la lista por separado del texto.
Ahora salta a la pestaña de diseño y termina de diseñar el módulo de texto como un botón:
En la categoría de configuración de texto, seleccione la pestaña de lista ordenada y actualice lo siguiente:
Fuente de lista ordenada: Exo 2
Peso de fuente de lista ordenada: Luz
Color de texto de lista ordenada: #000000
Tamaño de texto de lista ordenada: 20px
Espaciado entre letras de lista ordenada: 5px
Tipo de estilo de lista ordenada: cero decimal
Posición de estilo de lista ordenada:
Elemento de lista ordenada externa sangría: 2em
En la categoría Texto de encabezado, haga clic en la pestaña H3 y actualice lo siguiente:
Fuente del encabezado 3: Exo 2
Peso de la fuente del encabezado 3: Semi negrita
Estilo de fuente del encabezado 3: TT
Color del texto del encabezado 3: #0c71c3
Tamaño del texto del encabezado 3: 26px
Altura de la línea del encabezado 3: 0.3em
Luego, cambia el ancho del módulo y dale un borde y espacio para que se vea como un botón:
Ancho (del módulo): 262 px
Alineación del módulo: centro
Relleno personalizado: 2 em arriba, 0 px abajo, 2 em izquierda, 2 em derecha
Esquinas redondeadas: 10 px 2 em
Ancho del borde: 1 px
Color del borde: #000000
Estilo de borde: sólido
Y no olvide agregar un enlace a su módulo a la URL designada de su elección.
Aquí está el diseño final.
Siéntase libre de explorar nuevos tipos de estilo de lista (como Upper Roman) para obtener diseños de botones de lista únicos.
Para este próximo diseño, vamos a aprovechar la configuración de diseño de esquinas redondeadas dentro de un módulo de texto. La idea básica es establecer diferentes valores de radio de esquina para crear botones con formas únicas. En este ejemplo, voy a dar forma a nuestro módulo para que parezca un botón de hoja.
Si aún no lo ha hecho, cree una nueva página e implemente el generador visual. Elija la opción «Construir desde cero». Luego crea una nueva sección en una fila de una columna. Luego agregue un módulo de texto a la fila.
Abra la configuración del módulo de texto e ingrese el siguiente html en la pestaña de texto del cuadro de contenido:
|
01
02
|
<h3>grow</h3><h4>with us</h4> |
Esto nos permite poner el texto del botón en dos líneas (reduciendo el ancho vertical) y darles estilo de forma independiente.
A continuación, agregue un fondo degradado con un color más «similar a una hoja».
Color izquierdo del degradado de fondo: #7cda24
Color derecho del degradado de fondo: #26e051
Dirección del degradado: 90 grados
Ahora saltemos a la configuración de diseño para centrar nuestro texto y diseñar las etiquetas de encabezado. deberá seleccionar la pestaña h3 para diseñar el encabezado h3 y seleccionar la pestaña h4 para diseñar el encabezado h4:
Orientación del texto: centro
Encabezado 3 Fuente: Oswald
Encabezado 3 Peso de la fuente:
Encabezado ligero 3 Estilo de fuente: TT
Encabezado 3 Color del texto: #ffffff
Encabezado 3 Tamaño del texto: 27px
Encabezado 4 Fuente: Oswald
Encabezado 4 Estilo de fuente: TT
Encabezado 4 Color del texto: #ffffff
Continúe actualizando el diseño para darle a su módulo de texto el ancho y el espacio adecuados para un botón.
Ancho: 178 px
Alineación del módulo: centro
Relleno personalizado: 2 em arriba, 2 em abajo, 1 em izquierda, 1 em derecha
Finalmente, podemos agregar nuestras esquinas redondeadas personalizadas para darle al módulo una forma de hoja y luego agregar una sombra de cuadro para hacer que la hoja parezca más real. Para ello actualiza lo siguiente:
Primero desbloquee la opción de esquina redondeada para que pueda asignar valores individuales a cada esquina.
Esquina superior izquierda: 100 px
Esquina inferior derecha: 100 px
Luego agrega una sombra de cuadro…
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: 25 px
Posición vertical de sombra de cuadro: -4 px
Fuerza de propagación de sombra de cuadro: -12 px
Color de sombra: rgba(0,0,0,0.25)
No olvide agregar su URL de enlace de módulo para que su módulo se vincule a la ubicación deseada.
Aquí está el diseño final.
Para un efecto de desplazamiento, puede alternar los valores de las esquinas redondeadas para colocar el diseño del botón en la dirección opuesta al pasar el mouse:
Y así es como se ve el efecto de desplazamiento.
Pensamientos finales
Siempre es bueno pensar fuera de la caja de vez en cuando cuando se trata de diseñar sitios web con Divi. Con suerte, este tutorial ayudará a pensar en diseños de botones de división nuevos y creativos utilizando el módulo de texto. De hecho, sugeriría explorar otros módulos (como el módulo Blurb) para obtener aún más opciones de diseño.
Espero escuchar de usted en los comentarios.
¡Salud!