एलिमेंटर में पार्टिकल्स बैकग्राउंड कैसे जोड़ें (स्टेप-बाय-स्टेप गाइड)

कण पृष्ठभूमि आपके एलिमेंटर अनुभागों में एनिमेटेड, फ्लोटिंग आकार जोड़ते हैं जो माउस आंदोलन को स्थानांतरित, कनेक्ट और प्रतिक्रिया करते हैं वे स्थिर वर्गों को आंखों को पकड़ने, इंटरैक्टिव क्षेत्रों में बदल देते हैं जो तुरंत ध्यान आकर्षित करते हैं।

इस गाइड में, आप सीखेंगे कि मुफ्त का उपयोग करके अपनी वेबसाइट पर किसी भी अनुभाग में एलिमेंटर कणों की पृष्ठभूमि कैसे जोड़ें कण विस्तार में एलिमेंट के लिए मास्टर ऐडऑन। हम मूल सेटअप, कणों पर प्रीसेट को कवर करेंगे। जेएस जनरेटर (नासा, बबल, स्नो), और कणों का उपयोग करके अपने स्वयं के कस्टम कण प्रभाव कैसे बनाएं। जेएस जेएसओएन कॉन्फ़िगरेशन।

कोई कोडिंग की आवश्यकता नहीं है पूरी प्रक्रिया में लगभग ५ मिनट लगते हैं।

कण पृष्ठभूमि क्या है?

एक कण पृष्ठभूमि एक एनिमेटेड प्रभाव है जो एक अनुभाग में तैरते हुए छोटे आकार (डॉट्स, सर्कल, सितारे, या कस्टम आकार) प्रदर्शित करता है ये कण अलग-अलग गति से चलते हैं, एक दूसरे के करीब होने पर पतली रेखाओं से जुड़ते हैं, और होवर पर आपके कर्सर पर प्रतिक्रिया कर सकते हैं।

प्रभाव द्वारा संचालित है कण।जे।एस, एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी मास्टर एडॉन्स कणों को एकीकृत करता है।जेएस सीधे एलिमेंटर में, ताकि आप किसी भी कोड को छूने के बिना प्रभाव को सक्षम और अनुकूलित कर सकें।

कण पैनल से जुड़े कण।js जनरेटर में प्रीसेट होते हैं जो अच्छे शुरुआती बिंदु बनाते हैंः

आप अपने स्वयं के कण।js JSON कॉन्फ़िगरेशन उत्पन्न करके पूरी तरह से कस्टम प्रभाव भी बना सकते हैं।

आपको क्या चाहिए

• वर्डप्रेस साथ तत्व (मुफ़्त या प्रो) स्थापित
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय
• द कणों मास्टर ऐडऑन सेटिंग्स में एक्सटेंशन सक्षम

सुनिश्चित करें कि कण एक्सटेंशन चालू है: पर जाएं मास्टर ऐडऑन → एक्सटेंशन अपने वर्डप्रेस डैशबोर्ड में और टॉगल करें कणों को ऑन।

एलिमेंटर में पार्टिकल्स बैकग्राउंड कैसे जोड़ेंः स्टेप-बाय-स्टेप

अपने पृष्ठ पर किसी भी एलिमेंटर अनुभाग या कंटेनर में कण पृष्ठभूमि जोड़ने के लिए इन चरणों का पालन करें।

चरण १: एक अनुभाग बनाएं या चुनें

एलिमेंट संपादक में अपना पृष्ठ खोलें एक नया अनुभाग बनाएं या मौजूदा एक का चयन करें जहां आप कण प्रभाव जोड़ना चाहते हैं।

अपनी पसंदीदा स्तंभ संरचना चुनें कणों का प्रभाव किसी भी लेआउट के साथ काम करता है, चाहे वह एक एकल स्तंभ, दो स्तंभ, या अधिक हो।

चरण २: अनुभाग में सामग्री जोड़ें

