> ## Documentation Index > Fetch the complete documentation index at: https://help.chateea.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Barra lateral del editor de formularios y encuestas > Usa las pestañas Estilos, Temas y Avanzado para diseñar tus formularios, botones y alineación de etiquetas. La barra lateral derecha del editor de formularios y encuestas es el panel de control del diseño. Desde ahí ajustas el diseño general, los colores, la tipografía, los botones y las opciones avanzadas sin salir del editor, y ves cada cambio en la vista previa al instante. ## Cómo abrirla Dentro del editor de un formulario o una encuesta, haz clic en **Estilos y opciones** (Styles & Options), en la esquina superior derecha. Vuelve a pulsar el mismo botón para ocultarla. La barra tiene tres pestañas: | Pestaña | Para qué sirve | | - | - | | **Estilos** | Ajustar el diseño, los colores, el fondo y la presentación de los campos | | **Temas** | Aplicar diseños prediseñados para empezar rápido | | **Avanzado** | Afinar contenedor, campos, etiquetas, marcadores de posición y CSS personalizado | ## Pestaña Estilos Es donde defines la base visual del formulario o la encuesta. * **Diseño:** controla cómo se presentan los campos y las etiquetas, los anchos, el espaciado, el relleno (padding) y el margen superior. Usa el margen superior para separar el formulario de lo que tenga encima sin recurrir a CSS. Si dejas los campos de margen vacíos, se mantiene el espaciado predeterminado. * **Relleno a 0 px:** puedes poner el relleno superior e inferior en 0 px para lograr un diseño de borde a borde real, también en la versión publicada. * **Pie de página (encuestas):** controla la navegación y el progreso que ve la persona al avanzar por la encuesta. Puedes elegir si el pie se queda pegado a la tarjeta o a la página, cambiar el fondo, la altura y la tipografía, activar la barra de progreso y personalizar el tipo, la posición, el texto y los colores de los botones **Anterior**, **Volver**, **Siguiente** y **Enviar**. * **Colores y fondo:** define la tipografía, el color de fondo y, donde está disponible, imágenes de fondo o de encabezado. Aquí también está el **color primario**, que se usa en los estados de interacción de los campos. > [!TIP] > > Después de cambiar el pie de página de una encuesta, recórrela completa en la vista previa para comprobar que la navegación y la barra de progreso se ven como esperas. ## Pestaña Temas Los temas son diseños listos que te dan un aspecto profesional en segundos. Lo habitual es aplicar un tema primero y después afinar espaciados y anchos desde **Estilos**. Para aplicar uno, pasa el cursor sobre el tema, haz clic en **Usar tema** y confirma con **Continuar** (Proceed). > [!WARNING] > > Cambiar de tema reemplaza las modificaciones de estilo que hayas hecho. Si te arrepientes, usa el botón **Atrás** de la esquina superior derecha del editor para volver al aspecto anterior. ## Panel de estilo de botones Al hacer clic en el botón de envío dentro del lienzo, la barra lateral muestra la sección **Botón** con todos sus controles agrupados. **1. Elige un tema de botón** Pulsa **Seleccionar temas** y revisa las categorías **Relleno** (Filled), **Borde** (Border) y **Solo texto** (Text Only). Al pasar el cursor sobre un tema ves el resultado en el lienzo. Pulsa **Aplicar** para usarlo. **2. Ajusta los detalles** Personaliza el tema con los grupos de controles: * **Colores y fondo:** color del texto, del fondo y del borde. * **Tipografía:** fuente (admite fuentes personalizadas), grosor, tamaño, espaciado entre letras y mayúsculas o minúsculas. * **Diseño y alineación:** izquierda, centro o derecha, y la opción **Ancho completo**. * **Relleno:** vertical y horizontal, vinculados o por separado. * **Borde y radio de esquinas:** grosor, estilo y redondeo. * **Sombra:** actívala y ajusta desenfoque, distancia y extensión. **3. Deshaz si lo necesitas** Usa **Restablecer** o **Revertir** para deshacer cambios, o vuelve a **Seleccionar temas** para empezar desde otro diseño. ## Pestaña Avanzado Úsala cuando necesites un control más fino: * **Formulario:** bordes, esquinas y sombra del contenedor. * **Campo de entrada:** colores de texto y de enfoque, bordes, esquinas, ancho, relleno y sombras de los campos. * **Etiqueta:** tipografía y color de las etiquetas. * **Etiqueta corta:** tipografía y color de las etiquetas cortas. * **Marcador de posición:** aspecto del texto de ejemplo dentro de los campos. * **CSS personalizado:** reglas propias para un control total. > [!NOTE] > > El CSS personalizado tiene prioridad sobre los estilos y los temas. Si algo no se ve como esperas después de cambiar de tema, revisa primero tu CSS. ## Alineación de etiquetas por campo Además de la alineación global, puedes definir la posición de la etiqueta de cada campo por separado. Es útil para ajustar el ritmo visual en diseños compactos. **1. Selecciona un campo** En el editor, haz clic en un solo campo. **2. Elige la alineación** En la barra lateral, busca **Alineación de etiqueta** y elige **Arriba**, **Izquierda**, **Derecha** o **Predeterminado del formulario**. Ten en cuenta: * Funciona en formularios, encuestas y cuestionarios, solo con el diseño de **una columna**. * Se aplica a los campos estándar: texto, desplegables, opciones únicas y similares. * Los formularios existentes conservan su alineación global hasta que cambies algún campo. * En celulares, la etiqueta siempre se muestra arriba, sin importar lo que definas para escritorio. ## Preguntas frecuentes > **¿Los cambios de la barra lateral se guardan solos?** > > No. Haz clic en **Guardar** en el editor para conservarlos. > **¿Cambiar de tema borra mi diseño detallado?** > > Puede restablecer parte del estilo visual. Revisa la pestaña Estilos después de cambiar de tema. El CSS personalizado sigue teniendo prioridad sobre temas y estilos. > **¿Cómo pruebo un tema sin perder mi diseño actual?** > > Aplica el tema y, si no te convence, pulsa el botón **Atrás** en la esquina superior derecha del editor para recuperar el aspecto anterior. > **¿Qué pasa con la alineación por campo si cambio a dos columnas o a una sola línea?** > > La alineación por campo solo existe en el diseño de una columna. Si cambias de diseño, los campos vuelven a la alineación predeterminada. > **Si cambio la alineación global, ¿qué pasa con los campos que ya ajusté?** > > Los campos con **Predeterminado del formulario** adoptan la nueva alineación global. Los que definiste como Arriba, Izquierda o Derecha conservan su elección. ## Artículos relacionados > **[Color primario en formularios](https://help.chateea.com/docs/sitios/color-primario-en-formularios.md)** > > Aplica el color de tu marca a las interacciones de los campos. > **[CSS personalizado en formularios](https://help.chateea.com/docs/sitios/css-personalizado-en-formularios.md)** > > Ajustes visuales avanzados con tus propias reglas. > **[Editor móvil de formularios](https://help.chateea.com/docs/sitios/editor-movil-de-formularios.md)** > > Estilos independientes para celulares. > **[Edición en línea](https://help.chateea.com/docs/sitios/edicion-en-linea-de-formularios.md)** > > Edita textos directamente en la vista previa. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.