เลือกเทมเพลตและหน้าตาเว็บไซต์
ดูตัวอย่างเทมเพลต แล้วตั้งสี ฟอนต์ ตัวเลือกเลย์เอาต์ และโลโก้ของเว็บไซต์
สำหรับเจ้าของทีมและแอดมิน · 11 ขั้นตอน
สิ่งที่ต้องมีก่อน
- ทีมของคุณมีการสมัครสมาชิกเว็บไซต์ ส่วนแอดมินของทีมฟรีจะแสดง รับเว็บไซต์ แทน เทมเพลต
- คุณเป็นเจ้าของหรือแอดมินของทีม
ขั้นตอน
ขั้นตอนที่ 1: เปิดเทมเพลต
ในเมนูด้านซ้าย กด เทมเพลต
สิ่งที่ควรเห็น: หน้าชื่อ เทมเพลต ที่มีการ์ดของแต่ละเทมเพลต เทมเพลตที่เว็บไซต์ของคุณใช้อยู่จะมีป้าย กำลังใช้ ถ้าเว็บไซต์ยังไม่มีเทมเพลต การ์ดแต่ละใบจะแสดง เลือก แทน — กดแล้วจะเลือกเทมเพลตนั้นพร้อมพาเลตต์แรก และเปิดหน้ารูปลักษณ์
ขั้นตอนที่ 2: ดูตัวอย่างเทมเพลต
บนการ์ดของเทมเพลต กด ดูตัวอย่าง
สิ่งที่ควรเห็น: เว็บไซต์ของคุณเองในเทมเพลตนั้น ใต้แถบที่เขียนว่า ดูตัวอย่าง มีแค่แอดมินของทีมเท่านั้นที่เปิดได้ กด กลับไปหน้าแอดมิน เมื่อดูเสร็จ
ขั้นตอนที่ 3: เปิดรูปลักษณ์
กลับมาที่หน้าเทมเพลต กด รูปลักษณ์ ที่มุมขวาบน
สิ่งที่ควรเห็น: หน้าชื่อ รูปลักษณ์ — ฟอร์มอยู่ด้านหนึ่ง และภาพสดของเว็บไซต์อยู่ข้างๆ (อยู่ด้านล่างบนหน้าจอแคบ)
ขั้นตอนที่ 4: เลือกพาเลตต์
ใต้ พาเลตต์ เลือกพรีเซ็ตหนึ่งของเทมเพลต
สิ่งที่ควรเห็น: พรีเซ็ตที่เลือกมีกรอบ และภาพเว็บไซต์ของคุณเปลี่ยนเป็นสีของพรีเซ็ตนั้น พรีเซ็ตจะตั้งค่าทั้งห้าสีและฟอนต์ทั้งสองแบบในครั้งเดียว
ขั้นตอนที่ 5: เปลี่ยนสี
ใต้ สี พิมพ์รหัสสี เช่น
#7dd3fcลงใน หลัก, สีเน้น, สีไฮไลต์, พื้นหลัง หรือ ข้อความ — หรือกดสี่เหลี่ยมข้างช่องเพื่อเลือกสีสิ่งที่ควรเห็น: ภาพเว็บไซต์เปลี่ยนไป และ กำหนดเอง มีกรอบอยู่ใต้พาเลตต์ แต่ละสีจะแสดงค่าเริ่มต้นของเทมเพลต และ รีเซ็ต จะคืนค่าสีนั้น
ขั้นตอนที่ 6: ตั้งสีให้ข้อความและพื้นผิวแยกกัน
ใต้ ข้อความและพื้นผิว กด เลือกสี ข้าง หัวข้อ, คำบรรยาย, การ์ด, เส้น, ลิงก์และป้ายกำกับ, ปุ่ม หรือ ข้อความบนปุ่ม แล้วพิมพ์รหัสสีหรือกดสี่เหลี่ยมข้างช่อง แต่ละสีเริ่มต้นที่ อัตโนมัติ ซึ่งจะตามห้าสีของคุณแบบเดียวกับที่เทมเพลตทำ และ ใช้อัตโนมัติ จะคืนค่ากลับ
สิ่งที่ควรเห็น: ภาพเว็บไซต์เปลี่ยนไป และใต้สีที่ใช้กับตัวอักษรแต่ละสีจะมีตัวเลข เช่น 7.2:1 · อ่านง่าย — บอกว่าสีนั้นเด่นจากพื้นหลังและการ์ดแค่ไหน ถ้าต่ำกว่า 4.5:1 (หัวข้อ 3:1) จะขึ้นว่าอ่านยาก พร้อมแสดงสีที่ผู้เยี่ยมชมจะเห็นแทน และมี ปรับให้อ่านง่าย ซึ่งจะใส่สีนั้นลงในช่อง
ขั้นตอนที่ 7: เลือกฟอนต์
ใต้ การจัดตัวอักษร เปิด ฟอนต์หัวข้อ หรือ ฟอนต์เนื้อหา แล้วเลือกฟอนต์ แต่ละฟอนต์แสดงด้วยหน้าตาของตัวเอง และจัดอยู่ในกลุ่ม — Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace — และพิมพ์ชื่อเพื่อค้นหาได้
สิ่งที่ควรเห็น: ภาพเว็บไซต์เปลี่ยนเป็นฟอนต์นั้น การเปลี่ยนฟอนต์จะทำให้พาเลตต์เป็น กำหนดเอง ด้วย
ขั้นตอนที่ 8: เพิ่มโลโก้
ใต้ โลโก้ กด เลือกรูปภาพ ข้าง โลโก้ตัวอักษร, โลโก้สี่เหลี่ยมจัตุรัส หรือ Favicon (ปุ่มจะเปลี่ยนเป็น แทนที่ เมื่อตั้งไว้แล้ว) ในกล่อง แทรกรูปภาพ เลือกรูปหรืออัปโหลด — JPEG, PNG, WebP หรือ AVIF ขนาดไม่เกิน 5 MB — แล้วกด แทรก โลโก้ไม่ต้องมีข้อความ alt
- โลโก้สี่เหลี่ยมจัตุรัส แสดงในแถบนำทางของเว็บไซต์ ด้านบนของหน้าแรก และในรายชื่อผู้เล่น
- โลโก้ตัวอักษร จะใส่หรือไม่ก็ได้: ชื่อทีมของคุณในรูปแบบรูปภาพ รูปทรงใดก็ได้ ถ้าตั้งไว้ จะแทนที่โลโก้สี่เหลี่ยมจัตุรัสและชื่อทีมในแถบนำทางและด้านบนของหน้าแรก
- Favicon คือไอคอนเล็กๆ บนแท็บเบราว์เซอร์
โลโก้ของคุณจะไม่ถูกครอบตัดหรือแก้ไข ทุกรูปแสดงเต็มรูป และพื้นหลังโปร่งใสก็ยังโปร่งใสเหมือนเดิม นี่คือเหตุผลที่ โลโก้สี่เหลี่ยมจัตุรัสและ Favicon ต้องเป็นสี่เหลี่ยมจัตุรัส ขนาดอย่างน้อย 256 × 256 พิกเซล — รูปทรงอื่นจะถูกปฏิเสธตอนบันทึก พร้อมข้อความบอกขนาดของรูป โลโก้ที่คุณเลือกไว้ก่อนมีกฎนี้จะยังแสดงอยู่จนกว่าคุณจะเปลี่ยน
สิ่งที่ควรเห็น: ชื่อไฟล์รูปอยู่ข้างช่อง พรีเซ็ตจะไม่เปลี่ยนสิ่งเหล่านี้
ขั้นตอนที่ 9: ตั้งค่าตัวเลือกของเทมเพลต
ถัดลงไป ใต้ ตัวเลือก Broadcast เลือก Hero layout (Image behind the text หรือ Image beside the text) และ Card edges (Cut corners หรือ Square corners) เทมเพลตอื่นจะแสดงตัวเลือกของตัวเองตรงนี้: Motion ของ Neon Grid คือ Full motion หรือ Calm (ทุกอย่างหยุดนิ่ง) และ Hero glow คือ Bright (ส่วนบนของหน้าแรกจะไล่จากสีพื้นหลังไปเป็นสีเน้น) หรือ มืด (ไล่ไปเป็นสีเทาเข้มที่ผสมจากสีหลักและสีเน้น ให้ดูมืดขึ้น); Hero layout ของ Crosshair คือ Split (ข้อความอยู่ซ้าย รูปอยู่ขวาโดยมีแมตช์ถัดไปทับอยู่) หรือ Full-width image; Hero alignment ของ Faceoff คือ Centered หรือ Left และ Home roster คือ Scattered (การ์ดผู้เล่นกระจายรอบคำว่า "Meet the squad" ตัวใหญ่) หรือ Grid; Hero layout ของ Clutch คือ Bento (ฮีโร่อยู่ข้างแผง Latest news) หรือ Full width และ Corners คือ Rounded หรือ Square; พื้นหลัง ของ Varsity คือ Pinstripe (ลายเส้นทแยงจางๆ ด้านหลังทุกหน้า) หรือ ธรรมดา และ Hero size คือ Full (รูปสูงที่มีเมนูทับอยู่) หรือ Banner (รูปที่เตี้ยกว่า); Photo tint ของ Redline คือ Duotone (รูปถูกย้อมด้วยสีหลัก) หรือ Natural (สีเดิมของรูป) และ Panels คือ Offset (บล็อกสีเข้มวางอยู่หลังรูปและส่วนต่างๆ) หรือ Flat
สิ่งที่ควรเห็น: ภาพเว็บไซต์เปลี่ยนเลย์เอาต์
ขั้นตอนที่ 10: บันทึก
กด บันทึก ที่ด้านล่างของฟอร์ม
สิ่งที่ควรเห็น: "บันทึกรูปลักษณ์แล้ว" ผู้เยี่ยมชมยังไม่เห็น — การเปลี่ยนแปลงที่บันทึกจะอยู่ในฉบับร่างจนกว่าคุณจะเผยแพร่
ขั้นตอนที่ 11: เผยแพร่เว็บไซต์
กด เผยแพร่ ในเมนูด้านซ้ายแล้วเผยแพร่ — ดู เผยแพร่เว็บไซต์ของคุณ
สิ่งที่ควรเห็น: รูปลักษณ์ อยู่ในรายการการเปลี่ยนแปลงก่อนเผยแพร่ และเว็บไซต์ของคุณเป็นหน้าตาใหม่หลังเผยแพร่
วิธีดูว่าสำเร็จแล้ว
- หน้าเทมเพลตแสดงว่าเทมเพลตของคุณกำลังใช้
- หลังเผยแพร่ เว็บไซต์แสดงสี ฟอนต์ และโลโก้ของคุณ — เต็มรูป ไม่ถูกครอบตัด
- ทุกสีที่ใช้กับตัวอักษรขึ้นว่าอ่านง่าย หรือคุณยอมรับเฉดที่อ่านง่ายซึ่งผู้เยี่ยมชมเห็นแทนแล้ว
มีอะไรดูไม่ถูกต้องไหม
เปลี่ยนสีแล้ว แต่เว็บไซต์ยังเหมือนเดิม
การบันทึกจะเก็บไว้ในฉบับร่าง กด เผยแพร่ ในเมนูแล้วเผยแพร่ (ขั้นตอนที่ 11)
สีขึ้นว่า “อ่านยาก”
ตัวอักษรสีนั้นเด่นจากพื้นหลังหรือการ์ดไม่พอให้ทุกคนอ่านได้ — ข้อความปกติต้องได้ 4.5:1 และหัวข้อ 3:1 ผู้เยี่ยมชมจะไม่เห็นสีที่อ่านยาก: เว็บไซต์จะแสดงเฉดที่อ่านง่ายที่ใกล้ที่สุดแทน และฟอร์มจะบอกเฉดนั้น กด ปรับให้อ่านง่าย เพื่อใช้เฉดนั้น หรือเลือกสีเองจนขึ้นว่าอ่านง่าย สีที่ตั้งเป็น อัตโนมัติ จะถูกปรับแบบเดียวกันโดยไม่ถาม หน้าเผยแพร่จะแสดงคำเตือนด้วย แต่ไม่ห้ามคุณเผยแพร่
เว็บไซต์อ่านยากเพราะใช้สีเดียวทุกที่
ตั้งสีให้ข้อความแต่ละแบบใต้ ข้อความและพื้นผิว (ขั้นตอนที่ 6): เช่น หัวข้อ สีแดง ข้อความ สีเทาอ่อนสำหรับย่อหน้า และสี การ์ด ที่อ่อนกว่าเล็กน้อยเพื่อให้แผงเด่นจากหน้า ถ้าอยากให้บางส่วนของหน้ามีสีต่างออกไป — ร้านค้าสีอ่อนในเว็บไซต์สีเข้ม หรือแถบสีเน้น — ดู ตั้งสีให้บางส่วนของเว็บไซต์แยกกัน
เปลี่ยนเทมเพลตแล้วเนื้อหาจะหายไหม?
ไม่หาย เนื้อหาเป็นของเว็บไซต์ ไม่ใช่ของเทมเพลต: สีและฟอนต์จะตามไปในส่วนที่เทมเพลตใหม่ใช้ ตัวเลือกของเทมเพลตจะกลับเป็นค่าเริ่มต้น และส่วนที่เทมเพลตแสดงไม่ได้จะถูกซ่อน ไม่ใช่ลบ กล่องที่เปิดขึ้นก่อนเปลี่ยนจะบอกทั้งสามข้อนี้ และคุณยกเลิกได้ ถ้าเว็บไซต์ยังใช้สีและฟอนต์เริ่มต้นของแพลตฟอร์ม — คุณไม่เคยเลือกพาเลตต์หรือเปลี่ยนสี — จะใช้พาเลตต์แรกของเทมเพลตใหม่แทน เว็บไซต์จึงดูเหมือนภาพของเทมเพลต กล่องจะบอกไว้ใต้ สีและฟอนต์ มีเทมเพลตทั้งหมดเจ็ดแบบ: Broadcast หน้าตาแบบวันแข่ง; Neon Grid โทนดำนีออน มีกริดเคลื่อนไหวและไล่สีเรืองแสงด้านหลังฮีโร่ โลโก้ลอยอยู่ด้านบน ตัวเลขสถิติ และวอลล์วิดีโอ; Crosshair โทนดำแนวเทคนิค มีแผงแบบมีกรอบ ป้ายในวงเล็บ โลโก้ตัวอักษรใหญ่ที่ฟุตเตอร์ และรูปภาพเด่นตรงกลาง; Faceoff โทนน้ำเงินดำกับฟ้าน้ำแข็ง โลโก้ของคุณหันหน้าเข้าหาโลโก้คู่แข่งบนการ์ดแมตช์ทุกใบ มีฮีโร่ใหญ่และทีมของคุณกระจายรอบหัวข้อขนาดยักษ์; Clutch โทนสว่าง การ์ดขาวมุมมน หัวข้อตัวพิมพ์ใหญ่แบบกว้าง และสีสดหนึ่งสี แมตช์ถัดไปอยู่ในฮีโร่ และบนจอกว้างจะอยู่ด้านบนของทุกหน้า; Varsity สไตล์มหาวิทยาลัย แถบสีกรมท่า สีทองหนึ่งสี ผลงานทัวร์นาเมนต์ที่ดีที่สุดอยู่เหนือรายชื่อผู้เล่น และแมตช์แสดงเป็นตารางแข่ง; และ Redline สีแดงหนึ่งสีบนพื้นเกือบดำ รูปถูกย้อมด้วยสีหลัก (ค่าเริ่มต้นคือแดง) ปุ่มเหลี่ยม และแมตช์แสดงเป็นแถวรูปภาพพร้อมโลโก้ทั้งสองทีมคั่นด้วย VS หัวข้อของ Clutch ใช้ฟอนต์ Archivo Expanded ซึ่งเลือกได้ในทุกเทมเพลตใต้ Heavy display บนคอมพิวเตอร์หรือแท็บเล็ต ปุ่ม Join our Discord ของ Faceoff ที่ด้านบนของทุกหน้าจะแสดงเฉพาะเมื่อคุณเพิ่มลิงก์ Discord ไว้ใต้ โซเชียล แล้ว (เพิ่มโซเชียลของคุณ) ทุกเทมเพลตแสดงไลฟ์สตรีมแบบเดียวกัน: นับถอยหลังในวันนั้น เพลเยอร์ Twitch ที่ด้านบนของหน้าแรกขณะคุณไลฟ์ และแถบ Live บนหน้าอื่นทุกหน้า (ตั้งเวลาสตรีม)
ขึ้นว่า “เว็บไซต์นี้มีการเปลี่ยนแปลงตั้งแต่คุณเปิด”
แอดมินคนอื่นบันทึกก่อน และสิ่งที่คุณแก้ยังไม่ถูกบันทึกเลย กด โหลดใหม่ แล้วแก้อีกครั้ง
ขึ้นว่า “โลโก้นี้มีขนาด … อัปโหลดรูปสี่เหลี่ยมจัตุรัส”
โลโก้สี่เหลี่ยมจัตุรัสและ Favicon ต้องเป็นสี่เหลี่ยมจัตุรัส — กว้างเท่ากับสูง — และอย่างน้อย 256 × 256 พิกเซล เพราะเราไม่ครอบตัดรูปเลย ข้อความจะบอกขนาดรูปของคุณ ทำเวอร์ชันสี่เหลี่ยมจัตุรัส (เพิ่มพื้นที่ว่างโปร่งใสรอบโลโก้ที่กว้าง) อัปโหลด แล้วบันทึกอีกครั้ง โลโก้ที่ไม่ใช่สี่เหลี่ยมจัตุรัสให้ใส่ใน โลโก้ตัวอักษร
ขึ้นว่า “ไม่มีข้อมูลขนาดของโลโก้นี้”
เราไม่รู้ขนาดของรูปนั้น จึงตรวจไม่ได้ว่าเป็นสี่เหลี่ยมจัตุรัสหรือไม่ อัปโหลดอีกครั้ง เลือกไฟล์ใหม่ แล้วบันทึก
ช่องต่างๆ และปุ่มบันทึกเป็นสีเทา
การสมัครสมาชิกของทีมหมดอายุ หน้าเว็บไซต์จึงอ่านได้อย่างเดียวจนกว่าจะกลับมาใช้งานได้ ต่ออายุได้ — ดู จัดการการชำระเงิน
บทความที่เกี่ยวข้อง
ยังติดปัญหาอยู่ไหม ติดต่อซัพพอร์ต หรืออีเมลถึง support@spawnfront.com — บอกเราว่าคุณอยู่หน้าไหนและขั้นตอนที่เท่าไร