ডিভি: “ফিল্টারেবল পোর্টফোলিও” মডিউলে একটি গ্রিড এলিমেন্ট কীভাবে কাস্টমাইজ করবেন

এর ফিল্টারযোগ্য পোর্টফোলিও মডিউলের গ্রিড উপাদানগুলি কীভাবে কাস্টমাইজ করা যায় তা আপনি জানতে চান৷ Divi এই টিউটোরিয়ালে আমাদের অনুসরণ করুন...

আপনার ওয়েবসাইটে আপনার কাজ প্রদর্শনের জন্য একটি নির্দিষ্ট জায়গা থাকা গুরুত্বপূর্ণ। আপনি যদি একজন স্টাইলিস্ট হন, তাহলে আপনার ডিজাইন প্রদর্শনের জন্য আপনার ওয়ার্ডপ্রেস ওয়েবসাইটে একাধিক প্রকল্প তৈরি করতে পারেন। আপনি যদি একজন ব্র্যান্ড নির্মাতা হন, তাহলে আপনার কাজ উপস্থাপনের জন্য একটি পোর্টফোলিও ব্যবহার করতে পারেন। তাছাড়া, আমরা আরও এক ধাপ এগিয়ে আমাদের প্রকল্পগুলির জন্য বিভিন্ন বিভাগ যুক্ত করতে পারি। এখানেই এখানেই Divi-এর ফিল্টারেবল পোর্টফোলিও মডিউলটি আসে .

এই মডিউলের সাহায্যে, আমরা আমাদের কঠোর পরিশ্রমকে সহজ এবং সুসংগঠিতভাবে প্রদর্শন করতে সক্ষম। 

আজকের টিউটোরিয়ালে, আমরা ফিল্টারেবল পোর্টফোলিও মডিউলের পৃথক গ্রিড উপাদানগুলি কাস্টমাইজ করব। আমরা ফ্রি লেআউট প্যাকগুলি থেকে লেআউটগুলি ব্যবহার করব। বিভাগীয় সম্মেলন et Divi অনলাইন যোগ প্রশিক্ষক এর প্রতিটি ক্রয়ের সাথে সরবরাহ করা হয় Divi . 

Divi সম্পর্কিত সবকিছুর মতো, আমাদের চাহিদা এবং ইচ্ছা অনুসারে এই মডিউলটি কাস্টমাইজ করার বিকল্প রয়েছে। যাইহোক, স্টাইলটি গভীরভাবে আলোচনা করার আগে, আসুন মডিউলটি সম্পর্কে আরও কিছু জেনে নেওয়া যাক।

ডিভিতে ফিল্টারেবল পোর্টফোলিও মডিউল কী?

প্রজেক্ট হলো এক ধরণের কাস্টম পোস্ট যা নিয়মিত পোস্টের মতোই কাজ করে। আপনি এগুলি আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে খুঁজে পেতে পারেন।

এখানেই আপনি আপনার ব্যক্তিগত প্রকল্প তৈরি করবেন যা আপনার ফিল্টারেবল পোর্টফোলিও মডিউলটি পূরণ করবে। মডিউলটি আমাদের প্রকল্পগুলি প্রদর্শনের দুটি উপায় দেয়: একটি গ্রিড বিন্যাসে ou একটি পূর্ণ-প্রস্থ বিন্যাসে. আমাদের জন্য, আমরা গ্রিড বিন্যাস ব্যবহার এবং কাস্টমাইজ করব। 

ফিল্টারযোগ্য পোর্টফোলিও মডিউল দিয়ে, আমরা আমাদের সাম্প্রতিক প্রকল্পগুলি উপস্থাপন করতে সক্ষম হব। আমাদের সাইটের ব্যবহারকারীরা আমাদের পোর্টফোলিও গ্রিডের শীর্ষে একটি ফিল্টার বার দেখতে পাবেন। সেখান থেকে, তারা বিভিন্ন পোর্টফোলিও বিভাগের মাধ্যমে ব্রাউজ করতে পারে যা আমরা মডিউলে প্রদর্শন করার অনুমতি দিই।

