كيفية إنشاء CSS Grid Layout لوحدات Divi

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

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

ربما يكون من الأفضل أن ننتقل ونبين لك كيف يعمل هذا.

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

وإليك نظرة خاطفة على نفس الأسلوب باستخدام وحدات وتصميمات مختلفة من Fitness Gym Layout Pack.

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

إنشاء مخطط شبكة CSS مخصص لوحدات Divi

الجزء 1: إضافة الوحدات النمطية إلى عمود Divi

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

للبدء ، قم بإنشاء صف جديد من عمود واحد إلى القسم العادي الافتراضي في Divi Builder.

إنشاء الوحدات

داخل عمود الصف ، أضف وحدة نصية جديدة. ثم قم بتحديث إعدادات المحتوى للوحدة على النحو التالي:

1. أضف عنوان H2 أعلى نص الفقرة لمحتوى النص الافتراضي
2. لون الخلفية: # 333333

ثم قم بتحديث إعدادات التصميم على النحو التالي:

1. خط النص: بوبينز
2. لون النص: فاتح
3. حدد علامة التبويب H2 ضمن نص العنوان
4. نمط خط العنوان 2: TT
5. الحشو: 10٪ أعلى ، 10٪ أسفل ، 10٪ يسار 10٪ يمين

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

افتح عرض الطبقات (اختياري) وأنشئ وحدة النص التالية على النحو التالي:

1. قم بتكرار وحدة النص.
2. افتح إعدادات النص للوحدة المكررة.
3. قم بتحديث لون الخلفية
   • لون الخلفية: # 4c6085

كرر هذه العملية لإنشاء وحدة النص الثالثة على النحو التالي:

1. قم بتكرار وحدة النص السابقة.
2. افتح إعدادات النص للوحدة المكررة.
3. قم بتحديث لون الخلفية
   • لون الخلفية: # 39a0ed

كرر هذه العملية مرة أخرى لإنشاء وحدة النص الرابعة على النحو التالي:

1. قم بتكرار وحدة النص السابقة.
2. افتح إعدادات النص للوحدة المكررة.
3. قم بتحديث لون الخلفية
   • لون الخلفية: # 13c4a3

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

الجزء 2: إنشاء CSS Grid Layout للوحدات النمطية

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

إعدادات الصف

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

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

• عرض الحضيض: 1
• العرض: 100٪
• أقصى عرض: 100٪

إضافة شبكة CSS إلى العمود لبناء تخطيط الشبكة للوحدات النمطية

هذه هي الخطوة الأساسية في البرنامج التعليمي الذي ينشئ تخطيطًا للوحدات النمطية باستخدام خاصية CSS Grid.

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

افتح إعدادات العمود ، وضمن علامة التبويب خيارات متقدمة ، الصق CSS التالي داخل العنصر الرئيسي:

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

يحدد السطر الأول من CSS المحتوى (أو الوحدات النمطية) وفقًا لوحدة شبكة CSS.

العرض: الشبكة

يحدد السطر الثاني من CSS قالب العمود للشبكة. في هذه الحالة ، ستحتوي الشبكة على أربعة أعمدة عرض كل منها 25٪ (انظر لقطة الشاشة أعلاه).

أعمدة شبكة القوالب: 25٪ 25٪ 25٪ 25٪

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

صفوف الشبكة التلقائية: تلقائي

ضبط تخطيط الشبكة على الهاتف المحمول

سنحتاج أيضًا إلى ضبط تخطيط الشبكة على الأجهزة المحمولة حسب الحاجة.

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

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

افتح الخيارات سريعة الاستجابة وحدد علامة تبويب الجهاز اللوحي أسفل العنصر الرئيسي والصق CSS التالي:

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

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

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

الجزء 3: إجراء تغييرات على عناصر الشبكة (أو الوحدات)

إضافة وحدة نمطية جديدة إلى الشبكة وكيف تتفاعل

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

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

كيف تستجيب الشبكة للوحدات ذات الكميات المختلفة من المحتوى

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

تغيير موضع الوحدات (أو عناصر الشبكة)

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

لتغيير موضع الوحدة النمطية (أو عنصر الشبكة) في CSS Grid ، يمكننا تعيين تحديد المكان الذي نريد وضع وحدة معينة فيه في الشبكة. سيؤدي هذا إلى تجاوز الوضع الافتراضي للوحدة في الشبكة.

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

افتح إعدادات الوحدة النصية الأولى والصق CSS المخصص التالي في العنصر الرئيسي:

grid-column: 2/4;
grid-row: 2/3;

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

عمود الشبكة: 2/4

يحدد السطر الثاني من CSS موضع الوحدة (أو عنصر الشبكة) عموديًا عن طريق إخبار الوحدة بالبدء في سطر الصف 2 وتنتهي عند سطر الصف 3.

صف الشبكة: 2/3

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

للقيام بذلك ، حدد علامة تبويب الجهاز اللوحي ضمن خيار الاستجابة للعنصر الرئيسي والصق CSS التالي:

grid-column: auto;
grid-row: auto;

الآن سيعود موضع الوحدة إلى التدفق الأصلي (التلقائي) لعناصر الشبكة.

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

سنقوم بوضع وحدة النص الثالثة (الآن في العمود الثاني من الصف العلوي) في موقع مجموعة جديد داخل الشبكة. سيبدأ هذا الموضع الجديد في سطر العمود 1 وينتهي في سطر العمود 2 ويبدأ أيضًا عند السطر 2 وينتهي في السطر 4.

للقيام بذلك ، افتح إعدادات وحدة النص الثالثة والصق CSS المخصص التالي في العنصر الرئيسي:

grid-column: 1/2;
grid-row: 2/4;

الآن يمكننا تغيير الوضع إلى الهاتف المحمول عن طريق إضافة CSS التالية للكمبيوتر اللوحي:

grid-column: auto;
grid-row: auto;

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

للقيام بذلك ، افتح إعدادات وحدة النص السابعة والصق CSS المخصص التالي في العنصر الرئيسي:

grid-column: 4/5;
grid-row: 2/4;

ثم الصق CSS التالية لشاشة الكمبيوتر اللوحي كما فعلنا مع الوحدات السابقة.

grid-column: auto;
grid-row: auto;

محاذاة محتوى الوحدة (أو عنصر الشبكة) إلى المركز

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

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

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

يمكننا الآن العودة إلى وحداتنا الثلاثة الأخرى (الوحدة رقم 1 ورقم 3 ورقم 7) بشكل فردي وإضافة نفس مقتطف CSS بالإضافة إلى CSS الذي تم استخدامه لمنح الوحدة موضعًا مخصصًا على الشبكة. تأكد من إضافة مقتطف CSS ضمن CSS الحالي لكل من سطح المكتب والجهاز اللوحي.

أضف CSS إلى الوحدة النمطية الأولى للنص

أضف CSS إلى وحدة النص الثالثة

أضف CSS إلى وحدة النص السابع

النتيجة النهائية

هذه هي النتيجة النهائية لتخطيط شبكة CSS المخصص لوحدات النصوص الخاصة بنا.

لاحظ كيف تتكيف الوحدات (أو عناصر الشبكة) بسلاسة على عروض المتصفح المختلفة للحصول على تصميم سريع الاستجابة.

مثال باستخدام وحدات وتصميمات مختلفة

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

ها هو…

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

لا تتردد في أخذها في جولة!

افكار اخيرة

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

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

هتافات!