# Studio Two एडिटर: स्टाइल्ड एलिमेंट्स के साथ काम करना

Source: https://support.wix.com/hi/article/studio-two-editor-working-with-styled-elements-hi (updated 2026-11-13)
Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt

> यह आर्टिकल नवंबर 2026 में रिलीज़ किए गए नए Studio Two एडिटर के बारे में है। अगर आपको पक्का नहीं पता कि आप Studio एडिटर इस्तेमाल कर रहे हैं या Studio Two एडिटर, तो [यहां ज़्यादा जानकारी देखें](https://support.wix.com/hi/article/studio-two-editor-the-difference-between-studio-editor-and-studio-two-editor)।

पूरी साइट पर बटन, लाइन और कंटेनर का डिज़ाइन एक जैसा रखने के लिए स्टाइल्ड एलिमेंट्स का इस्तेमाल करें।

साइट की ब्रांडिंग से मैच करने के लिए डिफ़ॉल्ट स्टाइल्स को कस्टमाइज़ करें या अपने स्टाइल्स बनाएं।

---

## स्टाइल्ड एलिमेंट्स के बारे में

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

आप किसी भी समय **ऐड एलिमेंट्स** पैनल में **साइट स्टाइल्स** के तहत स्टाइल्ड एलिमेंट्स भी जोड़ सकते हैं।

![Studio Two एडिटर में ऐड एलिमेंट्स पैनल का क्रॉप किया गया स्क्रीनशॉट। पैनल में स्टाइल्ड एलिमेंट्स को हाइलाइट किया गया है।](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/11/11/36e8788c-daca-4717-9afc-c42b99e55a4a/ssase2.png)

---

## स्टाइल्ड एलिमेंट्स को कस्टमाइज़ करना

साइट को एक नया और फ्रेश लुक देने के लिए मौजूदा स्टाइल्ड एलिमेंट्स का डिज़ाइन कस्टमाइज़ करें। ऐसा करने से उस स्टाइल वाले साइट के सभी एलिमेंट्स अपने-आप अपडेट हो जाते हैं।

### स्टाइल्ड एलिमेंट्स को कस्टमाइज़ करने के लिए:

1. [अपने एडिटर पर जाएं](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)।
2. एडिटर की बाईं ओर **साइट स्टाइल्स** आइकन ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/75a29a95-425d-463f-9f5d-6c537da591f9/4584ee01-c4ae-4eff-b0d2-286a5b425b9e.png) पर क्लिक करें।
3. टैब्स में स्क्रॉल करें या पैनल में **ऐरो** आइकन ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/07/21/e185a445-c586-4a03-8df3-49f27715cec3/image.png) पर क्लिक करें।
4. सही ऑप्शन चुनें: **बटन्स**, **लाइन्स** या **कंटेनर्स**।
5. डिज़ाइन को कस्टमाइज़ करने के लिए दिए गए ऑप्शंस का इस्तेमाल करें:

**बटन**

