সিএসএস না খুলেই একজন সম্পাদককে একটি উইজেট পুনরায় রঙ করতে দেওয়া একটি কাস্টম উইজেট করতে পারে এমন সবচেয়ে দরকারী জিনিসগুলির মধ্যে একটি। দ্য রঙের ক্ষেত্র মাস্টার অ্যাডঅনগুলিতে উইজেট নির্মাতা আপনার উইজেট প্যানেলে এলিমেন্টরের কালার পিকার ড্রপ করে, গ্লোবাল কালার এবং একটি ঐচ্ছিক আলফা চ্যানেল দিয়ে সম্পূর্ণ। আপনি ক্ষেত্রটির নাম দিন, এটি কোথায় থাকে তা বেছে নিন এবং এর শর্টকোড সরাসরি আপনার CSS-এ ফিড করে।
প্রতিটি উইজেট বিল্ডার ক্ষেত্রের মতো, রঙ ক্ষেত্র সমর্থন করে শর্তাবলী প্যানেল দৃশ্যমানতার জন্য। এর টোকেন দ্বারা রেন্ডার করা হয় টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন, যা আপনাকে আপনার CSS-এর যেকোনো জায়গায় বাছাই করা রঙ প্রিন্ট করতে দেয়। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।
এটি একটি শৈলী নিয়ন্ত্রণ, তাই ডেমোতে এটি এর অধীনে যায় শৈলী ট্যাব। আপনি যে ট্যাবে এটি রাখেন না কেন ক্ষেত্রটি একই কাজ করে। এটি কোথায় থাকে তা আপনার কল, এবং আপনি কীভাবে আপনার কাস্টম উইজেটের নিয়ন্ত্রণগুলি সংগঠিত করতে চান তা নিচে আসে৷।
রঙ ক্ষেত্র কি করে #
রঙ ক্ষেত্রটি আপনার উইজেটের বিকল্প প্যানেলে এলিমেন্টরের নেটিভ কালার পিকার রেন্ডার করে। সম্পাদকরা সোয়াচ ক্লিক করুন, একটি রঙ চয়ন করুন (বা থিম থেকে একটি বিশ্বব্যাপী রঙ), এবং আপনার উইজেট আউটপুট যে মান আপনি যেখানেই ম্যাচিং শর্টকোড স্থাপন করেছেন। বেশিরভাগ সময় এর অর্থ একটি CSS সম্পত্তি color, background, বা border-color.
যেহেতু এটি এলিমেন্টরের নিজস্ব পিকার ব্যবহার করে, সম্পাদকরা ইতিমধ্যেই জানেন এমন নিয়ন্ত্রণগুলি পান: সোয়াচ, আইড্রপার, সাম্প্রতিক রঙ এবং বিশ্বব্যাপী রঙের প্যালেট৷ আলফা চ্যানেল চালু করুন এবং তারা স্বচ্ছতাও সেট করতে পারে।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। প্রথম এক? দিয়ে শুরু করুন উইজেট নির্মাতা ওভারভিউ.
কিভাবে একটি রঙ ক্ষেত্র যোগ করতে হয় #
উইজেট বিল্ডার এডিটরে, বাম দিকে ফিল্ড প্যানেলটি খুঁজুন এবং টেনে আনুন রঙ একটি বিভাগে ক্ষেত্র। যেহেতু রঙ একটি স্টাইলিং পছন্দ, শৈলী ট্যাব প্রাকৃতিক বাড়ি, কিন্তু বিষয়বস্তু এবং উন্নত ট্যাবগুলি এটিকেও গ্রহণ করে। একবার ক্ষেত্রটি জায়গায় হয়ে গেলে, এর বিকল্পগুলি বাম দিকে খোলে এবং এর শর্টকোডটি প্রদর্শিত হয় ডকুমেন্টেশন কোড এডিটরের পাশে সাইডবার।
রঙ ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #
এর সেটিংস খুলতে রঙ ক্ষেত্র নির্বাচন করুন। বেশিরভাগ বিকল্প অন্যান্য ক্ষেত্রের সাথে মেলে, এছাড়াও একটি যা রঙের জন্য নির্দিষ্ট।
- লেবেল: এলিমেন্টরে পিকারের উপরে দেখানো পাঠ্য, উদাহরণস্বরূপ “Text Color”।
- নাম: ক্ষেত্রের জন্য অনন্য শনাক্তকারী। অক্ষর, সংখ্যা, এবং আন্ডারস্কোর শুধুমাত্র। এটি আপনার শর্টকোড হয়ে যায়, তাই একটি ক্ষেত্র নামকরণ করা হয়েছে
colorদেয়{{color}}. - বর্ণনা: নিয়ন্ত্রণের নীচে দেখানো ঐচ্ছিক সহায়ক পাঠ্য।
- আলফা: পিকারে স্বচ্ছতার অনুমতি দিতে এটি চালু করুন। এটি বন্ধ করে, সম্পাদকরা শুধুমাত্র কঠিন রং বেছে নিতে পারেন। আধা-স্বচ্ছ ওভারলে এর মতো আপনার rgba মানগুলির প্রয়োজন হলে এটি সক্ষম করুন৷।
- ডিফল্ট মান: একটি হেক্স মান হিসাবে শুরু রঙ, যেমন
#FFFFFF। এটি সেট করুন যাতে কেউ এটি স্পর্শ করার আগেই উইজেটটি শেষ দেখায়।
সাধারণ সেটিংস: প্রতিক্রিয়াশীল, গতিশীল এবং আরও অনেক কিছু #
ডিফল্ট মানের নীচে আপনি একই পাবেন সাধারণ সেটিংস নির্মাতার প্রতিটি ক্ষেত্র হিসাবে: লেবেল, লেবেল ব্লক, প্রতিক্রিয়াশীল নিয়ন্ত্রণ, গতিশীল সমর্থন, ফ্রন্টএন্ড উপলব্ধ, বিভাজক এবং শর্তাবলী দেখান। আপনি যদি ডিভাইস প্রতি একটি ভিন্ন রঙ চান তাহলে প্রতিক্রিয়াশীল নিয়ন্ত্রণ এখানে কার্যকর। দ্য টেক্সট ফিল্ড ডকুমেন্টেশন বিস্তারিত এই প্রতিটি কভার।
আপনার কোডের সাথে ক্ষেত্রটি সংযুক্ত করুন #
একটি রঙের ক্ষেত্র নামে color টোকেন তৈরি করে {{color}} ডকুমেন্টেশন সাইডবারে। যেকোনো রঙের সম্পত্তির মান হিসাবে এটিকে আপনার CSS-এ ফেলে দিন। উদাহরণস্বরূপ, হিরো টেক্সট রঙ করতে:
সিএসএস এডিটরে আপনি এরকম কিছু লিখবেন .hero-content { color: {{color}}; }। যখন সম্পাদক এলিমেন্টরে একটি রঙ বাছাই করেন, তখন মাস্টার অ্যাডনস সেই মানের জন্য টোকেন অদলবদল করে এবং টেক্সট পুনরায় রঙ করে। একই টোকেন জন্য কাজ করে background, border-color, বা এমন কিছু যা একটি রঙ নেয় এবং আপনি যতটা প্রয়োজন তত নিয়মে এটি পুনরায় ব্যবহার করতে পারেন। দেখার জন্য একটি জিনিস: টোকেনটিকে পুরো মান হিসাবে রাখুন, তাই color: {{color}};, উদ্ধৃতি মোড়ানো না, বা CSS প্রযোজ্য হবে না।
এলিমেন্টরে রঙ নিয়ন্ত্রণ ব্যবহার করুন #
আপনার কাস্টম উইজেটটি একটি পৃষ্ঠায় টেনে আনুন এবং এলিমেন্টর এডিটরে খুলুন। আপনি যে ট্যাবের নীচে ক্ষেত্রটি রেখেছেন, রঙ নিয়ন্ত্রণটি তার পাশে গ্লোবাল কালার বোতাম সহ স্ট্যান্ডার্ড সোয়াচ হিসাবে দেখায়। এটিতে ক্লিক করুন, একটি রঙ চয়ন করুন এবং ক্যানভাসে উইজেট আপডেটগুলি।
সম্পাদকরা একটি এক-বন্ধ রঙ চয়ন করতে পারেন বা সাইটের গ্লোবাল রঙগুলি থেকে টানতে গ্লোব আইকনে ক্লিক করতে পারেন, যা ব্র্যান্ডে কাস্টম উইজেটগুলি রাখে৷ আপনি যদি ডায়নামিক সাপোর্ট চালু করেন, তাহলে এখানে ডায়নামিক ট্যাগ আইকনও দেখা যাবে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- পাঠ্যের রঙ শিরোনাম এবং অনুচ্ছেদের জন্য।
- পটভূমির রঙ বিভাগ, কার্ড এবং বোতামের জন্য।
- সীমানা এবং উচ্চারণ রং একটি ব্র্যান্ড প্যালেট বাঁধা।
- ওভারলে tints স্বচ্ছতার জন্য আলফা চ্যানেল ব্যবহার করা।
- হোভার স্টেটস যখন একটি দ্বিতীয় রঙ ক্ষেত্রের সাথে জোড়া হয়।
রঙ ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- আপনার উইজেট যেখানেই ফিট করে সেখানে রাখুন। শৈলী হল কনভেনশন, কিন্তু ক্ষেত্রটি যেকোন ট্যাবের অধীনে কাজ করে, তাই সংগঠিত করা আপনার কাছে বোধগম্য উপায় নিয়ন্ত্রণ করে।
- আপনার স্বচ্ছতার প্রয়োজন হলেই আলফা চালু করুন। কঠিন ব্র্যান্ডের রঙের জন্য, এটি বন্ধ রেখে বাছাইকারীকে সহজ রাখে।
- একটি বুদ্ধিমান ডিফল্ট মান সেট করুন। একটি ভাল ডিফল্ট মানে উইজেটটি একটি পৃষ্ঠায় ড্রপ করার মুহুর্তে সঠিক দেখায়।
- গ্লোবাল রং উপর ঝুঁক। সম্পাদকদের গ্লোবাল প্যালেট থেকে বাছাই করতে উত্সাহিত করুন যাতে উইজেটগুলি সাইট জুড়ে সামঞ্জস্যপূর্ণ থাকে৷।
- এর শর্টকোড উল্লেখ করার আগে ক্ষেত্রটি তৈরি করুন। ক্ষেত্রটি প্যানেলে থাকার পরেই টোকেনটি বিদ্যমান।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে রঙের ক্ষেত্র কী?
রঙ ক্ষেত্র একটি কাস্টম উইজেটে Elementor এর রঙ চয়নকারী যোগ করে। আপনি ক্ষেত্রটির নাম দিন, আপনার CSS-এ এর শর্টকোড রাখুন এবং সম্পাদক এলিমেন্টরে যে রঙ নির্বাচন করেন তা আপনার উইজেটে প্রয়োগ করা হয়। এটি বিশ্বব্যাপী রং এবং একটি ঐচ্ছিক আলফা চ্যানেল সমর্থন করে।
আমি কিভাবে আমার কাস্টম উইজেটে {{color}} শর্টকোড ব্যবহার করব?
নামের একটি রঙ ক্ষেত্র যোগ করুন color, তারপর CSS সম্পাদকে টোকেনটিকে সম্পত্তির মান হিসাবে ব্যবহার করুন, যেমন .hero-content { color: {{color}}; }। মাস্টার অ্যাডনস নির্বাচিত রঙের সাথে টোকেন প্রতিস্থাপন করে, তাই উইজেটটি সম্পাদকের বাছাইয়ের উপর ভিত্তি করে পুনরায় রঙ করে।
রঙ ক্ষেত্র স্বচ্ছতা সমর্থন করে?
হ্যাঁ। ক্ষেত্রের সেটিংসে আলফা বিকল্পটি চালু করুন এবং এলিমেন্টর পিকার সম্পাদকদের স্বচ্ছতা সেট করতে দেয়, আরজিবিএ মান তৈরি করে। আলফা বন্ধ থাকলে, পিকার শুধুমাত্র কঠিন রঙের অনুমতি দেয়। ওভারলে বা আধা-স্বচ্ছ ব্যাকগ্রাউন্ডের জন্য এটি ব্যবহার করুন।
আমি কি স্টাইল ট্যাবের বাইরে রঙের ক্ষেত্র রাখতে পারি?
হ্যাঁ। রঙের ক্ষেত্রটি বিষয়বস্তু, শৈলী বা উন্নত ট্যাবের অধীনে কাজ করে। স্টাইল হল একটি স্টাইলিং নিয়ন্ত্রণের জন্য স্বাভাবিক পছন্দ, কিন্তু আপনি এটি কোথায় রাখবেন তা আপনি কীভাবে আপনার কাস্টম উইজেটের বিকল্পগুলিকে সংগঠিত করতে চান তার উপর নির্ভর করে।
রঙ ক্ষেত্র কি সাইটের বিশ্বব্যাপী রং ব্যবহার করতে পারে?
হ্যাঁ। যেহেতু এটি এলিমেন্টরের নেটিভ পিকার ব্যবহার করে, সম্পাদকরা গ্লোবাল কালার বোতামে ক্লিক করতে পারেন এবং থিম প্যালেট থেকে বাছাই করতে পারেন। গ্লোবাল কালার নির্বাচন করা কাস্টম উইজেটগুলিকে সাইটের বাকি ব্র্যান্ডিংয়ের সাথে সামঞ্জস্যপূর্ণ রাখে।
মোড়ানো #
উইজেট বিল্ডার কালার ফিল্ড আপনার নিজস্ব কাস্টম উইজেটের ভিতরে একটি হার্ড-কোডেড রঙকে একটি সম্পাদনাযোগ্য পিকারে পরিণত করে। এটির নাম দিন, আলফাকে অনুমতি দেবেন কিনা তা চয়ন করুন, একটি ডিফল্ট সেট করুন এবং তার করুন৷ {{color}} আপনার CSS মধ্যে। এর পরে, যে কেউ এলিমেন্টর থেকে উইজেটটিকে পুনরায় রঙ করতে পারে, ট্যাপে বিশ্বব্যাপী রঙ এবং স্বচ্ছতা সহ। বাকি কটাক্ষপাত মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং চেক করুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
