ডিভি দিয়ে ব্লগের গ্রিডগুলি কীভাবে কাস্টমাইজ করা যায়

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

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

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

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

ডিভি থিমের অন্যান্য টিউটোরিয়াল

এর শুরু করা যাক।

আপনার ব্লগ জন্য লেআউট কনফিগারিং

ব্লগ মডিউল কার্ডগুলির নকশা দিয়ে শুরু করার আগে, নিশ্চিত করুন যে আপনার কমপক্ষে 12 নিবন্ধটি বাক্সে একটি চিত্র দিয়ে ইতিমধ্যে তৈরি হয়েছে।

আপনার বার্তা তৈরি হয়ে গেলে, একটি নতুন পৃষ্ঠা তৈরি করুন। আপনার নতুন পৃষ্ঠায়, একটি স্ট্যান্ডার্ড অংশে পূর্ণ-প্রস্থ কলামে ব্লগ মডিউল স্থাপন করুন:

ব্লগ মডিউলটির সেটিংস সম্পাদনা করতে ক্লিক করুন। সাধারণ সেটিংসের অধীনে, নিম্নলিখিত সেটিংস পরিবর্তন করুন:

লেআউট: গ্রিড
নিবন্ধের সংখ্যা: 12 X
বৈশিষ্ট্যযুক্ত চিত্রটি দেখান: হ্যাঁ
বাটন আরও পড়ুন: অন

কাস্টম সিএসএসের অধীনে, সিএসএস আইডি পাঠ্য বাক্সে "গ্রিডকার্ড" লিখুন। এটি কেবল আমাদের এই ব্লগ মডিউলটিকে ব্যক্তিগতকৃত করার উপায় হবে।

আপনার পরিবর্তনগুলি সংরক্ষণ করুন

কীভাবে ব্লগের জন্য "গ্রিড" লেআউটটি বুঝতে হবে

এখন আপনি আপনার ব্লগের গ্রিডের জায়গায় থাকাকালীন গ্রিডের লেআউট কাঠামোটি বোঝা গুরুত্বপূর্ণ, যাতে আপনি ব্লগ মডিউলের মানচিত্রটি যে আপনি কাস্টমাইজ করতে চান তা সনাক্ত করতে পারেন।

ব্লগ গ্রিডটি একটি তিন-কলাম লেআউট দিয়ে কনফিগার করা হয়েছে। নিম্নলিখিতটি তিনটি কলামে বিভক্ত 12 ব্লগ নিবন্ধগুলির সাথে ব্লগ গ্রিডের একটি চিত্র:

ব্লগের টিকিট কার্ডগুলি প্রতিটি কলামে উপর থেকে নীচে অর্ডার করা হয়। সুতরাং, আপনি যদি তাদের একটি নম্বর দিতে চান তবে আপনাকে প্রতিটি দৈর্ঘ্যের উপর থেকে নীচে পর্যন্ত 1 থেকে 4 গণনা করতে হবে:

যেহেতু আপনি প্রতিটি কলামের অধীনে প্রতিটি ব্লগ কার্ডের সংখ্যাসূচক অর্ডারটি জানেন তাই আপনি প্রতিটি কার্ডকে একটি বিজোড় বা এমনকি সংখ্যার হিসাবে নিম্নলিখিত হিসাবে সনাক্ত করতে পারেন:

ডিজাইন গ্রিড উদাহরণ

উদাহরণ n ° 1: "পরীক্ষিত" গ্রিডের নকশা

এই প্রথম উদাহরণের জন্য, আমি প্রথম কলামে ব্লগ মডিউল (কার্ড 1 এবং 3) এর মধ্যে সমস্ত বিজোড় কার্ডগুলি তাদের গা dark় ধূসর ব্যাকগ্রাউন্ড রঙ প্রদান করব। এটি করতে, "ডিভি → থিম বিকল্পসমূহ" এ যান এবং কাস্টম সিএসএস পাঠ্য বাক্সে নিম্নলিখিত সিএসএস যুক্ত করুন:

#gridcard .column: প্রথম-সন্তান নিবন্ধ: nth-child (অদ্ভুত) {পশ্চাদপট: #333; }

এখানে এই কোড কি একটি ভাঙ্গন হয়:

# গ্রিডকার্ড = সম্পূর্ণ ব্লগ মডিউলটির আইডি

.column: first-child = ব্লগ মডিউলে প্রথম কলামটি নির্বাচন করুন

post: nth-child (বিজোড়) = কলামে সমস্ত বিজোড় আইটেম (বা কার্ড) নির্বাচন করে

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

তারপর আপনার সাদা পাঠ্য যোগ করুন যা নিম্নোক্ত CSS যুক্ত করে গাঢ় পটভূমির উপর চলে যাবে:

#gridcard .column: প্রথম-সন্তান আইটেম: nth-child (বিজোড়) .entry- শিরোনাম, #gridcard .column: প্রথম সন্তান নিবন্ধ: nth-child (অদ্ভুত)। পোস্ট-মেটা এ, # গ্রিডকার্ড। কলাম: প্রথম সন্তান }

এই কোডটি ব্লগের মডিউল কার্ডগুলির সমস্ত পাঠ্য উপাদানকে (শিরোনাম, নিবন্ধ মেটাস, নিবন্ধ মেটা লিঙ্কগুলি এবং নিবন্ধের সামগ্রী সহ) লক্ষ্যবস্তু করে এবং তাদের সাদা রঙ নির্ধারণ করে।

ফলাফল এখানে:

আমাদের চেকবোর্ড লেআউটটি তৈরি করার পরবর্তী পদক্ষেপটি হ'ল তৃতীয় কলামে বিজোড় সংখ্যাযুক্ত কার্ডগুলি লক্ষ্য করা এবং অন্ধকার ধূসর ব্যাকগ্রাউন্ড এবং সাদা পাঠ্যটি প্রয়োগ করা যেমন আপনি প্রথম কলামে করেছিলেন। কাস্টম সিএসএস পাঠ্য বাক্সে নিম্নলিখিত সিএসএস যুক্ত করুন:

# গ্রেডকার্ড। কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম শিশু (বিজোড়) {পটভূমি: # 333; } # গ্রেডকার্ড .কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম-শিশু (বিজোড়) .কেন্দ্রিক শিরোনাম, # গ্রেড কার্ড শিশু নিবন্ধ: নবম-শিশু (বিজোড়)। পোস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: শেষ-শিশু নিবন্ধ: নবম-শিশু (বিজোড়)। পোস্ট-সামগ্রী পি {রঙ: #ffffff; }

