ฉันจะจัดทำธีมสำหรับบัญชีผู้ใช้โดยใช้ Theme Editor ได้อย่างไร

ในฐานะผู้ดูแลระบบ คุณสามารถใช้ Theme Editor เพื่อจัดทำธีมกำหนดเองสำหรับสถาบันของคุณได้ ธีมจะถูกจัดทำขึ้นจากแม่แบบ Canvas ที่มีอยู่ ธีมใด ๆ ที่ปรับใช้กับบัญชีผู้ใช้จะมีผลกับบัญชีย่อยทั้งหมดด้วย แม้ว่า Theme Editor จะสามารถใช้เพื่อจัดทำธีมสำหรับบัญชีย่อยแต่ละบัญชีได้เช่นกัน เมื่อคุณจัดทำและบันทึกธีมแล้ว คุณสามารถใช้ธีมนั้นกับบัญชีของคุณได้ทุกเมื่อ นอกจากนี้คุณยังสามารถจัดทำธีมใหม่โดยอ้างอิงกับธีมก่อนหน้าได้ เรียนรู้วิธีการที่จัดการธีมที่บันทึกไว้

ดูวิดีโอเกี่ยวกับ Theme Editor

การรับช่วงธีม

การนำเสนอแบรนด์กำหนดเองจัดโฮสต์ไวัในระดับบัญชีผู้ใช้ ตามค่าเริ่มต้นบัญชีย่อยและบทเรียนที่เชื่อมโยงไว้จะรับช่วงการนำเสนอแบรนด์ของบัญชี อย่างไรก็ตาม คุณสามารถเปิดใช้งานบัญชีย่อยเพื่อใช้ Theme Editor โดยองค์ประกอบใด ๆ ที่ไม่ได้เปลี่ยนแปลงเป็นการเฉพาะจะยังคงรับช่วงมาจากระดับบัญชีผู้ใช้

การลงทะเบียนผู้ใช้จะเชื่อมโยงที่ระดับบัญชีผู้ใช้และการลงทะเบียนบทเรียนจะเชื่อมโยงในระดับบัญชีย่อย การลงทะเบียนจะถูกจัดทำขึ้นเมื่อผู้ใช้และบทเรียนถูกผนวกรวมกัน หากผู้ใช้ไม่ได้ลงทะเบียนในบทเรียนใด ๆ แผงข้อมูล (Dashboard) จะแสดงข้อมูลการนำเสนอแบรนด์สำหรับบัญชีผู้ใช้ดังกล่าว อัลกอริทึมนี้ยังเชื่อมโยงกับเพจที่ไม่ได้เชื่อมโยงไว้กับบทเรียน รวมถึงบัญชีผู้ใช้และค่าปรับตั้ง ปฏิทิน (Calendar) และการพูดคุย (Conversations) ข้อมูลผู้ใช้จะโฮสต์ที่ระดับบัญชีผู้ใช้เสมอ ซึ่งเป็นสาเหตุที่ทำให้ไม่สามารถรับช่วงข้อมูลการนำเสนอแบรนด์ของบัญชีย่อยได้

หากผู้ใช้ลงทะเบียนในบทเรียนในบัญชีผู้ใช้ แผงข้อมูล (Dashboard) จะแสดงข้อมูลการนำเสนอแบรนด์สำหรับบัญชีผู้ใช้ดังกล่าว หากผู้ใช้ลงทะเบียนในบทเรียนในบัญชีย่อย แผงข้อมูล (Dashboard) จะแสดงข้อมูลการนำเสนอแบรนด์สำหรับบัญชีย่อยดังกล่าว หากผู้ใช้ลงทะเบียนในบทเรียนในบัญชีย่อยหลายบัญชี หรือหากบทเรียนบางส่วนอยู่ในบัญชีผู้ใช้ แผงข้อมูล (Dashboard) จะแสดงข้อมูลการนำเสนอแบรนด์สำหรับบัญชีผู้ใช้ดังกล่าว

ส่วนประกอบ Theme Editor

