Divi: كيفية تغيير عدد الأعمدة في مدونة

هل ترغب في عرض صفحة مدونة DIVI الخاصة بك كشبكة متعددة الأعمدة؟

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

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

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

مسح

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

تحميل DIVI الآن !!!

تكوين وحدة مدونة بتخطيط ملء الشاشة

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

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

لتحميل تصميم المدونة الجاهز مسبقًا:

• قم بإنشاء صفحة جديدة من لوحة تحكم WordPress

• أعطه اسمًا ذا صلة وانقر على "استخدام Divi Builder"

• انقر فوق "اختيار تخطيط"

• اكتب في شريط البحث "مصمم أزياء" واختر التصميم "صفحة مدونة مصمم الأزياء"

• تأكد من اختيار تخطيط المدونة ثم انقر فوق "اختيار التخطيط"

بمجرد تحميل التخطيط ، ابحث عن وحدة المدونة المستخدمة لعرض منشورات المدونة وفتح الإعدادات.

تعيين عدد من المشاركات

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

• عدد المناصب: 10

حدد تخطيط ملء الشاشة

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

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

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

دعونا نضيف حدًا إلى مشاركات المدونة. قم بتحديث خيارات الحدود كما يلي:

• عرض الحدود: 1 بكسل
• لون الحدود: rgba (150,104,70,0.35،XNUMX،XNUMX،XNUMX)

إضافة فئة CSS مخصصة إلى وحدة المدونة

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

• فئة CSS: et-blog-css-Grid

إنشاء تخطيط متعدد الأعمدة باستخدام CSS Grid

الآن وقد تم إعداد وحدة المدونة الخاصة بنا بتصميم ملء الشاشة ، فنحن على استعداد لإضافة CSS المخصص الخاص بنا. 

سنقوم بإدخال وحدة Code ضمن وحدة Blog لإضافة CSS إلى الصفحة.

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

داخل علامات النمط ، الصق مقتطف رمز CSS التالي:

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

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

display: grid;

يحدد السطر الثاني من CSS نموذج عمود الشبكة.

grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));

يحدد الصف الثالث التباعد بين عناصر الشبكة.

gap : 20px ;

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

ها هي النتيجة حتى الآن.

تخصيص عناصر الشبكة

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

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

تمت إزالة ترقيم الصفحات الشبكي

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

.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

دعونا نرى النتيجة حتى الآن!

نصيحة: اضبط حجم جميع الصور المميزة (أو الصور المصغرة)

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

.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

مع هامش داخلي أعلى يبلغ 56,25٪ ، يجب أن نحصل على نسبة عرض إلى ارتفاع تبلغ 16: 9 لجميع صورنا.

لا تتردد في ضبط المساحة المتروكة على حاوية الصورة للحصول على نسبة العرض إلى الارتفاع التي تريدها لصورتك.

نتيجة نهائية

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

تحميل DIVI الآن !!!

وفي الختام

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.