মাত্রা

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

মাত্রা একটি প্রো ক্ষেত্র। বিনামূল্যের প্লাগইনটিতে একটি সীমিত উইজেট বিল্ডার রয়েছে এবং ক্ষেত্রগুলির সম্পূর্ণ সেট সহ আসে৷ মাস্টার অ্যাডনস প্রো.

মাত্রা ক্ষেত্র কি করে #

• এটি এলিমেন্টর প্যানেলে চারটি নম্বর বাক্স দেখায়। লিঙ্ক আইকন চালু থাকলে, একটি বাক্সে টাইপ করলে চারটিই পূরণ হয়।
• একটি ইউনিট মেনু সম্পাদকদের আপনার অনুমতি দেওয়া ইউনিটগুলির মধ্যে স্যুইচ করতে দেয়, যেমন px, em এবং %।
• আপনি আপনার প্রয়োজন নেই এমন দিকগুলি লুকিয়ে রাখতে পারেন। একটি বোতাম প্যাডিং ক্ষেত্র শুধুমাত্র ডান এবং বাম দেখাতে পারে।
• এলিমেন্টর ফিল্ডের CSS নির্বাচক সারিগুলির মাধ্যমে আপনার জন্য CSS লেখে, যখন প্রতিক্রিয়াশীল নিয়ন্ত্রণ চালু থাকে তখন ডিভাইস প্রতি পৃথক মান সহ।

আপনি যদি এখনও একটি উইজেট তৈরি না করে থাকেন তবে পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথম।

আপনি শুরু করার আগে #

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• Elementor এবং Master Addons Pro এর জন্য মাস্টার অ্যাডঅন, উভয়ই সক্রিয়। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল একটি "প্রাইজিং কার্ড" উইজেট সহ a price-card বক্স এবং ক price-btn বোতাম, এবং তিনটি মাত্রা ক্ষেত্র: কার্ড প্যাডিং, কার্ড ব্যাসার্ধ এবং বোতাম প্যাডিং।

কিভাবে একটি মাত্রা ক্ষেত্র যোগ করতে হয় #

1. যাও মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং আপনার উইজেট খুলুন।
2. ক্লিক করুন শৈলী ট্যাব করুন এবং একটি বিভাগ যোগ করুন, উদাহরণস্বরূপ “Card Spacing”।
3. টাইপ করা dimensions বাম দিকে ফিল্ড সার্চ বক্সে।
4. টেনে আনুন মাত্রা বিভাগে। এর সেটিংস বাম সাইডবারে খোলে।

মাত্রা ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #

এখানে কার্ড প্যাডিং ক্ষেত্র:

• লেবেল এলিমেন্টরের বাক্সের উপরের লেখাটি, উদাহরণস্বরূপ “Card Padding”।
• নাম ক্ষেত্রের অনন্য আইডি। অক্ষর, সংখ্যা এবং আন্ডারস্কোর শুধুমাত্র।
• বর্ণনা elementor এ নিয়ন্ত্রণে উপস্থিত হয়।
• অনুমোদিত মাত্রা উপরে, ডান, নীচে এবং বাম জন্য চারটি তীর বোতাম আছে। সেই দিকটি বন্ধ করতে একটি তীর ক্লিক করুন। এলিমেন্টরে, একটি পাশ যা বন্ধ রয়েছে তা একটি ধূসর বাক্স হিসাবে দেখায় যা সম্পাদনা করা যায় না।
• সম্পত্তির প্রকার কাস্টম, মার্জিন, প্যাডিং, বর্ডার প্রস্থ এবং বর্ডার ব্যাসার্ধ অফার করে। একটি বাছাই করুন এবং নির্মাতা সেই সম্পত্তির জন্য একটি CSS নির্বাচক সারি পূরণ করেন (নীচে এই বিষয়ে আরও)। বর্ডার প্রস্থও যোগ করে border-style: solid.
• আকার ইউনিট ইউনিট সম্পাদকরা বেছে নিতে পারেন তালিকা। একটি নতুন ক্ষেত্র px, %, em, rem, vh এবং vw এর অনুমতি দেয়। আপনার ডিজাইনের জন্য কোন অর্থ নেই এমনগুলি সরান।
• ডিফল্ট মান প্রারম্ভিক শীর্ষ, ডান, নীচে এবং বাম মানগুলির জন্য চারটি বাক্স রয়েছে৷।

বোতাম প্যাডিং ক্ষেত্রের শুধুমাত্র বাম এবং ডান প্রয়োজন, তাই উপরের এবং নীচের তীরগুলি বন্ধ করা হয়েছে:

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

CSS নির্বাচকদের সাথে ক্ষেত্রটি সংযুক্ত করুন #

