छवि स्लाइडर के बाद एलिमेंटर: मुफ्त तुलना विजेट
छवि तुलना एक मुफ्त मास्टर एडॉन्स विजेट है जो एक फ्रेम में पहले और बाद की छवि को ढेर करता है उनके बीच एक हैंडल के साथ आगंतुक परिवर्तन को प्रकट करने के लिए हैंडल को खींचते हैं या स्वाइप करते हैं प्रत्येक पक्ष में एक लेबल जोड़ें, क्षैतिज (बाएं और दाएं) या लंबवत (ऊपर और नीचे) चुनें, सेट करें जहां हैंडल शुरू होता है, और हैंडल, लेबल और ओवरले को स्टाइल करें न तो फ्री एलिमेंट और न ही एलिमेंट प्रो में स्लाइडर से पहले और बाद में, इसलिए यह विजेट फ्री एलिमेंट पर उस अंतर को भरता है।
एलिमेंटर में पहले स्लाइडर कैसे जोड़ें
आपको Elementor और WordPress।org से निःशुल्क मास्टर ऐडऑन प्लगइन की आवश्यकता है।
- जांचें कि छवि तुलना नीचे चालू है मास्टर ऐडऑन, विजेट.
- एलिमेंटर संपादक में, खोजें छवि तुलना और इसे पृष्ठ पर खींचें।
- पहले टैब पर पहली छवि और लेबल चुनें, फिर बाद वाले टैब पर भी ऐसा ही करें।
- सेटिंग्स में, दृश्यमान अनुपात सेट करें और क्षैतिज या लंबवत चुनें।
- फोन के लिए माउस ड्रैग/स्वाइप पर मूव हैंडल रखें, या डेस्कटॉप-केंद्रित पेजों पर प्रो विकल्प का उपयोग करें।
- स्टाइल टैब में हैंडल और लेबल को स्टाइल करें, फिर फोन पर स्लाइडर का परीक्षण करें।
डिज़ाइन युक्तियों और उदाहरणों के लिए, पढ़ें स्लाइडर गाइड से पहले और बाद में। प्रत्येक सेटिंग में सूचीबद्ध है छवि तुलना विजेट सेटिंग्स.
स्लाइडर के बाद पहले खींचें और स्वाइप करें
अपलोड करें से पहले और बाद छवियाँ, प्रत्येक का अपना लेबल और छवि रिज़ॉल्यूशन है। में सेटिंग्स, दृश्यमान अनुपात (%) सेट करता है जहां हैंडल शुरू होता है, ओरिएंटेशन क्षैतिज (डिफ़ॉल्ट) या लंबवत है, और ओवरले लेबल दिखाता या छुपाता है। हैंडल खिसकाएँ क्या माउस ड्रैग/स्वाइप फ्री प्लगइन में है मास्टर एडॉन्स प्रो माउस मूव जोड़ता है, जहां हैंडल कर्सर का अनुसरण करता है, और माउस क्लिक करता है।
- डेस्कटॉप और टच स्क्रीन पर काम को खींचें और स्वाइप करें।
- परिणाम को हाइलाइट करने के लिए हैंडल ऑफ-सेंटर प्रारंभ करें।
- समान पिक्सेल आयामों वाली छवियों का उपयोग करें ताकि दोनों पक्ष पंक्तिबद्ध हों।
अनुकूलन ओवरले & स्पष्ट लेबल
चालू करें ओवरले छवियों पर पहले और बाद के लेबल दिखाने के लिए ओवरले शैली अनुभाग में सामान्य और होवर पृष्ठभूमि है लेबल अनुभाग रंग, टाइपोग्राफी, सीमा, सीमा त्रिज्या, मार्जिन और पैडिंग के साथ प्रत्येक पक्ष को अलग-अलग स्टाइल करता है, ताकि आप “Before” और “After” को “Old” और “New” या किसी अन्य शब्द में बदल सकें।
- किसी भी भाषा में कस्टम लेबल पाठ।
- लेबल से पहले और बाद के लिए अलग-अलग शैलियाँ।
- होवर पर एक अलग ओवरले पृष्ठभूमि।
पेशेवर हैंडल और कंटेनर स्टाइलिंग
द हैंडल अनुभाग सामान्य और होवर के लिए हैंडल बार का रंग और आकार, हैंडल बॉक्स की चौड़ाई और ऊंचाई, और आइकन का रंग, बॉर्डर और बॉर्डर त्रिज्या सेट करता है। लेआउट स्टाइल पूरे स्लाइडर के चारों ओर एक सीमा, पैडिंग और मार्जिन जोड़ता है कंटेनर पर सीमा त्रिज्या और बॉक्स छाया मास्टर एडॉन्स प्रो विकल्प हैं।
- अपने ब्रांड के लिए हैंडल रंग का मिलान करें।
- एक साफ दिखने के लिए एक गोल हैंडल बॉक्स के साथ एक पतली पट्टी।
- गोल कोनों और प्रो के साथ कंटेनर पर एक छाया।
छवि तुलना: नि: शुल्क बनाम प्रो
एलिमेंटर के पास अपने मुफ्त या प्रो प्लगइन में विजेट से पहले और बाद में कोई नहीं है यहां बताया गया है कि मुफ्त मास्टर एडॉन्स विजेट में क्या शामिल है और प्रो क्या जोड़ता है।
| फ़ीचर | मुक्त | मास्टर एडॉन्स प्रो |
|---|---|---|
| लेबल के साथ छवियों से पहले और बाद में | हाँ | हाँ |
| क्षैतिज और ऊर्ध्वाधर अभिविन्यास | हाँ | हाँ |
| दृश्यमान अनुपात प्रारंभिक बिंदु | हाँ | हाँ |
| माउस खींचें/स्वाइप हैंडल | हाँ | हाँ |
| माउस मूव और माउस क्लिक हैंडल | नहीं | हाँ |
| स्टाइल को संभालें, लेबल करें और ओवरले करें | हाँ | हाँ |
| कंटेनर बॉर्डर त्रिज्या और बॉक्स छाया | नहीं | हाँ |
स्लाइडर्स से पहले और बाद में अधिकांश के लिए मुफ्त संस्करण पर्याप्त है प्रो समझ में आता है जब आप चाहते हैं कि हैंडल कर्सर का पालन करें या कस्टम सीएसएस के बिना गोल कोनों और छाया की आवश्यकता है इसके बजाय एक छवि पर नोट्स पिन करने के लिए, देखें छवि हॉटस्पॉट (प्रो).
छवि तुलना के लिए अक्सर पूछे जाने वाले प्रश्न
क्या छवि तुलना विजेट मुफ़्त है?
हाँ विजेट ड्रैग और स्वाइप, लेबल, दोनों ओरिएंटेशन और हैंडल स्टाइल के साथ मुक्त है मास्टर एडॉन्स प्रो माउस मूव और माउस क्लिक हैंडल और कंटेनर बॉर्डर रेडियस और बॉक्स शैडो जोड़ता है।
क्या यह फोन पर काम करता है?
हां, मुफ्त माउस ड्रैग/स्वाइप हैंडल के साथ आगंतुक डिवाइडर को स्थानांतरित करने के लिए स्वाइप करते हैं प्रो माउस मूव विकल्प होवर पर निर्भर करता है, इसलिए यह टच स्क्रीन पर काम नहीं करता है।
क्या एलिमेंटर के पास पहले और बाद का स्लाइडर है?
नहीं, न तो मुफ़्त एलिमेंटर और न ही एलिमेंटर प्रो में छवि तुलना या विजेट से पहले और बाद में शामिल है, इसलिए आपको इस तरह के एक ऐडऑन की आवश्यकता है।
मुझे वर्टिकल ओरिएंटेशन का उपयोग कब करना चाहिए?
लंबी छवियों के लिए वर्टिकल का उपयोग करें, जैसे कि पूर्ण-लंबाई वाले चित्र, भवन के अग्रभाग या लंबे स्क्रीनशॉट पहले की छवि शीर्ष पर बैठती है और नीचे की छवि के बाद, एक ऊपर और नीचे संभाल के साथ।
क्या दो उच्च-रिज़ॉल्यूशन छवियों का उपयोग करने से मेरा पृष्ठ धीमा हो जाएगा?
यह कर सकता है, अगर छवियां बहुत बड़ी हैं छवि संकल्प सेटिंग का बुद्धिमानी से उपयोग करें (जैसे, 'पूर्ण' के बजाय “लार्जियांबिम) और अपलोड करने से पहले वेब के लिए हमेशा अपनी छवियों को अनुकूलित करें तत्व स्वयं हल्का है, लेकिन छवि फ़ाइल आकार प्रदर्शन के लिए मुख्य कारक है।
क्या मैं दो से अधिक छवियों की तुलना कर सकता हूं?
नहीं प्रत्येक विजेट दो छवियों की तुलना करता है अधिक जोड़े के लिए, प्रति जोड़ी एक विजेट जोड़ें या कई छवियों को दिखाएं छवि हिंडोला.
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर
