वर्डप्रेस में एक स्मूथ बैकग्राउंड कलर चेंज इफेक्ट कैसे जोड़ें

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

चिकनी पृष्ठभूमि रंग परिवर्तन प्रभाव क्या है?

चिकनी पृष्ठभूमि रंग परिवर्तन प्रभाव आपको विभिन्न पृष्ठभूमि रंगों के बीच स्वचालित रूप से स्विच करने की अनुमति देता है। अंतिम रंग तक पहुंचने तक धीरे-धीरे अलग-अलग रंगों से गुजरते हुए परिवर्तन होता है। क्या इसका दिखना ऐसा है:

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

WordPress में एक स्मूथ बैकग्राउंड कलर चेंज इफेक्ट जोड़ना

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

इसके बाद, आपको उस सीएसएस वर्ग को लिखना होगा जिसे आप लक्षित करना चाहते हैं। उदाहरण के लिए, ऊपर दिए गए स्क्रीनशॉट में हम नीचे विजेट क्षेत्र को लक्षित करना चाहते हैं जिसमें 'पेज हेडर' सीएसएस वर्ग है। अगले चरण में, आपको अपने कंप्यूटर पर एक सादा पाठ संपादक खोलने और एक नई फ़ाइल बनाने की आवश्यकता है। आपको इस फाइल को अपने डेस्कटॉप पर wpb-background-tutorial.js नाम से सेव करना होगा। फिर आपको अपनी जेएस फ़ाइल में निम्नलिखित कोड जोड़ने की आवश्यकता है: jQuery (फ़ंक्शन ($) {$ ('.पेज-हेडर')। प्रत्येक (फ़ंक्शन () { var $this = $ (this), color = ['# ec008c ', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function() {var color = colours.shift(); color.push(color); $this.animate({backgroundColor: color) } , 2000);}, 4000); }); }); यदि आप इस कोड का अध्ययन करते हैं, तो आप देखेंगे कि हमने उस सीएसएस वर्ग का उपयोग किया है जिसे हम कोड में लक्षित करना चाहते हैं। हमने चार रंग भी जोड़े हैं। हमारा सॉफ्ट बैकग्राउंड इफेक्ट पहले रंग से शुरू होगा, फिर अगले रंग पर जाएगा, और उन रंगों से गुजरना जारी रखेगा। फ़ाइल में अपने परिवर्तनों को सहेजना याद रखें। फिर आपको FTP का उपयोग करके wpb-bg-tutorial.js फ़ाइल को अपने वर्डप्रेस थीम के /js/ फ़ोल्डर में अपलोड करना होगा। यदि आपकी थीम में js फ़ोल्डर नहीं है, तो आपको एक बनाना होगा।

एक बार जब आप अपनी जावास्क्रिप्ट फ़ाइल अपलोड कर लेते हैं, तो इसे वर्डप्रेस पर अपलोड करने का समय आ गया है। आपको अपनी थीम की functions.php फ़ाइल में निम्न कोड जोड़ना होगा। फ़ंक्शन wpb_bg_color_scripts() {wp_enqueue_script('wpb-background-tutorial', get_stylesheet_directory_uri()। '/js/wpb-background-tutorial.js', array('jquery-color'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'wpb_bg_color_scripts'); यह कोड सफलतापूर्वक जावास्क्रिप्ट फ़ाइल और निर्भर jQuery स्क्रिप्ट को लोड करता है जिसकी आपको इस कोड के काम करने के लिए आवश्यकता है। बस इतना ही, अब आप इसे क्रिया में देखने के लिए अपनी वेबसाइट पर जा सकते हैं। आप अपने द्वारा चुने गए क्षेत्र में एक सहज पृष्ठभूमि रंग परिवर्तन के प्रभाव को देखेंगे। उपयोगकर्ता का ध्यान आकर्षित करने या अपनी सामग्री को अलग दिखाने के लिए वर्डप्रेस में पृष्ठभूमि रंगों का उपयोग करने के कई अन्य तरीके हैं। उदाहरण के लिए, आप कोशिश कर सकते हैं: हमें उम्मीद है कि इस लेख ने आपको यह सीखने में मदद की है कि वर्डप्रेस में आसानी से एक सहज पृष्ठभूमि रंग परिवर्तन प्रभाव कैसे जोड़ा जाए। आप कोशिश करने के लिए सर्वश्रेष्ठ वर्डप्रेस पेज बिल्डर प्लगइन्स की हमारी सूची भी देख सकते हैं। अगर आपको यह लेख पसंद आया है, तो कृपया वर्डप्रेस वीडियो ट्यूटोरियल के लिए हमारे YouTube चैनल को सब्सक्राइब करें। आप हमें ट्विटर और फ़ेसबुक पर भी खोज सकते हैं।

मूल रूप से 2021-02-24 06:56:00 पोस्ट किया गया।