Bricks Builder สุดยอดธีมที่มาพร้อมเครื่องมือสร้างเว็บที่ทรงพลังและมีประสิทธิภาพสูง กำลังมาแรงทั้งในและต่างประเทศ ด้วยความไวในการโหลดและมีฟีเจอร์ที่ครบเครื่อง รองรับผู้ใช้งานตั้งแต่ระดับเริ่มต้นไปถึงระดับสูง มี Add-ons ต่างๆ ที่ช่วยเสริมการใช้งานทะยอยออกมาเพียบ เดี๋ยวเราจะไปดูว่ามีความสามารถอะไรที่น่าสนใจ รวมถึงทดลองใช้งานเบื้องต้นให้ดูว่าเป็นอย่างไรบ้าง
รู้จัก Bricks Builder
Bricks Builder เป็นเครื่องมือสร้างเว็บแบบ Drag and Drop ที่มาในรูปแบบของธีม เปิดตัวครั้งแรกคือในปี 2021 ดังนั้น Bricks จึงถือเป็นหน้าใหม่ในตลาด Bricks ในเวอร์ชั่นเปิดตัวนั้นได้นำเสนอฟีเจอร์ที่แข็งแกร่งในการช่วยสร้างและจัดการเว็บไซต์ มีปุ่มลัดบนแป้นพิมพ์ที่สะดวกสบาย สามารถกำหนด Custom Fonts และชุดสีได้เอง มีจุดเด่นที่ความไวในการโหลดและ Clean Code ทีมพัฒนาได้ใช้ Vue.js framework และลบพวก JQuery ที่อยู่ด้านหน้าเว็บออก เรียกว่าไวมากเมื่อเทียบกับ Page Builder อย่าง Elementor
นอกจากนี้ยังรองรับข้อมูลแบบไดนามิกและเข้ากันได้กับ Gutenberg โดยเสนอการรองรับ RTL เต็มรูปแบบสำหรับภาษาที่อ่านจากขวาไปซ้าย สามารถ Import และ Export สไตล์ธีมได้ จากนั้นก็พัฒนาฟีเจอร์ใหม่ๆ และแก้ Bug ต่างๆ เรื่อยมาไม่ว่าจะเพิ่มฟีเจอร์ WooCommerce Builder, สร้างTemplate ไว้ใช้งานได้เอง รองรับ ACF และปลั๊กอินแปลภาษาอย่าง WPML จนมาถึงเวอร์ชั่นล่าสุด 1.9.4 (ปลายปี 2023) จาก 2 ปีกว่าที่ผ่านมาทางทีมพัฒนาได้ปล่อยเวอร์ชั่นอัพเดตมาประมาณ 45 ครั้ง พร้อมกับฟีเจอร์ใหม่อีกเกือบ 2,000 ฟีเจอร์และยังมีแผนพัฒนาล่วงหน้าโดยผู้ใช้สามารถร่วมเสนอไอเดียในการพัฒนา Bricksได้ด้วย เรียกว่าพัฒนาแบบไม่หยุดยั้งจริงๆ ครับ
ราคา
Bricks Builder จะไม่มีเวอร์ชั่นฟรี ปัจจุบันมีให้เลือก 2 ราคา คือ 99 USD/ 1 เว็บ Lifetime และราคา 249 USD แบบไม่จำกัดเว็บ ทั้งนี้ราคานี้จะขายถึงวันที่ 14 มกราคา ปี 2024 เท่านั้น หลังจากนั้นจะปรับขึ้นราคาใหม่ เป็น 599 USD แบบ Lifetime ไม่จำกัดเว็บในปีหน้า ส่วนราคา 249 USD จะกลายเป็นแพลนไม่จำกัดเว็บแบบรายปีแทน เรียกว่าใครที่ต้องการจะใช้งานรีบหาซื้อกันก่อนที่ทางทีมงานเขาจะขึ้นราคานะจ๊ะ
ลองใช้งาน
เราจะลองทดสอบสร้าง Elementง่ายๆ กันดู เริ่มจากไปที่เมนู Page > Add New Page กดปุ่ม “Edit with Bricks”
ระบบจะพาคุณเข้ามายัง Bricks Builder หน้าตาสีดำ ด้านซ้ายมือเป็นเครื่องมือต่างๆ ด้านขวาเป็น Structure ตรงกลางเป็นพื้นที่ทำงานใช้แสดงผลตัวอย่างหน้าเว็บ
Layout ของระบบ Bricks จะแบ่งเป็น 4 ส่วน คือ
Section: ใช้เป็นโครงสร้างหลักในการแบ่งส่วนของหน้าเว็บ
Container: ประกอบด้วย Element ความกว้าง 1100px (centered)
Block: เป็นFlexbox กว้าง 100% เช่น column
Div: div ทั่วไปไม่มีสไตล์
ทางทีมงาน Bricks เองได้แนะนำให้ใช้ Section, Container, และ Block เป็นหลักในการออกแบบหน้าเว็บ ทั้งหมดนี้ใช้เลย์เอาท์แบบ Flexbox ช่วยให้เราสามารถจัดวางเรียงวัตถุได้อย่างง่ายดาย
โครงสร้างของเลย์เอาท์ Bricks จะมี Section อยู่ในระดับ Root level อยู่ชั้นนอกสุด จากนั้นจะมี Container กว้าง 1100px หรือBlock ด้านใน Section ส่วน Div อยู่ที่ไหนก็ได้
ลองกดที่ Section ระบบจะสร้าง Section พร้อม Container ให้เองโดยอัตโนมัติ
เราจะลองเพิ่มภาพ ให้กดไอคอน “+” เลื่อนลงที่หมวด Basic > กดเลือก Images จะปรากฏ Element Image อยู่ในพื้นที่ตรงกลาง
กดที่แถบสีฟ้า No image selected > เลือก Select Image ให้เลือกภาพที่ต้องการ
หลังจากได้ภาพที่ต้องการแล้ว ลองกดที่แถบ Style
สามารถกำหนดค่า Margin หรือ Padding รวมถึง Sizing ขนาดภาพ
ลองทำการ Duplicate ภาพอีก 1 ชุด ด้วยการคลิกขวาที่ Container เลือก Duplicate
จะได้ Container 2 ชุดมี Image เหมือนกัน เรียงตัวกันลงมาตามแนวตั้ง
เราจะปรับให้เรียงเป็นแนวนอน ให้คลิกเลือกที่ Section จากนั้นเลือกไอคอน Horizontal (row)
Bricks จะทำการเรียงภาพเป็นแนวนอนให้เรา พร้อมแบ่งพื้นที่ทั้ง 2 ฝั่งให้เท่ากันโดยอัตโนมัติ
เปลี่ยนภาพด้านขวา ให้คลิกเลือกภาพในพื้นที่ทำงาน จากนั้นกดเลือกภาพที่ Panel ด้านซ้าย เพื่อเปลี่ยนรูปใหม่
เสร็จเรียบร้อย
ถ้าต้องการใส่ลิ้งก์ให้เลื่อนลงมา จะเจอช่องใส่ Link To กำหนดลิ้งก์ที่ต้องการได้เลย
ต่อไปลองเพิ่มหัวข้อไว้ด้านล่าง กดไอคอน “+” เลือก Block
จากนั้นคลิกเลือก Heading
คลิกเลือก Element Heading คำว่า “I am a heading” จากนั้นให้แก้ข้อความที่ต้องการใน Panel ซ้ายมือในช่องตรงบริเวณกรอบสีแดง
จากนั้นจัดวางกึ่งกลางหน้า ให้เลือกแถบ Style เลื่อนลงมาหัวข้อ Flex เลือก Center
สรุปการใช้งานเบื้องต้น
หลังจากทดลองใช้งานเบื้องต้น เราพบว่า Bricks Builder มีการทำงานที่รวดเร็วและน่าประทับใจเอามากๆ การตอบสนองในการเรียกใช้ elements ต่างๆ เป็นไปอย่างรวดเร็วทันใจ ไม่มีหน่วงให้เห็น แถมมีเครื่องมือที่ทรงพลังสามารถสร้างหน้าเว็บง่ายๆ ไปจนถึงงานที่ซับซ้อนได้เลย โอกาสหน้าถ้าเรามีเวลาจะนำเสนอเครื่องมือต่างๆ ให้ดูกันอีกครั้งครับ
Related Posts
