Personaliza los temas de las páginas de Universal Login

Describe cómo usar el editor sin código para personalizar 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. Si necesitas opciones de personalización más avanzadas, consulta Personalizar las plantillas de página de Universal Login.

Para usar el editor sin código, debes tener Universal Login habilitado. La experiencia de Classic Login no es compatible con este editor.

​

Editor sin código de Universal Login

Para personalizar el tema de Universal Login, sigue estos pasos:

1. En el Auth0 Dashboard, ve a marca > Universal Login > Customization Options.
2. Selecciona un componente del tema (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:

Color

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.

Tipografías

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.

Bordes

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.

Widget

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.

Fondos de página

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. En concreto, puede usar los endpoints de marca para:

• Crear un nuevo tema de marca
• Obtener el tema de marca predeterminado
• Obtener un tema de marca específico
• Eliminar un tema de marca
• Actualizar el tema actual