ดูรายละเอียดเกี่ยวกับส่วนประกอบ Theme Editor รวมถึงส่วนประกอบที่แสดงบนแอพ Canvas ได้จากเอกสารข้อมูลส่วนประกอบ Theme Editor ของ Canvas ขอความช่วยเหลือเกี่ยวกับแม่แบบภาพได้จากเอกสารข้อมูลแม่แบบภาพ Canvas Theme Editor โลโก้ ภาพและลายน้ำจะไม่แสดงสำหรับผู้ใช้ที่เปิดใช้งานตัวเลือกคุณสมบัติ รูปแบบคอนทราสต์สูง (High Contrast Styles) ในค่าปรับตั้งสำหรับผู้ใช้

ไฟล์ CSS/JS

Cascading Style Sheet (CSS) หรือไฟล์ JavaScript (JS) กำหนดเองไม่ได้เป็นเงื่อนไขบังคับ แต่ยังรองรับไฟล์บอกล้างใน Theme Editor ฟังก์ชั่นไฟล์ CSS/JS ต้องเปิดใช้งานโดยผู้ดูแลความสำเร็จของลูกค้าของคุณ ก่อนอัพโหลดไฟล์ CSS หรือ JS กำหนดเอง โปรดระวังความเสี่ยงที่เกี่ยวข้อง เนื่องจากไฟล์กำหนดเองอาจทำให้เกิดปัญหาในการใช้งานหรือขัดแย้งกับข้อมูล Canvas ในอนาคต เรียนรู้เพิ่มเติมเกี่ยวกับข้อจำกัดสำหรับ CSS/JS แบบกำหนดเอง

 

หมายเหตุ:

  • Theme Editor ไม่พร้อมใช้งานสำหรับบัญชีฟรีสำหรับผู้สอน
  • หากคุณเป็นผู้ดูแลบัญชีย่อยและลิงค์ธีม (Themes) ไม่ปรากฏในส่วนการสืบค้นเนื้อหาทางบัญชี (Account Navigation) แสดงว่าไม่ได้เปิดใช้ธีมสำหรับบัญชีย่อยไว้ หากแท็บการอัพโหลด CSS/JS (CSS/JS Upload) ไม่แสดงผล แสดงว่าไม่ได้เปิดใช้งานการอัพโหลดไฟล์สำหรับบัญชีย่อย
  • แสดงตัวอย่างการนำเสนอแบรนด์ระบบแก้ไขธีม (Theme Editor) โดยคุณจะต้องปิด UI คอนทราสต์สูง (High Contrast UI) ไว้
  • ตามค่าเริ่มต้น บัญชีเชื่อมโยงระดับภาคีจะรับช่วงธีมที่ปรับใช้ในบัญชีต้นทาง อย่างไรก็ตาม บัญชีเชื่อมโยงที่เป็นภาคีสามารถจัดทำธีมใหม่สำหรับบัญชีเชื่อมโยงได้

เปิดบัญชี

เปิดบัญชี

จากส่วนการสืบค้นเนื้อหาส่วนกลางให้คลิกที่ลิงค์ ผู้ดูแลระบบ (Admin) [1] จากนั้นคลิกที่ชื่อบัญชี [2]

เปิดธีม

เปิด Theme Editor

จากส่วนการสืบค้นเนื้อหาทางบัญชี (Account Navigation) คลิกที่ลิงค์ ธีม (Themes)

หมายเหตุ: หากเปิดใช้ธีมบัญชีย่อยไว้ บัญชีย่อยแต่ละบัญชีจะมีลิงค์ ธีม (Themes) อยู่ด้วย เปิด Theme Editor สำหรับบัญชีย่อยโดยคลิกที่ลิงค์ บัญชีย่อย (Sub-Accounts) เพื่อระบุและเปิดบัญชีย่อย แล้วคลิกที่ลิงค์ ธีม (Themes) ของบัญชีย่อย

เปิดแม่แบบธีม

หากคุณยังไม่มีธีม Canvas สำหรับบัญชีของคุณ ให้ใช้แม่แบบเพื่อจัดทำธีมใหม่ คุณสามารถเลือกจากแม่แบบ Canvas เริ่มต้น (Default Canvas template) แม่แบบแบบมินิมัลและแม่แบบ State U หากผู้ดูแลความสำเร็จของลูกค้าของคุณเปิดใช้งานตัวเลือกคุณสมบัติเฉพาะสำหรับ K12 ธีม K12 จะปรากฏขึ้นเป็นแม่แบบด้วย

