Divi: نحوه سفارشی کردن یک عنصر از شبکه ماژول "Pilterable Portfolio".

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

یک منطقه روی خود داشته باشید وب سایت برای به نمایش گذاشتن کار شما مهم است. اگر شما یک استایلیست هستید، می توانید چندین پروژه بر روی خود ایجاد کنید وب سایت وردپرس برای نشان دادن مفاهیم شما. اگر سازنده برند هستید، می توانید از نمونه کارها برای نمایش کارهای خود استفاده کنید. علاوه بر این، حتی می‌توانیم جلوتر برویم و دسته‌های مختلفی را برای پروژه‌های خود اضافه کنیم. اینجاست ماژول پورتفولیوی قابل فیلتر Divi چه می کند؟ .

با استفاده از این ماژول، ما قادریم سختی کار خود را به روشی آسان و منظم به نمایش بگذاریم. 

در آموزش امروز، عناصر گرید جداگانه ماژول Filterable Portfolio را سفارشی می کنیم. ما از طرح‌بندی‌های بسته‌های طرح‌بندی رایگان استفاده خواهیم کرد کنفرانس دیوی et مربی یوگا آنلاین Divi با هر خرید ارائه می شود DIVI . 

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

ماژول نمونه کارها قابل فیلتر Divi چیست؟

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

این جایی است که شما پروژه های فردی خود را ایجاد می کنید که ماژول نمونه کارها قابل فیلتر شما را پر می کند. ماژول دو راه برای نمایش پروژه هایمان به ما می دهد: در قالب شبکه ای ou در قالب تمام عرض. برای ما، ما از قالب شبکه استفاده و سفارشی خواهیم کرد. 

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

در اینجا نمونه ای از پیکربندی شبکه ماژول با چند پروژه نمونه است:

مناطقی که باید در هنگام ایجاد مجموعه قابل فیلتر Divi در نظر بگیرید

مثل همه مدها DIVI، ماژول Filterable Portfolio دارای تعدادی ویژگی است که می توانیم آنها را مطابق با نیازها و خواسته های خود سفارشی کنیم. بنابراین، بسیاری از ویژگی های ارائه شده با ماژول را می توان در برگه تغییر داد طرح از مودال تنظیمات ماژول. ما می توانیم مناطق زیر و موارد دیگر را ویرایش کنیم:

• عنوان پروژه
• دسته پروژه
• شکل
• متن را فیلتر کنید
• تصویر کوچک در حالت شناور
• صفحه گذاری

این یک لیست کامل نیست و ما حتی شروع به صحبت در مورد اینکه چگونه CSS شخصی سازی های عمیق تری را به این ماژول اضافه کرده است، نکرده ایم!

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

همانطور که قبلا ذکر شد، برای این آموزش از دو طرح استفاده خواهیم کرد: کنفرانس دیوی et مربی یوگا آنلاین Divi. در زیر می توانید نمای کلی از کارهایی که قرار است در طول این آموزش انجام دهیم را دریافت کنید.

چیدمان عناصر طرح "کنفرانس دیوی".

چیدمان عناصر چیدمان «مربی آنلاین یوگا Divi».

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

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

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

سفارشی سازی ماژول نمونه کارها قابل فیلتر Divi: "نسخه کنفرانس Divi"

ابتدا باید قالب صفحه رویداد را از بسته طرح بندی کنفرانس Divi نصب کنیم. پس از ایجاد صفحه جدید خود در وردپرس و فعال سازی Divi Builder، وارد کتابخانه Divi می شویم.

وارد Divi Layout Library شوید

روی نماد کلیک کنید « بارگیری از کتابخانه برای ورود به کتابخانه Divi Layout

طرح‌بندی را در کتابخانه طرح‌بندی Divi پیدا کنید

با استفاده از تابع جستجو در کتابخانه طرح بندی Divi، به دنبال منش " صفحه رویداد کنفرانس"

طرح بندی را نصب کنید

پس از انتخاب طرح، روی " کلیک کنید از این طرح بندی استفاده کنید تا طرح را در صفحه خود نصب کنید.

ماژول تصویر را حذف و جایگزین کنید

ما ماژول Image نشان داده شده در زیر را حذف می کنیم تا فضایی را برای ماژول Filterable Portfolio که سفارشی سازی می کنیم باز کنیم. کلیک کنید روی " حذف پس از نگه داشتن ماوس روی تصویر برای حذف عکس.

ماژول نمونه کارها قابل فیلتر Divi را درج کنید

با حذف ماژول Image، اکنون می‌توانیم فضایی را برای ماژول Filterable Portfolio خود باز کنیم. ما روی نماد کلیک می کنیم اضافه کردن ماژول (علامت بعلاوه خاکستری)، سپس ماژول را در کادر مدال ظاهر شده انتخاب کنید.

تنظیم تعداد پست ها و چیدمان نمونه کارها

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

