Como alinear 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Ć
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
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.
Comentarios