จัดทำธีมใหม่โดยเลื่อนเมาส์ไปที่แม่แบบแล้วคลิก เปิดใน Theme Editor (Open in Theme Editor) [1] หรือคลิก เพิ่มธีม (Add Theme) [2] แล้วเลือกแม่แบบจากรายการ

เปิดธีมที่บันทึกไว้

เปิดธีมที่บันทึกไว้

หากคุณจัดทำและบันทึกธีมแล้ว คุณสามารถแก้ไขธีมที่บันทึกไว้ได้ทุกเมื่อ ธีมที่บันทึกไว้จะแสดงในกลุ่มย่อยธีมของฉัน เปิดธีมที่บันทึกไว้โดยเลื่อนเมาส์ไปที่ชื่อของธีมและคลิกที่ปุ่ม เปิดใน Theme Editor (Open in Theme Editor) [1]

จัดทำธีมใหม่ตามธีมที่บันทึกไว้โดยคลิกที่ปุ่ม เพิ่มธีม (Add Theme) [2] แล้วเลือกชื่อของธีมที่บันทึกไว้จากรายการ [3] ตัวเลือกนี้ช่วยคุณในการป้องกันการเขียนทับธีมที่บันทึกไว้ก่อนหน้านี้

ดู Theme Editor

Theme Editor จะแสดงเพจตัวอย่างเพื่อแสดงตัวอย่างข้อมูลการนำเสนอแบรนด์ที่คุณกำหนดเอง ส่วนประกอบเหล่านี้จะเปลี่ยนไปตามสีและข้อมูลการนำเสนอแบรนด์ที่คุณเพิ่มโดยใช้ Theme Editor

ดูแท็บการอัพโหลด CSS/JS

ดูแท็บการอัพโหลด CSS/JS

หากมีการเปิดใช้งานไฟล์บอกล้าง Cascading Style Sheets (CSS) หรือ JavaScript (JS) สำหรับบัญชีของคุณ แถบรายการด้านข้าง Theme Editor จะแสดงแท็บ แก้ไข (Edit) [1] และ อัพโหลด (Upload) ขึ้น [2] Theme Editor มีค่าเริ่มต้นเป็นแท็บแก้ไข (Edit) และจะแสดงส่วนประกอบของ Theme Editor ทั้งหมด แท็บอัพโหลด (Upload) ช่วยให้คุณสามารถอัพโหลดไฟล์กำหนดเองได้

ค้นหาส่วนประกอบ

ค้นหาส่วนประกอบ

Theme Editor มีกลุ่มส่วนประกอบ 4 กลุ่มได้แก่ ข้อมูลการนำเสนอแบรนด์ระดับสากล (Global Branding) การสืบค้นเนื้อหาส่วนกลาง (Global Navigation) ลายน้ำ และภาพอื่น ๆ (Watermarks & Other Images) และหน้าจอล็อกอิน (Login Screen) ตามค่าเริ่มต้น แถบรายการด้านข้าง Theme Editor จะแสดงกลุ่มข้อมูลการนำเสนอแบรนด์ระดับสากล (Global Branding)

ระบุส่วนประกอบที่คุณต้องการปรับแต่ง คุณสามารถขยายและย่อกลุ่มได้โดยคลิกที่ไอคอนลูกศรที่อยู่ถัดจากหัวเรื่องของกลุ่ม

เลือกสีผ่าน CSS

เลือกสีผ่าน CSS

ค่าเริ่มต้นสำหรับแต่ละส่วนประกอบจะแสดงผลแบบจางในฟิลด์ข้อความ

ระบุส่วนประกอบสีโดยค้นหาฟิลด์ข้อความส่วนประกอบแล้วกรอกสี CSS ใหม่ คุณสามารถกรอกสีโดยใช้รหัสฐานสิบหก ค่า RGB หรือชื่อสีที่ถูกต้อง

หมายเหตุ: สีที่กรอกจะแปลงและแสดงเป็นรหัสฐานสิบหก

เลือกสีผ่านเครื่องมือเลือกสี

เลือกสีผ่านเครื่องมือเลือกสี