به این ترتیب، توصیه می کنیم مضربی از 4 (4، 8، 12، 16، و غیره) را به عنوان تعداد پست برای نمونه کار خود انتخاب کنید. 

برای این آموزش از 12 پروژه در گرید خود استفاده خواهیم کرد.

شروع به سفارشی سازی نمونه کارها فیلتر پذیر Divi: عنوان و متا متن

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

سبک متن

• تراز متن: در مرکز
• رنگ متن: تیره

سبک متن عنوان

• سطح عنوان عنوان: H2
• قلم عنوان: Krona One
• رنگ متن: #000000

سبک متا متن

• فونت متا: پیش فرض (Open Sans)
• رنگ متا متن: #ff6651

اکنون که سبک خود را برای عناوین موجود در شبکه نمونه کارها در نظر گرفته ایم، بیایید تغییراتی در شکل واقعی تصاویر کوچک پروژه ایجاد کنیم.

حاشیه تصویر کوچک پروژه و گوشه های گرد را تغییر دهید

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

تصویر

• تصویر:
  • گوشه های گرد: 50 پیکسل 50 پیکسل 50 پیکسل 0 پیکسل
  • سبک های حاشیه: همه
  • عرض حاشیه: 3 پیکسل
  • رنگ: #000000
  • سبک حاشیه: جامد

این به تصاویر کوچک ما شکلی می دهد که با بقیه تصاویر موجود در بسته طرح بندی مطابقت دارد.

سفارشی کردن Hover Overlay

بیایید با استایل خود یک قدم جلوتر برویم و تغییری جزئی در پوشش پیش‌فرض ارائه شده با این ماژول ایجاد کنیم. ما رنگ و همچنین نمادی را که مستقیماً از جعبه استفاده می شود تغییر خواهیم داد.

برهم نهی

• رنگ نماد زوم: #bcf5fd
• Hover Overlay Color: #ff6651
• انتخابگر نماد شناور: بزرگنمایی

همانطور که اکنون می‌بینید، رنگ‌های برند را برای این طرح‌بندی به پوشش اضافه کرده‌ایم، همچنین نمادی را که Divi به‌طور پیش‌فرض برای ویژگی overlay در شناور در این ماژول ارائه می‌کند، تغییر دادیم.

سفارشی سازی صفحه بندی

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

متن صفحه بندی

• صفحه بندی:
  • فونت: Krona One
  • تراز متن: در مرکز
  • رنگ متن: #ff6651، #000000 (Hover)

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

صفحه بندی نمونه کارها

border-top: 0px;

استفاده از تنظیمات Divi و CSS برای سفارشی کردن متن فیلتر

برای متن فیلتر، آن را یک درجه بالا می بریم. ما قصد داریم از CSS برای تغییر پس زمینه و همچنین افکت های شناور استفاده کنیم. 

ما می خواهیم تداوم کاملی بین ماژول جدید اضافه شده و سبک بسته طرح داشته باشیم. ابتدا بیایید تنظیمات Divi خود را برای فونت وارد کنیم.

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

• معیارهای فیلتر:
  • فونت: Krona One
  • رنگ قلم: #ffffff، #000000 (Hover)

به نظر می رسد فیلتر ما از بین رفته است. در واقع، در حالت پیش فرض خود، متن سفید روی پس زمینه سفید است. با این حال، ما این را با CSS سفارشی در دو مکان تغییر خواهیم داد. 

ابتدا یک قطعه CSS را در تنظیمات صفحه اضافه می کنیم که یک پس زمینه به متن فیلتر اضافه می کند. دوم، ما فیلتر نمونه کارها فعال را با استفاده از تب سفارشی می کنیم فناوری ماژول du

برای دسترسی تنظیمات صفحه، روی سه نقطه در وسط صفحه کلیک کنید. اختصاصی، نماد چرخ دنده را انتخاب کنید که تنظیمات صفحه را باز می کند. سپس شما به تب Custom CSS بروید و برای افزودن پس زمینه به متن فیلتر، موارد زیر را وارد کنید.

CSS سفارشی

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

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

سبک برگه فعال فیلتر نمونه کارها

برگه فعال fنمونه کارها توجه کاربران را به دسته بندی فعلی نمونه کارها که در حال بازدید هستند جلب می کند. در حال حاضر این فیلتر دارای متن سفید و پس زمینه روشن است. 

ما به برگه می رویم فناوری از ماژول Filterable Portfolio و متنی را به حالت های پیش فرض و شناور این ویژگی اضافه کنید. در اینجا ویژگی های CSS وجود دارد که در حالت پیش فرض اضافه می کنیم:

background: #ff6651;
color: #ffffff !important;

حالت شناور

در حالت شناور، پس‌زمینه را به سیاه تغییر می‌دهیم.

color: #000000!important;

نمای نهایی طراحی پورتفولیوی قابل فیلتر Divi با "کنفرانس Divi"