पूर्वावलोकन में दिखाई देने के लिए आपके अनुभाग को इसके अंदर कम से कम एक विजेट की आवश्यकता है यदि आप एक स्टैंडअलोन कण अनुभाग (एक एनिमेटेड नायक क्षेत्र की तरह) बना रहे हैं, तो एक ड्रॉप करें स्पेसर अनुभाग में विजेट करें और ऊंचाई 400-600px पर सेट करें।

आप हेडिंग, बटन, चित्र या कोई अन्य विजेट भी जोड़ सकते हैं कण आपकी सभी सामग्री के पीछे दिखाई देंगे।

चरण ३: अनुभाग को पूर्ण चौड़ाई (वैकल्पिक) पर सेट करें

सर्वोत्तम दृश्य प्रभाव के लिए, अनुभाग लेआउट सेट करें पूर्ण चौड़ाई। इससे कण संपूर्ण ब्राउज़र चौड़ाई में फैल जाते हैं।

अनुभाग के संपादन आइकन पर क्लिक करें, पर जाएं लेआउट टैब, और सेट करें सामग्री चौड़ाई को पूर्ण चौड़ाई.

यह चरण वैकल्पिक है कण भी बॉक्सिंग-चौड़ाई वर्गों में काम करते हैं।

चरण ४: एक पृष्ठभूमि रंग जोड़ें

यह कदम महत्वपूर्ण है कण डिफ़ॉल्ट रूप से सफेद होते हैं, इसलिए आपको उन्हें दृश्यमान बनाने के लिए एक अंधेरे या रंगीन पृष्ठभूमि की आवश्यकता होती है।

अनुभाग के संपादन आइकन पर क्लिक करें, पर जाएं शैली टैब, और के तहत पृष्ठभूमि, एक ठोस रंग या ढाल सेट करें डार्क ब्लूज़, ब्लैक और डीप पर्पल डिफॉल्ट व्हाइट पार्टिकल्स के साथ सबसे अच्छा काम करते हैं।

टिप: अधिक गतिशील लुक के लिए, इसका उपयोग करने का प्रयास करें एनिमेटेड ग्रेडिएंट बैकग्राउंड एक्सटेंशन (प्रो) एक ठोस रंग के बजाय मास्टर एडॉन्स से कणों के साथ संयुक्त ढाल पृष्ठभूमि एक आश्चर्यजनक दृश्य प्रभाव पैदा करती है।

चरण 5: कणों के प्रभाव को सक्षम करें

अब मुख्य भाग के लिए चयनित अनुभाग के साथ, पर बने रहें शैली टैब करें और नीचे स्क्रॉल करें कणों एमए बैज के साथ अनुभाग। स्विच कण पृष्ठभूमि सक्षम करें पर।

डिफ़ॉल्ट एलिमेंटर कण प्रभाव आपके अनुभाग में तुरंत दिखाई देगा आप छोटे सफेद डॉट्स को तैरते हुए और पतली रेखाओं से जुड़ते हुए देखेंगे।

यदि डिफ़ॉल्ट प्रभाव आपके डिजाइन के लिए अच्छा दिखता है, तो आप कर चुके हैं मारो अपडेट बचाने के लिए लेकिन अगर आप कण शैली को अनुकूलित करना चाहते हैं, तो पढ़ते रहें।

अपने एलिमेंट कण प्रभाव को कैसे अनुकूलित करें

आप कणों को मुक्त कणों के साथ अनुकूलित करते हैं।जेएस जनरेटर, पैनल से जुड़ा एक दृश्य विन्यासकर्ता। आप कोड लिखे बिना कणों की संख्या, उनके आकार, आकार, गति, रंग और गति व्यवहार को बदल सकते हैं।

चरण १: कण विन्यासकर्ता खोलें

