स्थैतिक साइड-बाय-साइड छवियां आपके काम के न्याय को नहीं करती हैं एक फोटो एडिट, एक घर का नवीनीकरण, एक उत्पाद परिवर्तन, वे सभी एक दूसरे के बगल में बैठे दो चित्रों से बेहतर लायक हैं एक एलिमेंटर छवि तुलना स्लाइडर इसे ठीक करता है। विज़िटर पहले और बाद के संस्करणों को प्रकट करने के लिए छवि में एक हैंडल खींचते हैं, और थोड़ी सी बातचीत उन्हें आपके पृष्ठ पर लंबे समय तक बनाए रखती है।
मैं क्लाइंट लैंडिंग पृष्ठों पर मास्टर एडॉन्स इमेज कम्पेरिजन विजेट का उपयोग कर रहा हूं, और यह लगातार स्थिर स्क्रीनशॉट की तुलना में अधिक जुड़ाव प्राप्त करता है यह ट्यूटोरियल सेटअप, अनुकूलन, और कुछ चीजों को जानने के लायक है इससे पहले कि आप प्रकाशित करें विजेट मुफ्त है, यह किसी भी अन्य विजेट की तरह एलिमेंट के पैनल के अंदर बैठता है, और आप इसे लगभग दो मिनट में चला सकते हैं।
यह मार्गदर्शिका क्या कवर करती हैः
- क्या एक छवि तुलना स्लाइडर है
- जिसे पहले/बाद स्लाइडर की आवश्यकता है
- मुफ्त विजेट के साथ आपको क्या मिलता है
- एक कैसे बनाएं (कदम दर कदम)
- बेहतर तुलना के लिए टिप्स
- आम समस्याओं का निवारण
- मास्टर ऐडऑन बनाम विकल्प
- क्यों मास्टर एडॉन्स
- शुरू हो जाओ
- अक्सर पूछे जाने वाले प्रश्न
छवि तुलना स्लाइडर क्या है?
एक छवि तुलना स्लाइडर परतों दो छवियों के शीर्ष पर एक दूसरे के बीच एक ड्रैगेबल डिवाइडर के साथ उपयोगकर्ता इसे बाएं और दाएं (या ऊपर और नीचे) स्लाइड करते हैं ताकि एक छवि को दूसरे पर प्रकट किया जा सके आप संपादक में एक “पहले” छवि और एक “बाद” छवि सेट करते हैं, और विजेट बाकी को संभालता है।
आपने शायद इन्हें फोटोग्राफी पोर्टफोलियो, दंत वेबसाइटों, या नवीकरण परियोजनाओं को दिखाने वाले रियल एस्टेट पृष्ठों पर देखा है निष्क्रिय रूप से दो अलग-अलग तस्वीरों को देखने के बजाय, आगंतुकों को शारीरिक रूप से तुलना के साथ बातचीत करने के बजाय, उस बातचीत से पृष्ठ पर समय बढ़ जाता है, जो आपकी मदद करता है एसईओ और बाउंस दरों को नीचे खींचता है।
एलिमेंटर में स्लाइडर के बाद पहले किसे चाहिए?
कोई भी जो एक परिवर्तन दिखाना चाहता है ये उपयोग के मामले हैं जो मैं सबसे अधिक बार चलाता हूंः
वेब डिजाइनर और एजेंसियां
वेबसाइट के रीडिज़ाइन एक तुलना स्लाइडर में बहुत अच्छे लगते हैं पुराने और नए डिज़ाइन के बीच एक संभावित क्लाइंट ड्रैग को एक फ्लैट स्क्रीनशॉट की तुलना में अधिक विश्वास बनाता है कभी भी आप इसे जोड़ सकते हैं छवि होवर प्रभाव विजेट यदि आप पोर्टफोलियो पृष्ठों पर अतिरिक्त दृश्य विविधता चाहते हैं।
फोटोग्राफर और फोटो संपादक
संभवतः सबसे प्राकृतिक फिट यदि आप रीटचिंग, रंग ग्रेडिंग, या बहाली का काम करते हैं, तो एक छवि तुलना स्लाइडर संभावित ग्राहकों को वास्तव में यह देखने देता है कि आप क्या कर सकते हैं बाईं ओर कच्ची फ़ाइल, दाईं ओर संपादित संस्करण किसी भी कैप्शन से अधिक कह सकता है।
ई-कॉमर्स स्टोर
त्वचा की देखभाल, सफाई उत्पाद, या दृश्यमान परिणामों वाली कोई भी चीज़ बेचना? एक छवि तुलना के बाद से पहले आपके उत्पाद पृष्ठ पर प्रतिलिपि के एक पैराग्राफ की तुलना में अधिक आश्वस्त है मैंने कॉस्मेटिक और गृह सुधार उत्पादों के लिए विशेष रूप से अच्छी तरह से इस काम को देखा है जहां दृश्य अंतर नाटकीय है।
रियल एस्टेट और वास्तुकला
नवीनीकरण परियोजनाएं एक प्राकृतिक मैच हैं काम शुरू होने से पहले एक तस्वीर लें, जब यह हो जाए तो एक और ले लो, दोनों तुलना विजेट में छोड़ दें आपका पोर्टफोलियो अधिक इंटरैक्टिव हो जाता है, और आगंतुक आपकी परियोजनाओं को ब्राउज़ करने में अधिक समय व्यतीत करते हैं।
डिजिटल मार्केटर्स
एनालिटिक्स डैशबोर्ड, विज्ञापन प्रदर्शन, वेबसाइट ट्रैफ़िक चार्ट हमारे साथ काम करने से पहले “ और हमारे साथ काम करने के बाद “दिखाएं, ड्रैग-टू-कंपेयर स्लाइडर के साथ P” परिणाम एक केस स्टडी में दो स्क्रीनशॉट चिपकाने से बेहतर काम करता है।
मास्टर ऐडऑन छवि तुलना विजेट: आपको क्या मिलता है
जोड़ने के कई तरीके हैं एलिमेंटर में स्लाइडर के बाद से पहलेकुछ स्टैंडअलोन प्लगइन्स की आवश्यकता होती है, कुछ कस्टम कोड की जरूरत है, और कुछ प्रीमियम ऐडऑन सदस्यता के पीछे बंद कर रहे हैं मास्टर ऐडऑन शामिल हैं छवि तुलना विजेट मुफ्त संस्करण में ध्यान देने योग्य है क्योंकि अधिकांश प्रतिस्पर्धी एडॉन्स (अल्टीमेट एडॉन्स, पावरपैक, द प्लस एडॉन्स) ने इस सुविधा को पेवॉल के पीछे रखा है।
विजेट में शामिल हैंः
- मूल तत्व एकीकरण: एलिमेंटर पैनल से खींचें और छोड़ें कोई शॉर्टकोड नहीं, कोई अलग सेटिंग पृष्ठ नहीं। से स्थापित करें वर्डप्रेस प्लगइन रेपो और यह तुरंत आपकी विजेट सूची में दिखाई देता है।
- उपयोग करने के लिए स्वतंत्रः छवि तुलना विजेट मुफ्त संस्करण का हिस्सा है कोई प्रो लाइसेंस की आवश्यकता नहीं है।
- एकाधिक नियंत्रण शैलियाँः स्लाइडर संभाल (खींचें), माउस आंदोलन (होवर), या क्लिक करें क्षैतिज और ऊर्ध्वाधर दोनों तुलना अभिविन्यास समर्थित हैं।
- कस्टम लेबलः किसी भी भाषा में, अपनी इच्छानुसार कुछ भी करने के लिए “Before” और “After” टेक्स्ट बदलें। लेबल रंग, टाइपोग्राफी और पोजिशनिंग सभी समायोज्य हैं।
- उत्तरदायी: डेस्कटॉप, टैबलेट और मोबाइल पर काम करता है मोबाइल उपकरणों पर टच और स्वाइप जेस्चर काम करते हैं।
मास्टर ऐडऑन के पास है 80+ विजेट और एक्सटेंशन कुल। छवि तुलना विजेट वह है जो लैंडिंग पेज और पोर्टफोलियो परियोजनाओं में बहुत कुछ सामने आता है।
एलिमेंटर में पहले स्लाइडर कैसे बनाएं (चरण दर चरण)
शुरू करने से पहले, आपको दोनों की आवश्यकता है तत्व और मास्टर एडॉन्स स्थापित और सक्रिय हैं दोनों मुफ्त हैं पर जाएं प्लगइन्स > नया जोड़ें, प्रत्येक प्लगइन नाम के लिए खोज, स्थापित करें, और सक्रिय करें।
चरण १: छवि तुलना विजेट सक्षम करें
छवि तुलना विजेट डिफ़ॉल्ट रूप से सक्षम है यदि आपने अपने पैनल को दुबला रखने के लिए कुछ विजेट बंद कर दिए हैं, तो जांचें कि यह अभी भी चालू है या नहीं, इस पर जाएं मास्टर ऐडऑन > ऐडऑन और एक्सटेंशन आपके वर्डप्रेस डैशबोर्ड में और पुष्टि करें कि छवि तुलना चालू है। द छवि तुलना दस्तावेज़ीकरण पूर्ण सेटअप विवरण है जब आप उस डैशबोर्ड में होते हैं, तो आप अन्य विजेट को चालू करने के लायक देख सकते हैं, जैसे एनिमेटेड हेडलाइन या गैलरी स्लाइडर.
चरण २: एलिमेंट में एक पेज खोलें
एक नया पृष्ठ बनाएं या एलिमेंट के साथ एक मौजूदा खोलें मैंने इस ट्यूटोरियल के लिए एक ताजा लैंडिंग पृष्ठ बनाया है, लेकिन तुलना स्लाइडर किसी भी मौजूदा पृष्ठ में उसी तरह से गिरता है।
चरण ३: छवि तुलना विजेट जोड़ें
बाईं ओर एलिमेंटर पैनल में, खोज करें“Image तुलना” (आपको इसके बगल में मास्टर ऐडऑन आइकन दिखाई देगा) जहां भी आप स्लाइडर दिखाना चाहते हैं, विजेट को अपने पेज में खींचें।
चरण ४: अपनी पहले और बाद की छवियां अपलोड करें
विजेट पर क्लिक करें और आप दो छवि अपलोड फ़ील्ड देखेंगे: एक पहले की छवि के लिए, एक बाद की छवि के लिए दोनों अपलोड करें, और केंद्र में डिवाइडर हैंडल के साथ पूर्वावलोकन अपडेट तुरंत।
त्वरित हेड-अप: दोनों छवियों का आयाम समान होना चाहिएयदि एक १२००×८०० है और दूसरा ९००×६०० है, तो लेआउट बंद दिखेगा अपलोड करने से पहले उन्हें एक ही आकार में फसल दें यह लोगों को किसी भी अन्य चीज़ से अधिक यात्रा करता है।
चरण ५: लेबल टेक्स्ट को अनुकूलित करें
डिफ़ॉल्ट लेबल कहते हैं “Before” और “After,” लेकिन आप इन्हें किसी भी चीज़ में बदल सकते हैं। कोई उत्पाद बेचना? “Withole” और “With।” का उपयोग करें नवीनीकरण दिखा रहा है? “Day 1” और “Fined।” आज़माएं लेबल फ़ील्ड गैर-अंग्रेजी वर्णों सहित किसी भी पाठ को स्वीकार करते हैं, इसलिए स्थानीयकरण कोई समस्या नहीं है।
चरण ६: स्लाइडर सेटिंग्स कॉन्फ़िगर करें
सामग्री टैब के अंतर्गत, समायोजन के लायक कुछ और सेटिंग्स हैंः
- अभिमुखीकरण: क्षैतिज (बाएं/दाएं) और ऊर्ध्वाधर (ऊपर/नीचे) तुलना के बीच स्विच करें क्षैतिज डिफ़ॉल्ट है और ज्यादातर मामलों के लिए काम करता है।
- दृश्यता अनुपातः नियंत्रण जहां विभक्त शुरू होता है केंद्रित विभाजन के लिए इसे ५०% पर सेट करें, या शुरू में एक छवि को अधिक दिखाने के लिए इसे स्थानांतरित करें।
- ओवरले: छवियों पर रंग ओवरले सक्षम या अक्षम करें।
- हैंडल प्रकारः तुलना के लिए माउस ड्रैग या माउस होवर के बीच चुनें ड्रैग को क्लिक करने और खींचने के लिए आगंतुक की आवश्यकता होती है होवर माउस आंदोलन पर प्रकट होता है, जो अधिक तरल लगता है लेकिन कुछ लेआउट पर भटकाव हो सकता है।
चरण ७: स्लाइडर को स्टाइल करें
दृश्य अनुकूलन के लिए स्टाइल टैब पर स्विच करें आप विभक्त रंग बदल सकते हैं, तुलना कंटेनर के चारों ओर एक सीमा जोड़ सकते हैं, लेबल टाइपोग्राफी (फ़ॉन्ट परिवार, आकार, वजन) समायोजित कर सकते हैं, बॉक्स छाया जोड़ सकते हैं, और रिक्ति को नियंत्रित कर सकते हैं अपनी साइट के डिजाइन से मेल खाने के लिए यहां एक दो मिनट का पर्याप्त नियंत्रण है कि आप एक सामान्य दिखने वाले स्लाइडर के साथ समाप्त नहीं होंगे।
हिट प्रकाशित करें और अपने स्लाइडर के बाद से पहले लाइव है शुरू से अंत तक लगभग दो मिनट, यह मानते हुए कि आपकी छवियां तैयार हैं।
बेहतर छवि तुलना के लिए युक्तियाँ
विजेट तकनीकी पक्ष को संभालता है, लेकिन तुलना स्वयं केवल आपके सेटअप के रूप में अच्छी है कुछ चीजें मैंने क्लाइंट साइटों पर इन निर्माण से उठाई हैंः
अपनी छवि आयाम से मेल खाते हैं
मैंने पहले ही इसका उल्लेख किया था, लेकिन यह गलती है जो मुझे सबसे अधिक बार दिखाई देती है यदि आपकी छवि से पहले १९२०×१०८० है और आपकी छवि के बाद ८००×६०० है, तो स्लाइडर उन्हें संरेखित करने के लिए मजबूर करेगा और परिणाम विकृत दिखता है अपलोड करने से पहले दोनों छवियों को सटीक समान पिक्सेल आयामों में क्रॉप करें हर बार।
रचना को समान रखें
दोनों तस्वीरों को एक ही कोण, समान दूरी, समान फ्रेमिंग से लें यदि आपकी पहले की तस्वीर एक विस्तृत शॉट है और बाद में एक क्लोज-अप है, तो इसके विपरीत जमीन नहीं है जिस तरह से आप चाहते हैं स्लाइडर सबसे अच्छा दिखता है जब दो छवियों के बीच एकमात्र अंतर वास्तविक परिवर्तन है।
परिवर्तन केंद्र
छवि के केंद्र के पास सबसे अधिक दिखाई देने वाले परिवर्तन को रखो यही वह जगह है जहां विभाजक शुरू होता है, इसलिए यह पहली चीज है जब लोग स्लाइडर के साथ बातचीत करते हैं यदि परिवर्तन एक तरफ बंद है, तो उस पर ध्यान आकर्षित करने के लिए दृश्यता अनुपात समायोजित करें।
इसे ज़्यादा मत करो
प्रति पृष्ठ अनुभाग एक मजबूत तुलना पर्याप्त है मैंने एक दूसरे के ऊपर रखे पांच या छह स्लाइडर्स के साथ पृष्ठ देखे हैं, और यह प्रभाव को पानी देता है अपनी सर्वश्रेष्ठ पहले और बाद की जोड़ी चुनें और उस एक को सुविधा दें यदि आपके पास कई तुलनाएं हैं, तो उन्हें एक में व्यवस्थित करें फ़िल्टर करने योग्य छवि गैलरी या छवि हिंडोला बजाय।
पास में एक सीटीए जोड़ें
यदि तुलना बिक्री या पोर्टफोलियो पृष्ठ पर बैठती है, तो इसके ठीक नीचे एक कॉल-टू-एक्शन बटन छोड़ दें कोई व्यक्ति जो सिर्फ एक प्रभावशाली परिवर्तन के माध्यम से खींच लिया गया है वह पहले से ही लगा हुआ है एक “एक नि: शुल्क उद्धरण प्राप्त करें या “शॉप नाउ” बटन वहीं अच्छी तरह से परिवर्तित करने के लिए जाता है।
समस्या निवारण: जब स्लाइडर व्यवहार नहीं कर रहा है
अधिकांश सेटअप सिर्फ काम करते हैं, लेकिन कुछ चीजें लोगों को यात्रा करती हैं यहां उन लोगों को कैसे ठीक किया जाए जिनके बारे में मुझसे पूछा जाता है।
- स्लाइडर दिखाई नहीं दे रहा है। दस में से नौ बार विजेट अक्षम हो गया पर जाएं मास्टर ऐडऑन, फिर ऐडऑन और एक्सटेंशनऔर पुष्टि करें छवि तुलना पर टॉगल किया गया है यदि यह चालू है और अभी भी गायब है, तो अपने कैश (लाइटस्पीड, डब्ल्यूपी रॉकेट, या क्लाउडफ्लेयर) को साफ़ करें ताकि पृष्ठ की एक पुरानी प्रति सेवा करना बंद कर दे।
- हैंडल नहीं खींचेगा। यह लगभग हमेशा एक जावास्क्रिप्ट संघर्ष या एक कैशिंग प्लगइन है जो विजेट की स्क्रिप्ट को संयुक्त या स्थगित करता है जेएस गठबंधन से मास्टर एडॉन्स स्क्रिप्ट को बाहर करें और स्थगित करें, कैश को साफ़ करें, और फिर से परीक्षण करें।
- दोनों छवियां फैली हुई या गलत संरेखित दिखती हैं। वे अलग-अलग आयाम हैं समान पिक्सेल आयामों और पुनः अपलोड दोनों के लिए फसल, यह एकल सबसे आम कारण है।
- यह डेस्कटॉप पर काम करता है लेकिन मोबाइल पर नहीं। जांचें कि किसी भी मूल कंटेनर में एक अतिप्रवाह-छिपी शैली नहीं है जो स्पर्श क्षेत्र को क्लिप कर रही है, और यह कि स्लाइडर पर कुछ भी नहीं बैठा है स्वाइप को पकड़ना बॉक्स से बाहर स्पर्श काम करता है, इसलिए एक स्वाइप विफलता लगभग हमेशा एक लेआउट या जेड-इंडेक्स मुद्दा है।
- लेबल से पहले और बाद में काट दिया जाता है। स्टाइल टैब के अंतर्गत लेबल टेक्स्ट को छोटा करें या लेबल फ़ॉन्ट आकार कम करें; बहुत लंबे लेबल छवि के बाहर छोटी स्क्रीन पर फैल सकते हैं।
यदि इनमें से कोई भी इसे ठीक नहीं करता है, तो विवरण पोस्ट करें मास्टर ऐडऑन समर्थन मंच आपके विषय और सक्रिय प्लगइन्स के साथ, यह आमतौर पर एक संघर्ष है जो पिन करने के लिए जल्दी है।
छवि तुलना विजेट बनाम विकल्प
मास्टर एडॉन्स की तुलना अन्य से कैसे की जाती है, इस पर एक त्वरित नज़र वर्डप्रेस छवि तुलना स्लाइडर एलिमेंट के लिए विकल्पः
| फ़ीचर | मास्टर ऐडऑन | अल्टीमेट एडॉन्स (यूएई) | एलिमेंट्सकिट | पावरपैक |
|---|---|---|---|---|
| मुफ्त छवि तुलना विजेट | हाँ | नहीं (केवल प्रो) | हाँ | नहीं (केवल प्रो) |
| क्षैतिज + लंबवत | हाँ | हाँ | हाँ | हाँ |
| कस्टम लेबल पाठ | हाँ | हाँ | हाँ | हाँ |
| माउस होवर मोड | हाँ | हाँ | नहीं | हाँ |
| दृश्यता अनुपात नियंत्रण | हाँ | हाँ | नहीं | हाँ |
| मोबाइल टच/स्वाइप | हाँ | हाँ | हाँ | हाँ |
| ऐडऑन में कुल विजेट | 80+ | 40+ | 90+ | 60+ |
बड़ा अंतर मुफ्त उपलब्धता है यदि आप केवल पहले और बाद में स्लाइडर प्राप्त करने के लिए प्रो एडऑन के लिए भुगतान नहीं करना चाहते हैं, तो मास्टर एडऑन और एलिमेंट्सकिट आपके विकल्प हैं मास्टर एडऑन में भी शामिल हैं पाठ ओवरले तकनीक और छवि होवर प्रभाव मुक्त स्तर में, इसलिए आपको अपग्रेड किए बिना छवि टूल का एक व्यापक सेट मिलता है।
आपकी छवि तुलना के लिए मास्टर ऐडऑन क्यों?
छवि तुलना विजेट 80+ तत्वों और एक्सटेंशन में से एक है एलिमेंट के लिए मास्टर ऐडऑनबहुत सारे उपयोगकर्ता इसे एक विजेट के लिए स्थापित करते हैं और एक ही परियोजना पर कई अन्य लोगों का उपयोग करते हैं इसी तरह मैंने इसके साथ भी शुरुआत की।
व्यक्तिगत विजेट से परे, आपको एक मिलता है थीम बिल्डर कस्टम हेडर, पाद लेख और संग्रह पृष्ठों के लिए। वहाँ एक है पॉपअप बिल्डर निकास इरादे और स्क्रॉल ट्रिगर के साथ। और एक टेम्पलेट लाइब्रेरी पूर्व-निर्मित अनुभागों के साथ आप एक क्लिक में आयात कर सकते हैं।
V३.०।० पुराने संस्करणों की तुलना में काफी तेज है, प्लगइन सक्रिय रूप से बनाए रखा जाता है, और यह ४०,०००+ वर्डप्रेस साइटों पर चल रहा है। मास्टर एडॉन्स प्रो विजेट बिल्डर, व्हाइट लेबल मोड, और प्रीमियम समर्थन जोड़ता है यदि आपको लाइन के नीचे उन लोगों की आवश्यकता है।
आरंभ करें
एक की स्थापना छवि तुलना स्लाइडर के बाद से पहले एलिमेंटर में मास्टर एडॉन्स के साथ कुछ मिनट लगते हैं कोई कोड नहीं, कोई प्रीमियम एडऑन खरीद नहीं, स्थापित करने के लिए कोई अलग तुलना प्लगइन नहीं विजेट मुफ़्त है, किसी भी एलिमेंटर सेटअप के साथ काम करता है, और अनुकूलन लेबल टेक्स्ट से लेकर डिवाइडर रंग तक सब कुछ कवर करता है।
मास्टर ऐडऑन मुफ्त में डाउनलोड करें और अपने अगले प्रोजेक्ट पर छवि तुलना विजेट का प्रयास करें यदि आपको अपने एलिमेंटर बिल्ड में अधिक की आवश्यकता है, तो देखें प्रो योजना.
संबंधित पढ़नाः एलिमेंट छवि हिंडोला ट्यूटोरियल | एलिमेंटर फ़िल्टर करने योग्य गैलरी प्लगइन्स | छवि तकनीकों पर 25 एलिमेंटर टेक्स्ट
देखना पसंद करते हैं? यहाँ एलिमेंटर में एक त्वरित वॉकथ्रू हैः
अक्सर पूछे जाने वाले प्रश्न
मैं एलिमेंट में स्लाइडर से पहले और बाद में कैसे जोड़ूं?
मास्टर एडॉन्स (फ्री) स्थापित करें, एलिमेंटर में अपना पेज खोलें, पैनल में छवि तुलना विजेट की खोज करें, और इसे अपने पेज पर खींचें छवियों से पहले और बाद में अपनी अपलोड करें, यदि आप चाहें तो लेबल समायोजित करें, और प्रकाशित करने में लगभग दो मिनट लगते हैं।
क्या एलिमेंट के लिए एक मुफ्त छवि तुलना विजेट है?
हाँ। मास्टर ऐडऑन में क्षैतिज/ऊर्ध्वाधर मोड, कस्टम लेबल, ड्रैग और होवर नियंत्रण और पूर्ण शैली विकल्पों के साथ एक निःशुल्क छवि तुलना विजेट शामिल है। किसी प्रो अपग्रेड की आवश्यकता नहीं है।
वर्डप्रेस के लिए स्लाइडर प्लगइन के बाद सबसे अच्छा क्या है?
एलिमेंटर उपयोगकर्ताओं के लिए, मास्टर एडॉन्स मूल एकीकरण और कई नियंत्रण शैलियों के साथ एक ठोस मुफ्त विकल्प है यदि आप एलिमेंटर पर नहीं हैं, तो बीईएएफ (गैलरी के बाद पहले) जैसे स्टैंडअलोन प्लगइन्स गुटेनबर्ग और अन्य बिल्डरों के साथ काम करते हैं।
कोडिंग के बिना पहले और बाद की छवियां कैसे बनाएं?
मास्टर एडॉन्स छवि तुलना विजेट के साथ एलिमेंटर का उपयोग करें इसे अपने पृष्ठ पर खींचें, दो चित्र अपलोड करें, दृश्य पैनल से सेटिंग्स कॉन्फ़िगर करें किसी भी बिंदु पर कोई कोड की आवश्यकता नहीं है।
क्या मैं मोबाइल पर छवि तुलना स्लाइडर का उपयोग कर सकता हूं?
हाँ विजेट उत्तरदायी है और स्पर्श इशारों का समर्थन करता है आगंतुकों को छवियों की तुलना करने के लिए अपनी उंगली से डिवाइडर स्वाइप करें, डेस्कटॉप पर खींचने के समान।
छवियों से पहले और बाद में क्या आकार होना चाहिए?
दोनों छवियों को सटीक समान आयाम होने की आवश्यकता है १२००×८०० या १९२०×१०८० आम विकल्प हैं बेमेल आकार स्लाइडर को मजबूर-संरेखित करने का कारण बनता है, जो तुलना को विकृत करता है।
मैं क्षैतिज और ऊर्ध्वाधर छवि तुलना कैसे करूं?
विजेट सेटिंग्स में, सामग्री टैब के तहत ओरिएंटेशन विकल्प की तलाश करें क्षैतिज (बाएं/दाएं विभक्त) और लंबवत (ऊपर/नीचे विभक्त) के बीच स्विच करें क्षैतिज डिफ़ॉल्ट है।
क्या एक छवि तुलना स्लाइडर मेरे पृष्ठ को धीमा कर देता है?
सार्थक रूप से नहीं, जब तक आपकी छवियां अनुकूलित हैं विजेट स्क्रिप्ट हल्का है वास्तविक वजन दो छवियां स्वयं हैं उन्हें संपीड़ित वेबपी के रूप में उस आकार में सेवा करें जो वे वास्तव में प्रदर्शित करते हैं और प्रत्येक को १५० केबी या उससे कम के आसपास रखते हैं, और स्लाइडर नगण्य लोड समय जोड़ता है।
मेरे प्रकाशित होने के बाद मेरी छवि तुलना स्लाइडर काम क्यों नहीं कर रहा है?
लगभग हमेशा कैशिंग या एक स्क्रिप्ट संघर्ष अपने पृष्ठ कैश (लाइटस्पीड, क्लाउडफ्लेयर, या डब्ल्यूपी रॉकेट) को शुद्ध करें और हार्ड-रीलोड करें यदि हैंडल अभी भी नहीं खींचेगा, तो मास्टर ऐडऑन जावास्क्रिप्ट को किसी भी गठबंधन या स्थगित सेटिंग से बाहर करें, कैश साफ़ करें, और पुनः परीक्षण करें मास्टर ऐडऑन ऐडऑन और एक्सटेंशन पैनल में हाल ही में अक्षम छवि तुलना विजेट अन्य सामान्य कारण है।
