Qubely Blocks ปลั๊กอินที่มา Unlocked ความสามารถของ Blocks

ปกติเราจะคุ้นชินกับพวก ปลั๊กอิน 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 ส่วนหลัก คือ

  1. Blocks
  2. Sections
  3. Starter Pack

1. Blocks

Qubely จะมี Blocks ให้เราเลือกใช้ประมาณ 39+ Blocks แต่ละตัว สามารถตั้งค่าได้แบบโคตรละเอียด

Qubely Blocks
Qubely Blocks

2. Sections

Sections คือ ชุด Layout สำเร็จรูป เช่น ส่วนของ About Us, Service, Pricing, Call To Action etc…

คลิกที่ปุ่ม Import Layout เพื่อเลือก Sections หรือ Starter Packs

Import Layout
Import Layout

เราสามารถคลิก Import ที่ต้องการ แล้วจะได้ตามแบบตัวอย่างเลย หรือ ถ้ายังไม่มั่นใจ ก็สามารถคลิกที่ “ดูก่อน” เพื่อดูตัวอย่างได้

Section สำเร็จรูป - Qubely
Section สำเร็จรูป – Qubely

3. Starter Packs

Starter Packs คือ ชุด Page Layout สำเร็จรูป จะแยกดีไซน์ตามประเภทของเว็บไซต์ หรือ ประเภทธุรกิจ เช่น Spa, Furniture, Agency, Dentist etc… แต่ละ Starter Packs ก็จะมี Layout ของหน้าเพจย่อยไปอีก เช่น Home, About, Service, Contact

Starter Packs ชุด Page Layout สำเร็จรูป
Starter Packs – Layout สำเร็จรูป

6 ฟีเจอร์เด็ดของ Gubely

1. Rows & Columns

การสร้าง Row และ Columns สามารถจิ้มเลือกจำนวนคอลัมน์ตั้งต้น หรือ จะ Import Layout จาก Sections / Starter Packs ก็ได้

แต่เรายังสามารถ เพิ่ม-ลบ จำนวนคอลัมได้ไม่จำกัด แต่ละคอลัมสามารถปรับความกว้าง โดยการ Drag ด้วยเมาส์ หรือ จะกำหนดค่าความกว้างด้านความมือก็ได้

การสร้าง Row และ Columns
การสร้าง Row และ Columns

ส่วนการตั้งค่า คือ สามารถตั้งค่าได้ค่อนข้างละเอียดมากๆ *ดูรูปประกอบดีกว่า

การตั้งค่า Rows & Columns
การตั้งค่า Rows & Columns

2. ปรับแต่งพื้นหลัง

การปรับแต่งพื้นหลัง สามารถกำหนดได้หลายรูปแบบ กำหนดสีธรรมดา(Classic) การไล่สี(Gradient) รูปภาพ วิดีโอ

การปรับแต่งพื้นหลัง
การปรับแต่งพื้นหลัง

3. ปรับแต่งข้อความ

อีกหนึ่งฟังก์ชันที่ผมค่อนข้างชอบมาก เราสามารถ เลือกฟ้อนต์, ขนาด, น้ำหนักฟ้อนต์, ระยะห่างข้อความ, พิมพ์ใหญ่-เล็ก ทั้งหมดนี้สามารถกำหนดเป็น PX, EM และ %

ปรับแต่งข้อความ
ปรับแต่งข้อความ

4. ปรับแต่ง Responsive

ทุกอย่างที่ถูกสร้างด้วย Qubely Blocks สามารถปรับแต่งเรื่อง Responsive ให้ยืดหยุ่นไปตามหน้าหน้า Desktop, Tablet, Mobile เช่น ในคอนฯ แสดงฟ้อนต์ขนาด 50px แต่มือถือ อยากแสดงให้เล็กลงเป็น 20px สามารถเลือกกำหนดค่าเป็น PX, EM หรือ % แล้วแต่ถนัด

ภาพด้านล่าง เป็นเพียงส่วนหนึ่ง ทุก Block สามารถปรับแต่งลักษณะนี้ได้หมด ให้แสดงผลที่ต่างกันในจอ Desktop, Tablet, Mobile

ปรับแต่ง Responsive
ปรับแต่ง Responsive

5. ชุดสี รูปแบบข้อความ เป็นค่ากลาง

ชุดสี ( Color Palette )

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

รูปขวา คือตัวอย่าง เวลาเรากดแก้ไข Color ของข้อความ มันก็จะขึ้นสีเหมือน จานสีที่เรากำหนดตอนแรกเลย

ชุดสี - Qubely Global Settings
ชุดสี – Qubely Global Settings

Typography

กำหนดรูปแบบตัวอักษร เช่น Body, h1, h2, h3, h4, h5, h6, Button สามารถกำหนด Size, Font Family, Weight และ ยังสามารถปรับ Line Height, Letter Spacing, Text Transform

กำหนดขนาดในแต่ละหน้าจอได้ และเลือกรูปแบบเป็น PX, EM, % แล้วแต่ถนัด

Typography
Typography

6. Animation

การกำหนด Animation ให้กับ Blocks ต่างๆ สามารถกำหนดค่าได้ดังนี้

  • Animation : รูปแบบในการเคลื่อนไหว
  • Direction : ทิศทางการเคลื่อนไหว
  • Repeat : เคลื่อนไหวแบบครั้งเดียว หรือ ลูปซ้ำๆ
  • Duration : ความเร็วในการเคลื่อนไหว
  • Delay : ความหน่วง
Animation
Animation

ดาว์นโหลด 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 ได้ประมาณนี้ครับ ที่เหลือคงต้องไปลองใช้เองแล้วละครับ #รับรองมันส์