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

นั่นเป็นเหตุผลที่ Beaver Builder 2.9 เป็นผู้เปลี่ยนเกมสำหรับฉัน การอัปเดตนี้แนะนำการปรับปรุงที่สำคัญสองครั้งที่เปลี่ยนวิธีการสร้างหน้าเว็บอย่างสมบูรณ์และฉันคิดว่าคุณจะรักความยืดหยุ่นที่นำมาสู่เวิร์กโฟลว์ของคุณ:

• โมดูลคอนเทนเนอร์ เช่นโมดูลกล่องและโมดูลลูปสามารถใช้เป็น องค์ประกอบเลย์เอาต์ระดับบนสุด ซึ่งหมายความว่าคุณสามารถข้ามแถวและคอลัมน์ทั้งหมดเมื่อไม่จำเป็น
• โมดูลพื้นฐาน ตอนนี้เอาท์พุท ทำความสะอาด HTML โดยค่าเริ่มต้น ลบ wrapper พิเศษ <div> s และทำให้หน้าของคุณโหลดเร็วขึ้นและอาจจัดอันดับได้ดีขึ้นในเครื่องมือค้นหา

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

คอนเทนเนอร์ใช้เวทีกลาง

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

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

นี่คือวิธีที่ดู:

แถว
คอลัมน์
โมดูลกล่อง
└──โมดูลหัวเรื่อง
└──โมดูลข้อความ
└──โมดูลปุ่ม

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

วิธีการใหม่ที่มีความคล่องตัวนั้นมีลักษณะเช่นนี้:

โมดูลกล่อง
└──โมดูลหัวเรื่อง
└──โมดูลข้อความ
└──โมดูลปุ่ม

นี่ไม่ได้เกี่ยวกับการคลิกน้อยลงในอินเทอร์เฟซ (แม้ว่ามันจะดีเช่นกัน) มันเกี่ยวกับการสร้างเลย์เอาต์ที่ตรงกับวิธีที่คุณคิดเกี่ยวกับการออกแบบ หากคุณเป็นเหมือนฉันเมื่อคุณจินตนาการถึงส่วนของเนื้อหาคุณกำลังคิดถึงคอนเทนเนอร์และสิ่งที่อยู่ภายใน - ไม่เกี่ยวกับแถวนามธรรมและตารางคอลัมน์ที่ล้อมรอบมัน

ทำไมวิธีการนี้จึงสมเหตุสมผล

การเปลี่ยนแปลงนี้สอดคล้องกับวิธีการทำงานของ CSS ที่ทันสมัยโดยเฉพาะอย่างยิ่งกับ Flexbox และ CSS Grid เทคโนโลยีเหล่านี้ช่วยให้คุณสร้างเลย์เอาต์ที่ซับซ้อนโดยไม่จำเป็นต้องมีโครงสร้างซ้อนที่ซับซ้อนและตอนนี้อินเทอร์เฟซของ Beaver Builder ตรงกับความเป็นจริงนั้น

ประโยชน์ที่ได้รับนอกเหนือไปจากความเรียบง่าย เมื่อคุณใช้โมดูลคอนเทนเนอร์เป็นองค์ประกอบเลย์เอาต์หลักของคุณคุณจะได้รับ:

• การควบคุมโดยตรงมากขึ้น เกี่ยวกับการเว้นระยะการจัดตำแหน่งและพฤติกรรมตอบสนอง แทนที่จะจัดการการตั้งค่าในการทำรังหลายระดับคุณสามารถจัดการทุกอย่างได้ในระดับคอนเทนเนอร์
• การทำซ้ำการออกแบบที่เร็วขึ้น เนื่องจากคุณใช้เวลาในการนำทางน้อยลงผ่านเลเยอร์ของโครงสร้างและเวลาที่มุ่งเน้นไปที่การออกแบบจริงมากขึ้น
• ประสิทธิภาพที่ดีขึ้น เนื่องจากมีการสร้างมาร์กอัป HTML น้อยลงและประมวลผลโดยเบราว์เซอร์
• การบำรุงรักษาง่ายขึ้น เมื่อคุณต้องการกลับมาและแก้ไขเลย์เอาต์ในภายหลัง - ไม่ว่าคุณหรือคนอื่นในทีมของคุณ

