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

لهذا السبب كان Beaver Builder 2.9 بمثابة تغيير في اللعبة بالنسبة لي. أدخل هذا التحديث تحسينين رئيسيين حولوا كيفية بناء صفحات ، وأعتقد أنك ستحب المرونة التي يجلبها لسير العمل الخاص بك:

• يمكن الآن استخدام وحدات الحاويات ، مثل وحدة المربع ووحدة الحلقة ، كعناصر تخطيط من المستوى الأعلى -مما يعني أنه يمكنك تخطي الصفوف والأعمدة تمامًا عندما لا تكون هناك حاجة إليها.
• الوحدات الأساسية الآن إخراج HTML نظافة الافتراضي ، وإزالة التفاف الإضافي <div> وجعل صفحاتك يتم تحميلها بشكل أسرع وربما ترتيب أفضل في محركات البحث.

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

الحاويات تأخذ مركز الصدارة

لنتحدث عن أكبر تغيير أولاً. في الإصدارات السابقة من Beaver Builder ، كان نظام Row-and Column هو الخيار الوحيد لك لهيكلة التخطيطات. كان على كل عنصر على صفحتك العيش داخل هذا الإطار.

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

إليكم كيف بدا ذلك:

صف
└ العمود
└ وحدة مربع
└ وحدة العنوان
└ وحدة النص
└ وحدة زر

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

يبدو النهج الجديد المبسط هكذا:

وحدة مربع
└ وحدة العنوان
└ وحدة النص
└ وحدة زر

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

لماذا هذا النهج منطقي

يتماشى هذا التغيير تمامًا مع كيفية عمل CSS الحديثة ، خاصة مع شبكة Flexbox و CSS. تتيح لك هذه التقنيات إنشاء تخطيطات متطورة دون الحاجة إلى هياكل متداخلة معقدة ، والآن تتطابق واجهة Beaver Builder مع هذه الواقع.

الفوائد تتجاوز مجرد البساطة. عند استخدام وحدات الحاويات كعناصر تخطيط أساسية ، تحصل على:

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

وحدة المربع: قوة التخطيط الخاصة بك

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

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

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

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

نظافة HTML تحت الغطاء

أثناء إعادة التفكير في كيفية تنظيم التخطيطات في Beaver Builder 2.9 ، يقوم المنشئ نفسه ببعض التنظيف خلف الكواليس. يزيل التحديث الرئيسي الثاني في هذا الإصدار عناصر التفاف غير الضرورية <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>

يوفر هذا التغيير أكثر من مجرد رمز أنظف-إنه يحسن الأداء في العالم الحقيقي:

• التصميم المبسط: مع وجود عدد أقل من فصول الغلاف ، يمكنك كتابة CSS بشكل أكثر مباشرة - لا توجد أكثر من محددات متداخلة.
• أوقات تحميل أسرع: عدد أقل من العناصر يعني أقل للمتصفح للمعالجة.
• تحسين تحسين محركات البحث (SEO): أنظف وأكثر دلالة تساعد HTML على فهم محتوى المحتوى الخاص بك.

إذا كنت مطورًا أو وكالة تعمل على السمات المخصصة أو مواقع العملاء ، فستقدر الوضوح والكفاءة التي يجلبها هذا التحديث. ولأن التغيير ينطبق فقط على الوحدات النمطية التي تمت إضافتها بعد 2.9 (أو ما لم تُمكّن من الإعداد القديم) ، تظل تخطيطاتك الحالية آمنة ومتوافقة.

المرونة دون كسر الأشياء

الآن ، إذا كنت تفكر ، "انتظر - تعتمد CSS المخصصة على هذه الفصول الزائفة!" -لا تقلق. تم تصميم Beaver Builder 2.9 مع وضع ذلك في الاعتبار. للحفاظ على التوافق مع التصميم الأقدم ، يمكنك إعادة تمكين التفاف <div> مع إعداد واحد:

كيفية استعادة علامة التفاف القديمة:

1. انتقل إلى لوحة معلومات WordPress الخاصة بك
2. انتقل إلى الإعدادات> بيفر باني> متقدم
3. تمكين "divs clospper module force"

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

التوافق المتخلف مدمج في

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

إليك كيف تعمل:

• ستستمر الوحدات النمطية الموجودة (تلك الموضوعة قبل التحديث إلى 2.9) في تقديمها بهيكل التفاف الأصلي.
• ستستخدم الوحدات الجديدة التي تمت إضافتها بعد التحديث تلقائيًا علامة تنظيف جديدة بشكل افتراضي.

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

كيف تعمل هذه التغييرات على تحسين أداء موقع الويب الخاص بك

قدم Beaver Builder 2.9 أداءً قويًا وسير عملًا يساعد على تحميل مواقع الويب الخاصة بك بشكل أسرع ، وترتيب أعلى ، وتقديم تجربة مستخدم أكثر سلاسة.

أسرع ، صفحات أصغر
مع انخفاض عناصر الغلاف <div> ودعم وحدات الحاويات كعناصر من المستوى الأعلى ، تكون تخطيطاتك أكثر نظافة وأخف وزناً إلى أوقات تحميل أسرع وأفضل محركات البحث.

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

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

ترميز مطور صديق
قل وداعا إلى التعشيش المفرط. يقوم إخراج HTML المبسط بتبسيط استهداف CSS ويقلل من مشكلات الخصوصية ، مما يجعل التطوير المخصص أسهل وأكثر قابلية للصيانة.

أداء الحائز على العميل
بالنسبة للوكالات ، تكون الفوائد واضحة: مواقع أسرع ورمز أنظف وعملية بناء أكثر حداثة. حتى لو لم يتحدث عملاؤك "dev" ، فسوف يلاحظون الفرق في الأداء والتلميع.

طريقة أكثر ذكاء لبناء تخطيطات

Beaver Builder 2.9 ليس مجرد تحديث للميزات - إنها خطوة مدروسة للأمام في كيفية تعاملنا مع بناء التخطيط. من خلال إدخال وحدات الحاويات كمؤسسات تخطيط مرنة وتبسيط إخراج HTML ، فإن هذا الإصدار يجلب Beaver Builder تمشيا مع ممارسات التصميم والتطوير الحديثة.

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

هل أنت مستعد لرفع مستوى تخطيطاتك؟
تحديث إلى Beaver Builder 2.9 وابدأ في بناء مواقع أكثر ذكاءً وأصغر وأكثر استعدادًا في المستقبل.