দ্য সীমান্ত মাঠ একটি কাস্টম উইজেটকে এক ফোঁটায় বর্ডার কন্ট্রোলের একটি সম্পূর্ণ সেট দেয়: একটি বর্ডার টাইপ ড্রপডাউন, প্রতি-সাইড বর্ডার প্রস্থ ইনপুট এবং একটি বর্ডার কালার পিকার৷ মাস্টার অ্যাডঅনগুলির ভিতরে উইজেট নির্মাতা, আপনি একবার ক্ষেত্রটি যোগ করুন, আপনার CSS-এ এর শর্টকোড রাখুন এবং যে কেউ এলিমেন্টরে উইজেট সম্পাদনা করছেন তারা কোড স্পর্শ না করেই সীমানা পুনরায় স্টাইল করতে পারেন।
সীমান্ত নিয়ন্ত্রণ সমর্থন করে শর্তাবলী প্রতিটি ক্ষেত্রের মতো, তাই এটি লুকানো থাকতে পারে যতক্ষণ না একটি বর্ডার টগল চালু করা হয়, এবং বিল্ডার জুড়ে টোকেন আউটপুট রেন্ডার করা হয় টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন। উভয় গাইড বিস্তারিত কভার।
ক্ষেত্রটি সরাসরি CSS-এ ম্যাপ করে border সংক্ষিপ্ত। আপনি যেখানেই টোকেন রাখবেন না কেন ব্যবহারকারী প্যানেলে প্রিন্ট করে আপনার স্টাইলশীটে টাইপ, প্রস্থ এবং রঙ যাই হোক না কেন।
সীমান্ত ক্ষেত্র কি করে #
একটি বর্ডার ফিল্ড আপনার উইজেটের বিকল্প প্যানেলে এলিমেন্টরের পরিচিত বর্ডার গ্রুপ কন্ট্রোল রেন্ডার করে। উইজেট নির্বাচন করুন এবং তিনটি সম্পর্কিত নিয়ন্ত্রণ দেখান:
- সীমান্তের ধরন: ডিফল্ট, কোনটি নয়, সলিড, ডাবল, ডটেড, ড্যাশড এবং গ্রুভ সহ একটি ড্রপডাউন।
- সীমানা প্রস্থ: উপরের, ডান, নীচে এবং বাম ইনপুটগুলি একটি লিঙ্ক টগল সহ চারটি একবারে সেট করতে এবং প্রতিক্রিয়াশীল মানগুলির জন্য একটি ডিভাইস আইকন।
- সীমানা রঙ: আপনার বিশ্বব্যাপী রং অ্যাক্সেস সহ একটি রঙ চয়নকারী।
প্রস্থ এবং রঙ নিয়ন্ত্রণগুলি লুকানো থাকে যতক্ষণ না ব্যবহারকারী ডিফল্ট বা কোনটি ছাড়া অন্য কোনও বর্ডার টাইপ বাছাই করে, যা কোনও বর্ডার ব্যবহার না হলে প্যানেলটিকে পরিষ্কার রাখে৷ এই হিসাবে একই প্যাটার্ন পাঠ্য ক্ষেত্র এবং অন্যান্য উইজেট বিল্ডার ক্ষেত্র: ক্ষেত্রটি ফেলে দিন, এটির নাম দিন, টোকেন ব্যবহার করুন। আপনি যদি উইজেট তৈরিতে নতুন হন তবে শুরু করুন উইজেট নির্মাতা ওভারভিউ প্রথম।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি শিরোনাম উইজেট
<h2 class="border-title">এর HTML এ।
কিভাবে একটি সীমান্ত ক্ষেত্র যোগ করতে হয় #
উইজেট বিল্ডার এডিটরে, বাম দিকে ফিল্ড প্যানেলটি স্ক্রোল করুন যতক্ষণ না আপনি এটি খুঁজে পান সীমানা ক্ষেত্র। এটি পটভূমি এবং পাঠ্য ছায়ার মধ্যে তালিকার নীচের দিকে বসে।
সীমানা ক্ষেত্রটিকে একটি বিভাগে টেনে আনুন বিষয়বস্তু, শৈলী, বা উন্নত ট্যাব। শৈলী এটির জন্য প্রাকৃতিক বাড়ি, যদিও এটি যে কোনও জায়গায় কাজ করে। একবার এটি অবতরণ করলে, ক্ষেত্রের বিকল্পগুলি বাম দিকে খোলে এবং এর শর্টকোডটি দেখায় ডকুমেন্টেশন কোড এডিটরের পাশে সাইডবার।
সীমান্ত ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #
এর সেটিংস খুলতে বর্ডার ক্ষেত্র নির্বাচন করুন। তারা অন্যান্য উইজেট বিল্ডার ক্ষেত্রের মতো একই লেআউট অনুসরণ করে।
- লেবেল: এলিমেন্টরে নিয়ন্ত্রণের উপরে দেখানো পাঠ্য, ডিফল্টরূপে "বর্ডার"।
- নাম: ক্ষেত্রের জন্য অনন্য শনাক্তকারী। এটিতে শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর থাকতে হবে। একটি ক্ষেত্র নাম
borderআপনাকে দেয়{{border}}শর্টকোড। - বর্ণনা: নিয়ন্ত্রণের নীচে দেখানো ঐচ্ছিক সহায়ক পাঠ্য।
- ডিফল্ট মান: উইজেটটি যে সীমানা দিয়ে শুরু হয়, উদাহরণস্বরূপ, CSS শর্টহ্যান্ড হিসাবে লেখা
1px solid #333। এটি খালি রাখুন এবং উইজেটটি কোনও সীমানা ছাড়াই পাঠানো হবে যতক্ষণ না কোনও ব্যবহারকারী একটি সেট করে। - লেবেল দেখান এবং লেবেল ব্লক: স্ট্যান্ডার্ড লেবেল টগল করে, সাথে সাধারণ বিভাজক এবং শর্তাবলী আরও নিচে নিয়ন্ত্রণ করে।
ক্ষেত্রটিকে আপনার CSS এর সাথে সংযুক্ত করুন #
বর্ডার ফিল্ডের টোকেন আপনার স্টাইলশীটের অন্তর্গত, আপনার HTML নয়। খুলুন সিএসএস ট্যাব এবং এর মান হিসাবে এটি ব্যবহার করুন border যে কোন নির্বাচকের উপর সম্পত্তি সীমানা বহন করা উচিত। আমাদের শিরোনাম উদাহরণ সহ:
- নিয়ম পড়ে
border: {{border}};ভিতরে.border-titleনির্বাচক। - রেন্ডারের সময়, টোকেনটি ব্যবহারকারীর বাছাই করা সম্পূর্ণ শর্টহ্যান্ডে প্রসারিত হয়, যেমন
5px solid #e02b20.
ক্লিক করুন সেটিংস সংরক্ষণ করুন যখন নিয়ম চালু থাকে। আপনি উইজেটের যেকোনো নির্বাচকের উপর একই টোকেন ড্রপ করতে পারেন, তাই একটি বর্ডার কন্ট্রোল একটি কার্ড, এর ছবি বা উভয়ের রূপরেখা দিতে পারে।
এলিমেন্টরে বর্ডার কন্ট্রোল ব্যবহার করুন #
Elementor-এর একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। উইজেটটি নির্বাচন করুন এবং আপনার সেট করা লেবেল সহ বর্ডার কন্ট্রোল এর প্যানেলে প্রদর্শিত হবে।
একটি বর্ডার টাইপ বেছে নিন #
দ্য বর্ডার টাইপ ড্রপডাউন ডিফল্ট, কোনটি নয়, সলিড, ডাবল, ডটেড, ড্যাশড এবং গ্রুভ তালিকাভুক্ত করে। ডিফল্ট বা কোনটি ছাড়া অন্য যেকোন প্রকার বাছাই করুন এবং এর নীচে আরও দুটি নিয়ন্ত্রণ প্রদর্শিত হবে: বর্ডার প্রস্থ এবং বর্ডার কালার। আপনি বেছে নেওয়ার সাথে সাথে প্রিভিউ আপডেট হয়, তাই ড্যাশ বাছাই করা এখনই উইজেটের চারপাশে একটি ড্যাশ করা রূপরেখা আঁকে।
সীমানা প্রস্থ সেট করুন #
দ্য সীমানা প্রস্থ নিয়ন্ত্রণ পৃথক শীর্ষ, ডান, নীচে, এবং বাম মান লাগে। চারটি দিক একসাথে পরিবর্তন করতে লিঙ্ক আইকনটি চালু রাখুন, বা অসম সীমানার জন্য এটিকে আনলিঙ্ক করুন, যেমন একটি পুরু শীর্ষ এবং নীচে পাতলা দিক সহ। লেবেলের পাশের ডিভাইস আইকনটি আপনাকে ব্রেকপয়েন্ট প্রতি বিভিন্ন প্রস্থ সেট করতে দেয়।
সীমানা রঙ চয়ন করুন #
দ্য বর্ডার কালার কন্ট্রোল এলিমেন্টরের কালার পিকার খোলে। আপনার গ্লোবাল রং থেকে টানতে গ্লোব আইকন ব্যবহার করুন, অথবা পিকার এবং হেক্স, RGBA, বা HSLA ইনপুট দিয়ে একটি কাস্টম মান বেছে নিন।
প্রতিটি পরিবর্তন ভূমি প্রিভিউতে বাস করে। আমাদের উদাহরণে শিরোনামটি একটি কঠিন লাল সীমানা দিয়ে শেষ হয়, উপরে এবং নীচে 5 পিক্সেল এবং পাশে 3 পিক্সেল।
সাধারণ ব্যবহারের ক্ষেত্রে #
- কার্ড এবং বাক্সের রূপরেখা যেখানে প্রতিটি সাইটের নিজস্ব সীমানা ওজন এবং রঙ প্রয়োজন।
- হাইলাইট শিরোনাম এই উদাহরণে বক্সযুক্ত শিরোনাম মত।
- ইমেজ ফ্রেম দল, পোর্টফোলিও বা পণ্য উইজেটে।
- বোতাম শৈলী যেখানে একটি রূপরেখা বৈকল্পিক একটি ব্যবহারকারী-সম্পাদনাযোগ্য সীমানা প্রয়োজন।
- কলআউট এবং নোটিশ বক্স যে কঠিন এবং ড্যাশ শৈলী মধ্যে সুইচ।
সীমান্ত ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- টোকেনটি CSS-এ রাখুন, HTML নয়। শর্টকোড একটি CSS মান পর্যন্ত প্রসারিত হয়, তাই এটি শুধুমাত্র একটি সম্পত্তি মান হিসাবে বোঝা যায়
border: {{border}};. - শর্টহ্যান্ড আকারে একটি ডিফল্ট মান সেট করুন। কিছু
1px solid #333কেউ প্যানেল খোলার আগে উইজেটটি সমাপ্ত দেখায়। - এটিকে সীমানা-ব্যাসার্ধের সাথে যুক্ত করুন। ক্ষেত্রটি প্রকার, প্রস্থ এবং রঙ কভার করে। একটি মাত্রা ক্ষেত্র বা একটি নির্দিষ্ট যোগ করুন
border-radiusবৃত্তাকার কোণার জন্য নিয়ম। - মনে রাখবেন কোনটিই আসল পছন্দ নয়। ব্যবহারকারীরা প্যানেল থেকে সীমানা বন্ধ করতে পারেন, তাই লেআউটটি একসাথে ধরে রাখতে সীমানার উপর নির্ভর করবেন না।
- টোকেনটি পুনরায় ব্যবহার করুন যেখানে এটি সাহায্য করে। একই
{{border}}মান বেশ কয়েকটি নির্বাচককে স্টাইল করতে পারে এবং তারা সবাই একটি নিয়ন্ত্রণ অনুসরণ করে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে বর্ডার ফিল্ড কী?
বর্ডার ফিল্ড একটি কাস্টম উইজেটে এলিমেন্টরের বর্ডার গ্রুপ কন্ট্রোল যোগ করে: একটি বর্ডার টাইপ ড্রপডাউন, প্রতি-সাইড বর্ডার প্রস্থ ইনপুট এবং একটি বর্ডার কালার পিকার। এর শর্টকোড আপনার উইজেটের স্টাইলশীটে ফলস্বরূপ CSS বর্ডার শর্টহ্যান্ড প্রিন্ট করে।
আমি বর্ডার শর্টকোড কোথায় রাখব?
উইজেট বিল্ডারের CSS ট্যাবে, একটি সীমানা সম্পত্তির মান হিসাবে। সীমানা নামের একটি ক্ষেত্র সীমানা হিসাবে ব্যবহৃত হয়: {{বর্ডার}}; নির্বাচকের উপর যে সীমানা বহন করা উচিত। এটি HTML সম্পাদকের অন্তর্গত নয়।
কোন ধরনের সীমান্ত নিয়ন্ত্রণ সমর্থন করে?
বর্ডার টাইপ ড্রপডাউন ডিফল্ট, কোনটি নয়, সলিড, ডাবল, ডটেড, ড্যাশড এবং গ্রুভ অফার করে। ডিফল্ট বা কোনটি ছাড়া যেকোনো প্রকার নির্বাচন করলে ড্রপডাউনের নিচে বর্ডার প্রস্থ এবং বর্ডার কালার কন্ট্রোল প্রকাশ পায়।
ব্যবহারকারীরা কি প্রতিটি পাশে একটি ভিন্ন সীমানা প্রস্থ সেট করতে পারেন?
হ্যাঁ। বর্ডার প্রস্থ নিয়ন্ত্রণে আলাদা টপ, ডান, নীচে এবং বাম ইনপুট রয়েছে। লিঙ্ক টগল চারটি একসাথে পরিবর্তন করে; অসম মান সেট করতে এটিকে আনলিঙ্ক করুন, যেমন উপরে এবং নীচে 5 পিক্সেল এবং পাশে 3 পিক্সেল।
কেন আমি প্যানেলে সীমানা প্রস্থ এবং রঙ দেখতে পাচ্ছি না?
বর্ডার টাইপ ডিফল্ট বা কিছুই না থাকা অবস্থায় এই নিয়ন্ত্রণগুলি লুকিয়ে থাকে। সলিড, ড্যাশড বা অন্য কোনো দৃশ্যমান প্রকার বাছাই করুন এবং উভয় নিয়ন্ত্রণই উপস্থিত হবে। যদি পুরো বর্ডার কন্ট্রোল অনুপস্থিত থাকে, তাহলে এলিমেন্টর এডিটর পুনরায় লোড করুন যাতে এটি সংরক্ষিত উইজেটটি তুলে নেয়।
মোড়ানো #
উইজেট বিল্ডার বর্ডার ফিল্ড একটি বর্ডার টাইপ ড্রপডাউন, প্রতিক্রিয়াশীল প্রতি-পার্শ্বের প্রস্থ এবং একটি রঙ বাছাইকারীকে একক ড্র্যাগ এবং ড্রপের মধ্যে প্যাক করে। ক্ষেত্রের নাম দিন, সেট করুন border: {{border}}; আপনার CSS-এ, এবং সীমানা সংক্রান্ত সিদ্ধান্তগুলি আপনার স্টাইলশীট থেকে বেরিয়ে এলিমেন্টর প্যানেলে চলে যায় যেখানে সম্পাদকরা সেগুলি পরিচালনা করতে পারেন। এর সাথে এটি একত্রিত করুন পাঠ্য ক্ষেত্র এবং ক বিভাজক একটি উইজেট প্যানেল তৈরি করতে যা এক জায়গায় বিষয়বস্তু এবং শৈলী কভার করে। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
