पहले और बाद में सेक्शन दो इमेज को एक के ऊपर एक रखता है, बीच में एक डिवाइडर के साथ। ग्राहक डिवाइडर को खींचकर एक या दूसरी इमेज का ज़्यादा हिस्सा देखते हैं। इसे नतीजों (पहले और बाद), दो रंगों, या किसी प्रोडक्ट की दो फ़िनिश के लिए इस्तेमाल करें।
सेक्शन जोड़ें
- बिल्डर खोलें और अपने चाहे पेज पर जाएँ। यह होम, प्रोडक्ट, लैंडिंग, कलेक्शन और कलेक्शन्स पेज पर काम करता है, एक पेज पर ज़्यादा से ज़्यादा 3।
- सेक्शन टैब में नया सेक्शन जोड़ें पर क्लिक करें और कंटेंट ग्रुप से पहले और बाद में चुनें।
- उसके अंदर पहले और बाद में ब्लॉक पर क्लिक करें और अपनी दो इमेज चुनें, फिर पब्लिश करें पर क्लिक करें।
पहले और बाद में ब्लॉक
इस ब्लॉक में दोनों इमेज होती हैं। यह हमेशा सेक्शन में रहता है और हटाया नहीं जा सकता।
- पहले की इमेज और बाद की इमेज: दोनों तस्वीरें। एक ही कोण से ली गई फ़ोटो इस्तेमाल करें, ताकि वे एक सीध में आएँ।
- पहले वाला लेबल और बाद वाला लेबल: हर इमेज के कोने पर एक छोटा टैग, जैसे "पहले" और "बाद", या "काला" और "सफ़ेद"। टैग छिपाने के लिए इसे खाली छोड़ दें।
- दिशा: हॉरिज़ॉन्टल में डिवाइडर होता है जिसे ग्राहक बाएँ दाएँ खींचते हैं। वर्टिकल में डिवाइडर होता है जिसे ग्राहक ऊपर नीचे खींचते हैं।
- अनुपात: फ़्रेम का आकार। ऑटो पहले की इमेज के हिसाब से चलता है, या पोर्ट्रेट, स्क्वायर या लैंडस्केप चुनें। दोनों इमेज एक ही फ़्रेम में काटी जाती हैं।
- डिवाइडर की पोज़िशन: डिवाइडर कहाँ से शुरू हो, 5% से 95% तक। 50% पर ग्राहक हर इमेज का आधा हिस्सा देखते हैं।
- दिखाई देने पर एक संकेत दिखाएँ: डिवाइडर अपने आप थोड़ा हिलता है, ताकि ग्राहक समझें कि वे इसे खींच सकते हैं।
- डेस्कटॉप पर माउस के साथ चलें: कंप्यूटर पर डिवाइडर बिना क्लिक के माउस के साथ चलता है। फ़ोन पर ग्राहक हमेशा खींचते हैं।
- पैरेंट की कलर स्कीम इस्तेमाल करें: डिवाइडर, हैंडल और टैग सेक्शन के रंग इस्तेमाल करते हैं। दूसरी कलर स्कीम चुनने के लिए इसे बंद करें।
सेक्शन की सेटिंग्स और टाइटल
हेडिंग और छोटे टेक्स्ट के लिए ज़्यादा से ज़्यादा 2 टेक्स्ट ब्लॉक, 1 डिवाइडर और 1 ग्रुप जोड़ें।
- दिशा: वर्टिकल हेडिंग को इमेज के ऊपर रखता है, हॉरिज़ॉन्टल उसे उनके बगल में रखता है।
- मोबाइल पर एक के नीचे एक रखें: डिफ़ॉल्ट रूप से चालू, ताकि इमेज फ़ोन की पूरी चौड़ाई लें।
- पोज़िशन और अलाइनमेंट, सेक्शन की चौड़ाई, कलर स्कीम, पैडिंग, और एक कस्टम CSS टैब।
प्रोडक्ट पेज पर
यही पहले और बाद में ब्लॉक प्रोडक्ट जानकारी और लैंडिंग जानकारी सेक्शन के अंदर, और खुलने बंद होने वाले टैब के अंदर भी जा सकता है, ताकि तुलना खरीदें बटन के पास रहे। देखें अपने प्रोडक्ट पेज पर खुलने बंद होने वाले टैब, डिलीवरी की तारीख, साइज़ गाइड, बैज या पहले और बाद की इमेज कैसे जोड़ें?
ध्यान रखें
- आपके लाइव स्टोर पर तुलना तभी दिखती है जब दोनों इमेज चुनी गई हों। तब तक बिल्डर नमूने की इमेज दिखाता है।
- ग्राहक कीबोर्ड से भी डिवाइडर हिला सकते हैं।
- जिन ग्राहकों ने अपने डिवाइस पर कम मोशन चालू किया है, उन्हें संकेत वाली हलचल नहीं दिखती।
- इमेज कटी हुई दिखती हैं? अपनी फ़ोटो के सबसे करीब वाला अनुपात चुनें, या एक ही आकार की फ़ोटो इस्तेमाल करें।
- सिर्फ़ असली नतीजों की असली फ़ोटो इस्तेमाल करें।