โมดูลกล่อง: โรงไฟฟ้าเค้าโครงของคุณ

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

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

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

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

ทำความสะอาด html ใต้ประทุน

ในขณะที่คุณคิดทบทวนวิธีการจัดโครงสร้างเลย์เอาต์ใน Beaver Builder 2.9 ผู้สร้างเองกำลังทำความสะอาดเบื้องหลัง การอัปเดตที่สำคัญครั้งที่สองในรีลีสนี้จะลบองค์ประกอบ Wrapper ที่ไม่จำเป็น <div> ออกจาก โมดูลพื้นฐาน - ส่งผลให้เกิดเอาต์พุต HTML ที่มีความผันผวนมากขึ้นอย่างมีนัยสำคัญ

ในเวอร์ชันก่อนหน้านี้โมดูลเช่นหัวเรื่องรูปภาพและปุ่มรวมถึง <div> เพิ่มเติมรอบเนื้อหาจริง ที่เพิ่มความซับซ้อนและการขยายตัวให้กับมาร์กอัปดังที่แสดงในตัวอย่างต่อไปนี้:

ก่อนที่ Beaver Builder 2.9:

 <div class="fl-module fl-module-heading"> <div class="fl-module-content"> <h2>Welcome to Our Site</h2> </div> </div>

หลังจาก Beaver Builder 2.9:

 <h2>Welcome to Our Site</h2>

การเปลี่ยนแปลงนี้มอบมากกว่ารหัสที่สะอาดกว่า-มันช่วยปรับปรุงประสิทธิภาพในโลกแห่งความเป็นจริง:

• สไตล์ที่เรียบง่าย: ด้วยคลาส wrapper ที่น้อยลงคุณสามารถเขียน CSS ได้มากขึ้นโดยตรง - ไม่มีตัวเลือกที่ซ้อนกันมากกว่า
• เวลาโหลดเร็วขึ้น: องค์ประกอบที่น้อยลงหมายถึงน้อยลงสำหรับเบราว์เซอร์ในการประมวลผล
• SEO ที่ดีขึ้น: ทำความสะอาด HTML ที่มีความหมายมากขึ้นช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาของคุณ

หากคุณเป็นนักพัฒนาหรือเอเจนซี่ที่ทำงานเกี่ยวกับธีมที่กำหนดเองหรือไซต์ลูกค้าคุณจะต้องขอบคุณความชัดเจนและประสิทธิภาพการอัปเดตที่เกิดขึ้น และเนื่องจากการเปลี่ยนแปลงจะใช้กับโมดูลที่เพิ่มหลังจาก 2.9 (หรือเว้นแต่คุณจะเปิดใช้งานการตั้งค่าดั้งเดิม) เลย์เอาต์ที่มีอยู่ของคุณยังคงปลอดภัยและเข้ากันได้

ความยืดหยุ่นโดยไม่ทำลายสิ่งต่างๆ

ตอนนี้ถ้าคุณกำลังคิดว่า “ เดี๋ยวก่อน - CSS ที่กำหนดเองของฉันต้องอาศัยชั้นเรียนห่อหุ้มเหล่านั้น!” -ไม่ต้องกังวล. Beaver Builder 2.9 ได้รับการออกแบบโดยคำนึงถึงสิ่งนั้น ในการรักษาความเข้ากันได้กับสไตล์ที่เก่ากว่าคุณสามารถเปิดใช้งาน wrapper <div> ได้อีกครั้งด้วยการตั้งค่าเดียว:

วิธีกู้คืนมาร์กอัปมาร์คอัพมรดก:

1. ไปที่แผงควบคุม WordPress ของคุณ
2. นำทางไปยัง การตั้งค่า> Beaver Builder> Advanced
3. เปิดใช้งาน “ Force Module Wrapper Divs”

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

