Choisir un modèle et son look
Prévisualise les modèles, puis règle les couleurs, polices, options et logo de ton site.
Pour les propriétaires et admins d’équipe · 11 étapes
Ce qu’il te faut d’abord
- Ton équipe a un abonnement site. L’administration d’une équipe gratuite affiche Obtenir un site à la place de Modèle.
- Tu es le propriétaire ou un admin de l’équipe.
Étapes
Étape 1 : Ouvrir Modèle
Dans le menu à gauche, appuie sur Modèle.
Tu devrais voir : une page intitulée Modèle, avec une carte par modèle. Celui que ton site utilise est marqué Utilisé. Si ton site n’a pas encore de modèle, chaque carte affiche Choisir à la place : appuyer dessus choisit ce modèle, avec sa première palette, et ouvre Apparence.
Étape 2 : Prévisualiser un modèle
Sur la carte d’un modèle, appuie sur Aperçu.
Tu devrais voir : ton propre site, dans ce modèle, sous une barre qui indique Aperçu. Seuls les admins de ton équipe peuvent l’ouvrir. Appuie sur Retour à l’administration quand tu as fini.
Étape 3 : Ouvrir Apparence
De retour sur la page Modèle, appuie sur Apparence en haut à droite.
Tu devrais voir : une page intitulée Apparence, avec le formulaire d’un côté et un aperçu en direct de ton site à côté (en dessous sur un écran étroit).
Étape 4 : Choisir une palette
Sous Palette, choisis un des préréglages du modèle.
Tu devrais voir : le préréglage entouré, et l’aperçu de ton site dans ses couleurs. Un préréglage définit les cinq couleurs et les deux polices d’un coup.
Étape 5 : Changer une couleur
Sous Couleurs, tape un code couleur comme
#7dd3fcdans Principale, Accent, Surbrillance, Arrière-plan ou Texte, ou appuie sur le carré à côté pour en choisir une.Tu devrais voir : l’aperçu de ton site changer, et Personnalisée entouré sous Palette. Chaque couleur affiche la valeur par défaut du modèle ; Réinitialiser la rétablit.
Étape 6 : Donner leurs propres couleurs au texte et aux surfaces
Sous Texte et surfaces, appuie sur Choisis une couleur à côté de Titres, Légendes, Cartes, Lignes, Liens et libellés, Bouton ou Texte du bouton, puis tape un code couleur ou appuie sur le carré à côté. Chacune commence sur Auto, qui suit tes cinq couleurs comme le fait ton modèle ; Utiliser Auto la remet.
Tu devrais voir : l’aperçu de ton site changer, et sous chaque couleur qui porte du texte un score comme 7,2:1 · facile à lire, qui indique à quel point elle ressort sur ton arrière-plan et tes cartes. En dessous de 4,5:1 (3:1 pour les titres), elle indique difficile à lire, affiche la couleur que les visiteurs verront à la place et propose Rendre lisible, qui met cette couleur dans le champ.
Étape 7 : Choisir tes polices
Sous Typographie, ouvre Police des titres ou Police du texte et choisis une police. Chaque police s’affiche dans son propre style et est rangée dans un groupe (Display épaisse, Condensée, Tech, Sans épurée, Serif, Manuscrite, Monospace), et tu peux taper un nom pour la trouver.
Tu devrais voir : l’aperçu de ton site dans cette police. Changer une police passe aussi la palette en Personnalisée.
Étape 8 : Ajouter ton logo
Sous Logo, appuie sur Choisir une image à côté de Logotype, Logo carré ou Favicon (le bouton devient Remplacer une fois une image définie). Dans la fenêtre Insérer une image, choisis une image ou importes-en une (JPEG, PNG, WebP ou AVIF, 5 Mo max) et appuie sur Insérer. Un logo n’a pas besoin de texte alternatif.
- Logo carré s’affiche dans la navigation de ton site, en haut de l’Accueil et sur ton effectif.
- Logotype est facultatif : le nom de ton équipe sous forme d’image, de n’importe quelle forme. Si tu en définis un, il remplace le logo carré et le nom dans la navigation et en haut de l’Accueil.
- Favicon est la petite icône dans l’onglet du navigateur.
Tes logos ne sont jamais recadrés ni modifiés. Chaque image s’affiche en entier, et un fond transparent reste transparent. C’est pour ça que le logo carré et le favicon doivent être carrés, d’au moins 256 × 256 pixels : une image d’une autre forme est refusée à l’enregistrement, avec un message qui indique sa taille. Un logo choisi avant cette règle reste affiché jusqu’à ce que tu le changes.
Tu devrais voir : le nom de l’image à côté de l’emplacement. Un préréglage ne les change jamais.
Étape 9 : Régler les options du modèle
Plus bas, sous Options de Broadcast, choisis Hero layout (Image behind the text ou Image beside the text) et Card edges (Cut corners ou Square corners). Les autres modèles listent ici leurs propres options : pour Neon Grid, Motion vaut Full motion ou Calm (tout est immobile), et Hero glow vaut Bright (le haut de ta page d’accueil passe de ta couleur d’arrière-plan à ton accent) ou Sombre (vers un gris foncé mélangé à partir de ta couleur principale et de ton accent, pour un rendu plus sombre) ; pour Crosshair, Hero layout vaut Split (ton texte à gauche, ton image à droite avec ton prochain match par-dessus) ou Full-width image ; pour Faceoff, Hero alignment vaut Centered ou Left, et Home roster vaut Scattered (les cartes de tes joueurs autour d’un grand « Meet the squad ») ou Grid ; pour Clutch, Hero layout vaut Bento (ta bannière à côté d’un panneau Latest news) ou Full width, et Corners vaut Rounded ou Square ; pour Varsity, Arrière-plan vaut Pinstripe (une fine rayure diagonale derrière chaque page) ou Simple, et Hero size vaut Full (une grande photo avec le menu par-dessus) ou Banner (une plus courte) ; pour Redline, Photo tint vaut Duotone (tes photos teintées de ta couleur principale) ou Natural (leurs propres couleurs), et Panels vaut Offset (des blocs sombres placés derrière tes photos et tes sections) ou Flat.
Tu devrais voir : la mise en page de l’aperçu de ton site changer.
Étape 10 : Enregistrer
Appuie sur Enregistrer en bas du formulaire.
Tu devrais voir : « Apparence enregistrée ». Les visiteurs ne voient rien pour l’instant : les modifications enregistrées restent dans ton brouillon jusqu’à ce que tu publies.
Étape 11 : Publier ton site
Appuie sur Publier dans le menu à gauche et publie : voir Publier ton site.
Tu devrais voir : Apparence dans la liste des modifications avant de publier, et ton site avec son nouveau look après.
Comment savoir si ça a marché
- La page Modèle marque ton modèle Utilisé.
- Après la publication, ton site affiche tes couleurs, tes polices et ton logo, en entier, jamais recadré.
- Chaque couleur qui porte du texte indique facile à lire, ou tu as accepté la teinte lisible que les visiteurs voient à la place.
Quelque chose ne va pas ?
J’ai changé mes couleurs mais mon site n’a pas changé
L’enregistrement les garde dans ton brouillon. Appuie sur Publier dans le menu et publie (étape 11).
Une couleur indique « difficile à lire »
Le texte de cette couleur ne ressort pas assez sur ton arrière-plan ou tes cartes pour que tout le monde puisse le lire : le texte normal demande 4,5:1 et les titres 3:1. Tes visiteurs ne voient jamais la couleur difficile à lire : ton site affiche la teinte lisible la plus proche à la place, et le formulaire l’indique. Appuie sur Rendre lisible pour utiliser cette teinte, ou choisis la tienne jusqu’à ce qu’elle indique facile à lire. Une couleur laissée sur Auto est ajustée de la même façon, sans te demander. La publication affiche aussi un avertissement, mais elle ne t’empêche jamais de publier.
Mon site est difficile à lire avec une seule couleur partout
Donne à chaque type de texte sa propre couleur sous Texte et surfaces (étape 6) : par exemple des Titres rouges, un Texte gris clair pour les paragraphes et une couleur de Cartes un peu plus claire pour que les panneaux ressortent sur la page. Pour colorer différemment des parties entières d’une page (une boutique claire sur un site sombre, une bande de ta couleur d’accent), voir Donner leurs propres couleurs aux parties de ton site.
Changer de modèle va-t-il supprimer mon contenu ?
Non. Ton contenu appartient à ton site, pas au modèle : tes couleurs et tes polices sont reprises là où le nouveau modèle les utilise, ses propres options reviennent à leurs valeurs par défaut, et une section qu’il ne peut pas afficher est masquée, pas supprimée. La fenêtre qui s’ouvre avant un changement liste ces trois points, et tu peux annuler. Si ton site a encore les couleurs et les polices par défaut de la plateforme (tu n’as jamais choisi de palette ni changé de couleur), c’est la première palette du nouveau modèle qui est utilisée, pour que ton site ressemble à l’image du modèle ; la fenêtre l’indique sous Couleurs et polices. Il y a sept modèles : Broadcast, un look jour de match ; Neon Grid, un look néon sur fond noir avec une grille animée et un dégradé lumineux derrière la bannière, ton logo qui flotte par-dessus, des compteurs de stats et un mur de vidéos ; Crosshair, un look noir et technique avec des panneaux encadrés, des libellés entre crochets, un grand logotype en pied de page et des photos mises en avant ; Faceoff, un look bleu-noir et cyan glacier où ton logo fait face à celui de ton adversaire sur chaque carte de match, avec une grande bannière et ton équipe dispersée autour d’un titre géant ; Clutch, un look clair avec des cartes blanches arrondies, de larges titres en majuscules et une seule couleur vive, ton prochain match dans la bannière et, sur un grand écran, en haut de chaque page ; Varsity, un look universitaire avec des bandes bleu marine, un doré, tes meilleurs classements en tournoi au-dessus de ton effectif et tes matchs sous forme de tableau de calendrier ; et Redline, un rouge sur fond presque noir avec tes photos teintées de ta couleur principale (rouge par défaut), des boutons carrés et tes matchs en lignes de photos avec les deux logos de part et d’autre d’un VS. Les titres de Clutch sont en Archivo Expanded, que tu peux choisir dans n’importe quel modèle sous Display épaisse. Sur ordinateur ou tablette, le bouton Rejoindre notre Discord de Faceoff en haut de chaque page n’apparaît que si tu as ajouté ton lien Discord sous Réseaux sociaux (Ajouter tes réseaux sociaux). Chaque modèle affiche ton stream de la même façon : un compte à rebours le jour J, le lecteur Twitch en haut de ta page d’accueil pendant ton live, et une barre Live sur toutes les autres pages (Programmer un stream).
Le message « Ce site a changé depuis que tu l’as ouvert » s’affiche
Un autre admin a enregistré avant toi, et rien de ce que tu as fait n’a été enregistré. Appuie sur Recharger, puis refais ta modification.
Le message « Ce logo fait … Importe une image carrée » s’affiche
Le logo carré et le favicon doivent être carrés (même largeur et même hauteur) et faire au moins 256 × 256 pixels, car on ne les recadre jamais. Le message indique la taille de ton image. Crée une version carrée (ajoute un espace vide et transparent autour d’un logo large), importe-la et enregistre à nouveau. Un logo qui n’est pas carré va dans Logotype.
Le message « La taille de ce logo n’est pas enregistrée » s’affiche
On ne connaît pas la taille de cette image, donc on ne peut pas vérifier qu’elle est carrée. Importe-la à nouveau, choisis la nouvelle copie et enregistre.
Les champs et Enregistrer sont grisés
L’abonnement de ton équipe a expiré, donc les pages de son site sont en lecture seule jusqu’à ce qu’il soit de nouveau actif. Renouvelle-le : voir Gérer la facturation.
Articles liés
Toujours bloqué ? Contacte le support ou écris à support@spawnfront.com — indique-nous la page où tu es et le numéro de l’étape.