إذا كنت قد وجدت نفسك من أي وقت مضى التمرير إلى ما لا نهاية لتجد أن عنصرًا محددًا محددًا مدفون بعمق في تصميم صفحة الويب الخاصة بك ، فأنت لست وحدك. لحسن الحظ ، فإن لوحة مخطط Beaver Builder موجودة هنا لتسريع سير العمل الخاص بك وتحويل الفوضى في بناء الصفحة إلى كفاءة منظمة.

توفر لوحة مخطط Beaver Builder عرضًا مرئيًا لشجرة تخطيط صفحتك ، مما يجعل من السهل التنقل واختيار وتنظيم الصفوف والأعمدة والوحدات النمطية - تخطي سير عملك وتحسين كفاءة بناء الصفحات.

في هذه المقالة ، ستتعلم كيفية الاستفادة من لوحة مخطط Beaver Builder لقطع وقت بناء صفحتك إلى النصف مع الحفاظ على مشروع WordPress منظم.

ما هي لوحة Beaver Builder Outline؟

لوحة مخطط Beaver Builder هي عرض شجرة هرمي يعرض بنية الصفحة بأكملها بتنسيق منظم قابل للملاحة. بدلاً من البحث بصريًا من خلال تخطيطك ، يمكنك الحصول على عرض عين الطائر لكل صف وعمود ووحدة - صنع صفحات بناء أسرع وأكثر تنظيماً وأقل إحباطًا:

الفوائد الرئيسية في لمحة:

• تنقل تخطيطات كبيرة على الفور
• إعادة تنظيم المحتوى ببساطة السحب والإفلات
• تسمية وتنظيم العناصر أثناء بناءها
• استكشاف الأخطاء وإصلاحها مشكلات التخطيط بسرعة
• التعاون بشكل أكثر فعالية مع أعضاء الفريق

تقوم هذه الميزة القوية بتحويل كيفية تفاعلك مع تخطيطاتك ، مما يوفر واجهة مبسطة تضعك في التحكم الكامل في بنية صفحتك. سواء كنت تقوم ببناء صفحة مقصودة بسيطة أو موقع ويب متعدد القسمين معقدًا ، فإن لوحة المخطط التفصيلي تبقي كل شيء منظم ويمكن الوصول إليه.

إليك ما قاله جيمي ، مدير التطوير ، عندما سئل عن ميزاتها المفضلة في بيفر بويليدر:

"لوحة الخطوط العريضة هي مدخرات زمنية. يمكنك رؤية بنية المحتوى الخاصة بك بنظرة ، مما يجعل الصفحات الطويلة أسهل بكثير للتنقل. إنه أمر رائع أيضًا لاستكشاف الأخطاء وإصلاحها - إذا لم تفتح إعدادات الوحدة في المحرر الرئيسي ، فحاول الوصول إليها من لوحة الخطوط العريضة بدلاً من ذلك!"

كيفية الوصول إلى لوحة الخطوط العريضة

الطريقة 1: انقر فوق أيقونة المخطط التفصيلي

1. افتح صفحتك في Beaver Builder
2. ابحث عن أيقونة المخطط التفصيلي في الشريط العلوي
3. انقر لفتح اللوحة

الطريقة 2: اختصار لوحة المفاتيح (أسرع)

1. افتح صفحتك في محرر بيفر باني
2. اضغط على Shift + O لتبديل اللوحة المفتوحة/مغلقة على الفور
3. اضغط على Shift + T لتوسيع/انهيار جميع الأقسام

لماذا تعتبر لوحة الخطوط العريضة ضرورية لمستخدمي Beaver Builder

1. التنقل في تخطيطات كبيرة بسهولة

هل تتذكر إحباط محاولة سحب صف من أسفل صفحة طويلة؟ تلك الأيام قد انتهت. تلغي لوحة المخطط التفصيلي الحاجة إلى التمرير الذي لا نهاية له عن طريق منحك الوصول الفوري إلى أي عنصر في صفحتك. ما عليك سوى النقر فوق أي عنصر في المخطط التفصيلي للقفز مباشرة إلى هذا العنصر في تخطيطك - يشبه وجود GPS لهيكل صفحتك.

2. إعادة تنظيم المحتوى دون عناء

يصبح نقل المحتوى حول تخطيطك بسيطًا بشكل لا يصدق مع وظيفة السحب والإفلات من لوحة Outline. يمكنك إعادة ترتيب الصفوف والأعمدة والوحدات النمطية السريعة بسرعة والتي تأتي أحيانًا مع عناصر السحب في واجهة البناء الرئيسية. هذا أمر ذي قيمة خاصة عندما تقوم بإعادة هيكلة المحتوى الحالي أو تجربة ترتيبات تخطيط مختلفة.

3. الحفاظ على منظمة مثالية

تساعدك لوحة المخطط التفصيلي على البقاء منظمًا خلال عملية البناء بأكملها. يمكنك رؤية الهيكل الكامل لصفحتك في لمحة ، مما يجعل من السهل تحديد المناطق التي قد تحتاج إلى الاهتمام أو إعادة التنظيم. عرض عين الطائر هذا لا يقدر بثمن للحفاظ على هياكل الصفحة النظيفة المنطقية.

ميزات تغيير اللعبة في Beaver Builder 2.9

يقدم آخر تحديث لـ Beaver Builder تحسينات مثيرة تجعل لوحة الخطوط العريضة أكثر قوة:

إمكانيات البحث والتصفية المحسنة

يقدم Beaver Builder 2.9 ميزة بحث وجدتها لوقت حقيقي للمشاريع المعقدة:

انقر فوق أيقونة الزجاج المكبرة واكتب جزءًا من اسم أي عنصر - سواء كان "المربع" أو "الحلقة" أو أي نوع وحدة أخرى. ستقوم لوحة المخطط التفصيلي بتوضيح العقد المطابقة على الفور ، مما يجعل من السهل تحديد موقع عناصر محددة حتى في المخططات الأكثر تعقيدًا.

يمكنك البحث بواسطة:

• أسماء الوحدات
• تسميات مخصصة
• معرفات العنصر
• أسماء فئة CSS

تعتبر وظيفة البحث هذه ذات قيمة خاصة للمطورين والمستخدمين المتقدمين الذين يعملون مع فئات مخصصة ومعرفات ، وكذلك أي شخص يدير صفحات كبيرة غنية بالمحتوى.

على سبيل المثال ، من المفيد بشكل خاص تحديد علامات الرأس بسرعة (H1 - H6) عند تحسين الصفحات لكبار المسئولين الاقتصاديين.

تحرير الملصقات المضمنة

واحدة من أكثر التحسينات العملية في الإصدار 2.9 هي القدرة على إضافة وتحرير الملصقات العقدة مباشرة داخل لوحة الخطوط العريضة:

لا مزيد من القفز بين الشاشات لتنظيم عناصرك - يمكنك الآن تسمية العناصر أثناء إنشاءك ، وإنشاء نظام تسمية واضح يكون منطقيًا لمشروعك.

لإضافة ملصق مضمّن:

1. افتح لوحة الخطوط العريضة
2. تحوم على أي عنصر للكشف عن حقل "Type A Label"
3. انقر واكتب التسمية المخصصة الخاصة بك
4. اضغط على Enter أو انقر فوق علامة CheckMark

تقوم هذه الميزة بتحويل كيفية تنظيم تخطيطاتك ، مما يسمح لك بإنشاء أسماء ذات معنى مثل "قسم البطل" أو "الشهادات" أو "Call-to-action" التي تجعل بنية صفحتك مفهومة على الفور.

يمكنك أيضًا إضافة تسمية عن طريق الانتقال إلى علامة التبويب المتقدمة لأي صف أو عمود أو وحدة. قم بالتمرير لأسفل إلى قسم عنصر HTML وأدخل اسمًا في حقل التسمية . توفر الملصقات وصفًا قصيرًا لمحتوى العنصر أو الغرض منه:

بمجرد إضافتها ، تظهر الملصقات في تراكب واجهة Beaver Builder ، ونافذة الإعدادات ، ولوحة الخطوط العريضة.

نصائح لزيادة كفاءة لوحة الخطوط العريضة إلى الحد الأقصى

استخدم اختصارات لوحة المفاتيح مثل المحترف

تسريع سير العمل الخاص بك مع اختصارات لوحة المفاتيح الأساسية هذه:

• Shift + O : قم بتبديل لوحة الخطوط التفصيلية مفتوحة/مغلقة
• Shift + T : توسيع أو انهيار عرض الشجرة بأكمله

هذه الاختصارات تبقي يديك على لوحة المفاتيح وسير العمل الخاص بك يتحرك بسلاسة.

إتقان قائمة النقر بزر الماوس الأيمن

النقر بزر الماوس الأيمن على أي عنصر في لوحة المخطط التفصيلي يكشف عن خيارات حساسة للسياق:

• الصفوف والأعمدة : فتح الإعدادات ، ونسر ، قم بإزالة
• المجموعة: إزالة
• الوحدات النمطية : فتح الإعدادات ، مكررة ، إزالة

توفر قائمة السياق هذه وصولًا سريعًا إلى الإجراءات الشائعة دون تشوش الواجهة.

الاستفادة من المؤشرات البصرية

تتضمن لوحة المخطط التفصيلي مؤشرات رمز مفيدة توفر نظرة فورية على عناصرك:

• أيقونة العين الزرقاء : يشير إلى أن إعداد الرؤية للصف أو العمود أو الوحدة النمطية قد تم تغييره من إعداد "دائمًا" الافتراضي.
• رمز العين الأحمر : يظهر عندما يتم تطبيق المنطق الشرطي على صف أو عمود أو وحدة. يتوفر هذا الخيار عند تثبيت Beaver Themer.
• رمز رمز : يوضح أنه تمت إضافة CSS أو JavaScript المخصصة إلى الصف أو العمود أو الوحدة النمطية عبر علامة التبويب المتقدمة .
• أيقونة تعجب : إشارات إلى أن الوحدة النمطية مفقودة من التصميم. قد يحدث هذا إذا تم تعطيل الوحدة النمطية أو إذا تم إلغاء تنشيط أو إلغاء تثبيت الجهة الخارجية إذا تم إلغاء تثبيت الوحدة النمطية.

تساعدك هذه الإشارات المرئية على تحديد العناصر بسرعة مع تكوينات خاصة أو مشكلات محتملة.

تنظيم مع وضع العلامات الذكية

تطوير نظام وضع العلامات متسق لمشاريعك. فكر في استخدام أسماء وصفية تشير إلى كل من الوظيفة والموقع ، مثل:

• "رأس - الملاحة"
• "Hero - Main CTA"
• "تذييل - معلومات الاتصال"

هذا النهج المنهجي يجعل التعاون أسهل ويساعدك على العودة إلى المشاريع بعد أشهر بوضوح تام:

تقنيات لوحة الخطوط العريضة المتقدمة

إدارة الاستراتيجية/الانهيار

تتذكر لوحة الخطوط العريضة الأقسام التي وسعتها أو انهارت. استخدم هذا لصالحك من خلال الحفاظ على توسيع الأقسام التي يتم الوصول إليها بشكل متكرر أثناء انهيار المناطق التي لا تعمل عليها حاليًا. هذا يخلق طريقة عرض مخصصة تتطابق مع تركيزك الحالي.

التكامل مع ميزات بناء القندس الأخرى

تعمل لوحة الخطوط العريضة بسلاسة مع ميزات بيفر الأخرى. استخدمه بالتزامن مع أدوات التحرير المستجيبة للتنقل بسرعة بين الأقسام المختلفة أثناء اختبار طرق عرض الأجهزة المختلفة. هذه المجموعة قوية بشكل خاص لضمان عمل تخطيطاتك بشكل مثالي عبر جميع أحجام الشاشة.

أخطاء شائعة لتجنب

الإفراط في تعقيد الهيكل الخاص بك

في حين أن لوحة الخطوط العريضة تجعل التخطيطات المعقدة قابلة للإدارة ، قاوم الرغبة في إنشاء هياكل معقدة غير ضرورية. تهدف إلى التسلسلات الهرمية المنطقية والنظيفة التي تخدم أهداف المحتوى الخاصة بك.

إهمال تناسق الملصقات

وضع العلامات غير المتسقة يهزم الغرض من التنظيم. إنشاء اتفاقيات تسمية في وقت مبكر من مشروعك والتمسك بها طوال الوقت.

نسيان اعتبارات الهاتف المحمول

تذكر أن تخطيط سطح المكتب المنظم بشكل جميل قد يحتاج إلى تعديلات للأجهزة المحمولة. استخدم لوحة المخطط التفصيلي بالتزامن مع أدوات التحرير المستجيبة لشركة Beaver Builder لضمان عمل الهيكل الخاص بك في جميع الأجهزة.

الأسئلة المتداولة

كيف يمكنني الوصول إلى لوحة الخطوط العريضة؟

انقر فوق أيقونة المخطط التفصيلي في شريط أدوات Beaver Builder أو اضغط على Shift + O للوصول الفوري.

هل يمكنني البحث عن عناصر في لوحة المخطط التفصيلي؟

تجعل لوحة المخطط التفصيلي من السهل البحث عن عناصر في تخطيط صفحتك. انقر فوق أيقونة الزجاج المكبرة والبحث حسب اسم الوحدة أو التسمية أو فئة CSS أو معرف العنصر.

ماذا يعني أيقونة العين الزرقاء؟

يشير أيقونة العين الزرقاء إلى أنه تم تعديل إعدادات رؤية العنصر من إعداد "دائمًا" الافتراضي.

كيف يمكنني إضافة ملصقات للعناصر؟

لإضافة تسمية في لوحة المخطط التفصيلي ، تحوم فوق أي صف أو عمود أو وحدة ، انقر فوق حقل "اكتب التسمية" ، وأدخل اسمك المخصص.

لماذا أرى أيقونة تعجب؟

تشير أيقونة تعجب في لوحة مخطط Beaver Builder إلى وحدة مفقودة أو معطلة ، وعادةً ما تكون بسبب الإضافات أو تعارضات الوحدة النمطية.

الخلاصة: قم بتحويل صفحتك اليوم

لوحة مخطط Beaver Builder ليست مجرد أداة تنقل ؛ إنه نظام تحويل سير العمل الكامل. من ميزات البحث والتسمية المحسّنة في Beaver Builder 2.9 إلى المؤشرات المرئية القوية والقدرات التنظيمية ، فإن إتقان هذه اللوحة سيجعلك أكثر كفاءة وفعالية لصفحات WordPress.

الوجبات الرئيسية:

• استخدم اختصارات لوحة المفاتيح (Shift + O) للوصول بشكل أسرع
• تنفيذ وضع العلامات المتسقة من بداية كل مشروع
• الاستفادة من المؤشرات المرئية لضمان الجودة
• تتكامل مع سير عمل التصميم المستجيب
• اجعل لوحة الخطوط العريضة جزءًا من روتين المبنى العادي الخاص بك

سواء كنت تقوم ببناء صفحات مقصودة بسيطة أو مواقع ويب متعددة المقاطعات معقدة ، توفر لوحة الخطوط العريضة الأساس التنظيمي الذي يحول بناء الصفحات الفوضوية إلى عملية مهنية مبسطة.

هل أنت مستعد لتحويل تجربتك البناء؟ افتح محرر Beaver Builder ، واضغط على Shift + O لإطلاق لوحة المخطط التفصيلي ، والبدء في البناء بكفاءة أكبر اليوم!