छवि पर एलिमेंटर टेक्स्ट: 25+ होवर प्रभाव (फ्री विजेट ट्यूटोरियल)

एलिमेंटर में एक छवि पर पाठ जोड़ना दो मिनट की नौकरी की तरह लगता है फिर आप इसे डिफ़ॉल्ट विजेट के साथ आज़माते हैं और नकारात्मक मार्जिन, पूर्ण स्थिति के साथ कुश्ती समाप्त करते हैं, और एक पृष्ठभूमि छवि पर स्टैक्ड हेडिंग विजेट जो मोबाइल पर टूट जाता है एक तेज़ तरीका है मुक्त मास्टर ऐडऑन से छवि होवर प्रभाव विजेट किसी भी छवि के शीर्ष पर एक शीर्षक और विवरण डालता है और उन्हें २५+ होवर एनिमेशन में से एक के साथ प्रकट करता है आप सीएसएस को कभी नहीं छूते हैं।

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

यह मार्गदर्शिका क्या कवर करती हैः

• क्यों छवि पर पाठ एक विजेट की जरूरत है
• इमेज होवर इफेक्ट्स विजेट एक नज़र में
• किसी छवि पर टेक्स्ट कैसे जोड़ें (चरण दर चरण)
• ओवरले को स्टाइल करना: रंग, अस्पष्टता, आकार
• शीर्षक और विवरण के लिए टाइपोग्राफी
• क्रियाएँ क्लिक करें: पॉपअप खोलें या छवि लिंक करें
• डिज़ाइन युक्तियाँ जो पाठ को पठनीय बनाए रखती हैं
• छवि प्रभावों के लिए अन्य मास्टर ऐडऑन विजेट
• नि: शुल्क बनाम प्रोः आपको वास्तव में क्या चाहिए
• अक्सर पूछे जाने वाले प्रश्न

क्यों छवि पर पाठ एक विजेट की जरूरत है (सीएसएस हैक नहीं)

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

एक समर्पित विजेट एक ही स्थान पर उन सभी को हल करता हैः

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

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

इमेज होवर एक नज़र में विजेट को प्रभावित करता है

छवि होवर प्रभाव मास्टर एडॉन्स के निःशुल्क संस्करण में भेजा जाता है, a ८०+ विजेट और एक्सटेंशन की लाइब्रेरी ३०,०००+ सक्रिय वर्डप्रेस साइटों पर चल रहा है यहाँ आपको इस एक विजेट में क्या मिलता हैः

• 25+ नामित होवर प्रभाव (सैडी, चिको, मार्ले, रूबी और दोस्त), प्रत्येक एक अलग प्रकट एनीमेशन है
• चयन योग्य HTML टैग (H1 से H6) वाला एक शीर्षक फ़ील्ड, ताकि आपका ओवरले टेक्स्ट SEO-सही रह सके
• एक छोटी सहायक लाइन के लिए एक विवरण फ़ील्ड
• पृष्ठभूमि रंग, छवि अपारदर्शिता और होवर अपारदर्शिता नियंत्रण को ओवरले करें
• सीमा त्रिज्या, पैडिंग, बॉक्स छाया, और शीर्षक और विवरण के लिए अलग टाइपोग्राफी
• तीन क्लिक व्यवहार: कुछ नहीं, एक पॉपअप खोलें, या एक लिंक का पालन करें

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

एलिमेंट में एक छवि पर टेक्स्ट कैसे जोड़ें (चरण दर चरण)

चरण १: मास्टर एडॉन्स स्थापित करें

अपने वर्डप्रेस डैशबोर्ड में, पर जाएं प्लगइन्स > नया जोड़ें और “Master Addons” खोजें। स्थापित करें और सक्रिय करें वर्डप्रेस।org से निःशुल्क प्लगइन। यदि कोई चीज़ आपको परेशान करती है, तो स्थापना गाइड इसके माध्यम से चलता है आपको एलिमेंटर सक्रिय भी चाहिए, लेकिन मुफ्त संस्करण पर्याप्त है।

चरण 2: इमेज होवर इफेक्ट्स विजेट को अपने पेज पर खींचें

एलिमेंटर के साथ कोई भी पेज खोलें और विजेट पैनल में “Image होवर इफेक्ट्स” खोजें। आप इसे अन्य एमए-बैज विजेट्स जैसे एडवांस्ड इमेज, इमेज हॉटस्पॉट और इमेज कंपेरिजन के बीच देखेंगे। इसे अपने अनुभाग में खींचें।

चरण ३: अपनी छवि अपलोड करें

सामग्री टैब के साथ खुलता है प्रभाव एवं छवि अनुभाग। क्लिक करें छवि अपलोड करें और अपनी मीडिया लाइब्रेरी से कुछ चुनें दो सेटिंग्स इसके ठीक नीचे बैठती हैंः

• छवि आकार प्रदान किए गए आयामों को नियंत्रित करता है अधिकांश लेआउट के लिए डिफ़ॉल्ट काम करता है।
• छवि संकल्प चुनता है कि वर्डप्रेस-जनरेटेड आकार कौन सा लोड होता है। “Full” सबसे तीव्र परिणाम देता है। इनमें से आठ या दस टाइलों वाले पृष्ठ पर, इसके बजाय “Large” पर जाएं; ग्रिड आकार में कोई भी अंतर नहीं देखता है और पृष्ठ काफ़ी तेज़ी से लोड होता है।

चरण ४: एक होवर प्रभाव चुनें

यहाँ मज़ा हिस्सा है खोलें होवर प्रभाव ड्रॉपडाउन और आपको नामित प्रभावों की पूरी सूची मिलती है: लिली, सैडी, रॉक्सी, बुब्बा, रोमियो, लैला, हनी, ऑस्कर, मार्ले, रूबी, मिलो, डेक्सटर, सारा, ज़ो, चिको, जूलिया, गोलियथ, हेरा, विंस्टन, सेलेना, टेरी, फोएबे, अपोलो, किरा, स्टीव, मोसेस, जैज़, मिंग, लेक्सी और ड्यूक।

प्रत्येक नाम ओवरले एनीमेशन और टेक्स्ट प्रकट का एक अलग संयोजन है सैडी नीचे से एक ढाल को स्लाइड करता है मार्ले एक अंडरलाइन के साथ शीर्षक को गिरा देता है चिको छवि को थोड़ा ज़ूम करता है और पाठ को एक पतली सीमा के साथ फ्रेम करता है संपादक पूर्वावलोकन लाइव अपडेट करता है, इसलिए कुछ के माध्यम से क्लिक करें और परीक्षण करने के लिए छवि पर होवर करें यहां चिको मिड-होवर हैः

उन सभी के माध्यम से क्लिक करके आपको बचाने के लिए एक त्वरित समूहः

• सूक्ष्म फीका: लिली, सैडी, लैला, ज़ो। पोर्टफोलियो के लिए अच्छे डिफ़ॉल्ट विकल्प।
• दिशात्मक स्लाइडः हनी, ऑस्कर, रोमियो, सारा पाठ एक किनारे से धक्का देता है।
• ज़ूम और स्केलः चिको, बुब्बा, मिलो, जूलिया। छवि चलती है, जो आंख खींचती है।
• चंचल और बोल्डः मार्ले, रूबी, डेक्सटर, गोलियथ, अपोलो मजबूत गति, रचनात्मक साइटों के लिए सर्वश्रेष्ठ।

चरण ५: अपना शीर्षक जोड़ें

को खोलें शीर्षक अनुभाग। अपना शीर्षक टाइप करें और एक चुनें एचटीएमएल टैगयह दिखने से अधिक मायने रखता है: यदि छवि सेवाओं के ग्रिड में बैठती है, तो H3 आमतौर पर डिफ़ॉल्ट H2 की तुलना में आपके पृष्ठ पदानुक्रम में बेहतर फिट बैठता है। खोज इंजन इस टैग को पृष्ठ पर किसी भी अन्य शीर्षक की तरह पढ़ते हैं।

चरण ६: विवरण लिखें

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

ओवरले को स्टाइल करना: रंग, अस्पष्टता और आकार

पर स्विच करें शैली टैब। द छवि पैनल नियंत्रित करता है कि ओवरले कैसा दिखता हैः

• पृष्ठभूमि रंग होवर पर दिखाई देने वाले ओवरले को रंग देता है। अपने ब्रांड पैलेट से एक रंग चुनें; कम अल्फा के साथ #DD5555 जैसा HEXA मान फोटो को नीचे दिखाई देता रहता है।
• छवि अपारदर्शिता विश्राम अवस्था निर्धारित करता है, और होवर अपारदर्शिता सेट करता है कि ओवरले दिखाई देने पर छवि कितनी मंद हो जाती है दोनों के बीच एक अंतर (कहते हैं ०.५ आराम, ०.७ होवर पर) प्रकट को जानबूझकर महसूस करता है।
• छवि फिल्टर और होवर छवि फ़िल्टर पहले/बाद के मूड के लिए ग्रेस्केल या ब्लर जैसे सीएसएस फिल्टर जोड़ें।

उसके नीचे, सीमा त्रिज्या पूरे ब्लॉक को फिर से आकार देता है मिलान मान आपको नरम गोल कोनों देते हैं; असममित मान (१०० शीर्ष-बाएं, ० शीर्ष-दाएं, १०० नीचे-दाएं, ० नीचे-बाएं) पत्ती के आकार का निर्माण करते हैं जो आप बहुत सारे आधुनिक एजेंसी साइटों पर देखते हैं।

शीर्षक और विवरण के लिए टाइपोग्राफी

अभी भी स्टाइल टैब में, शीर्षक और विवरण पैनल प्रत्येक को अपना रंग, टाइपोग्राफी और रिक्ति नियंत्रण मिलता है फ़ॉन्ट परिवार, आकार, वजन, परिवर्तन, लाइन ऊंचाई, और पत्र रिक्ति सभी यहां हैं, साथ ही विवरण के लिए एक पाठ छाया विकल्प यदि आपकी छवि हल्की है, तो शीर्षक रंग को एक अंधेरे मूल्य पर स्विच करें ताकि पाठ दोनों राज्यों में पठनीय रहे।

रखने योग्य एक पठनीयता नियम: पाठ और इसके पीछे जो कुछ भी बैठता है, उसके बीच स्पष्ट विपरीत के लिए लक्ष्य यदि फोटो व्यस्त है, तो पिछले चरण से ओवरले रंग और अस्पष्टता पर झुकें बजाय इसे अकेले फ़ॉन्ट वजन से लड़ने के।

क्रियाएँ पर क्लिक करें: एक पॉपअप खोलें या पूरी छवि लिंक करें

सामग्री टैब में वापस, लिंक या पॉपअप? नियंत्रण तय करता है कि एक क्लिक क्या करता है तीन विकल्प छोटे आइकन टॉगल के पीछे बैठते हैं: कोई नहीं, पॉपअप और बाहरी लिंक।

पॉपअप आपके द्वारा चुनी गई किसी भी सामग्री के साथ एक ओवरले विंडो खोलता है एक सामग्री प्रकार चुनें और या तो सीधे WYSIWYG संपादक में सामग्री लिखें या सहेजे गए एलिमेंटर टेम्पलेट को लोड करें पोर्टफोलियो ग्रिड इसका लगातार उपयोग करते हैं: प्रत्येक टाइल पृष्ठ को छोड़े बिना एक केस स्टडी खोलती है।

लिंक पूरी छवि को एक क्लिक करने योग्य कार्ड में बदल देता है यूआरएल को लिंक यूआरएल फ़ील्ड में पेस्ट करें और पूरे होवर क्षेत्र वहां इंगित करता है, जो मोबाइल पर टैप लक्ष्य के लिए एक छोटे से पाठ लिंक को हरा देता है।

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

समाप्त परिणाम

