Elige una plantilla y su aspecto
Previsualiza plantillas y define los colores, fuentes, opciones de diseño y logotipo de tu sitio.
Para propietarios y administradores de equipos · 11 pasos
Lo que necesitas antes
- Tu equipo tiene una suscripción con sitio. La administración de un equipo gratuito muestra Obtener un sitio en lugar de Plantilla.
- Eres el propietario o un administrador del equipo.
Pasos
Paso 1: Abre Plantilla
En el menú de la izquierda, pulsa Plantilla.
Deberías ver: una página titulada Plantilla, con una tarjeta por cada plantilla. La que usa tu sitio está marcada como En uso. Si tu sitio aún no tiene plantilla, cada tarjeta muestra Elegir en su lugar: al pulsarlo se elige esa plantilla, con su primera paleta, y se abre Apariencia.
Paso 2: Previsualiza una plantilla
En la tarjeta de una plantilla, pulsa Vista previa.
Deberías ver: tu propio sitio, con esa plantilla, bajo una barra que dice Vista previa. Solo los administradores de tu equipo pueden abrirla. Pulsa Volver a administración cuando termines.
Paso 3: Abre Apariencia
De vuelta en la página Plantilla, pulsa Apariencia arriba a la derecha.
Deberías ver: una página titulada Apariencia, con el formulario a un lado y una vista de tu sitio en tiempo real al lado (debajo, en una pantalla estrecha).
Paso 4: Elige una paleta
En Paleta, elige uno de los preajustes de la plantilla.
Deberías ver: el preajuste resaltado y la vista de tu sitio con sus colores. Un preajuste define los cinco colores y las dos fuentes a la vez.
Paso 5: Cambia un color
En Colores, escribe un código de color como
#7dd3fcen Principal, Acento, Resaltado, Fondo o Texto, o pulsa el cuadrado de al lado para elegir uno.Deberías ver: la vista de tu sitio cambia y Personalizada aparece resaltada en Paleta. Cada color muestra el valor predeterminado de la plantilla; Restablecer recupera ese color.
Paso 6: Da colores propios al texto y las superficies
En Texto y superficies, pulsa Elige un color junto a Encabezados, Leyendas, Tarjetas, Líneas, Enlaces y etiquetas, Botón o Texto del botón y luego escribe un código de color o pulsa el cuadrado de al lado. Cada uno empieza en Automático, que sigue tus cinco colores igual que tu plantilla; Usar automático lo devuelve a ese valor.
Deberías ver: la vista de tu sitio cambia y, debajo de cada color que lleva texto, aparece un número como 7,2:1 · fácil de leer, que indica cuánto destaca sobre tu fondo y tus tarjetas. Por debajo de 4,5:1 (3:1 en los encabezados) dice difícil de leer, muestra el color que verán los visitantes en su lugar y ofrece Hacerlo legible, que pone ese color en el campo.
Paso 7: Elige tus fuentes
En Tipografía, abre Fuente de los títulos o Fuente del texto y elige una fuente. Cada fuente se muestra con su propio estilo y está en un grupo (Display gruesa, Condensada, Tecnológica, Sans limpia, Serif, Manuscrita, Monoespaciada), y puedes escribir un nombre para encontrarla.
Deberías ver: la vista de tu sitio con esa fuente. Cambiar una fuente también pone la paleta en Personalizada.
Paso 8: Añade tu logotipo
En Logotipo, pulsa Elegir imagen junto a Logotipo de texto, Logotipo cuadrado o Favicon (cuando ya hay uno, pone Sustituir). En el cuadro Insertar imagen, elige una imagen o sube una (JPEG, PNG, WebP o AVIF, de hasta 5 MB) y pulsa Insertar. Un logotipo no necesita texto alternativo.
- El logotipo cuadrado se muestra en la navegación de tu sitio, en la parte superior de Inicio y en tu roster.
- El logotipo de texto es opcional: el nombre de tu equipo como imagen, con cualquier forma. Si pones uno, sustituye al logotipo cuadrado y al nombre en la navegación y en la parte superior de Inicio.
- El favicon es el icono pequeño de la pestaña del navegador.
Tus logotipos nunca se recortan ni se modifican. Cada imagen se muestra entera y un fondo transparente sigue siendo transparente. Por eso el logotipo cuadrado y el favicon deben ser cuadrados, de al menos 256 × 256 píxeles: una imagen con otra forma se rechaza al guardar, con un mensaje que indica su tamaño. Un logotipo que elegiste antes de esta norma se sigue mostrando hasta que lo cambies.
Deberías ver: el nombre de la imagen junto a la casilla. Un preajuste nunca los cambia.
Paso 9: Configura las opciones de la plantilla
Más abajo, en Opciones de Broadcast, elige Hero layout (Image behind the text o Image beside the text) y Card edges (Cut corners o Square corners). Otras plantillas muestran aquí sus propias opciones: en Neon Grid, Motion es Full motion o Calm (todo quieto), y Hero glow es Bright (la parte superior de tu página de inicio pasa de tu color de fondo a tu acento) o Oscuro (a un gris oscuro mezclado a partir de tu color principal y tu acento, para un aspecto más oscuro); en Crosshair, Hero layout es Split (tu texto a la izquierda y tu imagen a la derecha con tu próximo partido encima) o Full-width image; en Faceoff, Hero alignment es Centered o Left, y Home roster es Scattered (las tarjetas de tus jugadores alrededor de un gran «Meet the squad») o Grid; en Clutch, Hero layout es Bento (tu portada junto a un panel de últimas noticias) o Full width, y Corners es Rounded o Square; en Varsity, Fondo es Pinstripe (una raya diagonal tenue detrás de cada página) o Sin estilo, y Hero size es Full (una foto alta con el menú encima) o Banner (una más baja); en Redline, Photo tint es Duotone (tus fotos teñidas de tu color principal) o Natural (con sus propios colores), y Panels es Offset (bloques oscuros detrás de tus fotos y secciones) o Flat.
Deberías ver: la vista de tu sitio cambia de diseño.
Paso 10: Guarda
Pulsa Guardar al final del formulario.
Deberías ver: «Apariencia guardada». Los visitantes aún no lo ven: los cambios guardados se quedan en tu borrador hasta que publiques.
Paso 11: Publica tu sitio
Pulsa Publicar en el menú de la izquierda y publica (consulta Publica tu sitio).
Deberías ver: Apariencia en la lista de cambios antes de publicar y, después, tu sitio con su nuevo aspecto.
Cómo saber si ha funcionado
- La página Plantilla marca tu plantilla como En uso.
- Después de publicar, tu sitio muestra tus colores, fuentes y logotipo: enteros, nunca recortados.
- Cada color que lleva texto dice fácil de leer, o has aceptado el tono legible que ven los visitantes en su lugar.
¿Algo no se ve bien?
He cambiado mis colores, pero mi sitio se ve igual
Al guardar, se quedan en tu borrador. Pulsa Publicar en el menú y publica (paso 11).
Un color dice «difícil de leer»
El texto de ese color no destaca lo suficiente sobre tu fondo o tus tarjetas para que todo el mundo pueda leerlo: el texto normal necesita 4,5:1 y los encabezados, 3:1. Tus visitantes nunca ven el color difícil de leer: tu sitio muestra en su lugar el tono legible más cercano, y el formulario lo indica. Pulsa Hacerlo legible para usar ese tono, o elige el tuyo hasta que diga fácil de leer. Un color que dejes en Automático se ajusta igual sin preguntar. Al publicar también se muestra un aviso, pero nunca te impide publicar.
Mi sitio se lee mal porque todo es del mismo color
Da a cada tipo de texto su propio color en Texto y superficies (paso 6): por ejemplo, Encabezados en rojo, Texto en gris claro para los párrafos y un color de Tarjetas algo más claro para que los paneles destaquen sobre la página. Para dar colores distintos a partes enteras de una página (una tienda clara en un sitio oscuro, una franja con tu color de acento), consulta Da colores propios a partes de tu sitio.
¿Cambiar de plantilla borrará mi contenido?
No. Tu contenido pertenece a tu sitio, no a la plantilla: tus colores y fuentes se mantienen donde la nueva plantilla los usa, sus propias opciones vuelven a sus valores predeterminados y una sección que no puede mostrar se oculta, no se borra. El cuadro que se abre antes de cambiar indica las tres cosas, y puedes cancelarlo. Si tu sitio aún tiene los colores y fuentes predeterminados de la plataforma (nunca elegiste una paleta ni cambiaste un color), se usa la primera paleta de la nueva plantilla, para que tu sitio se parezca a la imagen de la plantilla; el cuadro lo indica en Colores y fuentes. Hay siete plantillas: Broadcast, con aspecto de día de partido; Neon Grid, un aspecto negro y neón con una cuadrícula animada y un degradado brillante detrás de la portada, tu logotipo flotando encima, contadores de estadísticas y un muro de vídeos; Crosshair, un aspecto negro y técnico con paneles enmarcados, etiquetas entre corchetes, un gran logotipo de texto en el pie y las fotos en primer plano; Faceoff, un aspecto azul negro y cian hielo en el que tu logotipo se enfrenta al de tu rival en cada tarjeta de partido, con una gran portada y tu equipo repartido alrededor de un titular gigante; Clutch, un aspecto claro con tarjetas blancas redondeadas, encabezados anchos en mayúsculas y un color vivo, con tu próximo partido en la portada y, en pantallas anchas, en la parte superior de cada página; Varsity, un aspecto universitario con franjas azul marino, un dorado, tus mejores puestos en torneos encima de tu roster y tus partidos como tabla de calendario; y Redline, un rojo sobre casi negro con tus fotos teñidas de tu color principal (rojo por defecto), botones cuadrados y tus partidos como filas de fotos con ambos logotipos a los lados de un VS. Los encabezados de Clutch usan Archivo Expanded, que puedes elegir en cualquier plantilla en Display gruesa. En ordenador o tableta, el botón Únete a nuestro Discord de Faceoff, en la parte superior de cada página, solo aparece cuando has añadido tu enlace de Discord en Redes sociales (Añade tus redes sociales). Todas las plantillas muestran tu directo igual: una cuenta atrás ese día, el reproductor de Twitch en la parte superior de tu página de inicio mientras estás en directo y una barra En directo en el resto de páginas (Programa un directo).
Dice «Este sitio ha cambiado desde que lo abriste»
Otro administrador guardó antes y no se guardó nada tuyo. Pulsa Recargar y vuelve a hacer el cambio.
Dice «Este logotipo mide… Sube una imagen cuadrada»
El logotipo cuadrado y el favicon deben ser cuadrados (mismo ancho y alto) y de al menos 256 × 256 píxeles, porque nunca los recortamos. El mensaje indica el tamaño de tu imagen. Haz una versión cuadrada (añade espacio vacío y transparente alrededor de un logotipo ancho), súbela y vuelve a guardar. Un logotipo que no es cuadrado va en Logotipo de texto.
Dice «Este logotipo no tiene un tamaño registrado»
No sabemos el tamaño de esa imagen, así que no podemos comprobar que sea cuadrada. Vuelve a subirla, elige la nueva copia y guarda.
Los campos y Guardar aparecen en gris
La suscripción de tu equipo ha caducado, así que las páginas de su sitio son de solo lectura hasta que vuelva a estar activa. Renuévala: consulta Gestiona la facturación.
Artículos relacionados
¿Sigues atascado? Contacta con soporte o escribe a support@spawnfront.com: dinos en qué página estás y el número del paso.