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