چگونه تعداد ستون های ماژول وبلاگ دیوی را تغییر دهیم؟

پست های وبلاگ دیوی
دیوی مارکتآگوست 6, 2021

امیدواریم از خواندن این مقاله لذت کافی را ببرید

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

تغییر تعداد ستون های ماژول وبلاگ دیوی

در حالت عادی ماژول وبلاگ دیوی تعداد سه پست (در سه ستون) را در هر ردیف نشان می دهد (قبلا در مقاله آموزش ماژول بلاگ دیوی چگونگی استفاده از این ماژول را آموزش داده ایم). به شکل زیر توجه کنید:

تعداد پست ها در  ماژول بلاگ دیوی در حالت دیفالت
تعداد پست های نمایش داده شده در یک ردیف ماژول بلاگ دیوی در حالت دیفالت

همانگونه که در شکل فوق مشاهده می کنید تعداد پست های نمایش داده شده در ردیف فوق سه مورد است. حال فرض کنید بخواهیم به جای سه پست 4 پست را در یک ردیف نمایش دهیم. برای این کار چه راه حلی وجود دارد؟

این کار در حالت عادی و با استفاده از تنظیمات پیش فرض ماژول امکان پذیر نیست و بایستی از کدهای سی اس اس برای آن استفاده کرد.

اگر می خواهید این تعداد پست را به 4 عدد تغییر دهید، مراحل زیر را دنبال کنید:

1- ابتدا اطمینان حاصل کنید که از طرح شبکه ماژول وبلاگ (grid) استفاده می کنید:

تنظیم ماژول وبلاگ دیوی بر روی حالت grid

2- کلاس fr-blog را به شکلی که تصویر زیر مشاهده می کنید به ماژول وبلاگ اضافه کنید:

اضافه کردن کلاس css به تنظیمات ماژول وبلاگ دیوی

کد css زیر را در مسیر Dashboard => Divi => Theme Options => Custom CSS اضافه کنید:

.fr-blog .et_pb_salvattore_content[data-columns]::before {
	content: '4 .column.size-1of4' !important;
}
@media only screen and ( min-width: 981px ) {
	.cu-blog .column.size-1of4 {
	    width: 24%!important;
	    margin-right: 1%;
	}
}

نتیجه حاصل به شکل زیر است:

نمایش 4 پست در یک ردیف با ماژول وبلاگ دیوی

نمایش 4 پست یک ردیف

حال اگر بخواهیم 2 پست یا تعداد بیشتر از 4 پست را در یک ردیف نمایش دهیم باید چگونه عمل کنیم:

برای این کار کافی است در دو خط زیر از کد فوق تعداد مدنظر خود را به جای عدد 4 جایگزین نماییم:

content: '4 .column.size-1of4' !important;

در خط فوق به جای عدد چهار باید تعداد مدنظر خود را وارد نمایید. مثلا 5 یا 2 یا …. همچنین این کار را در خط زیر نیز انجام دهید:

.cu-blog .column.size-1of4

مساله مهم دیگر تنظیم عرض ردیف مورد نظر است. برای این کار باید عرض را در خط زیر تنظیم نماییم:

width: 24%!important;

همانطور که در خط فوق مشاهده می کنید برای نمایش 4 پست در یک ردیف برای هر کدام 24 درصد از عرض در نظر گرفته شده است که با ضرب در عدد 4 عدد 96 بدست می آید و 4 درصد با قیمانده صرف فاصله 4 ستون(پست) از یکدیگر می شود.

حال اگر بخواهیم تعداد 5 پست را نمایش دهیم باید به جای عدد 24 عدد 19 را وارد کنیم و برای تعداد 2 پست عدد 49 و … .

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

لطفا در صورتی که سوال یا ابهامی برای شما وجود دارد در قسمت دیدگاه ها سوال خود را بیان کنید.

0 Comments

Submit a Comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *