এলিমেন্টরে কণার পটভূমি কীভাবে যুক্ত করবেন (ধাপে ধাপে নির্দেশিকা)

কণার ব্যাকগ্রাউন্ডগুলি আপনার এলিমেন্টর বিভাগে অ্যানিমেটেড, ভাসমান আকার যোগ করে যা মাউস চলাচলে নড়াচড়া করে, সংযোগ করে এবং প্রতিক্রিয়া জানায়। তারা স্থির বিভাগগুলিকে নজরকাড়া, ইন্টারেক্টিভ এলাকায় পরিণত করে যা তাত্ক্ষণিকভাবে মনোযোগ আকর্ষণ করে।

এই নির্দেশিকায়, আপনি বিনামূল্যে ব্যবহার করে আপনার ওয়েবসাইটের যেকোনো বিভাগে একটি এলিমেন্টর কণার পটভূমি কীভাবে যোগ করবেন তা শিখবেন কণা এক্সটেনশন মধ্যে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন। আমরা বেসিক সেটআপ, particles।js জেনারেটরের প্রিসেটগুলি (NASA, Bubble, Snow) এবং কণা।js JSON কনফিগারেশন ব্যবহার করে কীভাবে আপনার নিজস্ব কাস্টম কণা প্রভাব তৈরি করবেন তা কভার করব।

কোন কোডিং প্রয়োজন নেই। পুরো প্রক্রিয়াটি প্রায় 5 মিনিট সময় নেয়।

একটি কণা পটভূমি কি?

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

প্রভাব দ্বারা চালিত হয় particles।js, একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি। মাস্টার অ্যাডনস কণা।js সরাসরি এলিমেন্টরে সংহত করে, যাতে আপনি কোনো কোড স্পর্শ না করেই প্রভাবটিকে সক্ষম এবং কাস্টমাইজ করতে পারেন।

কণা প্যানেল থেকে সংযুক্ত particles।js জেনারেটরে প্রিসেট রয়েছে যা ভালো শুরুর পয়েন্ট তৈরি করে:

এছাড়াও আপনি আপনার নিজস্ব কণা তৈরি করে সম্পূর্ণ কাস্টম প্রভাব তৈরি করতে পারেন।js JSON কনফিগারেশন।

আপনার যা প্রয়োজন হবে

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর (ফ্রি বা প্রো) ইনস্টল করা হয়েছে
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়
• দ্য কণা মাস্টার অ্যাডঅন সেটিংসে এক্সটেনশন সক্ষম করা হয়েছে৷

কণা এক্সটেনশন চালু আছে তা নিশ্চিত করুন: যান মাস্টার অ্যাডঅন → এক্সটেনশন আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে এবং টগল করুন কণা চালু।

এলিমেন্টরে কণার পটভূমি কীভাবে যুক্ত করবেন: ধাপে ধাপে

আপনার পৃষ্ঠার যেকোনো এলিমেন্টর বিভাগ বা পাত্রে একটি কণার পটভূমি যোগ করতে এই পদক্ষেপগুলি অনুসরণ করুন।

ধাপ 1: একটি বিভাগ তৈরি করুন বা নির্বাচন করুন

এলিমেন্টর এডিটরে আপনার পৃষ্ঠা খুলুন। একটি নতুন বিভাগ তৈরি করুন বা একটি বিদ্যমান নির্বাচন করুন যেখানে আপনি কণা প্রভাব যোগ করতে চান।

আপনার পছন্দের কলাম গঠন চয়ন করুন। কণা প্রভাব যে কোনো লেআউটের সাথে কাজ করে, তা একটি একক কলাম, দুটি কলাম বা তার বেশি হোক না কেন।

ধাপ 2: বিভাগে বিষয়বস্তু যোগ করুন

প্রিভিউতে দৃশ্যমান হওয়ার জন্য আপনার বিভাগের ভিতরে অন্তত একটি উইজেট প্রয়োজন। আপনি যদি একটি স্বতন্ত্র কণা বিভাগ তৈরি করেন (যেমন একটি অ্যানিমেটেড হিরো এলাকা), একটি ড্রপ করুন স্পেসার বিভাগে উইজেট করুন এবং উচ্চতা 400-600px সেট করুন।

আপনি শিরোনাম, বোতাম, ছবি বা অন্য কোনো উইজেট যোগ করতে পারেন। কণাগুলি আপনার সমস্ত সামগ্রীর পিছনে প্রদর্শিত হবে।

ধাপ 3: বিভাগটিকে সম্পূর্ণ প্রস্থে সেট করুন (ঐচ্ছিক)