จากเบราเซอร์ที่รองรับข้อมูลสีแบบเนทีฟ, สามารถเลือกเครื่องมือเลือกสีเพื่อเลือกค่าที่ต้องการ ค้นหาส่วนประกอบแล้วคลิกที่กล่องสี เครื่องมือเลือกสีจะปรากฎขึ้นในหน้าต่างใหม่

เลือกสี

เลือกสี

เลือกสีในหน้าต่างเครื่องมือเลือกสี [1] เมื่อเลือกสีแล้ว ส่วนประกอบจะแสดงสีใหม่ในช่องดังกล่าว [2] สีฐานสิบหกของส่วนประกอบจะอัพเดตด้วยค่าสีใหม่เช่นกัน

เพิ่มภาพ

เพิ่มภาพ

สำหรับส่วนประกอบที่ต้องใช้ภาพ ให้ระบุส่วนประกอบแล้วคลิกที่ลิงค์ เลือกภาพ (Select Image) รายละเอียดภาพครอบคลุมประเภทไฟล์ที่รองรับ

แสดงตัวอย่างธีม

แสดงตัวอย่างธีม

แสดงตัวอย่างธีมของคุณโดยคลิกที่ปุ่ม แสดงตัวอย่างการเปลี่ยนแปลงของคุณ (Preview Your Changes)

Canvas จะจัดทำภาพตัวอย่างของส่วนประกอบตามการเปลี่ยนแปลงแม่แบบของคุณ ในกรณีที่จำเป็น ให้ทำการเปลี่ยนแปลงเพิ่มเติมและดูตัวอย่างธีมของคุณอีกครั้ง

บันทึกธีม

บันทึกธีม

เมื่อคุณพอใจกับการเปลี่ยนแปลงแม่แบบแล้ว ให้บันทึกธีมของคุณโดยการคลิกที่ บันทึกธีม (Save Theme)

จัดทำชื่อธีม

จัดทำชื่อธีม

หากคุณแก้ไขธีมจากแม่แบบ Theme Editor จะจัดทำสำเนาของธีมไว้ แม่แบบไม่สามารถแก้ไขได้โดยตรง ในฟิลด์ชื่อธีม (Theme Name) [1] ให้กรอกชื่อสำหรับธีมของคุณ คลิกที่ปุ่ม บันทึกธีม (Save Theme) [2]

หมายเหตุ: หากคุณแก้ไขธีมที่บันทึกไว้ก่อนหน้านี้ การบันทึกธีมจะเขียนทับเวอร์ชั่นก่อนหน้าของธีมและใช้ชื่อธีมเดียวกัน

ปรับใช้ธีม

ปรับใช้ธีม

ปรับใช้ธีมไปยังบัญชีของคุณ โดยคลิกที่ปุ่ม ปรับใช้ธีม (Apply theme) [1]

ออกจากธีมและกลับไปที่หน้าธีม (Themes) โดยคลิกที่ปุ่ม ออก (Exit) [2] คุณสามารถเปิดธีมและปรับใช้ไปยังบัญชีของคุณได้ตลอดเวลา

ตรวจสอบการปรับใช้ธีม

ปรับใช้ธีมไปยังบัญชีผู้ใช้ทั้งหมดของคุณโดยคลิกที่ปุ่ม ตกลง (OK) [1] กลับไปที่ Theme Editor โดยคลิกที่ปุ่ม ยกเลิก (Cancel) [2]

หมายเหตุ: หากบัญชีของคุณอนุญาตให้บัญชีย่อยปรับแต่งธีมของตนเอง การเปลี่ยนแปลงใด ๆ ที่ปรับใช้จะส่งต่อไปยังบัญชีย่อยที่เกี่ยวข้องด้วย Canvas จะแสดงสถานะการอัพเดต Theme Editor ของคุณ เมื่อกระบวนการสำหรับบัญชีย่อยแต่ละบัญชีเสร็จสิ้น บัญชีย่อยนั้นจะหายไปจากหน้าต่างแสดงความคืบหน้า เมื่อบัญชีย่อยทั้งหมดได้รับการอัพเดตแล้ว Theme Editor จะเปลี่ยนเส้นทางกลับไปที่หน้า ธีม (Themes)