สร้างเว็บไซต์ที่สวยงามด้วย Kadence Blocks

Kadence Blocks เป็นอีกหนี่งปลั๊กอินที่ใช้เพิ่ม Block ให้กับ WordPress Block Editor หรือที่เรียกว่า Gutenberg โดย Kadence Blocks เป็นปลั๊กอินที่พัฒนาโดยค่าย Kadence จากเมือง Missoula, รัฐ Montana ประเทศสหรัฐอเมริกา นอกจากปลั๊กอิน Kadence Blocks ตัวนี้แล้ว ทาง Kadence ยังมีผลิตภัณฑ์อีกมากมายบน WordPress เช่น Kadence Theme, Kadence Shop Kit, Kadence Conversions, Kadence Pattern Hub และอื่นๆอีกมากมายกว่า 20 รายการ

Kadence Blocks ก็จัดว่าเป็นปลั้กอิน Block Gutenberg ที่ได้รับความนิยมอีกตัวหนึ่ง โดยมียอดดาวน์โหลดไปใช้งานตั้งแต่เวอร์ชั่นแรกถึงปัจจุบันรวมแล้วกว่า 16 ล้านครั้ง โดยมีทั้งเวอร์ชั่นฟรีและเวอร์ชั่นเสียเงิน ในเวอร์ชั่นฟรีจะมี Block มาให้ทั้งหมด 16 Block ส่วนในเวอร์ชั่นเสียเงินจะมี Block มาให้อีก 12 Blocks นอกจากนี้ยังมี Design Library ที่มี Template ให้เลือกทั้งแบบ Pattern และแบบทั้งหน้า Page

ราคาและแพลนของเวอร์ชั่น Pro

• Kadence Blocks Pro | $89/Year
• Essential Bundle | $149/Year
• Full Bundle | $219
• Lifetime Full Bundle | $799 จ่ายครั้งเดียวใช้ได้ตลอดชีพ

ทุก Plan ใช้ได้แบบไม่จำกัดจำนวนเว็บไซต์ และแตกต่างกันตามฟังก์ชั่นที่ได้

ความแตกต่างระหว่าง Kadence Blocks Free กับ Kadence Blocks Pro

คุณสมบัติเด่นของ Kadence Blocks

Intelligent Load

ระบบการโหลดอัจฉริยะของ Kadence Blocks ที่จะมีการโหลด CSS หรือ Javascript เมื่อมีการใช้งานเท่านั้้น

Responsive Controls

ออกแบบและปรับแต่งให้ใช้ได้กับทุกขนาดหน้าจอ

Typography Controls

มีฟอนต์จาก Google ให้เลือกใช้มากกว่า 900 แบบ

Color & Background Controls

ปรับแต่งสีและพื้นหลังได้ตามใจ ทั้ง Gradients, Overlays, Parallax Backgrounds, Borders

Configurable Defaults

นำค่าที่ปรับแต่งไว้แล้วมาใช้เป็นค่าเริ่มต้นในการใช้งาน Blocks ต่างๆ ทำให้การพัฒนาเป็นเรื่องง่าย ไม่ต้องมากำหนดค่าซ้ำบ่อยๆ

Setting Visibility Controls

ใช้ในการควบคุมการมองเห็น Kadence Blocks สำหรับทีมงานในเว็บไซต์ ว่าทีมงานของเว็บไซต์ว่ามี Role อยู่ในระดับไหนจะใช้ Block อะไรของ Kadence Blocks ได้บ้าง

Spacing Controls

ตั้งค่าระยะห่าง Paddings และ Margins ของ Blocks ได้ตามที่คุณต้องการ

Kadence Blocks เวอร์ชั่นฟรี – Blocks ทั้งหมด

Row Layout – เป็น Block สำหรับใช้สร้าง Row, Column จะสร้างเป็น Container ก่อน แล้วค่อยซ้อนเป็น Row, Column ก็ได้

Advanced Gallery – เป็น Block ที่ใช้สร้างแกลเลอรีภาพ สร้างได้หลายแบบ ไม่ว่าจะเป็น Masonry Gallery, Grid Gallery, Carousel Gallery, Slider Gallery และ Fluid Carousel – with Mayfair filter

Form – เป็น Block ที่ใช้ในการสร้างแบบฟอร์มติดต่อ โดยมีคุณสมบัติ Google ReCaptcha มาด้วยในตัว

Advanced Text – เป็น Block สำหรับใช้สร้างข้อความ ได้ทั้ง Heading, Paragraph สามารถเลือกรูปบแบฟอนต์ ขนาดและสีได้ตามต้องการ

Advanced Button – ใช้สร้างปุ่มในรูปแบบต่างๆ จัดรูปแบบและกำหนดขนาด สีของข้อความ เส้นขอบ ความโค้งของกรอบ ทั้งหมดควบคุมได้อย่างง่ายดาย

Tabs – ใช้สร้าง Tabs Block ได้ทั้งแบบแนวนอนและแนวตั้ง โดยด้านใน Block จะใส่ได้ทั้งความและรูปแบบ และในการกด Tab เพื่อเปลี่ยน Block

Accordion – ใข้สร้าง Block แสดดงข้อมูลที่ใส่ได้ทั้งข้อความและรูปภาพ จะคล้ายๆ Tabs แต่จะต่างกันที่ Accordion จะสามารถใช้การคลิกที่แถบหัวข้อเพื่อเปิดเนื้อหา และสามารถปิดเนื้อหาทั้งหมดให้เหลือแต่แถบหัวข้อได้

Testimonials – เป็น Block ที่ใช้สร้างกรอบข้อความและรูปภาพที่เป็นการรีวิวผลิตภัณฑ์หรือบริการต่างๆ

Icon – มีไอคอน SVG ให้เลือกมากกว่า 1,500 แบบ เพื่อใช้ใช้เพิ่มลงใน Post หรือ Page และจัดรูปแบบขนาด สี พื้นหลัง เส้นขอบ ต่างๆได้

Spacer / Divider – ใช้เพิ่มเส้นแบ่งหรือระยะห่างระหว่าง Block เพื่อความสวยงามในการจัดหน้า Layout

Info Box – ใช้สร้างกล่องที่มีไอคอนหรือรูปภาพ และใส่หัวข้อ, คำอธิบาย สร้างได้หลายสไตล์ ทั้งรูปภาพแบบสี่เหลี่ยมและรูปภาพแบบวงกลม

Icon List – ใช้สร้างไอคนและข้อความในลักษณะที่เป็น List รายการ โดยมีไอคอน SVG ให้เลือกมากกว่า 1,500 แบบ

Countdown – ใข้สร้างการนับถอยหลัง วัน ชั่วโมง นาที วินาที เหมาะสำหรับในการการสร้างโปรโมชั่นต่างๆ

Posts – ใช้ดึง Post ล่าสุดขึ้นมาแสดง เหมาะสำหรับวางไว้เป็นส่วนหนึ่งของหน้าแรก

Table of Contents – ใช้สร้างสารบัญในหน้า Post หรือ Page เหมาะที่จะใช้กับเนื้อหาที่มีความยาวมากๆ ใช้ Block นี้จะอ้างอิงจาก Tag H2-H4 มาเป็นหัวข้อในสารบัญ

Lottie Animation – สามารถนำเข้าภาพเคลื่อนไหว lottie มาใช้ในเว็บไซต์ได้ โดยเลือกวิธีการเล่นของภาพเคลื่อนไหวและควมคุมความเร็วและลูปของภาพเคลื่อนไหวได้

Kadence Blocks Pro – Premium Blocks ทั้งหมด

Image Overlay – เป็น Block ที่ใช้ใส่รูปภาพและวางข้อความซ้อนลงไปบนรูปภาพ

