Pilih template dan tampilannya
Pratinjau template, lalu atur warna, font, opsi tata letak, dan logo situsmu.
Untuk pemilik dan admin tim · 11 langkah
Yang kamu perlukan dulu
- Timmu punya langganan situs. Admin tim gratis menampilkan Dapatkan situs, bukan Template.
- Kamu adalah pemilik atau admin tim.
Langkah
Langkah 1: Buka Template
Di menu sebelah kiri, tekan Template.
Yang akan kamu lihat: halaman berjudul Template, dengan satu kartu untuk tiap template. Template yang dipakai situsmu ditandai Digunakan. Kalau situsmu belum punya template, tiap kartu menampilkan Pilih — menekannya akan memilih template itu dengan palet pertamanya, lalu membuka Tampilan.
Langkah 2: Pratinjau template
Di kartu template, tekan Pratinjau.
Yang akan kamu lihat: situsmu sendiri dengan template itu, di bawah bilah bertuliskan Pratinjau. Hanya admin timmu yang bisa membukanya. Tekan Kembali ke admin kalau sudah selesai.
Langkah 3: Buka Tampilan
Kembali di halaman Template, tekan Tampilan di kanan atas.
Yang akan kamu lihat: halaman berjudul Tampilan — formulir di satu sisi dan gambaran langsung situsmu di sebelahnya (di bawahnya pada layar sempit).
Langkah 4: Pilih palet
Di bagian Palet, pilih salah satu preset template.
Yang akan kamu lihat: preset itu diberi garis, dan gambaran situsmu dengan warnanya. Preset mengatur lima warna dan kedua font sekaligus.
Langkah 5: Ubah warna
Di bagian Warna, ketik kode warna seperti
#7dd3fcdi Utama, Aksen, Sorotan, Latar belakang atau Teks — atau tekan kotak di sebelahnya untuk memilih warna.Yang akan kamu lihat: gambaran situsmu berubah, dan Kustom diberi garis di bawah Palet. Tiap warna menampilkan bawaan template-nya; Reset mengembalikan warna itu.
Langkah 6: Beri teks dan permukaan warnanya sendiri
Di bagian Teks dan permukaan, tekan Pilih warna di samping Judul, Keterangan, Kartu, Garis, Tautan dan label, Tombol atau Teks tombol, lalu ketik kode warna atau tekan kotak di sebelahnya. Tiap warna awalnya Otomatis, yang mengikuti lima warnamu seperti cara template-mu; Pakai Otomatis mengembalikannya.
Yang akan kamu lihat: gambaran situsmu berubah, dan di bawah tiap warna yang memuat tulisan ada angka seperti 7.2:1 · mudah dibaca — seberapa jelas warna itu menonjol dari latar belakang dan kartumu. Di bawah 4.5:1 (3:1 untuk judul), tertulis sulit dibaca, warna yang akan dilihat pengunjung sebagai gantinya ditampilkan, dan tersedia Buat mudah dibaca, yang memasukkan warna itu ke kolom.
Langkah 7: Pilih font
Di bagian Tipografi, buka Font judul atau Font isi lalu pilih font. Tiap font ditampilkan dengan bentuknya sendiri dan dikelompokkan — Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace — dan kamu bisa mengetik nama untuk mencarinya.
Yang akan kamu lihat: gambaran situsmu dengan font itu. Mengganti font juga membuat palet jadi Kustom.
Langkah 8: Tambahkan logomu
Di bagian Logo, tekan Pilih gambar di samping Wordmark, Logo persegi atau Favicon (tulisannya jadi Ganti setelah ada gambar). Di kotak Sisipkan gambar, pilih gambar atau unggah gambar — JPEG, PNG, WebP atau AVIF, maksimal 5 MB — lalu tekan Sisipkan. Logo tidak perlu teks alt.
- Logo persegi ditampilkan di navigasi situsmu, di bagian atas Beranda, dan di roster-mu.
- Wordmark opsional: nama timmu dalam bentuk gambar, bentuk apa saja. Kalau kamu memasangnya, wordmark menggantikan logo persegi dan nama di navigasi serta di bagian atas Beranda.
- Favicon adalah ikon kecil di tab browser.
Logomu tidak pernah dipotong atau diubah. Setiap gambar ditampilkan utuh, dan latar transparan tetap transparan. Karena itu logo persegi dan favicon harus persegi, minimal 256 × 256 piksel — gambar dengan bentuk lain ditolak saat kamu menyimpan, dengan pesan yang menyebutkan ukurannya. Logo yang kamu pilih sebelum aturan ini tetap tampil sampai kamu menggantinya.
Yang akan kamu lihat: nama gambar di samping slotnya. Preset tidak pernah mengubah logo.
Langkah 9: Atur opsi template
Lebih ke bawah, di bagian Opsi Broadcast, pilih Hero layout (Image behind the text atau Image beside the text) dan Card edges (Cut corners atau Square corners). Template lain menampilkan opsinya sendiri di sini: di Neon Grid, Motion berisi Full motion atau Calm (semuanya diam), dan Hero glow berisi Bright (bagian atas berandamu memudar dari warna latar belakang ke warna aksenmu) atau Gelap (ke abu-abu gelap campuran warna utama dan aksenmu, untuk tampilan lebih gelap); di Crosshair, Hero layout berisi Split (tulisanmu di kiri, gambarmu di kanan dengan pertandingan berikutnya di atasnya) atau Full-width image; di Faceoff, Hero alignment berisi Centered atau Left, dan Home roster berisi Scattered (kartu pemainmu di sekitar tulisan besar "Meet the squad") atau Grid; di Clutch, Hero layout berisi Bento (hero-mu di samping panel Latest news) atau Full width, dan Corners berisi Rounded atau Square; di Varsity, Latar belakang berisi Pinstripe (garis diagonal tipis di belakang setiap halaman) atau Polos, dan Hero size berisi Full (foto tinggi dengan menu di atasnya) atau Banner (foto yang lebih pendek); di Redline, Photo tint berisi Duotone (fotomu diwarnai warna utamamu) atau Natural (warna aslinya), dan Panels berisi Offset (blok gelap di belakang foto dan bagianmu) atau Flat.
Yang akan kamu lihat: tata letak gambaran situsmu berubah.
Langkah 10: Simpan
Tekan Simpan di bagian bawah formulir.
Yang akan kamu lihat: "Tampilan disimpan". Pengunjung belum melihatnya — perubahan yang disimpan tetap ada di drafmu sampai kamu memublikasikannya.
Langkah 11: Publikasikan situsmu
Tekan Publikasikan di menu sebelah kiri lalu publikasikan — lihat Publikasikan situsmu.
Yang akan kamu lihat: Tampilan di daftar perubahan sebelum kamu memublikasikan, dan situsmu dengan tampilan barunya setelahnya.
Cara tahu bahwa ini berhasil
- Halaman Template menandai template-mu Digunakan.
- Setelah dipublikasikan, situsmu menampilkan warna, font, dan logomu — utuh, tidak pernah dipotong.
- Setiap warna yang memuat tulisan bertuliskan mudah dibaca, atau kamu sudah menerima warna mudah dibaca yang dilihat pengunjung sebagai gantinya.
Ada yang terlihat tidak beres?
Aku sudah mengganti warna, tapi situsku tetap sama
Menyimpan hanya menaruhnya di drafmu. Tekan Publikasikan di menu lalu publikasikan (langkah 11).
Warna bertuliskan "sulit dibaca"
Tulisan dengan warna itu kurang menonjol dari latar belakang atau kartumu, jadi tidak semua orang bisa membacanya — teks biasa butuh 4.5:1 dan judul 3:1. Pengunjungmu tidak pernah melihat warna yang sulit dibaca: situsmu menampilkan warna terdekat yang mudah dibaca sebagai gantinya, dan formulir menyebutkannya. Tekan Buat mudah dibaca untuk memakai warna itu, atau pilih warnamu sendiri sampai tertulis mudah dibaca. Warna yang dibiarkan Otomatis disesuaikan dengan cara yang sama tanpa bertanya. Saat publikasi juga muncul peringatan, tapi itu tidak pernah menghalangimu memublikasikan.
Situsku sulit dibaca karena satu warna dipakai di mana-mana
Beri tiap jenis teks warnanya sendiri di bagian Teks dan permukaan (langkah 6): misalnya Judul merah, Teks abu-abu muda untuk paragraf, dan warna Kartu yang sedikit lebih terang agar panel menonjol dari halaman. Untuk mewarnai bagian halaman secara berbeda — toko terang di situs gelap, pita dengan warna aksenmu — lihat Beri bagian situsmu warnanya sendiri.
Apakah mengganti template akan menghapus kontenku?
Tidak. Kontenmu milik situsmu, bukan milik template: warna dan fontmu ikut pindah di tempat template baru memakainya, opsi template itu kembali ke bawaannya, dan bagian yang tidak bisa ditampilkannya disembunyikan, bukan dihapus. Kotak yang terbuka sebelum penggantian mencantumkan ketiganya, dan kamu bisa membatalkannya. Kalau situsmu masih memakai warna dan font bawaan platform — kamu belum pernah memilih palet atau mengubah warna — palet pertama template baru yang dipakai, jadi situsmu terlihat seperti gambar template itu; kotak itu menyebutkannya di bawah Warna dan font. Ada tujuh template: Broadcast, tampilan hari pertandingan; Neon Grid, tampilan neon hitam dengan grid animasi dan gradien bercahaya di belakang hero, logomu melayang di atasnya, penghitung statistik, dan dinding video; Crosshair, tampilan hitam dan teknis dengan panel berbingkai, label kurung siku, wordmark besar di footer, dan foto yang ditonjolkan; Faceoff, tampilan biru kehitaman dan cyan es, dengan logomu berhadapan dengan logo lawan di setiap kartu pertandingan, hero besar, dan skuadmu tersebar di sekitar judul raksasa; Clutch, tampilan terang dengan kartu putih membulat, judul huruf kapital yang lebar, dan satu warna cerah, dengan pertandingan berikutnya di hero dan, di layar lebar, di bagian atas setiap halaman; Varsity, tampilan kampus dengan pita navy, satu warna emas, peringkat turnamen terbaikmu di atas roster, dan pertandinganmu sebagai tabel jadwal; dan Redline, satu warna merah di atas latar hampir hitam, dengan fotomu diwarnai warna utamamu (merah secara bawaan), tombol persegi, dan pertandinganmu sebagai baris foto dengan kedua logo berhadapan di VS. Judul Clutch memakai Archivo Expanded, yang bisa kamu pilih di template mana pun di grup Heavy display. Di komputer atau tablet, tombol Join our Discord milik Faceoff di bagian atas setiap halaman hanya muncul kalau kamu sudah menambahkan tautan Discord-mu di Sosial (Tambahkan sosialmu). Setiap template menampilkan siaran langsungmu dengan cara yang sama: hitung mundur di hari itu, pemutar Twitch di bagian atas berandamu saat kamu live, dan bilah Live di setiap halaman lain (Jadwalkan siaran).
Muncul tulisan "Situs ini berubah sejak kamu membukanya"
Admin lain menyimpan lebih dulu, dan tidak ada perubahanmu yang tersimpan. Tekan Muat ulang, lalu buat perubahanmu lagi.
Muncul tulisan "Logo ini … Unggah gambar persegi"
Logo persegi dan favicon harus persegi — lebar dan tingginya sama — dan minimal 256 × 256 piksel, karena kami tidak pernah memotongnya. Pesan itu menyebutkan ukuran gambarmu. Buat versi persegi (tambahkan ruang kosong transparan di sekitar logo yang lebar), unggah, lalu simpan lagi. Logo yang tidak persegi cocoknya dipasang di Wordmark.
Muncul tulisan "Logo ini tidak punya ukuran tercatat"
Kami tidak tahu ukuran gambar itu, jadi kami tidak bisa memeriksa apakah gambarnya persegi. Unggah lagi, pilih salinan barunya, lalu simpan.
Kolom dan tombol Simpan berwarna abu-abu
Langganan timmu sudah berakhir, jadi halaman situsnya hanya bisa dilihat sampai langganannya aktif lagi. Perpanjang langganannya — lihat Kelola tagihan.
Artikel terkait
Masih bingung? Hubungi dukungan atau email support@spawnfront.com — beri tahu kami halaman tempatmu berada dan nomor langkahnya.