Valitse sivupohja ja ulkoasu
Esikatsele sivupohjia ja määritä sivustosi värit, fontit, asettelu ja logo.
Tiimien omistajille ja ylläpitäjille · 11 vaihetta
Mitä tarvitset ensin
- Tiimilläsi on sivustotilaus. Ilmaisen tiimin ylläpidossa näkyy Sivupohja-kohdan sijaan Hanki sivusto.
- Olet tiimin omistaja tai ylläpitäjä.
Vaiheet
Vaihe 1: Avaa Sivupohja
Paina vasemman reunan valikosta Sivupohja.
Näet: sivun, jonka otsikko on Sivupohja, ja jokaisesta sivupohjasta oman kortin. Sivustosi käyttämässä sivupohjassa on merkintä Käytössä. Jos sivustollasi ei ole vielä sivupohjaa, jokaisessa kortissa näkyy sen sijaan Valitse — sitä painamalla valitset sivupohjan sen ensimmäisellä paletilla, ja Ulkoasu avautuu.
Vaihe 2: Esikatsele sivupohjaa
Paina sivupohjan kortissa Esikatselu.
Näet: oman sivustosi siinä sivupohjassa, palkin alla, jossa lukee Esikatselu. Vain tiimisi ylläpitäjät voivat avata sen. Paina Takaisin ylläpitoon, kun olet valmis.
Vaihe 3: Avaa Ulkoasu
Palaa Sivupohja-sivulle ja paina oikeasta yläkulmasta Ulkoasu.
Näet: sivun, jonka otsikko on Ulkoasu — toisella puolella lomake ja sen vieressä elävä kuva sivustostasi (kapealla näytöllä lomakkeen alla).
Vaihe 4: Valitse paletti
Valitse Paletti-kohdasta yksi sivupohjan esiasetuksista.
Näet: esiasetus on korostettu, ja sivustosi kuva näkyy sen väreissä. Esiasetus asettaa kerralla viisi väriä ja molemmat fontit.
Vaihe 5: Vaihda väri
Kirjoita Värit-kohdassa värikoodi, kuten
#7dd3fc, kenttään Pääosoite, Korostus, Huomioväri, Tausta tai Teksti — tai valitse väri painamalla kentän vieressä olevaa neliötä.Näet: sivustosi kuva muuttuu, ja Paletti-kohdassa Mukautettu on korostettu. Jokaisessa värissä näkyy sivupohjan oletusväri; Palauta palauttaa sen.
Vaihe 6: Anna tekstille ja pinnoille omat värit
Paina Teksti ja pinnat -kohdassa Valitse väri kohdan Otsikot, Kuvatekstit, Kortit, Viivat, Linkit ja nimiöt, Painike tai Painikkeen teksti vieressä. Kirjoita sitten värikoodi tai paina vieressä olevaa neliötä. Jokainen alkaa asetuksella Automaattinen, joka seuraa viittä väriäsi samoin kuin sivupohjasi; Käytä automaattista palauttaa sen.
Näet: sivustosi kuva muuttuu, ja jokaisen tekstiä sisältävän värin alla näkyy luku, kuten 7,2:1 · helppo lukea — kuinka selvästi väri erottuu taustastasi ja korteistasi. Alle 4,5:1 (otsikoilla 3:1) siinä lukee vaikea lukea. Silloin näet värin, jonka vierailijat näkevät sen sijaan, ja painikkeen Tee luettavaksi, joka laittaa tuon värin kenttään.
Vaihe 7: Valitse fontit
Avaa Typografia-kohdassa Otsikkofontti tai Leipätekstin fontti ja valitse fontti. Jokainen fontti näytetään omalla kirjasintyylillään ja ryhmiteltynä — Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace — ja voit etsiä fonttia kirjoittamalla sen nimen.
Näet: sivustosi kuvan siinä fontissa. Fontin vaihtaminen muuttaa myös paletin tilaan Mukautettu.
Vaihe 8: Lisää logosi
Paina Logo-kohdassa Valitse kuva kohdan Tekstilogo, Neliölogo tai Favicon vieressä (kun kuva on asetettu, painikkeessa lukee Korvaa). Valitse Liitä kuva -ikkunassa kuva tai lataa uusi — JPEG, PNG, WebP tai AVIF, enintään 5 Mt — ja paina Liitä. Logo ei tarvitse vaihtoehtoista tekstiä.
- Neliölogo näkyy sivustosi navigaatiossa, Etusivun yläosassa ja kokoonpanossasi.
- Tekstilogo on valinnainen: tiimisi nimi kuvana, minkä muotoisena tahansa. Kun asetat sen, se korvaa neliölogon ja nimen navigaatiossa ja Etusivun yläosassa.
- Favicon on pieni kuvake selaimen välilehdessä.
Logojasi ei koskaan rajata eikä muuteta. Jokainen kuva näytetään kokonaan, ja läpinäkyvä tausta pysyy läpinäkyvänä. Siksi neliölogon ja faviconin on oltava neliön muotoisia, vähintään 256 × 256 pikseliä — muun muotoinen kuva hylätään tallennettaessa, ja viesti kertoo sen koon. Ennen tätä sääntöä valitsemasi logo näkyy edelleen, kunnes vaihdat sen.
Näet: kuvan nimen kohdan vieressä. Esiasetus ei koskaan muuta näitä.
Vaihe 9: Määritä sivupohjan asetukset
Valitse alempana Broadcast options -kohdassa Hero layout (Image behind the text tai Image beside the text) ja Card edges (Cut corners tai Square corners). Muilla sivupohjilla on tässä omat asetuksensa: Neon Gridin Motion on Full motion tai Calm (kaikki paikallaan), ja sen Hero glow on Bright (etusivusi yläosa liukuu taustaväristäsi korostusväriisi) tai Tumma (tummanharmaaseen, joka on sekoitettu pääväristäsi ja korostusväristäsi, tummempaa ilmettä varten); Crosshairin Hero layout on Split (tekstisi vasemmalla, kuvasi oikealla ja seuraava ottelusi sen päällä) tai Full-width image; Faceoffin Hero alignment on Centered tai Left, ja sen Home roster on Scattered (pelaajiesi kortit ison ”Meet the squad” -otsikon ympärillä) tai Grid; Clutchin Hero layout on Bento (hero-osiosi Latest news -paneelin vieressä) tai Full width, ja sen Corners on Rounded tai Square; Varsityn Tausta on Pinstripe (haalea vinoraita jokaisen sivun taustalla) tai Pelkkä, ja sen Hero size on Full (korkea kuva, jonka päällä on valikko) tai Banner (matalampi); Redlinen Photo tint on Duotone (kuvasi sävytettyinä päävärilläsi) tai Natural (kuvien omat värit), ja sen Panels on Offset (tummat lohkot kuviesi ja osioidesi takana) tai Flat.
Näet: sivustosi kuvan asettelu muuttuu.
Vaihe 10: Tallenna
Paina lomakkeen alareunasta Tallenna.
Näet: ”Ulkoasu tallennettu”. Vierailijat eivät näe muutosta vielä — tallennetut muutokset pysyvät luonnoksessasi, kunnes julkaiset.
Vaihe 11: Julkaise sivustosi
Paina vasemman reunan valikosta Julkaise ja julkaise — katso Julkaise sivustosi.
Näet: Ulkoasu näkyy muutosten listassa ennen julkaisua, ja sen jälkeen sivustosi näkyy uudessa ilmeessään.
Mistä tiedät, että se onnistui
- Sivupohja-sivulla sivupohjassasi on merkintä Käytössä.
- Julkaisun jälkeen sivustollasi näkyvät värisi, fonttisi ja logosi — kokonaisina, ei koskaan rajattuina.
- Jokaisessa tekstiä sisältävässä värissä lukee helppo lukea, tai olet hyväksynyt luettavan sävyn, jonka vierailijat näkevät sen sijaan.
Näyttääkö jokin väärältä?
Vaihdoin värejä, mutta sivustoni näyttää samalta
Tallentaminen pitää ne luonnoksessasi. Paina valikosta Julkaise ja julkaise (vaihe 11).
Värissä lukee ”vaikea lukea”
Tämän väriset sanat eivät erotu taustastasi tai korteistasi tarpeeksi, jotta kaikki voisivat lukea ne — tavallinen teksti vaatii 4,5:1 ja otsikot 3:1. Vierailijasi eivät koskaan näe vaikeasti luettavaa väriä: sivustosi näyttää sen sijaan lähimmän luettavan sävyn, ja lomake kertoo sen. Paina Tee luettavaksi, niin sävy otetaan käyttöön, tai valitse oma väri, kunnes siinä lukee helppo lukea. Asetukselle Automaattinen jätetty väri säädetään samalla tavalla kysymättä. Julkaisu näyttää myös varoituksen, mutta se ei koskaan estä julkaisemista.
Sivustoni on kauttaaltaan yhtä väriä ja vaikea lukea
Anna jokaiselle tekstityypille oma värinsä Teksti ja pinnat -kohdassa (vaihe 6): esimerkiksi punaiset Otsikot, vaaleanharmaa Teksti kappaleille ja hieman vaaleampi Kortit-väri, jotta paneelit erottuvat sivusta. Jos haluat värittää sivun kokonaisia osia eri tavalla — vaalea kauppa tumman sivuston alla tai korostusvärisi kaista — katso Anna sivustosi osille omat värit.
Poistaako sivupohjan vaihtaminen sisältöni?
Ei. Sisältösi kuuluu sivustollesi, ei sivupohjalle: värisi ja fonttisi siirtyvät mukana, missä uusi sivupohja käyttää niitä, sen omat asetukset palaavat oletuksiin, ja osio, jota se ei pysty näyttämään, piilotetaan eikä poisteta. Ennen vaihtoa avautuva ikkuna listaa kaikki kolme, ja voit perua vaihdon. Jos sivustollasi on yhä Spawnfrontin oletusvärit ja -fontit — et ole koskaan valinnut palettia tai vaihtanut väriä — käytetään sen sijaan uuden sivupohjan ensimmäistä palettia, jotta sivustosi näyttää sivupohjan kuvalta; ikkuna kertoo tämän kohdassa Värit ja fontit. Sivupohjia on seitsemän: Broadcast, ottelupäivän ilme; Neon Grid, musta neonilme, jossa hero-osion takana on animoitu ruudukko ja hehkuva liukuväri, logosi leijuu sen päällä, ja mukana on tilastolaskurit ja videoseinä; Crosshair, musta ja tekninen ilme, jossa on kehystetyt paneelit, hakasulkeissa olevat nimiöt, iso tekstilogo alatunnisteessa ja kuvat keskiössä; Faceoff, sinimusta ja jäänsyaani ilme, jossa logosi on vastakkain vastustajasi logon kanssa jokaisessa ottelukortissa, iso hero-osio ja joukkueesi ripoteltuna jättimäisen otsikon ympärille; Clutch, vaalea ilme, jossa on valkoiset pyöreäkulmaiset kortit, leveät isoin kirjaimin kirjoitetut otsikot ja yksi kirkas väri, seuraava ottelusi hero-osiossa ja leveällä näytöllä jokaisen sivun yläosassa; Varsity, kampusilme, jossa on tummansiniset kaistat, yksi kullanvärinen, parhaat turnaussijoituksesi kokoonpanosi yläpuolella ja ottelusi aikataulutaulukkona; ja Redline, yksi punainen lähes mustalla, kuvasi sävytettyinä päävärilläsi (oletuksena punainen), neliömäiset painikkeet ja ottelusi kuvariveinä, joissa molemmat logot ovat VS-merkinnän kummallakin puolella. Clutchin otsikot ovat fontilla Archivo Expanded, jonka voit valita missä tahansa sivupohjassa ryhmästä Heavy display. Tietokoneella tai tabletilla Faceoffin Join our Discord -painike jokaisen sivun yläosassa näkyy vain, kun olet lisännyt Discord-linkkisi kohtaan Somet (Lisää somesi). Jokainen sivupohja näyttää livestriimisi samalla tavalla: lähtölaskennan striimipäivänä, Twitchin soittimen etusivusi yläosassa lähetyksen aikana ja Live-palkin kaikilla muilla sivuilla (Ajasta striimi).
Siinä lukee ”Tämä sivusto on muuttunut sen jälkeen, kun avasit sen”
Toinen ylläpitäjä tallensi ensin, eikä mitään muutoksistasi tallennettu. Paina Lataa uudelleen ja tee muutoksesi uudelleen.
Siinä lukee ”Tämä logo on … Lataa neliön muotoinen kuva”
Neliölogon ja faviconin on oltava neliön muotoisia — yhtä leveitä kuin korkeita — ja vähintään 256 × 256 pikseliä, koska emme koskaan rajaa niitä. Viesti kertoo kuvasi koon. Tee neliön muotoinen versio (lisää leveän logon ympärille tyhjää, läpinäkyvää tilaa), lataa se ja tallenna uudelleen. Logo, joka ei ole neliö, kuuluu kohtaan Tekstilogo.
Siinä lukee ”Tämän logon kokoa ei ole tallessa”
Emme tiedä kuvan kokoa, joten emme voi tarkistaa, onko se neliö. Lataa kuva uudelleen, valitse uusi kopio ja tallenna.
Kentät ja Tallenna ovat harmaina
Tiimisi tilaus on päättynyt, joten sen sivuston sivut ovat vain luku -tilassa, kunnes tilaus on taas voimassa. Uusi tilaus — katso Hallitse laskutusta.
Aiheeseen liittyvät artikkelit
Vieläkin jumissa? Ota yhteyttä tukeen tai lähetä sähköpostia osoitteeseen support@spawnfront.com — kerro sivu, jolla olet, ja vaiheen numero.