Divi: نحوه تغییر تعداد ستون ها در یک وبلاگ

آیا می خواهید صفحه وبلاگ DIVI خود را در قالب شبکه ای چند ستونی نمایش دهید؟

ماژول Divi's Blog می تواند پست های وبلاگ را در یک طرح بندی تمام عرض یا شبکه ای نمایش دهد. اگر طرح شبکه ای را انتخاب کنید، حداکثر تعداد ستون هایی که می توانید داشته باشید سه است. 

در این آموزش، تنها با چند قطعه CSS، وبلاگ شما به یک طرح شبکه چند ستونی زیبا تبدیل می شود. به‌علاوه، ستون‌ها در همه اندازه‌های مرورگر صاف و پاسخگو خواهند بود، بنابراین لازم نیست نگران به‌روزرسانی آن پرسش‌های رسانه یا تنظیمات پاسخگو باشید. 

همچنین برای دانستن می توانید با مقاله ما مشورت کنید نحوه ایجاد یک صفحه وبلاگ با ماژول DIVI Blog.

بررسی

قبل از ورود به این آموزش، اجازه دهید ابتدا نگاهی به نتیجه ای که می خواهیم به دست آوریم بیندازیم.

اکنون DIVI را دانلود کنید!!!

پیکربندی یک ماژول وبلاگ با یک طرح تمام صفحه

ماژول DIVI's Blog را می توان برای افزودن یک وبلاگ در هر نقطه از خود استفاده کرد وب سایت. واقعاً ایجاد یک صفحه وبلاگ در Divi را آسان می کند. تنها کاری که باید انجام دهید این است که یک ماژول بلاگ را با استفاده از Divi Builder به صفحه اضافه کنید.

برای این آموزش، می‌خواهیم از طرح‌بندی وبلاگ از پیش ساخته شده از یکی از آنها استفاده کنیم بسته های طرح بندی رایگان از DIVI که قبلاً شامل یک ماژول بلاگ با سبک پایه است. 

برای بارگذاری طرح وبلاگ از پیش ساخته شده:

• یک صفحه جدید از داشبورد وردپرس ایجاد کنید

• یک نام مرتبط به آن بدهید و روی 'Use Divi Builder' کلیک کنید.

• روی "انتخاب طرح بندی" کلیک کنید

• در نوار جستجو "Fashion Designer" را تایپ کنید و طرح "Fashion Designer Blog Page" را انتخاب کنید.

• حتماً طرح بندی وبلاگ را انتخاب کرده و سپس بر روی "انتخاب طرح بندی" کلیک کنید.

پس از بارگیری طرح، ماژول وبلاگ مورد استفاده برای نمایش پست های وبلاگ را پیدا کنید و تنظیمات را باز کنید.

تعداد پست ها را تنظیم کنید

در تنظیمات وبلاگ، به روز رسانی کنید محتویات برای محدود کردن تعداد پست ها به 10. (این عمدتا به دلایل زیبایی شناختی است، زیرا شبکه ما در نهایت شامل دو ردیف از پنج پست وبلاگ می شود.)

• تعداد موقعیت ها: 10

طرح بندی تمام صفحه را انتخاب کنید

از آنجایی که می خواهیم وبلاگ خود را با استفاده از CSS Grid در ستون ها قرار دهیم، باید مطمئن شویم که طرح ماژول بلاگ به صورت ' است.صفحه نمایش کامل(نه «شبکه»). این اطمینان حاصل می کند که پست های وبلاگ به صورت عمودی به ترتیب صفحه عادی خود چیده می شوند.

برای تغییر طرح ماژول وبلاگ، تنظیمات ماژول را باز کنید و در زیر تب Style منوی کشویی را باز کنید. قالب و Full Screen را انتخاب کنید .

اکنون هر پست وبلاگ تمام عرض ستون (یا ظرف والد) را در بر می گیرد.

بیایید یک حاشیه به پست های وبلاگ اضافه کنیم. گزینه های حاشیه را به صورت زیر به روز کنید:

• عرض حاشیه: 1 پیکسل
• رنگ حاشیه: rgba (150,104,70,0.35)

اضافه کردن یک کلاس CSS سفارشی به ماژول وبلاگ

برای اینکه به طور موثر این ماژول وبلاگ خاص (نه دیگری) را با CSS خود هدف قرار دهیم، باید به ماژول خود یک کلاس CSS سفارشی بدهیم. در تب پیشرفته، کلاس CSS زیر را اضافه کنید:

• کلاس CSS: et-blog-css-grid

ایجاد طرح چند ستونی با CSS Grid

اکنون که ماژول وبلاگ ما با یک طرح تمام صفحه تنظیم شده است، ما آماده ایم CSS سفارشی خود را اضافه کنیم. 

ما قصد داریم یک ماژول کد را در زیر ماژول وبلاگ وارد کنیم تا 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 اضافه کنیم که عناصر شبکه را هدف قرار می‌دهد تا در بالای هر ردیف تراز شوند و مقداری padding داشته باشند.

.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's Blog

همچنین ببینید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.