เรียนรู้วิธีสร้างหน้านักเรียนที่ช่วยยกระดับประสบการณ์การเรียนรู้
อินเทอร์เฟซสำหรับนักเรียนคือศูนย์กลางของคอร์สของคุณ การออกแบบที่สะอาดและใช้งานง่ายช่วยให้นักเรียนมีสมาธิและมีแรงจูงใจ เปลี่ยนผู้เยี่ยมชมทั่วไปให้เป็นผู้เรียนที่มุ่งมั่น
ธีมและการตั้งค่าแบบกำหนดเองช่วยให้คุณปรับแต่งรูปลักษณ์และความรู้สึกของหน้านักเรียน สร้างการออกแบบที่สวยงามและน่าสนใจได้ในไม่กี่คลิก คู่มือนี้จะแสดงวิธีกำหนดค่าหน้านี้อย่างมีประสิทธิภาพ เปลี่ยนให้เป็นศูนย์กลางที่สะท้อนสไตล์ของคอร์สของคุณ พร้อมรับประกันประสบการณ์การเรียนรู้ที่ราบรื่น
หน้านักเรียนคืออะไร?
ภายในแพลตฟอร์ม Mavibot หน้านักเรียนคือแดชบอร์ดส่วนตัวที่ทำหน้าที่เป็นพื้นที่ทำงานหลักสำหรับคอร์สของคุณ โดยรวบรวมเครื่องมือทั้งหมดที่ผู้เรียนต้องการ ช่วยให้พวกเขาสามารถ:
- เข้าถึงเนื้อหาและสื่อการเรียนทั้งหมดของคอร์ส
- ติดตามความคืบหน้าผ่านโมดูลและบทเรียน
- ทำบทเรียนและส่งงานที่ได้รับมอบหมาย
- โต้ตอบกับผู้สอนหรือผู้ช่วย
สภาพแวดล้อมแบบบูรณาการนี้ออกแบบมาเพื่อปรับปรุงเส้นทางการเรียนรู้ ทำให้ผู้เรียนมีสมาธิ เป็นระเบียบ และมีแรงจูงใจ
ทำไมหน้านักเรียนถึงสำคัญ?
หน้านักเรียนจัดโครงสร้างและปรับปรุงกระบวนการเรียนรู้ ช่วยให้นักเรียนสามารถ:
- ค้นหาสื่อที่จำเป็นและกลับมาเรียนต่อจากจุดที่ค้างไว้ได้อย่างรวดเร็ว
- ติดตามความคืบหน้าได้ง่าย ดูว่างานใดเสร็จแล้วและงานใดยังค้างอยู่
- รับคำติชมจากผู้สอน ช่วยให้การเรียนรู้เป็นส่วนตัวและมีประสิทธิภาพมากขึ้น
จะตั้งค่าหน้านักเรียนได้ที่ไหน
เครื่องมือสร้างคอร์สมีให้ใช้งานในแผนการสมัครสมาชิก "ธุรกิจ"
ในการเริ่มต้น ให้ไปที่ส่วน "คอร์ส" ใน MaviBot
จากนั้น เลือกคอร์สที่คุณต้องการตั้งค่าหน้านักเรียน และไปที่ การตั้งค่า ของคอร์สนั้น
คุณจะถูกนำไปยังหน้าการตั้งค่าหลักของคอร์ส ซึ่งคุณต้องเปิดแท็บ "หน้านักเรียน"
ตอนนี้ เพื่อเริ่มปรับแต่งหน้านักเรียน ให้หาไอคอนรูปเฟืองเพื่อเปิดเมนูการตั้งค่า
เมื่อคุณคลิกไอคอนรูปเฟือง เมนูจะเปิดขึ้นพร้อมการตั้งค่าสำหรับธีมเริ่มต้น (กำหนดเอง) ธีมของคุณเอง (ที่แก้ไขได้) รวมถึงการตั้งค่าเพิ่มเติมและตัวเลือกในการเพิ่มปุ่มที่กำหนดเอง
ธีมหลัก
ธีมหลักของหน้านักเรียนประกอบด้วยธีมที่ติดตั้งไว้ล่วงหน้าและพร้อมใช้งาน ซึ่งช่วยให้คุณปรับแต่งหน้าได้ในไม่กี่คลิก
ขั้นตอนที่ 1: เลือกโทนสีสำหรับ ธีมหลัก
คุณสามารถเลือกได้จาก 7 ธีมสว่างและ 2 ธีมมืด
เมื่อใช้ธีมที่กำหนดเอง สีขององค์ประกอบหลักทั้งหมดของหน้าจะได้รับการอัปเดต รวมถึง:
- พื้นหลัง (ภาพปก, พื้นหลังหน้า, แถบความคืบหน้า, บล็อกบทเรียน)
- ปุ่ม
- การเติมแถบความคืบหน้า
- เส้นขอบ, โครงร่าง ฯลฯ
ขั้นตอนที่ 2: เลือกระดับความโค้งของมุม
ก) รัศมีเป็นศูนย์ – มุมและองค์ประกอบทั้งหมดของหน้าจะเป็นรูปสี่เหลี่ยม
ข) รัศมีปานกลาง – มุมและองค์ประกอบจะดูโค้งมนหรือเป็นรูปวงรี
ค) รัศมีสูงสุด – มุมและองค์ประกอบทั้งหมดของหน้าจะมีขอบโค้งเต็มที่
เยี่ยมมาก!
ตอนนี้คุณรู้วิธีตั้งค่าธีมหลักของหน้านักเรียนอย่างรวดเร็วแล้ว
หากคุณต้องการเพิ่มปุ่มพิเศษ อัปโหลดภาพปกที่กำหนดเอง หรือใช้โทนสีเฉพาะของคุณเองกับหน้า เราขอแนะนำให้อ่านส่วนถัดไปของบทความนี้
ธีมที่กำหนดเอง
การตั้งค่าในแท็บ "ธีมที่กำหนดเอง" ช่วยให้คุณใช้โทนสีที่เป็นเอกลักษณ์และหลากหลายของคุณเองกับองค์ประกอบของหน้านักเรียน
โปรดทราบ
ธีมหลักและธีมที่กำหนดเองสามารถใช้ร่วมกันได้
ตัวอย่างเช่น คุณสามารถใช้การตั้งค่าในแท็บธีมที่กำหนดเองเพื่อใช้สีกับองค์ประกอบเพียงไม่กี่ชิ้น ในขณะที่ส่วนที่เหลือของหน้ายังคงมีสไตล์ตามธีมหลักที่เลือกไว้
สีพื้นหลัง
การตั้งค่านี้จะเปลี่ยนสีพื้นหลังของทั้งหน้า ไม่รวมองค์ประกอบแต่ละชิ้น
คลิกที่สี่เหลี่ยมเพื่อเปิดจานสีและเลือกสีที่ต้องการ
นอกจากจานสีกว้างสำหรับแต่ละองค์ประกอบแล้ว คุณยังสามารถปรับความเข้มของสีได้โดยใช้แถบความโปร่งใส
สีพื้นหลังโอเวอร์เลย์
ใช้การตั้งค่าพื้นหลังโอเวอร์เลย์เพื่อใช้สีที่สอดคล้องกับคอนเทนเนอร์ภาพหลักบนหน้า:
ก) แถบความคืบหน้า;
ข) บล็อกบทเรียนแต่ละบล็อก;
ค) พื้นที่ภาพปกคอร์ส
สีเน้น
การตั้งค่าสีเน้นช่วยให้คุณเปลี่ยนโทนสีขององค์ประกอบหลักที่ถูกเน้นบนหน้านักเรียน รวมถึง:
ก) ปุ่มนำทางบทเรียน;
ข) การเติมแถบความคืบหน้า;
ค) เส้นขอบ, พื้นหลังหมายเลขบทเรียน และองค์ประกอบที่คล้ายกัน
สีข้อความพื้นหลังหน้า
การตั้งค่านี้ช่วยให้คุณเลือกโทนสีที่น่าสนใจสำหรับข้อความที่แสดงบนพื้นหลังของหน้า
สีข้อความโอเวอร์เลย์
การตั้งค่านี้ช่วยให้คุณเปลี่ยนสีข้อความสำหรับองค์ประกอบหลักบนหน้านักเรียนที่ปรากฏบนพื้นหลังโอเวอร์เลย์
สีข้อความเน้น
ใช้การตั้งค่านี้เพื่อกำหนดสีข้อความ (ฟอนต์) สำหรับองค์ประกอบใดๆ ที่อยู่บนพื้นหลังสีเน้น รวมถึงกล่องคำอธิบายและปุ่มโต้ตอบ
การตั้งค่าเพิ่มเติม
ในการตั้งค่าเพิ่มเติมของหน้านักเรียน คุณสามารถอัปโหลดรูปภาพเพื่อใช้เป็นปกหน้าได้
โปรดทราบ
รูปภาพที่อัปโหลดเป็นปกหน้านักเรียนจากอุปกรณ์ของคุณต้องมีขนาดไม่เกิน 15 MB
ขั้นตอนที่ 1: การอัปโหลดรูปภาพ
คุณสามารถอัปโหลดรูปภาพจากคอมพิวเตอร์ของคุณโดยตรง
หรืออัปโหลดรูปภาพผ่านลิงก์จากพื้นที่จัดเก็บไฟล์ของคุณ
ข้อดีของการอัปโหลดรูปภาพผ่านลิงก์จากพื้นที่จัดเก็บไฟล์คือคุณสามารถใช้รูปภาพทุกขนาดเป็นปกได้
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีใช้พื้นที่จัดเก็บไฟล์ โปรดดูบทความ "พื้นที่จัดเก็บไฟล์"
ขั้นตอนที่ 2: ความสูงของปก
หลังจากอัปโหลดรูปภาพแล้ว ให้ตั้งค่าความสูงของปกที่เหมาะสมบนหน้านักเรียน
ขั้นตอนที่ 3: ตำแหน่งรูปภาพ
คุณสามารถใช้ ตัวเลือกตำแหน่งที่ตั้งไว้ล่วงหน้า เพื่อจัดแนวรูปภาพไปที่ กึ่งกลาง ซ้าย ขวา หรือล่าง หรือเลือก การตั้งค่าที่กำหนดเอง
โดยการเลื่อนตัวควบคุมวงกลม คุณสามารถวางตำแหน่งรูปภาพตามที่คุณต้องการได้
ขั้นตอนที่ 4: ขนาดรูปภาพ
ฟิลด์ขนาดรูปภาพ รองรับค่าของ contain / cover รวมถึง ค่าตัวเลขเป็นพิกเซล (px) และ เปอร์เซ็นต์ (%)
1) ค่า contain/cover
2) ค่าตัวเลข
ขั้นตอนที่ 5: การทำซ้ำรูปภาพ
รูปภาพสามารถทำซ้ำตาม แกน Y คือ แนวตั้ง; ตาม แกน X คือ แนวนอน หรือไม่ทำซ้ำ
ขั้นตอนที่ 6: ช่องทำเครื่องหมาย
เพื่อปรับปรุงประสบการณ์ของนักเรียนบนหน้าส่วนตัว คุณสามารถเปิดใช้งานการแสดง:
- แถบความคืบหน้า
- จำนวนบทเรียนที่เสร็จสมบูรณ์ และ
- จำนวนการบ้านที่ได้รับการอนุมัติ
หากคุณไม่ต้องการใช้องค์ประกอบเหล่านี้บนหน้า คุณสามารถ ปิดใช้งานช่องทำเครื่องหมาย
ปุ่ม
หน้านักเรียนมีฟีเจอร์ในการเพิ่มปุ่มเรียกให้ดำเนินการที่กำหนดเองใต้แถบความคืบหน้า คุณสามารถเชื่อมโยงปุ่มเหล่านี้ไปยังเว็บไซต์ภายนอก เอกสาร หรือหน้าสำคัญอื่นๆ
ในการเพิ่มปุ่ม ให้เปิดแท็บที่เกี่ยวข้องใน การตั้งค่าหน้านักเรียน
จากนั้นคลิกที่ "เพิ่มปุ่ม"
หน้าต่างโมดอลจะเปิดขึ้นสำหรับการกำหนดค่าปุ่มและป้อนข้อความของปุ่ม
ตอนนี้ ระบุลิงก์ปลายทาง (URL) สำหรับปุ่มนี้
สีของปุ่มจะสืบทอดจานสีของธีมหลักโดยอัตโนมัติ อย่างไรก็ตาม คุณสามารถแทนที่ได้โดยการตั้งค่าสีที่กำหนดเองสำหรับทั้งพื้นหลังและข้อความ
จากนั้น คลิก "บันทึก"
ปุ่มถูกบันทึกและทำงานแล้ว คุณจะเห็นปุ่มแสดงใต้แถบความคืบหน้าบนหน้านักเรียน
คุณสามารถเพิ่มหลายปุ่ม – โดยไปที่เมนูการตั้งค่าและคลิก "เพิ่มปุ่ม" ใต้ปุ่มที่มีอยู่
แบนเนอร์
เพื่อโปรโมททรัพยากรสำคัญ คุณสามารถเพิ่มแบนเนอร์ที่คลิกได้บนหน้านักเรียน แบนเนอร์เหล่านี้สามารถเชื่อมโยงไปยัง URL ใดๆ ที่คุณระบุ เช่น บอทส่งข้อความ กลุ่มชุมชน เอกสารสำคัญ หรือเว็บไซต์ภายนอก
มาดำเนินการตั้งค่ากัน
ขั้นตอนที่ 1: เข้าถึงการตั้งค่าแบนเนอร์
ในการตั้งค่าหน้าคอร์ส ให้ค้นหาและขยายส่วน "แบนเนอร์"
โดยคลิกที่ส่วนในเมนูแบบเลื่อนลงของการตั้งค่า:
ขั้นตอนที่ 2: อัปโหลดรูปภาพ
หลังจากอัปโหลด รูปภาพจะปรากฏในฟิลด์การตั้งค่า
ขั้นตอนที่ 3: ไปที่การตั้งค่ารูปภาพ
โดยคลิกไอคอนรูปเฟืองที่มุมซ้ายบนของรูปภาพที่อัปโหลด และหน้าต่างโมดอลการตั้งค่าจะเปิดขึ้น:
ขั้นตอนที่ 4: ตั้งค่าลิงก์ปลายทาง
ป้อน URL แบบเต็มที่นักเรียนจะถูกเปลี่ยนเส้นทางเมื่อคลิกแบนเนอร์ ซึ่งอาจเป็นหน้าเว็บ บอทส่งข้อความ หรือทรัพยากรออนไลน์อื่นๆ
ขั้นตอนที่ 5: กำหนดค่าขนาดของแบนเนอร์
ตั้งค่าขนาดการแสดงผลของแบนเนอร์โดยป้อนค่าสำหรับความกว้างและความสูง
สำคัญ: ป้อนเฉพาะค่าตัวเลขในฟิลด์เหล่านี้ (เช่น
300) อย่ารวมหน่วยเช่นpxหรือ%
ขั้นตอนที่ 6: บันทึกการกำหนดค่าของคุณ
คลิก "บันทึก" เพื่อใช้การตั้งค่าแบนเนอร์ทั้งหมด
ตั้งค่าเสร็จสมบูรณ์!
แบนเนอร์ที่คลิกได้ของคุณทำงานแล้ว แบนเนอร์จะปรากฏทางด้านขวาของหน้านักเรียน ใต้แถบความคืบหน้า (หากเปิดใช้งานฟีเจอร์แบนเนอร์)
วิธีเพิ่มหลายแบนเนอร์
คุณสามารถเพิ่มแบนเนอร์หลายอันในหน้าเดียว โดยอัปโหลดรูปภาพในการตั้งค่าและกำหนดค่าตามที่อธิบายไว้ข้างต้น
หากคุณคลิก "เพิ่มรูปภาพ" ใต้รูปภาพที่อัปโหลดแล้ว แบนเนอร์ใหม่จะปรากฏใต้แบนเนอร์ที่เพิ่มไว้ก่อนหน้านี้บนหน้านักเรียน
- เลือกตัวเลือกอัปโหลดรูปภาพใต้แบนเนอร์ที่เพิ่ม (ปุ่มอัปโหลดขนาดใหญ่ที่ด้านล่าง):
- รูปภาพถูกอัปโหลดใต้แบนเนอร์ที่เพิ่มไว้ก่อนหน้านี้
- บนหน้านักเรียน แบนเนอร์จะปรากฏในบรรทัดถัดไปหลังจากแบนเนอร์ที่เพิ่มไว้ก่อนหน้านี้
หากคุณคลิกปุ่ม "+" ทางด้านขวาของรูปภาพที่อัปโหลดแล้ว แบนเนอร์ใหม่จะปรากฏในแถวเดียวกับแบนเนอร์ที่เพิ่มไว้ก่อนหน้านี้บนหน้านักเรียน
- คลิกปุ่ม "+" ทางด้านขวาของรูปภาพที่อัปโหลดในการตั้งค่าหน้า
รูปภาพที่อัปโหลดใหม่จะถูกวางไว้ทางด้านขวา
- บนหน้านักเรียน แบนเนอร์จะแสดงในแถวเดียวกับแบนเนอร์ที่อัปโหลดไว้ก่อนหน้านี้
คุณสามารถเพิ่มแบนเนอร์ทั้งในแถวเดียวกันและในแถวถัดไปพร้อมกัน
เรียบร้อย!
ตอนนี้คุณรู้วิธีกำหนดค่าหน้านักเรียนอย่างสมบูรณ์แล้ว!
ตัวอย่างหน้า
หลังจากกำหนดค่าหน้านักเรียนแล้ว อย่าลืมบันทึกความคืบหน้าของคุณ
หลังจากบันทึกการตั้งค่าแล้ว คลิกปุ่ม "ตัวอย่าง"
จากนั้น เลือก "ไปที่หน้านักเรียน"
คุณจะถูกนำไปยังตัวอย่างหน้านักเรียน
ในโหมดแก้ไข แผงตัวอย่างช่วยให้คุณตรวจสอบเค้าโครงสุดท้ายด้วยสายตา คุณสามารถดูว่าองค์ประกอบทั้งหมด เช่น แถบความคืบหน้า แบนเนอร์ ปุ่ม และบล็อกบทเรียน ถูกวางตำแหน่งและจัดสไตล์ตามการกำหนดค่าของคุณอย่างไร
โปรดทราบ
ตัวอย่างมีไว้สำหรับ การสาธิตด้วยสายตาเท่านั้น องค์ประกอบบนตัวอย่างหน้านักเรียน ไม่สามารถคลิกได้ และจะไม่เรียกใช้การนำทางหรือฟังก์ชันการทำงานใดๆ