कणों टॉगल के नीचे, आपको एक संदेश दिखाई देगाः “नीचे दिए गए फ़ील्ड।” के लिए JSON उत्पन्न करने के लिए यहां क्लिक करें पार्टिकल्स।js विज़ुअल कॉन्फिगरेटर खोलने के लिए लिंक पर क्लिक करें।

विन्यासकर्ता के शीर्ष पर, क्लिक करें “Default” प्रीसेट देखने के लिए: डिफ़ॉल्ट, नासा, बबल, स्नो और न्यान कैट किसी भी प्रीसेट को शुरुआती बिंदु के रूप में चुनें, या डिफ़ॉल्ट कॉन्फ़िगरेशन से शुरू करें।

चरण २: कण गुणों को समायोजित करें

विन्यासकर्ता के तीन मुख्य अनुभाग हैं। पर ध्यान दें कणों दृश्य अनुकूलन के लिए अनुभागः

• नंबर िस पर नियंत्रण करता है कि कितने कण दिखाई देते हैं उच्च मान एक सघन प्रभाव पैदा करते हैं, लेकिन अधिक ब्राउज़र संसाधनों का उपयोग करते हैं।
• रंग 1 कण का रंग सेट करें। गहरे रंग की पृष्ठभूमि के लिए सफेद रंग का उपयोग करें, या अपने ब्रांड के रंगों से मेल खाएं।
• आकार le वृत्त, किनारे (वर्ग), त्रिभुज, बहुभुज या तारा आकृतियों में से चुनें।
• आकार िस कण आकार सेट करें अधिक प्राकृतिक रूप के लिए यादृच्छिक आकार सक्षम करें।
• अपारदर्शिता st कण पारदर्शिता को नियंत्रित करें। आंशिक अपारदर्शिता एक सूक्ष्म, सुरुचिपूर्ण प्रभाव पैदा करती है।
• लाइन लिंक्ड 2 आस-पास के कणों के बीच कनेक्टिंग लाइनों को सक्षम या अक्षम करें।
• आंदोलन 1 कण गति की गति और दिशा निर्धारित करें।

चरण ३: अपना कॉन्फ़िगरेशन डाउनलोड करें

एक बार जब आप लाइव पूर्वावलोकन में कणों को कैसे देखते हैं, तो कॉन्फिगरेटर के नीचे स्क्रॉल करें और क्लिक करें “वर्तमान कॉन्फिग (JSON)” डाउनलोड करें.

नामक एक फ़ाइल particlesjs-config.json आपके कंप्यूटर पर डाउनलोड हो जाएगा।

चरण ४: जेएसओएन कोड की प्रतिलिपि बनाएँ

डाउनलोड किया हुआ खोलें particlesjs-config.json किसी भी टेक्स्ट एडिटर में फाइल करें (नोटपैड, वीएस कोड, या टेक्स्टएडिट) सभी कोड का चयन करें और इसे कॉपी करें।

जब तक आप नहीं जानते कि आप क्या कर रहे हैं तब तक जेएसओएन को मैन्युअल रूप से संपादित न करें दृश्य विन्यासकर्ता ने पहले से ही सटीक सेटिंग्स उत्पन्न की हैं जिनकी आपको आवश्यकता है।

चरण ५: एलिमेंट में चिपकाएँ

अपने एलिमेंटर संपादक पर वापस जाएं अनुभाग में शैली टैब, खोलें कणों और खोजें कण JSON फ़ील्ड आपके द्वारा कॉपी किए गए कोड को पेस्ट करें और क्लिक करें अपडेट.

आपका कस्टम कण प्रभाव अब पृष्ठ पर लाइव है सब कुछ सही दिखने की पुष्टि करने के लिए इसका पूर्वावलोकन करें।

कणों का उपयोग करने के रचनात्मक तरीके पृष्ठभूमि

कणों के साथ एलिमेंटर एनिमेटेड पृष्ठभूमि के लिए यहां कुछ व्यावहारिक उपयोग के मामले दिए गए हैंः

• हीरो अनुभाग 3 टेक-फॉरवर्ड, आधुनिक लुक के लिए अपने होमपेज हीरो में कण जोड़ें। एक शीर्षक, सबटेक्स्ट और सीटीए बटन के साथ संयोजन करें।
• मूल्य निर्धारण अनुभाग en इसे शेष पृष्ठ से अलग दिखाने के लिए अपनी मूल्य निर्धारण तालिका के पीछे एक सूक्ष्म, कम घनत्व वाले कण प्रभाव का उपयोग करें।
• प्रशंसापत्र क्षेत्र प्रशंसापत्र के पीछे एक सौम्य बर्फ या बुलबुले का प्रभाव सामग्री से ध्यान भटकाए बिना दृश्य रुचि जोड़ता है।
• पाद अनुभाग पृष्ठ के नीचे एक पॉलिश, तैयार नज़र के लिए अपने पाद लेख में कण जोड़ें।
• जल्द ही आने वाले पन्ने एक कण आंदोलन बनाते हैं जो अन्यथा एक स्थिर, एकल-पृष्ठ लेआउट होगा एक बनाने पर हमारी मार्गदर्शिका देखें एलिमेंटर जल्द ही पेज आ रहा है.
• कॉल-टू-एक्शन अनुभाग 0 अपने सीटीए को एनिमेटेड कणों वाले अनुभाग पर रखकर उस पर ध्यान आकर्षित करें।

कणों के लिए प्रदर्शन युक्तियाँ

जावास्क्रिप्ट का उपयोग करके आगंतुक के ब्राउज़र पर कण प्रभाव चलते हैं अपनी साइट को तेजी से रखने के लिएः

• कण गणना सीमित करें। ४०-८० कण आमतौर पर एक अच्छे दृश्य प्रभाव के लिए पर्याप्त होते हैं १५० से ऊपर जाने से पुराने उपकरणों को धीमा कर सकते हैं।
• प्रति पृष्ठ 1-2 अनुभागों पर कणों का उपयोग करें। हर खंड में कणों को न जोड़ें प्रभाव अधिक उपयोग होने पर अपना प्रभाव खो देता है, और यह ओवरहेड प्रसंस्करण जोड़ता है।
• मोबाइल पर टेस्ट। कण प्रभाव फोन पर बैटरी को निकाल सकते हैं कण गणना को कम करने या एलिमेंट की उत्तरदायी दृश्यता सेटिंग्स का उपयोग करके मोबाइल पर प्रभाव को अक्षम करने पर विचार करें।
• सामग्री-भारी पृष्ठों पर कणों से बचें। लंबे ब्लॉग पोस्ट और प्रलेखन पृष्ठों को एनिमेटेड पृष्ठभूमि की आवश्यकता नहीं है लैंडिंग पृष्ठों और प्रमुख वर्गों के लिए कणों को सहेजें।

अधिक प्रदर्शन युक्तियों के लिए, हमारी मार्गदर्शिका पढ़ें एलिमेंट वेबसाइटों को कैसे गति दें.

अन्य तत्व पृष्ठभूमि प्रभाव

कण मास्टर एडॉन्स में उपलब्ध कई एलिमेंटर पृष्ठभूमि प्रभावों में से एक हैं इन संबंधित एक्सटेंशन की जाँच करेंः

• एनिमेटेड ग्रेडिएंट पृष्ठभूमि (प्रो): चिकने रंग ग्रेडिएंट जो लगातार बदलते रहते हैं
• पृष्ठभूमि स्लाइडर: संक्रमण प्रभाव के साथ कई पृष्ठभूमि छवियों के माध्यम से चक्र
• रिलैक्स (पैरालैक्स) (प्रो): गहराई की भावना के लिए लंबन स्क्रॉलिंग
• प्रकट करना (प्रो): जब अनुभाग दृश्य में स्क्रॉल करें तो एनिमेशन प्रकट करें

