Studio एडिटर: सेक्शन का बैकग्राउंड बदलना और कस्टमाइज करना
10 मिनट
अपने क्लाइंट की साइट के हर
सेक्शन को बारीकी से डिजाइन करें। मनचाहा लुक सेट करने के लिए बैकग्राउंड में कलर, ग्रेडिएंट, इमेज या वीडियो चुनें। विजुअल अपील बढ़ाने और ज्यादा एंगेजिंग एक्सपीरियंस बनाने के लिए आप पैटर्न ओवरले और स्क्रॉल इफेक्ट भी जोड़ सकते हैं।
यूजर इंटरैक्शन को ध्यान में रखते हुए इन एलिमेंट्स को अपने क्लाइंट के ब्रांड और विजन के मुताबिक कस्टमाइज करें।
जानकारी के लिए:
- हर डिवाइस पर सेक्शन का बैकग्राउंड सही दिखे, इसके लिए आप हर ब्रेकपॉइंट के लिए उसका बैकग्राउंड कलर/ग्रेडिएंट सेट कर सकते हैं।
- डिजाइन प्रोसेस को तेज करने के लिए, हमने ऐड एलिमेंट्स पैनल में सेक्शंस के तहत ढेरों रेडी-मेड और पूरी तरह रिस्पॉन्सिव सेक्शन बनाए हैं।
सेक्शन के बैकग्राउंड में कलर जोड़ना
अपने सेक्शन के बैकग्राउंड के लिए कोई भी कलर चुनें—चाहे वह आपके
थीम कलर्स में से एक हो या कोई कस्टम कलर। अगर आप बैकग्राउंड को थोड़ा हल्का रखना चाहते हैं, तो उसकी अपारदर्शिता भी सेट कर सकते हैं।
सेक्शन का बैकग्राउंड कलर बदलने के लिए:
- संबंधित सेक्शन चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन
पर क्लिक करें।
- डिजाइन के नीचे मौजूद कलर बॉक्स पर क्लिक करें।
- अपनी पसंद के मुताबिक कोई कलर चुनें:
- थीम कलर्स: अपने साइट कलर्स में से कोई एक चुनें।
- माय कलर्स: कोई मौजूदा कस्टम कलर चुनें।
- नया कलर: कलर पिकर में नया कलर जोड़ने के लिए + ऐड पर क्लिक करें।
- (वैकल्पिक) कलर की अपारदर्शिता बढ़ाने या घटाने के लिए स्लाइडर का इस्तेमाल करें।
सेक्शन के बैकग्राउंड में ग्रेडिएंट जोड़ना
Studio एडिटर में आपके सेक्शन के बैकग्राउंड के लिए अलग-अलग तरह के ग्रेडिएंट उपलब्ध हैं:
- रेडियल, लिनियर या कॉनिक ग्रेडिएंट
: अधिकतम 8 कलर चुनें और इन ग्रेडिएंट में हर कलर की अपारदर्शिता को अलग-अलग कंट्रोल करें। मनचाहा लुक पाने के लिए आप एंगल (लिनियर), फोकल पॉइंट (रेडियल) या दोनों (कॉनिक) को भी एडजस्ट कर सकते हैं। - फ्लूइड ग्रेडिएंट
: इस ग्रेडिएंट से आप जरूरत के मुताबिक कई कलर्स को ब्लेंड करके मेश जैसा इफेक्ट बना सकते हैं। आप इस ग्रेडिएंट में हर कलर की अपारदर्शिता, साइज और स्प्रेड को अलग-अलग कंट्रोल कर सकते हैं।
सेक्शन में ग्रेडिएंट बैकग्राउंड जोड़ने के लिए:
- संबंधित सेक्शन चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- डिजाइन के नीचे मौजूद कलर बॉक्स पर क्लिक करें।
- हर तरह का ग्रेडिएंट बनाने का तरीका जानने के लिए, अपनी पसंद के मुताबिक नीचे दिए गए विकल्प पर क्लिक करें:
लीनियर, रेडियल या कॉनिक ग्रेडिएंट जोड़ें
पर क्लिक करें।
में बदल जाएगा।
पर क्लिक करें।
फ्लूइड ग्रेडिएंट जोड़ें
पर क्लिक करें।
सेक्शन बैकग्राउंड में इमेज जोड़ना
कैनवास या इंस्पेक्टर पैनल से सेक्शन के बैकग्राउंड में इमेज जोड़ें। आप अपनी अपलोड की गई इमेज का इस्तेमाल कर सकते हैं, Wix/अनस्प्लैश से कोई मुफ़्त इमेज चुन सकते हैं या शटरस्टॉक से कोई इमेज खरीद सकते हैं। इमेज जोड़ने के बाद, आप उसका फोकल पॉइंट एडजस्ट कर सकते हैं, ताकि इमेज का ज़रूरी हिस्सा हमेशा दिखाई दे।
टिप:
आप अपनी इमेज के ऊपर कलर या ग्रेडिएंट ओवरले जोड़ सकते हैं। कलर या ग्रेडिएंट चुनने के लिए कलर बॉक्स पर क्लिक करें। फिर इस लेयर की अपारदर्शिता एडजस्ट करने के लिए स्लाइडर को ड्रैग करें।
पेज के सेक्शन में इमेज बैकग्राउंड जोड़ने के लिए:
- अपने एडिटर में संबंधित पेज खोलें।
- आगे क्या करना है, चुनें:
सीधे कैनवास पर इमेज बैकग्राउंड अप्लाई करें
पर क्लिक करें।
पर क्लिक करें।
इंस्पेक्टर पैनल से इमेज बैकग्राउंड अप्लाई करें
मौजूदा इमेज बैकग्राउंड को कस्टमाइज़ करना
पर क्लिक करें, जैसे पैरालैक्स। 
क्या आपने किसी साइट को Editor X से Studio में अपडेट किया है?
अगर आपने किसी बैकग्राउंड इमेज पर पैरालैक्स इफ़ेक्ट अप्लाई किया है, तो Studio में वह वैसा ही रहेगा—जब तक कि आप इफ़ेक्ट डिलीट न करें या इमेज न बदलें।
Studio एडिटर में, आप इनमें से किसी भी तरीके से इमेज पर पैरालैक्स इफ़ेक्ट जोड़ सकते हैं:
- इमेज को सेक्शन के बैकग्राउंड के तौर पर सेट करें, फिर सेक्शन पर बैकग्राउंड स्क्रॉल इफ़ेक्ट अप्लाई करें।
- इमेज को सेक्शन में जोड़ें, फिर उस पर स्क्रॉल पैरालैक्स एनिमेशन अप्लाई करें। ध्यान रखें कि इमेज पर कोई दूसरा एनिमेशन अप्लाई न हो।
सेक्शन के बैकग्राउंड में वीडियो जोड़ना
अपने सेक्शन में मूवमेंट का एहसास जोड़ने के लिए, वीडियो बैकग्राउंड ऐड करें। आप वीडियो का फोकल पॉइंट चुन सकते हैं, उसकी प्लेबैक स्पीड बदल सकते हैं और तय कर सकते हैं कि वह लूप में प्ले हो या नहीं।
हमारे पास मुफ़्त वीडियो की पूरी लाइब्रेरी है, जिसका इस्तेमाल आप अपने बैकग्राउंड के लिए कर सकते हैं। आप अपनी फ़ाइलें भी इस्तेमाल कर सकते हैं या Shutterstock से वीडियो खरीद सकते हैं।
टिप:
आप अपने वीडियो बैकग्राउंड के ऊपर कलर या ग्रेडिएंट ओवरले जोड़ सकते हैं। कलर या ग्रेडिएंट चुनने के लिए कलर बॉक्स पर क्लिक करें, फिर इस लेयर की ओपेसिटी एडजस्ट करने के लिए स्लाइडर ड्रैग करें।
पेज सेक्शन में वीडियो बैकग्राउंड जोड़ने के लिए:
- संबंधित सेक्शन सिलेक्ट करें।
- एडिटर के ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- + ऐड इमेज ऑर वीडियो पर क्लिक करें, जो मीडिया के नीचे है।
- (मीडिया मैनेजर में) अगला एक्शन चुनें:
- अपना वीडियो चुनें या अपलोड करें।
- हमारे मुफ़्त वीडियो में से कोई वीडियो इस्तेमाल करने के लिए, मीडिया फ्रॉम Wix /अनस्प्लैश टैब पर क्लिक करें।
- शटरस्टॉक से वीडियो खरीदने के लिए, शटरस्टॉक टैब पर क्लिक करें।
- चेंज बैकग्राउंड पर क्लिक करें।
- (वैकल्पिक) इंस्पेक्टर पैनल में अपने वीडियो बैकग्राउंड को कस्टमाइज़ करें:
- फ़ोकल पॉइंट: वीडियो का वह हिस्सा चुनने के लिए फ़ोकल पॉइंट आइकन
पर क्लिक करें, जो स्क्रीन का साइज़ बदलने पर भी हमेशा दिखाई देना चाहिए। - ओपेसिटी: वीडियो की विज़िबिलिटी बदलने के लिए स्लाइडर ड्रैग करें।
- प्लेबैक स्पीड: स्पीड चुनने के लिए ड्रॉप-डाउन पर क्लिक करें, जैसे नॉर्मल, 0.25x या 1.25x।
- प्ले इन अ लूप: वीडियो कैसे प्ले होगा, यह बदलने के लिए टॉगल पर क्लिक करें:
- इनेबल्ड: वीडियो बैकग्राउंड में लगातार लूप में चलता है।
- डिसेबल्ड: वीडियो विज़िटर्स के लिए सिर्फ़ एक बार प्ले होता है और फिर रुक जाता है।
- फ़ोकल पॉइंट: वीडियो का वह हिस्सा चुनने के लिए फ़ोकल पॉइंट आइकन
इसे लाइव देखना चाहते हैं?
वीडियो सीधे कैनवस पर कैसा दिखता है, यह देखने के लिए उस पर मौजूद प्ले बटन पर क्लिक करें।
सेक्शन के बैकग्राउंड में पैटर्न ओवरले जोड़ना
अपने सेक्शन के बैकग्राउंड पर एक दिलचस्प पैटर्न अप्लाई करें। अलग-अलग रंगों और साइज़ में उपलब्ध पैटर्न की लिस्ट ब्राउज़ करें। अपनी पसंद के पैटर्न पर क्लिक करने से आप देख सकते हैं कि वे बैकग्राउंड के साथ कैसे ब्लेंड होते हैं।
सेक्शन के बैकग्राउंड में पैटर्न ओवरले जोड़ने के लिए:
- संबंधित सेक्शन चुनें।
- एडिटर में ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- अप्लाई पैटर्न ओवरले टॉगल को ऑन करें, जो बैकग्राउंड ओवरले के नीचे है।
- उपलब्ध पैटर्न ब्राउज़ करें। किसी पैटर्न पर क्लिक करने से वह ओवरले के रूप में जुड़ जाएगा और आप देख सकेंगे कि वह आपके बैकग्राउंड पर कैसा दिखता है।
सेक्शन के बैकग्राउंड में स्क्रॉल इफेक्ट जोड़ना
बैकग्राउंड स्क्रॉल इफेक्ट से आपके क्लाइंट की साइट पर ऊपर-नीचे स्क्रॉल करने वाले विज़िटर्स को मूवमेंट का एहसास होता है। आप कई इफेक्ट्स (जैसे पैरालैक्स, 3D और ज़ूम) में से चुन सकते हैं, जिनसे आपके क्लाइंट का कंटेंट सबसे अलग नज़र आता है।
ध्यान दें:
उपलब्ध स्क्रॉल इफेक्ट इस बात पर निर्भर करते हैं कि आपने सेक्शन के लिए किस तरह का बैकग्राउंड चुना है, जैसे कलर या इमेज।
बैकग्राउंड स्क्रॉल इफेक्ट जोड़ने के लिए:
- संबंधित सेक्शन चुनें।
- एडिटर में सबसे ऊपर दाईं ओर मौजूद ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- एनिमेशंस और इफेक्ट्स टैब
पर क्लिक करें। - + ऐड पर क्लिक करें, जो स्क्रॉल के नीचे है।
- लिस्ट से अपनी पसंद का इफेक्ट चुनें।
- (वैकल्पिक) इफेक्ट की सेटिंग्स में बदलाव करने के लिए, सबसे नीचे एडजस्ट एनिमेशन पर क्लिक करें।
