Creación de diseños únicos de botones Divi mediante un módulo de texto

Es posible que ya se le haya pasado por la mente la creación de 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 botón o CTA 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, exploraré algunos diseños únicos de botones Divi que son posibles usando un módulo de texto.

¡Empecemos!

Vistazo

Aquí hay algunos diseños de botones de ejemplo 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 rincones creativos ...

Creación de diseños únicos de botones Divi mediante un módulo de texto

Suscríbete a nuestro canal de Youtube

# 1 Creando un Botón con Varias Líneas de Texto

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 utilizando el módulo de texto en múltiples formatos. Con 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 constructor 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.

A continuación, se muestra 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 constructor visual. Elija la opción "Construir desde cero". Luego cree una nueva sección con 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:

<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, tet agrega un fondo degradado simple:

Color de degradado de fondo a la izquierda: # FEE140
Gradiente de fondo Color derecho: # 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:

Peso de la fuente del encabezado 3: Ultra Bold
Estilo de fuente del título 3: TT
Color del texto del encabezado 3: #ffffff
Estilo de fuente del título 4: TT
Color del texto del título 4: #ffffff
Tamaño del texto del encabezado 4: 16px

Ahora todo lo que tenemos que hacer es cambiar el tamaño del módulo de texto para que se parezca más a un botón. Para hacer eso, actualice lo siguiente:

Ancho: 230px
Relleno personalizado: 1em arriba, 0.5em abajo, 2em a la izquierda, 2em a la derecha

Desde el lanzamiento de las nuevas opciones de desplazamiento de Divi, se puede hacer clic en todos los módulos como un botón. Para hacer esto, regrese a la pestaña de contenido e ingrese una URL de enlace de módulo.

Aquí esta el resultado final.

Como efecto de desplazamiento, puede agregar una sombra de cuadro que se desplaza por 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:

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 0px (predeterminado), 230px (desplazamiento)
Posición vertical de la sombra del cuadro: 0px
Color de sombra: rgba (0,0,0,0) (predeterminado), # fee140 (hover)

Así es como se ve al pasar el mouse.

# 2 Crear un botón de elemento de lista

Debido a que los módulos de texto le permiten agregar listas (desordenadas u ordenadas) al contenido, puede aprovechar esta función 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 la lista en una etiqueta de título para que pueda diseñar el elemento de viñeta de la lista y el texto del título por separado.

Si aún no lo ha hecho, cree una nueva página e implemente el constructor visual. Elija la opción "Construir desde cero". Luego cree una nueva sección con 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:

<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 salte a la pestaña de diseño y termine 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: Ligero
Color de texto de lista ordenada: # 000000
Tamaño del texto de la lista ordenada: 20px
Espaciado de letras de la lista ordenada: 5px
Tipo de estilo de lista ordenada: decimal-inicial-cero
Posición de estilo de lista ordenada: Exterior
Sangría de elemento de lista ordenada: 2em

En la categoría Texto de encabezado, haga clic en la pestaña H3 y actualice lo siguiente:

Fuente del título 3: Exo 2
Peso de fuente del encabezado 3: Semi negrita
Estilo de fuente del título 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

A continuación, cambie el ancho del módulo y dele un borde y un espaciado para que parezca un botón:

Ancho (del módulo): 262px
Alineación del módulo: centro
Relleno personalizado: 2em arriba, 0px abajo, 2em izquierda, 2em derecha
Esquinas redondeadas: 10px2em
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 estilos de lista (como Upper Roman) para diseños de botones de lista únicos.

# 3 Creando un Botón con Esquinas Creativas (como una hoja)

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 constructor visual. Elija la opción "Construir desde cero". Luego cree una nueva sección con 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:

<h3>grow</h3>
<h4>with us</h4>

Esto nos permite colocar el texto del botón en dos líneas (reduciendo el ancho vertical) y aplicarles estilo de forma independiente.

A continuación, agregue un fondo degradado con un color más parecido a una hoja.

Color de degradado de fondo a la izquierda: # 7cda24
Color de fondo degradado a la derecha: # 26e051
Dirección del gradiente: 90 grados

Ahora pasemos 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
Título 3 Fuente: Oswald
Peso de fuente del encabezado 3: Ligero
Estilo de fuente del título 3: TT
Color del texto del encabezado 3: #ffffff
Tamaño del texto del encabezado 3: 27px
Fuente del encabezado 4: Oswald
Estilo de fuente del título 4: TT
Color del texto del título 4: #ffffff

Continúe actualizando el diseño para darle a su módulo de texto el ancho y el espaciado adecuados para un botón.

Ancho: 178px
Alineación del módulo: centro
Relleno personalizado: 2em arriba, 2em abajo, 1em a la izquierda, 1em a la derecha

Finalmente, podemos agregar nuestras esquinas redondeadas personalizadas para darle al módulo una forma de hoja y luego agregar una sombra de caja para darle más vida a la hoja. Para hacer esta actualización 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 ...

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 25px
Posición vertical de la sombra del cuadro: -4px
Fuerza de propagación de la sombra de caja: -12px
Color de sombra: rgba (0,0,0,0.25)

No olvide agregar la URL de enlace de su 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 desplazarse:

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 divi 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 tener noticias tuyas en los comentarios.

¡Salud!