การอัปเดต Beaver Builder 2.7 มาแล้ว! ดังนั้นคุณอาจสงสัยว่าจะมีฟีเจอร์ใหม่อะไรบ้างที่คาดหวังจากเครื่องมือสร้างเพจของเรา

Beaver Builder 2.7 จะแนะนำอินเทอร์เฟซการแก้ไขแบบตอบสนองใหม่ UI ที่มองเห็นได้ และการแก้ไขโค้ดต่อโหนด นอกจากนี้คุณยังสามารถเลือกประเภทโพสต์ได้หลายประเภทและรวม ACF Blocks Pro

ในโพสต์นี้ เราจะแนะนำการอัปเดต Beaver Builder 2.7 ใหม่ จากนั้น เราจะแสดงคุณลักษณะใหม่ๆ บางอย่างแก่คุณ มาเริ่มกันเลย!

ข้อมูลเบื้องต้นเกี่ยวกับ Beaver Builder 2.7

ที่ Beaver Builder เราได้สร้างปลั๊กอินตัวสร้างเพจที่ใช้งานง่าย ซึ่งทำให้ง่ายต่อการสร้างและปรับแต่งหน้า WordPress ไม่ว่าทักษะของคุณจะเป็นอย่างไร คุณสามารถออกแบบเว็บไซต์ของคุณได้อย่างรวดเร็วด้วยเครื่องมือแก้ไขภาพแบบลากและวาง เทมเพลตหน้าที่ออกแบบไว้ล่วงหน้า การตั้งค่าส่วนกลาง และอื่นๆ อีกมากมาย:

Beaver Builder เป็นเครื่องมือที่มีค่าสำหรับทั้งผู้เริ่มต้นและนักพัฒนาเว็บอยู่แล้ว อย่างไรก็ตาม เรากำลังอัปเดตซอฟต์แวร์ของเราอย่างต่อเนื่องด้วยการปรับปรุงและแก้ไขข้อบกพร่อง

ใน Beaver Builder 2.6 เราได้เพิ่มการปรับปรุงการใช้งานให้กับส่วนหน้าและส่วนหลังของโปรแกรมแก้ไขภาพของเรา การอัปเดตนี้นำเสนอบล็อกที่ใช้ซ้ำได้ เทมเพลตหน้าขนาดเล็ก และการแสดงตัวอย่าง Google Fonts นอกจากนี้คุณยังสามารถนำเข้าและส่งออกการตั้งค่าส่วนกลางและเพิ่มค่าเบรกพอยต์ใหม่ได้

เมื่อคุณคิดว่า Beaver Builder ไม่มีอะไรดีไปกว่านี้อีกแล้ว เราได้เปิดตัวการอัปเดตใหม่! Beaver Builder 2.7 นำเสนอตัวแก้ไขแบบตอบสนองใหม่สำหรับการแสดงตัวอย่างมุมมองอุปกรณ์มือถือ นอกจากนี้เรายังแทนที่เมนูแบบเลื่อนลงของเบรกพอยต์ด้วยไอคอนที่ใช้งานง่ายขึ้น

เมื่อคุณอัปเดตเป็น 2.7 คุณจะสามารถปรับแต่งการตั้งค่าโค้ดสำหรับแถว คอลัมน์ หรือโมดูลที่ต้องการได้ เรายังทำให้สามารถเลือกประเภทโพสต์ได้หลายประเภท สุดท้ายนี้ Beaver Builder 2.7 ทำงานร่วมกับ ACF Blocks ได้อย่างสมบูรณ์ ทำให้คุณสามารถเข้าถึงประสบการณ์การแก้ไขเนื้อหาขั้นสูงได้

5 คุณสมบัติใหม่และการอัปเดตที่คุณควรรู้ใน Beaver Builder 2.7

เนื่องจากนี่คือการอัปเดตครั้งแรกของเราในปี 2023 เรามาเจาะลึก Beaver Builder 2.7 กันสักหน่อย ด้วยวิธีนี้ คุณจะทราบฟีเจอร์หลักและการแก้ไขข้อบกพร่องทั้งหมดก่อนที่จะติดตั้งเวอร์ชันใหม่

1. อัปเดตการแก้ไขแบบตอบสนอง

ใน Beaver Builder เวอร์ชันก่อนหน้า คุณสามารถใช้โหมดแก้ไขแบบตอบสนองเพื่อปรับขนาดหน้าสำหรับหน้าจอต่างๆ ตลอดจนดูและแก้ไขการออกแบบของคุณบนอุปกรณ์เคลื่อนที่และแท็บเล็ต Beaver Builder 2.7 มีคุณสมบัติใหม่ต่อไปนี้เพื่อทำให้การออกแบบของคุณแม่นยำยิ่งขึ้นบนอุปกรณ์ทุกขนาด:

• ขณะนี้ Beaver Builder UI อยู่ใน iFrame ซึ่งทำให้การแสดงตัวอย่างแบบตอบสนองของอุปกรณ์ขนาดต่างๆ มีความแม่นยำ 100%
• ขณะนี้ยังมีส่วนหัวและส่วนท้ายของไซต์ในหน้าตัวอย่างด้วย เมื่อก่อนเป็นเพียงการจัดวางเท่านั้น

เมื่ออัปเกรดเป็น Beaver Builder 2.7 คุณจะสามารถเข้าถึงตัวเลือกการแก้ไขแบบตอบสนองขั้นสูงได้ ขั้นแรก คุณสามารถดูหน้าเว็บได้ในสี่ขนาดที่แตกต่างกัน: ใหญ่พิเศษ ใหญ่ กลาง และเล็ก:

นอกจากนี้ ตัวแก้ไขแบบตอบสนองยังช่วยให้คุณตั้งค่าความสูงและความกว้างที่กำหนดเองได้ เพียงป้อนพิกเซลที่ต้องการรวมกัน จากนั้นหน้าจอแก้ไขจะอัปเดตโดยอัตโนมัติ:

ถัดมาเป็นเมนูแบบเลื่อนลงสำหรับเปลี่ยนการซูม การตั้งค่านี้จะทำให้คุณสามารถดูหน้าจอแก้ไขได้ที่ 100%, 75% หรือ 50% หรือคุณอาจเลือก Fit to Window :

เพื่อปรับแต่งเครื่องมือแก้ไขเพิ่มเติม เราได้เพิ่มลูกศรปรับขนาดที่ด้านล่างและด้านข้างของหน้าจอ องค์ประกอบเหล่านี้สามารถให้ความยืดหยุ่นมากขึ้นในขณะที่คุณกำลังออกแบบเพจ:

ขณะนี้ Beaver Builder ช่วยให้สามารถรองรับอุปกรณ์ขนาดต่างๆ ได้อย่างง่ายดาย ด้วยการใช้คุณสมบัติการแก้ไขใหม่ของเรา คุณสามารถมั่นใจได้ว่าทุกหน้าของเว็บไซต์ WordPress ของคุณจะตอบสนองและเหมาะกับมือถือ!

2. UI การมองเห็น

Beaver Builder รองรับเบรกพอยต์แบบกำหนดเองสำหรับขนาดหน้าจอที่แตกต่างกันอยู่แล้ว ซึ่งหมายความว่าคุณสามารถตั้งค่าความกว้างพิกเซลที่เปลี่ยนพฤติกรรมการตอบสนองจากอุปกรณ์ขนาดใหญ่ถึงขนาดกลางไปจนถึงขนาดเล็กได้

เมื่อคุณกำหนดเบรกพอยท์ สิ่งสำคัญคือต้องคำนึงถึงค่าเริ่มต้นเหล่านี้:

ตัวอย่างเช่น iPad ส่วนใหญ่มีแนวนอนที่ 1024 x 768 พิกเซล ในขณะที่แนวตั้งจะมีขนาด 768 x 1024 พิกเซล ในกรณีนี้ การวางแนวในแนวนอนจะเหมาะกับอุปกรณ์ขนาดใหญ่ และค่าแนวตั้งจะเหมาะกับอุปกรณ์ขนาดเล็ก

ใน Beaver Builder การตั้งค่าเบรกพอยต์เหล่านี้อยู่ภายใต้ การมองเห็น ในแท็บ ขั้นสูง เมื่อใช้เครื่องมือสร้างเพจเวอร์ชันก่อนหน้า คุณจะเห็นตัวเลือกต่างๆ เช่น อุปกรณ์ขนาดใหญ่และขนาดกลางเท่านั้น หรือ อุปกรณ์ขนาดเล็กเท่านั้น :

Beaver Builder 2.7 อัปเดตการตั้งค่านี้ด้วยไอคอนที่ใช้งานง่าย แทนที่จะเลือกจากเมนูแบบเลื่อนลงขนาดใหญ่ คุณสามารถเลือกหรือยกเลิกการเลือกไอคอนขนาดอุปกรณ์ที่ต้องการได้:

การเปลี่ยนแปลงง่ายๆ นี้ช่วยให้ปรับแต่งแถว คอลัมน์ หรือโมดูลที่จะแสดงในหน้าจอต่างๆ ได้ง่ายขึ้น ด้วยการใช้ Beaver Builder 2.7 คุณสามารถปรับแต่งการมองเห็นเลย์เอาต์ของคุณได้อย่างรวดเร็วและง่ายดาย!

