वर्डप्रेस 2024 में इमेज होवर इफेक्ट्स कैसे जोड़ें? [पालन करने योग्य 4 सर्वोत्तम चरण]

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

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

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

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

होवर प्रभाव कस्टम कोड द्वारा जोड़े जा सकते हैं। हालाँकि, यदि आप एक अनुभवी कोडर नहीं हैं, तो यह समय लेने वाला और कभी-कभी खतरनाक प्रयास हो सकता है।

हालाँकि, प्लगइन का उपयोग करते समय चीजें काफ़ी कम जटिल हो जाती हैं।

RSI मुफ़्त बीवर बिल्डर वर्डप्रेस प्लगइन पूरी तरह कार्यात्मक और सौंदर्य की दृष्टि से मनभावन वर्डप्रेस साइट बनाने की प्रक्रिया को सरल बनाता है।

मॉड्यूलर सीएसएस से सहज ज्ञान युक्त तक खींचें और छोड़ें पृष्ठ संपादक, सब कुछ डेवलपर को ध्यान में रखकर डिज़ाइन किया गया है।

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

यह भी सुझाव दिया जाता है कि आप हमारे बीवर बिल्डर थीम का उपयोग करें। पेजों सहित विभिन्न प्रकार के पोस्ट जल्दी से बनाने के लिए वर्डप्रेस पोस्ट टेम्प्लेट का उपयोग करें।

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

चरण 1: एक फोटो मॉड्यूल जोड़ना

शुरू करने से पहले, बीवर बिल्डर प्लगइन सक्रिय करें। फिर वर्डप्रेस एडमिन में पेज पर जाएं। एक नया पेज बनाकर या किसी मौजूदा को चुनकर संपादक को सक्रिय करें।

फिर ऊपर दाईं ओर प्लस चिह्न पर क्लिक करें। आप एक फोटो मॉड्यूल जोड़ेंगे. ड्रैग-एंड-ड्रॉप आपको इस मॉड्यूल को तेजी से स्थिति में लाने की अनुमति देता है।

चरण 2: फोटो मॉड्यूल सक्रिय करें

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

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

चरण 3: एक कस्टम क्लास जोड़ें

चित्र मॉड्यूल सेटअप के बाद, उन्नत का चयन करें। यह है HTML तत्व.

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

चरण 4: सीएसएस प्रभाव को एकीकृत करें

अंत में, अपनी साइट पर होवर सीएसएस जोड़ें। हमारे ज्ञानकोष में होवर सीएसएस है। होवर प्रभाव के बीच का समय 0.3 सेकंड है। या जब आप सीएसएस सबमिट करते हैं। आप संक्रमण को तेज़ या धीमा कर सकते हैं.

बाएं टाइटल बार से ग्लोबल सेटिंग्स चुनें। अब CSS कोड को CSS टैग में जोड़ें।

प्रत्येक बीवर बिल्डर पेज पर टूल्स > ग्लोबल सेटिंग्स पर जाएं और इसे सेव करें। साथ ही, गैर-बीवर बिल्डर सामग्री आपके सीएसएस नियमों के अधीन है।

लेआउटसीएसएस और जेस्क्रिप्ट में एक पेज। अपने सीएसएस संशोधनों को सहेजें। परीक्षण के लिए छवि पर पहला होवर ईएफएफ माउस देखें।

प्रभाव को तस्वीरों की एक पंक्ति या स्तंभ पर लागू करें।

त्वरित सम्पक:

• अपनी वर्डप्रेस साइट के लिए कलर पैलेट कैसे बनाएं?
• वर्डप्रेस में मेंटेनेंस मोड पेज कैसे बनाएं?
• वर्डप्रेस में कस्टम 404 एरर पेज कैसे बनाएं?
• ग्राहक संचार को प्रभावी ढंग से कैसे प्रबंधित करें?

निष्कर्ष: वर्डप्रेस में इमेज होवर इफेक्ट्स कैसे जोड़ें?

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

क्या आपके पास कोई पसंदीदा होवर प्रभाव है जिसका आप उपयोग करना चाहते हैं? इसे नीचे टिप्पणी क्षेत्र में रखें!