ปกติเราจะคุ้นชินกับพวก ปลั๊กอิน Page Builder อย่าง WPBakery, Elementor, SiteOrigin etc. ความรู้สึกก็จะประมาณระบบจัดหน้าทั่วไป แต่หากลองสลับโหมดมาใช้ ระบบการจัดวาง Layout แบบ Block ความรู้สึกเปลี่ยนไปอย่างสิ้นเชิง บวกกับได้ลองใช้ ปลั๊กอิน Qubely Blocks ทำให้ไม่อยากกลับไปใช้ปลั๊กอิน Page Builder รูปแบบเก่าเลย
Gutenberg Block หรือ WordPress Block Editor ที่มาตอนติดตั้ง WordPress หรือลงปลั๊กอิน Gutenberg เสริมเข้ามา จะมาพร้อมกับ Block พื้นฐานทั่วไป สามารถตั้งค่าและปรับแต่งได้พอสมควรแล้ว
แต่ปลั๊กอิน Qubely สามารถปรับแต่ง Block ได้ละเอียดกว่าเดิมมาก เช่น Typography สามารถ เลือกฟ้อนต์, น้ำหนัก, ขนาดเป็น PX EM %, Line Height, Letter Spacing, Text Transform, Animation นี่แค่ยกตัวอย่างเบื้องต้นเท่านั้น
ยิ่งตัว Pro ไม่ต้องพูดถึงครับ มีของให้เล่นเพียบ
ถ้ายังไม่เคยลองใช้ WordPress Block Editor (Gutenberg) แนะนำให้ลองไป อ่านบทความ สอนใช้ WordPress Block editor (Gutenberg)
ปลั๊กอิน Qubely Blocks คืออะไร?
Qubely Blocks เป็นปลั๊กอินที่จะมาต่อยอดความสามารถของ WordPress Gutenberg Block และ Page Builder Plugin โดยจะมี Blocks เสริมเข้ามา เท่าที่นับได้ประมาณ 39+ Blocks และทีเด็ดหลักน่าจะเป็น Section 156 แบบ และ Starter Packs 23 แบบ (รวมแบบ Free และ Premium)
Qubely จะมี 3 ส่วนหลัก คือ
- Blocks
- Sections
- Starter Pack
1. Blocks
Qubely จะมี Blocks ให้เราเลือกใช้ประมาณ 39+ Blocks แต่ละตัว สามารถตั้งค่าได้แบบโคตรละเอียด
2. Sections
Sections คือ ชุด Layout สำเร็จรูป เช่น ส่วนของ About Us, Service, Pricing, Call To Action etc…
คลิกที่ปุ่ม Import Layout เพื่อเลือก Sections หรือ Starter Packs
เราสามารถคลิก Import ที่ต้องการ แล้วจะได้ตามแบบตัวอย่างเลย หรือ ถ้ายังไม่มั่นใจ ก็สามารถคลิกที่ “ดูก่อน” เพื่อดูตัวอย่างได้
3. Starter Packs
Starter Packs คือ ชุด Page Layout สำเร็จรูป จะแยกดีไซน์ตามประเภทของเว็บไซต์ หรือ ประเภทธุรกิจ เช่น Spa, Furniture, Agency, Dentist etc… แต่ละ Starter Packs ก็จะมี Layout ของหน้าเพจย่อยไปอีก เช่น Home, About, Service, Contact
6 ฟีเจอร์เด็ดของ Gubely
1. Rows & Columns
การสร้าง Row และ Columns สามารถจิ้มเลือกจำนวนคอลัมน์ตั้งต้น หรือ จะ Import Layout จาก Sections / Starter Packs ก็ได้
แต่เรายังสามารถ เพิ่ม-ลบ จำนวนคอลัมได้ไม่จำกัด แต่ละคอลัมสามารถปรับความกว้าง โดยการ Drag ด้วยเมาส์ หรือ จะกำหนดค่าความกว้างด้านความมือก็ได้
ส่วนการตั้งค่า คือ สามารถตั้งค่าได้ค่อนข้างละเอียดมากๆ *ดูรูปประกอบดีกว่า
2. ปรับแต่งพื้นหลัง
การปรับแต่งพื้นหลัง สามารถกำหนดได้หลายรูปแบบ กำหนดสีธรรมดา(Classic) การไล่สี(Gradient) รูปภาพ วิดีโอ
3. ปรับแต่งข้อความ
อีกหนึ่งฟังก์ชันที่ผมค่อนข้างชอบมาก เราสามารถ เลือกฟ้อนต์, ขนาด, น้ำหนักฟ้อนต์, ระยะห่างข้อความ, พิมพ์ใหญ่-เล็ก ทั้งหมดนี้สามารถกำหนดเป็น PX, EM และ %
4. ปรับแต่ง Responsive
ทุกอย่างที่ถูกสร้างด้วย Qubely Blocks สามารถปรับแต่งเรื่อง Responsive ให้ยืดหยุ่นไปตามหน้าหน้า Desktop, Tablet, Mobile เช่น ในคอนฯ แสดงฟ้อนต์ขนาด 50px แต่มือถือ อยากแสดงให้เล็กลงเป็น 20px สามารถเลือกกำหนดค่าเป็น PX, EM หรือ % แล้วแต่ถนัด
ภาพด้านล่าง เป็นเพียงส่วนหนึ่ง ทุก Block สามารถปรับแต่งลักษณะนี้ได้หมด ให้แสดงผลที่ต่างกันในจอ Desktop, Tablet, Mobile
5. ชุดสี รูปแบบข้อความ เป็นค่ากลาง
ชุดสี ( Color Palette )
กำหนดชุดสีที่เป็นค่าตั้งต้น ไว้ในในการกำหนดชุดสีตั้งต้น เวลาเปลี่ยนสีข้อความ สีพื้นหลัง หรือ ทุกจุดที่มีการตั้งค่าสี มันก็จะดึงค่าสีที่เรากำหนดชุดสี มาแสดงตัวเลือกก่อน เหมือนเป็นจานสีนั้นแหละครับ
รูปขวา คือตัวอย่าง เวลาเรากดแก้ไข Color ของข้อความ มันก็จะขึ้นสีเหมือน จานสีที่เรากำหนดตอนแรกเลย
Typography
กำหนดรูปแบบตัวอักษร เช่น Body, h1, h2, h3, h4, h5, h6, Button สามารถกำหนด Size, Font Family, Weight และ ยังสามารถปรับ Line Height, Letter Spacing, Text Transform
กำหนดขนาดในแต่ละหน้าจอได้ และเลือกรูปแบบเป็น PX, EM, % แล้วแต่ถนัด
6. Animation
การกำหนด Animation ให้กับ Blocks ต่างๆ สามารถกำหนดค่าได้ดังนี้
- Animation : รูปแบบในการเคลื่อนไหว
- Direction : ทิศทางการเคลื่อนไหว
- Repeat : เคลื่อนไหวแบบครั้งเดียว หรือ ลูปซ้ำๆ
- Duration : ความเร็วในการเคลื่อนไหว
- Delay : ความหน่วง
ดาว์นโหลด Qubely Blocks
ลองดาว์นโหลดตัว Free มาลองเล่นดูก่อนครับ
สรุป
เท่าที่ลองใช้ Qubely Blocks เวอร์ชั่นฟรี ได้ Blocks ประมาณ 29 ตัว, Sections 61 และ Starter Packs 3 ซึ่งผมว่าน่าจะเพียงพอแล้วระดับนึง สำหรับการตกแต่งพื้นฐานทั่วไป ทำได้หมดแล้ว
ถ้าพอมีงบ อยากให้ลองตัว Qubely Pro ครับ มันมี Starter Packs เพียบเลย โดยแบ่งธีมตามประเภท Agency, Business, Corporate, Education, Nonprofit, Portfolio, Restaurant ซึ่งแต่ละประเภท ก็จะมีหน้าย่อยๆ อีกหลายหน้า ซึ่งน่าจะช่วยประหยัดเวลาในการทำเว็บไซต์สวยๆ ได้เยอะเลยครับ
สามารถดู ตารางเปรียบเทียบฟีเจอร์ ระหว่างปลั๊กอิน Qubely กับ ตัวอื่นๆ เช่น ATOMIC BLOCKS, Kadence Blocks, Ultimate Addons, Stackable
ผมคงเกริ่น Qubely ได้ประมาณนี้ครับ ที่เหลือคงต้องไปลองใช้เองแล้วละครับ #รับรองมันส์
