Wix के साथ शुरुआत करनाWix के साथ अपनी वेबसाइट और बिज़नेस बनाएँअपनी वेबसाइट बनाने, टेम्पलेट कस्टमाइज़ करने, या अपनी ऑनलाइन प्रेज़ेंस बेहतर बनाने के लिए प्रोफ़ेशनल्स को हायर करने के लिए हमारे AIटूल्स देखे
वेबसाइट बनानापढ़ें कि Wix एडिटर का इस्तेमाल कैसे करें और अपनी साइट पर कंटेंट कैसे मैनेज करें। जानें कि अपने विज़िटर्स की प्राइवेसी कैसे सुरक्षित रखें और अपनी साइट को एक्सेसिबल कैसे बनाएं।
अकाउंट और बिलिंगअपनी अकाउंट सेटिंग्स देखें, अपने सब्सक्रिप्शन और प्लान मैनेज करें और अपने इनवॉइस समझें.
Wix मोबाइल ऐप का इस्तेमाल करनाअपने बिज़नेस को चलते-फिरते अच्छे से चलाने के लिए हमारे मोबाइल ऐप्स का इस्तेमाल करें और अपनी साइट के मेंबर्स के टच में रहने के लिए एक खास ऐप सेट अप करें।
डोमेन कनेक्ट करनाअपनी साइट के लिए डोमेन खरीदने, कनेक्ट करने या ट्रांसफर करने का तरीका जानने के लिए हमारे स्टेप-बाय-स्टेप गाइड को फॉलो करें, और जानें कि अपनी साइट का डेटा कैसे सुरक्षित रखें।
अपना बिज़नेस मैनेज़ करनाअपने बिज़नेस और वेब प्रेजेंस को बढ़ाने के लिए टूल्स लें। अपनी खास ज़रूरतों के लिए सही टूल्स ढूंढें, ऑनलाइन पेमेंट सेट अप करें और अपनी साइट के एनालिटिक्स पर नज़र रखें।
अपनी साईट प्रमोट करना सर्च इंजन पर इसे प्रमोट करके, ईमेल भेजकर और पेड ऐड चलाकर अपनी साइट को ज़्यादा विज़िबल बनाना सीखें। प्रैक्टिकल टिप्स से अपनी ऑनलाइन प्रेजेंस को बेहतर बनाएं।
स्टूडियो, पार्टनर और एंटरप्राइअपने स्टूडियो या एंटरप्राइज़ अकाउंट का ज़्यादा से ज़्यादा फ़ायदा उठाएँ, एडवांस्ड फ़ीचर्स के साथ जो आपको ज़्यादा अच्छे से काम करने में मदद करेंगे.
और अधिक मदद की आवश्यकता है?साइट परफॉर्मेंस और टेक्निकल दिक्कतों के लिए सॉल्यूशन ढूंढें, उन दिक्कतों के बारे में जानें जिन्हें हम ठीक करने पर काम कर रहे हैं या मदद के लिए हमसे कॉन्टैक्ट करें।
placeholder-preview-image
Wix Learnहमारे कोर्सेज़ और ट्यूटोरियल के ज़रिए अपने स्किल्स का विकास करें।
Wix ब्लॉगवेब डिज़ाइन, मार्केटिंग आदि के लिए सुझाव पाएं।
SEO लर्निंग हबसर्च इंजन से ऑर्गेनिक साइट ट्रैफिक बढ़ाना सीखें।
वेबसाइट विकासहमारे फ़ुल-स्टैक प्लेटफ़ॉर्म का उपयोग करके एक कस्टम साइट बनाएं।
placeholder-preview-image

Studio Editor: बटन आइकन में एनिमेशन जोड़ना

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

पहले से डिज़ाइन किया गया आइकन एनिमेशन जोड़ना

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

पहले से डिज़ाइन किया गया एनिमेटेड आइकन जोड़ने के लिए:

  1. अपने एडिटर पर जाएं।
  2. संबंधित स्टाइल्ड बटन पर क्लिक करें।
  3. सेटिंग्स पर क्लिक करें।
  4. आइकन टाइप के तहत एनिमेटेड पर क्लिक करें।
  5. चुनें कि आगे क्या करना है:
    • आइकन चुनें के तहत मनचाहा आइकन चुनें
    • मीडिया मैनेजर में एनिमेटेड आइकन की हमारी पूरी रेंज देखने के लिए जोड़ें आइकन पर क्लिक करें।
  6. (ऑप्शनल) एनिमेशन की ड्यूरेशन बदलने के लिए स्लाइडर को ड्रैग करें।
टिप:
एनिमेशन का प्रिव्यू देखने के लिए हमारे पहले से डिज़ाइन किए गए आइकन पर होवर करें।
सेटिंग्स पैनल के साथ कैनवस पर एनिमेटेड कार्ट आइकन वाला स्टाइल्ड बटन, आइकन से संबंधित ऑप्शन्स को हाईलाइट करना

कस्टम आइकन एनिमेशन बनाना

अपने क्लाइंट की साइट पर बटन्स के लिए अपनी खुद की आइकन एनिमेशन बनाएँ। स्टार्ट आइकन और एंड आइकन, दोनों को चुनकर, आप एक सीमलेस एनिमेशन तैयार कर सकते हैं जो आपके क्लाइंट की साइट के लिए यूनिक हो। Wix के आइकन्स को कंबाइन करें, या अपनी खुद की 2 SVG फाइल्स का इस्तेमाल करें।

कस्टम एनिमेशन बनाने के लिए:

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

आइकन डिज़ाइन करना

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

आइकन डिज़ाइन करने के लिए:

  1. अपने एडिटर पर जाएं।
  2. संबंधित स्टाइल्ड बटन पर क्लिक करें।
  3. एडिटर के टॉप राइट में इंस्पेक्टर खोलें आइकन पर क्लिक करें।
स्टूडियो एडिटर में इंस्पेक्टर पैनल खोलने का एक स्क्रीनशॉट।
  1. Design के अंदर संबंधित State चुनें: Regular या Hover।
  2. Design के अंदर Icon पर क्लिक करें।
  3. आइकन को डिज़ाइन करने के लिए उपलब्ध विकल्पों का उपयोग करें:
    • आइकन को रिसाइज करें।
    • आइकन का कलर बदलें और ओपेसिटी (opacity) को एडजस्ट करें।
    • आइकन को अलग एंगल पर रोटेट करें।
इंस्पेक्टर पैनल में आइकन डिज़ाइन ऑप्शन्स के साथ कैनवस पर एनिमेटेड कार्ट आइकन वाला स्टाइल्ड बटन

कस्टम आइकन की ज़रूरतें और गाइडलाइन्स

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