BL Cómo hacer el botón de formulario de ancho completo en Divi

Cómo hacer el botón de formulario de ancho completo en Divi

En este tutorial te daremos el snippet para que logres que tu botón de formulario de contacto (y botón normal) con Divi ocupe el ancho completo del contenedor o formulario donde se encuentre ¡Vamos a ello!

Índice

Hacer botón de ancho completo en formulario de contacto en Divi

En este caso, lo que haremos será insertar unas pequeñas líneas de código CSS en las opciones de la página que estemos editando > Avanzado > CSS personalizado.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Copia y pega la siguiente línea de CSS:

/*hacer el contenedor del boton fullwidth*/
.et_contact_bottom_container {
width: 97%;
}

/*hacer el boton del formulario de contacto fullwidth*/
.et_pb_contact_submit.et_pb_button {
width: 100%;
margin: 0 auto;
}

Con eso lograrás que el botón del formulario de contacto en Divi quede de ancho completo, mira el resultado:

Cómo hacer el botón de ancho completo formulario de contacto

Entra aquí para ver en acción la DEMO →

Disclaimer: Este código funciona cuando el formulario de contacto no tiene activado el reCAPTCHA básico de Divi.

Es una opción superútil si quieres que el formulario de contacto de Divi tenga un botón con ancho completo.

Alinear el botón del formulario de contacto en Divi a la izquierda

Algunos usuarios me han preguntado como hacer que el botón del formulario de Divi quede alineado a la izquierda en vez que a la derecha, bien, para esto usaremos el mismo principio del CSS anterior, pero cambiando un poco sus valores:

Copia y pega la siguiente línea de CSS en las opciones generales de Divi o de la página donde quieras aplicar el CSS:

/*hacer el contenedor del boton fullwidth*/
.et_contact_bottom_container {
width: 100%;
}

/*hacer el boton del formulario de contacto a la derecha*/
.et_pb_contact_submit.et_pb_button {
width: 25%;
margin: 0 auto;
}

Con esto lograremos que nuestro botón del formulario de contacto de Divi quede alineado a la izquierda. Así:

Ahora, te daremos unos tips adicionales para que puedas hacer el módulo de botón de Divi de ancho completo también.

Hacer botón de Divi (módulo nativo) de ancho completo

Los pasos son bastante sencillos. Ve a la configuración del módulo de botones y luego ve a la pestaña Avanzado y haz clic para abrir la opción CSS personalizado. Luego en “elemento principal” pega la siguiente línea de CSS:

width: 100%;

Cómo hacer el botón de ancho completo en Divi

Aprende a crear botones flotantes en la versión móvil en Divi, sin plugins con este tutorial premium.

Ahora probablemente notes un problema. El texto no está centrado. Para resolverlo solo cambiamos la alineación de los botones para que el texto quede centrado:

Cómo hacer el botón de ancho completo en Divi

¡Y listo! superfácil, ¿verdad? ¡Ahora tus botones con Divi serán de ancho completo en la columna donde los hayas colocado y el texto estará centrado!

¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo tutorial

Artículos relacionados

Comentarios

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →