كل ما تحتاج لمعرفته حول نظام تخطيط Divi 5 Flexbox

تعد مواقع الويب المرنة والسروالية حاسمة ، خاصة في عالم WordPress السريع. يجب أن تتكيف مواقع الويب الحديثة بسلاسة عبر مختلف أحجام الشاشة ، من أجهزة الكمبيوتر المكتبية العريضة إلى شاشات الهاتف المحمول. Divi 5 عبارة عن إعادة كتابة أساسية كاملة لـ Divi 4 ، مصممة بالسرعة والأداء والمرونة في الاعتبار.

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

لنبدأ.

ما هو Flexbox؟

Flexbox ، أو تخطيط المربع المرن ، هو نموذج تخطيط CSS مصمم لترتيب عناصر في الصفوف أو الأعمدة ، مما يسمح لهم بالثني أو الانكماش أو التوسع لتناسب المساحة المتاحة.

اشترك في قناتنا على YouTube

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

دمج Divi 5 من FlexBox

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

Divi 4 مقابل Divi 5

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

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

الميزات الرئيسية لنظام Divi 5's Flexbox

يحتوي نظام تخطيط Flexbox الخاص بـ Divi 5 على ميزات يعيد تعريف كيفية تعامل المصممين إلى مواقع إنشاء مواقع بناء. يمكن للمستخدمين فتح مجموعة قوية من الأدوات البديهية لإنشاء تصميمات ديناميكية وسريعة الاستجابة من خلال تمكين خيار Flex. إليك تفاصيل عن قدراتها الأساسية:

أي تصميم ، لا حدود

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

يمكن للمصممين تعديل وضع الوحدة النمطية وتصميمها لتناسب أحجام شاشة محددة.

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

تحديد المواقع والمحاذاة المتقدمة

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

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

السيطرة المعززة على التباعد واللف

توفر علامة التبويب "Divi 5" في Divi 5 خيارات مثل النمو لملء وتقلص إلى الملاءمة والعرف ، مما يمنح المصممين تحكمًا بديهيًا في تحجيم العناصر والتباعد.

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

التكامل مع ميزات Divi 5 الأخرى

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

من كتلة إلى فليكس

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

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

كيفية استخدام نظام تخطيط Divi 5 Flexbox

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

كما في Divi 4 ، حدد وحدة نمطية لوضعها في العمود الأول.

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

يمكنك التحكم في التباعد بين الأعمدة عن طريق ضبط الفجوة الأفقية والرأسية.

في حقل اتجاه التصميم ، يمكنك اختيار عرض محتويات الصف من اليسار إلى اليمين (الصف) ، من اليمين إلى اليسار (الصف) ، العمود (الإعداد الافتراضي) ، والعمود العكسي.

تبرير تحكم المحتوى في محاذاة وتوزيع العناصر المرنة داخل القسم أو الصف. يمكن محاذاةها من البداية (أعلى) ، الوسط ، النهاية (أسفل) ، المسافة بين ، المساحة المحيطة بها ، أو المساحة بالتساوي.

يتحكم محاذاة العناصر في محاذاة العناصر المرنة داخل القسم أو الصف. يمكنك محاذاة العناصر في بداية القسم أو المركز أو النهاية (يمينًا) أو تمديدها عبر الحاوية.

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

يمنحك نظام تخطيط Divi 5 Flexbox الأدوات لترتيب العناصر بالضبط ما تريده دون الحاجة إلى النضال مع التعليمات البرمجية.

فوائد مصممي الويب والمطورين

يوفر نظام تخطيط Flexbox من Divi 5 العديد من المزايا لكل مستخدم Divi. يجعل إنشاء تخطيطات معقدة وسهولة أسهل مع جهد أقل.

1. بناء تخطيطات معقدة بسهولة

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

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

2. الاستجابة المعززة

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

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

3. الحرية الإبداعية

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

تجعل واجهة النظام التصميم المهني في متناول أي شخص ، بينما توفر عناصر التحكم المتقدمة دقة للمستخدمين الأكثر تقدماً.

4. الأداء وقابلية التوسع

يقوم Flexbox بإنشاء CSS أنظف وأخف وزناً من الإطار القائم على الرمز القريب من Divi 4 ، مما يؤدي إلى أداء أسرع في الموقع وأداء تحسين محركات البحث (SEO) بشكل أفضل. يعزز هذا الرمز الأمثل القدرة على الصيانة ويساعد مواقع الويب على التحميل بسرعة ، مما يوفر تجربة مستخدم أفضل للزائرين.

يدعم تصميم Flexbox للتفكير إلى الأمام الميزات القادمة مثل Loop Builder ، مما يجعل Divi 5 حلًا قابلًا للتطوير لبناء شبكات المدونات أو قوائم المنتجات.

يعيد نظام تخطيط Flexbox تعريف ما هو ممكن مع Divi

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

هل أنت مستعد لبناء تحفة التالية؟ جرب أحدث Divi 5 Alpha وانضم إلى مجتمعنا لمشاركة ملاحظاتك.