Studio Editor: बटन आइकन में एनिमेशन जोड़ना
स्टाइल्ड बटन का इस्तेमाल कर रहे हैं? आइकन एनिमेशन जोड़कर आई-कैचिंग इफेक्ट्स बनाएँ, जिससे आपके क्लाइंट्स की साइट्स छोटी से छोटी डिटेल तक इंटरैक्टिव बन सकें।
रेडी-मेड इफेक्ट के लिए Wix Studio के कई तरह के प्री-डिजाइन किए गए एनिमेटेड आइकन्स में से चुनें, या कस्टम एनिमेशन बनाने के लिए स्टार्ट और एंड आइकन को कंबाइन करें। आप पर्सनल टच देने के लिए अपनी खुद की SVG फाइल्स भी अपलोड कर सकते हैं।
बटन आइकन एनिमेशन कैसे काम करते हैं?

पहले से डिज़ाइन किया गया आइकन एनिमेशन जोड़ना
तेज़ी से एडिटिंग करने के लिए हमारे शानदार आइकन एनिमेशन में से एक चुनें। एक बार जब आप अपना मनचाहा इफेक्ट चुन लेते हैं, तो आप उसकी ड्यूरेशन (duration) सेट कर सकते हैं।
पहले से डिज़ाइन किया गया एनिमेटेड आइकन जोड़ने के लिए:
- अपने एडिटर पर जाएं।
- संबंधित स्टाइल्ड बटन पर क्लिक करें।
- सेटिंग्स पर क्लिक करें।
- आइकन टाइप के तहत एनिमेटेड पर क्लिक करें।
- चुनें कि आगे क्या करना है:
- आइकन चुनें के तहत मनचाहा आइकन चुनें
- मीडिया मैनेजर में एनिमेटेड आइकन की हमारी पूरी रेंज देखने के लिए जोड़ें आइकन
पर क्लिक करें।
- (ऑप्शनल) एनिमेशन की ड्यूरेशन बदलने के लिए स्लाइडर को ड्रैग करें।
टिप:
एनिमेशन का प्रिव्यू देखने के लिए हमारे पहले से डिज़ाइन किए गए आइकन पर होवर करें।

कस्टम आइकन एनिमेशन बनाना
अपने क्लाइंट की साइट पर बटन्स के लिए अपनी खुद की आइकन एनिमेशन बनाएँ। स्टार्ट आइकन और एंड आइकन, दोनों को चुनकर, आप एक सीमलेस एनिमेशन तैयार कर सकते हैं जो आपके क्लाइंट की साइट के लिए यूनिक हो। Wix के आइकन्स को कंबाइन करें, या अपनी खुद की 2 SVG फाइल्स का इस्तेमाल करें।
कस्टम एनिमेशन बनाने के लिए:
- अपने एडिटर पर जाएँ।
- संबंधित स्टाइल्ड बटन पर क्लिक करें।
- Settings पर क्लिक करें।
- Icon type के नीचे Animated चुनें।
- Add आइकन
पर क्लिक करें और Create new चुनें। - अपने स्टार्ट और एंड आइकन्स सेट करें:
- Start icon के नीचे Add आइकन
पर क्लिक करें। - Media from Wix टैब में कोई फाइल चुनें, या Site Files में अपनी खुद की फाइल अपलोड करें/चुनें।
- Choose File पर क्लिक करें।
- End icon के लिए स्टेप्स a-c दोहराएँ।
- Start icon के नीचे Add आइकन
- (ऑप्शनल) ऊपर Back पर क्लिक करें, और Duration सेट करने के लिए स्लाइडर का इस्तेमाल करें।
क्या आपने अपना इरादा बदल लिया है?
कस्टम पैनल में स्टार्ट / एंड आइकन पर होवर करें, और इसे बदलने के लिए
आइकन बदलें
पर क्लिक करें।
टिप्स:
- आप अपनी खुद की फाइल को Wix के आइकन के साथ कंबाइन कर सकते हैं।
- यह पक्का करने के लिए कि इफेक्ट वैसा ही दिख रहा है जैसा आप चाहते हैं, प्रिव्यू बॉक्स का इस्तेमाल करें।

