वर्डप्रेस में इमेज होवर इफेक्ट कैसे जोड़ें (5 आसान तरीके)

अपनी वेबसाइट पर होवर इफ़ेक्ट जोड़ना भले ही एक छोटी सी बात लगे, लेकिन इससे साइट की दिखावट और उपयोगिता में काफ़ी सुधार हो सकता है। जब विज़िटर किसी इमेज या बटन पर माउस ले जाते हैं और उसमें हल्का सा बदलाव देखते हैं, तो यह संकेत मिलता है कि वह एलिमेंट इंटरैक्टिव है।. 

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

वर्डप्रेस में इमेज होवर इफ़ेक्ट जोड़ने के कई तरीके हैं, साधारण फ़ेड से लेकर आकर्षक फ़्लिप एनिमेशन तक। नीचे, आपको शुरुआत करने के लिए कई तरीके मिलेंगे!

वर्डप्रेस में इमेज होवर इफेक्ट कैसे जोड़ें

इस लेख में, हमने आपकी वेबसाइट पर होवर इफ़ेक्ट जोड़ने के पाँच आसान तरीके बताए हैं। इनमें से जो तरीका आपके लिए सबसे उपयुक्त हो, उसे चुनें!

विधि 1: प्लगइन का उपयोग करना

एक प्लगइन आपका काफी समय और मेहनत बचाएगा, खासकर यदि आप एक ही साइट पर कई होवर इफेक्ट्स का उपयोग करना चाहते हैं।

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

Image Hover Effects Ultimate जैसे प्लगइन का उपयोग करने से यह प्रक्रिया बहुत आसान हो जाती है। यह प्लगइन सभी के लिए निःशुल्क है और प्रत्येक एलिमेंट के लिए कई प्रकार के प्रभाव प्रदान करता है। शुरुआत करने के लिए, नीचे दिए गए ट्यूटोरियल का पालन करके इसे इंस्टॉल करें: 

प्लगइन इंस्टॉल करना

• अपना वर्डप्रेस एडमिन एरिया खोलें।.
• साइडबार में प्लगइन्स से ऐड प्लगइन पर क्लिक करें

• सर्च बार में Image Hover Effects Ultimate टाइप करें

• पहला परिणाम चुनें और डाउनलोड शुरू करने के लिए ' अभी इंस्टॉल करें'
• एक बार इंस्टॉलेशन पूरा हो जाने पर, प्लगइन का उपयोग शुरू करने के लिए एक्टिवेट

इमेज होवर इफेक्ट्स वर्डप्रेस प्लगइन का उपयोग करना

• प्लगइन इंस्टॉल हो जाने के बाद, आपको अपने डैशबोर्ड में इमेज होवर

• प्लगइन सेटिंग्स खोलने के लिए मेनू पर क्लिक करें।. 

• आप अपनी पसंद के कोई भी प्रभाव चुन सकते हैं। इस ट्यूटोरियल के लिए, हम इमेज मैग्नीफायर ।
• इफेक्ट चुनने के बाद, आपको कई तरह की एनिमेशन शैलियाँ दिखाई देंगी।.

जब आपको कोई स्टाइल पसंद आ जाए, तो क्रिएट स्टाइल पर ।

• एक पॉप-अप विंडो खुलेगी। नाम वाले फ़ील्ड में शीर्षक दर्ज करें और लेआउट से कोई इफ़ेक्ट चुनें (पहला, दूसरा या तीसरा)। फिर आगे बढ़ने के लिए सेव पर
• आपको एक नए पेज पर ले जाया जाएगा जहाँ आप ऊँचाई, चौड़ाई और अपारदर्शिता जैसी सेटिंग्स को अपनी आवश्यकतानुसार बदल सकते हैं। अलग-अलग सेटिंग्स आज़माकर देखें कि कौन सी सेटिंग सबसे अच्छी लगती है।.

• जब आप सेटिंग्स से संतुष्ट हो जाएं, तो अपनी छवि को अनुकूलित करने के लिए एडिट पर

• एक और पॉप-अप विंडो खुलेगी। यहाँ आप आवर्धन की स्थिति को अपनी आवश्यकतानुसार समायोजित कर सकते हैं।. 

• 'छवि चुनें' बटन पर क्लिक करके छवि को बदल भी सकते हैं
• सब कुछ सेट करने के बाद, अपने होवर इफ़ेक्ट को सेव करने के लिए सबमिट पर

• अपनी साइट पर यह प्रभाव लागू करने के लिए, शॉर्टकोड को कॉपी करके अपने पोस्ट या पेज में पेस्ट करें।. 

• अब आपका सरल इमेज होवर इफेक्ट आपकी साइट के किसी भी हिस्से में उपयोग के लिए तैयार है।. 

विधि 2: सीएसएस का उपयोग करना

इस विधि के लिए आपको किसी प्लगइन को इंस्टॉल करने की आवश्यकता नहीं है। कस्टम सीएसएस का उपयोग करके, आप अपनी थीम में विभिन्न होवर प्रभाव जोड़ सकते हैं।.