সেরা ভিজ্যুয়াল প্রভাবের জন্য, বিভাগ লেআউট সেট করুন সম্পূর্ণ প্রস্থ। এটি কণাগুলিকে পুরো ব্রাউজারের প্রস্থে বিস্তৃত করে তোলে।

বিভাগের সম্পাদনা আইকনে ক্লিক করুন, যান বিন্যাস ট্যাব, এবং সেট বিষয়বস্তুর প্রস্থ প্রতি সম্পূর্ণ প্রস্থ.

এই ধাপ ঐচ্ছিক। কণাগুলি বক্সযুক্ত-প্রস্থ বিভাগেও কাজ করে।

ধাপ 4: একটি পটভূমি রঙ যোগ করুন

এই পদক্ষেপটি গুরুত্বপূর্ণ। কণাগুলি ডিফল্টরূপে সাদা, তাই তাদের দৃশ্যমান করতে আপনার একটি গাঢ় বা রঙিন পটভূমি প্রয়োজন।

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

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

ধাপ 5: কণার প্রভাব সক্ষম করুন

এখন প্রধান অংশের জন্য। নির্বাচিত বিভাগ সহ, থাকুন শৈলী ট্যাব এবং নিচে স্ক্রোল করুন কণা এমএ ব্যাজ সহ বিভাগ। সুইচ কণা পটভূমি সক্ষম করুন চালু।

ডিফল্ট উপাদান কণা প্রভাব অবিলম্বে আপনার বিভাগে প্রদর্শিত হবে। আপনি দেখতে পাবেন ছোট সাদা বিন্দু ভাসমান এবং পাতলা লাইনের সাথে সংযুক্ত।

যদি ডিফল্ট প্রভাব আপনার ডিজাইনের জন্য ভাল দেখায়, আপনি সম্পন্ন করেছেন। আঘাত হালনাগাদ সংরক্ষণ করতে। কিন্তু আপনি যদি কণা শৈলী কাস্টমাইজ করতে চান, পড়া চালিয়ে যান।

কিভাবে আপনার এলিমেন্টর কণা প্রভাব কাস্টমাইজ করবেন

আপনি মুক্ত কণা।js জেনারেটর দিয়ে কণা কাস্টমাইজ করুন, প্যানেল থেকে লিঙ্ক করা একটি ভিজ্যুয়াল কনফিগারার। আপনি কোড না লিখে কণার সংখ্যা, তাদের আকৃতি, আকার, গতি, রঙ এবং চলাচলের আচরণ পরিবর্তন করতে পারেন।

ধাপ 1: কণা কনফিগারার খুলুন

কণা টগলের নীচে, আপনি একটি বার্তা দেখতে পাবেন: “নীচের ক্ষেত্রের জন্য JSON তৈরি করতে এখানে ক্লিক করুন।” কণা খুলতে লিঙ্কে ক্লিক করুন।js ভিজ্যুয়াল কনফিগারার।

কনফিগারারের শীর্ষে, ক্লিক করুন “ডিফল্ট” প্রিসেটগুলি দেখতে: ডিফল্ট, NASA, Bubble, Snow এবং Nyan Cat। প্রারম্ভিক বিন্দু হিসাবে যেকোনো প্রিসেট নির্বাচন করুন, অথবা ডিফল্ট কনফিগারেশন থেকে শুরু করুন।

ধাপ 2: কণা বৈশিষ্ট্য সামঞ্জস্য করুন

কনফিগারারের তিনটি প্রধান বিভাগ রয়েছে। ফোকাস কণা ভিজ্যুয়াল কাস্টমাইজেশনের জন্য বিভাগ:

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

ধাপ 3: আপনার কনফিগারেশন ডাউনলোড করুন

লাইভ প্রিভিউতে কণাগুলি কেমন দেখায় তাতে আপনি খুশি হয়ে গেলে, কনফিগারারের নীচে স্ক্রোল করুন এবং ক্লিক করুন “বর্তমান কনফিগারেশন ডাউনলোড করুন (JSON)”.

নামের একটি ফাইল particlesjs-config.json আপনার কম্পিউটারে ডাউনলোড হবে।

ধাপ 4: JSON কোড কপি করুন

ডাউনলোড করা খুলুন particlesjs-config.json যেকোনো টেক্সট এডিটরে ফাইল করুন (নোটপ্যাড, ভিএস কোড, বা টেক্সটএডিট)। সমস্ত কোড নির্বাচন করুন এবং এটি অনুলিপি করুন।

আপনি কি করছেন তা না জানলে JSON ম্যানুয়ালি সম্পাদনা করবেন না। ভিজ্যুয়াল কনফিগারার ইতিমধ্যেই আপনার প্রয়োজনীয় সঠিক সেটিংস তৈরি করেছে।

ধাপ 5: এলিমেন্টরে পেস্ট করুন

আপনার এলিমেন্টর এডিটরে ফিরে যান। বিভাগে শৈলী ট্যাব, খুলুন কণা এবং খুঁজে কণা JSON ক্ষেত্র। আপনার কপি করা কোডটি পেস্ট করুন এবং ক্লিক করুন হালনাগাদ.

আপনার কাস্টম কণা প্রভাব এখন পৃষ্ঠায় লাইভ। সবকিছু ঠিক আছে তা নিশ্চিত করতে এটির পূর্বরূপ দেখুন।

কণা পটভূমি ব্যবহার করার সৃজনশীল উপায়

কণা সহ এলিমেন্টর অ্যানিমেটেড ব্যাকগ্রাউন্ডের জন্য এখানে কিছু ব্যবহারিক ব্যবহারের ক্ষেত্রে রয়েছে:

• হিরো বিভাগ • একটি টেক-ফরোয়ার্ড, আধুনিক চেহারার জন্য আপনার হোমপেজ হিরোতে কণা যোগ করুন। একটি শিরোনাম, সাবটেক্সট এবং CTA বোতামের সাথে একত্রিত করুন।
• মূল্য বিভাগ • আপনার মূল্য সারণীর পিছনে একটি সূক্ষ্ম, কম-ঘনত্বের কণা প্রভাব ব্যবহার করুন যাতে এটি পৃষ্ঠার বাকি অংশ থেকে আলাদা হয়৷।
• প্রশংসাপত্র এলাকা প্রশংসাপত্রের পিছনে একটি মৃদু তুষার বা বুদবুদ প্রভাব বিষয়বস্তু থেকে বিভ্রান্ত না করে চাক্ষুষ আগ্রহ যোগ করে।
• ফুটার বিভাগ 1 পৃষ্ঠার নীচে একটি পালিশ, সমাপ্ত চেহারা জন্য আপনার ফুটারে কণা যোগ করুন।
• শীঘ্রই আসছে পেজ 'কণাগুলি অন্যথায় একটি স্থির, একক-পৃষ্ঠা বিন্যাস কী হবে তা নিয়ে আন্দোলন তৈরি করে। একটি তৈরি করার বিষয়ে আমাদের গাইড দেখুন Elementor শীঘ্রই আসছে পৃষ্ঠা.
• কল-টু-অ্যাকশন বিভাগ • অ্যানিমেটেড কণা সহ একটি বিভাগে এটি স্থাপন করে আপনার CTA-এর প্রতি দৃষ্টি আকর্ষণ করুন।

কণা জন্য কর্মক্ষমতা টিপস

জাভাস্ক্রিপ্ট ব্যবহার করে দর্শকের ব্রাউজারে কণা প্রভাব চলে। আপনার সাইট দ্রুত রাখতে:

• কণা গণনা সীমিত করুন। 40-80 কণা সাধারণত একটি ভাল চাক্ষুষ প্রভাব জন্য যথেষ্ট। 150 এর উপরে যাওয়া পুরানো ডিভাইসগুলিকে ধীর করে দিতে পারে।
• প্রতি পৃষ্ঠায় 1-2 বিভাগে কণা ব্যবহার করুন। প্রতিটি বিভাগে কণা যোগ করবেন না। অতিরিক্ত ব্যবহার করা হলে প্রভাবটি তার প্রভাব হারায় এবং এটি ওভারহেড প্রক্রিয়াকরণ যোগ করে।
• মোবাইলে পরীক্ষা করুন। কণা প্রভাব ফোনে ব্যাটারি নিষ্কাশন করতে পারে। Elementor এর প্রতিক্রিয়াশীল দৃশ্যমানতা সেটিংস ব্যবহার করে কণার সংখ্যা হ্রাস বা মোবাইলে প্রভাব নিষ্ক্রিয় করার কথা বিবেচনা করুন।
• বিষয়বস্তু-ভারী পৃষ্ঠাগুলিতে কণা এড়িয়ে চলুন। দীর্ঘ ব্লগ পোস্ট এবং ডকুমেন্টেশন পৃষ্ঠাগুলির অ্যানিমেটেড ব্যাকগ্রাউন্ডের প্রয়োজন নেই। ল্যান্ডিং পৃষ্ঠা এবং মূল বিভাগগুলির জন্য কণা সংরক্ষণ করুন।

আরও কর্মক্ষমতা টিপস জন্য, আমাদের গাইড পড়ুন কিভাবে Elementor ওয়েবসাইট গতি বাড়ানো যায়.

অন্যান্য এলিমেন্টর ব্যাকগ্রাউন্ড ইফেক্ট

কণাগুলি মাস্টার অ্যাডঅনগুলিতে উপলব্ধ বেশ কয়েকটি এলিমেন্টর ব্যাকগ্রাউন্ড প্রভাবগুলির মধ্যে একটি। এই সম্পর্কিত এক্সটেনশনগুলি দেখুন:

• অ্যানিমেটেড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড (প্রো): মসৃণ রঙের গ্রেডিয়েন্ট যা ক্রমাগত স্থানান্তরিত হয়
• ব্যাকগ্রাউন্ড স্লাইডার: ট্রানজিশন ইফেক্ট সহ বেশ কয়েকটি ব্যাকগ্রাউন্ড ইমেজের মাধ্যমে চক্র
• রেলাক্স (প্যারালাক্স) (প্রো): গভীরতার অনুভূতির জন্য প্যারালাক্স স্ক্রলিং
• প্রকাশ করা (প্রো): একটি কালার ব্লক ওয়াইপ যা একটি উইজেট বা কলাম উন্মোচন করে যখন এটি দৃশ্যে স্ক্রোল করে

এই সব অন্তর্ভুক্ত করা হয় মাস্টার অ্যাডঅন' 80+ উইজেট এবং এক্সটেনশন.

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

মাস্টার অ্যাডনসে কণার পটভূমি প্রভাব কি বিনামূল্যে?

হ্যাঁ. দ্য কণা এক্সটেনশন কণা JSON ক্ষেত্র সহ বিনামূল্যে, তাই আপনি একটি প্রো লাইসেন্স ছাড়াই particles।js জেনারেটর থেকে যেকোনো কনফিগারেশন পেস্ট করতে পারেন।

কণা কি এলিমেন্টর পাত্রে কাজ করে?

হ্যাঁ। মাস্টার অ্যাডনস পার্টিকেল এক্সটেনশন পুরানো এলিমেন্টর বিভাগ এবং নতুন ফ্লেক্সবক্স কন্টেইনার উভয়ের সাথেই কাজ করে। যেকোনো কন্টেইনারের স্টাইল ট্যাব থেকে একইভাবে এটি সক্ষম করুন।

কণা কি আমার ওয়েবসাইটকে ধীর করে দেবে?

কণাগুলি জাভাস্ক্রিপ্ট ব্যবহার করে ব্রাউজারে চলে, তাই তারা ক্লায়েন্টের দিকে কিছু প্রসেসিং ওভারহেড যোগ করে। 40-80 কণার সাথে, আধুনিক ডিভাইসগুলিতে প্রভাব ন্যূনতম। 150 টিরও বেশি কণা ব্যবহার করা বা একই পৃষ্ঠায় একাধিক বিভাগে প্রভাব যুক্ত করা এড়িয়ে চলুন। particles।js লাইব্রেরি হালকা ওজনের (প্রায় 25KB), তাই পৃষ্ঠা লোডের উপর ফাইলের আকারের প্রভাব নগণ্য।

আমি কি আমার ব্র্যান্ডের সাথে মেলে কণার রঙ পরিবর্তন করতে পারি?

হ্যাঁ। কণার রঙ, আকৃতি, আকার, গতি, অস্বচ্ছতা এবং আরও অনেক কিছু পরিবর্তন করতে particles।js ভিজ্যুয়াল কনফিগারার (এক্সটেনশন সেটিংস থেকে লিঙ্ক করা) ব্যবহার করুন। আপনি স্বাধীনভাবে কণা এবং সংযোগকারী লাইনের জন্য যেকোনো হেক্স রঙের মান সেট করতে পারেন।

আমি কিভাবে মোবাইলে কণা নিষ্ক্রিয় করব?

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

আপনার এলিমেন্টর সাইটে কণা যোগ করা শুরু করুন

একটি এলিমেন্টর কণার পটভূমি যোগ করতে মাস্টার অ্যাডঅনগুলির সাথে মাত্র কয়েকটি ক্লিক লাগে৷ দ্রুত সেটআপের জন্য NASA, Bubble বা Snow-এর মতো জেনারেটর প্রিসেট থেকে শুরু করুন, অথবা সম্পূর্ণ নিয়ন্ত্রণের জন্য particles।js কনফিগারেটর দিয়ে আপনার নিজস্ব কাস্টম প্রভাব তৈরি করুন৷।

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

এটা চেষ্টা করতে প্রস্তুত? এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ডাউনলোড করুন এবং 5 মিনিটের মধ্যে আপনার প্রথম কণার পটভূমি যোগ করুন।