4 Page Builder ยอดนิยมของ WordPress

หายไปนานสำหรับบทความ วันนี้กลับมาใหม่สำหรับบทความ 5 Page Builder ของ WordPress นะครับ ก่อนที่เราจะเข้าสู่บทความ ใครลืมกันไปแล้วบ้างว่า WordPress คืออะไร ใช้งานอย่างไร ก็ไปอ่านบทความย้อนหลังแล้วมาเริ่มกันเลยครับ

Page Builder คืออะไร

Page Builder คือเครื่องมือหรือโปรแกรมที่ช่วยเราในการสร้างหน้าเว็บไซต์ด้วยวิธีการอันแสนง่าย มีทั้งแบบเป็นปลั๊กอินและมากับธีม วิธีการใช้งาน Page Builder นี้ก็เพียงแค่ลากๆ สิ่งที่เราต้องการไปวางไว้ในตำแหน่งที่ต้องการแล้วทำการตั้งค่านิดหน่อย ทำการบันทึกก็เสร็จแล้ว จึงเป็นที่นิยมจน WordPress ต้องพัฒนาเจ้า Gutenberg ที่เป็นของตัวเองมาแทนกับการใช้งานของ Classic Editor

Page Builder ส่วนใหญ่จะใช้กับหน้า Page ของ WordPress ทั้งในส่วนของหน้าแรกและหน้าอื่นๆ เช่น หน้าเกี่ยวกับเรา (About Us) หน้าติดต่อเรา (Contact Us) เป็นต้น ปัจจุบันผู้พัฒนาเครื่องมือนี้มีหลายรายทั้งเก่าและใหม่ ซึ่งวันนี้เราจะมาแนะนำ Page Builder ที่คนชอบใช้งานกันบ่อยๆ กันซักเล็กน้อยนะครับ โดยมีรายละเอียดดังนี้

Elementor Page Builder

elementor
Elementor

สำหรับ Elementor นั้นเป็น Page Builder ที่ได้รับความนิยมมากในปัจจุบัน เนื่องจากสามารถทำการปรับแต่งได้ง่ายและมีความรวดเร็วในการปรับแต่ง เราสามารถทำการติดตั้งปลั๊กอิน Elementor ได้ด้วยการดาวน์โหลดจากหน้าปลั๊กอินของ WordPress ซึ่งปลั๊กอินนี้จะมีแบบฟรีและเสียเงิน (Pro version) ราคาต่อเครื่องเดียวอยู่ที่ 49US โดยเวอร์ชั่นเสียเงินนี้เราสามารถที่จะเพิ่มขีดความสามารถของ Elementor ได้มากขึ้น เนื่องจากมี Elements ที่ช่วยในการทำงานมากขึ้นครับ

Elementor สามารถทำการปรับแต่งหน้าเว็บได้ทั้งหน้ารวมไปถึงในส่วนของหัวข้องหน้า (Header) และส่วนท้าย (Footer) ของหน้าโดยวิธีการใช้ปลั๊กอินเสริมที่ชื่อ Elementor – Header, Footer & Blocks ครับ ในหน้าการปรับแต่งนั้น เราสามารถทำการปรับแต่งได้ในลักษณะเสมือนจริง โดยมีวิธีการปรับแต่งเพียงแค่นำองค์ประกอบที่ต้องการในหน้านั้นไปวาง ณ จุดที่เราต้องการ เหมือนกับ Page Builder ทั่วไป และสำหรับนักพัฒนาสามารถทำการเขียนเพิ่มองค์ประกอบที่ต้องการใช้งานได้เองโดยอ้างอิงจากเอกสารที่ Elementor ให้ครับ

WPBakery Page Builder

WPBakery Page Builder
WPBakery Page Builder

WPBakery Page Builder เป็นปลั๊กอินที่มักจะมาพร้อมกับธีมหลายๆ ธีม โดยให้เราสามารถใช้เทมเพลตของธีมนั้นมาใช้งานกับ Page Builder ได้ หากเราต้องการเทมเพลตของ Page Builder เราก็จะต้องทำการซื้อไลเซ่นส์เพิ่มครับ ปลั๊กอินนี้เราไม่มีให้ดาวน์โหลดผ่านเว็บไซต์ WordPress นะครับ จะมีแต่แบบขายเท่านั้น ราคาจะอยู่ที่ 45US สำหรับเครื่องเดียวครับ

WPBakery Page Builder นั้นมีจุดเด่นตรงที่มีส่วนประกอบหรือองค์ประกอบ (Elements) จำนวนมากที่สามารถนำมาประกอบหน้าเว็บได้สวยงาม มีผู้พัฒนาปลั๊กอินเสริมในกรณีที่ Page Builder ไม่มี และมีเอกสารในหน้าเว็บไซต์สำหรับนักพัฒนาเว็บแนะนำวิธีการสร้างองค์ประกอบเฉพาะที่เราต้องการ ทำให้เราสามารถสร้างองค์ประกอบนั้นขึ้นมาเองได้ เช่น หากเราต้องการสร้างกล่องคำนวณเงินผ่อนชำระรถยนต์ ซึ่งใน Page Builder ไม่มี เราก็สามารถเขียนขึ้นมาได้เองเป็นต้น

สอน WordPress หรือ WooCommerce
สอน WordPress หรือ WooCommerce

WPBakery Page Builder นี้สามารถทำการแก้ไขหน้าเว็บได้ 2 แบบด้วยกัน คือ แบบที่เป็นกล่องๆ เหมือนกับ SiteOrigin และแบบเสมือนจริง สามารถทำการตั้งค่าปรับแต่งได้ง่าย แสดงผลทั้งในรูปของคอมพิวเตอร์ แท็บเล็ต และมือถือ หากจะใช้งานก็สามารถที่จะเรียนรู้การใช้งานได้ง่ายครับ

เมื่อพูดถึงข้อดีไปแล้ว คราวนี้มาที่ข้อด้อยของ WP Bakery Page Builder กันบ้าง ข้อด้อยนั้นก็คือ เครื่องมือนี้ เมื่อทำการติดตั้งและใช้งานไปสักพักเมื่อทำการปรับแต่งหน้าตาเว็บไซต์จะมีความอืด ทำให้เว็บช้า รอนาน ซึ่งเรามักจะได้ยินผู้พัฒนาเว็บไซต์พูดถึงข้อเสียนี้บ่อยๆ ครับ อย่างไรก็ตามหากมีการปรับแต่งความเร็วให้เหมาะสมก็อาจจะลดปัญหาเรื่องนี้ไปได้บ้างครับ (อ่านบทความ เพิ่มความเร็ว WordPress

Page Builder by SiteOrgin

siteorigin
Siteorigin

SiteOrigin เป็น Page Builder อีกตัวหนึ่งที่เคยเป็นที่นิยมใช้งานกันมากและเป็น Page Builder ยุคแรกๆ ข้อดีของมันก็คือ เราสามารถใช้งานได้ฟรี สามารถดาวน์โหลดจากเว็บของ WordPress มาใช้งานได้ แต่การใช้งานของ SiteOrigin นั้นในหน้าหลังบ้านจะแสดงผลในลักษณะเป็นกล่องๆ หากเราต้องการดูหน้าเว็บที่เราทำการปรับเปลี่ยน จำเป็นที่จะต้องทำการดูจากหน้าเว็บจริงเท่านั้นครับ

สำหรับองค์ประกอบที่เราจะนำมาใช้ในหน้าเว็บนั้น จะมีไม่มากเหมือนกับ 2 รายการแรก ในกรณีที่เราต้องการสร้างองค์ประกอบขึ้นมาใช้เองก็จะใช้เทคนิค Shortcode โดยนำไปใส่ในช่อง Text Editor ดังนั้นหากผู้พัฒนาเคยเขียน Shortcode สำหรับใช้งาน WordPress มาก่อนก็จะทำให้เราพัฒนาได้เร็วขึ้นครับ

ปัจจุบันสามารถใช้งานแบบ Live Editor ได้แล้วนะครับ มีความสวยงามไม่แพ้ Page Builder ตัวอื่นๆ เลย สามารถเข้าไปอ่านเกี่ยวกับบทความของ Page Builder by SiteOrigin ได้ครับ

Gutenberg

สำหรับ Page Builder ตัวถัดมาที่จะแนะนำก็คือ Gutenberg ซึ่งเป็น Page Builder ที่มาพร้อมกับ WordPress ตั้งแต่เราทำการติดตั้งโปรแกรม Gutenberg นั้นพึ่งเริ่มพัฒนาและให้ใช้งานในปี 2019 นี้เอง ทำให้องค์ประกอบ (Element) ที่จะนำมาประกอบหน้าเว็บนั้นยังน้อยอยู่ ทำให้การสร้างหน้าเว็บอาจจะยังไม่ถูกเราเหมือนกับ Page Builder อื่นๆ ข้อดีของ Gutenberg ก็คือ ทำให้หน้าเว็บไซต์ของเราโหลดได้เร็วมาก เพราะมีความเบา ไฟล์มีจำนวนน้อย หากเราต้องการใช้งาน Gutenberg แทน Page Builder อื่นๆ เราจำเป็นต้องเพิ่มขีดความสามารถของมันครับ โดยทำการติดตั้งปลั๊กอินเสริมที่ถูกพัฒนามาจากนักพัฒนาอื่นๆ ได้ เช่น Advance Gutenberg, Atomic Blocks, Editor Blocks for Gutenberg, Stackable, Ultimate Addons for Gutenberg และ Kadence Block เป็นต้น (สำหรับคนที่สนใจใช้งาน Gutenberg สามารถดูวิธีการใช้งาน Gutenberg ได้ตามลิงก์ครับ)

สรุป

Page Builder ทั้ง 4 อย่างนี้ ผมได้เคยใช้งานมาแล้วทุกแบบนะครับ มีข้อดีและข้อเสียแตกต่างกันไป แต่ที่โดดเด่นและดีมากสำหรับคนที่เริ่มพัฒนาใหม่ก็จะขอแนะนำ Elementor Page Builder ครับ เพราะช่วยเราพัฒนาเว็บไซต์ได้เร็วและทำให้เว็บของเราไม่ช้าอีกด้วยครับ

สอน WordPress หรือ WooCommerce
สอน WordPress หรือ WooCommerce