সিএসএস দিয়ে ডিভি মডিউলের জন্য কীভাবে একটি গ্রিড লেআউট তৈরি করবেন

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

এই টিউটোরিয়াল জুড়ে, আমরা একটি একক কলাম দিয়ে Divi মডিউলগুলির জন্য CSS গ্রিড লেআউট তৈরি করে কীভাবে Divi-এর গ্রিড লেআউটকে প্রসারিত করতে হয় তা অন্বেষণ করব। CSS গ্রিড হল ( CSS Flex ব্যবহার করে) মাত্র কয়েকটি CSS লাইন সহ কন্টেন্টের জন্য প্রতিক্রিয়াশীল গ্রিড তৈরি করতে খুবই জনপ্রিয়। আমরা তারপর প্রতিক্রিয়াশীল হতে আমাদের সমস্ত মডিউল সংগঠিত করতে পারি। এটিকে মডিউলগুলির জন্য একটি অতিরিক্ত লেআউট হিসাবে বিবেচনা করুন যা আপনি একটি Divi কলামে যোগ করতে পারেন। এখানে ভাল পয়েন্ট হল যে আমাদের সমস্ত নেস্টেড মডিউলের প্যাডিং এবং উচ্চতার মান সেট করার প্রয়োজন ছাড়াই একই উচ্চতা এবং প্রস্থ থাকবে।

চূড়ান্ত ফলাফলের পূর্বরূপ

শুরু করার আগে, দেখা যাক এই টিউটোরিয়ালের শেষে আপনি কী অর্জন করতে পারবেন।

Divi মডিউলের জন্য একটি কাস্টম CSS গ্রিড লেআউট তৈরি করা

পার্ট 1: একটি Divi কলামে মডিউল যোগ করা

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

আশ্চর্যজনক ওয়েবসাইট তৈরি করুন

সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে

এখুনি শুরু করুন

মডিউল তৈরি করা হচ্ছে

কলামের মধ্যে, আমরা পাঠ্য মডিউল যোগ করব। তারপরে আমরা নিম্নরূপ বিষয়বস্তু সেটিংস পরিবর্তন করব:

1. অনুচ্ছেদ পাঠের উপরে একটি H2 শিরোনাম যোগ করুন
2. পটভূমির রঙ: #444444

আমরা নিম্নরূপ ডিজাইন সেটিংস আপডেট করব:

1. টেক্সট ফন্ট: Poppins
2. পাঠ্যের রঙ: হালকা
3. হেডিং টেক্সটের অধীনে H2 ট্যাবটি নির্বাচন করুন
4. শিরোনাম 2 ফন্ট শৈলী: TT
5. প্যাডিং: 10% উপরে, 10% নীচে, 10% বাম 10% ডান

দ্রষ্টব্য : এটিকে খুব সহজ করার জন্য, আমরা প্রতিটি মডিউলের মধ্যে একটি পার্থক্য দেখাতে বিভিন্ন পটভূমির রঙ সহ একাধিক পাঠ্য মডিউল ব্যবহার করতে যাচ্ছি।

লেয়ার ভিউতে স্যুইচ করুন এবং নিম্নলিখিত টেক্সট মডিউল তৈরি করুন:

1. টেক্সট মডিউল ডুপ্লিকেট.
2. ডুপ্লিকেট মডিউলের জন্য পাঠ্য সেটিংস খুলুন।
3. পটভূমির রঙ আপডেট করুন
   • পটভূমির রঙ: #4c6085

আপনি নিম্নরূপ তৃতীয় পাঠ্য মডিউল তৈরি করতে এই প্রক্রিয়াটি পুনরাবৃত্তি করতে পারেন:

1. পূর্ববর্তী টেক্সট মডিউল নকল করুন।
2. ডুপ্লিকেট মডিউলের জন্য পাঠ্য সেটিংস খুলুন।
3. পটভূমির রঙ আপডেট করুন
   • পটভূমির রঙ: #39a0ed

নিম্নরূপ চতুর্থ পাঠ্য মডিউল তৈরি করতে আমরা প্রক্রিয়াটি আরও একবার পুনরাবৃত্তি করব:

1. পূর্ববর্তী টেক্সট মডিউল নকল করুন।
2. ডুপ্লিকেট মডিউলের জন্য পাঠ্য সেটিংস খুলুন।
3. পটভূমির রঙ আপডেট করুন
   • পটভূমির রঙ: #13c4a3

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

পর্ব 2: চলুন মডিউলের জন্য CSS গ্রিড লেআউট তৈরি করি

এখন আমাদের সমস্ত মডিউল যোগ করা হয়েছে, আসুন তাদের জন্য একটি গ্রিড তৈরি করি।

সারি সেটিংস

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

