วิธีการสร้าง Feature Box
Feature Box จะเป็นการสร้างกล่องข้อความ ที่ใช้ในการแนะนำฟีเจอร์ของโปรแกรมหรือระบบต่างๆ โดยที่ภายในกล่องข้อความนั้นจะประกอบไปด้วย Icon หรือรูปภาพประกอบฟีเจอร์ ซึ่งรูปภาพที่ใช้นั้นควรจะสื่อถึงฟีเจอร์แต่ละตัวด้วย เช่น ระบบของเรามีฟีเจอร์ในการแจ้งเตือนข้อมูลไปยังอีเมล์ ดังนั้น Icon ที่เราจะเลือกใช้ก็อาจจะเป็น Icon อีเมล์ นั่นเองค่ะ ทั้งนี้ก็เพื่อให้ผู้อ่านสามารถเข้าใจและมองเห็นภาพได้ง่ายมากขึ้น และในส่วนด้านล่างของ Icon นั้นจะเป็นข้อความสำหรับอธิบายการใช้งานหรือความสามารถของฟีเจอร์แต่ละตัว สำหรับในบทความนี้เราจะมาแนะนำวิธีการสร้าง Feature Box ไปดูกันเลยค่ะว่ามีวิธีการอย่างไรบ้าง
วิธีการสร้าง Feature Box
1. ในขั้นตอนแรกให้ทำการดาวน์โหลด Icon ที่ต้องการใช้งานมาก่อน โดยเลือกใช้ Icon ที่เหมาะสมและเกี่ยวข้องกับฟีเจอร์ของระบบ
2. ตัวอย่าง code สำหรับใส่ Icon
เมื่อทำการดาวน์โหลด Icon มาแล้ว ให้นำ code ด้านล่างไปใส่ โดยเปลี่ยน path รูป และปรับขนาดของ Icon ได้ตามที่ต้องการ
<class="step1naja" style="overflow: unset;">
class="span4" style="margin-left: 0px;">
class="step2naja" style="background-color: white; padding-left: 5px; padding-right: 5px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 10px; margin-top: 2px;">
class="step3naja" style="padding-right: 10px; padding-left: 10px; margin-top: 10px;">
class="step4naja">
3. ตัวอย่าง code การใส่หัวข้อของฟีเจอร์แต่ละตัว
class="step5naja" style="border-top: 1px solid; margin-top: 5px; margin-bottom: 5px; text-align: center;">กำหนดหมวดหมู่สินค้าที่ต้องการแสดง
4. ตัวอย่าง code การใส่ข้อความอธิบายฟีเจอร์ (ความสามารถของฟีเจอร์)
class="step5naja" style="margin-top: 5px; margin-bottom: 5px; text-align: center;">
สามารถกำหนดหมวดหมู่สินค้าที่ต้องการให้แสดงได้ โดยสามารถเลือกกลุ่มสินค้าที่ต้องการได้ เช่น สินค้าลดราคา, สินค้าที่ขายล่าสุด
5. ตัวอย่างผลลัพธ์
สามารถกำหนดหมวดหมู่สินค้าที่ต้องการให้แสดงได้ โดยสามารถเลือกกลุ่มสินค้าที่ต้องการได้ เช่น สินค้าลดราคา, สินค้าที่ขายล่าสุด