در اینجا نگاه نهایی است!

و اکنون، در اینجا به نظر می رسد که وقتی شناور می کنید!

سفارشی سازی ماژول نمونه کارها قابل فیلتر Divi: "Divi Online Yoga Instructor"

همانند نسخه کنفرانس Divi، طرح خود را در بسته چیدمان مربی یوگا آنلاین در داخل Divi Builder بیابید. 

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

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

از اینجا، ردیف‌های دارای کلاس‌ها را حذف می‌کنیم. روی نماد بنفش رنگ با سه نقطه کلیک کنید . سپس، نمای wireframe را انتخاب کنید. در نهایت، دو ردیف حاوی سه ستون را حذف خواهید کرد.

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

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

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

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

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

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

متن

• تراز متن: در مرکز
• رنگ متن: روشن

متن عنوان

• قلم عنوان: Cinzel
• رنگ متن عنوان: #ffffff

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

• معیارهای فیلتر وزن قلم: پررنگ
• رنگ متن معیار فیلتر: #ffffff

متن صفحه بندی

• وزن قلم صفحه بندی: پررنگ

این همان چیزی است که ماژول نمونه کارها قابل فیلتر ما در حال حاضر به نظر می رسد. زیاد نیست، اما کم کم داریم به آنجا می رسیم!

یک پوشش شناور نیمه شفاف ایجاد کنید

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

• رنگ نماد زوم: #323741
• Hover Overlay Color: rgba (255 201 165, 0,85)
• Hover Icon Picker: یک برگه را جستجو کنید و نماد بالا را ببینید

افزودن حاشیه به عناصر شبکه پورتفولیو با CSS سفارشی

مشابه مثال اول ما، اکنون از CSS برای افزودن علاقه بیشتر به ماژول نمونه کارها قابل فیلتر خود استفاده خواهیم کرد. 

اکنون یک حاشیه در اطراف هر آیتم جداگانه در شبکه نمونه کارها اضافه می کنیم. از قطعه CSS زیر در قسمت CSS سفارشی تنظیمات صفحه استفاده کنید تا مرز خود را اضافه کنید. 

ما همچنین از "border" به عنوان کلاس CSS برای این ماژول استفاده خواهیم کرد.

• کلاس CSS: مرز

CSS سفارشی

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

در اینجا ما اکنون ماژول Portfolio قابل فیلتر خود را با یک حاشیه زیبا - و بالشتک - در اطراف هر مورد شبکه داریم.

CSS به حاشیه صفحه بندی استایل اضافه شد

برخلاف مثال قبلی، اجازه دهید با CSS رنگی به مرز صفحه بندی خود اضافه کنیم. این نیز در منطقه خواهد بود تنظیمات > صفحه CSS سفارشی .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

معیارهای سبک متن را فیلتر کنید

مشابه سبک ماژول نمونه کارها کنفرانس Divi، ما می خواهیم جاز را به فیلترهای دسته بندی خود اضافه کنیم. مجدداً می خواهیم از سبکی که قبلاً در قالب ارائه شده به ما وجود دارد ، استفاده کنیم. 

در اینجا CSS است که ما در بخش CSS سفارشی خود اضافه خواهیم کرد تا پس‌زمینه را هدف قرار دهیم و نوار فیلتر خود را شناور کنیم.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

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

با این حال، توجه کنید که چگونه فیلتر نمونه کارها از بین می رود. همیشه یک پس زمینه روشن با متن سفید روی آن دارد. بیایید به تنظیمات ماژول برویم و برای تغییر آن مقداری CSS اضافه کنیم.

CSS سفارشی

فیلتر پورتفولیو فعال:

background: #ffffff;
color: #323741 !important;

انیمیشن ماژول را حذف کنید

برای ارائه یک تجربه پاک‌تر، انیمیشن پیش‌فرض همراه با ماژول Filterable Portfolio را حذف می‌کنیم. برای این کار ابتدا باید به تنظیمات صفحه خود برگردیم و مقداری CSS اضافه کنیم که عناصر شبکه نمونه کارها را هدف قرار می دهد و حذف می کند. انتقال کشویی که خارج از جعبه اتفاق می افتد.

CSS سفارشی

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

دفعات بازدید: Divi: نحوه تغییر تعداد ستون ها در یک وبلاگ

شبکه پورتفولیو را از چهار ستون به سه ستون تغییر دهید

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

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

CSS سفارشی

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

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

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

نتیجه

مانند اکثر ماژول های Divi، تنظیماتی که با Divi ارائه می شوند را می توان با CSS بیشتر توسعه داد. نمایش کار شما بخش مهمی از راه اندازی یک تجارت آنلاین، وبلاگ یا برند است. 

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

امیدواریم این تکنیک مهارت طراحی مفید دیگری را برای پروژه های آینده اضافه کند.

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

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

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

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

...