एलिमेंटर (फ्री) में एक छवि तुलना स्लाइडर कैसे जोड़ें

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

यह मार्गदर्शिका हर सेटिंग के माध्यम से चलती है: विजेट को सक्षम करना, इसे एक पृष्ठ में जोड़ना, आयाम नियम जो लगभग सभी को उनके पहले प्रयास, अभिविन्यास, दृश्यमान अनुपात, हैंडल प्रकार, स्टाइलिंग पर यात्रा करता है, और स्लाइडर के गलत व्यवहार करने पर क्या करना है मोबाइल मैकेनिक्स क्लिक करने के बाद डिज़ाइन विचारों से पहले और बाद में अधिक के लिए, देखें पहले से पहले पूर्ण शोकेस गाइड.

शुरू करने से पहले आपको क्या चाहिए

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

चरण १: छवि तुलना विजेट सक्षम करें

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

चरण २: विजेट को अपने पेज में जोड़ें

एलिमेंट के साथ एक पेज खोलें, एलिमेंट्स पैनल में छवि तुलना खोजें (बैंगनी एमए बैज के लिए देखें), और इसे अपने पेज पर खींचें यह दो प्लेसहोल्डर छवियों और एक काम करने वाले स्लाइडर के साथ लोड करता है, ताकि आप एकल सेटिंग को छूने से पहले लेआउट देख सकें।

चरण ३: अपनी पहले और बाद की छवियां अपलोड करें

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

यदि आप एक ओवरले कैप्शन चाहते हैं, तो प्रत्येक टैब पर एक छोटा लेबल टाइप करें, कुछ इस तरह के “Before” और “After,” या “Old Design” और “Redesign.”

नियम जो हर किसी को ऊपर ले जाता है: मिलान छवि आयाम

दोनों छवियों को सटीक समान पिक्सेल आयाम, समान चौड़ाई और समान ऊंचाई की आवश्यकता है यदि एक तस्वीर १६००×१००० है और दूसरा १२००×८०० है, तो स्लाइडर उनमें से एक को फिट करने के लिए फैलाता है या फसल करता है, और तुलना विकृत या गलत तरीके से दिखती है पल किसी ने हैंडल को खींच लिया।

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

चरण ४: अभिविन्यास सेट करें

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

चरण ५: दृश्यमान अनुपात और हैंडल प्रकार सेट करें

दृश्यमान अनुपात सेट करता है जहां पृष्ठ लोड होने पर हैंडल बैठता है, प्रतिशत के रूप में तटस्थ पहली छाप के लिए इसे लगभग ५०% खोलें, या यदि आप चाहते हैं कि लोड पर छवि के पहले या बाद में हावी हो तो इसे एक तरफ से करीब शुरू करें।

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

चरण ६: स्लाइडर को स्टाइल करें

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

मोबाइल और टच व्यवहार

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

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

मास्टर ऐडऑन बनाम अन्य एलिमेंटर तुलना विकल्प

एलिमेंटर कोर, फ्री या प्रो, का अपना कोई मूल छवि तुलना विजेट नहीं है आप जो भी मार्ग लेते हैं, आप किसी भी तरह से एक तृतीय-पक्ष विजेट स्थापित कर रहे हैं, इसलिए ईमानदार तुलना उन विजेट के बीच है, न कि प्लगइन और “बिल्ट-इन एलिमेंटर।” के बीच

सामान्य समस्याओं का निवारण

• एलिमेंट्स पैनल से विजेट गायबः मास्टर ऐडऑन → विजेट की दोबारा जांच करें और पुष्टि करें कि छवि तुलना सक्षम है।
• स्लाइडर फैला हुआ या तिरछा दिखता हैः दोनों छवियां समान पिक्सेल आयाम नहीं हैं; मिलान के लिए उन्हें क्रॉप करें।
• फोन पर हैंडल नहीं चलेगाः मूव हैंडल होवर पर सेट है; इसे ड्रैग/स्वाइप या क्लिक पर स्विच करें।
• लेबल नहीं दिखा रहे हैंः पुष्टि करें कि सेटिंग्स में ओवरले टॉगल चालू है और वास्तव में दोनों टैब पर एक लेबल टाइप किया गया है।

यदि आपको यह ड्रैग-टू-रिवील इंटरैक्शन पसंद है, तो छवि हॉटस्पॉट विजेट और द छवि होवर प्रभाव विजेट छवियों को एनोटेट या एनिमेट करने के लिए एक समान होवर और क्लिक पैटर्न का उपयोग करें।

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

संबंधित पढ़ना

• पहले से पहले पूर्ण शोकेस गाइड
• छवि तुलना दस्तावेज़ीकरण
• मास्टर ऐडऑन विजेट और एक्सटेंशन लाइब्रेरी