पूर्वावलोकन हिट करें और अपनी छवि पर होवर करें ओवरले फीका पड़ जाता है, शीर्षक और विवरण आपके द्वारा चुने गए प्रभाव के साथ प्रकट होता है, और कर्सर क्लिक कार्रवाई का संकेत देता हैः

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

डिज़ाइन युक्तियाँ जो टेक्स्ट को छवि से अधिक पठनीय बनाए रखती हैं

• प्रति ग्रिड एक प्रभाव। यदि आप ६-टाइल पोर्टफोलियो का निर्माण करते हैं, तो प्रत्येक टाइल को एक ही होवर प्रभाव दें मिश्रित प्रभाव आकस्मिक के रूप में पढ़ा जाता है।
• पहले कंट्रास्ट। श्वेत पाठ को गहरे ओवरले की आवश्यकता होती है; डार्क टेक्स्ट को एक हल्की छवि या एक हल्के ओवरले टिंट की आवश्यकता होती है।
• संक्षिप्त विवरण। दस शब्द या उससे कम ओवरले एक टीज़र है, पैराग्राफ नहीं।
• स्पर्श पर परीक्षण करें। फोन पर पहला टैप ओवरले को प्रकट करता है और दूसरा टैप क्लिक क्रिया को फायर करता है, इसलिए सुनिश्चित करें कि प्रकट स्थिति एक छोटी स्क्रीन पर पूर्ण दिखती है।
• अपनी सीमा त्रिज्या से मेल खाते हैं पृष्ठ के बाकी हिस्सों के लिए एक १०० पीएक्स पत्ती का आकार तेज-कोने वाले कार्ड के बगल में दिखता है।

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

छवि प्रभावों के लिए अन्य मास्टर ऐडऑन विजेट

इमेज होवर इफेक्ट्स टेक्स्ट रिवील के लिए सही टूल है, लेकिन कुछ सिबलिंग विजेट पड़ोसी उपयोग के मामलों को कवर करते हैंः

• उन्नत छवि ओवरले टेक्स्ट के बिना एक ही छवि में ३ डी झुकाव, रिबन और बैज जोड़ता है।
• द फ्लिपबॉक्स विजेट कार्ड को पूरी तरह से डिज़ाइन किए गए बैक साइड में फ़्लिप करता है, बेहतर होगा जब आपको प्रकट स्थिति में बटन या आइकन की आवश्यकता हो।
• छवि हॉटस्पॉट एक छवि पर विशिष्ट बिंदुओं पर इंटरैक्टिव टूलटिप मार्कर पिन करता है, जो उत्पाद कॉलआउट के लिए आदर्श है।
• द छवि हिंडोला जब एक होवर टाइल पर्याप्त नहीं होती है तो मल्टी-इमेज स्लाइडर्स को संभालता है।
• छवि तुलना शॉट के दो संस्करणों पर पहले/बाद में खींचने योग्य स्लाइडर लगाता है।

नि: शुल्क बनाम प्रोः आपको वास्तव में क्या चाहिए?

छवि पर पाठ के लिए, मुफ्त प्लगइन से परे कुछ भी नहीं सभी २५+ होवर प्रभाव, शीर्षक और विवरण फ़ील्ड, ओवरले स्टाइलिंग, पॉपअप और लिंक जहाज मुक्त। मास्टर एडॉन्स प्रो विजेट बिल्डर की तरह व्यापक प्रीमियम विजेट सेट, टेम्पलेट किट और एक्स्ट्रा को जोड़ता है, इसलिए यह एक बार देखने लायक है जब आप एक अनुभाग के बजाय पूरी साइटों का निर्माण कर रहे हैं तो १४-दिन की मनी-बैक गारंटी है यदि आप इसे आज़माते हैं और अपना मन बदलते हैं।

देखना पसंद करते हैं? यहाँ एलिमेंटर में एक त्वरित वॉकथ्रू हैः

अक्सर पूछे जाने वाले प्रश्न

रैपिंग अप

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

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

संबंधित पढ़नाः एलिमेंटर एनीमेशन प्रभाव, एलिमेंटर फ्लिपबॉक्स विजेट, और एलिमेंटर में मुफ्त में पॉपअप जोड़ना.