ماژول Divi Filtered Portfolio شامل عناصر بسیاری است و هر کدام را می توان به صورت جداگانه استایل کرد. فیلتر یکی از مفیدترین عناصر است، اما گاهی اوقات نادیده گرفته می شود. در این پست، نحوه استایل دادن به فیلتر دسته در ماژول Divi’s Filtered Portfolio را خواهیم دید. ما خواهیم دید که با تنظیمات پیش‌فرض چه کاری می‌توان انجام داد و در CSS جستجو می‌کنیم تا ببینیم چگونه می‌توان به آن استایل بیشتری داد.

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

مرور

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

اولین مثال از فیلتر دسته بر روی دسکتاپ

اولین مثال از فیلتر دسته گوشی

نمونه دوم فیلتر دسته روی دسکتاپ

فیلتر رده تلفن مثال دوم

سومین مثال از فیلتر دسته روی دسکتاپ

نمونه سوم فیلتر دسته گوشی

تقسیم پروژه ها به دسته ها

برای استفاده حداکثری از فیلتر دسته بندی، باید پروژه های خود را به دسته هایی تقسیم کنید که بیشترین حس را برای خوانندگان شما داشته باشد. برای ایجاد دسته های خود، به پروژه ها > دسته بندی ها در داشبورد وردپرس شما

در اینجا فیلدهایی برای اضافه کردن نام، راب، دسته والد و توضیحات را مشاهده خواهید کرد. همچنین لیست دسته بندی های خود را در لیستی مشاهده خواهید کرد که می توانید آنها را ویرایش کنید.

هنگامی که دسته بندی های خود را ایجاد کردید، مطمئن شوید که برای هر یک از پروژه های خود مواردی را انتخاب کنید که بیشترین حس را برای خواننده داشته باشد. برای ایجاد پروژه های خود، به پروژه ها و کلیک کنید یک مورد جدید اضافه کنید در منو یا بالای صفحه

برای مثال هایم، پروژه هایی را برای یک شرکت بهبود خانه ایجاد کرده ام. این شرکت بر بازسازی خانه‌ها تمرکز خواهد کرد، اما کارهای مشابهی را برای شرکت‌ها نیز در بر خواهد گرفت و آنها می‌توانند از ابتدا بسازند. برای خانه ها از دسته بندی داخلی و خارجی استفاده می کنم. برای همه کارهای دیگر، شرکت و ساخت و ساز را اضافه کردم.

تنظیمات ماژول نمونه کارها قابل فیلتر

در مثال ما، برگه نمونه کارها در صفحه نمونه کارها بسته طرح‌بندی ارتقای رایگان را با یک ماژول نمونه کار قابل فیلتر جایگزین می‌کنم. ابتدا بیایید نحوه استایل دادن به ماژول را ببینیم. در مرحله بعد، فیلتر را به سه روش مختلف استایل می دهیم. این صفحه قبل از ایجاد تغییرات است.

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

ابتدا ماژول را استایل می کنیم. ما از این تنظیمات یکسان برای هر سه مثال استفاده خواهیم کرد.

محتوا

در تب Content، تنظیم کنید تعداد انتشارات را به 8 و انتخاب کنید دسته بندی ها از لیست دسته بندی های موجود

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

عناصر

به پایین بروید عناصر و غیر فعال کنید نمایش دسته ها. ما فقط از عناوین استفاده می کنیم و اجازه می دهیم فیلتر دسته ها را نشان دهد.

طرح

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

متن

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

متن عنوان

سپس به متن عنوان. تغییر دادن فونت به کانیت و تنظیم وزن به نیمه ضخیم نگرش رنگ به سیاه.

• فونت: Kanit
• وزن: نیمه ضخیم
• رنگ: #000000

تغییر دادن اندازه فونت حداکثر 20 پیکسل برای رایانه های رومیزی، 18 پیکسل برای رایانه های لوحی و 16 پیکسل برای تلفن ها. نگرش فاصله خطوط به 1 پیکسل و ارتفاع خط تا ساعت 1.3

• اندازه: رومیزی 20 پیکسل، تبلت 18 پیکسلی، گوشی 16 پیکسلی
• فاصله بین حروف: 1 پیکسل
• ارتفاع خط: 1.3 میلی متر

متن صفحه بندی

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

• فونت: Kanit
• رنگ: #000000

