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