ये सभी शामिल हैं मास्टर ऐडऑन के 80+ विजेट और एक्सटेंशन.

अक्सर पूछे जाने वाले प्रश्न

क्या मास्टर ऐडऑन में कण पृष्ठभूमि प्रभाव मुक्त है?

हाँ। द कण विस्तार पार्टिकल JSON फ़ील्ड सहित मुफ़्त है, इसलिए आप प्रो लाइसेंस के बिना पार्टिकल्स।js जनरेटर से कोई भी कॉन्फ़िगरेशन पेस्ट कर सकते हैं।

क्या कण एलिमेंट कंटेनर के साथ काम करते हैं?

हाँ। मास्टर एडॉन्स पार्टिकल्स एक्सटेंशन पुराने एलिमेंटर सेक्शन और नए फ्लेक्सबॉक्स कंटेनर दोनों के साथ काम करता है। इसे किसी भी कंटेनर के स्टाइल टैब से उसी तरह सक्षम करें।

क्या कण मेरी वेबसाइट को धीमा कर देंगे?

जावास्क्रिप्ट का उपयोग करके ब्राउज़र में कण चलते हैं, इसलिए वे क्लाइंट साइड पर कुछ प्रोसेसिंग ओवरहेड जोड़ते हैं ४०-८० कणों के साथ, आधुनिक उपकरणों पर प्रभाव न्यूनतम होता है १५० से अधिक कणों का उपयोग करने से बचें या एक ही पृष्ठ पर कई वर्गों में प्रभाव जोड़ने से बचें कण।जेएस लाइब्रेरी हल्के (लगभग २५ केबी) है, इसलिए पृष्ठ लोड पर फ़ाइल आकार प्रभाव नगण्य है।

क्या मैं अपने ब्रांड से मेल खाने के लिए कण का रंग बदल सकता हूँ?

हाँ कण रंग, आकार, आकार, गति, अस्पष्टता, और अधिक बदलने के लिए कण।जेएस दृश्य विन्यासकर्ता (विस्तार सेटिंग्स से जुड़ा हुआ) का उपयोग करें आप कणों और कनेक्टिंग लाइनों के लिए स्वतंत्र रूप से कोई हेक्स रंग मान सेट कर सकते हैं।

मैं मोबाइल पर कणों को कैसे अक्षम करूं?

आप मोबाइल उपकरणों पर कणों के अनुभाग को छिपाने के लिए एलिमेंटर की अंतर्निहित उत्तरदायी दृश्यता सेटिंग्स का उपयोग कर सकते हैं वैकल्पिक रूप से, कणों के बिना एक अलग मोबाइल-अनुकूलित अनुभाग बनाएं यह फोन और टैबलेट पर बैटरी और प्रसंस्करण शक्ति बचाता है।

अपनी एलिमेंटर साइट पर कण जोड़ना शुरू करें

एक एलिमेंटर कणों की पृष्ठभूमि जोड़ने में मास्टर एडॉन्स के साथ बस कुछ ही क्लिक लगते हैं। त्वरित सेटअप के लिए नासा, बबल या स्नो जैसे जनरेटर प्रीसेट से शुरू करें, या पूर्ण नियंत्रण के लिए कणों।js कॉन्फिगरेटर के साथ अपना स्वयं का कस्टम प्रभाव बनाएं।

कुंजी रणनीतिक रूप से कणों का उपयोग करना है एक या दो उच्च प्रभाव वाले वर्गों को चुनें, एक अंधेरे पृष्ठभूमि चुनें, और कण गिनती उचित रखें यह सब एक स्थिर पृष्ठ को कुछ ऐसा करने के लिए लेता है जो जीवित महसूस करता है।

इसे आजमाने के लिए तैयार हैं? एलिमेंट के लिए मास्टर ऐडऑन डाउनलोड करें और 5 मिनट से कम समय में अपना पहला कण पृष्ठभूमि जोड़ें।