ماژول Filtered Portfolio Divi دو گزینه طرح بندی را در اختیار شما قرار می دهد. هر دو گزینه مزایایی دارند و برای اهداف خاصی عالی عمل می کنند. در این پست، طرح‌بندی‌های تمام عرض و شبکه‌ای را در ماژول Divi’s Filtered Portfolio مقایسه می‌کنیم تا به شما کمک کنیم تصمیم بگیرید چه چیزی برای وب‌سایت خود نیاز دارید. ما همچنین به هر دو طرح بندی استایل می دهیم تا ببینیم چگونه در یک طرح بندی Divi کار می کنند.
بیا شروع کنیم!
پیش نمایشی از گزینه های طرح بندی ماژول نمونه کارها فیلتر شده
ابتدا، بیایید نگاهی به آنچه در این آموزش می‌سازیم بیاندازیم.
روی میز با آیتم نمونه کارها در شبکه
تلفن مورد نمونه کارها شبکه
دسکتاپ آیتم نمونه کارها طرح بندی عرض کامل
تلفن مورد نمونه کارها طرح بندی کامل عرض
نحوه تغییر طرح ماژول نمونه کارها فیلتر شده
به طور پیش فرض، ماژول Filtered Portfolio طرح را در عرض کامل نمایش می دهد. شما می توانید طرح بندی را تغییر دهید تا موارد نمونه کارها در یک شبکه نمایش داده شود. اول باز کن تنظیمات ماژول طبق معمول
سپس انتخاب کنید طرح بخش. گزینه اول این است طرح. یک منوی کشویی با چندین گزینه برای انتخاب وجود دارد. آن را برای انتخاب بین Fullwidth و Grid انتخاب کنید.
اگر گزینه ای را انتخاب کنید که در حال حاضر انتخاب نشده است، ماژول مجدداً بارگیری می شود و موارد نمونه کارها را در این طرح نمایش می دهد. مثال زیر طرح شبکه ای را نشان می دهد.
نحوه مقایسه طرح‌بندی‌های ماژول نمونه کارها فیلتر شده
این دو طرح بسیار متفاوت هستند، اما شباهت هایی با هم دارند. هر دو فیلتر را در بالای ماژول، عنوان و متا را در زیر تصاویر عنصر، و صفحه بندی را در پایین ماژول نمایش می دهند.
در اینجا نحوه تفاوت آنها آمده است.
طرح با عرض کامل
Fullwidth یک تصویر بزرگ را با یک آیتم نمونه کار که تمام عرض منطقه نمونه کارها را اشغال می کند، نمایش می دهد. این به دلیل بزرگتر بودن تصویر جزئیات بسیار بیشتری را نشان می دهد، اما می تواند بزرگ شود. تصاویر به شکل اصلی خود نمایش داده می شوند و به اندازه عرض موجود کشیده می شوند. این فضای زیادی بین اقلام نمونه کار اضافه نمی کند. من توصیه می کنم تعداد پست ها را به تعداد کمی محدود کنید. مثال زیر طرح بندی عرض کامل را با تعداد پست 2 نشان می دهد.
طرح شبکه
طرح شبکه حداکثر 4 مورد را در هر ردیف نشان می دهد. فضای بیشتری بین عناصر اضافه می کند. تصاویر برش داده می شوند تا تصاویر کوچکی با همان اندازه بدون توجه به اندازه و شکل تصویر ایجاد شوند.
برای این مورد، ماژول را به نمایش چهار پست برای نمایش صفحه بندی محدود کردم.
زمان استفاده از طرح بندی هر ماژول نمونه کارها فیلتر شده
هر دو چیدمان مزایای خود را دارند. در اینجا نکاتی در مورد زمان استفاده از هر طرح وجود دارد.
طرح با عرض کامل
زمانی که فقط چند مورد برای نمایش دارید یا می‌خواهید روی چند مورد تمرکز کنید، از طرح‌بندی تمام عرض استفاده کنید. همچنین، زمانی که می خواهید روی تصاویر برجسته تأکید کنید یا توجه را جلب کنید، از این طرح استفاده کنید.
طرح شبکه
هنگامی که می خواهید موارد زیادی را نمایش دهید یا زمانی که می خواهید یک طرح بندی برای نمایش موارد بیشتر در فضای کمتری داشته باشید از طرح بندی شبکه ای استفاده کنید.
نحوه استایل دادن به طرح‌بندی‌های ماژول نمونه کارها فیلتر
اکنون که نحوه انتخاب طرح‌بندی، نحوه عملکرد و زمان استفاده از آنها را دیدیم، بیایید ببینیم که چگونه به هر دو چیدمان استایل دهیم. من از صفحه نمونه کارها از Painter Layout Pack که در Divi موجود است استفاده خواهم کرد. اینجا صفحه اصلی است.
من نمونه کارها را با یک ماژول نمونه کار فیلتر شده جایگزین می کنم و از همان تصاویر و عناوین استفاده می کنم. من دو نسخه می‌سازم: یکی با طرح‌بندی کامل و دیگری با طرح‌بندی شبکه‌ای و به آنها استایل می‌دهم.
نحوه استایل دادن به عنصر طرح بندی ماژول نمونه کارها با قابلیت فیلتر شبکه
ما با طرح بندی شبکه شروع می کنیم. من از رنگ ها و فونت های طرح اصلی استفاده خواهم کرد.
محتوا
بازش کن تنظیمات ماژول و 4 را برای وارد کنید تعداد انتشارات. انتخاب همه دسته بندی ها که می خواهید در ماژول نمایش داده شود.
- تعداد انتشارات: 4
- دسته بندی شامل: هر دسته
طرح
سپس انتخاب کنید طرح را بزنید و انتخاب کنید توری از گزینه های طرح بندی
تصویر
به پایین بروید تصویر و 4 را انتخاب کنیدهفتمسایه جعبه گزینه. تغییر دادن رنگ سایه به rgba(0,0,0,0,05).
- سایه جعبه: 4هفتم گزینه
- رنگ سایه: rgba(0,0,0,0.05)
متن
سپس به پایین اسکرول کنید متن و تغییر دهید هم ترازی به مرکز. این فیلتر، عنوان، متا و صفحه‌بندی را در مرکز قرار می‌دهد.
متن عنوان
سپس به متن عنوان. تغییر دادن فونت به Merriweather و تغییر کرد رنگ به سیاه. تنظیمات دیگر را در حالت پیش فرض قرار دهید.
- فونت: Merriweather
- رنگ: #000000
تغییر دادن اندازه فونت حداکثر 26 پیکسل برای رایانه های رومیزی، 20 پیکسل برای رایانه های لوحی و 18 پیکسل برای تلفن ها.
- اندازه: دسکتاپ 26 پیکسل، تبلت 20 پیکسل، گوشی 18 پیکسل
متن معیار را فیلتر کنید
سپس به پایین اسکرول کنید متن معیار. تغییر دادن فونت به مونتسرات نگرش وزن به غلیظ شدن و سبک به TT. تغییر دادن رنگ به #fd6927 و اندازه تا 12 پیکسل
- فونت: مونتسرات
- وزن: نیمه مشکی
- سبک: TT
- رنگ: #fd6927
- اندازه: 12 پیکسل
متا متن
سپس به پایین اسکرول کنید متا متن. تغییر دادن فونت به مونتسرات و رنگ به #fd6927.
- فونت: مونتسرات
- رنگ: #fd6927
نگرش اندازه تا 12 پیکسل، فاصله بین حروف به 2 پیکسل و ارتفاع خط تا 1.2em
- اندازه: 12 پیکسل
- فاصله بین حروف: 2 پیکسل
- ارتفاع خط: 1.2 em
متن صفحه بندی
در نهایت، به پایین بروید متن صفحه بندی و تغییر دهید فونت به مونتسرات و تنظیم رنگ فونت به سیاه. ماژول را ببندید و تنظیمات خود را ذخیره کنید.
- فونت: مونتسرات
- رنگ: #000000
نحوه استایل دادن به آیتم نمونه کارها با طرح بندی تمام عرض
حالا بیایید یک نمونه کار با یک طرح تمام عرض ایجاد کنیم. ما از دستورالعمل‌های طراحی مشابه طرح‌بندی شبکه استفاده می‌کنیم، اما برخی تنظیمات را انجام می‌دهیم که برای این طرح‌بندی به خوبی کار می‌کنند. ما از چند CSS ساده برای انجام برخی تنظیمات کوچک استفاده خواهیم کرد.
محتوا
بازش کن تنظیمات ماژول و تغییر دهید تعداد انتشارات به 2. این صفحه را کوچکتر نگه می دارد و مدیریت آن را با تصاویر بزرگ آسان تر می کند. انتخاب همه دسته بندی ها که می خواهید در ماژول نمایش داده شود.
- تعداد انتشارات: 2
- دسته بندی شامل: هر دسته
عناصر
به پایین بروید عناصر و غیر فعال کنید نمایش دسته ها. بقیه را فعال بگذارید. دسته‌ها همچنان برای فیلتر فعال خواهند بود، اما با عنوان نمایش داده نمی‌شوند.
- عنوان نمایش: بله
- نمایش دسته ها: خیر
- نمایش صفحه بندی: بله
طرح
انتخاب کنید طرح بخش. زیر طرحتنظیم Layout را روی تمام عرضکه تنظیمات پیش فرض آن است.
تصویر
سپس به پایین اسکرول کنید تصویر. 4 را انتخاب کنیدهفتمسایه جعبه گزینه و تغییر رنگ سایه به rgba(0,0,0,0,05).
- سایه جعبه: 4هفتم گزینه
- رنگ سایه: rgba(0,0,0,0.05)
متن
سپس به پایین اسکرول کنید متن. تغییر دادن هم ترازی به مرکز. فیلتر، عنوان و صفحه بندی با تصاویر در مرکز قرار می گیرند.
متن عنوان
سپس به متن عنوان. تغییر دادن فونت به Merriweather و تغییر کرد رنگ به سیاه.
- فونت: Merriweather
- رنگ: #000000
تغییر دادن اندازه فونت حداکثر 40 پیکسل برای رایانه های رومیزی، 20 پیکسل برای رایانه های لوحی و 18 پیکسل برای تلفن ها.
- اندازه: دسکتاپ 40 پیکسل، تبلت 20 پیکسل، گوشی 18 پیکسل
متن معیار را فیلتر کنید
سپس به پایین اسکرول کنید متن معیار. تغییر دادن فونت به مونتسرات، مجموعه وزن پررنگ کردن، و سبک به TT. تغییر دادن رنگ به #fd6927. ولش کن اندازه در تنظیمات پیش فرض 14 پیکسل.
- فونت: مونتسرات
- وزن: نیمه مشکی
- سبک: TT
- رنگ: #fd6927
متن صفحه بندی
سپس به پایین اسکرول کنید متن صفحه بندی. تغییر دادن فونت به مونتسرات، تغییر دهید وزن به نیمه پررنگ و تنظیم رنگ فونت به #fd6927. ماژول را ببندید و تنظیمات خود را ذخیره کنید.
- فونت: مونتسرات
- رنگ: #fd6927
- وزن: نیمه ضخیم
متن سرصفحه CSS
در نهایت، مطمئن هستم که متوجه شده اید که فضای زیادی بین تصاویر در این چیدمان وجود ندارد. ما می توانیم پس زمینه را به تصاویر یا عنوان ها اضافه کنیم. بیایید مقداری بالشتک زیر عنوان اضافه کنیم. این نه تنها به عنوان فضای بیشتری می دهد، بلکه درک اینکه عنوان متعلق به کدام یک از تصاویر است را آسان تر می کند.
بازش کن منبسط و به پایین اسکرول کنید عنوان نمونه کارها. نماد دستگاه را انتخاب کنید. باشه CSS اضافه کنید برای پد بر اساس اندازه صفحه نمایش. ما 40px Bottom Padding را برای رایانه‌های رومیزی، 30px برای رایانه‌های لوحی و 20px برای تلفن‌ها اضافه می‌کنیم. ماژول را ببندید و تنظیمات خود را ذخیره کنید.
- عنوان نمونه کارها (رومیزی):
padding-bottom:40px
- عنوان نمونه کارها (تبلت):
padding-bottom:30px
- عنوان نمونه کار (تلفن):
padding-bottom:20px
نتایج
روی میز با آیتم نمونه کارها در شبکه
تلفن مورد نمونه کارها شبکه
دسکتاپ آیتم نمونه کارها طرح بندی عرض کامل
تلفن مورد نمونه کارها طرح بندی کامل عرض
پایان تفکر در مورد گزینه های طرح بندی ماژول نمونه کارها فیلتر شده Divi
این برداشت ما از استفاده از طرح بندی تمام عرض در مقابل شبکه در ماژول نمونه کارها فیلتر شده Divi است. انتخاب بین دو گزینه چیدمان آسان است. هر گزینه دارای مزایایی است و برای کار با وب سایت شما باید سبک متفاوتی داشته باشد. تنها با انجام چند تنظیم، اطمینان حاصل می شود که ماژول نمونه کارها فیلتر شما به خوبی با هر طرح Divi کار می کند.
ما می خواهیم از تو بشنویم. از کدام یک بین طرح‌بندی عرض کامل و شبکه در ماژول Divi Filtered Portfolio استفاده می‌کنید؟ در نظرات به ما اطلاع دهید.