এখানে কিছু নমুনা প্রকল্প সহ মডিউলটির একটি উদাহরণ গ্রিড কনফিগারেশন রয়েছে:

Divi-এর ফিল্টারযোগ্য পোর্টফোলিও তৈরি করার সময় বিবেচনা করতে হবে

সকল ডিভি মডিউলের মতো, ফিল্টারেবল পোর্টফোলিও মডিউলটিতে বেশ কিছু বৈশিষ্ট্য রয়েছে যা আমাদের চাহিদা এবং পছন্দ অনুসারে কাস্টমাইজ করা যেতে পারে। মডিউলের বেশিরভাগ বৈশিষ্ট্য ট্যাবে পরিবর্তন করা যেতে পারে। নকশা মডিউল সেটিংস মোডাল থেকে। আমরা নিম্নলিখিত ক্ষেত্রগুলি এবং আরও অনেক কিছু সম্পাদনা করতে পারি:

• প্রকল্প শিরোনাম
• প্রকল্প বিভাগ
• চিত্র
• পাঠ্য ফিল্টার করুন
• হোভারে থাম্বনেল
• পত্রাঙ্কন

এটি একটি সম্পূর্ণ তালিকা নয়, এবং আমরা এখনও CSS এই মডিউলে আরও গভীর কাস্টমাইজেশন কীভাবে যুক্ত করেছে তা নিয়ে কথা বলা শুরু করিনি!

কিভাবে আমরা Divi এর ফিল্টারযোগ্য পোর্টফোলিও মডিউল কাস্টমাইজ করব

আগেই উল্লেখ করা হয়েছে, এই টিউটোরিয়ালের জন্য আমরা দুটি লেআউট ব্যবহার করব: বিভাগীয় সম্মেলন et Divi অনলাইন যোগ প্রশিক্ষক. এই টিউটোরিয়ালের সময় আমরা যে কাজটি করতে যাচ্ছি তার একটি ওভারভিউ আপনি নীচে পেতে পারেন।

"ডিভি কনফারেন্স" উপস্থাপনার উপাদানগুলির বিন্যাস

"ডিভি অনলাইন যোগ প্রশিক্ষক" পৃষ্ঠায় উপাদানগুলির বিন্যাস

আপনি সহজেই Divi বিল্ডার থেকে উভয় লেআউট ডাউনলোড করতে পারেন। 

এখন শুরু করা যাক!

আরো দেখুন: Divi: ফিল্টারযোগ্য পোর্টফোলিও মডিউলের গ্রিড এবং পূর্ণ-প্রস্থ লেআউটের মধ্যে বেছে নিন

ডিভি ফিল্টারেবল পোর্টফোলিও মডিউল কাস্টমাইজ করা: "ডিভি কনফারেন্স সংস্করণ"

প্রথমে, আমাদের Divi কনফারেন্স লেআউট প্যাক থেকে ইভেন্ট পৃষ্ঠা টেমপ্লেটটি ইনস্টল করতে হবে। ওয়ার্ডপ্রেসে আপনার নতুন পৃষ্ঠা তৈরি করার পরে এবং Divi বিল্ডার সক্রিয় করার পরে, আমরা Divi লাইব্রেরিতে প্রবেশ করব।

Divi লেআউট লাইব্রেরিতে প্রবেশ করুন

আইকনে ক্লিক করুন "লাইব্রেরি থেকে লোড করুন"ডিভি লেআউট লাইব্রেরি অ্যাক্সেস করতে"

ডিভি লেআউট লাইব্রেরিতে লেআউটটি সনাক্ত করুন

ডিভির লেআউট লাইব্রেরিতে অনুসন্ধান ফাংশন ব্যবহার করে, খুঁজছেন বিধানসম্মেলন ইভেন্ট পৃষ্ঠা".

