> ## Documentation Index > Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Describe cómo usar el editor sin código para personalizar los temas de las páginas de Universal Login. # Personaliza los temas de las páginas de Universal Login Puedes crear una experiencia de inicio de sesión con una imagen de marca coherente para tus usuarios al dar estilo a tus pantallas de Universal Login. Con el editor sin código de Universal Login, puedes personalizar fácilmente los colores, las fuentes, los bordes y los fondos de las pantallas que se muestran a los usuarios a lo largo del flujo de inicio de sesión. El editor sin código te permite personalizar el tema de marca de Universal Login. Para personalizar el texto incluido en cada pantalla, consulta [Personalizar los elementos de texto de Universal Login](/es/docs/customize/login-pages/universal-login/customize-text-elements). Si necesitas opciones de personalización más avanzadas, consulta [Personalizar las plantillas de página de Universal Login](/es/docs/customize/login-pages/universal-login/customize-templates). Para usar el editor sin código, debes tener [Universal Login](/es/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) habilitado. La experiencia de Classic Login no es compatible con este editor. Para personalizar el tema de Universal Login, sigue estos pasos: 1. En el Auth0 Dashboard, ve a [marca > Universal Login > Customization Options](https://manage.auth0.com/#/universal-login/customizations/colors). 2. Selecciona un [componente del tema](#theme-components) (por ejemplo, Colors) en el menú Styles. Luego, personaliza las opciones que aparecen a la derecha. 3. Después de personalizar el tema, selecciona **Save and Publish**. Después de guardar el tema, puedes acceder a una vista previa en tiempo real de la experiencia de inicio de sesión para revisar y probar tus pantallas. Para abrir la vista previa en una pestaña nueva, selecciona **Try** sobre el editor sin código.

### Componentes del tema

Para crear el tema de Universal Login que deseas, el menú Styles incluye los siguientes componentes: Selecciona un campo de entrada para cambiar el color del elemento. Para elegir colores específicos, puedes: * Usar el selector de color. * Introducir el código hexadecimal o el valor RGB. * Seleccionar la herramienta cuentagotas para elegir un color de tu pantalla para los elementos disponibles.

| Elemento | Descripción | | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Botón principal | Rellena el botón principal, o el botón que activa la siguiente acción, con el color elegido. | | Etiqueta del botón principal | Cambia el color del texto dentro del botón principal. | | Borde del botón secundario | Cambia el borde de los campos de entrada. | | Etiqueta del botón secundario | Cambia el texto dentro de los campos secundarios en los que se puede hacer clic. | | Enlaces y componentes con foco | Cambia el color del texto de los enlaces que llevan a los usuarios a activar otro flujo de trabajo, como restablecer la contraseña o probar otro método de autenticación. | | Color base de foco | Cambia el color de los botones cuando el cursor pasa sobre ellos antes de seleccionarlos. | | Color base al pasar el cursor | Cambia el color de un botón cuando el usuario hace clic en él. | | Encabezado | Cambia el color del texto del título en el encabezado. | | Texto del cuerpo | Cambia el color del cuerpo del texto. | | Fondo del widget | Cambia el color de fondo de los widgets. | | Borde del widget | Cambia el color del borde de los widgets. | | Etiquetas y marcadores de posición de entrada | Cambia el texto de las etiquetas de los campos de entrada y el texto del marcador de posición. | | Texto de entrada rellenado | Cambia el color del texto que los usuarios escriben en los campos de entrada. Por ejemplo, los campos de username y contraseña. | | Borde de entrada | Cambia el color del borde de los campos de entrada. | | Fondo de entrada | Cambia el color de fondo de los campos de entrada. | | Iconos | Cambia el color de los iconos dentro de los campos de entrada. | | Error | Cambia el color de los mensajes de error dentro de los widgets. | | Éxito | Cambia el color del mensaje de éxito dentro de los widgets. | Una vez que hagas un cambio, la ventana de vista previa mostrará varios ejemplos de los widgets con los cambios especificados.

