Como alinear horizontal los checkboxes y botones de radio en los formularios de contacto de Divi

En este tutorial te mostraremos como alinear de forma horizontal los checkboxes y botones de radio en los formularios de contacto de Divi.

En este tutorial gratuito te mostraremos como alinear de forma horizontal los checkboxes y botones de radio en los formularios de contacto de Divi.

Si quieres aprender a manejar el tema Divi de forma profesional, podrƔs aprender todo desde USD 10 al mes* desde aquƭ

Ú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

Los botones de radio y los checkboxes del formulario de contacto de Divi se muestran en un diseƱo vertical y apilado por defecto siempre, esto ocupa un espacio valioso y no es Ćŗtil si se agregan mĆ”s un nĆŗmero importante de opciones en Divi. Es por ello que en este tutorial te mostraremos como alinear de forma horizontal los checkboxes y botones de radio en los formularios de contacto de Divi con un pequeƱo snippet de CSS y ademĆ”s, como configurar el nĆŗmero de columnas en los que queremos que se muestren los botones de radio o checkboxes.

ƍndice

Mira el resultado:

Antes:

DespuƩs:

Paso 1: Construye un formulario de contacto en Divi

Este paso seguramente ya lo tienes realizado, pero para quienes no lo tienen aún realizado, lo explicamos rÔpidamente. En una pÔgina que quieras orientar para contacto o presupuesto de diseño web, por ejemplo, crea un formulario de contacto con Divi.

Para ello solo debes usar el módulo de formulario de contacto de Divi y crear los campos necesarios. Explicamos un poco mÔs de esto en la lección de nuestro curso de Divi donde hablamos mÔs sobre como crear un formulario de contacto en Divi.

Importante: Los checkboxes y botones de radio deben tener la configuración del campo de anchura completa para que funcione el snippet que vamos a utilizar.

Paso 2: Coloca una clase particular al formulario de contacto

Para poder alinear de forma horizontal los checkboxes y botones de radio debemos primero aplicar una clase particular al formulario de contacto para hacerlo “inline” o en lĆ­nea, la clase es: checkboxes-radio-buttons-inline checkboxes-radio-buttons-columns (colocar ambas clases separadas por un espacio)

Esta clase CSS debes colocarla en el módulo de formulario de contacto > avanzado > Clases CSS y ID. Una vez que esté identificado el formulario de contacto, podremos aplicar el CSS personalizado que harÔ que podamos alinearlo de forma horizontal.

Paso 3: Aplicar el snippet CSS

Ahora procedemos a aplicar el siguiente snippet.

/*Hacer los botones de radio y checkboxes inline*/
.checkboxes-radio-buttons-inline .et_pb_contact_field_options_list span {
	display: inline-block;
	margin-right: 30px;
}

/*Desplegar botones de radio y checkboxes en 2 o mƔs columnas*/
.checkboxes-radio-buttons-columns .et_pb_contact_field_options_list {
	display: flex;
	flex-flow: row wrap;
}
.checkboxes-radio-buttons-columns .et_pb_contact_field_checkbox,
.checkboxes-radio-buttons-columns .et_pb_contact_field_radio {
	flex-basis: 40%;
}

Recuerda que si quieres que el snippet CSS se aplique en todo el sitio, debes pegarlo en Divi > opciones del tema > General > CSS personalizado. Sin embargo, si quieres que este snippet CSS se aplique solo a la pÔgina en cuestión donde tienes el formulario de contacto en Divi, puedes aplicarlo en Opciones de la pÔgina > Avanzado > CSS Personalizado.

Si quieres que este código se aplique solo para ciertos dispositivos, puedes colocar el CSS dentro de las etiquetas correspondientes y usar el código desde un módulo de código solo en ciertos dispositivos (ver video)

Este sería el código a usar:

<style>
/*Hacer los botones de radio y checkboxes inline*/
.checkboxes-radio-buttons-inline .et_pb_contact_field_options_list span {
	display: inline-block;
	margin-right: 20px;
}

/*Desplegar botones de radio y checkboxes en 2 o mƔs columnas*/
.checkboxes-radio-buttons-columns .et_pb_contact_field_options_list {
	display: flex;
	flex-flow: row wrap;
}
.checkboxes-radio-buttons-columns .et_pb_contact_field_checkbox,
.checkboxes-radio-buttons-columns .et_pb_contact_field_radio {
	flex-basis: 40%;
}
</style>

Cambia el valor del porcentaje en “flex-basis” para modificar el nĆŗmero de columnas que quieres que se muestren de forma horizontal los botones de radio y checkboxes. Puedes revisar estos detalles viendo el videotutorial completo.

”Y Listo! Con ello lograrÔs alinear de forma horizontal los checkboxes y botones de radio en los formularios de contacto de Divi

ArtĆ­culos relacionados

Comentarios

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

”Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas mƔs frecuentes que los usuarios hacen sobre Divi, ademƔs de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
dĆ­as
10
horas
10
minutos
10
segundos
”Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
dĆ­as
10
hrs
10
min
10
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.
10
dĆ­as
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
dĆ­as
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
dĆ­as
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!