কীভাবে এলিমেন্টর বিভাগ এবং কলামগুলি সারিবদ্ধ করবেন

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

• কেন আমরা সারিবদ্ধ করা প্রয়োজন?
• একটি প্রতিক্রিয়াশীল ডিজাইনের জন্য কলাম বা বিভাগগুলি কীভাবে কাজ করে?
• কিভাবে Elementor বিভাগ এবং কলাম সারিবদ্ধ?
• প্রতিক্রিয়াশীল প্রস্থ সমস্যা সমাধান করতে ওভারফ্লো লুকানো ব্যবহার করুন
• অবস্থানের যত্ন নেওয়া
• আপেক্ষিক ইউনিট
• Z-সূচক ব্যবহার করে প্রতিটি উপাদানের গভীরতা নিয়ন্ত্রণ করুন
• ডুপ্লিকেট কার্যকারিতা সম্পর্কে কৌতুক
• অফসেট
• সুবর্ণ নিয়ম
• উপসংহার

কেন আমরা সারিবদ্ধ করা প্রয়োজন?

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

ভাল প্রান্তিককরণের সাথে, আপনি ওয়েবসাইটটিকে আরও ঝরঝরে এবং উত্কৃষ্ট দেখাতে পারেন- যাতে এটি বিশৃঙ্খল না দেখায়। সারিবদ্ধকরণ বিকল্পের সাথে, আপনি একই কলামে একে অপরের পাশে বিভিন্ন আকারের বেশ কয়েকটি উইজেট সামঞ্জস্য করতে পারেন।

একটি প্রতিক্রিয়াশীল ডিজাইনের জন্য কলাম বা বিভাগগুলি কীভাবে কাজ করে?

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

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

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

সুতরাং তিনটি কলাম পাশাপাশি থাকার পরিবর্তে, আপনি তিনটি কলাম একে অপরের উপর স্ট্যাক করা অনুভব করতে পারেন। উপাদানটি আর মাঝের কলামে প্রদর্শিত হবে না যেমনটি ডেস্কটপে দেখায়।

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

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

কিভাবে Elementor বিভাগ এবং কলাম সারিবদ্ধ?

প্রতিটি বিভাগ/কলামের জন্য, লেআউট বিভাগে অবতরণ করুন এবং আপনার প্রয়োজনীয়তা অনুযায়ী নিম্নলিখিত প্রান্তিককরণ বিকল্পগুলি সেট করুন:

• উল্লম্ব সারিবদ্ধ: আপনি নিম্নলিখিত থেকে উইজেটগুলির জন্য সেটিংস চয়ন করতে পারেন। তবে একটি বিষয় আপনাকে অবশ্যই মনে রাখতে হবে যে একটি কলামের বিষয়বস্তু প্রথম তিনটি কলামের উল্লম্ব বিকল্পের সাথে সারিবদ্ধ করা যাবে না যেমন শীর্ষ, মধ্য এবং নীচে।
• শীর্ষ
• মধ্য
• নীচে

^* রয়েছে যা আপনার পছন্দ অনুযায়ী বিষয়বস্তু সারিবদ্ধ করা সত্যিই সুবিধাজনক করে তোলে।

• ^*স্পেস বিটুইন – কলামের প্রান্তে শুরুতে এবং শেষে উইজেটের মধ্যে স্থান নির্ধারণ করে। উইজেটগুলি সমান-স্পেসযুক্ত অর্থাৎ তাদের মধ্যে সমান স্থান রয়েছে।
• ^*চারপাশে স্থান - উইজেটগুলির মধ্যে স্থান সমান, এবং প্রান্তগুলি উইজেটগুলির মধ্যে স্থানের অর্ধেক আকারের।
• ^*সমানভাবে স্থান - উইজেটগুলির মধ্যে স্থানটি অভিন্ন- এটি তাদের মধ্যে, আগে এবং পরে সমান।

• অনুভূমিক সারিবদ্ধ: এই বিকল্পের সাহায্যে আপনি ইনলাইন পজিশনিং করতে পারেন এবং ইনলাইন উইজেটগুলিকে সারিবদ্ধ করতে পারেন, যা একই সারিতে আছে, অনুভূমিকভাবে। আপনি এই বিকল্পগুলি ব্যবহার করে কলামের বিষয়বস্তু অনুভূমিকভাবে সারিবদ্ধ করতে পারেন:
• স্টার্ট- বাম দিকে সমস্ত আইকন সারিবদ্ধ করে
• কেন্দ্র: আইকনগুলিকে কলামের মাঝখানে রাখে
• শেষ- সমস্ত আইকন ডানদিকে সেট করে
• স্পেস বিটুইন - কলামের প্রান্তে শুরুতে এবং শেষে উইজেটগুলির মধ্যে স্থান। উইজেটগুলি সমান-স্পেসযুক্ত অর্থাৎ তাদের মধ্যে সমান স্থান রয়েছে
• চারপাশে স্থান - উইজেটগুলির মধ্যে স্থান সমান, এবং প্রান্তগুলি উইজেটগুলির মধ্যে স্থানের অর্ধেক আকারের
• সমানভাবে স্থান - উইজেটগুলির মধ্যে স্থানটি অভিন্ন- এটি তাদের মধ্যে, আগে এবং পরে সমান

প্রতিক্রিয়াশীল প্রস্থ সমস্যা সমাধান করতে ওভারফ্লো লুকানো ব্যবহার করুন

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

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

লেআউট সেটিংস > ওভারফ্লো বিকল্পটিকে লুকানোতে

এটি করার মাধ্যমে, অতিরিক্ত এলাকাটি কেটে ফেলা হবে এবং অনুভূমিকভাবে স্ক্রোল করার প্রয়োজন হবে না

অবস্থানের যত্ন নেওয়া

আপনাকে কলামগুলির অবস্থানের যত্ন নিতে হবে। আপনি Elementor 2.5 এর সাথে কাস্টম পজিশনিং সেট করতে পারেন — পরম এবং স্থির।

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

স্থির অবস্থানটি পরম থেকে আলাদা কারণ এটি বিভাগ/উপাদানটিকে দর্শকের দৃষ্টিভঙ্গিতে স্থির থাকতে দেয়। সুতরাং, যদি ব্যবহারকারী পৃষ্ঠার মাধ্যমে স্ক্রোল করে, উপাদানটি সেখানে থাকবে।

আপেক্ষিক ইউনিট

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

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

Z-সূচক ব্যবহার করে প্রতিটি উপাদানের গভীরতা নিয়ন্ত্রণ করুন

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

ডুপ্লিকেট কার্যকারিতা সম্পর্কে কৌতুক

আপনি যদি কাস্টম পজিশনিং সহ একটি উপাদান নকল করতে ডান-ক্লিক ব্যবহার করেন, তাহলে মনে হতে পারে যে ডান-ক্লিক কাজ করেনি।

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

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

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

অফসেট

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

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

সুবর্ণ নিয়ম

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

উপসংহার

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