সারি সেটিংস খুলুন এবং নিম্নলিখিত আপডেট করুন:

• নর্দমার প্রস্থ: 1
• প্রস্থ: 100%
• সর্বোচ্চ-প্রস্থ: 100%

মডিউলগুলির জন্য গ্রিড বিন্যাস তৈরি করতে কলামে CSS গ্রিড যুক্ত করা হচ্ছে

এটি টিউটোরিয়ালের একটি গুরুত্বপূর্ণ পদক্ষেপ যা CSS গ্রিড বৈশিষ্ট্য ব্যবহার করে মডিউলগুলির জন্য বিন্যাস তৈরি করে।

এটি করার জন্য, আমরা কলামে CSS-এর তিনটি লাইন যোগ করতে যাচ্ছি যা আমাদের মডিউলগুলির বিন্যাস নির্ধারণ করবে।

কলাম সেটিংস খুলুন এবং, উন্নত ট্যাবের অধীনে, প্রধান উপাদানের ভিতরে নিম্নলিখিত CSS পেস্ট করুন:

display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;

CSS এর প্রথম লাইন CSS গ্রিড মডিউল অনুযায়ী বিষয়বস্তু (বা মডিউল) লেখে।

প্রদর্শন: গ্রিড

CSS-এর দ্বিতীয় লাইনে, আমরা গ্রিডের কলাম টেমপ্লেট সংজ্ঞায়িত করব। এই ক্ষেত্রে, আমাদের গ্রিডে চারটি কলাম থাকবে যার প্রস্থ 25% হবে।

গ্রিড-টেমপ্লেট-কলাম: 25% 25% 25% 25%

তৃতীয় লাইনটি সারিগুলি উল্লেখ করে যা স্বয়ংক্রিয়ভাবে তৈরি হবে। এর অর্থ হল প্রতিটি সারির উচ্চতা সারির মধ্যে থাকা বিষয়বস্তুর (বা মডিউল) উল্লম্ব উচ্চতা দ্বারা নির্ধারিত হবে।

গ্রিড-অটো-সারি: স্বয়ংক্রিয়

মোবাইলে গ্রিড লেআউট সামঞ্জস্য করুন

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

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

এই উদাহরণে, আমরা ট্যাবলেটের মডিউলগুলির জন্য গ্রিড লেআউটকে দুটি কলামে পরিবর্তন করতে যাচ্ছি যার প্রতিটি 50% প্রস্থ।

আসুন প্রতিক্রিয়াশীল বিকল্পগুলি খুলুন এবং প্রধান উপাদানের অধীনে ট্যাবলেট ট্যাবটি নির্বাচন করুন এবং নিম্নলিখিত CSS পেস্ট করুন:

display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;

ফোন প্রদর্শনের জন্য, আমরা একটি একক-কলাম বিন্যাস চাই। এটি তৈরি করতে, ফোন ট্যাব প্রধান উপাদানের অধীনে নিম্নলিখিত CSS পেস্ট করুন:

display:grid;grid-template-columns: 100%;grid-auto-rows: auto;

পার্ট 3: গ্রিড মডিউলে পরিবর্তন করা

গ্রিডে একটি নতুন মডিউল যোগ করা এবং এটি কীভাবে প্রতিক্রিয়া করে

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

কীভাবে গ্রিড বিভিন্ন পরিমাণ সামগ্রী সহ মডিউলগুলিতে প্রতিক্রিয়া জানায়

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

গ্রিডে মডিউলের অবস্থান পরিবর্তন করা

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

আমরা যদি CSS গ্রিডে একটি মডিউলের (বা গ্রিড আইটেম) অবস্থান পরিবর্তন করতে চাই, তাহলে আমরা একটি নির্দিষ্ট মডিউল গ্রিডে কোথায় স্থাপন করতে চাই তা নির্ধারণ করতে পারি। এটি করার ফলে গ্রিডে মডিউলের ডিফল্ট বসানো ওভাররাইড হবে।

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

প্রথম টেক্সট মডিউলের জন্য সেটিংস খুলুন এবং নিম্নলিখিত কাস্টম CSS প্রধান উপাদানে পেস্ট করুন:

grid-column: 2/4;grid-row: 2/3;

CSS-এর প্রথম লাইনটি মডিউলটিকে কলাম লাইন 2 থেকে শুরু করতে এবং কলাম লাইন 4 এ শেষ করতে বলে অনুভূমিকভাবে মডিউলের অবস্থান নির্ধারণ করে।

গ্রিড-কলাম: 2/4

CSS-এর দ্বিতীয় লাইনটি মডিউলটিকে উল্লম্বভাবে মডিউলের অবস্থান (বা গ্রিড আইটেম) সংজ্ঞায়িত করে সারি লাইন 2 থেকে শুরু করতে এবং সারি লাইন 3 এ শেষ করতে বলে।

