كيفية تمديد الوحدات لإنشاء تخطيطات عمود فريدة في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

قبل

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

بعد، بعدما

هذا هو المخطط بعد تمديد وحدتي الصور والوحدات النمطية للنصوص الثلاثة المسمى بالأرقام "01" و "03" و "05".

التغيير دقيق ولكن يجب أن تكون قادرًا على رؤية أن الوحدات النمطية قد امتدت لتشغل العمود المجاور. والشيء الوحيد المطلوب لتحقيق ذلك هو إعداد هامش بسيط بنسبة -100٪.

والنتيجة على الجهاز اللوحي أكثر إثارة.

فهم المفهوم

بشكل افتراضي ، يبلغ عرض كل وحدة Divi 100 ٪ مما يعني أن كل وحدة تضعها في عمود ستمتد بالعرض الكامل للعمود الذي تجلس فيه. عرض الحضيض هو ما تستخدمه Divi لتحديد مقدار المسافة بين كل عمود. لذلك في هذا البرنامج التعليمي ، من المهم ضبط عرض Gutter على 1 للتخلص من تلك المساحة.

فيما يلي توضيح لكيفية امتداد كل وحدة للعرض الكامل لعمود في صف مع تعيين عرض هامش معيّن على 1.

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

في هذا الرسم التوضيحي ، يمكنك أن ترى أنه بإضافة هامش أيسر بنسبة 100٪ إلى الوحدة النمطية في العمود 5 ، فإنه يوسع الوحدة إلى اليسار لتحتل كلا من العمود 5 والعمود 4.

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

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

لماذا استخدام تخطيط ستة أعمدة؟

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

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

تنفيذ التصميم

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

إنشاء القسم والصفوف الخاصة بك

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

ثم قم بتحديث إعدادات الصف كما يلي:

لون الخلفية: # 222831
عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم
الهامش المخصص: 0 بكسل للأعلى و 0 بكسل للأسفل
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

احفظ التغييرات.

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

لإنشاء الصف الثالث ، قم ببساطة بتكرار الصف الثاني.

إضافة وحدات إلى الصف 1

في العمود الأول للصف الأول العلوي ، أضف وحدة نصية بالإعدادات التالية:

لون النص: فاتح
حجم نص النص: 16 بكسل
الحشو المخصص: 2vw Top ، 2vw Bottom ، 2vw Left ، 2vw Right

في العمود الثاني من الصف الأول ، أضف وحدة blurb بالإعدادات التالية:

العنوان: [أدخل العنوان]
المحتوى: [حذف]
الرمز: [اختر أيقونة]
لون الأيقونة: #eeeeee
حجم خط الأيقونة: 50 بكسل
لون النص: فاتح
اتجاه النص: الوسط
الحشو المخصص: 3vw Top ، 2vw Bottom

احفظ التغييرات

في العمود الثالث ، أضف صورة.

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

قم بتحديث إعدادات الحاجز كما يلي:

إظهار المقسم:
تعطيل في: الهاتف

إضافة وحدات إلى الصفين 2 و 3

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

ثم أضف وحدة نصية إلى العمود الثاني بما يلي:

المحتوى:

<h2>Product</h2>
01

لون نص النص: #ffffff
حجم نص النص: 50 بكسل
ارتفاع خط النص: 1em
اتجاه النص: صحيح
العنوان 2 محاذاة النص: اليسار
لون نص العنوان 2: #ffffff
ارتفاع خط العنوان 2: 3em
الحشو المخصص: 2vw Top ، 2vw Bottom ، 2vw Left ، 2vw Right

بعد ذلك انسخ وحدة النص التي أنشأتها للتو والصقها في العمود 4 والعمود 6.

يمكنك أيضًا لصق نفس وحدة النص في العمود 3 والعمود 5 والعمود 6 من الصف 3. بعد ذلك يمكنك استخدام المحرر المضمن لتغيير أرقام كل وحدة من وحدات النص حتى تتمكن من معرفة كيفية تكديس هذه الوحدات النمطية المحمول في وقت لاحق.

في العمود 2 من الصف 3 ، أضف صورة أخرى.

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

إليك الشكل الذي يجب أن يبدو عليه تخطيطك في هذه المرحلة (تمثل المربعات الفارغة وحدة فاصل):

إضافة هامش سلبي لتوسيع الوحدات النمطية إلى أعمدة أخرى

في هذه المرحلة ، يمكننا البدء في توسيع وحداتنا باستخدام الهامش السلبي. هذه العملية سهلة للغاية.

افتح إعدادات وحدة الصورة للصورة في الصف الأول. نظرًا لأننا نريد تمديد الصورة إلى اليمين ، فسنضيف هامشًا أيمنًا بنسبة 100٪.

بعد ذلك ، أضف هامش أيسر بنسبة 100٪ إلى وحدة النص في الصف 2 ، العمود 3.

الآن انسخ أنماط الوحدة والصقها في وحدات النص في الصف 2 ، العمود 6 وأيضًا في وحدة النص في الصف 3 ، العمود 5.

كل ما تبقى هو تمديد الصورة في الصف 3 ، العمود 2. تحديث وحدة الصورة بهامش مخصص -100٪ يسار.

إضافة ألوان الخلفية إلى أعمدتك

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

لون خلفية العمود 1: # 393e46

للصف الثاني ، يضاف ما يلي:

لون خلفية العمود 1: #eeeeee
لون خلفية العمود 4: # 7971ea
لون خلفية العمود 5: # 393e46
لون خلفية العمود 6: # 393e46

وللصف الأخير يضاف ما يلي:

لون خلفية العمود 3: # 7971ea
لون خلفية العمود 6: # 7971ea

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

ضبط التخطيط لشاشة الهاتف الذكي

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

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

انتقل إلى إعدادات الصفحة وأضف CSS المخصص التالي ضمن علامة التبويب Advanced:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

ما يفعله مقتطف CSS هذا هو تعيين الهامش الأيمن والأيسر لجميع الوحدات على 0٪ عندما يكون حجم الشاشة مساويًا أو أقل من 479 بكسل. هذا يحل المشكلة بشكل جيد!

الآن دعنا نتحقق من التصميم النهائي.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!