Elegir una plantilla y su estilo
Previsualiza plantillas y define los colores, fuentes, opciones de diseño y logo de tu sitio.
Para propietarios y administradores de equipos · 11 pasos
Lo que necesitas primero
- Tu equipo tiene una suscripción al 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: Abrir Plantilla
En el menú de la izquierda, presiona Plantilla.
Deberías ver: una página titulada Plantilla, con una tarjeta por plantilla. La que usa tu sitio está marcada como En uso. Si tu sitio todavía no tiene plantilla, cada tarjeta muestra Elegir en su lugar: al presionarlo eliges esa plantilla, con su primera paleta, y se abre Apariencia.
Paso 2: Previsualizar una plantilla
En la tarjeta de una plantilla, presiona Vista previa.
Deberías ver: tu propio sitio, con esa plantilla, debajo de una barra que dice Vista previa. Solo los administradores de tu equipo pueden abrirla. Presiona Volver a la administración cuando termines.
Paso 3: Abrir Apariencia
De vuelta en la página Plantilla, presiona Apariencia arriba a la derecha.
Deberías ver: una página titulada Apariencia, con el formulario a un lado y una imagen en vivo de tu sitio al lado (debajo, en una pantalla angosta).
Paso 4: Elegir una paleta
En Paleta, elige uno de los preajustes de la plantilla.
Deberías ver: el preajuste resaltado y la imagen de tu sitio con sus colores. Un preajuste define los cinco colores y las dos fuentes a la vez.
Paso 5: Cambiar un color
En Colores, escribe un código de color como
#7dd3fcen Principal, Acento, Destacado, Fondo o Texto, o presiona el cuadrado de al lado para elegir uno.Deberías ver: que la imagen de tu sitio cambia y que Personalizado queda resaltado en Paleta. Cada color muestra el valor predeterminado de la plantilla; Restablecer devuelve ese color.
Paso 6: Dar colores propios al texto y las superficies
En Texto y superficies, presiona Elige un color junto a Títulos, Leyendas, Tarjetas, Líneas, Enlaces y etiquetas, Botón o Texto del botón, y luego escribe un código de color o presiona el cuadrado de al lado. Cada uno empieza en Auto, que sigue tus cinco colores como lo hace tu plantilla; Usar Auto lo devuelve a ese estado.
Deberías ver: que la imagen de tu sitio cambia y, debajo de cada color que lleva texto, un número como 7.2:1 · fácil de leer: qué tan bien se distingue de tu fondo y tus tarjetas. Por debajo de 4.5:1 (3:1 para títulos) 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: Elegir tus fuentes
En Tipografía, abre Fuente de títulos o Fuente del cuerpo y elige una fuente. Cada fuente se muestra con su propio estilo y está en un grupo (Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace), y puedes escribir un nombre para encontrarla.
Deberías ver: la imagen de tu sitio con esa fuente. Cambiar una fuente también hace que la paleta pase a Personalizado.
Paso 8: Agregar tu logo
En Logo, presiona Elegir imagen junto a Logotipo de texto, Logo cuadrado o Favicon (dice Reemplazar cuando ya hay uno). En el cuadro Insertar imagen, elige una imagen o sube una (JPEG, PNG, WebP o AVIF, hasta 5 MB) y presiona Insertar. Un logo no necesita texto alternativo.
- Logo cuadrado se muestra en la navegación de tu sitio, en la parte superior de Inicio y en tu roster.
- Logotipo de texto es opcional: el nombre de tu equipo como imagen, de cualquier forma. Si pones uno, reemplaza al logo cuadrado y al nombre en la navegación y en la parte superior de Inicio.
- Favicon es el ícono pequeño de la pestaña del navegador.
Tus logos nunca se recortan ni se modifican. Cada imagen se muestra completa, y un fondo transparente sigue siendo transparente. Por eso el logo 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 logo que elegiste antes de esta regla se sigue mostrando hasta que lo cambies.
Deberías ver: el nombre de la imagen junto al espacio. Un preajuste nunca los cambia.
Paso 9: Configurar 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 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óxima partida 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 Simple, 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 con tu color principal) o Natural (sus propios colores), y Panels es Offset (bloques oscuros detrás de tus fotos y secciones) o Flat.
Deberías ver: que la imagen de tu sitio cambia de diseño.
Paso 10: Guardar
Presiona Guardar al final del formulario.
Deberías ver: "Apariencia guardada". Los visitantes todavía no lo ven: los cambios guardados quedan en tu borrador hasta que publiques.
Paso 11: Publicar tu sitio
Presiona Publicar en el menú de la izquierda y publica; consulta Publicar tu sitio.
Deberías ver: Apariencia en la lista de cambios antes de publicar, y tu sitio con su nuevo aspecto después.
Cómo saber si funcionó
- La página Plantilla marca tu plantilla como En uso.
- Después de publicar, tu sitio muestra tus colores, fuentes y logo: completos, nunca recortados.
- Cada color que lleva texto dice fácil de leer, o aceptaste el tono legible que ven los visitantes en su lugar.
¿Algo no se ve bien?
Cambié mis colores, pero mi sitio se ve igual
Al guardar, quedan en tu borrador. Presiona Publicar en el menú y publica (paso 11).
Un color dice "difícil de leer"
El texto de ese color no se distingue lo suficiente de tu fondo o tus tarjetas para que todos puedan leerlo: el texto normal necesita 4.5:1 y los títulos 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. Presiona Hacerlo legible para usar ese tono, o elige el tuyo hasta que diga fácil de leer. Un color que dejes en Auto se ajusta igual, sin preguntar. Publicar también muestra una advertencia, pero nunca te impide publicar.
Mi sitio es difícil de leer porque todo está en un solo color
Dale a cada tipo de texto su propio color en Texto y superficies (paso 6): por ejemplo, Títulos en rojo, Texto en gris claro para los párrafos y un color de Tarjetas un poco más claro para que los paneles resalten sobre la página. Para dar otros colores a partes enteras de una página (una tienda clara en un sitio oscuro, una franja de tu color de acento), consulta Dar colores propios a partes de tu sitio.
¿Cambiar de plantilla borra mi contenido?
No. Tu contenido pertenece a tu sitio, no a la plantilla: tus colores y fuentes se conservan 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 enumera las tres cosas, y puedes cancelarlo. Si tu sitio todavía tiene los colores y fuentes predeterminados de la plataforma (nunca elegiste una paleta ni cambiaste un color), se usa en su lugar la primera paleta de la nueva plantilla, para que tu sitio se vea como la imagen de la plantilla; el cuadro lo indica en Colores y fuentes. Hay siete plantillas: Broadcast, un estilo de día de partido; Neon Grid, un estilo negro y neón con una cuadrícula animada y un degradado brillante detrás de la portada, tu logo flotando encima, contadores de estadísticas y un muro de videos; Crosshair, un estilo negro y técnico con paneles enmarcados, etiquetas entre corchetes, un gran logotipo de texto en el pie de página y fotos en primer plano; Faceoff, un estilo negro azulado y cian hielo donde tu logo se enfrenta al de tu rival en cada tarjeta de partida, con una gran portada y tu equipo disperso alrededor de un titular gigante; Clutch, un estilo claro con tarjetas blancas redondeadas, títulos anchos en mayúsculas y un solo color brillante, tu próxima partida en la portada y, en pantallas anchas, arriba de cada página; Varsity, un estilo universitario con franjas azul marino, un dorado, tus mejores posiciones en torneos sobre tu roster y tus partidas como una 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 partidas como filas de fotos con ambos logos a los lados de un VS. Los títulos de Clutch usan Archivo Expanded, que puedes elegir en cualquier plantilla en Heavy display. En computadora o tablet, el botón Únete a nuestro Discord de Faceoff, arriba de cada página, aparece solo si agregaste tu enlace de Discord en Redes sociales (Agregar tus redes sociales). Todas las plantillas muestran tu transmisión en vivo de la misma forma: una cuenta regresiva ese día, el reproductor de Twitch arriba de tu página de inicio mientras estás en vivo y una barra En vivo en todas las demás páginas (Programar una transmisión).
Dice "Este sitio cambió desde que lo abriste"
Otro administrador guardó primero, y no se guardó nada de lo tuyo. Presiona Recargar y vuelve a hacer tu cambio.
Dice "Este logo es … Sube una imagen cuadrada"
El logo 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 (agrega espacio vacío y transparente alrededor de un logo ancho), súbela y vuelve a guardar. Un logo que no es cuadrado va en Logotipo de texto.
Dice "Este logo no tiene un tamaño registrado"
No conocemos 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 están en gris
La suscripción de tu equipo venció, así que las páginas de su sitio son de solo lectura hasta que vuelva a estar activa. Renuévala; consulta Administrar la facturación.
Artículos relacionados
¿Sigues con problemas? Contacta a soporte o escribe a support@spawnfront.com: dinos en qué página estás y el número del paso.