June 30, 2025
Finsweet Attributes: ขยายศักยภาพ Webflow อย่างไร้ขีดจำกัด
เริ่มต้นใช้งาน Finsweet Attributes ด้วยการเลือกเวอร์ชัน (v2 แนะนำ) เพิ่มสคริปต์ใน <head> และกำหนดแอตทริบิวต์บนองค์ประกอบ Webflow เช่น list, filters, trigger. สร้าง CMS Filter/Load/Sort ร่วมกันได้ เลี่ยงการ render-all จำนวนมาก ใช้ pagination เพื่อผ่าน Core Web Vitals และทดสอบบน staging ก่อนเผยแพร่.
วิธีใช้ Finsweet Attributes กับ Webflow (Filter/Load/Sort/Nest) อย่างรวดเร็วและมีประสิทธิภาพ
สำหรับ Designer • Marketer • Webflow Dev Finsweet Attributes ช่วยเพิ่มฟีเจอร์ขั้นสูงให้กับ CMS โดยการ "ติดฉลาก" (HTML attributes) ให้กับองค์ประกอบในหน้า โดยไม่ต้องเขียน JS เองเกือบทั้งหมด
ภาพรวมโซลูชันยอดนิยม
| โซลูชัน | การใช้งาน | แอตทริบิวต์หลัก (ตัวอย่าง) | เอกสารอ้างอิง |
|---|---|---|---|
| CMS Filter | กรองคอนเทนต์จาก CMS ด้วยฟอร์ม | fs-cmsfilter-element="list|filters|clear|empty", fs-cmsfilter-field="IDENTIFIER" |
Docs |
| CMS Load | Load more / Infinite / Pagination | fs-cmsload-element="list|loader|items-count|visible-count|empty", fs-cmsload-mode="pagination|load-under|render-all|infinite" |
Docs |
| CMS Sort | จัดเรียงลำดับรายการ | fs-cmssort-element="list|trigger|dropdown-label|scroll-anchor", fs-cmssort-field="IDENTIFIER[-asc|-desc]", fs-cmssort-type="date|number" |
Docs |
| CMS Nest | สร้าง Nested Collection หลายชั้น | โครงสร้างตามเอกสาร (ปรับจาก Webflow limit) | Docs |
| List Tabs (v2) | แท็บแบบไดนามิกจาก CMS | fs-list-element="list|tabs|tab-link" |
Docs (v2) |
เลือก v1 หรือ v2?
| หัวข้อ | Attributes v1 (Legacy) | Attributes v2 (แนะนำ) | เอกสารอ้างอิง |
|---|---|---|---|
| สคริปต์ | หนึ่งไฟล์ต่อโซลูชัน (เช่น cmsfilter.js) | สคริปต์รวมหนึ่งไฟล์สำหรับหลายโซลูชัน | Overview |
| คุณสมบัติใหม่/ประสิทธิภาพ | ยังคงรองรับแต่หยุดฟีเจอร์ใหม่ | ได้รับฟีเจอร์/ปรับปรุงล่าสุดต่อเนื่อง | v2 Script |
| การผสม v1 กับ v2 | ห้ามใช้ร่วมกันในหน้าเดียว — เลือกอย่างใดอย่างหนึ่ง | ||
ลูกค้าตัดสินใจเร็วขึ้นในไม่กี่วินาที — แค่เปลี่ยน UX ให้ถูกจุด
ก่อนปรับ UX คนเข้าเว็บแล้วออกเลยค่ะ แต่พอรีดีไซน์ใหม่ กลายเป็นจุดที่ปิดการขายได้ดีที่สุดแทน!
คุณสุภาวดี
Marketing Executive, Digital Business
ลูกค้าบอกเลยว่าเว็บใหม่ ทำให้น่าเชื่อถือขึ้นแบบก้าวกระโดด
หลังรีแบรนด์กับ Vision X Brain ยอดขายพุ่ง x3 ภายใน 2 เดือน!
คุณพลอย
Brand Owner | Beauty Industry
210% คืออัตราผู้ใช้ใหม่ที่เพิ่มขึ้นหลังรีดีไซน์ในเดือนแรก
เปลี่ยนเว็บกับ Vision X Brain แค่ไม่กี่วัน ลูกค้าใหม่เริ่มเข้าใจธุรกิจเราทันที
คุณศุภัสรา
Marketing Executive, B2B Tech
ลูกค้าใหม่เพิ่มขึ้น 3X ภาพลักษณ์ดูโปรขึ้นทันที
หลังรีดีไซน์กับ Vision X Brain ลูกค้าระดับองค์กรเริ่มเข้ามาจองงานผ่านเว็บไซต์เอง — ไม่ต้องพึ่งคอนเนคชั่นเหมือนก่อน
คุณณิชาภัทร
Brand Manager | Hospitality & Service
ผู้ใช้งานทดลองเพิ่มขึ้น 210% ภายใน 30 วันแรก
หลังจากเปลี่ยนเว็บไซต์กับ Vision X Brain ผู้ใช้งานกล้ากดทดลองระบบตั้งแต่หน้าแรก — ไม่ต้องตาม โทร หรืออธิบายซ้ำอีก
คุณอลิษา
Business Founder | Tech & Innovation
Recent Blog
5 ขั้นตอนสร้างเว็บไซต์ E-Commerce ที่ทำให้ยอดขายพุ่งสูงทันที
เคยรู้สึกว่าเว็บไซต์ของคุณไม่ดึงดูดลูกค้าไหม? มาดู 5 ขั้นตอนง่ายๆ ที่จะช่วยแก้ปัญหานี้และทำให้ยอดขายพุ่งสูงขึ้น! อ่านต่อ...
เคล็ดลับการออกแบบเว็บไซต์ด้วย Webflow: เพิ่มความเร็วและประสิทธิภาพทันที
เว็บไซต์ของคุณช้าอยู่หรือเปล่า? หากใช่ นี่คือปัญหาที่คุณต้องแก้ไขเพื่อให้ลูกค้าไม่ออกจากเว็บไซต์ อ่านต่อเพื่อค้นพบเคล็ดลับการออกแบบที่ช่วยเพิ่มความเร็ว!
5 เหตุผลที่เว็บไซต์ของคุณควรปรับปรุงเพื่อเพิ่มผลลัพธ์ทันที
เคยรู้สึกว่าเว็บไซต์ของคุณไม่ดึงดูดลูกค้าไหม? บทความนี้จะช่วยคุณหาวิธีปรับปรุงและทำให้ลูกค้าอยู่ต่อมากขึ้น อ่านต่อ...