1. जिस बटन को कस्टमाइज़ करना है, उस पर क्लिक करें।
2. बटन का वह हिस्सा चुनें जिसे आप डिज़ाइन करना चाहते हैं:  
   * **बटन:**  
         * **स्टेट:** चुनें कि आप बटन को रेगुलर, होवर या डिसेबल्ड स्टेट के लिए कस्टमाइज़ करना चाहते हैं।  
         * **फ़िल:** बटन के बैकग्राउंड के लिए नया कलर चुनें।  
         * **बॉर्डर:** बटन में बॉर्डर जोड़ें। आप पूरे बटन के लिए कलर, चौड़ाई और स्टाइल सेट कर सकते हैं या हर साइड को बदलने के लिए **एडिट इंडिविजुअल बॉर्डर्स** आइकन![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2026/10/30/e417bcae-d6c3-4f68-8650-b9c798287526/edit-individual-borders.png) पर क्लिक करें।  
         * **कॉर्नर:** बटन के कॉर्नर को ज़्यादा राउंड या स्क्वेयर बनाएं (px में)। आप पूरे बटन के लिए एक जैसी माप इस्तेमाल कर सकते हैं या हर साइड को अलग-अलग एडजस्ट करने के लिए **एडिट इंडिविजुअल कॉर्नर्स** आइकन **![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/07/22/108bc300-890b-4772-a170-85cb927f599e/image.png)** पर क्लिक करें।  
         * **शैडो:** शैडो अप्लाई करें और उसे अपनी पसंद के अनुसार एडजस्ट करें। आप उसका साइज़, कलर और दूसरी सेटिंग्स कस्टमाइज़ कर सकते हैं।  
         * **स्पेसिंग:** बटन की स्पेसिंग कस्टमाइज़ करने के लिए इन ऑप्शन का इस्तेमाल करें:  
                  * **पैडिंग:** बटन के आस-पास की हॉरिज़ॉन्टल और वर्टिकल पैडिंग एडजस्ट करें। आप पूरे बटन के लिए एक जैसी माप इस्तेमाल कर सकते हैं या हर साइड को अलग-अलग एडजस्ट कर सकते हैं।  
                  * **गैप:** बटन टेक्स्ट और आइकन के बीच की स्पेसिंग एडजस्ट करें।  
         * **बिहेवियर:** बटन का एलाइनमेंट सेट करें।  
   * **टेक्स्ट:**  
         * **स्टेट:** चुनें कि आप टेक्स्ट को रेगुलर, होवर या डिसेबल्ड स्टेट के लिए कस्टमाइज़ करना चाहते हैं।  
         * **पाठ की शैली:** टेक्स्ट पर अप्लाई करने के लिए पैनल से कोई स्टाइल चुनें।  
         * **फ़ॉन्ट:** ड्रॉपडाउन से कोई फ़ॉन्ट चुनें और उसका वेट (रेगुलर, बोल्ड वगैरह) चुनें।  
         **ध्यान दें:** वेट का ऑप्शन सभी फ़ॉन्ट के लिए उपलब्ध नहीं है।  
         * **साइज़:** फ़ील्ड में टेक्स्ट का साइज़ (px में) डालें।  
         * **कलर:** टेक्स्ट के लिए नया कलर चुनें।  
         * **पैडिंग:** टेक्स्ट के आस-पास की हॉरिज़ॉन्टल और वर्टिकल पैडिंग एडजस्ट करें।  
         * **स्टाइल:** टेक्स्ट पर बोल्ड और इटैलिक जैसे फ़ॉर्मैटिंग ऑप्शन अप्लाई करें।  
         * **केस:** चुनें कि पूरा टेक्स्ट अपरकेस, लोअरकेस या टाइटल केस में दिखे।  
         * **शैडो:** शैडो अप्लाई करें और उसे अपनी पसंद के अनुसार एडजस्ट करें। आप उसका साइज़, कलर और दूसरी सेटिंग्स कस्टमाइज़ कर सकते हैं।

**लाइनें**

1. जिस लाइन को कस्टमाइज करना है, उस पर क्लिक करें।
2. इन ऑप्शंस का इस्तेमाल करके इसे एडिट करें:  
   * **फिल:** लाइन के लिए कोई कलर चुनें। आप साइट कलर चुन सकते हैं या कस्टम कलर जोड़ सकते हैं।  
   * **स्टाइल:** लाइन की चौड़ाई (px में) सेट करें।

**कंटेनर्स**

1. संबंधित कंटेनर पर क्लिक करें।
2. इन ऑप्शंस का इस्तेमाल करके इसे कस्टमाइज करें:  
   * **फिल:** कंटेनर के लिए नया कलर चुनें।  
   * **बॉर्डर्स:** कंटेनर में बॉर्डर्स जोड़ें। आप पूरे कंटेनर के लिए कलर, चौड़ाई और स्टाइल सेट कर सकते हैं या हर साइड में अलग-अलग बदलाव करने के लिए **एडिट इंडिविजुअल बॉर्डर्स** आइकन![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2026/10/30/e417bcae-d6c3-4f68-8650-b9c798287526/edit-individual-borders.png) पर क्लिक कर सकते हैं।  
   * **कॉर्नर्स:** कंटेनर के कॉर्नर्स को ज्यादा राउंड या स्क्वायर बनाएं (px में)। आप पूरे कंटेनर के लिए एक जैसी माप इस्तेमाल कर सकते हैं या हर साइड को अलग-अलग एडजस्ट करने के लिए **एडिट इंडिविजुअल कॉर्नर्स** आइकन **![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/07/22/108bc300-890b-4772-a170-85cb927f599e/image.png)** पर क्लिक कर सकते हैं।  
   * **शैडो:** शैडो अप्लाई करें और इसे अपनी पसंद के अनुसार एडजस्ट करें। आप इसका साइज, पोजिशन और बहुत कुछ कस्टमाइज कर सकते हैं।  
   * **इफेक्ट्स:** कंटेनर पर बैकग्राउंड इफेक्ट अप्लाई करें और उसकी इंटेंसिटी एडजस्ट करने के लिए स्लाइडर का इस्तेमाल करें।

![पैनल में एक स्टाइल्ड कंटेनर एडिट किया जा रहा है। कर्सर फिल कलर पर क्लिक कर रहा है।](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/11/11/5f97b84c-ef62-4c37-8e06-a86b2d813500/ssase1.png)

> **जानकर अच्छा लगेगा:** आप बटन और लाइन स्टाइल्स में [कस्टम CSS भी जोड़ सकते हैं](https://support.wix.com/hi/article/studio-two-editor-adding-custom-css)।

---

## नए स्टाइल्ड एलिमेंट्स जोड़ना

साइट के ब्रैंड के आधार पर, हो सकता है कि आपको ज्यादा तरह के स्टाइल्ड एलिमेंट्स चाहिए हों। आप **साइट स्टाइल्स** पैनल में संबंधित टैब से नए डिजाइन जोड़ सकते हैं।

क्या आपने कैनवस पर किसी एलिमेंट को कस्टमाइज किया है और उसका लुक आपको पसंद आया? आप इसे किसी मौजूदा स्टाइल पर अप्लाई कर सकते हैं या नए स्टाइल के रूप में सेव कर सकते हैं।

### नए स्टाइल्ड एलिमेंट्स जोड़ने के लिए:

1. [अपने एडिटर पर जाएं](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)।
2. तय करें कि आप क्या करना चाहते हैं:

**साइट स्टाइल्स में नया एलिमेंट जोड़ें**

1. एडिटर के बाईं ओर **साइट स्टाइल्स** आइकन ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/75a29a95-425d-463f-9f5d-6c537da591f9/4584ee01-c4ae-4eff-b0d2-286a5b425b9e.png) पर क्लिक करें।
2. टैब्स में स्क्रॉल करें या पैनल में **ऐरो** आइकन ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/07/21/e185a445-c586-4a03-8df3-49f27715cec3/image.png) पर क्लिक करें।
3. संबंधित टैब चुनें: **बटन्स**, **लाइन्स**, या **कंटेनर्स**।
4. **ऐड** आइकन ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/08/04/100fd5be-1067-4069-8b8c-e75353eb64dc/image.png) पर क्लिक करें।
5. फ़ील्ड में एलिमेंट का नाम डालें।
6. दिए गए ऑप्शंस का इस्तेमाल करके अपना कस्टम डिज़ाइन सेट अप करें।

![The site styles panel is open. The cursor is clicking to add another styled line.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/11/11/a33ab84c-17d6-489b-9921-bf2a056c8a5e/image.png)

**कैनवस से कस्टम डिज़ाइन सेव करें**

