Wix प्रो गैलरी: अपनी मोबाइल साइट के लिए गैलरी डिज़ाइन को कस्टमाइज़ करना

18 मिनट

अपनी साइट के डेस्कटॉप वर्ज़न को प्रभावित किए बिना मोबाइल डिवाइस पर अपनी प्रो गैलरी के लुक को ऑप्टिमाइज़ करें। इसका मतलब है कि आप अपनी मोबाइल / टैबलेट साइट पर गैलरी के डिज़ाइन को अपनी डेस्कटॉप साइट से पूरी तरह अलग दिखने के लिए कस्टमाइज़ कर सकते हैं।

अपनी गैलरी के डिज़ाइन को कस्टमाइज़ करना

आप मोबाइल पर प्रो गैलरी के ओवरले, टेक्स्ट, आइटम स्टाइल और स्क्रॉल एनिमेशन को कस्टमाइज़ कर सकते हैं। उपलब्ध कस्टमाइज़ेशन विकल्प आपके द्वारा चुने गए गैलरी लेआउट पर निर्भर करते हैं।

Wix एडिटर

Studio एडिटर

अपने एडिटर पर जाएँ।
एडिटर के सबसे ऊपर स्विच टू मोबाइल आइकन पर क्लिक करें।
अपने पेज पर प्रो गैलरी एलिमेंट पर क्लिक करें।
सेटिंग्स पर क्लिक करें।
डिज़ाइन टैब पर क्लिक करें।
उपलब्ध विकल्पों का उपयोग करके अपनी गैलरी को कस्टमाइज़ करें:

ओवरले और आइकन्स

ओवरले इमेज के ऊपर रहता है, और जब आप माउस से इमेज पर होवर करते हैं तो एक एक्स्ट्रा इफेक्ट जोड़ता है। आप इस इफेक्ट के साथ-साथ किसी भी आइकन को कस्टमाइज़ कर सकते हैं।

Overlay & Icons पर क्लिक करें।
Full या Partial ओवरले में से चुनें और उपलब्ध विकल्पों का उपयोग करके कस्टमाइज़ करें:
- Full Overlay: ओवरले पूरे गैलरी आइटम को कवर करता है।
  - Gradient: ग्रेडिएंट ओवरले को इनेबल करने के लिए टॉगल पर क्लिक करें।
    - Color & Opacity 1 and 2: ग्रेडिएंट के रंगों को कस्टमाइज़ करने के लिए संबंधित कलर बॉक्स पर क्लिक करें। फिर रंगों की ओपेसिटी एडजस्ट करने के लिए स्लाइडर को ड्रैग करें।
    - Gradient Direction: ग्रेडिएंट की ओवरले दिशा को एडजस्ट करने के लिए स्लाइडर को ड्रैग करें।
    - Icon Color: होवर करने पर दिखाई देने वाले गैलरी आइकन का रंग बदलने के लिए कलर बॉक्स पर क्लिक करें।
  - Color overlay: रंग चुनने के लिए कलर बॉक्स पर क्लिक करें। फिर कलर ओवरले की ट्रांसपेरेंसी बदलने के लिए स्लाइडर को ड्रैग करें।
  - Icon color: कलर बॉक्स पर क्लिक करें और अपने गैलरी आइकन के लिए एक नया रंग चुनें।
- Partial Overlay: ओवरले गैलरी आइटम के केवल एक हिस्से को कवर करता है।
  - Set size in: अपने ओवरले का साइज प्रतिशत या पिक्सेल में मैनेज करें।
  - Size: ओवरले साइज चुनने के लिए स्लाइडर को ड्रैग करें या वैल्यू दर्ज करें।
  - Overlay starts from: चुनें कि आपका ओवरले कहाँ स्थित होगा।
  - Padding: गैलरी बॉर्डर और आपके ओवरले के बीच की जगह को एडजस्ट करने के लिए स्लाइडर को ड्रैग करें।
  - Gradient: ग्रेडिएंट ओवरले को इनेबल करने के लिए टॉगल पर क्लिक करें।
    - Color & Opacity 1 and 2: ग्रेडिएंट के रंगों को कस्टमाइज़ करने के लिए संबंधित कलर बॉक्स पर क्लिक करें। फिर रंगों की ओपेसिटी एडजस्ट करने के लिए स्लाइडर को ड्रैग करें।
    - Gradient Direction: ग्रेडिएंट की ओवरले दिशा को एडजस्ट करने के लिए स्लाइडर को ड्रैग करें।
    - Icon Color: होवर करने पर दिखाई देने वाले गैलरी आइकन का रंग बदलने के लिए कलर बॉक्स पर क्लिक करें।
  - Color overlay: रंग चुनने के लिए कलर बॉक्स पर क्लिक करें। फिर कलर ओवरले की ट्रांसपेरेंसी बदलने के लिए स्लाइडर को ड्रैग करें।
  - Icon color: कलर बॉक्स पर क्लिक करें और अपने गैलरी आइकन के लिए एक नया रंग चुनें।
