एक फ्लैट पृष्ठभूमि रंग अपना काम करता है और गायब हो जाता है एक ढाल जो धीरे-धीरे रंगों के बीच बहती है, एक ही छवि को जोड़ने के बिना एक ही खंड को जीवित महसूस करती है एनिमेटेड ग्रेडिएंट बीजी एक्सटेंशन में मास्टर एडॉन्स प्रो किसी भी कंटेनर, अनुभाग या कॉलम में उस प्रभाव को जोड़ता है: अपने रंग चुनें, कोण और गति सेट करें, और पृष्ठभूमि चक्र अपने आप उनके माध्यम से।
यहाँ एक लाइव पेज पर चल रहा प्रभाव है अनुभाग अपने रंग सेट के माध्यम से बदलता है जबकि सामग्री रखी रहती हैः
एनिमेटेड ग्रेडिएंट बीजी एक्सटेंशन क्या करता है #
एक बार सक्षम होने पर, कंटेनर, अनुभाग और कॉलम को एक मिलता है एनिमेटेड ग्रेडिएंट पृष्ठभूमि पैनल उनके में शैली टैब, सामान्य पृष्ठभूमि अनुभाग के ठीक नीचे आप इसे दो या दो से अधिक रंगों के साथ लोड करते हैं, और एक्सटेंशन एक ढाल प्रस्तुत करता है जो एक लूप में उनके बीच एनिमेट करता है कोण, कुल चक्र समय और सहजता सेट करने के लिए आपका है।
एक छोटी स्क्रिप्ट सामग्री के पीछे एक ग्रेडिएंट परत जोड़ती है और इसे सीएसएस के साथ एनिमेट करती है, इसलिए होस्ट करने के लिए कोई वीडियो या संपीड़ित करने के लिए छवि नहीं होती है, और शीर्ष पर पाठ चयन योग्य रहता है।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया है का पालन करें स्थापना गाइड पहले।
- एक मास्टर एडॉन्स प्रो लाइसेंस, क्योंकि एनिमेटेड ग्रेडिएंट बीजी एक प्रो एक्सटेंशन है।
एनिमेटेड ग्रेडिएंट बीजी एक्सटेंशन को कैसे सक्षम करें #
अपने वर्डप्रेस डैशबोर्ड से, पर जाएं मास्टर ऐडऑन और खोलो एक्सटेंशन टैब। एनिमेटेड ग्रेडिएंट बीजी बैठता है एनीमेशन विजेट समूह, कण और पृष्ठभूमि स्लाइडर के बगल में इसके टॉगल पर क्लिक करें ताकि यह बैंगनी हो जाए, फिर हिट करें परिवर्तन सहेजें और हरे रंग की प्रतीक्षा करें “सेटिंग्स सफलतापूर्वक सहेजी गई” नोटिस।
एक अनुभाग पर ढाल सेट करें #
एलिमेंटर संपादक में कंटेनर या अनुभाग का चयन करें और खोलें शैली टैब। द एनिमेटेड ग्रेडिएंट पृष्ठभूमि बैंगनी एमए बैज के साथ अनुभाग पृष्ठभूमि के ठीक नीचे बैठता है फ्लिप एनिमेटेड ग्रेडिएंट सक्षम करें हाँ, और जब कैनवास प्रभाव का लाइव पूर्वावलोकन करता है तो नियंत्रण दिखाई देते हैं।
- एनिमेशन प्रभावः रंग आंदोलन को आसान बनाना, डेमो में आसानी।
- कोण: विकर्ण स्वीप के लिए डेमो में ग्रेडिएंट की दिशा, -45।
- कुल एनीमेशन अवधि (सेकंड): समय ढाल भर में और वापस बहाव के लिए लेता है डेमो ६ सेकंड का उपयोग करता है।
- संक्रमण चिकनाई (सेकंड): ३ के डिफ़ॉल्ट के साथ पैनल में दिखाया गया है, लेकिन वर्तमान संस्करण में यह एनीमेशन नहीं बदलता है इसके बजाय महसूस को समायोजित करने के लिए अवधि और एनीमेशन प्रभाव का उपयोग करें।
- रंग: ढाल को पकड़े हुए एक पुनरावर्तक बंद हो जाता है क्लिक करें आइटम जोड़ें किसी अन्य रंग के लिए, या X को गिराने के लिए।
रंगों को उठाओ #
रंग सूची में प्रत्येक पंक्ति एक मानक पिकर खोलती है डेमो एक सियान, बैंगनी और नारंगी सेट के साथ शुरू होता है, फिर स्वैप अंदर और बाहर बंद हो जाता है: एक को हटा दें और लूप कस जाता है, एक गहरा नीला (# ३ डी ६ सीडी ६) जोड़ें और चक्र इसे तुरंत उठाता है लाइव पूर्वावलोकन इसे मजेदार हिस्सा बनाता है; आप अनुभाग के मूड को हर स्टॉप के साथ बदलते हुए देखते हैं जिसे आप छूते हैं।
एक ही तापमान रेंज में दो या तीन रंग सुरुचिपूर्ण के रूप में पढ़ते हैं पूरे पहिया में पांच रंग स्क्रीनसेवर के रूप में पढ़ते हैं छोटे से शुरू करें।
पेज पर रिजल्ट #
प्रकाशित करें और अनुभाग को अपने रंगों के माध्यम से सांस देखें, जैसा कि इस पृष्ठ के शीर्ष पर जीआईएफ में है पूर्ण चक्र जो कुछ भी आप अवधि के रूप में सेट करते हैं, फिर लूप बटन, हेडिंग और छवियां शीर्ष पर अप्रभावित बैठती हैं।
एक व्यावहारिक नोट: डार्क टेक्स्ट लाइट ग्रेडिएंट स्टॉप पर पठनीय रहता है लेकिन संतृप्त लोगों पर गायब हो सकता है सेट में हर रंग के खिलाफ अपनी हेडलाइन की जांच करें, न कि केवल पहले फ्रेम।
जहां एनिमेटेड ग्रेडिएंट अच्छी तरह से काम करते हैं #
- हीरो अनुभाग। भारी पृष्ठभूमि वीडियो के बिना तह के ऊपर गति।
- कॉल-टू-एक्शन बैंड। एक शिफ्टिंग बैकड्रॉप आंख को उस पर लगे बटन की ओर खींचता है।
- जल्द ही आ रहा है और लैंडिंग पृष्ठ। एक पूर्ण-स्क्रीन ग्रेडिएंट अपने आप में एक विरल पृष्ठ रखता है।
- पोर्टफोलियो और एजेंसी साइटें। ब्रांड रंग हेडर के माध्यम से साइकिल चलाना, स्टॉक वीडियो के लिए भुगतान किए बिना।
- मूल्य निर्धारण अनुभाग। हाइलाइट की गई योजना के पीछे एक सूक्ष्म ढाल इसे बाकी हिस्सों से अलग करती है।
वीडियो ट्यूटोरियल #
विस्तार को सक्षम करने से लेकर तैयार चलती पृष्ठभूमि तक, खरोंच से निर्मित ग्रेडिएंट को देखें।
अक्सर पूछे जाने वाले प्रश्न #
मैं एलिमेंट में एनिमेटेड ग्रेडिएंट बैकग्राउंड कैसे जोड़ूं?
मास्टर एडॉन्स एक्सटेंशन टैब में एनिमेटेड ग्रेडिएंट बीजी एक्सटेंशन सक्षम करें, एक कंटेनर, अनुभाग या कॉलम चुनें और स्टाइल टैब खोलें एनिमेटेड ग्रेडिएंट बैकग्राउंड पैनल में एनिमेटेड ग्रेडिएंट सक्षम करें चालू करें, दो या अधिक रंग जोड़ें, और पृष्ठभूमि तुरंत साइकिल चलाना शुरू कर देती है।
ग्रेडिएंट कितने रंगों का उपयोग कर सकता है?
जितने आप रंग पुनरावर्तक में जोड़ते हैं प्रत्येक जोड़ें आइटम क्लिक एक और ढाल स्टॉप बनाता है, और उन सभी के माध्यम से एनीमेशन चक्र आपके द्वारा निर्धारित कुल अवधि के भीतर दो से चार रंग अधिकांश डिजाइनों को कवर करते हैं।
क्या मैं ग्रेडिएंट एनीमेशन की गति को नियंत्रित कर सकता हूँ?
हाँ। कुल एनीमेशन अवधि सेट करती है कि एक पूर्ण चक्र में 1 से 20 तक कितने सेकंड लगते हैं, और एनीमेशन प्रभाव सहजता सेट करता है। ट्रांज़िशन स्मूथनेस स्लाइडर वर्तमान संस्करण में एनीमेशन को प्रभावित नहीं करता है।
क्या एनिमेटेड ग्रेडिएंट मेरे पेज को धीमा कर देता है?
प्रभाव एक सीएसएस एनीमेशन है जो एक वीडियो या छवि फ़ाइल के बजाय एक छोटी स्क्रिप्ट द्वारा स्थापित किया गया है, इसलिए डाउनलोड करने के लिए बहुत कम अतिरिक्त है यह एक हीरो अनुभाग में गति डालने के हल्के तरीकों में से एक है।
क्या एनिमेटेड ग्रेडिएंट बीजी एक्सटेंशन मुफ़्त है?
नहीं एनिमेटेड ग्रेडिएंट बीजी मास्टर एडॉन्स में एक प्रो एक्सटेंशन है एलिमेंटर में एक मुफ्त ग्रेडिएंट पृष्ठभूमि प्रकार है, लेकिन वह ग्रेडिएंट नहीं चलता है।
लपेटकर #
द एनिमेटेड ग्रेडिएंट बीजी एक्सटेंशन एक अनुभाग पृष्ठभूमि को धीमी गति से चलने वाले रंग में बदल देता है: एक रंग सूची, एक कोण, एक अवधि और एक सहजता पैलेट को तंग रखें, हर स्टॉप के खिलाफ पाठ विपरीत की जांच करें, और अनुभाग शून्य परिसंपत्ति वजन के साथ गति के साथ अच्छी तरह से जोड़ता है प्रवेश एनिमेशन एक्सटेंशन चलती पृष्ठभूमि पर आने वाली सामग्री के लिए, निःशुल्क ग्रेडिएंट हेडलाइन विजेट में ग्रेडिएंट टेक्स्ट और का पूरा सेट शामिल है मास्टर ऐडऑन विजेट और एक्सटेंशन एक पेज दूर है।
