Skip to content

ปัจจุบัน Page Builder หรือ Add-ons เสริมสำหรับ Block Editor หลักใน WordPress เริ่มมีมากขึ้นเรื่อยๆ และได้รับความนิยมมากขึ้น ล่าสุด GutenKit ก็เป็นอีกหนึ่งน้องใหม่ ที่มีเครื่องมือช่วยสร้างเว็บสำหรับ Gutenberg จะแจ๋วแหววแค่ไหน ตามไปอ่านกันได้

แนะนำ GutenKit

ปลั๊กอิน “GutenKit” เป็นปลั๊กอินของทีม Wpmet หนึ่งในผู้สร้าง Addon ElementsKit ชื่อดังสำหรับ Elementor ตอนนี้ได้กระโดดลงมาแจมในตลาด Gutenberg แล้วเช่นกัน GutenKit เป็นปลั๊กอินแนว Page Builder ที่ช่วยให้เราไม่ต้องดิ้นรนกับ Page Builder ที่ซับซ้อนหรือความเชี่ยวชาญด้านการเขียนโค้ดอีกต่อไป เพราะ GutenKit สำหรับ Gutenberg เป็นอีกหนึ่งโซลูชั่นที่น่าสนใจสำหรับประสบการณ์การสร้างหน้าเว็บที่ง่ายดายภายใน Block editor ของ WordPress

การใช้ GutenKit ออกแบบเว็บไซต์ WordPress ใน Gutenberg ใช้อินเทอร์เฟซแบบลากและวางดั้งเดิมของ Gutenberg, มี บล็อก WordPress 50 กว่ารายการ, โมดูลอเนกประสงค์มากกว่า 14 ชนิด, และเทมเพลตมากกว่า 500 แบบ เราสามารถสร้างเนื้อหาเว็บระดับมืออาชีพและตอบสนองได้ภายในไม่กี่นาที ว้าวววว

เพราะฉะนั้นใครที่อยากสัมผัสอนาคตของการออกแบบเว็บไซต์ด้วย GutenKit สำหรับ Gutenberg Blocks คงต้องลองครับ ว่าจะไวและง่ายตามที่กล่าวอ้างหรือไม่ ตัวปลั๊กอินเพิ่งจะเปิดตัวเมื่อเดือนมีนาคม 2024 ที่ผ่านมา เรียกว่าน้องใหม่เลยก็ว่าได้ แต่ฝีมือการพัฒนาปลั๊กอินไม่ได้ใหม่นะจ๊ะ

ฟีเจอร์เด็ด

+ โหลดเนื้อหาเร็วมากสำหรับไอคอน ฟอนต์ และเทมเพลต

+ ทำงานได้อย่างสมบูรณ์แบบ Full Site Editor

+ อินเทอร์เฟซดั้งเดิมสำหรับ WordPress block

+ เครื่องมือสร้างเมนู Nav สำหรับ Gutenberg

+ รองรับ API เวอร์ชัน 3 สำหรับ Block

+ ไลบรารีไอคอนพร้อมไอคอนแบบอักษร SVG แบบอินไลน์มากกว่า 900 รายการ

+ ความกว้างของคอนเทนเนอร์สามารถลากได้ใน Block editor

+ สามารถคัดลอกวางสไตล์ข้าม Block

+ สามารถกำหนดค่า Global Color

+ Animation Effects สำหรับเนื้อหา

+ สิ่งอำนวยความสะดวกในการปรับแต่งสไตล์

+ ฟังก์ชั่นลากและวางที่ใช้งานง่าย

+ การออกแบบที่รองรับหน้าจอมือถือ เดสก์ท็อป และแท็บ

+ WordPress Block ที่รองรับตัวแก้ไขบล็อกมากกว่า 50 รายการ

+ เทมเพลตและ Patterns สำเร็จรูปสำหรับบล็อกมากกว่า 500 รายการ

เป็นมิตรกับ SEO

สร้างเว็บไซต์ที่โหลดเร็วขึ้นและเป็นมิตรกับ SEO ใน Gutenberg Block Editor

+ เนื้อหาโหลดเร็ว

+ การให้คะแนนประสิทธิภาพที่เหมาะสมที่สุด

+ คะแนน SEO ที่สูงขึ้น

+ รองรับ Block API เวอร์ชัน 3

บล็อกของ GutenKit

+ Container สร้างเค้าโครงเนื้อหา

+ Advanced Tab แสดงเนื้อหาด้วย Tab

+ Nav Menu ลดความซับซ้อนในการนำทางไซต์ WordPress ด้วยเมนูที่มีสไตล์และใช้งานง่าย

+ Advanced Accordion สร้างส่วนของเนื้อหาที่ยุบได้ใน Page และ Post

+ Heading เพิ่มส่วนหัวของข้อความที่ปรับแต่งได้

+ Icon Box แทรกไอคอนพร้อมตัวเลือกข้อความและสไตล์

+ Image Box เพิ่มรูปภาพเข้ากับข้อความและองค์ประกอบการออกแบบ

+ Dual Button แทรกปุ่มที่จับคู่ด้วยสไตล์ที่ปรับแต่งได้

+ Image Accordion สร้าง Section ภาพที่ขยายได้เพื่อการจัดระเบียบที่ดีขึ้น

+ FAQ ออกแบบส่วนคำถามที่พบบ่อย

+ Drop Cap จัดรูปแบบตัวอักษรเริ่มต้นขนาดใหญ่ในย่อหน้า

+ Social Icons รวมไอคอนและลิงก์โซเชียลมีเดีย

+ Button แทรกปุ่มที่ปรับแต่งได้