1. संबंधित एलिमेंट पर क्लिक करें।
2. ऐक्शन बार में **कस्टम स्टाइल** पर क्लिक करें।
3. पैनल में **कस्टम स्टाइल** के पास **सहेजें** पर क्लिक करें।
4. चुनें कि आप एलिमेंट को कैसे सेव करना चाहते हैं:  
   * **स्टाइल अपडेट करें:** वह स्टाइल चुनें जिस पर आप डिज़ाइन अप्लाई करना चाहते हैं और **सहेजें** पर क्लिक करें।  
   * **नया स्टाइल बनाएँ:** स्टाइल का नाम डालें और **सहेजें** पर क्लिक करें।

![The style option has been selected for a line on the canvas. The cursor is saving the line as a custom style.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/10/21/d9dd49cc-def2-433d-94f5-6719df0cce72/image.png)

---

## स्टाइल्ड एलिमेंट्स मैनेज करना

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

### स्टाइल्ड एलिमेंट्स मैनेज करने के लिए:

1. [अपने एडिटर पर जाएँ](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)।
2. एडिटर के बाईं ओर **साइट स्टाइल्स** आइकन ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/75a29a95-425d-463f-9f5d-6c537da591f9/4584ee01-c4ae-4eff-b0d2-286a5b425b9e.png) पर क्लिक करें।
3. टैब्स में स्क्रॉल करें या पैनल में **ऐरो** आइकन ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/07/21/e185a445-c586-4a03-8df3-49f27715cec3/image.png) पर क्लिक करें।
4. संबंधित टैब चुनें: **बटन्स**, **लाइन्स**, या **कंटेनर्स**।
5. किसी एलिमेंट पर होवर करें और **मोर ऐक्शंस** आइकन ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/c45aec3e-d06a-43fa-a8e0-bfae6102df04/e95e66cd-e08c-4386-8f99-7429bdcec7d8.png) पर क्लिक करें।
6. चुनें कि आप क्या करना चाहते हैं:  
   * **एलिमेंट को रीनेम करें: रीनेम** पर क्लिक करें और फ़ील्ड में नया नाम डालें।  
   * **एलिमेंट हटाएँ: हटाएँ** पर क्लिक करें। अगर साइट के एलिमेंट्स पर यह स्टाइल अप्लाई है, तो ड्रॉपडाउन से कोई रिप्लेसमेंट स्टाइल चुनें।

![कर्सर ने कस्टम लाइन के लिए मोर ऐक्शंस पर क्लिक किया है, जिससे ऑप्शंस दिखाई दे रहे हैं।](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/11/11/08da84a9-f94c-4448-881b-f5731b36e8af/ssase3.png)

---

## अक्सर पूछे जाने वाले सवाल

स्टाइल्ड एलिमेंट्स के साथ काम करने का तरीका जानने के लिए, कोई सवाल चुनें।

**मैं कुछ स्टाइल्ड एलिमेंट्स क्यों नहीं मिटा सकता?**

साइट के डिफ़ॉल्ट स्टाइल्ड एलिमेंट्स को मिटाया नहीं जा सकता। ऐसा इसलिए है, क्योंकि प्राइमरी डिज़ाइन आपके जोड़े गए दूसरे ऐप्स और एलिमेंट्स पर अपने-आप लागू हो जाते हैं। हालांकि, आप ज़रूरत के मुताबिक उनका लुक अपडेट कर सकते हैं।

**स्टाइल्ड एलिमेंट्स को अपडेट करने से क्या मेरी साइट स्टाइल्स के दूसरे हिस्सों पर असर पड़ता है?**

हां, कस्टम डिज़ाइन में इस्तेमाल किए गए सभी नए रंग और/या फ़ॉन्ट पैनल में सहेजे जाते हैं।

उदाहरण के लिए, अगर आप कस्टम फ़ॉन्ट और रंगों वाला बटन बनाकर उसे स्टाइल्ड एलिमेंट के रूप में सहेजते हैं, तो वे फ़ॉन्ट और रंग **साइट स्टाइल्स** पैनल में जुड़ जाते हैं।