ماژول فیلتر پورتفولیو Divi یک راه عالی و آسان برای به نمایش گذاشتن کار و پروژه های خود در وب سایت شما است. شما می توانید از دسته بندی ها برای ایجاد فیلترهای مختلف برای ماژول نمونه کارها خود استفاده کنید و این یک راه آسان برای حفظ نمونه کارها به روز شده بدون نیاز به تغییر طراحی وب سایت خود هر بار ارائه می دهد. فقط یک پروژه جدید در داشبورد وردپرس خود اضافه کنید تا زمانی که به درستی دسته بندی شده باشد، ماژول نمونه کارها به طور خودکار پر می شود.
در این آموزش، ما 3 روش مختلف برای استایل دادن به صفحه بندی در ماژول نمونه کارها Divi فیلتر شده را به شما نشان خواهیم داد. با سفارشی کردن این طرح، می توانید ماژول نمونه کارها را متناسب با طراحی کلی وب سایت خود قرار دهید و توجه را به کاری که می خواهید به نمایش بگذارید جلب کنید.
بیا شروع کنیم!
یک نگاه یواشکی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است
سبک صفحه بندی یک
سبک صفحه بندی دوم
سبک صفحه بندی سوم
آنچه برای شروع نیاز دارید
Divi را نصب و فعال کنید
قبل از شروع، تم Divi را نصب و فعال کنید و مطمئن شوید که آخرین نسخه Divi را در وب سایت خود دارید.
پروژه های نمونه کار را اضافه کنید
برای اینکه نمونه کارها بعد از اینکه آن را به صفحه خود اضافه کردیم با پروژه ها پر شود، ابتدا باید پروژه ها را به داشبورد وردپرس اضافه کنیم. “پروژه ها” را در نوار کناری داشبورد وردپرس خود انتخاب کنید، سپس یک پروژه جدید اضافه کنید. مطمئن شوید که پروژه دارای یک تصویر برجسته و یک دسته است تا بتوان آن را فیلتر کرد.
حالا شما آماده رفتن هستید!
نحوه صفحه بندی در ماژول نمونه کارها فیلتر شده Divi
یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید
بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. ما از صفحه نمونه کار Painter از بسته layout Painter برای این طرح استفاده خواهیم کرد.
یک صفحه جدید به وب سایت خود اضافه کنید، به آن عنوان بدهید و گزینه Use Divi Builder را انتخاب کنید.
برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.
طرح بندی صفحه Painter Portfolio را جستجو و انتخاب کنید.
گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.
اکنون ما آماده ساختن طرح خود هستیم.
ماژول Filtered Portfolio را اضافه کنید
ما محتوای نمونه کارها موجود در این صفحه را با یک ماژول نمونه کار قابل فیلتر جایگزین می کنیم. ابتدا بخش نمونه کارها را حذف کنید.
سپس یک برگه جدید در صفحه زیر بخش «کار اخیر» وارد کنید.
سپس یک ردیف با یک ستون به بخش اضافه کنید.
ماژول نمونه کارها قابل فیلتر را به ردیف جدید اضافه کنید.
تا زمانی که به برگه پروژه‌های داشبورد وردپرس شما اضافه می‌شوند، نمونه کارهای قابل فیلتر شما باید با پروژه‌های شما پر شود.
تنظیمات نمونه کارها قابل فیلتر
حالا بیایید طراحی پورتفولیوی قابل فیلتر را سفارشی کنیم. تنظیمات ماژول را باز کنید، سپس تعداد پست ها را به 6 تغییر دهید.
در قسمت آیتم ها، نمایش دسته ها را غیرفعال کنید.
به تب Design رفته و تنظیمات layout را باز کنید. چیدمان را روی Grid قرار دهید.
سپس تنظیمات overlay را باز کنید. رنگ نماد بزرگنمایی، رنگ همپوشانی نشانگر و انتخابگر نماد ماوس را به صورت زیر تنظیم کنید:
- رنگ نماد بزرگنمایی: #fdd23a
- Hover Overlay Color: rgba (61,61,61,0.28)
- انتخاب نماد روی ماوس: نماد پلاس
تنظیمات تصویر را باز کنید، سپس یک سایه به کادر تصویر اضافه کنید.
سپس رنگ سایه را تنظیم کنید.
سپس تنظیمات فونت عنوان را به صورت زیر تغییر دهید:
- قلم عنوان: Merriweather
- وزن قلم عنوان: پررنگ
- رنگ متن عنوان#000000
اندازه متن عنوان و ارتفاع خط را تنظیم کنید.
- اندازه متن عنوان: 25 پیکسل
- ارتفاع تیتر: 2 سانتی متر
به تب Filter Criteria Text رفته و تنظیمات فونت را به صورت زیر تغییر دهید:
- معیارهای فیلتر قلم: Montserrat
- معیارهای فیلتر وزن قلم: پررنگ
- رنگ متن معیارهای فیلتر: #000000
اکنون که بیشتر طراحی ماژول ما کامل شده است، می‌توانیم به سفارشی کردن سبک‌های صفحه برویم.
سبک صفحه بندی یک
برای اولین سبک صفحه‌بندی، رنگ فونت متفاوتی را برای صفحه فعال تعیین می‌کنیم. همچنین اندازه متن صفحه بندی را در حالت شناور افزایش می دهیم. بیا شروع کنیم.
در تنظیمات نمونه کارها قابل فیلتر کردن، تنظیمات متن صفحه را باز کنید. فونت را به صورت زیر سفارشی کنید:
- فونت صفحه بندی: Montserrat
- وزن قلم صفحه: پررنگ
- تراز کردن متن در صفحات: سمت راست
- رنگ متن صفحه بندی: #000000
اندازه متن را تنظیم کنید سپس. از تنظیمات نگه داشتن برای افزایش اندازه متن در حالت انتظار استفاده کنید.
- اندازه متن در صفحات: 17 پیکسل
- اندازه متن صفحه در حالت شناور: 21 پیکسل
در نهایت تب Advanced را باز کنید و CSS سفارشی زیر را به قسمت CSS صفحه صفحه بندی فعال اضافه کنید. با این کار رنگ زرد در صفحه فعال فعال می شود.
color: #FDD23A !important;
پیش نویس نهایی
و در اینجا نمای نهایی اولین طراحی ما است.
سبک صفحه بندی دوم
دومین سبک صفحه‌بندی که طراحی می‌کنیم شامل رنگ پس‌زمینه پشت صفحه‌بندی، برخی جلوه‌های رنگ در حالت نگه‌داشتن، و رنگ متفاوت برای صفحه فعال است.
در تنظیمات نمونه کارها قابل فیلتر کردن، تنظیمات متن صفحه را باز کنید. فونت را به صورت زیر سفارشی کنید:
- فونت صفحه بندی: Merriweather
- وزن قلم صفحه: پررنگ
- تراز کردن متن در صفحات: در مرکز
- رنگ متن صفحه بندی: #9e9e9e
- رنگ متن صفحه در نشانگر: #000000
سپس اندازه متن و ارتفاع خط را تنظیم کنید.
- اندازه متن در صفحات: 26 پیکسل
- ارتفاع خط صفحه بندی: 2em
به تب Advanced رفته و CSS سفارشی زیر را به قسمت Portfolio Pagination CSS اضافه کنید. این یک رنگ پس زمینه اضافه می کند و حاشیه را حذف می کند:
background:#f2f2f2; border:none;
در نهایت، CSS زیر را به بخش CSS صفحه صفحه‌بندی فعال اضافه کنید تا یک رنگ متن متفاوت برای صفحه فعال تنظیم کنید.
color: #000000 !important;
پیش نویس نهایی
در اینجا طرح نهایی برای سبک صفحه بندی دوم ما است.
سبک صفحه بندی سوم
برای طراحی صفحه بندی نهایی خود، یک دایره زرد در پشت صفحه فعال اضافه می کنیم. همچنین یک رنگ فونت متفاوت برای صفحه فعال و در حالت انتظار تنظیم می کنیم.
در تنظیمات نمونه کارها قابل فیلتر کردن، تنظیمات متن صفحه را باز کنید. سپس فونت را به صورت زیر سفارشی کنید:
- فونت صفحه بندی: Merriweather
- وزن قلم صفحه: پررنگ
- تراز کردن متن در صفحات: در مرکز
- رنگ متن صفحه بندی: #000000
- رنگ متن صفحه روی ماوس: #FDD23A
- اندازه متن در صفحات: 26 پیکسل
به تب Advanced بروید و CSS سفارشی زیر را به بخش Portfolio Pagination CSS اضافه کنید تا مرز حذف شود:
border:none;
در نهایت CSS زیر را به قسمت CSS صفحه صفحه بندی فعال اضافه کنید. این CSS رنگ متن و پس زمینه دایره ای متفاوتی را برای صفحه فعال تنظیم می کند.
padding: 10% 60% 10% 60%; background-color: #FDD23A; border-radius: 80%; color: #ffffe7!important;
پیش نویس نهایی
در اینجا طرح نهایی آخرین طرح ما است.
نتیجه نهایی
حالا بیایید نگاهی به هر سه طرح نهایی با سبک های مختلف صفحه خود بیاندازیم.
سبک صفحه بندی یک
سبک صفحه بندی دوم
سبک صفحه بندی سوم
افکار نهایی
ماژول نمونه کارها قابل فیلتر کردن به راحتی قابل سفارشی کردن است تا با طراحی وب سایت شما مطابقت داشته باشد، و می توانید به سرعت پروژه های جدید را از داشبورد وردپرس خود اضافه کنید تا نمونه کارها خود را به روز نگه دارید. این ماژول برای طراحان، هنرمندان، عکاسان و دیگر خلاقان عالی است تا کار خود را با تصاویر زیبا و ناوبری آسان به نمایش بگذارند. برای ایده های منحصر به فرد طراحی نمونه کارها، این آموزش ایجاد یک الگوی پروژه پورتفولیو پویا را بررسی کنید. آیا از ماژول نمونه کارها قابل فیلتر در وب سایت خود استفاده کرده اید؟ در نظرات به ما اطلاع دهید!