Divi ব্যবহার করে একটি সাইট তৈরি করার সময়, বিষয়বস্তু উল্লম্বভাবে সারিবদ্ধ করার বিকল্পটি আপনার ডিজাইন টুলকিটে একটি মূল্যবান সংযোজন হতে পারে। লেআউটের উপর নির্ভর করে, বিষয়বস্তু বিভিন্ন উপায়ে উল্লম্বভাবে সারিবদ্ধ করা প্রয়োজন হতে পারে (কেন্দ্রিক, নীচে, উপরে)। আপনার উপাদান উল্লম্বভাবে সারিবদ্ধ করা সবচেয়ে সাধারণ প্রয়োজন হয়. এটি আপনার সামগ্রীতে প্রতিসম ব্যবধানের একটি সুন্দর স্পর্শ যোগ করে, যা একাধিক কলাম লেআউট ব্যবহার করার সময় খুব দরকারী। অধিকন্তু, উল্লম্বভাবে কেন্দ্রীভূত বিষয়বস্তু ব্রাউজার প্রস্থ জুড়ে কেন্দ্রীভূত থাকে, অনুরূপ প্রতিক্রিয়াশীলতা অর্জনের জন্য কাস্টম প্যাডিং বা মার্জিনের প্রয়োজনীয়তা দূর করে।
এই পাঠে, আমি আপনাকে শিখাবো কিভাবে CSS-এর কয়েকটি সহজ লাইন ব্যবহার করে যেকোনো কলামে বিষয়বস্তু উল্লম্বভাবে সারিবদ্ধ করা যায়। প্রদর্শনের উদ্দেশ্যে, আমি Divi-এর প্রিফেব্রিকেটেড লেআউটগুলির বেশ কয়েকটি ব্যবহার করব। আপনি যদি CSS এর সাথে অপরিচিত হন তবে আপনাকে উদ্বিগ্ন হওয়ার দরকার নেই। কয়েক সেকেন্ডের মধ্যে, আপনি এটি আপনার ডিজাইনে প্রয়োগ করতে সক্ষম হবেন।
- ফ্লেক্স এবং ডিভির মধ্যে পার্থক্য বোঝা
- এটা কি প্রয়োজন?
- আপনার পৃষ্ঠায় পূর্ব-কনফিগার করা লেআউট যোগ করুন।
- পদ্ধতি 1: ফ্লেক্স এবং স্বয়ংক্রিয় মার্জিনের সাথে বিষয়বস্তুকে উল্লম্বভাবে সারিবদ্ধ করা
- নীচে বিষয়বস্তু প্রান্তিককরণ
- আপনার সারির কলামের জন্য উল্লম্ব বিষয়বস্তু প্রান্তিককরণ
- পদ্ধতি 2: কলাম ফ্লেক্স দিকনির্দেশ ব্যবহার করে উল্লম্বভাবে বিষয়বস্তু সারিবদ্ধ করা
- শুধুমাত্র একটি কলাম সহ লেআউট সম্পর্কে কি?
- ডিভিআই এর উল্লম্ব এবং অনুভূমিক প্রান্তিককরণের চূড়ান্ত চিন্তাভাবনা
ফ্লেক্স এবং ডিভির মধ্যে পার্থক্য বোঝা
ফ্লেক্স (বা ফ্লেক্সবক্স) সিএসএস অ্যাট্রিবিউট হল আইটেমগুলিকে অনুভূমিক এবং উল্লম্ব স্ট্যাকগুলিতে সাজানোর একটি মাধ্যম (যেমন একটি টেবিলের মতো)। সাধারণ সারণীগুলির বিপরীতে, তবে, ফ্লেক্স বৈশিষ্ট্যটি আপনাকে বাক্স তৈরি করতে দেয় যা তাদের সামগ্রীর আকারে "ফ্লেক্স" করে।
আপনি যখন আপনার সারি সেটিং হিসাবে "কলাম উচ্চতা সমান করুন" নির্বাচন করেন তখন Divi ফ্লেক্স বৈশিষ্ট্য ব্যবহার করে। সহজ কথায়, এটি নিশ্চিত করে যে আপনার সমস্ত কলামের আকার সর্বাধিক তথ্য সহ কলামের আকারের সাথে সামঞ্জস্য করে। যেহেতু "কলামের উচ্চতা সমান করুন" সারি কন্টেইনারের জন্য ফ্লেক্সকে ট্রিগার করে, তাই আপনি প্রতিটি কলামের (বা বাক্স) বিষয়বস্তু পরিবর্তন করতে আপনার কলামগুলিতে CSS যোগ করে এটি ব্যবহার করতে পারেন।
আপনি যদি একটি সারিতে যেকোনো কলামে "মার্জিন: অটো" যোগ করেন, amp , সেই কলামের বিষয়বস্তু (সেটি এক বা একাধিক মডিউলই হোক না কেন) উল্লম্বভাবে কেন্দ্রীভূত হবে।
আপনার সমস্ত কলাম (এবং তাদের বিষয়বস্তু) উল্লম্বভাবে কেন্দ্রীভূত হবে যদি আপনি "সারিবদ্ধ-আইটেম: কেন্দ্র;" যোগ করেন আপনার সারিতে।
অবশ্যই, ফ্লেক্স প্রপার্টিতে ওয়েব ডিজাইনের আরও অনেক অ্যাপ্লিকেশন এবং আরও উন্নত CSS রয়েছে যা আপনি আপনার থিমে ব্যবহার করতে পারেন। যাইহোক, আমি এই টিউটোরিয়ালের জন্য জিনিসগুলি সহজ রাখতে চেয়েছিলাম।
এটা কি প্রয়োজন?
একটি প্রযুক্তিগত অর্থে, না আপনি একটি কলাম (প্যাডিং এবং মার্জিন) মধ্যে আপনার বিষয়বস্তু/মডিউল উল্লম্বভাবে অবস্থান করতে কাস্টম স্পেসিং ব্যবহার করতে পারেন। amp , আপনি একটি কলাম সমান উপরের এবং নীচে প্যাডিং দিতে সারির মধ্যে মডিউল(গুলি) উল্লম্বভাবে কেন্দ্রে রাখতে Divi এর স্পেসিং বিকল্পগুলি ব্যবহার করতে পারেন। আপনি একটি কলামে শীর্ষ প্যাডিং যোগ করে বিষয়বস্তুকে নীচে-সারিবদ্ধ করতে পারেন। আপনার পৃষ্ঠায় আরও সামগ্রী যোগ করার সময়, আপনাকে ব্যবধান পরিবর্তন করতে হতে পারে। উপরন্তু, একাধিক ব্রাউজার আকার জুড়ে এই প্রান্তিককরণ বজায় রাখা সমস্যাযুক্ত হতে পারে।
সুতরাং, আপনি যদি নির্দিষ্ট ব্যবধান সম্পর্কে চিন্তা না করে তথ্যকে উল্লম্বভাবে সারিবদ্ধ করার উপায় অনুসন্ধান করেন, আমি মনে করি আপনি এটি উপকারী পাবেন।
এই পার্টি শুরু করা যাক!
আপনার পৃষ্ঠায় পূর্ব-কনফিগার করা লেআউট যোগ করুন।
আমি ইন্টেরিয়র ডিজাইন কোম্পানি পোর্টফোলিও পেজ লেআউট দিয়ে শুরু করতে যাচ্ছি। আপনার পৃষ্ঠায় এই লেআউটটি পেতে একটি নতুন পৃষ্ঠা তৈরি করুন৷ এর পরে, আপনার পৃষ্ঠার একটি নাম দিন। ড্রপ-ডাউন মেনু থেকে "ডিভি বিল্ডার ব্যবহার করুন" এবং তারপরে "ভিজ্যুয়াল বিল্ডার ব্যবহার করুন" নির্বাচন করুন। তারপরে ড্রপ-ডাউন মেনু থেকে "একটি প্রিমেড লেআউট চয়ন করুন" নির্বাচন করুন৷ তারপর, লোড ফ্রম লাইব্রেরি উইন্ডো থেকে ইন্টেরিয়র ডিজাইন কোম্পানি লেআউট প্যাক নির্বাচন করুন। অবশেষে, লেআউট নির্বাচন থেকে, পোর্টফোলিও পৃষ্ঠাটি নির্বাচন করুন এবং "এই লেআউটটি ব্যবহার করুন" এ ক্লিক করুন।
আপনার পৃষ্ঠায় লেআউট লোড হওয়ার পরে আপনি শুরু করতে প্রস্তুত৷
পদ্ধতি 1: ফ্লেক্স এবং স্বয়ংক্রিয় মার্জিনের সাথে বিষয়বস্তুকে উল্লম্বভাবে সারিবদ্ধ করা
দ্বিতীয় সারির জন্য সারি সেটিংস খুলুন (পৃষ্ঠার শিরোনাম সহ সারির নীচে একটি)। ডিজাইন বিকল্পগুলিতে সাইজিং বিকল্প গ্রুপটি খুলুন এবং নোট করুন যে "কলাম উচ্চতা সমান করুন" ইতিমধ্যে সক্রিয় রয়েছে; এটি বোঝায় যে ফ্লেক্স প্রপার্টি ("ডিসপ্লে: ফ্লেক্স;") সারিতে যোগ করা হয়েছে।
কলাম 2 প্রধান উপাদান ইনপুট বক্সের অধীনে, একই সারির জন্য উন্নত ট্যাব সেটিংসে যান এবং নিম্নলিখিত CSS স্নিপেট যোগ করুন।
দ্বিতীয় কলামের বিষয়বস্তু এখন উল্লম্বভাবে কেন্দ্রীভূত করার জন্য স্থানান্তরিত করা হয়েছে।
| 01 | মার্জিন: স্বয়ংক্রিয়; |
নীচে বিষয়বস্তু প্রান্তিককরণ
আপনার সামগ্রীর নীচে সারিবদ্ধ করতে আপনি নিম্নরূপ মার্জিন মান পরিবর্তন করতে পারেন যাতে সমস্ত মডিউল আপনার কলামের নীচে স্ট্যাক থাকে:
| 01 | মার্জিন: অটো 0; |
আপনার সারির কলামের জন্য উল্লম্ব বিষয়বস্তু প্রান্তিককরণ
আপনি প্রতিটি কলামে পৃথকভাবে "মার্জিন: স্বয়ংক্রিয়" যোগ করার পরিবর্তে আপনার সারির সেটিংসের প্রধান উপাদানটিতে নিম্নলিখিত স্নিপেট যোগ করে আপনার সারির সমস্ত কলামের বিষয়বস্তুকে উল্লম্বভাবে কেন্দ্রে রাখতে পারেন।
| 01 | align-items: কেন্দ্র; |
আপনি যদি আপনার কলামের সমস্ত তথ্য নীচে সারিবদ্ধ করতে চান তবে আপনি এই স্নিপেটটি ব্যবহার করতে পারেন:
| 01 | align-items: flex-end; |
মনে রাখবেন যে আপনি আপনার CSS স্নিপেটের সাথে প্রধান উপাদানটিতে ডান-ক্লিক করে এবং "প্রধান উপাদান প্রসারিত করুন" নির্বাচন করে Divi এর এক্সটেন্ড স্টাইল বৈশিষ্ট্যটি ব্যবহার করতে পারেন।
তারপর, পৃষ্ঠার প্রতিটি কলামের সমস্ত বিষয়বস্তু উল্লম্বভাবে কেন্দ্রীভূত করতে, পুরো পৃষ্ঠায় (বা বিভাগ) সমস্ত সারিতে প্রধান উপাদান CSS প্রয়োগ করুন।
সবকিছু এখন উল্লম্বভাবে ভারসাম্যপূর্ণ।
যাইহোক, আপনি হয়তো লক্ষ্য করেছেন যে সাদা কলামের ব্যাকগ্রাউন্ড কালারটি আর পুরো সারিকে কভার করে না কারণ কলামের "মার্জিন: অটো" যোগ করা হয়েছে। আপনি সারি ব্যাকগ্রাউন্ডের রঙ সাদা করে এবং সারি প্যাডিং অপসারণ করে এর প্রতিকার করতে পারেন। পরিবর্তে, আমি আপনাকে শিখাবো কিভাবে মার্জিন পরিবর্তন না করে আপনার কলামের বিষয়বস্তু কেন্দ্রে রাখতে হয়।
পদ্ধতি 2: কলাম ফ্লেক্স দিকনির্দেশ ব্যবহার করে উল্লম্বভাবে বিষয়বস্তু সারিবদ্ধ করা
আমরা প্রথমে সারিতে যুক্ত ফ্লেক্স সম্পত্তি ব্যবহার করেছি। ফলস্বরূপ, আমাদের প্রতিটি কলাম একটি "ফ্লেক্স বক্স" হয়ে উঠেছে যা মার্জিন পরিবর্তন করে উল্লম্বভাবে সারিবদ্ধ করা যেতে পারে।
যাইহোক, আমরা "কলামের উচ্চতা সমান করুন" প্রভাবকে ত্যাগ না করে আমাদের কলামের পাঠ্যকে সারিবদ্ধ করার জন্য ফ্লেক্স-দিকনির্দেশ ব্যবহার করতে পারি, যা আমাদের কলাম (এবং কলামের পটভূমি) একই আকার রাখে। এটি সম্পন্ন করার জন্য, আমরা আমাদের সারিতে CSS-এর কয়েকটি লাইন যুক্ত করব, যার ফলে এর মধ্যে থাকা সমস্ত মডিউল উল্লম্বভাবে স্ট্যাক করা হবে এবং তারপর কেন্দ্রীভূত হবে।
আগের amp le's row-এ ফিরে আসি। কাস্টম সিএসএস-এ রাইট-ক্লিক করে এবং "কাস্টম সিএসএস শৈলী রিসেট করুন" নির্বাচন করে, আপনি সারি সেটিংসে থাকা যেকোনো কাস্টম সিএসএস সরিয়ে ফেলতে পারেন।
তারপর, কলাম 2 প্রধান উপাদানে, নিম্নলিখিত CSS প্রয়োগ করুন:
| 010203 | প্রদর্শন: flex; flex-direction: column; justify-content: center; |
বিষয়বস্তু নীচে সারিবদ্ধ করতে "জাস্টিফাই-সামগ্রী: কেন্দ্র" তে পরিবর্তন করুন।
আমি এই কনফিগারেশনটি পছন্দ করি কারণ আমি যদি আমার বিষয়বস্তুকে উল্লম্বভাবে অবস্থান করি এবং সারিটি সম্পূর্ণ প্রস্থ করি তবে বিষয়বস্তু কেন্দ্রীভূত থাকবে।
বিভিন্ন পরিমাণ পাঠ্যের সাথে উল্লম্বভাবে সারিবদ্ধ ব্লার্ব তৈরি করা
আপনার কলামগুলির বিষয়বস্তু উল্লম্বভাবে কেন্দ্রীভূত করাও ব্লার্বের সাথে সাহায্য করতে পারে। আপনি হয়তো জানেন, প্রতিটি ব্লার্বে কোনো বৈশিষ্ট্য বা পরিষেবা বর্ণনা করার জন্য একই পরিমাণ পাঠ্য থাকবে না। এই ব্লার্বগুলিকে উল্লম্বভাবে কেন্দ্রীভূত করা আপনার লেআউটকে সুন্দর দেখাতে সাহায্য করতে পারে।
ডিজিটাল পেমেন্ট হোম পেজ লেআউটের জন্য, আমি এই amp জন্য ব্লার্বগুলি উল্লম্বভাবে সারিবদ্ধ করব।
একটি সাইটের চেহারার আরো বাস্তবসম্মত চিত্রায়ন তৈরি করতে, আমি প্রথমে ব্লার্বগুলিতে বিভিন্ন পরিমাণে বডি কন্টেন্ট যোগ করব।
এখন আমাকে সারি সেটিংসে "কলামের উচ্চতা সমান" করতে হবে।
এখন আমি আমার পাঠ্য সারিবদ্ধ করতে পারি এবং সিএসএস স্নিপেট ব্যবহার করে নকশা সামঞ্জস্য করতে পারি।
আমরা আমাদের সারি সেটিংসের উন্নত ট্যাবের প্রধান উপাদান বিভাগে নিম্নলিখিত যোগ করে আমাদের কলামের বিষয়বস্তুকে উল্লম্বভাবে কেন্দ্রীভূত করতে পারি:
| 01 | align-items: কেন্দ্র; |
নীচের অংশে সারিবদ্ধ করতে অনুগ্রহ করে এটিকে নিম্নলিখিতগুলিতে পরিবর্তন করুন৷
| 01 | align-items: flex-end; |
এছাড়াও আপনি আপনার কাস্টম CSS শৈলী রিসেট করে এবং নিম্নলিখিত কাস্টম মার্জিন যোগ করে প্রথম কলামটি নীচে-সারিবদ্ধ এবং তৃতীয় কলামটিকে শীর্ষ-সারিবদ্ধ করতে পারেন।
কলাম 1 প্রধান উপাদান CSS:
| 01 | মার্জিন: অটো অটো 0; |
কলাম 3 প্রধান উপাদান CSS:
| 01 | মার্জিন: 0 অটো অটো; |
শুধুমাত্র একটি কলাম সহ লেআউট সম্পর্কে কি?
আপনার এক-কলামের বিষয়বস্তু উল্লম্বভাবে কেন্দ্রীভূত করতে আপনার একটি CSS স্নিপেট বা ফ্লেক্সের প্রয়োজন নেই। আপনাকে যা করতে হবে তা হল নিশ্চিত করুন যে আপনার পাঠ্যের উপরে এবং নীচে সমান ব্যবধান রয়েছে (বা মডিউল)। বেশিরভাগ ভোক্তাদের অনেকগুলি কলাম সহ লেআউটগুলিতে উল্লম্বভাবে কেন্দ্রীভূত বিষয়বস্তুর প্রয়োজন কারণ তারা চান যে সংলগ্ন উপাদানগুলি সঠিকভাবে সারিবদ্ধ হোক।
ডিভিআই এর উল্লম্ব এবং অনুভূমিক প্রান্তিককরণের চূড়ান্ত চিন্তাভাবনা
যদিও এই সমাধানটি কাস্টম CSS-এর কয়েকটি ছোটখাট স্নিপেটের উপর নির্ভর করে, আমি মনে করি এটি একটি সময়সাপেক্ষ পদ্ধতির দ্রুত নিরাময়ের সন্ধানকারী লোকেদের জন্য সহায়ক হতে পারে। অনুগ্রহ করে নির্দ্বিধায় এই পদ্ধতির বিষয়ে আপনার মতামত শেয়ার করুন, সেইসাথে অতীতে কীভাবে এটি আপনার সময় এবং শ্রম বাঁচিয়েছে তার amp পাঠ।
পরিষ্কার ব্যাখ্যা জন্য ধন্যবাদ. যাইহোক, এটি একটি ব্লগ মডিউলের সাথে কাজ করে না। তারপর সারিতে শুধুমাত্র 1 কলাম আছে। একে অপরের পাশে ব্লগের সংখ্যা মডিউল (ডিফল্ট 3) দ্বারা নির্ধারিত হয়। এখানেও কি একই কলাম তৈরি করা যায়?
হাই, না আমি দুঃখিত এটা শুধুমাত্র ক্লাসিক্যাল DIVI কলামের জন্য, DIVI ব্লগ মডিউলে কলাম সারিবদ্ধ করার জন্য সম্পূর্ণ আলাদা কোড আছে।
আপনি যদি চান যে মডিউলটি 2/3 এর নিচের দিকে বা উপরে থেকে 1/3 সারিবদ্ধ হোক - এবং পুরোপুরি মাঝখানে উপরে বা নীচে না?
হাই, আমি ভয় পাচ্ছি যে এটির জন্য কিছু কাস্টম সিএসএস করতে হবে, ডিফল্টরূপে এমন কোন বিকল্প নেই।
হতে পারে আপনি মাঝখানে বিষয়বস্তু সারিবদ্ধ করার চেষ্টা করতে পারেন এবং আপনার সামগ্রীতে কিছু প্যাডিং যোগ করতে পারেন, কিন্তু দয়া করে সাবধানে সমস্ত ডিভাইসে রেন্ডারিং পরীক্ষা করুন৷