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