एक छवि जो होवर पर एक शीर्षक और कैप्शन को प्रकट करती है, एक फ्लैट गैलरी को कुछ ऐसी चीज़ों में बदल देती है जिसे लोग छूना चाहते हैं छवि होवर प्रभाव विजेट इन एलिमेंट के लिए मास्टर ऐडऑन सीएसएस होवर एनीमेशन में किसी भी छवि को लपेटता है, इसलिए एक शीर्षक, एक विवरण और एक लिंक स्लाइड, फीका, या जब कर्सर उस पर उतरता है तो दृश्य में ज़ूम करता है।
आप नामित प्रभावों में से एक को चुनते हैं, एक छवि में ड्रॉप करते हैं, ओवरले टेक्स्ट जोड़ते हैं, फिर रंगों और फ़िल्टर को स्टाइल करते हैं कोई कस्टम सीएसएस की आवश्यकता नहीं है यह गाइड विजेट में हर सेटिंग को कवर करता है।
इमेज होवर इफेक्ट्स विजेट क्या करता है #
विजेट एक छवि लेता है और शीर्ष पर एक एनिमेटेड ओवरले को छोड़ देता है उस पर होवर करें और यह एक शीर्षक, एक विवरण, और एक बटन या लिंक को प्रकट कर सकता है, जिसमें गति एक पूर्व निर्धारित प्रभाव से आ रही है नामित प्रभाव (सैडी, लिली, रॉक्सी, और बहुत अधिक) प्रत्येक छवि और पाठ को अपने तरीके से चेतन करते हैं।
तीन टैब इसे चलाते हैं। सामग्री प्रभाव, छवि और ओवरले पाठ को धारण करता है। शैली छवि अपारदर्शिता, फ़िल्टर, बॉर्डर और शीर्षक और विवरण रंगों को संभालता है। उन्नत सामान्य एलिमेंटर रिक्ति और दृश्यता है।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- एक छवि, साथ ही शीर्षक और कैप्शन टेक्स्ट जिसे आप होवर पर दिखाना चाहते हैं।
इमेज होवर इफेक्ट्स विजेट कैसे जोड़ें #
एलिमेंटर संपादक में, खोलें तत्वों पैनल और खोज छवि होवर प्रभाव, या मास्टर एडॉन्स सेक्शन में स्क्रॉल करें (विजेट्स एक बैंगनी एमए बैज ले जाते हैं) इसे पृष्ठ पर खींचें और यह एक नमूना छवि के साथ लोड होता है और ओवरले आप संपादित कर सकते हैं।
प्रभाव और छवि चुनें #
को खोलें सामग्री टैब। द प्रभाव एवं छवि अनुभाग वह है जहां आप होवर एनीमेशन सेट करते हैं और चित्र लोड करते हैं।
- होवर प्रभावः नामित एनीमेशन होवर पर इस्तेमाल किया (इस पर आगे)।
- छवि अपलोड करेंः मीडिया लाइब्रेरी से छवि चुनें।
- छवि का आकार और छवि संकल्पः फसल और संकल्प परोसा गया।
- लिंक या पॉपअप?: पूरी छवि को एक लिंक बनाएं या इसे पॉपअप में खोलें।
एक होवर प्रभाव उठाओ #
द होवर प्रभाव ड्रॉपडाउन नामित सीएसएस प्रभावों की एक लंबी सूची रखता है प्रत्येक एक छवि और ओवरले पाठ को अलग-अलग तरीके से एनिमेट करता है, एक नरम फीका से एक कैप्शन में स्लाइड करता है।
- सैडी, लिली, लैला: एक अंधेरे छवि पर शीर्षक और कैप्शन को फीका करें।
- रॉक्सी, बुब्बा, रोमियो: टेक्स्ट के साथ बॉर्डर या पैनल स्लाइड करें।
- हनी, ऑस्कर, मार्ले: एक अंडरलाइन या एक चलती कैप्शन प्रकट करें।
- ज़ूम और ब्लर वेरिएंटः पाठ के पीछे की छवि को स्केल करें या नरम करें।
छवि चुनें #
क्लिक करें छवि अपलोड करें मीडिया लाइब्रेरी खोलने के लिए, फिर अपनी तस्वीर चुनें या अपलोड करें आपने जो भी प्रभाव चुना है वह इस छवि के शीर्ष पर चलता है।
शीर्षक जोड़ें #
को खोलें शीर्षक शीर्षक के लिए अनुभाग जो होवर पर दिखाता है पाठ टाइप करें और एचटीएमएल टैग सेट करें ताकि यह एसईओ के लिए सही ढंग से पढ़ सके।
- शीर्षक: एआई विकल्प के साथ लिखें के साथ शीर्षक पाठ।
- एचटीएमएल टैगः शीर्षक स्तर, H1 से H6।
विवरण और लिंक जोड़ें #
में वापस प्रभाव एवं छवि अनुभाग, द सामग्री प्रकार और सामग्री फ़ील्ड शीर्षक के तहत दिखाए जाने वाले कैप्शन को सेट करते हैं यह वह जगह है जहां सहायक लाइन जाती है, और यदि आप एक चाहते हैं तो एक बटन।
- सामग्री प्रकारः ओवरले सामग्री के लिए टेक्स्ट या बटन चुनें।
- सामग्री: कैप्शन पाठ, पूर्ण WYSIWYG बॉक्स में संपादित।
- लिंक या पॉपअप?: छवि को यूआरएल पर इंगित करें या पॉपअप में खोलें।
छवि को स्टाइल करें और ओवरले करें #
को खोलें शैली टैब। द छवि अनुभाग नियंत्रित करता है कि होवर से पहले और उसके दौरान चित्र कैसा दिखता है, और वास्तव में बहुत सारा प्रभाव यहीं से आता है।
- छवि अपारदर्शिता और होवर अपारदर्शिताः छवि आराम और होवर पर कितनी दिखाई देती है।
- छवि फ़िल्टर और होवर छवि फ़िल्टरः प्रत्येक राज्य के लिए धुंधला, चमक और कंट्रास्ट।
- सीमा, सीमा त्रिज्या, बॉक्स छायाः छवि के चारों ओर फ्रेम।
छवि अनुभाग के अंतर्गत, अलग करें शीर्षक और विवरण अनुभाग ओवरले टेक्स्ट के रंग और टाइपोग्राफी को संभालते हैं।
सामान्य उपयोग के मामले #
- पोर्टफोलियो होवर पर एक परियोजना का नाम और लिंक प्रकट करना।
- टीम ग्रिड प्रत्येक फोटो पर एक नाम और भूमिका दिखा रहा है।
- सेवा टाइलें प्रति छवि एक शीर्षक और संक्षिप्त कैप्शन के साथ।
- ब्लॉग थंबनेल वह होवर पर पोस्ट शीर्षक की सतह।
- उत्पाद दीर्घाओं एक नाम और एक बटन के साथ एक छवि को जोड़ना।
इमेज होवर इफेक्ट्स विजेट के साथ काम करने के लिए टिप्स #
- स्पष्ट छवियों का उपयोग करें। ओवरले तस्वीर को गहरा कर देता है, इसलिए एक व्यस्त शॉट पाठ को पढ़ने के लिए कठिन बना सकता है बीच में कमरे के साथ एक शांत छवि सबसे अच्छा काम करती है।
- कैप्शन को छोटा रखें। शीर्षक के अंतर्गत एक पंक्ति ओवरले में भरे पैराग्राफ से बेहतर पढ़ती है।
- सामग्री के प्रभाव का मिलान करें। सूक्ष्म फ़ेड्स एक पोर्टफोलियो के अनुरूप हैं; बोल्ड स्लाइड्स प्रोमो के अनुरूप हैं।
- सही हेडिंग टैग सेट करें। गैलरी शीर्षकों के लिए H2 या H3 का उपयोग करें, H1 का नहीं, जब तक कि यह पृष्ठ का मुख्य शीर्षक न हो।
- मोबाइल पर टेस्ट। स्पर्श पर कोई होवर नहीं है, इसलिए जांच लें कि ओवरले अभी भी समझ में आता है जब कोई इसके बजाय टैप करता है।
वीडियो ट्यूटोरियल देखें #
स्क्रीन पर साथ चलना पसंद करते हैं नीचे दिए गए वीडियो ट्यूटोरियल शुरू से अंत तक छवि होवर प्रभाव तत्व के माध्यम से चलता है, यह दर्शाता है कि प्रभाव, ओवरले टेक्स्ट और स्टाइल एलिमेंट संपादक में कैसे काम करते हैं।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर ऐडऑन में इमेज होवर इफेक्ट्स विजेट क्या है?
यह एक एलिमेंट विजेट है जो एक छवि में सीएसएस होवर एनीमेशन जोड़ता है होवर पर यह एक शीर्षक, एक कैप्शन और एक वैकल्पिक लिंक का खुलासा करता है, जिसमें नामित प्रीसेट प्रभाव से आने वाली गति के साथ सब कुछ एलिमेंट पैनल से सेट किया गया है जिसमें कोई कोड नहीं है।
विजेट में कितने होवर प्रभाव शामिल हैं?
होवर इफेक्ट ड्रॉपडाउन नामित सीएसएस प्रभावों की एक लंबी सूची रखता है, जैसे सैडी, लिली, रॉक्सी, बुब्बा, रोमियो, लैला, हनी और ऑस्कर प्रत्येक छवि को एनिमेट करता है और पाठ को एक अलग तरीके से ओवरले करता है, इसलिए आप अपने डिजाइन को फिट करते हैं।
क्या मैं छवि में एक लिंक या बटन जोड़ सकता हूँ?
हाँ। लिंक या पॉपअप विकल्प पूरी छवि को एक लिंक बनाता है या इसे पॉपअप में खोलता है, और सामग्री प्रकार फ़ील्ड ओवरले के अंदर एक बटन जोड़ सकता है। यह प्रत्येक छवि को किसी प्रोजेक्ट, उत्पाद या पृष्ठ पर क्लिक करने योग्य पथ बनाता है।
क्या मैं होवर पर एक शीर्षक और कैप्शन दिखा सकता हूं?
हाँ। शीर्षक अनुभाग शीर्षक और उसके HTML टैग को सेट करता है, और सामग्री फ़ील्ड इसके नीचे एक विवरण जोड़ता है। दोनों होवर एनीमेशन के भाग के रूप में दिखाई देते हैं, इसलिए छवि तब तक साफ रहती है जब तक कोई उस पर नहीं मंडराता।
क्या छवि होवर प्रभाव मोबाइल पर काम करते हैं?
होवर एक डेस्कटॉप इंटरैक्शन है, इसलिए स्पर्श उपकरणों में कोई वास्तविक होवर नहीं है कई प्रभाव अभी भी टैप पर ओवरले दिखाते हैं, लेकिन आपको फोन पर परीक्षण करना चाहिए और कुंजी पाठ को दृश्यमान या पहुंच योग्य रखना चाहिए, खासकर अगर छवि भी एक लिंक है।
लपेटकर #
इमेज होवर इफेक्ट्स विजेट एक स्थिर छवि को एक इंटरैक्टिव छवि में बदल देता है: एक प्रभाव चुनें, छवि लोड करें, एक शीर्षक और कैप्शन जोड़ें, फिर अपारदर्शिता, फ़िल्टर और टेक्स्ट को स्टाइल करें। संबंधित विजेट के लिए, देखें जानकारी बॉक्स विजेट और द फ्लिपबॉक्स विजेट, पूरा ब्राउज़ करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और जाँच करें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