हम एक सरल चीज़ से शुरुआत करेंगे, जैसे कि अंडरलाइन होवर इफ़ेक्ट। यदि आप इस इफ़ेक्ट को अपनी थीम में जोड़ना चाहते हैं, तो नीचे दिए गए आसान चरणों का पालन करें:

• उस पोस्ट पर जाएं जहां आप होवर इफ़ेक्ट जोड़ना चाहते हैं।.
• + कवर ब्लॉक पर क्लिक करके एक छवि जोड़ें ।

• कवर में अपनी सामग्री दर्ज करें । यहां हम एक शीर्षक और एक बटन जोड़ेंगे।

• अपनी पसंद के अनुसार फ़ॉन्ट और स्टाइल सेट करें।.
• इस पेज को ड्राफ्ट के रूप में सेव करें।.
• अपने डैशबोर्ड में अपीयरेंस पर जाएं

• फिर, कस्टमाइज़ पर और एडिशनल सीएसएस । निम्नलिखित कोड जोड़ें:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• कोड को सेव करने के लिए पब्लिश पर क्लिक करें

• अब अपनी पोस्ट पर वापस जाएं और उस टेक्स्ट को चुनें जिस पर आप अंडरलाइन प्रभाव लागू करना चाहते हैं।.
• ब्लॉक साइडबार में एडवांस्ड खोलें एडिशनल सीएसएस क्लास(es) फ़ील्ड में underline-hover

• पेज को सेव करें और प्रभाव देखने के लिए उसका प्रीव्यू देखें।. 

चुनने के लिए बहुत सारे होवर इफेक्ट्स उपलब्ध हैं, इसलिए वह चुनें जो आपकी शैली के लिए सबसे उपयुक्त हो। आप चाहें तो खुद CSS लिखना सीख सकते हैं या वर्डप्रेस कम्युनिटी से उदाहरण ढूंढ सकते हैं। सब कुछ इंटरनेट पर उपलब्ध है!

विधि 3: पेज बिल्डरों का उपयोग करना (उदाहरण के लिए, एलिमेंटर)

एलिमेंटर जैसे पेज बिल्डर की मदद से आप अपनी वेबसाइट को बेहद रचनात्मकता के साथ बना सकते हैं। इसमें पहले से ही होवर इफेक्ट्स मौजूद हैं, जिनका इस्तेमाल करके आप बिना किसी कोडिंग के अपनी साइट को और भी आकर्षक बना सकते हैं।.

आप इसका उपयोग वर्डप्रेस में इमेज होवर इफेक्ट बनाने के लिए भी कर सकते हैं। इस सेक्शन में, हम पेज बिल्डर के भीतर मौजूद बिल्ट-इन होवर इफेक्ट्स के साथ प्रयोग करेंगे।.

इफेक्ट्स सेट करने के लिए:

• एडमिन डैशबोर्ड से एलिमेंटर खोलें
• अपनी तस्वीर जोड़ें।.

• अपनी इमेज चुनें, फिर स्टाइल टैब पर जाएं।
• नीचे स्क्रॉल करें और होवर पर ।

• होवर एनिमेशन में , आपको कई तरह के रेडी-टू-यूज़ इफेक्ट्स मिलेंगे।

• यहां हमने ग्रो इफ़ेक्ट को उदाहरण के तौर पर चुना है। आप अपनी साइट के डिज़ाइन के अनुसार ट्रांज़िशन की अवधि, अपारदर्शिता और अन्य सेटिंग्स को कस्टमाइज़ कर सकते हैं।

• जब आप काम पूरा कर लेंगे, तो आपको इसका प्रभाव तुरंत देखने को मिलेगा, इसके लिए आपको पहले से देखने की आवश्यकता नहीं होगी।. 

विधि 4: फ्लिपबॉक्स प्लगइन्स का उपयोग करना

अगर आप कोई आसान तरीका ढूंढ रहे हैं, तो आप फ्लिपबॉक्स प्लगइन इंस्टॉल कर सकते हैं। फ्लिपबॉक्स इफ़ेक्ट में, जब आप किसी इमेज पर माउस ले जाते हैं, तो वह पलटकर उसके आगे या पीछे की सामग्री को दिखाती है।.

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

• अपने वर्डप्रेस डैशबोर्ड से, प्लगइन्स मेनू पर क्लिक करें। फिर, ऐड प्लगइन ।
• सर्च बार में Flipbox टाइप करें

• इंस्टॉल नाउ पर क्लिक करें , फिर प्लगइन को एक्टिवेट करें

• फ्लिपबॉक्स बनाने के लिए, फ्लिप बॉक्स मेनू पर जाएं और क्रिएट न्यू पर ।
• अपनी पसंद के एनिमेशन चुनें। एक बार एनिमेशन मिल जाने पर, क्रिएट स्टाइल पर ।

• एक पॉप-अप विंडो खुलेगी। वांछित लेआउट (पहला, दूसरा या तीसरा) चुनें और एक शीर्षक दर्ज करें।. 

• जारी रखने के लिए सेव पर क्लिक करें
• इसके बाद, आपको कस्टमाइज़ेशन मेनू पर ले जाया जाएगा जहाँ आप प्रभाव सेट कर सकते हैं और अपनी सामग्री जोड़ सकते हैं।.

• प्रीव्यू टैब ढूंढने के लिए नीचे स्क्रॉल करें फ्लिपबॉक्स के आगे और पीछे दोनों तरफ की सामग्री को अनुकूलित करने के लिए एडिट पर

• जब आप काम पूरा कर लें, तो इसे सेव करने के लिए सबमिट पर

• इस फ्लिपबॉक्स को अपने पेज पर जोड़ने के लिए, बस जेनरेट किए गए शॉर्टकोड को कॉपी करें और अपनी साइट के किसी भी सेक्शन में पेस्ट करें।. 

• और बस, ये रहा तैयार उत्पाद! 

विधि 5: गुटेनबर्ग ब्लॉक का उपयोग करना

गुटेनबर्ग वर्डप्रेस का डिफ़ॉल्ट ब्लॉक एडिटर है जो आपको एडिटर के भीतर ही होवर इफ़ेक्ट जोड़ने की सुविधा देता है।.

हालांकि इसमें उन्नत होवर इफेक्ट्स की सुविधा नहीं है, लेकिन आप कस्टम सीएसएस का उपयोग करके एनिमेशन को बेहतर बना सकते हैं।.

उदाहरण के तौर पर, आइए माउस को होवर करने पर एक साधारण फ़ेड इफ़ेक्ट बनाते हैं। यहाँ चरण-दर-चरण ट्यूटोरियल दिया गया है:

• उस पोस्ट या पेज पर जाएं जहां आप होवर इफ़ेक्ट जोड़ना चाहते हैं।.
• नया ब्लॉक जोड़ने के लिए + पर क्लिक करें कवर ब्लॉक चुनें।

• कवर के अंदर , एक पैराग्राफ ब्लॉक जोड़ें।

• अपना शीर्षक और संक्षिप्त विवरण दर्ज करें।.
• आवश्यकतानुसार फ़ॉन्ट का आकार, अपारदर्शिता, संरेखण और रंग को अनुकूलित करें।.

• फिर कस्टम सीएसएस क्लास जोड़ने के लिए कवर
• दाईं ओर स्थित साइडबार में एडवांस्ड खोलें
• Additional CSS Class फ़ील्ड में fade-hover-effect दर्ज करें ।

• उसके बाद, पेज को ड्राफ्ट के रूप में सेव कर लें।.

• प्लगइन पर जाएं और अपना कोड स्निपेट प्लगइन चुनें। इस उदाहरण में, हम WPCode का ।
• एक नया CSS स्निपेट बनाएं, फिर उसमें निम्नलिखित कोड पेस्ट करें:

.fade-hover-effect { अपारदर्शिता: 0; रूपांतरण: translateY(10px); संक्रमण: अपारदर्शिता 0.4s सहजता, रूपांतरण 0.4s सहजता; } .fade-hover-effect:hover { अपारदर्शिता: 1; रूपांतरण: translateY(0); } 

• स्निपेट को सेव करें और उसे एक्टिवेट करें।.
• अब, होवर फेड इफ़ेक्ट को देखने के लिए अपने पेज का प्रीव्यू करें।.

किसी भी ब्लॉक या इमेज में fade-hover-effect क्लास जोड़कर आप इस प्रभाव का पुनः उपयोग कर सकते हैं। लेकिन यदि आप बहुत सारी इमेज के साथ काम कर रहे हैं, तो WP Media Folder । इससे संबंधित सामग्री को ढूंढना और पुनः उपयोग करना आसान हो जाता है।

क्या बहुत अधिक इफेक्ट्स का उपयोग करने से परफॉर्मेंस पर असर पड़ता है?

जी हां, वेबसाइट पर बहुत सारे होवर इफेक्ट्स का इस्तेमाल करने से परफॉर्मेंस पर असर पड़ सकता है, खासकर अगर उन्हें ठीक से ऑप्टिमाइज़ न किया गया हो। ऐसा इसलिए है क्योंकि कुछ होवर इफेक्ट्स के लिए अतिरिक्त CSS की आवश्यकता होती है। आपकी वेबसाइट के CSS का आकार बढ़ सकता है और पेज लोड होने में समय लग सकता है।.

उपयोगकर्ता अनुभव को बेहतर बनाने के लिए केवल आवश्यक होवर इफेक्ट्स का उपयोग करना ही सबसे अच्छा है, ताकि आपकी साइट पर बहुत अधिक प्रभाव न पड़े।.

लपेटें

वर्डप्रेस में इमेज होवर इफेक्ट जोड़ना सीखने से उपयोगकर्ता की सहभागिता बढ़ाकर और उन्हें जोड़े रखकर आपकी साइट को बढ़ावा देने में मदद मिल सकती है।.

प्लगइन्स, कस्टम CSS या पेज बिल्डर के ज़रिए होवर इफ़ेक्ट जोड़ने के कई तरीके हैं, जिससे आप अपनी ज़रूरत के हिसाब से सबसे अच्छा तरीका चुन सकते हैं। अलग-अलग स्टाइल आज़माकर देखें और अपनी साइट के लिए सबसे उपयुक्त स्टाइल चुनें!