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

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

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

แผงเค้าร่าง Beaver Builder คืออะไร?

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

ประโยชน์หลักอย่างรวดเร็ว:

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

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

นี่คือสิ่งที่เจมี่ผู้จัดการฝ่ายพัฒนาต้องพูดเมื่อถูกถามเกี่ยวกับคุณสมบัติที่เธอโปรดปรานใน Beaver Builder:

“ แผงโครงร่างเป็นตัวประหยัดเวลาคุณสามารถเห็นโครงสร้างเนื้อหาของคุณได้อย่างรวดเร็วทำให้หน้ายาวง่ายขึ้นมากในการนำทางนอกจากนี้ยังเหมาะสำหรับการแก้ไขปัญหา - หากการตั้งค่าของโมดูลจะไม่เปิดในตัวแก้ไขหลักลองเข้าถึงมันจากแผงโครงร่างแทน!”

วิธีการเข้าถึงแผงโครงร่าง

วิธีที่ 1: คลิกไอคอนโครงร่าง

1. เปิดหน้าของคุณใน Beaver Builder
2. มองหาไอคอนโครงร่างใน แถบด้านบน
3. คลิกเพื่อเปิดแผง

วิธีที่ 2: แป้นพิมพ์ลัด (เร็วขึ้น)

1. เปิดหน้าของคุณในตัวแก้ไข Beaver Builder
2. กด Shift + O เพื่อสลับแผงเปิด/ปิดทันที
3. กด Shift + T เพื่อขยาย/ยุบทุกส่วน

เหตุใดแผงโครงร่างจึงจำเป็นสำหรับผู้ใช้ Beaver Builder

1. นำทางเลย์เอาต์ขนาดใหญ่ได้อย่างง่ายดาย

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

2. จัดระเบียบเนื้อหาใหม่ได้อย่างง่ายดาย

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

3. รักษาองค์กรที่สมบูรณ์แบบ

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

คุณสมบัติการเปลี่ยนเกมใน Beaver Builder 2.9

การอัปเดตล่าสุดสำหรับ Beaver Builder แนะนำการปรับปรุงที่น่าตื่นเต้นซึ่งทำให้แผงโครงร่างมีประสิทธิภาพยิ่งขึ้น:

เพิ่มความสามารถในการค้นหาและตัวกรอง

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

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

คุณสามารถค้นหาโดย:

• ชื่อโมดูล
• ฉลากที่กำหนดเอง
• รหัสองค์ประกอบ
• ชื่อคลาส CSS

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

ตัวอย่างเช่นมันมีประโยชน์อย่างยิ่งสำหรับการค้นหาแท็กส่วนหัวอย่างรวดเร็ว (H1 - H6) เมื่อเพิ่มประสิทธิภาพหน้าสำหรับ SEO

การแก้ไขฉลากแบบอินไลน์

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

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

เพื่อเพิ่มป้ายกำกับใน:

1. เปิดแผงโครงร่าง
2. วางเมาส์เหนือองค์ประกอบใด ๆ เพื่อเปิดเผยฟิลด์ "พิมพ์ฉลาก"
3. คลิกและพิมพ์ฉลากที่กำหนดเองของคุณ
4. กด ENTER หรือคลิกที่เครื่องหมายถูกเพื่อบันทึก

คุณลักษณะนี้เปลี่ยนวิธีการจัดระเบียบเลย์เอาต์ของคุณช่วยให้คุณสร้างชื่อที่มีความหมายเช่น "ส่วนฮีโร่" "คำรับรอง" หรือ "คำกระตุ้นการตัดสินใจ" ที่ทำให้โครงสร้างหน้าเว็บของคุณเข้าใจได้ทันที

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

เมื่อเพิ่มแล้วป้ายจะปรากฏขึ้นในการซ้อนทับอินเตอร์เฟส Beaver Builder, หน้าต่างการตั้งค่าและแผงโครงร่าง

เคล็ดลับในการเพิ่มประสิทธิภาพของแผงเค้าร่างสูงสุด

ใช้แป้นพิมพ์ลัดอย่างมืออาชีพ

เร่งเวิร์กโฟลว์ของคุณด้วยคีย์บอร์ดที่จำเป็นเหล่านี้:

• Shift + O : สลับแผงโครงร่างเปิด/ปิด
• Shift + T : ขยายหรือยุบมุมมองต้นไม้ทั้งหมด

ทางลัดเหล่านี้จับมือของคุณบนแป้นพิมพ์และเวิร์กโฟลว์ของคุณเคลื่อนไหวได้อย่างราบรื่น

เชี่ยวชาญเมนูคลิกขวา

คลิกขวาที่องค์ประกอบใด ๆ ในแผงโครงร่างเผยให้เห็นตัวเลือกที่ไวต่อบริบท:

• แถวและคอลัมน์ : เปิดการตั้งค่าซ้ำลบลบ
• กลุ่ม: ลบ
• โมดูล : เปิดการตั้งค่าซ้ำลบลบ

เมนูบริบทนี้ให้การเข้าถึงการกระทำทั่วไปอย่างรวดเร็วโดยไม่ทำให้อินเทอร์เฟซยุ่งเหยิง

ใช้ประโยชน์จากตัวบ่งชี้ภาพ

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

• ไอคอน Blue Eye : ระบุว่าการตั้งค่าการมองเห็นสำหรับแถวคอลัมน์หรือโมดูลได้เปลี่ยนจากการตั้งค่า“ เสมอ” เริ่มต้น
• ไอคอนตาสีแดง : ปรากฏขึ้นเมื่อมีการใช้ตรรกะตามเงื่อนไขกับแถวคอลัมน์หรือโมดูล ตัวเลือกนี้พร้อมใช้งานเมื่อติดตั้ง Beaver Themer
• ไอคอนรหัส : แสดงว่ามีการเพิ่ม CSS หรือ JavaScript ที่กำหนดเองลงในแถวคอลัมน์หรือโมดูลผ่านแท็บ ขั้นสูง
• ไอคอนอัศเจรีย์ : สัญญาณว่าโมดูลหายไปจากเค้าโครง สิ่งนี้อาจเกิดขึ้นได้หากโมดูลถูกปิดใช้งานหรือหากปลั๊กอินของบุคคลที่สามที่ให้โมดูลถูกปิดการใช้งานหรือถอนการติดตั้ง

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

จัดระเบียบด้วยการติดฉลากอัจฉริยะ

พัฒนาระบบการติดฉลากที่สอดคล้องกันสำหรับโครงการของคุณ พิจารณาใช้ชื่อเชิงพรรณนาที่ระบุทั้งฟังก์ชั่นและตำแหน่งเช่น:

• “ ส่วนหัว - การนำทาง”
• “ ฮีโร่ - CTA หลัก”
• “ ส่วนท้าย - ข้อมูลติดต่อ”

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

เทคนิคการจัดทำโครงร่างขั้นสูง

การจัดการการขยาย/ยุบเชิงกลยุทธ์

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

การรวมเข้ากับคุณสมบัติ Beaver Builder อื่น ๆ

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

ข้อผิดพลาดทั่วไปที่จะหลีกเลี่ยง

ทำให้โครงสร้างของคุณมากเกินไป

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

การละเลยความสอดคล้องของฉลาก

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

ลืมเกี่ยวกับการพิจารณามือถือ

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

คำถามที่พบบ่อย

ฉันจะเข้าถึงแผงโครงร่างได้อย่างไร

คลิกที่ไอคอนโครงร่างในแถบเครื่องมือ Beaver Builder หรือกด Shift + O เพื่อการเข้าถึงทันที

ฉันสามารถค้นหาองค์ประกอบในแผงโครงร่างได้หรือไม่?

แผงโครงร่างทำให้ง่ายต่อการค้นหาองค์ประกอบในเค้าโครงหน้าของคุณ คลิกไอคอนแว่นขยายและค้นหาตามชื่อโมดูล, ฉลาก, คลาส CSS หรือ ID องค์ประกอบ

ไอคอน Blue Eye หมายถึงอะไร?

ไอคอนตาสีฟ้าบ่งชี้ว่าการตั้งค่าการมองเห็นขององค์ประกอบได้รับการแก้ไขจากการตั้งค่า“ เสมอ” การตั้งค่าเริ่มต้น

ฉันจะเพิ่มฉลากลงในองค์ประกอบได้อย่างไร

ในการเพิ่มป้ายกำกับในแผงโครงร่างให้เลื่อนเมาส์ไปที่แถวคอลัมน์หรือโมดูลใด ๆ ให้คลิกฟิลด์ “ พิมพ์ฉลาก” และป้อนชื่อที่กำหนดเองของคุณ

ทำไมฉันถึงเห็นไอคอนอัศเจรีย์?

ไอคอนอัศเจรีย์ในแผงเค้าร่าง Beaver Builder ระบุโมดูลที่ขาดหายไปหรือปิดการใช้งานโดยปกติจะเกิดจากปลั๊กอินที่ปิดการใช้งานหรือความขัดแย้งของโมดูล

สรุป: เปลี่ยนการสร้างหน้าของคุณวันนี้

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

ประเด็นสำคัญ:

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

ไม่ว่าคุณจะสร้างหน้า Landing Page ที่เรียบง่ายหรือเว็บไซต์หลายแผนกที่ซับซ้อนแผงโครงร่างให้รากฐานขององค์กรที่เปลี่ยนการสร้างหน้าเว็บที่วุ่นวายให้กลายเป็นกระบวนการที่มีความคล่องตัวและเป็นมืออาชีพ

พร้อมที่จะเปลี่ยนประสบการณ์ Beaver Builder ของคุณหรือยัง? เปิดตัวแก้ไข Beaver Builder กด Shift + O เพื่อเปิดตัวแผงโครงร่างและเริ่มสร้างได้อย่างมีประสิทธิภาพมากขึ้นในวันนี้!