প্রতিটি সিএসএস নির্বাচক সারি আছে a সিএসএস নির্বাচক (শৈলী কোন উপাদান) এবং CSS বৈশিষ্ট্য (লেখার নিয়ম)। আপনি যখন সম্পত্তির ধরন হিসাবে প্যাডিং বাছাই করেন, তখন সারিটি এভাবে শুরু হয়:

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} তার নিজের মানে পুরো উইজেট। আপনি চান উপাদান এটি পরিবর্তন করুন, যেমন .price-card. আপনি চলে যেতে পারেন {{WRAPPER}} আউট, কারণ নির্মাতা আপনার নির্বাচকের সামনে এটি যোগ করে তাই নিয়মটি এই উইজেটের ভিতরে থাকে।

CSS বৈশিষ্ট্যে, {{TOP}}, {{RIGHT}}, {{BOTTOM}} এবং {{LEFT}} চারটি বাক্স থেকে সংখ্যা দিয়ে প্রতিস্থাপিত হয়, এবং {{UNIT}} নির্বাচিত ইউনিট সহ। কাস্টম সেট করা সম্পত্তির ধরন সহ, আপনি নিজেই নিয়মটি লিখুন। বোতাম প্যাডিং ক্ষেত্র শুধুমাত্র দুটি দিক ব্যবহার করে:

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

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

দুটি জিনিস জানতে হবে। একক নির্বাচক সাধারণ সেটিংসের নীচের দিকের বাক্সটি একটি মাত্রা ক্ষেত্রের জন্য কিছুই করে না, তাই সর্বদা CSS নির্বাচক সারিগুলি ব্যবহার করুন৷ এবং একটি প্রপার্টি টাইপ বাছাই করলে আপনার জন্য CSS প্রপার্টিজ বক্সে পূর্ণ হয়, তাই প্রথমে এটি বেছে নিন এবং পরে স্যুইচ করলে সারিগুলি আবার চেক করুন।

পরিবর্তে আপনার টেমপ্লেটের মানগুলি ব্যবহার করুন৷ #

এছাড়াও আপনি HTML বা CSS ট্যাবে সরাসরি মান প্রিন্ট করতে পারেন। ক্ষেত্রটি ধরে রাখে top, right, bottom, left এবং unit, তাই ইউনিট দ্বারা অনুসরণ করে প্রতিটি পাশ লিখুন:

.price-card {
  padding: {{ card_padding.top }}{{ card_padding.unit }} {{ card_padding.right }}{{ card_padding.unit }} {{ card_padding.bottom }}{{ card_padding.unit }} {{ card_padding.left }}{{ card_padding.unit }};
}

একটি খালি {{ card_padding }} কিছুই প্রিন্ট করে না। বেশিরভাগ উইজেটের জন্য CSS নির্বাচক সারিগুলিই ভাল পছন্দ, যেহেতু প্রতিক্রিয়াশীল নিয়ন্ত্রণ চালু থাকলে এলিমেন্টর প্রতিটি ডিভাইসের জন্য একটি পৃথক নিয়ম লেখে।

ক্লিক করুন সেটিংস সংরক্ষণ করুন আপনার কাজ শেষ হলে।

এলিমেন্টরে মাত্রা নিয়ন্ত্রণ ব্যবহার করুন #

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

একটি নম্বর টাইপ করুন এবং কার্ড আপডেট সরাসরি। পাশগুলি আনলিঙ্ক করতে লিঙ্ক আইকনে ক্লিক করুন এবং প্রতিটিকে তার নিজস্ব মান দিন, যেমন কার্ড প্যাডিং এখানে উপরে এবং নীচে 64 এবং পাশে 56টি করে। আপনার অনুমোদিত ইউনিটগুলির মধ্যে স্যুইচ করতে ইউনিট মেনু ব্যবহার করুন।

সাধারণ ব্যবহারের ক্ষেত্রে #

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

মাত্রা ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• সর্বদা থেকে CSS নির্বাচক পরিবর্তন করুন {{WRAPPER}} আপনার উপাদান। বাম হিসাবে, ব্যবধান পুরো উইজেট মোড়কের জন্য প্রযোজ্য।
• আপনি সম্পাদকদের ব্যবহার করতে চান এমন আকারের ইউনিটগুলিকে ট্রিম করুন। px এবং em সর্বাধিক ব্যবধান কভার করে।
• প্রযোজ্য নয় এমন দিকগুলি বন্ধ করুন। এটি সম্পাদকদের এমন মান সেট করা থেকে বিরত করে যার কোন প্রভাব নেই।
• আপনার ডিজাইনের সাথে মেলে এমন একটি ডিফল্ট মান সেট করুন, যাতে উইজেটটি যোগ করার সাথে সাথেই ঠিক দেখায়।
• প্যাডিং এবং মার্জিনের জন্য % এর সাথে সতর্ক থাকুন। ব্রাউজারগুলি উপাদানের প্রস্থ থেকে শতাংশ প্যাডিং গণনা করে, এমনকি উপরে এবং নীচের জন্যও।
• একটি একক মানের জন্য যেমন একটি ফাঁক বা আইকন আকার, স্লাইডার ক্ষেত্র সহজ।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

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