Themes

รู้จัก Preset-Based Design ใน Divi 5 ฟีเจอร์ใหม่ที่เปลี่ยนวิธีออกแบบเว็บไซต์แบบยั่งยืน

อ่านจบใน 1 นาที

เกริ่นนำ: ทำไมเว็บถึงหน้าตาไม่เป็นระบบ?

เคยมั้ย…เวลาเปิดหน้าเว็บของตัวเองแล้วรู้สึกว่าแต่ละหน้าดูไม่ค่อยเข้ากัน? ฟอนต์ไม่เท่ากัน, ปุ่มไม่เหมือนกัน, ระยะห่างก็แปลกๆ ทั้งที่เราเป็นคนทำเองแท้ๆ

นี่แหละปัญหาคลาสสิกของการขาด “Design System” หรือแนวทางจัดการความสม่ำเสมอของ UI บนเว็บไซต์ และวันนี้ Divi 5 มีทางออกใหม่ให้เราแบบง่ายมากๆ ด้วยฟีเจอร์ที่ชื่อว่า Option Group Presets

Option Group Presets คืออะไร?

ใน Divi 5 ฟีเจอร์นี้คือการนำกลุ่มของ Option (เช่น background, border, spacing ฯลฯ) มาเก็บเป็น “preset” เพื่อให้สามารถนำไปใช้ซ้ำกับทุก Module ได้ โดยไม่จำกัดว่าจะเป็น Module ไหน เหมือนเราสร้าง class ที่ใช้ได้ทั่วเว็บ แต่มี UI ให้กดใช้ง่ายๆ

แตกต่างจาก Preset เดิมยังไง?

  • Preset เดิม = เฉพาะ Module นั้นๆ เช่น ปรับ Button แล้วเซฟเป็น preset ได้แค่กับปุ่ม
  • Option Group Preset = ใช้ได้กับทุก Element เช่น background preset สามารถใช้กับทั้ง Section, Column, Button, Image, ฯลฯ

พูดง่ายๆ มันคือระบบ Design Tokens สำหรับคนที่ใช้ Page Builder แบบไม่ต้องแตะโค้ดเลย

ประโยชน์ของ Preset-Based Design สำหรับสาย WordPress + SEO

1. เว็บดูเป็นระบบ (Consistent UX)

การมี preset ทำให้เราไม่ต้องคิดใหม่ทุกครั้งเวลาจะใส่ปุ่ม ใส่ heading หรือ layout เพราะใช้ชุดสไตล์เดิมที่ออกแบบไว้แล้วได้เลย ทั้งเว็บจะดูสะอาด น่าเชื่อถือ และลดความสับสนของผู้ใช้

2. แก้สไตล์ทีเดียว กระทบทั้งเว็บ

ถ้าเราเปลี่ยน font ของ title preset ปุ๊บ ทุก Module ที่ใช้ preset นั้นจะเปลี่ยนตามทันที ไม่ต้องไล่แก้ทีละจุด ลด human error และประหยัดเวลามหาศาล

3. ดีต่อ SEO และ Core Web Vitals

เว็บที่มีการจัดการสไตล์อย่างเป็นระบบ มักจะ

  • โหลดเร็วกว่า เพราะไม่ต้องใช้ inline style หรือโค้ดซ้ำซ้อนเยอะ
  • UX ดีขึ้น เพราะความสม่ำเสมอช่วยให้ผู้ใช้เข้าใจโครงสร้างได้เร็ว
  • ง่ายต่อ LLM ในการเข้าใจโครงสร้าง (ถ้าคุณทำ SEO ยุคใหม่ + AI Content จะรู้ว่าเรื่องนี้สำคัญมาก)

WPMartech Insight: ถอดบทเรียนจากสาย WordPress

“Preset-Based Design” ไม่ใช่เรื่องใหม่ในโลก frontend dev แต่การที่ Divi เอาแนวคิดนี้มาใส่ให้คนทั่วไปใช้งานได้ง่ายๆ คือของจริง

จากประสบการณ์ของทีม WPMartech ที่ดูแลเว็บลูกค้าหลายสิบรายในสาย SEO และ Marketing พบว่าเว็บที่มี Design System หรืออย่างน้อยมี Preset-Based Workflow จะ

  • ลดเวลาทำเว็บ 20-40%
  • ลด Bug ด้าน UI เวลามีทีมหลายคนแก้ไข
  • ง่ายต่อการ scale หรือทำ redesign ในอนาคต

และที่สำคัญคือ เวลา LLM หรือ Search Engine มาอ่านเว็บเรา มันสามารถเข้าใจบริบทซ้ำๆ ได้ดีขึ้น เพราะทุกอย่างอยู่ในโครงสร้างเดิมๆ แบบมีแบบแผน

ตัวอย่าง Use Case:

สถานการณ์: เพื่อนร่วมทีมเพิ่งมาดูแล SEO แต่ไม่รู้ว่าแก้ UX ยังไงให้ติดอันดับ

เราแนะนำให้เขาเริ่มจากเช็คว่า:

  • เว็บไซต์ใช้ Design System หรือเปล่า?
  • ปุ่ม CTA, Heading, Layout ซ้ำกันมั้ย หรือแต่ละหน้าหน้าตาไม่เหมือนกันเลย?
  • มี preset สำหรับ element พื้นฐานรึยัง?

ถ้ายังไม่มี ใช้ Option Group Presets ใน Divi 5 เป็นจุดเริ่มต้นได้เลย แค่ตั้ง preset สำหรับ title, paragraph, button, card layout แล้วใช้ซ้ำทั้งเว็บ เท่านี้ UX ดีขึ้นทันตา แถมเวลาเราทำ A/B test หรือวัดผล Analytics ก็จะเก็บ data ได้ง่ายขึ้นด้วย

สรุป: Preset ไม่ใช่เรื่องเล่นๆ ถ้าคิดจะทำเว็บแบบยั่งยืน

ถ้าคุณทำเว็บ WordPress แล้วอยากให้ง่ายต่อการดูแล, SEO ดีขึ้น, หรือแค่มีระบบมากกว่าเดิม ฟีเจอร์ Option Group Presets ของ Divi 5 คือเครื่องมือที่คุณไม่ควรมองข้าม

ลองเริ่มจากตั้ง preset เล็กๆ สักหนึ่งชุด แล้วใช้มันซ้ำในทุกหน้า แล้วคุณจะเริ่มเข้าใจว่าทำไมเค้าถึงบอกว่า…

“Once the concept clicks, there’s no going back.”

ลองเลยวันนี้ แล้วเล่าให้เราฟังว่า Preset-Based Design เปลี่ยนชีวิตคุณยังไง 🙂

อ่านรายละเอียดเพิ่มเติมได้ที่ https://www.elegantthemes.com/blog/theme-releases/preset-based-design

อาทิตย์ เอี่ยมปา
ติดตาม
Latest posts by อาทิตย์ เอี่ยมปา (see all)

Related Posts