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