লেআউট ইনস্টল করুন

লেআউট নির্বাচন করার পরে, " বোতামে ক্লিক করুনএই লেআউট ব্যবহার করুন"আপনার পৃষ্ঠায় লেআউট ইনস্টল করতে।

ইমেজ মডিউল সরান এবং প্রতিস্থাপন করুন

আমরা ফিল্টারেবল পোর্টফোলিও মডিউলের জন্য জায়গা তৈরি করতে নীচে দেখানো ইমেজ মডিউলটি সরিয়ে ফেলব, যা আমরা কাস্টমাইজ করব। " আইকনে ক্লিক করুনমুছে ফেলা"ছবিটি মুছে ফেলার জন্য ছবির উপর ঘোরানোর পরে।

Divi এর ফিল্টারযোগ্য পোর্টফোলিও মডিউল সন্নিবেশ করুন

ইমেজ মডিউলটি সরানোর পর, আমরা এখন আমাদের ফিল্টারেবল পোর্টফোলিও মডিউলের জন্য জায়গা তৈরি করতে পারি। আমরা "আইকনে ক্লিক করব"মডিউল যোগ করুন"(ধূসর প্লাস চিহ্ন), তারপর প্রদর্শিত মডিউল মডেল বাক্সে মডিউলটি নির্বাচন করুন।

পোস্টের সংখ্যা এবং পোর্টফোলিও লেআউট সেট করা

ডিফল্টরূপে, এই মডিউলটি আপনার কাজ একটি একক কলামে উপস্থাপন করবে। যাইহোক, আমরা গ্রিড লেআউট ব্যবহার করব যা ডিফল্টভাবে 4টি কলাম সহ আসে। 

যেমন, আমরা আপনার পোর্টফোলিওর জন্য পোস্টের সংখ্যা হিসাবে 4 (4, 8, 12, 16, ইত্যাদি) এর একাধিক নির্বাচন করার পরামর্শ দিই। 

এই টিউটোরিয়ালের জন্য, আমরা আমাদের গ্রিডে 12টি প্রকল্প ব্যবহার করব।

ডিভির ফিল্টারযোগ্য পোর্টফোলিও কাস্টমাইজ করা শুরু করুন: শিরোনাম এবং মেটা টেক্সট

এখন যেহেতু আমাদের প্রকল্পগুলি একটি গ্রিডে প্রদর্শিত হচ্ছে, আসুন আমাদের নির্বাচিত টেমপ্লেট থেকে কিছু ডিজাইন উপাদান লিঙ্ক করি। এই ক্ষেত্রে, আমরা আমাদের নতুন মডিউলে Divi কনফারেন্স লেআউট প্যাকের সাথে প্রদত্ত স্টাইলটি ব্যবহার করব।

পাঠ্য শৈলী

• পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
• পাঠ্যের রঙ: গাঢ়

শিরোনাম টেক্সট শৈলী

• শিরোনাম শিরোনাম স্তর: H2
• শিরোনাম ফন্ট: ক্রোনা ওয়ান
• পাঠ্যের রঙ: #000000

মেটা টেক্সট শৈলী

• মেটা ফন্ট: ডিফল্ট (ওপেন সানস)
• মেটা টেক্সট রঙ: #ff6651

এখন যেহেতু আমরা পোর্টফোলিও গ্রিডে শিরোনামের জন্য আমাদের স্টাইলিং পেয়েছি, আসুন প্রকল্প থাম্বনেইলের আসল আকারে কিছু পরিবর্তন করি।

প্রকল্পের থাম্বনেইল সীমানা এবং বৃত্তাকার কোণগুলি পরিবর্তন করুন

আমাদের ডিভি কনফারেন্স লেআউট প্যাকে, আমরা প্যাকের কিছু কীফ্রেমকে একটি অনন্য আকৃতি দিতে বৃত্তাকার কোণগুলির একটি অনন্য সমন্বয় ব্যবহার করি। আমাদের মডিউলের থাম্বনেইলে এই স্টাইলটি প্রয়োগ করা যাক।

ভাবমূর্তি

• ছবি:
  • গোলাকার কোণ: 50px 50px 50px 0px
  • সীমানা শৈলী: সব
  • সীমানা প্রস্থ: 3px
  • রঙ: #000000
  • সীমানা শৈলী: কঠিন

এটি আমাদের থাম্বনেইলকে এমন একটি আকৃতি দেবে যা লেআউট প্যাকের বাকি অন্যান্য ছবির সাথে মেলে।

হোভার ওভারলে কাস্টমাইজ করা

আসুন আমাদের স্টাইলটি আরও একধাপ এগিয়ে নিয়ে যাই এবং এই মডিউলের সাথে প্রদত্ত ডিফল্ট ওভারলেতে সামান্য পরিবর্তন করি। আমরা রঙ পরিবর্তন করব এবং সেই সাথে ব্যবহৃত আইকনটিও পরিবর্তন করব।

উপরিপাত

• জুম আইকনের রঙ: #bcf5fd
• হোভার ওভারলে রঙ: #ff6651
• হোভার আইকন পিকার: জুম

আপনি এখন দেখতে পাচ্ছেন, আমরা ওভারলেতে এই লেআউটের ব্র্যান্ড রঙগুলি যুক্ত করেছি, পাশাপাশি এই মডিউলের উপর হোভার করার সময় ওভারলে ফাংশনের জন্য ডিভি ডিফল্টরূপে যে আইকনটি সরবরাহ করে তা পরিবর্তন করেছি।

পৃষ্ঠাগুলি কাস্টমাইজ করা

আমরা এখন আমাদের ফিল্টারেবল পোর্টফোলিও মডিউলে আরও কাস্টমাইজেশন যোগ করার জন্য ছোট ছোট CSS স্নিপেট ব্যবহার শুরু করব। প্রথমে, আমরা এই মডিউলের পৃষ্ঠাঙ্কন কাস্টমাইজ করব। তারপর, আমরা CSS এর একটি লাইন দিয়ে উপরে প্রদর্শিত সীমানাটি সরিয়ে ফেলব।

পৃষ্ঠা সংখ্যা টেক্সট

• পৃষ্ঠা:
  • হরফ: ক্রোনা ওয়ান
  • পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
  • পাঠ্যের রঙ: #ff6651, #000000 (হোভার)

আমাদের CSS এর জন্য, আমরা ট্যাবে স্যুইচ করব অগ্রসর আমাদের মডিউলের। দ্বিতীয়ত, আমরা ট্যাবে ক্লিক করব কাস্টম সিএসএস। এরপর, আমরা আমাদের পৃষ্ঠাঙ্কনের উপরের সীমানাটি সরিয়ে ফেলার জন্য নিম্নলিখিত কোড স্নিপেটটি প্রবেশ করাবো, যা এটিকে আরও পরিষ্কার দেখাবে।

পোর্টফোলিও পেজিনেশন

border-top: 0px;

ফিল্টার টেক্সট কাস্টমাইজ করতে Divi সেটিংস এবং CSS ব্যবহার করা

ফিল্টার টেক্সটের জন্য, আমরা এটিকে আরও এক ধাপ উপরে নিয়ে যাব। আমরা ব্যাকগ্রাউন্ডের পাশাপাশি হোভার ইফেক্ট পরিবর্তন করতে CSS ব্যবহার করব। 

আমরা নতুন যোগ করা মডিউল এবং লেআউট প্যাকের স্টাইলের মধ্যে নিখুঁত ধারাবাহিকতা বজায় রাখতে চাই। প্রথমে, ফন্টের জন্য আমাদের Divi সেটিংসে যাওয়া যাক।

ফিল্টার মানদণ্ড পাঠ্য

• ফিল্টার মানদণ্ড:
  • হরফ: ক্রোনা ওয়ান
  • হরফের রঙ: #ffffff, #000000 (হোভার)

এখন মনে হচ্ছে আমাদের ফিল্টারটি অদৃশ্য হয়ে গেছে। প্রকৃতপক্ষে, এর ডিফল্ট অবস্থায়, এটি কেবল একটি সাদা পটভূমিতে সাদা লেখা। তবে, আমরা দুটি জায়গায় কাস্টম CSS দিয়ে এটি পরিবর্তন করতে যাচ্ছি। 

প্রথমে, আমরা পৃষ্ঠা সেটিংসে একটি CSS স্নিপেট যুক্ত করব যা ফিল্টার টেক্সটে একটি ব্যাকগ্রাউন্ড যুক্ত করবে। দ্বিতীয়ত, আমরা ট্যাব ব্যবহার করে সক্রিয় পোর্টফোলিও ফিল্টারটি কাস্টমাইজ করব। অগ্রসর du মডিউল।

অ্যাক্সেস করতে পৃষ্ঠার সেটিংস অ্যাক্সেস করতে, স্ক্রিনের মাঝখানে তিনটি বিন্দুতে ক্লিক করুন। তারপর গিয়ার আইকনটি নির্বাচন করুন যা পেজ সেটিংস খুলবে। তারপর আপনি কাস্টম সিএসএস ট্যাবে যান। এবং ফিল্টার টেক্সটে একটি পটভূমি যোগ করতে নিম্নলিখিতটি লিখুন।

কাস্টম সিএসএস

এই CSS স্নিপেটে, আমরা ফিল্টারের ব্যাকগ্রাউন্ড কালার টার্গেট করেছি। আমরা এর হোভার স্টেট টার্গেট এবং স্টাইলও করেছি। এরপর, মডিউলে আরও কিছু CSS যোগ করা যাক এবং আমাদের সক্রিয় ফিল্টার ট্যাবটি হাইলাইট করা যাক।

/* 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 এর সক্রিয় ট্যাবপোর্টফোলিও ilter এটি ব্যবহারকারীদের দৃষ্টি আকর্ষণ করে বর্তমান পোর্টফোলিওর বিভাগটির দিকে। বর্তমানে, এই ফিল্টারটিতে সাদা লেখা এবং হালকা ব্যাকগ্রাউন্ড রয়েছে। 

আমরা ট্যাবে যাচ্ছি। অগ্রসর ফিল্টারযোগ্য পোর্টফোলিও মডিউলের এবং এই বৈশিষ্ট্যটির ডিফল্ট এবং হোভার অবস্থায় পাঠ্য যোগ করুন। এখানে CSS বৈশিষ্ট্যগুলি রয়েছে যা আমরা একটি ডিফল্ট অবস্থায় যুক্ত করব:

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

হোভার উপর রাজ্য

হোভারে, আমরা ব্যাকগ্রাউন্ড কালো করে দেব।

color: #000000!important;

"ডিভি কনফারেন্স" এর মাধ্যমে ডিভি ফিল্টারেবল পোর্টফোলিও ডিজাইনের চূড়ান্ত রূপ

এখানে চূড়ান্ত চেহারা!

এবং এখন, আপনি ঘোরাঘুরি করলে কেমন লাগে তা এখানে!

ডিভি ফিল্টারেবল পোর্টফোলিও মডিউল কাস্টমাইজ করা: "ডিভি অনলাইন যোগ প্রশিক্ষক"

ডিভি কনফারেন্স সংস্করণের মতো, ডিভি বিল্ডারের ভিতরে অনলাইন যোগ প্রশিক্ষক লেআউট প্যাকে আপনার লেআউটটি খুঁজুন। 

এই টিউটোরিয়ালের জন্য আমরা ল্যান্ডিং পেজ লেআউট ব্যবহার করব। Section শিরোনাম সহ Section Classes বিভাগে স্ক্রোল করুন। সকল আসন্ন ক্লাস.

ফিল্টারযোগ্য পোর্টফোলিও মডিউল সন্নিবেশ করা হচ্ছে

এখান থেকে, আমরা ক্লাস সহ সারিগুলি সরিয়ে দেব। তিনটি বিন্দু সহ বেগুনি আইকনে ক্লিক করুন । তারপরে, ওয়্যারফ্রেম ভিউ নির্বাচন করুন। অবশেষে, আপনি তিনটি কলাম ধারণকারী দুটি সারি মুছে ফেলবেন।

এরপর, আমরা সারির ভিতরে একটি একক কলাম দিয়ে তাদের প্রতিস্থাপন করব। তারপর, আমরা আমাদের ফিল্টারেবল পোর্টফোলিও মডিউল যুক্ত করব।

আগের উদাহরণের মতো, আমরা এই মডিউলের জন্য গ্রিড লেআউট ব্যবহার করব যেখানে প্রকাশনার সংখ্যার জন্য 4 এর গুণিতক থাকবে। 

এবার আসুন মানচিত্রে আমরা যে তথ্য উপস্থাপন করি তা দিয়ে একটু ভিন্ন কিছু করি। 

ট্যাবে সন্তুষ্ট, নেভিগেট করুন উপাদান এবং অনির্বাচন করুন বিভাগগুলি দেখান এর মানে হল যে পোর্টফোলিও মডিউলটি শুধুমাত্র প্রকল্পের নাম প্রদর্শন করবে, যেখানে এটি অবস্থিত বিভাগের নাম থাকবে না।

ফিল্টার মানদণ্ডের পাঠ্য, প্রকল্পের শিরোনাম এবং পৃষ্ঠা সংখ্যা পাঠের কাস্টমাইজেশন

আমাদের মডিউলের পাঠ্য অংশগুলির জন্য শৈলী বেস সংজ্ঞায়িত করা যাক। এই লেআউটের বডি টেক্সট হল ওপেন সান্স এবং প্রধান শিরোনাম জন্য ব্যবহৃত ফন্ট হয় সিনজেল. অতএব, আমরা স্টাইলিং প্রক্রিয়া জুড়ে এই দুটি ফন্টের সংমিশ্রণ ব্যবহার করব।

পাঠ

• পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
• পাঠ্যের রঙ: হালকা

শিরোনাম পাঠ্য

• শিরোনাম ফন্ট: Cinzel
• শিরোনাম পাঠ্যের রঙ: #ffffff

ফিল্টার মানদণ্ড টেক্সট

• ফিল্টার মানদণ্ড ফন্ট ওজন: গাঢ়
• ফিল্টার মানদণ্ড টেক্সট রঙ: #ffffff

পৃষ্ঠা সংখ্যা টেক্সট

• পেজিনেশন ফন্ট ওজন: গাঢ়

আমাদের ফিল্টারেবল ওয়ালেট মডিউলটি এখন এইরকম দেখাচ্ছে। খুব বেশি কিছু নয়, তবে আমরা ধীরে ধীরে সেখানে পৌঁছাচ্ছি!

হোভারে একটি স্বচ্ছ ওভারলে তৈরি করা হচ্ছে

এই লেআউটের বিভিন্ন মডিউল এবং সুন্দর গ্রেডিয়েন্ট থেকে অনুপ্রেরণা নেওয়া যাক। এটি করার জন্য, আমরা একটি স্বচ্ছ হোভার ওভারলে তৈরি করব এবং হোভারে প্রদর্শিত আইকনটি কাস্টমাইজ করব।

• জুম আইকনের রঙ: #323741
• হোভার ওভারলে রঙ: rgba (255 201 165, 0,85)
• হোভার আইকন পিকার: একটি শীট অনুসন্ধান করুন এবং উপরে আইকনটি দেখুন

কাস্টম CSS ব্যবহার করে পোর্টফোলিও গ্রিড উপাদানগুলিতে একটি বর্ডার যুক্ত করা

আমাদের প্রথম উদাহরণের মতো, আমরা এখন আমাদের ফিল্টারেবল পোর্টফোলিও মডিউলে আরও আগ্রহ যোগ করতে CSS ব্যবহার করব। 

এখন, আমরা পোর্টফোলিও গ্রিডের প্রতিটি উপাদানের চারপাশে একটি বর্ডার যুক্ত করব। আমাদের বর্ডার যুক্ত করতে পৃষ্ঠা সেটিংসের কাস্টম CSS বিভাগে নীচের CSS স্নিপেটটি ব্যবহার করুন। 

আমরা এই মডিউলের জন্য CSS ক্লাস হিসেবে "border" ব্যবহার করব।

• CSS ক্লাস: বর্ডার

কাস্টম সিএসএস

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

এখানে এখন আমাদের ফিল্টারেবল পোর্টফোলিও মডিউল রয়েছে যার প্রতিটি গ্রিড এলিমেন্টের চারপাশে একটি সুন্দর বর্ডার - এবং প্যাডিং - রয়েছে।

শৈলী পেজিনেশন বর্ডারে CSS যোগ করা হয়েছে

আমাদের পূর্ববর্তী উদাহরণের বিপরীতে, আসুন CSS-এর সাথে আমাদের পেজিনেশনের বর্ডারে রঙ যোগ করি। এটাও এলাকায় যাবে সেটিংস > কাস্টম CSS পৃষ্ঠা .

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

ফিল্টার মানদণ্ড টেক্সট শৈলী

আমাদের ডিভি কনফারেন্স পোর্টফোলিও মডিউলের শৈলীর মতো, আমরা আমাদের ক্যাটাগরির ফিল্টারগুলিতে জ্যাজ যুক্ত করতে চাই। আবার, আমরা সেই শৈলী থেকে আঁকতে চাই যা ইতিমধ্যে আমাদের দেওয়া টেমপ্লেটে উপস্থিত রয়েছে। 

আমাদের ফিল্টার বারের ব্যাকগ্রাউন্ড এবং হোভারকে লক্ষ্য করে আমরা আমাদের কাস্টম 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 যোগ করুন।

কাস্টম সিএসএস

সক্রিয় পোর্টফোলিও ফিল্টার:

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

মডিউল অ্যানিমেশনটি সরান

আরও পরিষ্কার অভিজ্ঞতা প্রদানের জন্য, আমরা ফিল্টারেবল পোর্টফোলিও মডিউলের সাথে আসা ডিফল্ট অ্যানিমেশনটি সরিয়ে ফেলব। এটি করার জন্য, আমাদের প্রথমে আমাদের পৃষ্ঠা সেটিংসে ফিরে যেতে হবে এবং পোর্টফোলিও গ্রিড উপাদানগুলিকে লক্ষ্য করে এমন 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 ID যোগ করব # তিন-কলাম-গ্রিড আমাদের মডিউলে। আমরা সবসময় আমাদের পূর্ববর্তী 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-এর ফিল্টারেবল পোর্টফোলিও মডিউলের মাধ্যমে আপনার নিজস্ব ডিজাইন যাত্রা শুরু করতে আজ শেয়ার করা টিপসগুলি থেকে উপকৃত হন।

আশা করি এই কৌশলটি ভবিষ্যতের প্রকল্পগুলির জন্য আরেকটি দরকারী নকশা দক্ষতা যোগ করবে।

আমরা আশা করি এই টিউটোরিয়ালটি আপনাকে আপনার পরবর্তী ডিভি প্রকল্পগুলির জন্য অনুপ্রাণিত করবে। আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।

আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানের প্রয়োজন হয়।

এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.

কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.

...