Saltar al contenido
memberarea memberarea.io

Diseño y apariencia

Dé a su plataforma su marca: logotipo, favicon, colores para modo claro y oscuro, fuente, navegación, página de inicio de sesión y pantalla de carga.

En este artículo

Diseño decide el aspecto de su plataforma: el logotipo, los colores, la fuente y dónde está la navegación. Una plataforma con su propia marca se siente como su producto y no como una herramienta alquilada, y los miembros la reconocen a primera vista.

Abrir la configuración de diseño

Para guardar cambios aquí, su rol necesita Gestionar diseño de la plataforma además del acceso a la configuración. Propietario y Administrador tienen ambos. La pestaña Comunidad es la excepción, vea más abajo.

Resumen de la configuración

Las pestañas

Diseño se divide en Marca, Diseño, Iniciar sesión y registrarse, Pantalla de carga, Comunidad, Cursos y Reproductor de vídeo. Las dos primeras dan forma a toda la plataforma; las demás dan estilo a un área cada una.

Logotipo y favicon

En Marca, Logo y Favicon admiten dos imágenes cada uno: una para el Modo claro y otra para el Modo oscuro. Haga clic en una casilla para elegir una imagen de su biblioteca de medios.

La pestaña Marca con logotipo, favicon y paletas para modo claro y oscuro junto a la vista previa.
La pestaña Marca con logotipo, favicon y paletas para modo claro y oscuro junto a la vista previa.
  • El logotipo funciona mejor como SVG o PNG en proporción 5:1, idealmente 1000 x 200 px.
  • El favicon funciona mejor como SVG o PNG en proporción 1:1, idealmente 512 x 512 px.

El favicon es el pequeño icono de la pestaña del navegador y la marca de la pantalla de carga. El logotipo del Modo claro es también el logotipo de sus correos del sistema, hasta que fije uno distinto para ellos.

Colores para modo claro y oscuro

Color contiene cuatro colores para cada modo: Primario, Texto, Resaltar y Fondo. Cada uno es un valor hexadecimal de seis dígitos como #0084FF.

Cuando cambia el color primario, un aviso le ofrece Ajustar el fondo a su color primario. Aplicar añade un 2% de su color primario al fondo de la página, de modo que lleve un ligero matiz de su marca. Cerrar deja el fondo como está.

Por qué importan ambas paletas

Cada persona cambia entre claro y oscuro por su cuenta, con Modo oscuro en el menú de su cuenta. Las cuentas nuevas empiezan en modo claro. Usted no puede elegir el modo de sus miembros, así que compruebe que su logotipo, el texto y el fondo se lean bien en ambos. El botón Modo claro/oscuro sobre la vista previa lo cambia para usted mientras trabaja.

Fuente y avatares

Tipografía fija una familia tipográfica para toda la plataforma. Buscar fuentes filtra la lista, y cada entrada muestra una línea de ejemplo en esa fuente. De fábrica la plataforma usa Roboto.

Avatares de miembros elige la forma de las fotos de perfil en todas partes: Redondo o Cuadrado.

Diseño

Diseño controla el marco alrededor de cada página.

  • Posición de la navegación: Barra lateral (izquierda) es el menú vertical clásico, Barra superior coloca el menú arriba con el contenido a todo el ancho, y Principales combinados muestra una barra meta arriba con el menú principal como megamenú debajo.
  • Barra lateral solo aparece con Barra lateral (izquierda) y ofrece Claro, Oscuro, Cristal y Acento.
  • Cabecera es Animado, una franja de color con formas que se desplazan lentamente, o Quieto, una barra lisa sobre el fondo de la página.
  • Estilo de tarjeta fija cuánto se elevan las tarjetas sobre el fondo: Fijo, Predeterminado o Elevado.
  • Esquinas redondea botones y cajas en cinco pasos, de Ninguno a Redondo.
  • Tinte de cristal y Glass Blur (desenfoque del cristal) controlan las superficies de cristal esmerilado, como cabeceras, paneles desplegables y menús desplegables: lo opacas que son y cuánto difuminan lo que hay detrás.
La pestaña Diseño con la posición de la navegación, el estilo de la barra lateral y la cabecera.
La pestaña Diseño con la posición de la navegación, el estilo de la barra lateral y la cabecera.

Una plataforma nueva empieza con Barra lateral (izquierda), una barra lateral Claro, una cabecera Animado, tarjetas Fijo y esquinas Mediano.

Vista previa, restablecer y guardar

La Vista Previa junto a Marca y Diseño muestra una página de ejemplo con sus opciones actuales antes de guardar. Cambie entre Escritorio y Móvil, alterne Modo claro/oscuro o ábrala en Pantalla completa.

En cuanto una sección difiere del valor predeterminado, muestra Restablecer. Al confirmar con Restablecer en el diálogo Restablecer a los valores predeterminados, esa sección vuelve a los valores predeterminados en el formulario. No se guarda nada hasta que usted guarda.

Guarde con Guardar en la barra inferior. Los nuevos colores, la fuente y las esquinas se aplican de inmediato, sin recargar la página.

Página de inicio de sesión y pantalla de carga

Iniciar sesión y registrarse da estilo a las páginas que se ven antes de iniciar sesión. Elija un diseño, Tarjeta o Pantalla dividida, un Estilo de tarjeta y el Tipo de logo: Logo, Favicon o Ninguno. Las imágenes de fondo y los textos se fijan por página en la misma pestaña.

Inicio de sesión, registro y SSO

Pantalla de carga fija la animación que se muestra mientras carga su plataforma. En Estilo de carga elige uno de seis: Aurora, Pulso, Mosaicos, Skeleton, Anillo y Constelación. Aurora es el predeterminado, y Repetición en la vista previa vuelve a reproducir su elección.

Consejo

Fije el favicon antes de elegir un estilo de carga. Cada estilo construye la animación a su alrededor.

Comunidad, cursos y el reproductor de vídeo

Las tres últimas pestañas dan estilo a un área cada una. Comunidad y Cursos fijan el Diseño de la cabecera de esas páginas junto con los Ajustes de la cabecera del diseño elegido. La pestaña Comunidad solo se guarda mientras Comunidad está activada en Configuraciones > Funciones, y necesita Gestionar configuraciones de la comunidad en lugar de Gestionar diseño de la plataforma. Reproductor de vídeo abarca la Disposición de la barra de control, las esquinas Redondeado, el Fondo de los controles y los Extras del reproductor de todos los vídeos de su plataforma.

Last updated on October 22, 2026

¿Le ha resultado útil este artículo?

Artículos relacionados