वेब पॉपअप सेटिंग्स
पॉपअप कैसा दिखेगा और कहाँ दिखाई देगा, यह सेट करने के लिए पॉपअप सेटिंग्स पैनल का उपयोग करें। यह पैनल वेब कंटेंट और वेब फ़ॉर्म दोनों में उपलब्ध है।
पैनल के दो हिस्से हैं:
- सामान्य सेटिंग्स: पूरे पॉपअप का लुक और प्लेसमेंट।
- वर्तमान पेज: आपके द्वारा एडिट किए जा रहे पेज के लिए मीडिया और आकार।
पेज टैब और + पेज जोड़ें पैनल के शीर्ष पर स्थित हैं। कई पेज देखें।
इमेज और वीडियो
Anchor link toपॉपअप की इमेज और वीडियो चुनने, और उन्हें फ़िट करने व सॉफ़्ट करने के लिए इन सेटिंग्स का उपयोग करें।
यदि लेआउट में एक या अधिक मीडिया ब्लॉक शामिल हैं, तो वर्तमान पेज खोलें। प्रत्येक मीडिया ब्लॉक में एक प्रीव्यू और कंट्रोल्स होते हैं।
- इमेज बदलें पर क्लिक करके अपने प्रोजेक्ट के मीडिया स्टोरेज से एक फ़ाइल चुनें, या सीधे इमेज URL पेस्ट या एडिट करें।
- फिट (नैचुरल, कवर, या कंटेन) के साथ सेट करें कि इमेज अपने फ्रेम को कैसे भरती है। फिट बैकग्राउंड इमेज के लिए नहीं दिखाया जाता है, जो हमेशा अपने क्षेत्र को कवर करती है।
- वैकल्पिक रूप से, ब्लर (0 से 20 px) के साथ इमेज को सॉफ्ट करें।
- केवल बैकग्राउंड मीडिया के लिए, डिम (0 से 100%) का उपयोग करके एक डार्क स्क्रिम जोड़ें ताकि इमेज के ऊपर का टेक्स्ट पठनीय बना रहे।
डार्क थीम इमेज
Anchor link toडार्क थीम वाला पॉपअप डार्क मोड में एक अलग इमेज दिखा सकता है, उदाहरण के लिए डार्क इंक वाला लोगो।
डार्क थीम सक्षम होने पर, प्रत्येक इमेज ब्लॉक एक डार्क थीम इमेज पंक्ति जोड़ता है।
- इमेज बदलें पर क्लिक करें या डार्क मोड के लिए एक अलग इमेज चुनने के लिए इमेज URL (डार्क थीम) सेट करें (उदाहरण के लिए डार्क इंक वाला लोगो)।
- दोनों स्कीमों में लाइट इमेज URL दिखाते रहने के लिए इसे खाली छोड़ दें।
डार्क थीम इमेज हर उस जगह लागू होती है जहाँ उस ब्लॉक की इमेज पेंट होती है, जिसमें बैकग्राउंड इमेज या वीडियो पोस्टर शामिल है।
वीडियो
Anchor link toकिसी मीडिया ब्लॉक में इमेज के बजाय वीडियो का उपयोग करें।
- मीडिया को वीडियो पर सेट करें।
- एक वीडियो URL दर्ज करें: वीडियो फ़ाइल का सीधा लिंक। वीडियो केवल एक बाहरी URL स्वीकार करता है। आप मीडिया स्टोरेज पर वीडियो अपलोड नहीं कर सकते। इसे “फास्ट स्टार्ट” सक्षम (कभी-कभी “वेब-ऑप्टिमाइज़्ड” कहा जाता है) के साथ MP4 (H.264 वीडियो, AAC ऑडियो) के रूप में निर्यात करें, ताकि ब्राउज़र पूरी फ़ाइल डाउनलोड होने से पहले चलाना शुरू कर सके। यदि URL लोड होने में विफल रहता है, तो विज़िटर्स को केवल पोस्टर दिखाई देता है।
- लूप डिफ़ॉल्ट रूप से चालू होता है, इसलिए वीडियो लगातार फिर से चलता है। एक बार चलने के बाद रोकने के लिए इसे बंद कर दें।
- ब्राउज़र के अंतर्निहित प्ले, पॉज़ और वॉल्यूम कंट्रोल्स को प्रदर्शित करने के लिए कंट्रोल्स दिखाएँ चालू करें। वीडियो हमेशा म्यूट से शुरू होते हैं। इस विकल्प के बिना, विज़िटर्स के पास ध्वनि चालू करने का कोई तरीका नहीं होता है।
- वैकल्पिक रूप से एक पोस्टर URL सेट करें: वीडियो लोड होते समय दिखाई जाने वाली इमेज। अनुशंसित। एक पुराने पॉपअप स्क्रिप्ट पर जो वीडियो का समर्थन नहीं करता है, पोस्टर ही एकमात्र चीज़ है जो दिखाई जाती है। इसे खाली छोड़ दें, और उस विज़िटर को कुछ भी नहीं दिखाई देगा जहाँ वीडियो होता।
मीडिया लेआउट
Anchor link toकुछ लेआउट मीडिया ब्लॉक के लिए प्लेसमेंट सेटिंग्स के साथ एक टेम्पलेट वेरिएबल्स सेक्शन जोड़ते हैं। यह सेक्शन केवल तभी दिखाई देता है जब वर्तमान लेआउट में इस तरह की सेटिंग्स हों।
जब लेआउट में टेक्स्ट के बगल में मीडिया हो, तो सेट करें:
- इमेज की चौड़ाई: पॉपअप की चौड़ाई का हिस्सा, प्रतिशत के रूप में।
- इमेज की स्थिति: बाएँ या दाएँ।
बॉटम बार लेआउट पर, यह सेक्शन इमेज कंट्रोल्स के बजाय बटन्स की चौड़ाई प्रदान करता है।
पॉपअप का आकार और स्टाइल
Anchor link toपॉपअप का आकार, उसके कोनों की गोलाई, उसका शैडो और वह कैसे दिखाई देता है, यह सेट करें।
- वर्तमान पेज → आकार के तहत, एक पॉपअप के लिए चौड़ाई और ऊँचाई खाली छोड़ दें जो अपनी सामग्री के अनुसार खुद को आकार देता है, या पिक्सेल में एक निश्चित आकार सेट करें। कई पेजों वाले पॉपअप में, प्रत्येक पेज का अपना आकार होता है।
- जब पेज को उपलब्ध ऊँचाई भरनी हो तो पूरी ऊँचाई चालू करें।
- सामान्य सेटिंग्स में, पॉपअप के कॉर्नर राउंडिंग और ड्रॉप शैडो के लिए कॉर्नर रेडियस और शैडो सेट करें।
- एनिमेशन चुनें: पॉपअप कैसे दिखाई देता है (डिफ़ॉल्ट, कोई नहीं, फेड, या स्लाइड)।
डार्क थीम सक्षम होने पर, शैडो सूर्य/चंद्रमा स्कीम स्विच का अनुसरण करता है। लाइट पेज के लिए ट्यून किया गया शैडो अक्सर डार्क पेज पर अदृश्य होता है, इसलिए दोनों को आमतौर पर अलग-अलग मानों की आवश्यकता होती है।
डार्क-पैलेट शैडो को लाइट वाले से अलग एडिट करने के लिए:
- सूर्य/चंद्रमा स्विच को डार्क पर सेट करें।
- शैडो एडिट करें।
यदि आप डार्क शैडो को अछूता छोड़ देते हैं, तो दोनों स्कीमों में लाइट शैडो मान का उपयोग होता है।
पॉपअप के रंग सेट करें: उसका बैकग्राउंड, उसके बटनों का एक्सेंट और उसका टेक्स्ट।
- रंग पर क्लिक करके पॉपअप का कलर पैलेट विस्तृत करें।
- पॉपअप बैकग्राउंड और बटन्स पर लागू एक्सेंट रंग के लिए बैकग्राउंड और एक्सेंट (बटन्स) सेट करें।
- बॉडी टेक्स्ट और सेकेंडरी टेक्स्ट जैसे कैप्शन और आइब्रो के लिए टेक्स्ट और सेकेंडरी टेक्स्ट सेट करें।
- यदि लेआउट में बैकग्राउंड इमेज के ऊपर टेक्स्ट है, तो उस टेक्स्ट के लिए इमेज के ऊपर टेक्स्ट सेट करें। वेब फ़ॉर्म में यह रंग नहीं होता।
डार्क मोड
Anchor link toडार्क मोड उन विज़िटर्स के लिए पॉपअप को एक दूसरा पैलेट देता है जिनका डिवाइस डार्क कलर स्कीम पर सेट है।
- रंग में, डार्क थीम सक्षम करें चालू करें। इसके बंद होने पर, पॉपअप हमेशा हर विज़िटर पर ऊपर दिए गए लाइट पैलेट के साथ रेंडर होता है।
- रंग फ़ील्ड के ऊपर सूर्य/चंद्रमा स्विच का उपयोग यह चुनने के लिए करें कि आप कौन सा पैलेट एडिट कर रहे हैं। कैनवास उस स्कीम में फिर से बनता है।
- वर्तमान लाइट रंगों से डार्क पैलेट को (पुनः) उत्पन्न करने के लिए लाइट से ऑटो पर क्लिक करें। बैकग्राउंड और सतहें डार्क हो जाती हैं, और टेक्स्ट लाइट हो जाता है। एक्सेंट और इमेज के ऊपर टेक्स्ट अपरिवर्तित रहते हैं। फाइन-ट्यून करने के लिए बाद में किसी भी पाँच फ़ील्ड को एडिट करें।
डार्क थीम सक्षम करें को वापस बंद करने से डार्क पैलेट बना रहता है। इसे फिर से चालू करने से स्क्रैच से फिर से बनाने के बजाय आपके एडिट्स बहाल हो जाते हैं।
जब आप डार्क थीम सक्षम पॉपअप पर प्रीव्यू खोलते हैं तो वही सूर्य/चंद्रमा स्विच प्रीव्यू बंद करें (Esc) के बगल में दिखाई देता है। आप फुल-साइज़ प्रीव्यू में भी दोनों पैलेट देख सकते हैं।
एक विज़िटर का ब्राउज़र यह तय करता है कि वे कौन सा पैलेट देखते हैं, जो उनके OS-स्तरीय डार्क मोड सेटिंग पर आधारित होता है। पॉपअप पर ही कोई डार्क/लाइट टॉगल नहीं है। एक साइट OS सेटिंग की परवाह किए बिना सभी के लिए एक स्कीम को बाध्य कर सकती है। Web SDK डॉक्स में webPopups.colorScheme देखें।
डार्क थीम इस पैनल में इमेज, शैडो, और ओवरले को भी प्रभावित करती है। सक्षम होने के बाद प्रत्येक उसी सूर्य/चंद्रमा स्कीम स्विच का अनुसरण करता है।
प्लेसमेंट और ओवरले
Anchor link toचुनें कि पॉपअप पेज पर कहाँ दिखाई देता है और क्या उसके पीछे का पेज डिम किया जाता है।
- प्लेसमेंट में, पोजीशन 3×3 ग्रिड का उपयोग करके चुनें कि पॉपअप पेज पर कहाँ एंकर करता है।
- चयनित किनारे से पिक्सेल में दूरी के लिए एज ऑफसेट सेट करें।
- ओवरले में, पीछे के पेज को डिम करें चालू करें ताकि पॉपअप दिखाए जाने के दौरान पेज का बाकी हिस्सा दोनों स्कीमों में डार्क हो जाए। इसे बंद करने से डिम पूरी तरह से हट जाता है, जिसमें नीचे सेट किए गए कोई भी डार्क-स्कीम मान शामिल हैं।
- ओवरले के लिए रंग और ओपेसिटी सेट करें (ओपेसिटी 0 से 1 तक)।
डार्क थीम सक्षम होने पर, रंग और ओपेसिटी भी सूर्य/चंद्रमा स्कीम स्विच का अनुसरण करते हैं। डिम को डार्क पैलेट के लिए अपना रंग और ताकत देने के लिए स्विच को डार्क पर सेट करें। जब तक आप उन्हें वहाँ एडिट नहीं करते, डार्क स्कीम लाइट स्कीम के समान रंग और ओपेसिटी दिखाती है।
