Articles Category

Qubely | Wordpress Gutenberg block plugin & Page Builder

ทำความรู้จัก Qubely กันซักหน่อย

Qubely คือ Plugin ที่เพิ่มความสามารถให้ Gutenberg ที่เป็นตัว Editor ที่ผสมกับ Page Builder ของ Wordpress ที่ถูกติดตั้งมาตั้งแต่ตัว WordPress 5.0 Beta ที่ทำให้เราสามารถสร้างคอนเทนต์บนเว็บโดยที่เราไม่ต้องอาศัยความรู้ในการ Coding เลย แต่ตัว Gutenberg เองเนี่ย มันก็มีความสามารถมาให้ประมาณนึง ถ้าเทียบกับคนที่เคยใช้ Page Builder เจ้าอื่นๆแล้ว อย่างเช่น WPBakery, หรือ Elementor ก็จะพอทราบว่า มันทำได้ไม่เท่าเพื่อนๆเค้าซักเท่าไหร่ เจ้าตัว Qubely นี่แหละ ที่จะมาเพิ่มความสามารถให้กับตัว Gutenberg ให้มันสามารถจัดการอะไรได้มากขึ้น และที่สำคัญ ความเร็วของมันไม่ธรรมดาเลยทีเดียว

ความสามารถของ Qubely ทำให้คนที่เคยปิด Gutenberg ไปไวๆหลังจากสร้างเว็บ Wordpress ใหม่แทบจะทุกครั้ง หันกลับมาอยากใช้มันดูอีกซักครั้ง ด้วยความสามารถของมันโดยเฉพาะการจัด layout (Features ทั้งหมดของ Qubely สามารถเข้าไปดูได้ที่ https://www.themeum.com/product/qubely/

 
ต้องแจ้งเบื้องต้นก่อนว่าด้วยความเป็น Designer ที่ไม่ได้มีความรู้ของการ Coding มากมาย สิ่งที่คาดหวังจากตัวช่วยที่จะทำให้สามารถจัดการหน้าตาของ website ได้เอง แบบที่สามารถทำได้อย่างจริงจัง ก็เลยไปจบอยู่ที่ WPBakery มาซักระยะ เนื่องจากมันมี options และ Elements มากมายที่ทำให้เราสามารถขึ้นโครง website ได้อย่างที่เราออกแบบเอาไว้ จนหลังๆก็เริ่มเปลี่ยนรูปแบบการทำงานมาเป็นออกแบบบนตัว site เลย แทนที่จะ Design บน Photoshop ก่อน เพราะเราเริ่มชินและเข้าใจกับรูปแบบและข้อจำกัดต่างๆของมัน แต่สิ่งที่เป็นปัญหาและเห็นได้ค่อนข้างชัดเจนคือ มันข้า! ยิ่งถ้าในหน้า page เรามีการออกแบบโครงสร้างไว้อลังการเท่าไหร่ หลังบ้านในการ edit ส่วนต่างๆยิ่งช้าเพิ่มขึ้นเท่านั้น แต่ตัว Qubely ถ้าให้เปรียบเทียบส่วนตัว เหมือนยก Elementor ไปบวกกับ Gutenberg โดยที่การจัดการต่างๆยังอยู่บนหน้า Editor หลักของ wordpress เอง

Feature ที่น่าสนใจของ Qubely 

Sections - Qubely ได้สร้าง layout ของ section ต่างๆไว้ให้สามารถเลือกใช้ได้เลย (pre-made) โดยแบ่งออกเป็นหมวดหมู่ประเภทต่างๆ (Contact, Project, Feature, Team, Call to action, Pricing, Footer, Service, Testimonials Header, Content) เรียกง่ายๆว่าเราสามารถเลือกประกอบร่างส่วนต่างๆออกมาได้เลย

 
Starter Packs - นอกจาก Qubely จะสร้าง Sections Pre-Made ไว้ให้เราเลือกใช้แล้ว Starter Packs นี่จัดมาให้เต็มและง่ายกว่าเดิม คือเรียกง่ายๆว่าสร้างมาให้ทั้งหน้าเลย โดยแยกหมวดหมู่ไว้เช่นกัน (Education, Agency, Business, Restaurant, Nonprofit, Corporate) โดยที่เราสามารถเลือก layout ที่ตรงกับที่เราต้องการมาใช้งานได้เลย หรือจะแก้ไขเพิ่มเติมในแต่ละส่วนก็สามารถทำได้ เพราะมี option ให้สามารถ config แยกได้แทบจะทุกจุด



นอกเหนือจาก Pre-made ต่างๆที่เค้าเตรียมไว้ให้แล้ว ความสามารถอีกอย่างของ Qubely ที่มองข้ามไม่ได้ก็คือ Block ที่เสริมความสามารถของ Gutenberg

Qubely Block

ตัว Qubely เองเรียกตัวเองว่าเป็น Visual Gutenberg Block Toolkit แปลว่าตัวมันเข้ามาเสริม Gutenberg ให้มีความสามารถมากขึ้น โดยสิ่งที่ Qubely เสริมมาให้ จะมี

  • Row
  • Post Carousel
  • Button
  • Advanced Text
  • Icon
  • Google Map
  • Divider
  • Info Box
  • Image
  • Testimonial
  • Accordion
  • Heading
  • Video Popup
  • Progress Bar
  • Counter
  • Tabs
  • Social Icons
  • Contact Form
  • Button Group
  • Advanced List
  • Icon List
  • Block Wrapper
  • Team
  • Pricing
  • Timeline
  • Form Builder
  • Post Grid
  • Testimonial Carousel
  • Team Carousel
  • Price List
  • Image Carousel
  • Gallery
  • Pie Progress
  • Media Card

จาก List ข้างต้นจะเห็นว่าครบมาก! หลายๆอย่างไม่มีในเจ้าอื่นๆด้วยซ้ำไป แทบจะรองรับครบทุกอย่างที่จำเป็นที่จะต้องใช้งาน ที่เหลือก็อยู่ที่จินตนาการเท่านั้นว่าจะให้มันออกมาแบบไหน ทำให้ชีวิตง่ายขึ้นเยอะ ไม่จำเป็นต้องลง Plugin แยกอีกมากมายที่จะมาจัดการแยกส่วนต่างๆ

ในเรื่องของการ Config ส่วนต่างๆของ Qubely เองก็ทำออกมาได้ค่อนข้างครบถ้วนเลยทีเดียว ตัวอย่างเช่นการจัดการ Row นั้น ไม่ว่าจะเป็นการควบคุมความสูง, ความกว้าง, Padding, Margin, Gutter Size เรียกว่าสามารถคุมได้แทบทุกอย่าง

ความรู้สึกหลังทดลองใช้งาน

หลังจากได้ลองใช้งานดูจริงๆแล้วพบว่า Qubely เหมาะกับ Designer ที่ไม่มีความรู้ด้านการ Coding หรือแม้แต่คนทำเว็บทั่วไป ก็สามารถขึ้น Layout ได้อย่างใจโดยที่ใช้แค่ตัวฟรีก็เพียงพอ
ถึงแม้ว่า Qubely จะอัด Features มาให้เต็มขนาดนี้ แต่เหมือนก็ยังมีบางส่วนเล็กๆ ส่วนตัวยังรู้สึกว่ามีบางอย่างที่น่าจะพัฒนาเพิ่มได้อีก หรือมันอาจจะออกมาหลังจากนี้ก็ไม่แน่ เพราะเท่าที่เห็นยังมีอีกหลาย feature ที่รอจะออกมาอย่างต่อเนื่อง

Image Crop Size - การดึงรูปมาวางทำได้ง่ายมาก แต่เท่าที่เห็นจะยังไม่มีการเลือกขนาด Ratio ของรูปที่ดึงมาวาง ทำให้เวลาเราวางรูปต่อกันสองรูป ถ้าต้องการให้แสดงเท่ากัน อาจจะต้องทำการ Crop ให้ได้ Ratio ก่อนที่จะลากเข้ามาวาง ซึ่ง Builder บางตัวสามารถเหลือ Ratio ของภาพที่ดึงลงมาได้เลย ทำให้ลดเวลาในการจัดการรูปไปได้ส่วนนึง ซึ่งอันนี้ยังไม่เห็นใน Qubely

Post Grid Offset - เวลาดึง posts ออกมาแสดง Qubely มี Option ในการเลือก layout ได้หลากหลาย จัดการ Query ได้ว่าจะให้ดึงมาจาก Category ไหน แต่ยังไม่มีการเลือก post offset ว่าจะให้ Skip post กี่อันก่อนที่จะ query ออกมา ซึ่งมีประโยชน์พอสมควรในการวาง Layout แต่ไม่ใช่เรื่องใหญ่ มองข้ามได้

Editor View - Qubely อยู่บนพื้นฐานของ WYSIWYG (What you see is what you get) ก็จริง แต่ว่า Container ของ Editor มันค่อนข้างแคบ ทำให้ส่ิงที่ออกแบบไว้มันก็แสดงผลไม่เต็มที่อย่างที่มันเป็น จำเป็นต้อง Preview ออกมาเต็มๆอยู่ดี ถ้าสามารถ edit หลังบ้านได้อย่างที่หน้าบ้านแสดงเลย ก็น่าจะทำให้ experience ในการใช้งานสนุกขึ้นกว่านี้ได้อีก

สุดท้ายถ้าใครยังหา Editor ที่เป็น Page Builder ดีๆซักตัว อยากให้ลอง Qubely ดูซักครั้ง เผื่อจะชอบ ด้วยความเร็วของมันที่เทียบกับการใช้งาน Buidler ตัวอื่นๆแล้ว เรียกได้ว่าทำออกมาได้ดีเลยแหละ ไม่เจอความน่ารำคาญของการหน่วงแบบตอนที่ใช้ WPBakery หนักๆ ใช้งานง่าย ปิดงานได้เร็ว ถือว่าเป็นตัวเลือกที่ดีตัวนึงที่อยากแนะนำครับ