দ্য বক্স ছায়া ক্ষেত্র আপনার কাস্টম উইজেটের প্যানেলে এলিমেন্টরের স্ট্যান্ডার্ড শ্যাডো কন্ট্রোল রাখে: অনুভূমিক এবং উল্লম্ব অফসেট, ব্লার, স্প্রেড, অস্বচ্ছতার সাথে রঙ এবং একটি ইনসেট টগল। মাস্টার অ্যাডঅন ভিতরে উইজেট নির্মাতা, এটি এমন একটি ক্ষেত্র যা সম্পাদকদের পৃষ্ঠা থেকে একটি কার্ড তুলতে, একটি বোতাম নরম করতে বা স্টাইলশীট স্পর্শ না করে একটি ইনপুট রিসেস করতে দেয়৷।
বক্স ছায়া নিয়ন্ত্রণ সমর্থন করে শর্তাবলী, একটি ছায়া টগল চালু থাকলেই এটি দেখানোর একটি পরিষ্কার উপায়, এবং নির্মাতা জুড়ে টোকেন আউটপুট দ্বারা পরিচালিত হয় টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।
বক্স শ্যাডো হল একটি গ্রুপ কন্ট্রোল, টাইপোগ্রাফি এবং ব্যাকগ্রাউন্ডের মতো একই পরিবার। আপনার উইজেটের সাথে সংযোগটি একটি CSS নির্বাচক, একটি টোকেন নয়: আপনি ক্ষেত্রটিকে বলুন এটি কোন উপাদানটি স্টাইল করে এবং এলিমেন্টর সেখানে ছায়া নিজেই লিখে।
বক্স শ্যাডো ফিল্ড কি করে #
- এলিমেন্টরের বক্স শ্যাডো গ্রুপ কন্ট্রোল রেন্ডার করে, ক্ষেত্রের লেবেলের পাশে পেন্সিল আইকন থেকে খোলা।
- অনুভূমিক এবং উল্লম্ব অফসেট উপাদানটির চারপাশে ছায়া রাখুন।
- ব্লার এবং স্প্রেড কোমলতা এবং নাগাল নিয়ন্ত্রণ করুন।
- রঙ একটি আলফা চ্যানেল অন্তর্ভুক্ত করে, যেখান থেকে বেশিরভাগ ছায়ার গুণমান আসে।
- অবস্থান টগল একটি বাইরের ছায়া এবং ইনসেটের মধ্যে সুইচ করে।
- সিএসএস নিজেই লেখে আপনি যে নির্বাচক প্রদান করেন; কোন টেমপ্লেট টোকেন বিদ্যমান নেই।
আপনি যদি উইজেট নির্মাণে নতুন হন, তাহলে উইজেট নির্মাতা ওভারভিউ শুরু করার জায়গা।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি প্রশংসাপত্র উইজেট যার
<article class="quote-card">একটি সম্পাদক-নিয়ন্ত্রিত ছায়া বহন করা উচিত।
কিভাবে একটি বক্স ছায়া ক্ষেত্র যোগ করতে হয় #
উইজেট বিল্ডার এডিটরে, বাম দিকে ফিল্ড প্যানেলটি স্ক্রোল করুন যতক্ষণ না আপনি এটি খুঁজে পান বক্স ছায়া ক্ষেত্র, অন্যান্য শৈলী গ্রুপ ক্ষেত্র যেমন পটভূমি এবং পাঠ্য ছায়ার সাথে তালিকাভুক্ত।
এর অধীনে একটি বিভাগে এটি টেনে আনুন শৈলী ট্যাব, সাধারণত কার্ড-স্টাইলিং বিভাগে বর্ডার এবং ডাইমেনশন ক্ষেত্রগুলির পাশাপাশি। একবার এটি অবতরণ করলে, ক্ষেত্রের বিকল্পগুলি বাম দিকে খোলে।
বক্স ছায়া ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে নিয়ন্ত্রণের পাশে দেখানো পাঠ্য, উদাহরণস্বরূপ “Card Shadow”।
- নাম: শুধুমাত্র ক্ষেত্র, অক্ষর, সংখ্যা এবং আন্ডারস্কোরের জন্য অনন্য শনাক্তকারী।
- নির্বাচক: ছায়া প্রযোজ্য CSS নির্বাচক। এই সংযোগ নিজেই, পরবর্তী আচ্ছাদিত।
- ক্ষেত্র বিকল্প: গ্রুপের অভ্যন্তরে সাব-কন্ট্রোলের জন্য ওভাররাইড করে, যেমন একটি ডিফল্ট মান পরিবর্তন করা যা থেকে ছায়া শুরু হয়।
- বর্ণনা, শো লেবেল, বিভাজক, এবং শর্তাবলী হল সাধারণ প্রদর্শন বিকল্প।
আপনার নির্বাচকের দিকে ক্ষেত্রটি নির্দেশ করুন #
প্রতিটি গ্রুপ নিয়ন্ত্রণ মত, বক্স ছায়া ক্ষেত্রের কোন নেই {{shortcode}} আপনার CSS এর জন্য। একটি ছায়া হল একাধিক মান একটি সম্পত্তিতে ঘূর্ণিত, এবং ক {{ token }} ক্ষেত্রের জন্য প্রিন্ট দরকারী কিছুই। দ্য নির্বাচক বিকল্প হল পুরো সংযোগ।
প্রশংসাপত্র কার্ডের জন্য, নির্বাচক হল:
{{WRAPPER}} .quote-card
{{WRAPPER}}উইজেটের নিজস্ব ধারক বোঝায় এবং ছায়াটিকে এই উইজেটে স্কোপ করে রাখে। গ্রুপ কন্ট্রোল নির্বাচককে ব্যবহার করে ঠিক যেমন আপনি এটি লিখবেন, তাই টাইপ করুন{{WRAPPER}}নিজেকে।.quote-cardআপনার উইজেট এইচটিএমএল এর ভিতরের উপাদান যা ছায়া অবতরণ করে।
সতর্ক থাকুন: একজন নির্বাচক ছাড়া {{WRAPPER}} প্রতিটি মেলে .quote-card পৃষ্ঠায়, তাই একটি উইজেটের ছায়া সেটিংস তাদের সবগুলিকে পুনরায় স্টাইল করে। কিছুই আপনাকে সতর্ক করে না; শৈলী সহজভাবে ছড়িয়ে।
উইজেটের CSS ট্যাবে একটি ফলব্যাক শ্যাডো রাখুন যদি ডিজাইনটি একটির উপর নির্ভর করে। এটি প্রথম ড্রপের চেহারা, এবং একজন সম্পাদক পপওভার খুললে নিয়ন্ত্রণের মানগুলি দখল করে নেয়।
এলিমেন্টরে বক্স শ্যাডো কন্ট্রোল ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় উইজেটটি রাখুন, যদি পৃষ্ঠাটি ইতিমধ্যে খোলা থাকে তবে সম্পাদকটি পুনরায় লোড করুন। নিয়ন্ত্রণ একটি পেন্সিল আইকন দিয়ে আপনার লেবেল দেখায়; এটিতে ক্লিক করলে ছায়া পপওভার খোলে।
প্রথমে রঙ সেট করুন, তারপরে ব্লার টানুন এবং নরম কার্ডের চেহারার জন্য অফসেটগুলিকে ছোট রাখুন, বা হার্ড গ্রাফিক ছায়ার জন্য শূন্য ব্লার দিয়ে উল্লম্বকে উপরে ঠেলে দিন। চাপা ক্ষেত্র এবং কূপ জন্য ইনসেট অবস্থান ফ্লিপ করুন। পূর্বরূপ প্রতিটি পরিবর্তন ট্র্যাক করে। একটি লেআউট নোট: ছায়াগুলি প্রবাহে কোনও স্থান নেয় না, তাই একটি উদার স্প্রেড কিছু না সরিয়ে উপরে এবং নীচের অংশগুলিতে রক্তপাত করতে পারে, যা উইজেটটি শক্ত সারিগুলির মধ্যে বসে থাকলে তা পরীক্ষা করা মূল্যবান।
সাধারণ ব্যবহারের ক্ষেত্রে #
- কার্ড প্রশংসাপত্র, মূল্য নির্ধারণ এবং টিম উইজেটে, যেখানে একটি নরম ছায়া কার্ডটিকে পৃষ্ঠা থেকে আলাদা করে।
- বোতাম যে ডিফল্ট অবস্থায় গভীরতা প্রয়োজন।
- ইমেজ ফ্রেম, ফটোগুলিকে একটি উত্তোলিত, মুদ্রণের মতো প্রান্ত দেওয়া।
- স্টিকি বার এবং প্যানেল যেখানে একটি ছায়া বিষয়বস্তুর উপর উচ্চতার সংকেত দেয়।
- ইনসেট ফর্ম ক্ষেত্র, একটি recessed চেহারা জন্য ইনসেট টগল ব্যবহার করে।
বক্স শ্যাডো ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- নির্বাচক বিকল্প হল পুরো সংযোগ। CSS ট্যাবের জন্য কোন বক্স শ্যাডো টোকেন নেই; গ্রুপ কন্ট্রোল সহ একটি আশা করা সবচেয়ে সাধারণ ডেড এন্ড।
- সর্বদা নির্বাচক দিয়ে শুরু করুন
{{WRAPPER}}. ক্ষেত্রটি এটিকে কাঁচা ব্যবহার করে এবং এটিকে ছেড়ে দিলে পৃষ্ঠার প্রতিটি মিলিত উপাদানের উপর ছায়া ছড়িয়ে পড়ে। - এটিকে সীমানা এবং মাত্রা দিয়ে গ্রুপ করুন। তিনটি ক্ষেত্র একসাথে প্যানেলে একটি সম্পূর্ণ কার্ড-স্টাইলিং বিভাগ তৈরি করে।
- রঙ আলফা উপর ঝুঁক, অন্ধকার নয়। 10 থেকে 15 শতাংশ অস্বচ্ছতার একটি কালো ছায়া একটি কঠিন ধূসর রঙের চেয়ে ভাল পড়ে এবং এটি আপনার ক্ষেত্রের বিবরণে একটি নোটের মূল্য।
- উইজেট CSS এ একটি ফলব্যাক রাখুন। যদি ডিজাইনের ডিফল্টরূপে একটি ছায়ার প্রয়োজন হয়, তবে এটিকে স্টাইলশীটে পাঠান এবং নিয়ন্ত্রণটিকে এটিকে ওভাররাইড করতে দিন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে বক্স শ্যাডো ক্ষেত্র কী?
এটি একটি কাস্টম উইজেটে এলিমেন্টরের বক্স শ্যাডো গ্রুপ কন্ট্রোল যোগ করে, অফসেট, ব্লার, স্প্রেড, কালার এবং একটি ইনসেট টগল কভার করে। আপনি একটি CSS নির্বাচক যেমন ক্ষেত্র নির্দেশ {{WRAPPER}} .quote-card, এবং Elementor সেই নির্বাচককে ছায়া লেখে।
CSS ট্যাবের জন্য বক্স শ্যাডো শর্টকোড কোথায়?
কেউ নেই। বক্স শ্যাডো একটি গ্রুপ কন্ট্রোল, তাই এর মান কখনই a এর মাধ্যমে প্রিন্ট করে না {{token}}; এটির জন্য একটি টোকেন দরকারী কিছুই আউটপুট করে না। পরিবর্তে নির্বাচক বিকল্পটি পূরণ করুন এবং আপনার জন্য CSS তৈরি করা হয়েছে।
কেন আমার ছায়া অন্যান্য উইজেটগুলিতেও প্রদর্শিত হচ্ছে?
নির্বাচক অনুপস্থিত {{WRAPPER}}। গ্রুপ কন্ট্রোল নির্বাচককে ঠিক যেমন লেখা আছে তেমন প্রয়োগ করে, তাই .quote-card পৃষ্ঠার প্রতিটি ম্যাচ একা শৈলী। এটা পরিবর্তন করুন {{WRAPPER}} .quote-card এবং সংরক্ষণ করুন।
আমি কি ভিতরের ছায়া তৈরি করতে পারি?
হ্যাঁ। পপওভারের পজিশন টগল ছায়াটিকে ইনসেটে স্যুইচ করে, যা এটিকে উপাদানের প্রান্তের ভিতরে আঁকে, রিসেসড ইনপুট এবং কূপের জন্য স্বাভাবিক চিকিত্সা।
ক্ষেত্র বিকল্প কি জন্য সেটিং?
এটি গ্রুপের অভ্যন্তরে পৃথক উপ-নিয়ন্ত্রণকে ওভাররাইড করে, উদাহরণস্বরূপ ছায়াটিকে একটি প্রিসেট প্রারম্ভিক মান দেয় যাতে নিয়ন্ত্রণটি খালি ছায়ার পরিবর্তে একটি ব্যবহারযোগ্য ছায়া দিয়ে খোলে।
আমার উইজেট CSS-এর একটি ছায়া কি নিয়ন্ত্রণের সাথে বিরোধপূর্ণ?
না। স্টাইলশীট শ্যাডো হল ডিফল্ট লুক, এবং সম্পাদক মান সেট করলে কন্ট্রোলের আউটপুট এটিকে ওভাররাইড করে। একটি ফলব্যাক রাখা প্রস্তাবিত সেটআপ আছে।
মোড়ানো #
উইজেট বিল্ডার বক্স শ্যাডো ফিল্ড সম্পাদকদের গভীরতার উপর প্রকৃত নিয়ন্ত্রণ দেয়: একটি ক্ষেত্র, একটি নির্বাচক দিয়ে শুরু {{WRAPPER}}, এবং পুরো ছায়া পপওভার প্যানেলে প্রদর্শিত হবে। এটি একই নির্বাচক মডেলে কাজ করে টাইপোগ্রাফি ক্ষেত্র, তাই সেটআপ গ্রুপ নিয়ন্ত্রণের মধ্যে সরাসরি বহন করে। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
