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

Inicio / Blog / Snippets / Como alinear horizontal los checkboxes y botones de radio en los formularios de contacto de Divi

Autor: Jefferson M

Publicación: 22 Jun, 2022

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

0 comentarios

Enviar un comentario

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

Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

12 + 4 =