Divi: بین طرح‌بندی شبکه‌ای و تمام عرض ماژول نمونه کارها فیلتر را انتخاب کنید

آیا می خواهید از ماژول Filterable Portfolio استفاده کنید DIVI و نمی دانید کدام طرح را انتخاب کنید؟

ماژول « نمونه کارها قابل فیلتر از DIVI دو گزینه طرح بندی را برای انتخاب در اختیار شما قرار می دهد. هر دو گزینه مزایایی دارند و برای اهداف خاصی بسیار خوب کار می کنند. 

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

ما همچنین هر دو طرح‌بندی را سفارشی می‌کنیم تا ببینیم چگونه در یک طرح‌بندی کار می‌کنند DIVI.

بیایید شروع کنیم!

بررسی

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

نسخه دسکتاپ طرح شبکه

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

نسخه تلفن طرح شبکه

نسخه دسکتاپ طرح بندی Fullwidth

دفعات بازدید: Divi: نحوه استفاده از افکت های سایه و شناور برای ایجاد محتوای تعاملی

نسخه تلفن طرح بندی Fullwidth

نحوه تغییر چیدمان ماژول نمونه کارها قابل فیلتر

به‌طور پیش‌فرض، ماژول «Portfolio قابل فیلتر» طرح‌بندی را در عرض کامل نمایش می‌دهد. می‌توانید طرح‌بندی را برای نمایش موارد در یک شبکه تغییر دهید. ابتدا در را باز کنید پارامترهای ماژول.

سپس تب را انتخاب کنید طرح. گزینه اول این است طرح. دارای یک لیست کشویی با چند گزینه است. آن را برای انتخاب انتخاب کنید تمام عرض et توری.

اگر گزینه ای را انتخاب کنید که در حال حاضر انتخاب نشده است، ماژول دوباره بارگیری می شود و موارد نمونه کارها را در این طرح نمایش می دهد. مثال زیر طرح شبکه ای را نشان می دهد.

مقایسه طرح بندی ماژول نمونه کارها قابل فیلتر

این دو طرح بسیار متفاوت هستند، اما شباهت هایی با هم دارند. هر دو فیلتر را در بالای ماژول، عنوان و متا را در زیر تصاویر آیتم، و صفحه بندی را در پایین ماژول نمایش می دهند.

در اینجا نگاهی به تفاوت آنها می اندازیم.

طرح کامل عرض

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

فضای زیادی بین اقلام کیف پول اضافه نمی کند. توصیه می کنیم تعداد پست ها را به چند مورد محدود کنید. مثال زیر طرح تمام عرض را با 2 پست نشان می دهد.

طرح شبکه

طرح بندی Grid حداکثر 4 مورد را پشت سر هم نمایش می دهد. فضای بیشتری بین عناصر اضافه می کند. تصاویر برش داده می شوند تا تصاویر کوچکی با همان اندازه بدون توجه به اندازه و شکل تصویر ایجاد شوند.

برای این مورد، ما ماژول را به نمایش چهار پست برای نمایش صفحه بندی محدود کردیم.

زمان استفاده از هر طرح ماژول نمونه کارها قابل فیلتر کردن

هر دو ترتیب مزایای خود را دارند. در اینجا نکاتی در مورد زمان استفاده از هر طرح وجود دارد.

طرح کامل عرض

هنگامی که فقط چند مورد برای نمایش دارید یا می خواهید روی چند مورد تمرکز کنید، از طرح بندی Fullwidth استفاده کنید. 

همچنین از این طرح زمانی استفاده کنید که می خواهید تصاویر برجسته را برجسته یا جلب توجه کنید.

طرح شبکه

هنگامی که می خواهید موارد زیادی را نشان دهید یا زمانی که می خواهید یک طرح بندی برای نمایش موارد بیشتر در فضای کوچکتر نشان داده شود، از طرح بندی Grid استفاده کنید.

نحوه سفارشی سازی طرح بندی ماژول نمونه کارها قابل فیلتر

اکنون که نحوه انتخاب طرح‌بندی، نحوه کار و زمان استفاده از آن‌ها را دیدیم، بیایید ببینیم که چگونه این دو طرح‌بندی را سفارشی کنیم. 

ما از صفحه نمونه کارها استفاده خواهیم کرد بسته طرح بندی رایگان Painter موجود در Divi. اینجا صفحه اصلی است.

نمونه کارها را با ماژول Filterable Portfolio جایگزین می کنیم و از همان تصاویر و عناوین استفاده می کنیم. 

ما دو نسخه ایجاد خواهیم کرد: یکی با یک طرح بندی تمام عرض و دیگری با یک طرح بندی شبکه ای.

نحوه سفارشی کردن چیدمان شبکه ای ماژول نمونه کارها قابل فیلتر

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

محتویات

آنها را باز کنید پارامترهای ماژول و عدد 4 را برای تعداد پست ها. انتخاب همه دسته بندی ها که می خواهید در ماژول نمایش داده شود.

• تعداد پست ها: 4
• دسته بندی های شامل: دسته ها را انتخاب کنید

وضع

سپس تب را انتخاب کنید طرح و انتخاب کنید توری در گزینه های طرح بندی

• چیدمان: شبکه

تصویر

حرکت به تصویر و گزینه را انتخاب کنید BoxShadow. تغییر دهید رنگ سایه در rgba (0,0,0,0.05).

• سایه جعبه: ^4ème انتخاب
• رنگ سایه: rgba(0,0,0,0.05)

متن

سپس به پایین اسکرول کنید متن و اصلاح کنید هم ترازی در مرکز. این فیلتر، عنوان، متا و صفحه بندی را در مرکز قرار می دهد.

• تراز متن: مرکز

متن عنوان

سپس به پایین اسکرول کنید متن عنوان و تنظیمات زیر را تغییر دهید.

• قلم عنوان: Merriweather
• رنگ متن عنوان: #000000

اندازه را تغییر دهید پلیس در 26 پیکسل برای رایانه های رومیزی، 20 پیکسل برای رایانه های لوحی و 18 پیکسل برای تلفن ها.

• اندازه متن عنوان: رومیزی 26 پیکسل، تبلت 20 پیکسل، تلفن 18 پیکسل

متن معیار را فیلتر کنید

سپس به پایین اسکرول کنید متن معیار فیلتر و تنظیمات زیر را تغییر دهید:

• معیارهای فیلتر:
  • فونت: مونتسرات
  • وزن قلم: پررنگ
  • سبک: TT
  • رنگ متن: #fd6927
  • اندازه متن: 12 پیکسل

متا متن

سپس به پایین اسکرول کنید متا متن. تغییر دهید پلیس در مونتسرات و رنگ در #fd6927.

• اندازه متن متا: مونتسرات
• رنگ متا متن: #fd6927

را تنظیم کنید اندازه در 12 پیکسل،فاصله بین حروف روی 2 پیکسل و ارتفاع از خط در 1,2 em.

• اندازه متن: 12 پیکسل
• فاصله حروف متا: 2 پیکسل
• ارتفاع خط متا: 1,2 em

متن صفحه بندی

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

• فونت صفحه بندی: مونتسرات
• رنگ متن صفحه بندی: #000000

نحوه سفارشی کردن ماژول نمونه کارها قابل فیلتر در یک طرح بندی کامل

حالا بیایید ماژول را در یک طرح با عرض کامل پیکربندی کنیم. 

ما از همان نشانه های طراحی به عنوان طرح شبکه استفاده می کنیم، اما چند تغییر ایجاد می کنیم که برای این طرح به خوبی کار می کند. ما از چند CSS ساده برای ایجاد برخی تغییرات جزئی استفاده خواهیم کرد.

محتویات

آنها را باز کنید پارامترهای ماژول و تعداد را تغییر دهید انتشارات به 2. این صفحه را با تصاویر بزرگ کوچکتر و قابل مدیریت تر نگه می دارد. انتخاب همه دسته بندی ها که می خواهید در ماژول نمایش داده شود.

• تعداد پست ها: 2
• دسته بندی های شامل: دسته بندی ها را انتخاب کنید

عناصر

حرکت به عناصر و غیر فعال کنید نمایش دسته ها. بقیه را فعال بگذارید. دسته‌ها همچنان برای فیلتر فعال خواهند بود، اما با عنوان نمایش داده نمی‌شوند.

• نمایش دسته ها: خیر

وضع

برگه را انتخاب کنید طرح. تحت طرح، تنظیم Layout را رها کنید تمام عرض، که تنظیمات پیش فرض آن است.

• چیدمان: تمام عرض

تصویر

سپس به پایین اسکرول کنید تصویر . گزینه را انتخاب کنید سایه جعبه و آن را تغییر دهید رنگ سایه در rgba (0,0,0,0.05).

• سایه جعبه: ^4ème انتخاب
• رنگ سایه: rgba(0,0,0,0.05)

متن

سپس به پایین اسکرول کنید متن. تغییر دادن هم ترازی در مرکز. فیلتر، عنوان و صفحه بندی با تصاویر در مرکز قرار می گیرند.

• تراز متن: مرکز

متن عنوان

سپس به پایین اسکرول کنید متن عنوان . تغییر دهید پلیس به Merriweather و تغییر رنگ در رنگ مشکی

• قلم عنوان: Merriweather
• رنگ متن عنوان: #000000

اندازه را تغییر دهید پلیس در 40 پیکسل برای رایانه های رومیزی، 20 پیکسل برای رایانه های لوحی و 18 پیکسل برای تلفن ها.

• اندازه متن عنوان: رومیزی 40 پیکسل، تبلت 20 پیکسل، تلفن 18 پیکسل

متن معیار را فیلتر کنید

سپس به پایین اسکرول کنید متن معیار فیلتر و تنظیمات زیر را تغییر دهید:

• معیارهای فیلتر:
  • فونت: مونتسرات
  • وزن قلم: پررنگ
  • سبک: TT
  • رنگ متن: #fd6927

متن صفحه بندی

سپس به پایین اسکرول کنید متن صفحه بندی. تغییر دهید پلیس در مونتسرات، تغییر دهید وزن نیمه پررنگ و تنظیم کنید رنگ فونت در #fd6927. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• فونت صفحه بندی: مونتسرات
• رنگ: #fd6927
• وزن قلم: نیمه پررنگ

متن عنوان CSS

برگه را باز کنید فناوری و به عنوان نمونه کارها. نماد دسکتاپ را انتخاب کنید. کد زیر را برای اندازه های مختلف صفحه کپی کنید. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

عنوان نمونه کارها:

• دسکتاپ

padding-bottom:40px

• قرص

padding-bottom:30px

• تلفن

padding-bottom:20px

Résultats

نسخه دسکتاپ طرح شبکه

نسخه تلفن طرح شبکه

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

نسخه دسکتاپ طرح تمام عرض

همچنین ببینید: Divi: نحوه تغییر گرادیان پس‌زمینه در شناور

نسخه تلفن طرح تمام عرض

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

نتیجه

این برداشت ما از استفاده از طرح بندی با عرض کامل در مقابل یک شبکه در ماژول است نمونه کارها قابل فیلتر شدن از دیوی. انتخاب بین دو گزینه چیدمان آسان است. 

هر گزینه دارای مزایایی است و باید برای کار با شما متفاوت طراحی شود وب سایت. فقط چند ترفند انجام دهید تا مطمئن شوید که ماژول شما با هر طرح Divi به خوبی کار می کند.

امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...