3. CSS ต่อโหนดและ JavaScript

จนถึงตอนนี้ เราได้พูดคุยถึงวิธีที่ Beaver Builder 2.7 อัปเดตการตั้งค่าบางอย่างที่มีอยู่แล้วเพื่อทำให้อินเทอร์เฟซใช้งานง่ายยิ่งขึ้น อย่างไรก็ตาม เรายังขอแนะนำตัวเลือกการแก้ไขใหม่ล่าสุดอีกด้วย!

ตัวอย่างเช่น ตอนนี้คุณสามารถแก้ไขโค้ดสำหรับโหนดที่ต้องการได้แล้ว แต่ละแถว คอลัมน์ และโมดูลจะมีตัวแก้ไข CSS และ JavaScript ในแท็บ ขั้นสูง

แม้หลังจากอัปเดตเป็น 2.7 แล้ว คุณจะต้องเปิดใช้งาน CSS และ JavaScript แบบต่อโหนด เนื่องจากการตั้งค่านี้ถูกปิดใช้งานโดยค่าเริ่มต้น ให้ไปที่ การตั้งค่า > Beaver Builder > ขั้นสูง จากนั้นเปิด ใช้งานการตั้งค่ารหัส :

หลังจากนี้ ให้เปิดการตั้งค่าสำหรับโมดูล แถว หรือคอลัมน์เฉพาะที่คุณต้องการแก้ไข คลิกที่แท็บ ขั้นสูง แล้วเลื่อนไปด้านล่าง ที่นี่คุณจะเห็นเครื่องมือแก้ไข CSS และ JavaScript ใหม่:

คุณสามารถเพิ่ม CSS และ JavaScript แบบกำหนดเองลงในแต่ละแถว คอลัมน์ หรือโมดูลได้โดยตรงโดยใช้คุณสมบัตินี้ จากนั้นคุณจะเห็นไอคอนโค้ดติดอยู่กับโหนดในแผงโครงร่าง:

คุณลักษณะนี้จะช่วยให้คุณควบคุมรูปลักษณ์และการทำงานของไซต์ของคุณได้มากขึ้น ขณะที่คุณกำลังเพิ่ม CSS และ JavaScript ต่อโหนด โปรดทราบว่าการเข้ารหัสทั้งหมดจะถูกกำหนดขอบเขตไว้ที่โหนดที่คุณกำลังทำงานอยู่

4. ประเภทโพสต์แบบเลือกได้หลายรายการ

ใน Beaver Builder 2.7 เราได้ปรับปรุงโมดูล Accordion ด้วย โดยพื้นฐานแล้ว หีบเพลงจะแสดงรายการรายการที่มีส่วนที่สามารถขยายได้ ก่อนหน้านี้ โมดูลนี้อาจรวมโพสต์ หรือ เพจของคุณ แต่ไม่ใช่ทั้งสองอย่างพร้อมกัน:

ด้วย Beaver Builder 2.7 โมดูล Accordion ใหม่รองรับประเภทโพสต์ได้หลากหลาย หลังจากแทรกโมดูลแล้ว ให้เลือก โพสต์ เป็น แหล่งที่มาของเนื้อหา จากนั้น คุณสามารถเลือกทั้ง โพสต์ และ เพจ เป็น ประเภทโพสต์ :

หากต้องการแสดงเนื้อหาที่ถูกต้อง อย่าลืมกรองผลลัพธ์ด้วยหมวดหมู่และแท็ก เช่นเดียวกับ Beaver Builder เวอร์ชันเก่า คุณยังคงสามารถปรับแต่งลำดับและจำนวนรายการที่แสดงได้

5. การรวมบล็อก ACF

หากคุณต้องการเริ่มใช้บล็อกแบบกำหนดเองทั้งใน Block Editor และ Beaver Builder เรามีวิธีแก้ปัญหา! การอัปเดต 2.7 ของเราทำงานร่วมกับ ACF Blocks ได้อย่างสมบูรณ์:

ACF Blocks ช่วยให้คุณสร้างประเภทบล็อกที่กำหนดเองได้ เมื่อคุณลงทะเบียนบล็อกใหม่แล้ว คุณสามารถแทรกบล็อกนั้นลงในโพสต์ WordPress หรือหน้า Beaver Builder ได้ สิ่งนี้จะทำให้การออกแบบเว็บของคุณสอดคล้องกันทั่วทั้งเว็บไซต์ของคุณ

