एलिमेंटर एनिमेटेड ग्रेडिएंट बैकग्राउंड (प्रो): मूविंग ग्रेडिएंट सेक्शन
एनिमेटेड ग्रेडियेंट बीजी एक मास्टर एडॉन्स प्रो एक्सटेंशन है जो कंटेनर, सेक्शन या कॉलम के पीछे धीरे-धीरे चलती रैखिक ढाल डालता है आप दो या दो से अधिक रंग, कोण, अवधि और सहजता चुनते हैं, और ढाल बिना किसी छवि या वीडियो फ़ाइल के लूप में आगे और पीछे बहती है यह अक्सर हीरो सेक्शन, कॉल-टू-एक्शन बैंड और जल्द ही आने वाले पृष्ठों के लिए उपयोग किया जाता है पृष्ठभूमि के बजाय ढाल-रंगीन पाठ के लिए, मुफ्त का प्रयास करें ग्रेडिएंट हेडलाइन विजेट।
दो या अधिक रंग, एक गतिशील ग्रेडिएंट
में रंग जोड़ें रंग सूची, प्रति रंग एक पंक्ति विस्तार को कम से कम दो की आवश्यकता होती है यह उन्हें एक रैखिक ढाल में समान रूप से रिक्त करता है और अंत में पहले रंग को दोहराता है, इसलिए लूप में कोई कठोर किनारा नहीं है रंग स्टॉप पदों या रेडियल ग्रेडिएंट के लिए कोई सेटिंग नहीं है संपादक पूर्वावलोकन अपडेट करता है जैसा कि आप रंग चुनते हैं।
- रंग सूचीः पंक्तियों को जोड़ें, डुप्लिकेट करें या हटाएं दो से चार रंग आमतौर पर सबसे अच्छा पढ़ते हैं।
- पारदर्शी रंगः ढाल अनुभाग की सामान्य पृष्ठभूमि के ऊपर अपनी परत पर बैठता है, इसलिए पारदर्शिता के साथ रंग पृष्ठभूमि छवि को दिखाने देते हैं।
- यह कहां काम करता हैः कंटेनर, अनुभाग और कॉलम, स्टाइल टैब में विजेट पैनल नहीं मिलता है।
कोण, अवधि और सहजता
कोण डिफ़ॉल्ट के रूप में -45 के साथ, ग्रेडिएंट की दिशा -45 से 180 डिग्री तक सेट करता है। कुल एनीमेशन अवधि (सेकंड) १ से २० तक चलता है और ६ तक डिफ़ॉल्ट होता है यह वह समय है जब ढाल को पार और वापस बहाव में ले जाता है। एनीमेशन प्रभाव सहजता सेट करता है: रैखिक, आसानी, आसानी से अंदर, आसानी से बाहर, आसानी से बाहर, या तीन चिकनी वक्रों में से एक, डिफ़ॉल्ट के रूप में सामग्री डिजाइन (चिकना) के साथ।
- धीमा और सूक्ष्मः १२ से २० सेकंड हीरो टेक्स्ट के पीछे अच्छी तरह से काम करता है।
- हमेशा चालू: लूप तब शुरू होता है जब पेज लोड होता है और इसमें कोई होवर या स्क्रॉल ट्रिगर नहीं होता है।
- संक्रमण चिकनाईः यह स्लाइडर पैनल में दिखाता है, लेकिन यह वर्तमान संस्करण में एनीमेशन को नहीं बदलता है।
एलिमेंटर ग्रेडिएंट बैकग्राउंड बनाम एनिमेटेड ग्रेडिएंट बीजी
एलिमेंट की मुफ्त पृष्ठभूमि सेटिंग में एक ग्रेडिएंट प्रकार है (एलिमेंट ४.२।४ पर जांच की गई), लेकिन ग्रेडिएंट नहीं चलता है आप इसे सीएसएस कीफ्रेम स्वयं लिखकर चेतन कर सकते हैं, या एक्सटेंशन का उपयोग कर सकते हैं।
| फ़ीचर | एलिमेंटर ग्रेडिएंट | हाथ से सीएसएस | एनिमेटेड ग्रेडिएंट बीजी |
|---|---|---|---|
| कीमत | मुक्त | मुक्त | मास्टर एडॉन्स प्रो |
| आंदोलन | स्थैतिक | हाँ, आप कीफ्रेम लिखते हैं | हाँ, में निर्मित |
| रंग | 2, स्टॉप स्थानों के साथ | कोई | २ या अधिक, समान रूप से दूरी |
| ढाल प्रकार | रैखिक या रेडियल | कोई | केवल रैखिक |
| कोण | 0 से 360, प्रति डिवाइस | कोई | -45 से 180 |
| गति और सहजता | नहीं | हाँ | अवधि १ से २० एस, ८ आसान विकल्प |
| में सेट करें | स्टाइल पैनल | कस्टम सीएसएस | स्टाइल पैनल |
अभी भी ढाल के लिए, एलिमेंट की अपनी सेटिंग पर्याप्त है और स्टॉप और ढाल प्रकार पर अधिक नियंत्रण देता है एक्सटेंशन आपको कीफ्रेम लिखने से बचाता है जब आप चाहते हैं कि ढाल स्थानांतरित हो।
संबंधितः ग्रेडिएंट हेडलाइन (निःशुल्क) ग्रेडिएंट टेक्स्ट के लिए, प्लस कणों (मुक्त) और पृष्ठभूमि स्लाइडर अन्य चलती पृष्ठभूमि के लिए (निःशुल्क)।
एलिमेंटर में एनिमेटेड ग्रेडिएंट बैकग्राउंड कैसे जोड़ें
एक बार एक्सटेंशन चालू होने के बाद, पैनल प्रत्येक कंटेनर, अनुभाग और कॉलम के स्टाइल टैब में दिखाई देता है यहां एक विवरण दिया गया है एनिमेटेड ग्रेडिएंट पृष्ठभूमि पर दस्तावेज़ीकरण.
- मास्टर एडॉन्स प्रो सक्रिय होने पर, पर जाएं मास्टर ऐडऑन > एक्सटेंशन और स्विच ऑन करें एनिमेटेड ग्रेडिएंट बीजी.
- एलिमेंटर के साथ अपना पेज संपादित करें और एक कंटेनर, अनुभाग या कॉलम चुनें।
- को खोलें शैली टैब और विस्तार करें एनिमेटेड ग्रेडिएंट पृष्ठभूमि.
- सेट एनिमेटेड ग्रेडिएंट सक्षम करें हाँ करने के लिए। तीन नमूना रंग दिखाई देते हैं।
- में रंग बदलें रंग सूची, फिर सेट करें कोण, कुल एनीमेशन अवधि (सेकंड) और एनीमेशन प्रभाव.
- पृष्ठ को अपडेट करें और जांचें कि आपका पाठ हर रंग के विरुद्ध पठनीय रहता है।
एनिमेटेड ग्रेडिएंट बीजी के लिए अक्सर पूछे जाने वाले प्रश्न
एनिमेटेड ग्रेडिएंट बीजी मुक्त है?
नहीं, यह मास्टर एडॉन्स प्रो का हिस्सा है एलिमेंट की मुफ्त ग्रेडिएंट पृष्ठभूमि स्थिर है, इसलिए एक चलती ढाल को इस एक्सटेंशन या आपके स्वयं के सीएसएस की आवश्यकता होती है।
क्या मैं इसे पृष्ठभूमि छवि पर उपयोग कर सकता हूं?
हाँ ढाल अनुभाग की सामान्य पृष्ठभूमि के ऊपर अपनी परत पर तैयार की जाती है रंग पिकर में कुछ पारदर्शिता के साथ रंग चुनें और पृष्ठभूमि छवि के माध्यम से दिखाता है।
मैं एक एनीमेशन में कितने रंगों का उपयोग कर सकता हूं?
कम से कम दो, और जितने आप उसके बाद जोड़ते हैं रंगों को समान रूप से स्थान दिया जाता है, इसलिए दो से चार आमतौर पर सबसे साफ परिणाम देते हैं।
क्या एनीमेशन हर समय चलता है, या क्या मैं इसे होवर पर चला सकता हूँ?
यह हर समय खेलता है लूप तब शुरू होता है जब पृष्ठ लोड होता है और इसमें कोई होवर या स्क्रॉल ट्रिगर नहीं होता है होवर-केवल प्रभाव के लिए आपको अपने स्वयं के सीएसएस की आवश्यकता होगी, उदाहरण के लिए कस्टम सीएसएस विस्तार।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर
