Wybierz szablon i wygląd
Podejrzyj szablony, a potem ustaw kolory, czcionki, opcje układu i logo strony.
Dla właścicieli i administratorów drużyn · 11 kroków
Czego potrzebujesz na start
- Twoja drużyna ma subskrypcję strony. W panelu darmowej drużyny zamiast Szablon jest Uzyskaj stronę.
- Jesteś właścicielem lub administratorem drużyny.
Kroki
Krok 1: Otwórz Szablon
W menu po lewej naciśnij Szablon.
Zobaczysz: stronę Szablon z kartą każdego szablonu. Szablon, którego używa twoja strona, jest oznaczony jako W użyciu. Jeśli twoja strona nie ma jeszcze szablonu, na każdej karcie jest zamiast tego Wybierz — naciśnięcie wybiera ten szablon z jego pierwszą paletą i otwiera Wygląd.
Krok 2: Podejrzyj szablon
Na karcie szablonu naciśnij Podgląd.
Zobaczysz: swoją stronę w tym szablonie, pod paskiem z napisem Podgląd. Mogą go otworzyć tylko administratorzy twojej drużyny. Gdy skończysz, naciśnij Wróć do panelu.
Krok 3: Otwórz Wygląd
Na stronie Szablon naciśnij Wygląd w prawym górnym rogu.
Zobaczysz: stronę Wygląd — formularz z jednej strony, a obok podgląd twojej strony na żywo (na wąskim ekranie pod formularzem).
Krok 4: Wybierz paletę
W sekcji Paleta wybierz jeden z presetów szablonu.
Zobaczysz: zaznaczony preset i podgląd strony w jego kolorach. Preset ustawia naraz pięć kolorów i obie czcionki.
Krok 5: Zmień kolor
W sekcji Kolory wpisz kod koloru, np.
#7dd3fc, w polu Główna, Akcent, Wyróżnienie, Tło lub Tekst — albo naciśnij kwadrat obok, żeby wybrać kolor.Zobaczysz: zmianę w podglądzie strony i zaznaczoną opcję Własna w sekcji Paleta. Przy każdym kolorze widać domyślną wartość szablonu; Resetuj przywraca ten jeden kolor.
Krok 6: Nadaj tekstowi i powierzchniom własne kolory
W sekcji Tekst i powierzchnie naciśnij Wybierz kolor obok Nagłówki, Podpisy, Karty, Linie, Linki i etykiety, Przycisk lub Tekst przycisku, a potem wpisz kod koloru lub naciśnij kwadrat obok. Każdy z nich zaczyna od Auto, czyli dopasowuje się do twoich pięciu kolorów tak jak szablon; Użyj Auto to przywraca.
Zobaczysz: zmianę w podglądzie strony, a pod każdym kolorem tekstu liczbę w rodzaju 7.2:1 · łatwy do odczytania — czyli jak wyraźnie odcina się od tła i kart. Poniżej 4.5:1 (3:1 dla nagłówków) pojawia się napis trudny do odczytania, kolor, który zamiast tego zobaczą odwiedzający, i przycisk Popraw czytelność, który wpisuje ten kolor w pole.
Krok 7: Wybierz czcionki
W sekcji Typografia otwórz Czcionka nagłówków lub Czcionka tekstu i wybierz czcionkę. Każda czcionka jest pokazana swoim krojem i należy do grupy — Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace — a żeby ją znaleźć, możesz wpisać nazwę.
Zobaczysz: podgląd strony w tej czcionce. Zmiana czcionki też ustawia paletę na Własna.
Krok 8: Dodaj logo
W sekcji Logo naciśnij Wybierz obraz obok Logotyp, Kwadratowe logo lub Favicon (gdy obraz jest już ustawiony, przycisk ma napis Zastąp). W oknie Wstaw obraz wybierz obraz lub prześlij nowy — JPEG, PNG, WebP lub AVIF, do 5 MB — i naciśnij Wstaw. Logo nie potrzebuje tekstu alternatywnego.
- Kwadratowe logo jest widoczne w nawigacji strony, na górze strony głównej i w składzie.
- Logotyp jest opcjonalny: to nazwa drużyny jako obraz, w dowolnym kształcie. Gdy go ustawisz, zastępuje kwadratowe logo i nazwę w nawigacji oraz na górze strony głównej.
- Favicon to mała ikona na karcie przeglądarki.
Twoje loga nigdy nie są przycinane ani zmieniane. Każdy obraz jest pokazywany w całości, a przezroczyste tło zostaje przezroczyste. Dlatego kwadratowe logo i favicon muszą być kwadratowe i mieć co najmniej 256 × 256 pikseli — obraz o innym kształcie zostanie odrzucony przy zapisie, z komunikatem podającym jego rozmiar. Logo wybrane przed wprowadzeniem tej zasady będzie widoczne, dopóki go nie zmienisz.
Zobaczysz: nazwę obrazu obok pola. Preset nigdy ich nie zmienia.
Krok 9: Ustaw opcje szablonu
Niżej, w sekcji Opcje Broadcast, wybierz Hero layout (Image behind the text lub Image beside the text) i Card edges (Cut corners lub Square corners). Inne szablony mają tu własne opcje: Motion w Neon Grid to Full motion lub Calm (wszystko nieruchome), a Hero glow to Bright (góra strony głównej przechodzi od koloru tła do akcentu) lub Ciemny (do ciemnej szarości zmieszanej z koloru głównego i akcentu, dla ciemniejszego wyglądu); Hero layout w Crosshair to Split (tekst po lewej, obraz po prawej z najbliższym meczem na nim) lub Full-width image; Hero alignment w Faceoff to Centered lub Left, a Home roster to Scattered (karty graczy wokół dużego napisu „Meet the squad”) lub Grid; Hero layout w Clutch to Bento (sekcja hero obok panelu Latest news) lub Full width, a Corners to Rounded lub Square; Tło w Varsity to Pinstripe (delikatne ukośne paski za każdą podstroną) lub Zwykły, a Hero size to Full (wysokie zdjęcie z menu na nim) lub Banner (niższe); Photo tint w Redline to Duotone (zdjęcia zabarwione kolorem głównym) lub Natural (ich własne kolory), a Panels to Offset (ciemne bloki za zdjęciami i sekcjami) lub Flat.
Zobaczysz: zmianę układu w podglądzie strony.
Krok 10: Zapisz
Naciśnij Zapisz na dole formularza.
Zobaczysz: „Zapisano wygląd”. Odwiedzający jeszcze tego nie widzą — zapisane zmiany zostają w wersji roboczej, dopóki nie opublikujesz strony.
Krok 11: Opublikuj stronę
Naciśnij Publikuj w menu po lewej i opublikuj stronę — zobacz Opublikuj stronę.
Zobaczysz: Wygląd na liście zmian przed publikacją, a po niej stronę w nowym wyglądzie.
Jak sprawdzić, że się udało
- Strona Szablon oznacza twój szablon jako W użyciu.
- Po publikacji strona pokazuje twoje kolory, czcionki i logo — w całości, bez przycinania.
- Przy każdym kolorze tekstu jest napis łatwy do odczytania albo akceptujesz czytelny odcień, który zamiast niego widzą odwiedzający.
Coś wygląda nie tak?
Kolory są zmienione, ale strona wygląda tak samo
Zapisane zmiany zostają w wersji roboczej. Naciśnij Publikuj w menu i opublikuj stronę (krok 11).
Przy kolorze jest napis „trudny do odczytania”
Tekst w tym kolorze za słabo odcina się od tła lub kart, żeby każdy mógł go przeczytać — zwykły tekst potrzebuje 4.5:1, a nagłówki 3:1. Odwiedzający nigdy nie widzą trudnego do odczytania koloru: strona pokazuje zamiast niego najbliższy czytelny odcień, a formularz go podaje. Naciśnij Popraw czytelność, żeby użyć tego odcienia, albo wybieraj własny, aż pojawi się napis łatwy do odczytania. Kolor ustawiony na Auto jest poprawiany tak samo, bez pytania. Przy publikacji też zobaczysz ostrzeżenie, ale nigdy nie blokuje ono publikacji.
Strona jest trudna do czytania, bo wszędzie ma jeden kolor
Nadaj każdemu rodzajowi tekstu własny kolor w sekcji Tekst i powierzchnie (krok 6): na przykład czerwone Nagłówki, jasnoszary Tekst akapitów i nieco jaśniejszy kolor Karty, żeby panele odcinały się od tła. Żeby nadać inne kolory całym częściom podstrony — jasny sklep na ciemnej stronie, pas w kolorze akcentu — zobacz Nadaj częściom strony własne kolory.
Czy zmiana szablonu usunie moje treści?
Nie. Treści należą do strony, a nie do szablonu: kolory i czcionki przechodzą tam, gdzie nowy szablon ich używa, jego własne opcje wracają do domyślnych, a sekcja, której nie potrafi pokazać, zostaje ukryta, nie usunięta. Okno, które otwiera się przed zmianą, wymienia wszystkie trzy rzeczy i możesz zmianę anulować. Jeśli twoja strona wciąż ma domyślne kolory i czcionki platformy — nie wybrano żadnej palety ani nie zmieniono żadnego koloru — używana jest pierwsza paleta nowego szablonu, więc strona wygląda jak na obrazku szablonu; okno informuje o tym w sekcji Kolory i czcionki. Jest siedem szablonów: Broadcast w stylu dnia meczowego; Neon Grid, czarny i neonowy, z animowaną siatką i świecącym gradientem za sekcją hero, logo unoszącym się nad nią, licznikami i ścianą filmów; Crosshair, czarny i techniczny, z panelami w ramkach, etykietami w nawiasach, dużym logotypem w stopce i zdjęciami na pierwszym planie; Faceoff, granatowo-czarny z lodowym cyjanem, w którym twoje logo stoi naprzeciw logo przeciwnika na każdej karcie meczu, z dużą sekcją hero i składem rozrzuconym wokół wielkiego nagłówka; Clutch, jasny, z białymi zaokrąglonymi kartami, szerokimi nagłówkami wielkimi literami i jednym jaskrawym kolorem, z najbliższym meczem w sekcji hero, a na szerokim ekranie na górze każdej podstrony; Varsity w stylu kampusu, z granatowymi pasami, jednym złotym kolorem, najlepszymi miejscami w turniejach nad składem i meczami w tabeli terminarza; oraz Redline, jedna czerwień na prawie czarnym tle, ze zdjęciami zabarwionymi kolorem głównym (domyślnie czerwonym), kwadratowymi przyciskami i meczami w wierszach ze zdjęciami i oboma logo po bokach napisu VS. Nagłówki w Clutch mają czcionkę Archivo Expanded, którą możesz wybrać w każdym szablonie w grupie Heavy display. Na komputerze lub tablecie przycisk Join our Discord na górze każdej podstrony w Faceoff pojawia się tylko wtedy, gdy dodasz link do Discorda w Sociale (Dodaj sociale). Każdy szablon pokazuje transmisję na żywo tak samo: odliczanie w dniu transmisji, odtwarzacz Twitcha na górze strony głównej, gdy nadajesz, i pasek Live na każdej innej podstronie (Zaplanuj transmisję).
Pojawia się komunikat „Ta strona zmieniła się od czasu jej otwarcia”
Inny administrator zapisał zmiany pierwszy, a twoje zmiany nie zostały zapisane. Naciśnij Załaduj ponownie, a potem wprowadź zmianę jeszcze raz.
Pojawia się komunikat „To logo ma … Prześlij kwadratowy obraz”
Kwadratowe logo i favicon muszą być kwadratowe — mieć taką samą szerokość i wysokość — i mieć co najmniej 256 × 256 pikseli, bo nigdy ich nie przycinamy. Komunikat podaje rozmiar twojego obrazu. Przygotuj wersję kwadratową (dodaj pustą, przezroczystą przestrzeń wokół szerokiego logo), prześlij ją i zapisz ponownie. Logo, które nie jest kwadratowe, wstaw w pole Logotyp.
Pojawia się komunikat „Rozmiar tego logo nie jest zapisany”
Nie znamy rozmiaru tego obrazu, więc nie możemy sprawdzić, czy jest kwadratowy. Prześlij go ponownie, wybierz nową kopię i zapisz.
Pola i przycisk Zapisz są wyszarzone
Subskrypcja twojej drużyny wygasła, więc podstrony strony są tylko do odczytu, dopóki znów nie będzie aktywna. Odnów ją — zobacz Zarządzaj płatnościami.
Powiązane artykuły
Nadal masz problem? Skontaktuj się z pomocą lub napisz na support@spawnfront.com — podaj stronę, na której jesteś, i numer kroku.