পটভূমি

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

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

পটভূমি ক্ষেত্র কি করে #

• এটি আপনার উইজেটের স্টাইল ট্যাবে এলিমেন্টরের ব্যাকগ্রাউন্ড টাইপ কন্ট্রোল যোগ করে, প্রতি ব্যাকগ্রাউন্ড টাইপ প্রতি একটি আইকন আপনি অনুমতি দেন।
• ক্লাসিক একটি রঙ এবং একটি চিত্র দেয়, অবস্থান, সংযুক্তি, পুনরাবৃত্তি এবং আকার সেটিংস সহ একটি চিত্র নির্বাচন করা হলে।
• গ্রেডিয়েন্ট তাদের অবস্থান সহ দুটি রঙ দেয়, একটি রৈখিক বা রেডিয়াল প্রকার এবং একটি কোণ বা অবস্থান।
• Elementor নির্বাচক বিকল্পের উপাদানে CSS নিজেই লেখে। আপনার HTML বা CSS-এ টোকেনের প্রয়োজন নেই।

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

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

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

কিভাবে একটি পটভূমি ক্ষেত্র যোগ করতে হয় #

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

পটভূমি ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #

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

ক্লাসিক এবং গ্রেডিয়েন্টে প্রকার রাখুন। ভিডিও এবং স্লাইডশো প্যানেলে তাদের সেটিংস যোগ করে, কিন্তু যখন আমরা একটি কাস্টম উইজেটে সেগুলি পরীক্ষা করি, তখন একটি ভিডিও লিঙ্ক এবং একটি স্লাইডশো গ্যালারি ব্যানারের পিছনে কিছুই আঁকেনি৷ Elementor শুধুমাত্র অতিরিক্ত মার্কআপ তৈরি করে যে দুটি ধরনের নিজস্ব বিভাগ এবং পাত্রের জন্য প্রয়োজন।

নির্বাচকের জন্য সাইডবারের নীচে স্ক্রোল করুন। এর উপরে সাধারণ সেটিংস (লেবেল, বিভাজক, দেখান শর্তাবলী এবং বাকি) তারা অন্যান্য ক্ষেত্রের মত কাজ।

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

নির্বাচক এলিমেন্টরকে বলে যে কোন উপাদানটি ব্যাকগ্রাউন্ড পায়। ব্যানারের জন্য এটি বাইরের বাক্সের ক্লাস:

.promo-banner

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

CSS ট্যাবে উপাদানটিকে একটি ফলব্যাক ব্যাকগ্রাউন্ড দিন। এটি দেখায় যতক্ষণ না একজন সম্পাদক কিছু বাছাই করে, এবং নিয়ন্ত্রণের শৈলীগুলি তার পরে এটি প্রতিস্থাপন করে:

.promo-banner {
  background-color: #1f1147;
  color: #ffffff;
}

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

Elementor এ ব্যাকগ্রাউন্ড কন্ট্রোল ব্যবহার করুন #

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

এর জন্য ব্রাশ আইকনে ক্লিক করুন ক্লাসিক এবং একটি নির্বাচন করুন রঙ. ব্যানার সরাসরি আপডেট হয়।

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

এর জন্য দ্বিতীয় আইকনে ক্লিক করুন গ্রেডিয়েন্ট. প্রথম সেট করুন রঙ এবং তার অবস্থান, দ দ্বিতীয় রঙ এবং এর অবস্থান, তারপর বাছাই করুন রৈখিক সঙ্গে একটি কোণ বা রেডিয়াল একটি অবস্থান সঙ্গে।

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

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

পটভূমি ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• সর্বদা একটি ফলব্যাক রাখুন background-color CSS ট্যাবে। এটি নতুন উইজেট এবং একটি ছবি লোড হওয়ার আগের মুহূর্ত কভার করে।
• ফটোতে পাঠ্য পাঠযোগ্য রাখুন। উদাহরণ ব্যানার সঙ্গে একটি অন্ধকার স্তর যোগ করে .promo-banner::before এবং isolation: isolate বাক্সে, তাই সাদা টেক্সট উজ্জ্বল চিত্রগুলিতে পাঠযোগ্য থাকে।
• নির্বাচককে একটি উপাদানে নির্দেশ করুন। বিভিন্ন নির্বাচকের বেশ কয়েকটি পটভূমি ক্ষেত্র সম্পাদকদের জন্য অনেক অংশ দ্বারা ভাগ করা একটি ক্ষেত্রের চেয়ে সহজ।
• কাস্টম উইজেটগুলির জন্য ক্লাসিক এবং গ্রেডিয়েন্টে লেগে থাকুন।
• কোন ইমেজ বা গ্রেডিয়েন্ট ছাড়া একটি একক সমতল রঙের জন্য, রঙের ক্ষেত্র সম্পাদকদের জন্য সহজ।

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

মোড়ানো #

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