Qubely ปลั๊กอิน Gutenberg Blocks จากค่าย Themeum

Qubely เป็นปลั๊กอินที่ช่วยเพิ่ม Block ให้กับ WordPress Block Editor หรือที่เรียกกันว่า Gutenberg ทั้ง Block ที่พร้อมใช้งานและ Starter Packs ซึ่งเป็นหน้า Template ที่พร้อมใช้งาน ทำให้เริ่มต้นสร้างเว็บไซต์ได้อย่างรวดเร็ว โดยใน Qubely เวอร์ชั่นฟรีนั้น Starter Packs จะมีมาให้ 3 Template มี Gutenberg Blocks มาให้ 27 Blocks และมีส่วน Sections พร้อมใช้งานมาให้ 61 Section

ส่วนใน Qubely เวอร์ชั่น Pro นั้น Starter Packs จะมีมาให้ 36 Template มี Gutenberg Blocks มาให้ 48 Blocks และมีส่วน Sections พร้อมใช้งานมาให้ 156 Section สำหรับ Qubely นั้นเป็นปลั๊กอินจากผู้พัฒนา Themeum ซึ่งก็ยังมีปลั๊กอินอื่นหลายตัวที่พัฒนาโดยค่ายนี้ ที่คงพอจะคุ้นๆชื่อกันก็คงจะเป็น Tutor LMS ปลั๊กอินสำหรับสร้างคอร์สออนไลน์ และตัวอื่นๆ เช่น WP Crowdfunding, WP Page Builder และ WP Mega Menu

เปรียบเทียบคุณสมบัติของเวอร์ชั่น Free และ Pro

คุณสมบัติเด่น

• ส่วน Section พร้อมใช้งาน
• Layout Packs ที่ทันสมัย
• Row และ Column ที่ปรับแต่งได้เยอะ
• ใส่พื้นหลังแบบวิดีโอและ Blend Mode ที่ Row ได้
• ปรับขนาด Column ได้ด้วยการคลิกลาก
• มี Shape Divider
• ปรับแต่ง Responsive ให้แสดงผลทุกขนาดหน้าจอ
• ใช้ฟอนต์ของระบบและจาก Google Fonts ได้
• ปรับแต่งสีพื้นหลังและแบบ Gradient ได้
• มีฟังกชั่น Animation และ Box Shadow
• ใช้ Font Awesome 5 และ Line icons ได้
• ปรับแต่ง CSS เองได้

Qubely Gutenberg Blocks เวอร์ชั่นฟรี

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

Qubely Gutenberg Blocks เวอร์ชั่น Pro จะมีเพิ่มขึ้นมาอีก 14 Blocks

• Form Builder
• Image Gallery
• Image Carousel
• Post Carousel
• Advanced Post Grid
• Pricing List
• Team Carousel
• Testimonial Carousel
• Media Card
• Pie Progress
• Countdown
• Table Builder
• Woo Products
• Woo Carousel

คุณสมบัติของ Qubely Gutenberg Blocks บางส่วน

• Row – ใช้สร้าง Row และ Columns ปรับขนาดต่างๆได้ด้วยการลากเมาส์
• Button – ออกแบบปุ่มกดแบบ Flat, Gradient หรือแบบ Line Button พร้อมใส่ไอคอนและปรับแต่งค่าอื่นๆได้
• Testimonial – สร้างกล่องที่ใช้ใส่ข้อความ ไอคอน ชื่อ เพื่อใช้ในการแสดงรีวิวจากลูกค้า
• Icon – เพิ่มไอคอนจาก Font Awesome และ Qubely Line Icon
• Google Map – แสดงแผนที่ Google Map ในหน้าเว็บไซต์ สามารถปรับแต่งขนาดของแผนที่และปรับระดับการซูมในแผนที่ได้ตั้งแต่ระดับ 1 ถึง 20
• Divider – ตัวแบ่งหน้า สำหรับแยกเนื้อหาในส่วนต่างๆออกจากการในแบบ row มี Divider พร้อมใช้งาน 28 แบบ
• Advanced Text – สำหรับเพิ่มข้อความ เปลี่ยนแบบอักษร และปรับแต่งกล่องที่ใช้แสดงข้อความ ใส่เน้นขอบและเงาของกล่องได้
• Counter – สร้างตัวเลข/ตัวนับแบบเคลื่อนไหวบนเว็บไซต์ของคุณเพื่อแสดงเหตุการณ์สำคัญของคุณในลักษณะที่น่าดึงดูด
• Tabs – กล่่องที่เก็บเนื้อหาต่างๆ ใช้การคลิกที่หัวข้อแบบ Tab เพื่อเลือกเนื้อหาในหัวข้ออื่นๆ
• Accordion – แสดงเนื้อหาแบบเป็นกล่องที่ซ่อนและแสดงเนื้อหาได้ด้วยการคลิกที่หัวข้อ เหมาะสำหรับใช้สร้างเนื้อหาประเภทอ FAQ
• Video Popup – ใช้สร้างป๊อปอัปวิดีโอ ที่ปรับแต่งและใส่เอฟเฟกต์ต่างๆเช่น Overlay, Box Shadow และ Animation ได้
• Heading – สำหรับสร้างหัวข้อ Tag H2-H6 เปลี่ยนแบบอักษร สีและขนาดได้
• Progress Bar – นำเสนอทักษะ ประสบการณ์ หรือความคืบหน้าของโครงการที่กำลังดำเนินอยู่โดยใช้ Block Progress Bar
• Social Icons – แสดงช่องทางโซเชียลมีเดียของคุณ โดยเลือกแสดงจาก Label, Icon หรือแสดงทั้งสองอย่าง
• Button Group – สร้างและออกแบบปุ่มกดแบบหลายปุ่มพร้อมกัน
• Info Box – วางข้อมูลที่น่าสนใจด้วยกล่องข้อมูล โดยมีรูปแบบให้เลือก 3 แบบ และปรับแต่งค่าต่างๆได้เอง
• Advanced List – สร้าง List รายการได้สองรูปแบบ Classic หรือ Fill โดยเลือกจำนวน Column ได้
• Contact Form – สร้างแบบฟอร์มติดต่อ ปรับแต่งสไตล์ให้เค้ากับธีมของเว็บไซต์ได้เงอ และเปิดใช้งาน Captcha ได้
• Icon List – สร้าง List รายการไอคอนและปรับแต่งโดยใช้ Qubely Icon List block เลือกไอคอนและแก้ไขปรับแต่งสี ระยะห่าง และเส้นขอบได้ตามที่ต้องการ
• Pricing – สร้างกล่องแสดงราคาและรายละเอียด มีให้เลือก 5 รูปแบบ เพื่อแสดงคุณลักษณะ, ป้าย, และปุ่ม
• Block Wrapper – จัดกลุ่ม Blocks ด้วย Block Wrapper ตั้งค่าพื้นหลังใส่สีแบบปกติหรือไล่ระดับ
• Team – แสดงโปรไฟล์ของทีมงาน มี 3 รูปแบบให้เลือก
• Image – ใช้สำหรับแสดงรูปภาพ จัดรูปแบบรูปภาพโดยกำหนดความทึบ การจัดแนว รัศมีเส้นขอบ กล่องเงา และอื่นๆ อีกมากมาย
• Timeline – แสดงไทม์ไลน์ของกิจกรรมต่างๆ หรือประวัติความเป็นมาขององค์กร ประวัติศาสตร์ต่างๆ
• Post Grid – ดึง Post มาแสดงแบบ Grid กำหนดหมายเลขโพสต์ จัดรูปแบบรูปภาพ ปรับแต่งการพิมพ์ ควบคุมระยะห่าง กำหนดข้อความที่ตัดตอนมาของโพสต์ และอื่นๆ อีกมากมาย
• Pie Progress – แสดงข้อมูลที่ซํบซ้อนในรปแบบกราฟแท่งแบบวงกลม

การติดตั้งปลั๊กอิน Qubely – Advanced Gutenberg Blocks

ที่หลังบ้าน WordPress ไปที่ Plugins -> Add New Plugin

ที่หน้า Add Plugins ให้ใส่คำว่า Qubely ที่ช่อง Keyword

Install และ Activate ให้เรียบร้อย

อธิบายเมนูของปลั๊กอิน Qubely

เมื่อ Install และ Activate เรียบร้อยแล้ว จะเข้าไปตั้งค่าต่างๆของ Qubely ได้จาก -> Qubely

โดยจะมี Menu อยู่ 2 เมนู

Settings

เป็นหน้าที่ใช้ตั้งค่าทั่วไป จะแบ่งออกเป็น 2 เมนู

General – ตั้งค่าเกี่ยวกับบริการอื่นๆที่ใช้ร่วมกับปลั๊กอิน Qubely เช่น Google Map Api, Google ReCaptcha, MailChimp
Advanced – สำหรับตั้งค่า CSS Location, Load Font Awesome CSS, Load Google Fonts

Getting Started

แสดงข้อมูลเกี่ยวกับเวอร์ชั่นของ Qubely มีลิงก์ไปหน้า Documention, ลิงก์ไปหน้ารีวิวปลั๊กอิน และลิงค์ติดต่อ Support

ตัวอย่างการใช้งานปลั๊กอิน Qubely

เข้าไปที่หน้าสร้างและแก้ไข Post หรือ Page ด้วย WordPress Block Editor แล้วคลิกที่ Tab Menu Blocks ที่อยู่ทางด้านซ้าย โดย Block ของ Qubely สีของไอคอนจะเป็น Gradent ไล่จากฟ้าไปม่วง และข้อความสีดำ

การใช้งานก็คลิก Block ที่ต้องการลงมาที่ส่ง Content Canvas และปรับแต่งค่าต่างเพื่อประกอบกันออกมาเป็นหน้า Post หรือ Page

ที่มุมบนซ้ายของหน้าจะมีปุ่ม Import Layout

เมื่อคลิกจะแสดง Popup ที่มี Starter Packs, Sections ที่ใช้งานได้

สรุป

สำหรับ Qubely ก็จัดว่าเป็นปลั๊กอิน Gutenberg Block ที่ให้ Block มาค่อนข้างครอบคลุม เพราะนอกจาก Block แล้ว ยังมี Starter Packs หรือก็คือหน้า Template นั่นเอง แต่ในเวอร์ชั่นฟรีมีมาให้น้อยไปสักนิด แค่ 3 Template และยังมีส่วนที่เรียกว่า Sections หรือก็คือรูปแบบของ Block แบบต่างๆ ที่พร้อมใช้งาน โดยในเวอร์ชั่นฟรีก็มีมาให้ค่อนข้างเยอะ 61 รูปแบบ