ในการเริ่มต้น คุณจะต้องลงทะเบียนบล็อกกับ ACF Blocks ในไฟล์ block.json ให้เพิ่มรายละเอียดเกี่ยวกับบล็อกที่คุณกำหนดเอง:

 { "name": "acf/bb-example-acf-block", "title": "ACF Example Block", "description": "An example ACF block that can be used in Beaver Builder.", "category": "bb-example-acf-blocks", "icon": "admin-appearance", "script": "file:./js/scripts.js", "style": "file:./css/styles.css", "supports": { "jsx": false }, "acf": { "mode": "preview", "renderTemplate": "template.php" }, "beaverBuilder": { "group": "ACF Blocks" } }

หลังจากนี้ ให้เปิดไฟล์ PHP ของธีมของคุณ จากนั้น คุณสามารถกำหนดค่าเอาต์พุตสำหรับเนื้อหาของบล็อกได้:

 <?php $heading = get_field( 'heading' ); $content = get_field( 'content' ); ?> <div> <h3><?php echo $heading; ?></h3> <p><?php echo $content; ?></p> </div>

ตอนนี้คุณจะต้องโหลดบล็อกโดยใช้ฟังก์ชัน สิ่งนี้จะทำให้บล็อกที่กำหนดเองพร้อมใช้งานใน ACF:

 add_action( 'init', function() { register_block_type( 'path/to/block.json' ); } );

สุดท้ายไปที่ ฟิลด์ที่กำหนดเอง ใน WordPress และเพิ่มกลุ่มฟิลด์ใหม่ คุณสามารถใช้ช่อง ACF ใดก็ได้ แต่ต้องแน่ใจว่าได้เลือก บล็อก เป็นตำแหน่ง:

เมื่อคุณสร้างบล็อกแบบกำหนดเองแล้ว คุณก็สามารถเริ่มใช้งานได้! ใน Beaver Builder ให้จัดกลุ่มโมดูลที่มีอยู่ตาม ACF Blocks:

จากนั้นเพียงใส่บล็อกของคุณ เช่นเดียวกับโมดูล Beaver Builder คุณจะสามารถลากและวางลงบนหน้าต่างๆ และปรับแต่งการตั้งค่าได้:

เมื่อใช้การผสานรวมนี้ คุณสามารถสร้างบล็อกที่นำมาใช้ซ้ำได้ซึ่งทำงานในโปรแกรมแก้ไข WordPress ดั้งเดิมและ Beaver Builder สิ่งนี้ช่วยให้คุณสร้างมาตรฐานเนื้อหาการออกแบบบนโพสต์และเพจของคุณ

บทสรุป

เมื่ออัปเกรดเป็น Beaver Builder 2.7 คุณจะสามารถเข้าถึงเวอร์ชันที่ตอบสนองและยืดหยุ่นมากขึ้นของตัวสร้างเพจของเรา ตอนนี้คุณสามารถปรับแต่งเพจสำหรับอุปกรณ์มือถือ เพิ่มโค้ดสำหรับโหนดเฉพาะ และอื่นๆ อีกมากมาย

หากต้องการตรวจสอบ นี่คือสิ่งที่คุณคาดหวังได้จาก Beaver Builder 2.7:

1. อัปเดตการแก้ไขแบบตอบสนองแล้ว
2. UI การมองเห็น
3. CSS ต่อโหนดและ JavaScript
4. ประเภทโพสต์แบบเลือกได้หลายรายการ
5. ACF บล็อกการรวมระบบ

คนยังถาม

Beaver Builder เวอร์ชันล่าสุดคืออะไร?

Beaver Builder 2.7 เป็นปลั๊กอินเวอร์ชันล่าสุดของเรา รองรับการทำงานร่วมกับ ACF Blocks Pro, ประเภทการโพสต์ที่มีให้เลือกมากมาย และ CSS และ JavaScript ต่อโหนด นอกจากนี้คุณยังจะพบการปรับปรุงการแก้ไขแบบตอบสนองที่ทำให้ Beaver Builder มีความแม่นยำและใช้งานง่ายยิ่งขึ้น

Beaver Builder ทำอะไร?

Beaver Builder เป็นตัวสร้างเพจที่สามารถปรับแต่งเว็บไซต์ WordPress ของคุณด้วยสายตาได้ ปลั๊กอินของเราประกอบด้วยโมดูลเนื้อหาแบบลากและวาง เทมเพลตหน้าที่ออกแบบไว้ล่วงหน้า ไวท์เลเบล และการตั้งค่าขั้นสูง คุณสมบัติเหล่านี้ทำให้เป็นเครื่องมือที่ยืดหยุ่นสำหรับทั้งผู้เริ่มต้นและนักพัฒนา!

เกี่ยวกับ วิล มอร์ริส

Will Morris เป็นนักเขียนที่ WordCandy เมื่อเขาไม่ได้เขียนเกี่ยวกับ WordPress เขาชอบแสดงสแตนด์อัพคอมเมดี้เป็นประจำในท้องถิ่น