Video Popup – ใช้ใส่รูปภาพที่มีลิงค์วิดีโอ เมื่อนำเคอร์เซอร์ไปวางเหนือรูปภาพก็จะมี Effect ตามที่ตั้งไว้ และเมื่อคลิกที่รูปภาพก็จะเป็น Popup แสดงวิดีโอขึ้นมา

Modal – ใช้สร้างปุ่ม Call To Action เมื่อคลิกที่ปุ่มก็จะเป็นการเปิดกล่องที่มีเนื้อหาอยู่ภายใน

Post Grid/Carousel – ใช้ดึง Post ล่าสุดขึ้นมาแสดง เหมือน Posts แต่จะ Advenced กว่าตรงที่ดึงขึ้นมาแสดงแบบ Carousel ได้

Portfolio Grid/Carousel – ใช้สร้างแกลลอรีรูปภาพในแบบ Portfolio รวมถึงแสดงแบบ Carousel ได้

Product Carousel – ใช้ดึงสินค้าที่มีการลงไว้จากปลั๊กอิน WooCommerce มาแสดงแบบ Carousel

Split Content – เป็น Block แบบสองคอลัมน์ ใช้ใส่เนื้อหาที่ต่างกันเช่น คอลัมน์ซ้ายใส่รูปภาพ คอลัมน์ขวาใส่หัวข้อและรายละเอียด

Advanced Slider – เป็น Block ที่ใช้ในการวางรูปภาพให้เป็น Silder ได้แบบเต็มหน้าจอ และยังใส่ข้อความทับไปบนรูปภาพได้

User Info – ใช้สร้าง Block ที่แสดงข้อมูลเกี่ยวกับผู้ใช้ที่เข้าสู่ระบบในปัจจุบัน แสดงกราวาตาร์ ชื่อ และวันที่ลงทะเบียน

Pro Gallery Addons – ใช้สร้างแกลลอรีในระดับ Premium สร้างได้หลายแบบ เช่น Thumbnail Slider, Tiles Gallery

Pro Countdown Addons – ใข้สร้างการนับถอยหลัง วัน ชั่วโมง นาที วินาที โดยจะอ้างอิงจาก IP หรือ Cookie ของผู้ใช้

Pro Form Addons – ใช้สร้างแบบฟอร์มติดต่อ โดยสามารถใช้เพิ่มสมาชิกของคุณไปยัง Mailchimp ได้

การติดตั้งปลั๊กอิน Kadence Blocks

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

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

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

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

เมื่อ Install และ Activate เรียบร้อยแล้ว จะเข้าไปตั้งค่าต่างๆของ Kadence ได้จาก -> Kadence โดยมีเมนูทั้งหมด 3 เมนู

Home

เป็นหน้าที่แสดงรายละเอียดต่างๆเกี่ยวกับปลั๊กอิน Kadence Blocks รวมถึงข้อความแนะนำ Kadence Blocks Pro และแนะนำผลิตภัณฑ์อื่นๆ เช่น Kadence Theme

Settings

เป็นหน้าที่อธิบายรายละเอียดของ Blocks ต่างๆ รวมถึงเปิดใช้งาน Google Fonts ได้จากที่นี่ และลิงค์ไปยังหน้า Documentation และ Support ของปลั๊กอิน

Forms

เป็นหน้าที่แสดง Forms ทั้งหมดที่เคยสร้างไว้ ​และสามารถกดสร้าง Form ได้ โดย Form ที่สร้างจะนำไปใช้กับ Block Kadence Form

เมื่อเข้าไปที่หน้า Add/Edit Post หรือ Page และคลิกที่ปุ่ม + เพื่อเปิด Left Menu ตรง Tab Blocks ก็จะแสดง Blocks ของปลั๊กอิน Kadence Blocks ที่พร้อมใช้งาน สังเกตง่ายๆว่า Block จะมีสีฟ้าเข้ม

ที่แถบเครื่องมือด้านบนสุด ฝั่งซ้าย จะมีปุ่มที่เขียนว่า Design Library