এই কোডটি "শেষ" কলামটি লক্ষ্যবস্তু করে (এই ক্ষেত্রে, তৃতীয় কলামটি হ'ল শেষ কলাম) ডাকনাম উপাদানটি "সর্বশেষ-শিশু" সহ

দ্বিতীয় কলামের জন্য (বা মাঝারি), চেকবোর্ডের প্রভাবটি সম্পূর্ণ করতে কার্ডগুলিকে লক্ষ্য করুন। এটি করার জন্য আমাদের নিম্নলিখিত সিএসএস যুক্ত করতে হবে:

# গ্রিডকার্ড। কলাম: নবম শিশু (2) নিবন্ধ: নবম শিশু (এমনকি) {পটভূমি: # 333; } # গ্রেডকার্ড। কলাম: নবম শিশু (2) নিবন্ধ: নবম শিশু (এমনকি) .কেন্দ্রিক শিরোনাম, # গ্রেডকার্ড। কলাম: নবম শিশু (2) নিবন্ধ: নবম শিশু (এমনকি) .পোস্ট-মেটা, # গ্রিডকার্ড .কলাম: নবম-সন্তান (2) নিবন্ধ: নবম-শিশু (এমনকি) .পোস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম-শিশু (এমনকি)। পোস্ট-সামগ্রী পি {রঙ : # এফএফ; }

এখন, ব্লগের মডিউল ম্যাপের চেকবোর্ডের লেআউট দেখতে ব্লগের পৃষ্ঠাটি দেখুন।

উদাহরণ # 2: চেকার্ড লেআউটের সাথে হোভার ইফেক্ট যুক্ত করা

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

এই উদাহরণস্বরূপ, আমি চেকবোর্ড লেআউটটি ব্যবহার করতে যাচ্ছি এবং এই সময় আমি মানচিত্রের উপরে ঘোরাফেরা করার সময় বৈশিষ্ট্যযুক্ত চিত্রগুলি গা dark় ধূসর মানচিত্র থেকে কালো এবং সাদাতে পরিবর্তন করতে যাচ্ছি। এবং, আমি যখন কার্ডের উপর দিয়ে ঘুরে বেড়াচ্ছি তখন সাদা কার্ডগুলির প্রথম পৃষ্ঠার চিত্রগুলি উজ্জ্বল করতে যাচ্ছি। এটি করার জন্য, কাস্টম সিএসএস অঞ্চলে নিম্নলিখিত সিএসএস যুক্ত করুন (অন্য কোডটি অক্ষম বা কাটা নিশ্চিত করুন যাতে এটি নতুনের সাথে বেমানান না হয়):

# গ্রেডকার্ড .কলাম: প্রথম সন্তানের নিবন্ধ: নবম-শিশু (বিজোড়), # গ্রেডকার্ড। কলাম: শেষ-শিশু নিবন্ধ: নবম-শিশু (বিজোড়), # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম-শিশু (এমনকি) {পটভূমি: # 333; } # গ্রেডকার্ড .কলাম: প্রথম সন্তানের নিবন্ধ: নবম-শিশু (বিজোড়) .কেন্দ্রিক শিরোনাম, # গ্রেডকার্ড। কলাম: প্রথম-শিশু নিবন্ধ: নবম-শিশু (বিজোড়) .পোস্ট-মেটা, # গ্রেডকার্ড। কলাম: প্রথম শিশু নিবন্ধ: নবম শিশু (বিজোড়)। পোস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (বিজোড়) .পোস্ট-বিষয়বস্তু পি, # গ্রেডকার্ড। কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম শিশু (বিজোড়) .েনট্রি-শিরোনাম, # গ্রেডকার্ড। কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম শিশু (বিজোড়) .পোস্ট-মেটা, # গ্রেডকার্ড। কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম শিশু (বিজোড়) , # গ্রেডকার্ড .কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম-শিশু (বিজোড়)। পোস্ট-বিষয়বস্তু পি, # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম-শিশু (এমনকি) .সেন্ট্রি-শিরোনাম, # গ্রিডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম-শিশু (এমনকি) .পোস্ট-মেটা, # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম-শিশু (এমনকি) ostপষ্ট-মেটা এ, # গ্রেডকার্ড .কলাম : নবম-শিশু (2) নিবন্ধ: নবম-শিশু (এমনকি)। পোস্ট-সামগ্রী p {রঙ: # ff; } # গ্রেডকার্ড। কলাম: নবম শিশু (2) নিবন্ধ: নবম শিশু (এমনকি): ইমাম, # গ্রেডকার্ড। কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (বিজোড়): হোভার ইমজি, # গ্রেডকার্ড। কলাম: শেষ -চিল্ড নিবন্ধ: নবম শিশু (বিজোড়): হোভার ইমজি {-ওয়েবেকিট-ফিল্টার: গ্রেস্কেল (1); ফিল্টার: গ্রেস্কেল (1); } # গ্রেডকার্ড। কলাম: নবম শিশু (2) নিবন্ধ: নবম শিশু (বিজোড়): হোভার আইএমজি, # গ্রেডকার্ড। কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (এমনকি): হোভার ইমজি, # গ্রেডকার্ড। কলাম: শেষ -চিল্ড নিবন্ধ: নবম শিশু (এমনকি): হোভার ইমগ {-ওয়েবেকিট-ফিল্টার: উজ্জ্বলতা (1.5); ফিল্টার: উজ্জ্বলতা (1.5); }

আপনি কার্ডগুলিতে একটি বিপরীত প্রভাবও যুক্ত করতে পারেন যাতে আপনি যখন সাদা কার্ডগুলিতে ঘুরে বেড়ান তখন তারা গা gray় ধূসর হয়ে যায় এবং আপনি যখন গা gray় ধূসর কার্ডের উপর ঘুরে দেখেন তারা সাদা হয়ে যায়।

উপরের সিএসএস ছাড়াও নিম্নলিখিত CSS যোগ করুন:

# গ্রেডকার্ড। কলাম কলাম নিবন্ধ, # গ্রেডকার্ড। কলাম কলাম নিবন্ধ img we-ওয়েবেকিট-ট্রানজিশন: সমস্ত 0.8 সেঃ; -মোজ-ট্রানজিশন: সমস্ত 0.8 এস; ট্রানজিশন: সমস্ত 0.8 এস; } # গ্রেডকার্ড। কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (বিজোড়): হোভার, # গ্রেডকার্ড। কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম শিশু (বিজোড়): হোভার, # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম শিশু (এমনকি): হোভার {পটভূমি: # fff; } # গ্রেডকার্ড .কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (বিজোড়): হোভার। সেন্ট্রি-শিরোনাম, # গ্রেডকার্ড। কলাম: প্রথম সন্তানের নিবন্ধ: নবম চাইল্ড (বিজোড়): হোভার .পোস্ট-মেটা, # গ্রিডকার্ড। কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (বিজোড়): হোভার .পোস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (বিজোড়): হোভার .পোস্ট-সামগ্রী পি, # গ্রেডকার্ড। কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম শিশু (বিজোড়): হোভার। সেন্ট্রি-শিরোনাম, # গ্রেডকার্ড। কলাম: শেষ-শিশু নিবন্ধ: নবম শিশু (বিজোড়): হোভার .পোস্ট-মেটা, # গ্রেডকার্ড। কলাম: সর্বশেষ সন্তানের নিবন্ধ : নবম-শিশু (বিজোড়): হোভার .পোস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: শেষ-শিশু নিবন্ধ: নবম শিশু (বিজোড়): হোভার। পোস্ট-সামগ্রী পি, # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম শিশু (এমনকি): হোভার। সেন্ট্রি-শিরোনাম, # গ্রেডকার্ড। কলাম: নবম শিশু (2) নিবন্ধ: নবম শিশু (এমনকি): হোভার .পোস্ট-মেটা, # গ্রেডকার্ড। কলাম: নবম-শিশু ( 2) নিবন্ধ: নবম-শিশু (এমনকি): হোভার .পোস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম-শিশু (এমনকি): পোস্ট করুন-সামগ্রী পি {রঙ: # 333; } # গ্রেডকার্ড। কলাম: প্রথম-শিশু নিবন্ধ: নবম-শিশু (এমনকি): হোভার, # গ্রেডকার্ড ol কলাম: শেষ-সন্তানের নিবন্ধ: নবম শিশু (এমনকি): হোভার, # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম শিশু (বিজোড়): হোভার {পটভূমি: # 333; } # গ্রেডকার্ড .কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (এমনকি): হোভার। সেন্ট্রি-শিরোনাম, # গ্রেডকার্ড .কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (এমনকি): হোভার .পোস্ট-মেটা, # গ্রিডকার্ড। কলাম: প্রথম সন্তানের নিবন্ধ: নবম শিশু (এমনকি): হোভার .পোস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: প্রথম-সন্তানের নিবন্ধ: নবম শিশু (এমনকি): পোষ্ট-সামগ্রী পি, # গ্রেডকার্ড। কলাম: সর্বশেষ সন্তানের নিবন্ধ: নবম শিশু (এমনকি): হোভার। সেন্ট্রি-শিরোনাম, # গ্রেডকার্ড। কলাম: শেষ-শিশু নিবন্ধ: নবম শিশু (এমনকি): হোভার .পোস্ট-মেটা, # গ্রেডকার্ড। কলাম: শেষ সন্তানের নিবন্ধ : নবম-শিশু (এমনকি): হোভার .পস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: শেষ-সন্তানের নিবন্ধ: নবম-শিশু (এমনকি): হোভার। পোস্ট-সামগ্রী পি, # গ্রেডকার্ড। কলাম: নবম-শিশু (2) নিবন্ধ: নবম-শিশু (বিজোড়): হোভার। সেন্ট্রি-শিরোনাম, # গ্রেডকার্ড। কলাম: নবম-সন্তান (2) নিবন্ধ: নবম-শিশু (বিজোড়): পোষ্ট-মেটা, # গ্রেডকার্ড। কলাম: নবম-শিশু (নবজাতক) 2) নিবন্ধ: নবম শিশু (বিজোড়): হোভার .পোস্ট-মেটা এ, # গ্রেডকার্ড। কলাম: নবম শিশু (2) নিবন্ধ: নবম শিশু (বিজোড়): হোভার .পোস্ট-সামগ্রী পি content রঙ: # ff; }

এখন আপনার ব্লগে এর প্রভাবটি দেখুন।

উদাহরণ # 3: সারি দ্বারা কার্ড কাস্টমাইজ করুন

তৃতীয় উদাহরণের জন্য, আমি একই অন্ধকার পটভূমি এবং প্রতিটি অন্যান্য সারিতে কার্ডগুলিতে সাদা পাঠ্য প্রয়োগ করতে যাচ্ছি (কলাম নয়)। এটি করার জন্য, আপনাকে প্রতিটি কলামের সমস্ত কার্ড এমনকি আপনার লক্ষ্যকে লক্ষ্য করতে হবে। থিমটির "ডিভিআই → বিকল্পগুলি" এ যান এবং এই টিউটোরিয়ালটি শুরু হওয়ার পরে আপনি যে কোনও পূর্ববর্তী সিএসএস কোড যুক্ত করেছেন তা অক্ষম বা মুছে ফেলার বিষয়ে নিশ্চিত হন। তারপরে নিম্নলিখিত সিএসএস যুক্ত করুন:

# গ্রিডকার্ড নিবন্ধ: নবম শিশু (এমনকি) {পটভূমির রঙ: # 333; } # গ্রেডকার্ড নিবন্ধ: নবম-শিশু (এমনকি) .কেন্দ্রি-শিরোনাম, # গ্রেডকার্ড নিবন্ধ: নবম-শিশু (এমনকি) .পোস্ট-মেটা, # গ্রেডকার্ড নিবন্ধ: নবম-শিশু (এমনকি) .পোস্ট-মেটা এবং # গ্রেডকার্ড নিবন্ধ : নবম-শিশু (এমনকি)। পোস্ট-সামগ্রী পি {রঙ: # ফাফ; }

ফলাফল কি এখানে:

উদাহরণ # এক্সএনএমএক্স: একটি নির্দিষ্ট গ্রিড মানচিত্র ডিজাইন করা

আপনারা কেউ কেউ একটি নির্দিষ্ট কার্ড চয়ন করতে পারেন। এটি করতে, আপনাকে অনন্য আইটেম আইডিটি সন্ধান করতে হবে যা আপনার প্রতিটি কার্ডের জন্য স্বয়ংক্রিয়ভাবে বরাদ্দ। এই উদাহরণস্বরূপ, আমি ক্রোম ব্রাউজার ব্যবহার করছি।

আপনার ব্লগ মডিউল প্রদর্শনকারী পৃষ্ঠায় যান এবং আপনার কার্ডগুলির একটিতে ডান-ক্লিক করুন। প্রদর্শিত বিকল্প বাক্সে, "পরিদর্শন" নির্বাচন করুন (কিছু ব্রাউজারে "ইন্সপেক্ট এলিমেন্ট" বা অনুরূপ কিছু থাকতে পারে। এটি বিকাশকারী সরঞ্জাম উইন্ডো স্থাপন করবে যা আপনার ওয়েব পৃষ্ঠার html এবং css উভয়ই প্রদর্শন করে। নিবন্ধ ট্যাগটি খুঁজুন নিবন্ধ এবং এটিতে দেওয়া নিবন্ধ আইডিটি নোট করুন৷ এটি হল নির্বাচক যা আপনার ব্যক্তিগত কার্ডকে লক্ষ্য করার জন্য ব্যবহার করা উচিত৷ আমার উদাহরণের জন্য, আমি "পোস্ট-3466" আইডিটি খুঁজে পেতে রাইট-ক্লিক করেছি এবং পরিদর্শনে ক্লিক করেছি৷

নীচে হিসাবে:

সিএসএস এ শুধুমাত্র এই কার্ডটি লক্ষ্য করে এটি একটি সাদা ফন্ট দিয়ে একটি ধূসর ব্যাকগ্রাউন্ড দিতে আপনাকে নিম্নলিখিত CSS ব্যবহার করতে হবে:

# পোস্ট -3466 {পটভূমি: # 333333; } # পোস্ট -৪৪। post পোস্ট }

এখন মানচিত্রে এটি নির্দিষ্ট স্টাইল প্রয়োগ করেছে।

এখানেই শেষ!

শেষ চিন্তা

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

যদি আপনার কোনও প্রশ্ন বা প্রস্তাবনাগুলি আমাকে তাদের প্রস্তাব দিতে মুক্ত মনে করে

[vc_row center_row = "হ্যাঁ"] [vc_column width = "1/2″] [vcex_button টার্গেট =" blank "layout =" প্রসারিত "align =" center "font_family =" Raleway "font_weight =" 700″ স্টাইল = "ফ্ল্যাট" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI থিম ডাউনলোড করুন [/ vcex_button] [wcex_button] [vcex_button] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" লক্ষ্য = "খালি" লেআউট = "প্রসারিত" সারিবদ্ধ = "কেন্দ্র" font_family = "Raleway" font_weight = "700″ স্টাইল =" ফ্ল্যাট "কাস্টম_ব্যাকগ্রাউন্ড =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "custom_hover_color =" #fffffff" কাস্টম_হওভার_color =" #FLOff-এটি-ডাউন DIVI [/ vcex_button][/ vc_column][/ vc_row]

ডিভি দিয়ে ব্লগের গ্রিডগুলি কীভাবে ব্যক্তিগতকৃত করবেন to