দ্য মাত্রা ক্ষেত্র একটি কাস্টম উইজেটকে এলিমেন্টরের অ্যাডভান্সড ট্যাব থেকে পরিচিত চার-ইনপুট ব্যবধান নিয়ন্ত্রণ দেয়: একটি লিঙ্ক আইকন সহ উপরে, ডান, নীচে এবং বাম মান যা তাদের সিঙ্কে রাখে। মাস্টার অ্যাডঅনগুলির ভিতরে উইজেট নির্মাতা, যখনই প্যাডিং, মার্জিন, বা প্রতি-কোণার সীমানা ব্যাসার্ধ আপনার স্টাইলশীটে হার্ড-কোড করার পরিবর্তে প্যানেল থেকে সম্পাদনাযোগ্য হওয়া উচিত তখনই আপনি যে ক্ষেত্রটিতে পৌঁছান।
প্রতিটি উইজেট বিল্ডার নিয়ন্ত্রণের মতো, মাত্রা সমর্থন করে শর্তাবলী, তাই আপনি স্পেসিং বিকল্পগুলি প্রকাশ করতে পারেন যখন তারা প্রয়োগ করে। বিল্ডার জুড়ে টোকেন আউটপুট এর মাধ্যমে চলে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন; উভয় গাইড বিবরণ এবং সীমাবদ্ধতা কভার।
এটি যে মানটি সঞ্চয় করে তা চারটি দিক এবং ইউনিট বহন করে এবং আপনার CSS প্যানেল প্রতিটি অংশকে নাম অনুসারে প্রিন্ট করে। সেই বানানটি সঠিক হওয়া পুরো কৌশল, এবং এই ক্ষেত্রের জন্য নির্দিষ্ট একটি আচরণ রয়েছে যা আপনি এটিকে ওয়্যার আপ করার আগে জানার যোগ্য: নির্মাতার প্লেইন সিলেক্টর ফিল্ড একটি মাত্রা নিয়ন্ত্রণের জন্য কিছুই করে না।
মাত্রা ক্ষেত্র কি করে #
- চার-ইনপুট নিয়ন্ত্রণ রেন্ডার করে উপরের, ডান, নীচে এবং বামে, লিঙ্ক আইকন সহ যা একটি মানকে সব দিকে মিরর করে।
- প্রতিটি পাশে এবং ইউনিট সংরক্ষণ করে একটি একক মানতে আপনার CSS ডট নোটেশন সহ পড়ে।
- একটি ইউনিট সুইচার অফার করে আপনি যে ইউনিটগুলিকে অনুমতি দেন, যেমন px, %, এবং em।
- কোন পক্ষগুলি দেখায় তা সীমিত করতে পারে অনুমোদিত মাত্রা বিকল্পের মাধ্যমে, অনুভূমিক-শুধু বা উল্লম্ব-শুধু ইনপুটগুলিতে।
- প্রতিক্রিয়াশীল মান সমর্থন করে তাই প্রতিটি ব্রেকপয়েন্ট তার নিজস্ব ব্যবধান রাখে।
আপনি যদি আগে একটি উইজেট তৈরি না করে থাকেন, তাহলে উইজেট নির্মাতা ওভারভিউ মৌলিক বিষয় কভার করে; সেখানে শুরু করুন।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি মূল্য নির্ধারণ কার্ড উইজেট যার
.price-cardবক্স সম্পাদকদের ভিতরের প্যাডিং সেট করতে দেওয়া উচিত।
কিভাবে একটি মাত্রা ক্ষেত্র যোগ করতে হয় #
উইজেট বিল্ডার সম্পাদকের বাম দিকে ক্ষেত্র প্যানেল খুলুন এবং খুঁজুন মাত্রা ক্ষেত্র, অন্যান্য CSS-মান ক্ষেত্র যেমন স্লাইডারের সাথে তালিকাভুক্ত।
এর অধীনে একটি বিভাগে এটি টেনে আনুন শৈলী ট্যাব, ব্যবধান নিয়ন্ত্রণের জন্য সাধারণ বাড়ি। একবার এটি অবতরণ করলে, মাঠের বিকল্পগুলি বাম দিকে খোলে।
মাত্রা ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে নিয়ন্ত্রণের পাশের পাঠ্য, উদাহরণস্বরূপ “Card Padding”।
- নাম: আপনার CSS যে অনন্য শনাক্তকারীকে বোঝায়, শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর, উদাহরণস্বরূপ
pad. - ডিফল্ট: প্রারম্ভিক মান, উপরে, ডান, নীচে, বাম, একক, এবং পক্ষগুলি লিঙ্ক করা শুরু করে কিনা।
- আকার ইউনিট: ব্যবহারকারী যে ইউনিটগুলির মধ্যে স্যুইচ করতে পারে, যেমন px, % এবং em।
- অনুমোদিত মাত্রা: কোন ইনপুট প্রদর্শিত হয়। “All” চারটি দিক দেখায়; “horizontal” শুধুমাত্র বাম এবং ডান দেখায়; “vertical” শুধুমাত্র উপরে এবং নীচে দেখায়; একটি কাস্টম তালিকা নির্দিষ্ট দিক বাছাই করে।
- প্রতিক্রিয়াশীল: ডিভাইস আইকন যোগ করে যাতে ডেস্কটপ, ট্যাবলেট এবং মোবাইল আলাদা মান রাখে।
- বর্ণনা, শো লেবেল, বিভাজক, এবং শর্তাবলী এখানে অন্যান্য ক্ষেত্রের মতোই কাজ করে।
আপনার CSS-এ মাত্রা মান সংযুক্ত করুন #
সংরক্ষিত মান হল কী সহ একটি অ্যারে top, right, bottom, left, unit, এবং isLinked। CSS প্যানেলে, চারটি দিক বানান করুন এবং প্রতিটির পরে ইউনিটটি পুনরাবৃত্তি করুন:
.price-card {
padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}প্রতিটি পাশে 24 এবং px নির্বাচন করা হলে, নিয়মটি রেন্ডার করে padding: 24px 24px 24px 24px;। প্যানেলের দিকগুলি আনলিঙ্ক করুন এবং প্রতিটি টোকেন তার নিজস্ব নম্বর বহন করে৷ একই প্যাটার্ন কভার margin এবং, প্রতি কোণে পাশাপাশি, border-radius। আপনি যদি একটি ইউনিট হিসাবে % অফার করেন তবে একটি CSS quirk মনে রাখার মতো: শতাংশ প্যাডিং উপাদানটির প্রস্থের বিপরীতে সমাধান করে, এমনকি উপরে এবং নীচের জন্যও, এবং সম্পাদকরা এটি আশা করবেন না।
সতর্ক থাকুন: বিল্ডারের নির্বাচক ক্ষেত্রটি একটি মাত্রা নিয়ন্ত্রণের জন্য কোনও ডিফল্ট CSS বৈশিষ্ট্য নির্গত করে না, তাই এটি পূরণ করলে কিছুই উৎপন্ন হয় না। উপরের মত CSS প্যানেলে দিকগুলি লিখুন, অথবা সম্পূর্ণ নির্বাচক এন্ট্রিগুলিকে সংজ্ঞায়িত করুন যাতে সম্পূর্ণ সম্পত্তি রয়েছে; প্লেইন সিলেক্টর বিকল্পটি এই ক্ষেত্রের জন্য একটি শর্টকাট নয়।
এলিমেন্টরে মাত্রা নিয়ন্ত্রণ ব্যবহার করুন #
আপনার কাস্টম উইজেটটি এলিমেন্টরের একটি পৃষ্ঠায় ফেলে দিন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন; নতুন নিয়ন্ত্রণ একটি বাসি সম্পাদক ট্যাবে প্রদর্শিত হয় না। নিয়ন্ত্রণটি চারটি ইনপুট, ইউনিট সুইচার এবং এর কোণে লিঙ্ক আইকন সহ প্রদর্শিত হয়।
লিঙ্ক আইকন সক্রিয় থাকাকালীন যেকোনো ইনপুটে টাইপ করুন এবং চারটি দিক একসাথে আপডেট করুন। লিঙ্ক আনলিঙ্ক করতে আইকনে ক্লিক করুন এবং প্রতিটি পাশ তার নিজস্ব মান নেয়, যেভাবে আপনি অসমমিত প্যাডিং পান যেমন নীচের থেকে লম্বা উপরে। রেসপন্সিভ অন সহ, ডিভাইস আইকন প্রতি ব্রেকপয়েন্টে আলাদা ব্যবধান সঞ্চয় করে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- কার্ড এবং বক্স প্যাডিং, কাস্টম উইজেটগুলিতে একক সবচেয়ে সাধারণ ব্যবধান নিয়ন্ত্রণ।
- বিভাগ এবং মোড়ক মার্জিন তাই সম্পাদকরা ব্লকের মধ্যে উল্লম্ব ছন্দ সুর করতে পারেন।
- প্রতি-কোণা সীমানা ব্যাসার্ধ, বাহুর পরিবর্তে কোণ হিসাবে চারটি মান ব্যবহার করা।
- বোতাম প্যাডিং, প্রায়ই অনুভূমিক সীমাবদ্ধ অনুমোদিত মাত্রা সঙ্গে।
- মিডিয়া অফসেট, মার্জিন মান সহ একটি ছবি বা ব্যাজ নাজ করা।
মাত্রা ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- প্রতিটি দিক এবং ইউনিট বানান আউট। CSS প্যানেল সংযোগ হল চারটি টোকেন এবং চারটি ইউনিট টোকেন; একটি খালি
{{ pad }}ব্যবহারযোগ্য কিছুই প্রিন্ট করে না। - প্লেইন সিলেক্টর ফিল্ড এড়িয়ে যান। এটি মাত্রার জন্য কোন সম্পত্তি নির্গত করে না। CSS প্যানেল, বা একটি সম্পূর্ণ নির্বাচক এন্ট্রি, কাজের রুট।
- সম্পত্তি এটির জন্য কল করলে পক্ষগুলিকে সীমাবদ্ধ করুন। একটি অনুভূমিক-শুধু নিয়ন্ত্রণ একটি বোতাম প্যাডিং ক্ষেত্রকে সৎ রাখে।
- একটি লিঙ্কড ডিফল্ট সেট করুন। সমান, লিঙ্কযুক্ত দিক দিয়ে শুরু করা সম্পাদকদের একটি বুদ্ধিমান বেসলাইন এবং চিন্তা করার জন্য একটি ইনপুট দেয়।
- আপনার স্টাইলশীটে বেস স্পেসিং রাখুন। উইজেটটি প্রথম ড্রপের দিকে দেখা উচিত; নিয়ন্ত্রণ তারপর সেখান থেকে সামঞ্জস্য করে।
- প্যাডিং এবং মার্জিনের জন্য প্রতিক্রিয়াশীল চালু করুন। ডেস্কটপ ব্যবধান খুব কমই একটি ফোন স্ক্রিনের সাথে যোগাযোগ টিকে থাকে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে মাত্রা ক্ষেত্র কি?
এটি একটি কাস্টম উইজেটে এলিমেন্টরের চার-পার্শ্বযুক্ত ব্যবধান নিয়ন্ত্রণ যোগ করে: একটি লিঙ্ক টগল এবং একটি ইউনিট সুইচার সহ উপরে, ডান, নীচে এবং বাম ইনপুট। মানটি চারটি দিক এবং ইউনিট সংরক্ষণ করে এবং আপনার উইজেট CSS প্রতিটি অংশকে ডট নোটেশন সহ প্রিন্ট করে, যেমন {{ pad.top }}{{ pad.unit }}.
আমি কিভাবে CSS ট্যাবে মাত্রা মান প্রিন্ট করব?
চারটি পাশের টোকেন সহ সম্পত্তিটি লিখুন, প্রতিটির পরে ইউনিটটি পুনরাবৃত্তি করুন: padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};। নিয়ম তখন থেকে নিয়ন্ত্রণ ট্র্যাক করে।
কেন নির্বাচক বিকল্প আমার মাত্রা ক্ষেত্রের জন্য কিছুই করে না?
ডিজাইনের মাধ্যমে, বিল্ডার প্লেইন সিলেক্টর ফিল্ডের মাধ্যমে ডাইমেনশনের জন্য কোনো ডিফল্ট CSS প্রপার্টি নির্গত করে না, যেহেতু ইনজেকশন করার কোনো একক মান নেই। পরিবর্তে CSS প্যানেল টোকেন ব্যবহার করুন, অথবা সম্পূর্ণ নির্বাচক এন্ট্রি সংজ্ঞায়িত করুন যাতে সম্পূর্ণ ঘোষণা থাকে।
আমি কি শুধুমাত্র বাম এবং ডান ইনপুট দেখাতে পারি?
হ্যাঁ। অনুমোদিত মাত্রাগুলিকে "অনুভূমিক" এ সেট করুন এবং শুধুমাত্র বাম এবং ডান ইনপুট রেন্ডার করুন৷ "উল্লম্ব" উপরের এবং নীচের জন্য একই কাজ করে এবং একটি কাস্টম তালিকা যেকোনো নির্দিষ্ট দিক বেছে নিতে পারে।
নিয়ন্ত্রণের লিঙ্ক আইকন কি করে?
লিঙ্ক করার সময়, এক পাশ সম্পাদনা করলে চারটিতে একই নম্বর লেখা হয় এবং সংরক্ষিত মান রেকর্ড করে যা লিঙ্কযুক্ত অবস্থা। আনলিঙ্ক করা প্রতিটি পক্ষকে তার নিজস্ব নম্বর ধরে রাখতে দেয়, যা চারটি CSS টোকেন স্বাধীনভাবে মুদ্রণ করে।
মাত্রা ক্ষেত্র কি সীমানা-ব্যাসার্ধের জন্য কাজ করে?
হ্যাঁ। সীমানা ব্যাসার্ধ নিয়ন্ত্রণ প্রদান করে একই ক্রমে চারটি মান নেয়, তাই border-radius: {{ rad.top }}{{ rad.unit }} {{ rad.right }}{{ rad.unit }} {{ rad.bottom }}{{ rad.unit }} {{ rad.left }}{{ rad.unit }}; প্রতিটি ইনপুটকে একটি কোণে ম্যাপ করে।
মোড়ানো #
উইজেট বিল্ডার ডাইমেনশন ফিল্ড প্যাডিং, মার্জিন এবং ব্যাসার্ধের সিদ্ধান্তগুলিকে আপনার স্টাইলশীট থেকে বের করে প্যানেলে নিয়ে যায়: একটি নিয়ন্ত্রণ, চার দিক, একটি ইউনিট, সমস্ত CSS ট্যাবে নাম দ্বারা মুদ্রিত। এর পাশে ব্যবহার করুন স্লাইডার ক্ষেত্র, যা একক-মানের দৈর্ঘ্য কভার করে একটি চার-পার্শ্বযুক্ত নিয়ন্ত্রণের জন্য ওভারকিল হবে। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
