বক্স ছায়া

বক্স শ্যাডো ক্ষেত্রটি মাস্টার অ্যাডঅনগুলির সাথে নির্মিত একটি কাস্টম উইজেটে এলিমেন্টরের বক্স ছায়া নিয়ন্ত্রণ যুক্ত করে উইজেট নির্মাতা। সম্পাদকরা একটি ছোট পপওভার থেকে রঙ, অফসেট, ব্লার, স্প্রেড এবং অবস্থান সেট করে এবং আপনার CSS নির্বাচক যে উপাদানটিতে পয়েন্ট করে তাতে ছায়া প্রয়োগ করা হয়। এটি পৃষ্ঠা থেকে কার্ড তুলে নেওয়া, বোতাম নরম করা বা প্যানেলকে চাপা-ইন লুক দেওয়ার ক্ষেত্র।

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

বক্স শ্যাডো ফিল্ড কি করে #

• এটি আপনার উইজেটের স্টাইল ট্যাবে একটি নিয়ন্ত্রণ যোগ করে: আপনার লেবেল এবং একটি পেন্সিল আইকন যা ছায়া সেটিংস খোলে।
• সেটিংস হল রঙ, অনুভূমিক, উল্লম্ব, অস্পষ্ট, স্প্রেড এবং অবস্থান (আউটলাইন বা ইনসেট)।
• এলিমেন্টর লিখেছেন box-shadow নির্বাচকের উপাদানে CSS, তাই আপনার HTML বা CSS-এ টোকেনের প্রয়োজন নেই।

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

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

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

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

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

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

• লেবেল এলিমেন্টরে নিয়ন্ত্রণের পাশের পাঠ্য, উদাহরণস্বরূপ “Card Shadow”।
• নাম ক্ষেত্রের অনন্য আইডি। অক্ষর, সংখ্যা এবং আন্ডারস্কোর শুধুমাত্র।
• বর্ণনা নির্মাতার ভিতরে আপনার জন্য একটি নোট।
• নির্বাচক, ডিফল্ট শ্যাডো টাইপ, ডিফল্ট ছায়া মান এবং ডিফল্ট ছায়া রঙ বর্ণনার অধীনে উপস্থিত হন। আমাদের পরীক্ষায়, এই বাক্সগুলিতে টাইপ করা পরিবর্তনগুলি সংরক্ষণ করা হয়নি এবং নির্মাতা একটি ত্রুটি লগ করেছেন, তাই আপাতত তাদের উপর নির্ভর করবেন না। পরিবর্তে সাধারণ সেটিংসে নির্বাচক সেট করুন (পরবর্তী বিভাগ) এবং কার্ডটিকে CSS ট্যাবে একটি প্রারম্ভিক ছায়া দিন।
• ডিফল্ট মান এই ক্ষেত্র দ্বারা ব্যবহৃত হয় না।

নির্বাচক সেট করুন #

সাইডবারের নীচে স্ক্রোল করুন এবং উপাদানটির ক্লাস টাইপ করুন নির্বাচক কন্ট্রোল ক্লাসের অধীনে বক্স। প্রশংসাপত্র কার্ডের জন্য:

.quote-card

আপনাকে টাইপ করতে হবে না {{WRAPPER}}। নির্মাতা আপনার নির্বাচকের সামনে এটি যোগ করে, তাই নিয়ম হয়ে যায় {{WRAPPER}} .quote-card এবং শুধুমাত্র এই উইজেটকে প্রভাবিত করে। একটি ছায়া একাধিক উপাদানে প্রয়োগ করা উচিত হলে কমা দিয়ে একাধিক নির্বাচককে আলাদা করুন। নির্বাচক খালি থাকলে, ছায়া উইজেটের বাইরের মোড়কে চলে যায়।

আপনি সংরক্ষণ করার পরে, সাইডবারের শীর্ষের কাছে নির্বাচক বাক্সটি একই মান দেখায়।

একটি ফলব্যাক ছায়া যোগ করুন #

CSS ট্যাবে প্রারম্ভিক ছায়া রাখুন। এটি দেখায় যতক্ষণ না একজন সম্পাদক নিয়ন্ত্রণ চালু করে, এবং নিয়ন্ত্রণের ছায়া তার পরে এটি প্রতিস্থাপন করে:

.quote-card {
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}

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

এলিমেন্টরে বক্স শ্যাডো কন্ট্রোল ব্যবহার করুন #

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

পপওভার খুলতে পেন্সিল ক্লিক করুন। এটি এলিমেন্টরের প্রারম্ভিক মানগুলির সাথে ছায়াটিকে চালু করে: অনুভূমিক 0, উল্লম্ব 0, ব্লার 10, স্প্রেড 0 এবং 50% অস্বচ্ছতায় কালো। আপনি টেনে আনার সাথে সাথে সেগুলি এবং কার্ড আপডেটগুলি সামঞ্জস্য করুন:

• রঙ ছায়ার রঙ এবং অস্বচ্ছতা সেট করে। একটি রঙিন, আধা-স্বচ্ছ রঙ কালো থেকে নরম দেখায়।
• অনুভূমিক এবং উল্লম্ব ছায়াটিকে পাশে এবং উপরে বা নীচে সরান।
• ঝাপসা করা প্রান্ত নরম করে। 0 একটি কঠিন ছায়া দেয়।
• ছড়িয়ে পড়া ছায়া বাড়ায় বা সঙ্কুচিত করে। একটি ছোট নেতিবাচক মান একটি বড় অস্পষ্টতাকে পার্শ্বে ছড়িয়ে পড়া থেকে রাখে।
• অবস্থান আউটলাইন (বাক্সের বাইরে) এবং ইনসেট (এর ভিতরে) এর মধ্যে সুইচ করে।

অবস্থান সেট করুন ইনসেট একটি চাপা-ইন চেহারা জন্য, ইনপুট ক্ষেত্র এবং শান্ত প্যানেল জন্য দরকারী:

পেন্সিলের পাশের বৃত্তাকার তীরটি নিয়ন্ত্রণ পুনরায় সেট করে এবং ছায়াটি সরিয়ে দেয়।

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

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

বক্স শ্যাডো ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• সাইডবারের নীচে নির্বাচক ব্যবহার করুন এবং শুধুমাত্র ক্লাস টাইপ করুন। {{WRAPPER}} আপনার জন্য যোগ করা হয়।
• একটি ফলব্যাক রাখুন box-shadow CSS ট্যাবে যাতে নতুন উইজেটগুলি সমতল দেখায় না।
• নরম কার্ডের ছায়াগুলির জন্য, একটি বড় ব্লার, প্রায় অর্ধেক ব্লারের একটি উল্লম্ব অফসেট এবং একটি ছোট নেতিবাচক স্প্রেড চেষ্টা করুন।
• উপাদানটিকে একটি সীমানা ব্যাসার্ধ দিন। ছায়াগুলি কোণগুলি অনুসরণ করে, তাই বৃত্তাকার কার্ডগুলি বৃত্তাকার ছায়া পায়৷।
• পাঠ্যের ছায়ার জন্য, ব্যবহার করুন টেক্সট শ্যাডো ক্ষেত্র পরিবর্তে।

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

মোড়ানো #

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