10 هياكل صف متداخلة إبداعية يمكنك بناءها في Divi 5

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

في هذا المنشور ، سنستكشف 10 طرق مبتكرة لتسخير الصفوف المتداخلة ، ونلهمك لدفع حدود قدرات تخطيط Divi 5.

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

ما هي الصفوف المتداخلة في Divi 5؟

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

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

إدخال صفوف متداخلة يجلب مجموعة من المزايا إلى Divi 5:

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

كيفية الوصول إلى الصفوف المتداخلة

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

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

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

نصائح الإعداد

لتحقيق أقصى استفادة من الصفوف المتداخلة ، ضع هذه النصائح العملية في الاعتبار:

• ابدأ بتثبيت نظيف: نظرًا لأن Divi 5 لا يزال في Alpha العام ، ابدأ بتركيب جديد لـ WordPress و Divi لمشاريع جديدة. سيتيح لك ذلك الاستفادة الكاملة من الهندسة المعمارية المحدثة وتجنب مشكلات التوافق مع مواقع DIVI الحالية.
• اختبار على التدريج: يمكنك أيضًا استخدام Divi 5 على موقع التدريج. يساعدك هذا النهج على استكشاف ميزات Divi 5 وإمكاناتها مع تجنب أي أخطاء في مرحلة ألفا يمكن أن تؤثر على المواقع الحية.

هياكل الصف المتداخل الإبداعية يمكنك بناءها في Divi 5

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

1. أقسام البطل

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

2. شبكة محفظة غير متناظرة

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

3. عرض المنتجات

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

4. الرؤوس

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

5. تذييلات

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

6. محتوى قاعدة المعرفة

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

7. جداول التسعير التفاعلية

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

8. معارض الفيديو التفاعلية

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

9. صور عضو الفريق

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

10. دعوة لافتات العمل

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

أفضل الممارسات للتصميم مع الصفوف المتداخلة

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

1. تخطيط تخطيطات مع الرسومات: قبل الغوص في صفوف Divi 5 المتداخلة ، فكر في رسم أو تصنيف هياكل الصف الخاصة بك لرسم التسلسل الهرمي وتدفق المحتوى. يمكن أن يمنحك هذا فكرة جيدة عن المظهر الذي ستذهب إليه ويضمن تنظيمًا منطقيًا من الصفوف والأعمدة.
2. الحفاظ على نظافة التعشيش: في حين أن Divi 5 يدعم التعشيش اللامتناهي ، فإن الطبقات المفرطة يمكن أن تكون تحديًا تحديًا. للحفاظ على واجهة نظيفة ، تهدف إلى تعشيش مستويات 2-3 لمعظم التخطيطات.
3. تحجيم الأعمدة: قم بإنشاء تصميمات مستجيبة باستخدام خيارات تحجيم الأعمدة والمحاذاة Divi 5. على سبيل المثال ، قم بضبط عرض العمود في الصفوف المتداخلة لضمان تخطيطات صديقة للهاتف المحمول.
4. تنظيم مع الملصقات: في البناء المرئي ، تسمية صفوف بأسماء فريدة من نوعها للبقاء منظمة. هذا مهم بشكل خاص في التخطيطات المعقدة مثل المحافظ أو جداول التسعير.
5. استجابة الاختبار: معاينة تخطيطات الصفوف المتداخلة على سطح المكتب والأجهزة اللوحية والأجهزة المحمولة باستخدام نقاط التوقف DIVI 5 لضمان مداخن المحتوى بشكل صحيح.
6. استخدم العظة المرئية: للتمييز بصريًا ، حاول دمج ألوان الخلفية أو التدرجات أو الأنماط في صفوف متداخلة.

العنان للإبداع مع الصفوف المتداخلة في Divi 5

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

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