Para cambiar la fuente predeterminada, introduce la URL de cualquier archivo WOFF (Web Open Font Format) en el campo. Tus archivos WOFF deben estar alojados en una CDN con CORS habilitado o en un servicio de alojamiento con el encabezado Access-Control-Allow-Origin. En el panel de URL de la fuente, ajusta el tamaño general del texto con la opción en píxeles **Tamaño de texto de referencia**. Ten en cuenta que el resto de las opciones no cambia cuando se modifica el texto de referencia. Cambia los siguientes elementos de forma individual: * Título * Subtítulo * Texto del cuerpo * Texto del botón * Etiquetas de entrada * Enlaces Cuando selecciones una opción para configurarla, el panel de vista previa mostrará la ubicación del elemento en el widget y se ajustará al tamaño especificado.

Para personalizar los bordes, los estilos de los botones, los campos de entrada y las esquinas del widget, ajusta el control deslizante o elige una de las opciones disponibles. | Opción | Descripción | | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Grosor del borde de los botones | Ajusta el ancho del borde alrededor de los campos de entrada dentro de las pantallas de inicio de sesión. | | Estilo de los botones | Cambia la forma de los botones dentro de los widgets. Las opciones disponibles son: esquinas rectas, esquinas redondeadas o estilo de píldora. | | Radio del borde de los botones | Ajusta las esquinas de los botones cuando seleccionas esquinas redondeadas. | | Grosor del borde de los campos de entrada | Ajusta el ancho de los bordes de los campos de entrada y los botones dentro de las pantallas de inicio de sesión. | | Estilo de los campos de entrada | Cambia la forma de los campos de entrada dentro de las pantallas de inicio de sesión. Las opciones disponibles son: esquinas rectas, esquinas redondeadas o estilo de píldora. | | Radio del borde de los campos de entrada | Ajusta las esquinas de los campos de entrada cuando seleccionas esquinas redondeadas. | | Radio de las esquinas del widget | Cambia la forma del widget de esquinas rectas a esquinas redondeadas. | | Grosor del borde del widget | Ajusta el ancho del borde del widget. | | Sombra | Casilla de verificación para permitir que los widgets tengan sombra. |

Agrega la URL de tu logotipo para configurar su posición, altura, alineación del texto y la ubicación del inicio de sesión con redes sociales. | Element | Description | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | Posición del logotipo | Elige la ubicación del widget: a la izquierda, a la derecha o en el centro de la página. También puedes optar por ocultar el logotipo. | | URL del logotipo | Introduce la URL de tu logotipo personalizado. Auth0 recomienda archivos SVG. | | Altura del logotipo | Ajusta el tamaño de tu logotipo en la parte superior del widget. | | Alineación del texto del encabezado | Elige si el texto del encabezado debe alinearse a la izquierda, a la derecha o centrado. | | Diseño de los botones sociales | Elige si el texto debe mostrarse en la parte superior o inferior del botón. |

Agregue una URL de imagen de fondo para seleccionar el fondo que se mostrará en el widget de la pantalla. El Editor sin código admite otros formatos de imagen, como PNG y JPEG. Auth0 recomienda utilizar una imagen en formato JPEG de al menos 2000 px de ancho. Luego, elija si el widget se alinea centrado, a la izquierda o a la derecha en la pantalla.

## Management API

También puede personalizar el tema de su Universal Login con la [Management API](https://auth0.com/docs/api/management/v2). En concreto, puede usar los endpoints de marca para: * [Crear un nuevo tema de marca](https://auth0.com/docs/api/management/v2/branding/post-branding-theme) * [Obtener el tema de marca predeterminado](https://auth0.com/docs/api/management/v2/branding/get-default-branding-theme) * [Obtener un tema de marca específico](https://auth0.com/docs/api/management/v2/branding/get-branding-theme) * [Eliminar un tema de marca](https://auth0.com/docs/api/management/v2/branding/delete-branding-theme) * [Actualizar el tema actual](https://auth0.com/docs/api/management/v2/branding/patch-branding-theme)