Autenticar
Administrar usuarios
Personalizar
Auth0 AI
PlataformaPara 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
- En el Auth0 Dashboard, ve a marca > Universal Login > Customization Options.
- Selecciona un componente del tema (por ejemplo, Colors) en el menú Styles. Luego, personaliza las opciones que aparecen a la derecha.
- Después de personalizar el tema, selecciona Save and Publish.
Componentes del tema
Color
Color
Selecciona un campo de entrada para cambiar el color del elemento. Para elegir colores específicos, puedes:
Una vez que hagas un cambio, la ventana de vista previa mostrará varios ejemplos de los widgets con los cambios especificados.
- 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. |
Tipografías
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
Bordes
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
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
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.Luego, elija si el widget se alinea centrado, a la izquierda o a la derecha en la pantalla.
Auth0 recomienda utilizar una imagen en formato JPEG de al menos 2000 px de ancho.