เมื่อตลิกที่ปุ่ม Design Library จะเป็นการเปิด Popup ที่แสดง Template ของ Kadence Blocks ขึ้นมา โดยจะมีทั้ง Pattern และ Template แบบทั้งหน้า Page มีทั้งแบบใช้ได้ฟรีและที่ต้องใช้ Kadence Blocks Pro

ส่วนสุดท้ายเครื่องมือทางด้านขวา ที่เป็นรูปไอคอนโลโก้ของ Kadence เมื่อคลิกจะเป็นการเปิด Kadence Blocks Controls ใช้ในการตั้งค่าเกี่ยวกับ Blocks ของ Kadence

การตั้งค่าใน Kadence Blocks Controls

Color Palette ใส่เพิ่มแถบสีให้ Block ต่างๆ ของ Kadence เวลาจะปรับเปลี่ยนสี โดยสีที่เพิ่มเข้าไปในแสดงในส่วน Palette สี เพื่อให้กดใช้สีได้ง่ายๆ

Block Visibility ใช้ในการควบคุมการมองเห็น Kadence Blocks สำหรับทีมงานในเว็บไซต์ ว่าทีมงานที่มี Role อยู่ในระดับไหนจะใช้ Block อะไรของ Kadence Blocks ได้บ้าง

Import/Export Block Settings ใช้ใสการนำ Import/Emport ค่า Block Settings เมื่อมีการตั้งค่าที่ Block ของ Kadence Blocks แล้ว Save as default เอาไว้ ก็สามารถ Export ค่าน้นออกมาแล้วไป Import ที่เว็บอื่นๆที่ใช้ Kadence Blocks ได้ นอกจากนี้ยังใช้ Export ค่าที่มีการตั้งไว้ที่ Block Visibility และไป Import ที่เว็บอื่นๆที่ใช้ Kadence Blocks ได้เช่นเดียวกัน

Reset Block Defaults ใช้ในการ Reset ค่าต่างๆที่เคยตั้งไว้ทั้งหมดใน Block และ Block Visibility โดยเลือกได้ว่าจะ Reset ทั้งสองอย่างหรืออย่างใดอย่างหนึ่ง

Pexels Library Search ใช้เปิดหรือปิดการค้นหารูปภาพจากเว็บ Pexels

ถ้าเลือกเป็น Enable เวลาเปิด Upload Media เพื่อเลือกรูปภาพที่มีอยู่ในเว็บหรืออัปโหลดลงไปใหม่ ก็จะมี Tab Pexels ขึ้นมาให้เลือกรูปภาพจากเว็บ Pexels

สรุป

Kadence Blocks ก็เป็นอีกหนึ่งปลั๊กอิน Gutenberg Blocks ที่ได้รับความนิยม และมีฟังก์ชั่นต่างๆค่อนข้างครบ ถึงแม้ว่าในเวอร์ชั่นฟรีจะมี Gutenberg Blocks มาให้ไม่มากนัก แต่ก็จะมีส่วน Design Library ที่มี Template ทั้งแบบ Pattern และแบบทั้งหน้า Page ให้เลือกใช้ นอกจากนี้ยังมี Kadence AI ซึ่งเป็นตัวช่วยในการสร้างเว็บไซต์ในแบบต่างๆ เช่น ให้ AI ช่วยออกแบหน้าเพจ ซึ่งใน Kadence Blocks เวอร์ชั่นฟรีจะใช้ได้ 250 free credits นอกจากนี้ก็ยังมีการต้งค่า Kadence Blocks Controls ที่ใช้ในการเพิ่ม Palette สีที่ใช้บ่อยๆ, Block Visibillity ที่ใช้ปรับระดับการมองเห็น Kadence Blocks ของผู้ดุแลเว็บในระดับต่างๆ หรือการ Import/Export ค่า Block Setting และ Block Visibillity เพื่อนำไปใช้งานในเว็บอื่นๆที่เราดูแลได้