उपलब्ध विकल्पों में से एक ओवरले इफेक्ट चुनें:
- No effect: ओवरले कोई इफेक्ट लागू नहीं करता है।
- Fade in: होवर करने पर ओवरले धीरे-धीरे दिखाई देता है।
- Expand: होवर करने पर ओवरले फैलता है।
- Slide up: होवर करने पर ओवरले ऊपर की ओर स्लाइड होता है।
- Slide right: होवर करने पर ओवरले दाईं ओर स्लाइड होता है।

टेक्स्ट

आप टाइटल और डिस्क्रिप्शन टेक्स्ट के डिज़ाइन को कस्टमाइज़ कर सकते हैं, बशर्ते आपने उन्हें Design टैब पर दिखाना चुना हो। यदि आपको Texts ऑप्शंस (नीचे स्टेप 1) नहीं दिखते हैं, तो Design टैब पर जाएँ, Texts पर क्लिक करें और उन्हें दिखाने के लिए Title और Description के बगल वाले चेकबॉक्स चुनें।

नोट: उपलब्ध टेक्स्ट डिज़ाइन ऑप्शंस आपके द्वारा चुने गए लेआउट पर निर्भर करते हैं।

Texts पर क्लिक करें।
नीचे दिए गए ऑप्शंस का उपयोग करके टेक्स्ट को कस्टमाइज़ करें:
- Title style and color: टाइटल टेक्स्ट का फॉन्ट और कलर चुनें।
- Description font style and color: डिस्क्रिप्शन टेक्स्ट का फॉन्ट और कलर चुनें।
- Info position: अपनी गैलरी की जानकारी को गैलरी आइटम्स के ऊपर, नीचे या उन पर दिखाने का विकल्प चुनें।
- What happens to the info on 1st tap?: चुनें कि पहले टैप पर आपकी जानकारी दिखाई दे, गायब हो जाए या न बदले।
- Horizontal alignment: हॉरिजॉन्टल टेक्स्ट को लेफ्ट, सेंटर या राइट में एलाइन करना चुनें।
- Vertical alignment: वर्टिकल टेक्स्ट को लेफ्ट, सेंटर या राइट में एलाइन करना चुनें।

नोट्स:

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

आइटम स्टाइल

गैलरी में मौजूद हर इमेज या वीडियो एक आइटम है। आप रेगुलर और होवर (hover) दोनों मोड के लिए आइटम का लुक बदल सकते हैं।

Item Style पर क्लिक करें।
Item Style के अंदर आइटम के रेगुलर व्यू को कस्टमाइज़ करें:
- Border width and color: बॉर्डर की चौड़ाई बदलने के लिए स्लाइडर को ड्रैग करें और रंग चुनने के लिए कलर बॉक्स पर क्लिक करें।
- Corner radius: कोनों को ज़्यादा राउंड या स्क्वेयर बनाने के लिए स्लाइडर को ड्रैग करें।
  नोट: Border width & color और Corner radius के विकल्प केवल तभी उपलब्ध होते हैं जब आप अपने लेआउट की सेटिंग्स में थंबनेल को क्रॉप करना चुनते हैं।
- Shadow: शैडो को इनेबल या डिसेबल करने के लिए टॉगल पर क्लिक करें:
  - Enabled: गैलरी आइटम के चारों ओर एक शैडो दिखाई देगी। इसकी ओपेसिटी (opacity), कलर, ब्लर, शैडो की दिशा और साइज को कस्टमाइज़ करें।
  - Disabled: गैलरी आइटम के चारों ओर कोई शैडो नहीं होगी।
यह चुनें कि जब कोई अपने माउस से गैलरी आइटम पर होवर करे तो क्या हो:
- No effect: होवर करने पर कोई इफेक्ट नहीं दिखेगा।
- Zoom in: होवर करने पर इमेज ज़ूम इन हो जाएगी।
- Blur: होवर करने पर इमेज ब्लर हो जाएगी।
- Grayscale: होवर करने पर इमेज ब्लैक एंड व्हाइट हो जाएगी।
- Shrink: होवर करने पर इमेज छोटी हो जाएगी।
- Invert: होवर करने पर इमेज का रंग इनवर्ट (उल्टा) हो जाएगा।
- Color in: होवर करने पर इमेज ब्लैक एंड व्हाइट से रंगीन हो जाएगी।
- Darken: होवर करने पर इमेज थोड़ी डार्क हो जाएगी।
इमेज लोड होने के दौरान क्या हो, यह चुनें:
- Blurred image: लोड होने के दौरान इमेज का एक ब्लर वर्जन दिखाई देगा।
- Color placeholder: इमेज लोड होने के दौरान एक रंगीन प्लेसहोल्डर दिखाई देगा।

बटन

स्क्रॉल एनिमेशन

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

नोट:

उपलब्ध एनीमेशन आपके द्वारा चुने गए गैलरी लेआउट पर निर्भर करते हैं।

स्क्रॉल एनीमेशन जोड़ना:

Scroll Animations पर क्लिक करें।
चुनें कि जब विजिटर्स आपकी गैलरी को स्क्रॉल करें तो क्या होना चाहिए:
- No effect: स्क्रॉल पर कोई इफेक्ट लागू नहीं होता है।
- Fade in: स्क्रॉल के दौरान इमेज धीरे-धीरे दिखाई देती हैं।
- Grayscale: स्क्रॉल करते समय इमेज ब्लैक एंड व्हाइट हो जाती है।
- Slide up: स्क्रॉल करते समय इमेज ऊपर की ओर स्लाइड होती है।
- Expand: स्क्रॉल करते समय इमेज बड़ी हो जाती है।
- Shrink: स्क्रॉल करते समय इमेज छोटी हो जाती है।
- Zoom out: स्क्रॉल करते समय इमेज ज़ूम आउट हो जाती है।
- One color: स्क्रॉल करते समय इमेज पर एक सिंगल कलर लागू हो जाता है।

अपने एनीमेशन को कस्टमाइज़ करना:

Customize Animations पर क्लिक करें।
अपनी एनीमेशन सेटिंग्स को अपनी ज़रूरत के अनुसार बदलें:
- Transition style: अपने गैलरी आइटम्स पर मोशन इफेक्ट लागू करने के लिए ड्रॉप-डाउन पर क्लिक करें। यह इफेक्ट स्क्रॉल करने पर लागू होता है, जब विजिटर्स एक आइटम से दूसरे आइटम पर जाते हैं।
- Duration: आपका एनीमेशन कितने समय तक चलेगा, इसे एडजस्ट करने के लिए स्लाइडर को ड्रैग करें।

एक्सपैंड मोड

यह सेक्शन तब दिखाई देता है जब आपने प्रो गैलरी के सेटिंग्स पैनल में "Open in Expand Mode" चुना हो, जब कोई यूजर गैलरी आइटम पर क्लिक करता है। यहाँ से आप अपनी गैलरी के Expand Mode को अपनी साइट के डिज़ाइन और ब्रांड के अनुसार कस्टमाइज़ कर सकते हैं।

Expand Mode पर क्लिक करें।
Customize Expand Mode पर क्लिक करें और निम्नलिखित ऑप्शंस का उपयोग करके गैलरी के एक्सपैंड मोड को पर्सनलाइज़ करें:
- What info is shown? टाइटल, डिस्क्रिप्शन और/या लिंक दिखाने का विकल्प चुनें।
- Where does it appear? चुनें कि आप जानकारी को कहाँ रखना चाहते हैं:
  - Side: जानकारी गैलरी आइटम के दाईं ओर दिखाई देती है।
  - Bottom: जानकारी गैलरी आइटम के नीचे दिखाई देती है।
- When does it show? चुनें कि जानकारी कब दिखाई दे:
  - Always: जानकारी हमेशा दिखाई देती है।
  - When clicking info icon: जानकारी केवल तब दिखाई देती है जब कोई विजिटर Expand Mode के ऊपरी बाएँ कोने में इन्फो आइकन पर क्लिक करता है।
- Allow full screen: विजिटर्स को गैलरी आइटम्स को फुल-स्क्रीन मोड में देखने की अनुमति देने का विकल्प चुनें।
- Background color: एक्सपैंड मोड के लिए बैकग्राउंड कलर चुनने के लिए कलर बॉक्स पर क्लिक करें। अपनी साइट के कलर्स में से चुनें या कोई नया कलर जोड़ें।
- Icon color: एक्सपैंड मोड में आइकन के लिए कलर चुनने के लिए कलर बॉक्स पर क्लिक करें। अपनी साइट के कलर्स में से चुनें या कोई नया कलर जोड़ें।
- Title style:
  - Font Picker से फॉन्ट, स्टाइल और साइज कस्टमाइज़ करने के लिए ड्रॉप-डाउन मेनू पर क्लिक करें।
  - टाइटल के टेक्स्ट का कलर बदलने के लिए कलर बॉक्स पर क्लिक करें।
- Description style:
  - Font Picker से फॉन्ट, स्टाइल और साइज कस्टमाइज़ करने के लिए ड्रॉप-डाउन मेनू पर क्लिक करें।
  - डिस्क्रिप्शन के टेक्स्ट का कलर बदलने के लिए कलर बॉक्स पर क्लिक करें।
- Text alignment: टेक्स्ट का एलाइनमेंट चुनें: लेफ्ट, सेंटर या राइट।

अक्सर पूछे जाने वाले सवाल (FAQs)

अपनी मोबाइल साइट के लिए गैलरी डिज़ाइन को कस्टमाइज़ करने के बारे में अधिक जानने के लिए नीचे दिए गए प्रश्न पर क्लिक करें:

मेरी गैलरी से ओवरले और आइकन और आइटम स्टाइल डिज़ाइन विकल्प क्यों गायब हैं?

मैं मोबाइल पर अपनी गैलरी से जुड़ी समस्याओं को कैसे ठीक (troubleshoot) कर सकता हूँ?

क्या इससे मदद मिली?

इस लेख में

अपनी गैलरी के डिज़ाइन को कस्टमाइज़ करना
अक्सर पूछे जाने वाले सवाल (FAQs)