+ Blog Posts แสดงโพสต์ในบล็อก

+ Social Share เปิดใช้งานการแชร์เนื้อหาบนโซเชียลมีเดียได้อย่างง่ายดาย

+ Back to Top เพิ่มปุ่ม “กลับไปด้านบน”

+ Business Hours แสดงเวลาทำการบนเพจ

+ Progress Bar แสดงความคืบหน้า

+ Team แนะนำสมาชิกในทีมพร้อมโปรไฟล์และรูปภาพ

+ Countdown Timer เพิ่มการนับถอยหลังสำหรับกิจกรรมหรือโปรโมชั่น

+ Pricing Table แสดงตัวเลือกผลิตภัณฑ์พร้อมราคา

+ Donut Progress Bar แสดงภาพข้อมูลด้วยแผนภูมิวงกลมที่สะดุดตาเพื่อให้เข้าใจได้ง่าย

+ Fun Fact แสดงข้อเท็จจริงที่น่าสนใจเป็นตัวเลขพร้อมไอคอน

+ Image Comparison การเปรียบเทียบภาพก่อน/หลังผ่านรูปภาพแบบเลื่อนดูได้อย่างง่ายดาย

+ Testimonial เพิ่มความน่าเชื่อถือด้วยคำพูดของลูกค้า

+ วิดีโอ ดึงดูดผู้เยี่ยมชมแบบไดนามิกด้วยวิดีโอแบบฝัง

+ Post Grid แสดงโพสต์ล่าสุดในตารางที่น่าดึงดูด

+ Page List แสดงรายการ Page แบบรายการ

+ Post Tab จัดระเบียบเนื้อหาผ่านทาง Tab

+ Header Info แสดงข้อมูลสำคัญบน Header

+ Offcanvas เพิ่มประสิทธิภาพพื้นที่ด้วย Offcanvas header ที่ทันสมัย

ทดลองใช้งาน

ติดตั้งปลั๊กอิน GutenKit ให้เรียบร้อยผ่านทางเมนู Plugin > Add new plugin

หลังจากติดตั้งเสร็จแล้ว จะอยู่ที่เมนู GutenKit

ครั้งแรกเราต้องกด Next ไปจนถึงขั้นตอนสุดท้าย จากนั้นกดปุ่ม Save Changes

GutenKit Blocks จะมี widgets ให้เราเลือกใช้เยอะมาก บางตัวสำหรับเวอร์ชั่น Pro นะครับ

GutenKit Modules การกำหนดในส่วนของฟีเจอร์การทำงานหลัก บางตัวสำหรับ Pro เช่นกัน

Settings เป็นการกำหนด API Intregration สามารถเชื่อมต่อกับ Google Map, Mailchimp, Facebook Page Feed, Facebook Page Review,Yelp, Dribble User Data, Twitter, Instagram และ Zoom บางรายการสำหรับเวอร์ชั่น Pro

มาถึงการสร้างหน้า Page ด้วย GutenKit ให้เราลองสร้างหน้าเปล่าขึ้นมาสักหน้าครับ ด้านบนมี Template Library ให้เลือกใช้

แต่ละหมวดหมู่มีทั้งของฟรีและ Pro ผสมกันครับ ให้เราเลือกใช้ของฟรีไปก่อน

ลอง Import Heading เข้ามา เราสามารถกดเลือกแก้ไขได้เลย

Panel ปรับแต่งด้านขวา ดีไซน์มาคล้ายๆ ของ Elementor คือมีแท็บ Content, Style และ Advanced

สามารถปรับแต่งได้ตามต้องการ

แท็บ Advanced ปรับแต่งค่า Margin, Padding ของเลย์เอาท์ที่เลือก

กำหนดสี Background

กลุ่ม Motion Effects ใครใช้เวอร์ชั่นฟรีไม่สามารถใช้งานได้ ทำมาเพื่อขายโดยเฉพาะ

ราคา

ราคาเวอร์ชั่น Pro ในช่วงเปิดตัวแบบ Lifetime ราคายังไม่แรงมากครับ

1. แพลน Personal สำหรับ 1 เว็บ + ฟรี 4 เว็บ อัพเดตได้ตลอดชีพ
ราคาปกติ $149 (ประมาณ 5,500 บาท) ลดเหลือ $59 (ประมาณ 2,200 บาท)

2. แพลน Exclusive สำหรับ 5 เว็บ + ฟรี 5 เว็บ อัพเดตได้ตลอดชีพ
ราคาปกติ $249 (ประมาณ 9,200 บาท) ลดเหลือ $89 (ประมาณ 3,300 บาท)

3. แพลน Agency ไม่จำกัดจำนวนเว็บ อัพเดตได้ตลอดชีพ
ราคาปกติ $499 (ประมาณ 18,400 บาท) ลดเหลือ $179 (ประมาณ 6,600 บาท)

สรุป

Gutenkit เป็นอีกปลั๊กอินสำหรับ Gutenberg ใช้ช่วยในการสร้างหน้าเว็บ ซึ่งถ้าหากเราใช้ Gutenberg อยู่แล้ว ย่อมเพิ่มประสิทธิภาพในการทำงานให้ดีขึ้นและรวดเร็วขึ้นกว่าตัว Block Editor ที่มากับ WordPress แน่นอนอยู่แล้วครับ ยิ่งถ้าเป็นเวอร์ชั่น Pro เราจะได้ฟีเจอร์ Query Loop Builder ช่วยในการ queries post, taxonomy หรือ meta ได้อีกด้วยครับ

รายละเอียดเพิ่มเติม

Back To Top
Search