الصفوف المتداخلة مقابل الأقسام المتخصصة في Divi 5 (ولماذا ننهسها)

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

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

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

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة اليوم.

بأثر رجعي من الأقسام المتخصصة

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

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

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

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

مكّنت الأقسام المتخصصة هياكل الأعمدة المتساوية الزائفة من خلال ثني قواعد الرمز القصير ، مما يخلق ما لم يكن ممكنًا في الأقسام العادية.

ألن يكون من الرائع إذا كانت الأقسام العادية قوية بما يكفي لفعل ما تحتاجه؟

صفوف متداخلة وطريقة أفضل لبناء الصفحات

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

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

كيفية إعادة إنشاء قسم تخصص بسهولة مع صفوف متداخلة

تستخدم حزمة تخطيط استئجار Scooter (وخاصة قسم HOMEREMER'S HERO) قسمًا متخصصًا لوضع العناصر الرئيسية. ومع ذلك ، بدلاً من استخدام قسم التخصص مع إعداداته الفريدة ، سنستخدم الصفوف المتداخلة لتحقيق تأثير مماثل.

ملاحظة: يحتوي Divi 5 حاليًا على أقسام متخصصة ، لكن سيتم إهمالها في النهاية (لكنهم سيظلون يعملون ويكونون معتمدين على الصفحات التي توجد فيها حاليًا).

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

اضبط عرض القسم وعرضه كحد أقصى إلى 100 ٪.

تأكد من أن الصف داخل القسم يحتوي على هيكل من العمودين وتقسيم 3/5 + 2/5. أيضا ، اضبط عرض الصف وعرضه كحد أقصى إلى 100 ٪.

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

سوف يضم العمود الأيسر الجانب الأكثر تعقيدًا (من حيث الوحدات النمطية) ، وسيضم العمود الأيمن الصورة المميزة الكبيرة.

سنضيف جميع وحداتنا للتعرف على التصميم. يتضمن ذلك وحدة العنوان أو النص أولاً ، ثم صف متداخل (عمودين من العرض المتساوي) ، ووحدة صورة في العمود الأيسر ، ووحدة نصية ووحدة زر في العمود الأيمن. احتياطي إلى الصف الأصل ، في العمود الأيمن ، أضف وحدة صورة واحدة.

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

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

الآن ، افتح إعدادات العمود الأيمن مباشرة أسفل الصف الأصل. استخدم صورة خلفية العمود.

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

وهذا هو تقريبا لترفيه القسم التخصص (على سطح المكتب). نظرًا لأننا استخدمنا بنية عمود الإعداد المسبق (3/5 + 2/5 أعمدة) ، فإن Divi لديه بعض التحجيم الافتراضي وتحديد المواقع عند نقاط التوقف المختلفة التي يجب معالجتها. يمكنك تجنب ذلك باستخدام عمود الوالد الواحد ولكن مجموعات الوحدات النمطية للاحتفاظ بالمحتوى للجوانب اليمنى واليسرى لهذا القسم.

ولكن على الأقل في هذه المرحلة ، أنت تعلم أنه من الممكن أن يتم Nest Rows وإعادة إنشاء أقسام متخصصة.

الدخول إلى مستقبل جديد

يقترب Divi 5 من إصدار تجريبي ، لكننا بذلت بالفعل جهودًا كبيرة لإصلاح نظام تصميم Divi.

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

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة اليوم.

قم بتنزيل Divi 5Learn أكثر عن Divi 5