ความเข้ากันได้ย้อนหลังในตัว

หนึ่งในส่วนที่ดีที่สุดของ Beaver Builder 2.9? คุณได้รับการปรับปรุงที่ทันสมัยเหล่านี้ทั้งหมดโดยไม่เสี่ยงต่อการทำลายเว็บไซต์ที่มีอยู่ของคุณ

นี่คือวิธีการทำงาน:

• โมดูลที่มีอยู่ (ที่วางไว้ก่อนอัปเดตเป็น 2.9) จะดำเนินการต่อไปด้วยโครงสร้างห่อหุ้มต้นฉบับของพวกเขา
• โมดูลใหม่ ที่เพิ่มเข้ามาหลังจากการอัปเดตจะใช้มาร์กอัปใหม่โดยอัตโนมัติตามค่าเริ่มต้น

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

การเปลี่ยนแปลงเหล่านี้ปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณอย่างไร

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

หน้าเร็วขึ้นและผอมเพรียว
ด้วยองค์ประกอบที่ลดลง <div> และการสนับสนุนสำหรับโมดูลคอนเทนเนอร์เป็นองค์ประกอบระดับบนสุดเลย์เอาต์ของคุณจะสะอาดและเบาลง-แปลไปสู่เวลาโหลดที่เร็วขึ้นและ SEO ที่ดีขึ้น

หน้า Landing
ข้ามความยุ่งเหยิงของแถวและคอลัมน์ที่ไม่จำเป็น ตอนนี้คุณสามารถสร้างหน้า Landing Page ที่มีความยืดหยุ่นและแปลงสภาพสูงโดยใช้เพียงโมดูลคอนเทนเนอร์เช่นโมดูลกล่องสำหรับส่วน HERO และ CTA

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

มาร์กอัปที่เป็นมิตรกับนักพัฒนา
กล่าวคำอำลากับการทำรังมากเกินไป เอาต์พุต HTML ที่มีความคล่องตัวทำให้การกำหนดเป้าหมาย CSS ง่ายขึ้นและลดปัญหาความจำเพาะทำให้การพัฒนาแบบกำหนดเองง่ายขึ้นและบำรุงรักษาได้มากขึ้น

ประสิทธิภาพที่ได้รับรางวัลไคลเอนต์
สำหรับเอเจนซี่ผลประโยชน์มีความชัดเจน: เว็บไซต์ที่เร็วกว่ารหัสทำความสะอาดและกระบวนการสร้างที่ทันสมัยยิ่งขึ้น แม้ว่าลูกค้าของคุณจะไม่พูดว่า“ dev” พวกเขาจะสังเกตเห็นความแตกต่างของประสิทธิภาพและการขัดเงา

วิธีที่ชาญฉลาดในการสร้างเลย์เอาต์

Beaver Builder 2.9 ไม่ได้เป็นเพียงการอัปเดตคุณสมบัติอื่น - เป็นก้าวที่รอบคอบในการสร้างวิธีการสร้างเค้าโครง ด้วยการแนะนำโมดูลคอนเทนเนอร์เป็นฐานรากเค้าโครงที่ยืดหยุ่นและปรับปรุงเอาต์พุต HTML การเปิดตัวนี้นำตัวสร้างบีเวอร์สอดคล้องกับการออกแบบและการพัฒนาที่ทันสมัย

ผลลัพธ์? เวิร์กโฟลว์ที่เร็วขึ้นสะอาดและใช้งานง่ายกว่าซึ่งช่วยให้คุณประหยัดเวลาและให้หน้าประสิทธิภาพที่ดีกว่า ไม่ว่าคุณจะสร้างไซต์โบรชัวร์ง่าย ๆ หรือจัดการโครงการลูกค้าที่ซับซ้อนการปรับปรุงเหล่านี้ช่วยให้คุณสร้างได้อย่างง่ายดายและมั่นใจมากขึ้น

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