ในโลกของการเรียนรู้ออนไลน์ ความสะดวกในการนำทางมีบทบาทสำคัญในการดึงดูดและรักษาผู้ใช้ การ์ดหลักสูตรที่ปรับแต่งได้เป็นวิธีที่ยอดเยี่ยมในการทำให้เว็บไซต์ของคุณโต้ตอบและมีข้อมูลมากขึ้น
การ์ดเหล่านี้ช่วยให้ผู้เยี่ยมชมค้นหาโปรแกรมที่สนใจได้อย่างรวดเร็วและนำทางไปยังหน้าหลักสูตรได้อย่างง่ายดายด้วยปุ่มเดียว ในบทความนี้ เราจะมาดูวิธีตั้งค่าส่วนของการ์ดหลักสูตรที่ปรับแต่งได้เพื่อเพิ่มความสามารถในการใช้งานเว็บไซต์ของคุณและช่วยให้ผู้ใช้บรรลุเป้าหมายทางการศึกษาได้เร็วขึ้น
แทนที่จะใช้แฟลชการ์ดออนไลน์ คุณสามารถเพิ่มรายการบทเรียนลงในหน้าเว็บไซต์ได้ เพียงเลือกหลักสูตรที่ต้องการในส่วนนี้ บทเรียนทั้งหมดจะแสดงขึ้น
วิธีเพิ่มส่วน "การ์ดหลักสูตร"
หากต้องการเพิ่มส่วน "การ์ดหลักสูตร" ให้คลิกที่ "+" ในโหมดแก้ไขเว็บไซต์ของคุณ
จากนั้นค้นหาส่วน "การ์ดหลักสูตร" ในเมนูที่เปิดขึ้นและคลิกเพื่อเพิ่มส่วนลงในเว็บไซต์ของคุณ:
ส่วนนี้จะถูกเพิ่มลงในเว็บไซต์ของคุณ และเมนูการตั้งค่าเนื้อหาจะเปิดขึ้นสำหรับคุณ:
ส่วนเนื้อหา
การกำหนดค่าเนื้อหาของส่วนการ์ดหลักสูตรประกอบด้วยการเลือกหลักสูตรที่สร้างไว้แล้วในโปรเจกต์เพื่อแสดงบนเว็บไซต์และปรับแต่งองค์ประกอบของการ์ด
วิธีการสร้างหลักสูตรบนแพลตฟอร์ม Mavibot อธิบายไว้ในส่วน “หลักสูตรออนไลน์”
การเลือกหลักสูตร
เลือกหลักสูตรที่คุณต้องการแสดงบนเว็บไซต์ของคุณ:
โดยทำเครื่องหมายที่ช่องชื่อหลักสูตรที่ต้องการ
ในทางกลับกัน หลักสูตรที่เลือกจะแสดงบนหน้าเว็บไซต์ของคุณทันทีพร้อมกับปกที่คุณตั้งค่าไว้ในการตั้งค่าหลักสูตร
การปรับแต่ง
หลังจากที่คุณเลือกหลักสูตรที่จำเป็นแล้ว ให้ดำเนินการปรับแต่งองค์ประกอบของการ์ด:
- เงา
สำหรับการ์ดหลักสูตรในส่วนนี้ คุณสามารถปรับความเข้มของเงาได้:
a) ไม่มีเงา:
b) เงาอ่อน:
c) เงาเข้ม:
การตั้งค่าสีขององค์ประกอบการ์ด
ปรับแต่งลักษณะของการ์ดโดยการปรับสีสำหรับองค์ประกอบต่างๆ คุณยังสามารถเพิ่มเอฟเฟกต์โฮเวอร์แบบโต้ตอบได้
- สีข้อความ: เปลี่ยนสีข้อความหลักบนการ์ด (ไม่รวมปุ่ม)
- พื้นหลังการ์ด: กำหนดสีพื้นหลังของการ์ด
- สีขอบ: กำหนดสีของเส้นขอบหรือกรอบของการ์ด
- ข้อความปุ่ม: กำหนดสีของข้อความภายในปุ่ม (สถานะคงที่)
- พื้นหลังปุ่ม: กำหนดสีพื้นหลังของปุ่ม
เอฟเฟกต์โฮเวอร์แบบโต้ตอบ (ส่วนเสริม):
เปิดใช้งานเอฟเฟกต์โฮเวอร์เพื่อเปลี่ยนสีขององค์ประกอบเหล่านี้แบบไดนามิกเมื่อผู้ใช้เลื่อนเคอร์เซอร์ไปเหนือการ์ด
ตอนนี้คุณรู้วิธีแสดงหลักสูตรที่มีอยู่ในเว็บไซต์ MaviBot ของคุณโดยใช้ส่วน "การ์ดหลักสูตร" แล้ว
สำหรับการตั้งค่าพื้นหลังและการแสดงผล โปรดดูบทความ "การตั้งค่าส่วนทั่วไป"
วิธีเพิ่มบล็อก "บทเรียน"
หากต้องการเพิ่มบล็อกเพื่อแสดงรายการบทเรียนในหลักสูตร ให้สลับไปที่โหมดแก้ไขเว็บไซต์และวางเมาส์เหนือพื้นที่ทำงาน จากนั้นคลิกที่ "+":
เมนูจะเปิดขึ้นทางด้านขวาพร้อมกับส่วนต่างๆ ของเว็บไซต์ที่มีอยู่ ซึ่งคุณต้องค้นหาบล็อก "บทเรียน":
คลิกที่ "การ์ดหลักสูตร" จากนั้นเมนูจะเปิดขึ้นสำหรับการกำหนดค่าเนื้อหาของบล็อก:
คุณเพียงแค่ต้องเลือกหลักสูตรที่ต้องการ ซึ่งสร้างไว้แล้วใน Mavibot ในเมนูแบบเลื่อนลงและคลิก "บันทึก"
จากนั้นไปที่การตั้งค่าเพื่อปรับแต่งเนื้อหาของบล็อก:
การปรับแต่ง
เมื่อคุณคลิกที่ปุ่ม "การตั้งค่า" และวางเมาส์เหนือส่วนนั้น การตั้งค่าสำหรับปรับแต่งเนื้อหาและบล็อกจะเปิดขึ้น:
มีตัวเลือกการตั้งค่าอะไรบ้าง?
- รูปแบบรายการบทเรียน
โดยค่าเริ่มต้น รูปแบบของรายการบทเรียนจะแสดงในรูปแบบใหม่ หากจำเป็น คุณสามารถตั้งค่ารุ่นที่กระชับกว่าของรูปแบบคลาสสิก:
- รูปแบบการกำหนดหมายเลข
รูปแบบการกำหนดหมายเลขมีให้สำหรับรูปแบบใหม่ของการแสดงบทเรียนของหลักสูตร การกำหนดหมายเลขจะเปลี่ยนในการ์ดบทเรียนเอง:
- ไอคอนบทเรียน
จะแสดงหากคุณเพิ่มตัวอย่างภายในบทเรียนในการตั้งค่าหลักสูตร
วิธีเพิ่มไอคอน
ขั้นตอนที่ 1 ไปที่การตั้งค่าบทเรียน:
โดยไปที่โหมดการตั้งค่าหลักสูตรและค้นหาแท็บบทเรียน:
จากนั้นคลิก "แก้ไข" หลังจากนั้นหน้าบทเรียนจะเปิดขึ้นเพื่อแก้ไข
ขั้นตอนที่ 2 เปิดการตั้งค่าหน้าบทเรียน
ไปที่ส่วน "ทั่วไป" ในการตั้งค่าหน้าบทเรียน:
ขั้นตอนที่ 3 อัปโหลดตัวอย่างบทเรียน
ขยายรายการการตั้งค่ารูปภาพในการตั้งค่าข้อมูลพื้นฐาน:
อัปโหลดรูปภาพสำหรับตัวอย่างบทเรียน:
บันทึกการตั้งค่า
เสร็จแล้ว! ตอนนี้ตัวอย่างบทเรียนจะแสดงเป็นไอคอนในส่วนบทเรียนบนเว็บไซต์
- ลายพื้นหลัง
มันเพิ่มมิติและความโดดเด่นให้กับการ์ดบทเรียนของคุณ:
- การปัดเศษองค์ประกอบ
ค่าถูกกำหนดเป็นพิกเซลและปัดเศษมุมของการ์ดบทเรียน
- รูปแบบการ์ดบทเรียน
ช่วยจัดเรียงการ์ดบทเรียนในแถวเดียวหรือในแถวที่มีหรือไม่มีการตัดคำ
- สีพื้นหลังและสีข้อความ
มีจานสีที่หลากหลายให้เลือกเพื่อกำหนดสีพื้นหลังของการ์ดและสีฟอนต์บนการ์ดบทเรียน:
ตอนนี้คุณรู้วิธีเพิ่มรายการบทเรียนลงในเว็บไซต์ของคุณและปรับแต่งเนื้อหาของส่วนแล้ว
สำหรับการตั้งค่าพื้นหลังและการแสดงผล โปรดดูบทความ "การตั้งค่าส่วนทั่วไป"