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

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

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

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

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

इस लेख में, हमने अपनी साइट पर होवर प्रभाव जोड़ने के पांच आसान तरीके इकट्ठे किए हैं। चुनें कि आपके लिए कौन सा सबसे अच्छा काम करता है!

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

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

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

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

एक प्लगइन स्थापित करना

• अपने वर्डप्रेस एडमिन क्षेत्र को खोलें।.
• क्लिक करें प्लगइन जोड़ें साइडबार में प्लगइन्स मेनू से।

• सर्च बार में इमेज होवर इफेक्ट्स अल्टीमेट टाइप करें।

• पहले परिणाम का चयन करें और क्लिक करें अब स्थापित करें डाउनलोड शुरू करने के लिए।
• स्थापना पूर्ण होने के बाद, सक्रिय करें बटन पर क्लिक करके प्लगइन का उपयोग शुरू करें।

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

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

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

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

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

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

• जब आप सेटिंग्स से संतुष्ट हों, तो संपादित करें पर क्लिक करके अपनी छवि को कस्टमाइज़ करें।

• एक और पॉप-अप दिखाई देगा। यहाँ आप मैग्नीफिकेशन पोज़िशन को कस्टमाइज़ कर सकते हैं।. 

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

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

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

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

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

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

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

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

• अपनी पसंद के अनुसार फ़ॉन्ट और शैलियाँ सेट करें।.
• पृष्ठ को ड्राफ्ट के रूप में सहेजें।.
• अगला, अपने डैशबोर्ड में दिखावट मेनू पर जाएं।

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

बॉडी { डिस्प्ले: फ्लेक्स; जस्टिफाई-कंटेंट: सेंटर; अलाइन-आइटम: सेंटर; हाइट: 100vh; बैकग्राउंड: #0f0f0f; मार्जिन: 0; फॉन्ट-फैमिली: एरियल, सैंस-सेरिफ; } .होवर-अंडरलाइन { फॉन्ट-साइज: 2rem; रंग: #ffffff; पोजीशन: रिलेटिव; डिस्प्ले: इनलाइन-ब्लॉक; } .होवर-अंडरलाइन::आफ्टर, .होवर-अंडरलाइन::बिफोर { कंटेंट: ''; पोजीशन: एब्सोल्यूट; विड्थ: 100%; हाइट: 2px; बैकग्राउंड: लीनियर-ग्रेडिएंट(दाएं, #ff0000, #00ffff); नीचे: -5px; लेफ्ट: 0; ट्रांसफॉर्म: स्केलएक्स(0); ट्रांसफॉर्म-ओरिजिन: दाएं; ट्रांज़िशन: ट्रांसफॉर्म 0.4s ईज़-आउट; } .होवर-अंडरलाइन::बिफोर { टॉप: -5px; ट्रांसफॉर्म-ओरिजिन: लेफ्ट; } .होवर-अंडरलाइन:hover::आफ्टर, .होवर-अंडरलाइन:hover::बिफोर { ट्रांसफॉर्म: स्केलएक्स(1); }
 

• कोड को सहेजने के लिए प्रकाशित करें पर क्लिक करें।

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

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

चुनने के लिए बहुत सारे होवर प्रभाव हैं, इसलिए अपनी शैली के अनुसार सबसे अच्छा चुनें। आप या तो खुद सीएसएस लिखना सीख सकते हैं या WordPress समुदाय से उदाहरण ढूंढ सकते हैं। यह सब वहाँ है!

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

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

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

प्रभाव सेट करने के लिए:

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

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

• होवर एनिमेशन ड्रॉपडाउन मेनू में, आपको विभिन्न प्रकार के उपयोग के लिए तैयार प्रभाव मिलेंगे।

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

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

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

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

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

• अपने WordPress डैशबोर्ड से, प्लगइन्स मेनू पर क्लिक करें। फिर, प्लगइन जोड़ें चुनें।
• सर्च बार में फ्लिपबॉक्स - अविश्वसनीय फ्लिप बॉक्स इमेज ओवरले टाइप करें।

• अब स्थापित करें पर क्लिक करें, फिर सक्रिय करें प्लगइन को सक्रिय करें।

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

• एक पॉप-अप दिखाई देगा। वांछित लेआउट (1st, 2nd, या 3rd) चुनें और एक शीर्षक दर्ज करें।. 

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

• फ्लिपबॉक्स के आगे और पीछे दोनों के लिए कंटेंट को कस्टमाइज करने के लिए पूर्वावलोकन टैब तक स्क्रॉल करें। संपादित करें पर क्लिक करें।

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

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

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

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

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

हालांकि यह उन्नत होवर प्रभाव प्रदान नहीं कर सकता है, आप कस्टम सीएसएस का उपयोग करके एनिमेशन को बढ़ा सकते हैं।.

उदाहरण के लिए, आइए होवर पर एक सरल फीका प्रभाव बनाएं। यहाँ चरण-दर-चरण ट्यूटोरियल है:

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

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

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

• फिर कवर ब्लॉक चुनें और एक कस्टम सीएसएस वर्ग जोड़ें।
• दाएं साइडबार में उन्नत अनुभाग खोलें।
• फेड-होवर-इफेक्ट को अतिरिक्त सीएसएस क्लास फील्ड में दर्ज करें।

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

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

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• स्निपेट सहेजें और इसे सक्रिय करें।.
• अब, अपने पृष्ठ को पूर्वावलोकन करें और होवर फेड प्रभाव को क्रिया में देखें।.

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

क्या बहुत सारे प्रभावों का उपयोग प्रदर्शन को प्रभावित करता है?

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

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

सारांश

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

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