গ্রিড-সারি: 2/3

ট্যাবলেট এবং ফোন প্রদর্শনের জন্য, আমরা মডিউলটিকে মূল অবস্থানে ফিরিয়ে আনব। এটি আপনার প্রধান শিরোনামটিকে পৃষ্ঠার শীর্ষে রাখার জন্য সহায়ক।

তাই এর জন্য, প্রধান উপাদানের জন্য প্রতিক্রিয়াশীল বিকল্পের অধীনে ট্যাবলেট ট্যাবটি নির্বাচন করুন এবং নিম্নলিখিত CSS পেস্ট করুন:

grid-column: auto;grid-row: auto;

এখন মডিউলের অবস্থান গ্রিড আইটেমগুলির আসল (স্বয়ংক্রিয়) প্রবাহে ফিরে যাবে।

আসুন ’ এগিয়ে যান এবং এই পদ্ধতিটি ব্যবহার করে আরও কয়েকটি মডিউল (বা গ্রিড আইটেম) অবস্থান করুন।

আমরা এখন গ্রিডের মধ্যে একটি নতুন সেট অবস্থানে তৃতীয় টেক্সট মডিউল (এখন উপরের সারির দ্বিতীয় কলামে) অবস্থান করব। এই নতুন অবস্থানটি কলাম লাইন 1 এ শুরু হবে এবং কলাম লাইন 2 এ শেষ হবে এবং সারি লাইন 2 থেকে শুরু হবে এবং সারি লাইন 4 এ শেষ হবে।

এটি করার জন্য, তৃতীয় টেক্সট মডিউলের জন্য সেটিংস খুলুন এবং নিম্নলিখিত কাস্টম CSSটিকে প্রধান উপাদানে আটকান:

grid-column: 1/2;grid-row: 2/4;

আমরা এখন ট্যাবলেটের জন্য নিম্নলিখিত CSS যোগ করে মোবাইলের অবস্থান পরিবর্তন করতে পারি:

grid-column: auto;grid-row: auto;

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

এর জন্য, সপ্তম টেক্সট মডিউলের জন্য সেটিংস খুলুন এবং নিম্নলিখিত কাস্টম CSSটিকে মূল উপাদানে পেস্ট করুন:

grid-column: 4/5;grid-row: 2/4;

এখন ট্যাবলেট প্রদর্শনের জন্য নিম্নলিখিত CSS পেস্ট করুন।

grid-column: auto;grid-row: auto;

কেন্দ্রে মডিউল (বা গ্রিড আইটেম) বিষয়বস্তু সারিবদ্ধ করা

আপনি সম্ভবত নির্দেশে ক্লান্ত, কিন্তু আমরা যদি এখানে থামি, আমরা আমাদের মডিউল বিষয়বস্তু উল্লম্বভাবে সারিবদ্ধ (বা কেন্দ্রে) করার একটি সহায়ক উপায় মিস করব। মডিউল বিষয়বস্তু উল্লম্বভাবে কেন্দ্রীভূত থাকা গ্রিড লেআউটের একটি চমৎকার বৈশিষ্ট্য কারণ এটি সবকিছুকে আরও প্রতিসম এবং নান্দনিকভাবে আনন্দদায়ক করে তোলে।

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

display:flex;flex-direction:column;align-items:center;justify-content:center;

আমরা এখন আমাদের অন্য তিনটি মডিউলে ফিরে যেতে পারি (মডিউল #1, #3 এবং #7) পৃথকভাবে এবং CSS এর সাথে একই স্নিপেট যোগ করতে পারি যা মডিউলটিকে গ্রিডে একটি কাস্টম অবস্থান দিতে ব্যবহৃত হয়েছিল। ডেস্কটপ এবং ট্যাবলেট উভয়ের জন্য বিদ্যমান CSS-এর অধীনে CSS স্নিপেট যোগ করা নিশ্চিত করুন।

সর্বশেষ ফলাফল

আমরা এখন পর্যন্ত যা করেছি তা দেখতে কেমন তা এখানে।

আপনি কি লক্ষ্য করতে পারেন কিভাবে মডিউল (বা গ্রিড আইটেম) একটি সুন্দর প্রতিক্রিয়াশীল ডিজাইনের জন্য বিভিন্ন ব্রাউজার প্রস্থে মসৃণভাবে সামঞ্জস্য করে।

বিভিন্ন মডিউল এবং ডিজাইন ব্যবহার করে বাস্তব উদাহরণ

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

সব আপনার এখন

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

মন্তব্য বিভাগে আপনি কতটা সফল তা দেখে আমরা খুশি হব।