تغییر دادن فاصله خطوط تا 1 پیکسل شغلت را حفظ کن اکنون می‌توانیم فیلتر دسته‌بندی را برای مثال‌هایمان استایل دهید.

نمونه هایی از فیلتر کردن دسته ها

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

اولین مثال از فیلتر دسته

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

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

که در طرح برگه، به پایین بروید متن معیار. تغییر دادن فونت به Canit. تغییر دادن سبک به TT و رنگ به سیاه.

• فونت: Kanit
• سبک: TT
• رنگ: #000000

نگرش فاصله خطوط در 1px و تنظیم کنید ارتفاع خط تا ساعت 1.3 برای اولی همین. اکنون تنظیمات خود را ذخیره کرده و ماژول را ببندید.

• فاصله بین حروف: 1 پیکسل
• ارتفاع خط: 1.3 میلی متر

نمونه فیلتر دسته دوم

مثال دوم ما از CSS ساده برای ماژول و صفحه برای ایجاد گوشه های گرد و یک سایه جعبه استفاده می کند. این یکی متفاوت ترین به نظر می رسد.

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

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

• فونت: Kanit
• رنگ: #000000
• اندازه: 16 پیکسل
• ارتفاع خط: 1.5 em

ماژول CSS

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

تنظیمات صفحه CSS

سپس باز کنید تنظیمات صفحه در منوی صفحه در حالت صفحه تنظیمات، را انتخاب کنید منبسط برگه و چسباندن CSS سفارشی در زمینه این CSS مرز را از عناصر فیلتر حذف می کند، یک مرز شعاع 25 پیکسلی ایجاد می کند و یک حاشیه 5 پیکسلی بین عناصر اضافه می کند. همچنین یک سایه کوچک به پایین عناصر اضافه می کند و رنگ سایه را تغییر می دهد. ماژول را ببندید و تنظیمات خود را ذخیره کنید.

• CSS سفارشی:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

سومین مثال از فیلتر دسته

مثال سوم ما از ایده های طراحی CSS مشابه از مثال قبلی پیروی می کند. گوشه های گرد را شامل نمی شود و فونت و رنگ پس زمینه را در حالت انتظار تغییر می دهد. همچنین از CSS هم برای ماژول و هم برای صفحه استفاده می کند.

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

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

• فونت: Kanit
• سبک: TT
• رنگ: #ffffff

سپس انتخاب کنید گزینه شناور برای رنگ متن و تغییر دهید رنگ به سیاه. این کار از فونت های در انتظار مراقبت می کند. پس زمینه را با CSS مدیریت می کنیم. تغییر دادن فاصله بین حروف به 1 پیکسل و ارتفاع خط تا ساعت 1.3

• رنگ مکان نما: #000000
• فاصله بین حروف: 1 پیکسل
• ارتفاع خط: 1.3 میلی متر

ماژول CSS

سپس برو به منبسط و به پایین اسکرول کنید فیلتر نمونه کارها فعال. موارد زیر را اضافه کنید CSS برای تغییر پس زمینه فیلتر فعال. ماژول را ببندید.

• فیلتر نمونه کارها CSS فعال:

  background-color:#ffd000

تنظیمات صفحه CSS

در نهایت باز کنید تنظیمات صفحه. قابل اعتماد و متخصص منبسط و زیر را تایپ کنید CSS سفارشی. ماژول را ببندید و تنظیمات خود را ذخیره کنید. این کار پس‌زمینه را به سیاه تغییر می‌دهد، یک پد 15 پیکسلی به بالا و پایین و یک پد 30 پیکسلی به چپ و راست اضافه می‌کند. این کار اندازه عناصر فیلتر را طوری تغییر می دهد که دقیقاً با دکمه های موجود در طرح مطابقت داشته باشد و به ایجاد تغییر رنگ برای جلوه نگه داشتن کمک می کند. پس‌زمینه در حالت انتظار به سفید تغییر می‌کند.

نتایج

اولین مثال از فیلتر دسته بر روی دسکتاپ

اولین مثال از فیلتر دسته گوشی

نمونه دوم فیلتر دسته روی دسکتاپ

فیلتر رده تلفن مثال دوم

سومین مثال از فیلتر دسته روی دسکتاپ

نمونه سوم فیلتر دسته گوشی

پایان افکار

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

ما می خواهیم از تو بشنویم. آیا فیلتر دسته بندی خود را در ماژول نمونه کارها فیلتر شده Divi استایل داده اید؟ در نظرات به ما اطلاع دهید.