आइकन डिज़ाइन करना
आइकन को अपने डिज़ाइन विज़न, अपने क्लाइंट की यूनिक ब्रांडिंग और खास बटन के हिसाब से तैयार करें। बटन को और भी डायनेमिक बनाने के लिए आइकन को रिसाइज करें, उसका कलर बदलें और उसे रोटेट करें।
आप बटन के होवर स्टेट को डिज़ाइन कर सकते हैं, जिससे आपको इंटरएक्टिविटी की एक एक्स्ट्रा लेयर जोड़ने का मौका मिलता है - उदाहरण के लिए, होवर करने पर आइकन को रोटेट करें या उसके कलर्स बदलें।
आइकन डिज़ाइन करने के लिए:
- अपने एडिटर पर जाएं।
- संबंधित स्टाइल्ड बटन पर क्लिक करें।
- एडिटर के टॉप राइट में इंस्पेक्टर खोलें आइकन
पर क्लिक करें।

- Design के अंदर संबंधित State चुनें: Regular या Hover।
- Design के अंदर Icon पर क्लिक करें।
- आइकन को डिज़ाइन करने के लिए उपलब्ध विकल्पों का उपयोग करें:
- आइकन को रिसाइज करें।
- आइकन का कलर बदलें और ओपेसिटी (opacity) को एडजस्ट करें।
- आइकन को अलग एंगल पर रोटेट करें।

कस्टम आइकन की ज़रूरतें और गाइडलाइन्स
कस्टम आइकन्स की कुछ ज़रूरतें होती हैं। अपनी खुद की फाइल्स अपलोड करने और इस्तेमाल करने के लिए, उनका ऐसा होना ज़रूरी है:
- सिर्फ सॉलिड ब्लैक (#000000)
- SVG फॉर्मेट में
- 250KB से ज्यादा बड़ा नहीं
नोट:
अगर आपने अपनी SVG फाइल्स Adobe Illustrator या Figma में बनाई हैं, तो उन्हें एक्सपोर्ट करने से पहले कंपाउंड पाथ (compound path) में बदला जाना चाहिए।
आइकन बनाते समय कुछ बेस्ट प्रैक्टिसेज को ध्यान में रखना भी ज़रूरी है। एनिमेशन को जितना हो सके उतना स्मूथ बनाने के लिए हम नीचे दिए गए गाइडलाइन्स को फॉलो करने की सलाह देते हैं।
- पक्का करें कि स्टार्ट और एंड आइकन्स की स्टार्टिंग पोजीशन एक ही हो।
- चेक करें कि दोनों आइकन्स में पॉइंट्स की संख्या एक समान हो।
- फिल्ड आइकन्स (बिना कट-आउट वाले) का इस्तेमाल करें।
- एक बड़े शेप के बजाय, SVG आइकन बनाने के लिए कई छोटे शेप्स का इस्तेमाल करें।
- शेप्स की क्वालिटी बनाए रखने के लिए उन्हें रिसाइज करते समय स्केल करें।
- आर्टबोर्ड पर पिक्सल के साथ अलाइनमेंट पक्का करने के लिए प्रोग्राम के पिक्सल व्यू का इस्तेमाल करें।
- अगर आपके आइकन्स बहुत अलग शेप के हैं, तो और भी स्मूथ ट्रांजिशन के लिए आप इन टिप्स को आज़मा सकते हैं:
- आइकन्स के मॉर्फ्ड वर्जन्स का इस्तेमाल करें (एक स्टार्ट आइकन जिसे एंड आइकन में थोड़ा मॉर्फ किया गया हो और इसके विपरीत)।
- एक आइकन के शेप्स को दूसरे पर छिपाएँ (जैसे स्टार्ट आइकन पर एंड आइकन के शेप्स को छिपाना)।
जरूरी:
हम Wix के बाहर आपके द्वारा बनाई गई SVG फाइल्स के लिए सपोर्ट या ट्रबलशूटिंग नहीं दे सकते।

