วิธีการสร้าง Feature Box

วิธีการสร้าง Feature Box
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. ตัวอย่างผลลัพธ์

กำหนดหมวดหมู่สินค้าที่ต้องการแสดง

สามารถกำหนดหมวดหมู่สินค้าที่ต้องการให้แสดงได้ โดยสามารถเลือกกลุ่มสินค้าที่ต้องการได้ เช่น สินค้าลดราคา, สินค้าที่ขายล่าสุด

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
โดย witsarutt000 พฤ 14 มี.ค. 2024 4:07 pm บอร์ด SQL Knowledge
1
166
พฤ 14 มี.ค. 2024 5:44 pm โดย Sirayu View Topic SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
โดย witsarutt000 พฤ 14 มี.ค. 2024 11:17 am บอร์ด PHP Knowledge
0
125
พฤ 14 มี.ค. 2024 11:17 am โดย witsarutt000 View Topic PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
โดย Thanavat_n พ 13 มี.ค. 2024 11:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
270
พ 13 มี.ค. 2024 1:34 pm โดย Thanavat_n View Topic ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
โดย @Foretoday อ 12 มี.ค. 2024 1:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
184
อ 12 มี.ค. 2024 1:46 pm โดย @Foretoday View Topic ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
โดย witsarutt000 จ 11 มี.ค. 2024 6:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
142
จ 11 มี.ค. 2024 6:14 pm โดย witsarutt000 View Topic แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
โดย mindphp อ 10 มี.ค. 2024 4:36 am บอร์ด Linux - Web Server
0
239
อ 10 มี.ค. 2024 4:36 am โดย mindphp View Topic ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
IP และ vpn (VMware)
โดย ballmykids อ 10 มี.ค. 2024 2:35 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
203
จ 11 มี.ค. 2024 3:19 pm โดย ballmykids View Topic IP และ vpn (VMware)
แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว
โดย Anonymous ศ 08 มี.ค. 2024 7:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
166
ศ 08 มี.ค. 2024 8:12 pm โดย mindphp View Topic แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว