एक डिफ़ॉल्ट बटन पर क्लिक हो जाता है; थोड़ी गति वाले बटन को अधिक मिलता है। मुक्त क्रिएटिव बटन विजेट में एलिमेंट के लिए मास्टर ऐडऑन सूक्ष्म पृष्ठभूमि स्वीप से लेकर टेक्स्ट-स्वैप एनिमेशन तक, होवर प्रभाव प्रीसेट की एक लाइब्रेरी भेजता है, ताकि कॉल टू एक्शन आपके सीएसएस की एक पंक्ति लिखे बिना आगे बढ़ सके।
आप एक प्रीसेट चुनते हैं, टेक्स्ट टाइप करते हैं, यदि आप एक चाहते हैं तो एक आइकन जोड़ें, और सामान्य और होवर राज्यों को स्टाइल करें यह गाइड पूरे विजेट को कवर करता है, समाप्त बटन में खींचें।
क्रिएटिव बटन विजेट क्या करता है #
विजेट एक कॉल-टू-एक्शन बटन को पूर्वनिर्मित होवर एनीमेशन के साथ प्रस्तुत करता है एनिमेशन २१ नामित प्रीसेट के रूप में आते हैं, ६ मुक्त और १५ मास्टर एडॉन्स प्रो के साथ, प्रत्येक अपने स्वयं के आंदोलन के साथ: पृष्ठभूमि जो स्लाइड करते हैं, सीमाएं जो खुद को आकर्षित करती हैं, पाठ जो वैकल्पिक संदेश में सब कुछ सामान्य एलिमेंट बटन की तरह काम करता है: पाठ, लिंक, आइकन, संरेखण, और पूर्ण रंग नियंत्रण प्रति राज्य।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- बेसिक विजेट के अंतर्गत मास्टर ऐडऑन विकल्प पैनल में क्रिएटिव बटन विजेट सक्षम किया गया है।
क्रिएटिव बटन विजेट कैसे जोड़ें #
एलिमेंट संपादक में, खोजें तत्वों लिए पैनल क्रिएटिव बटन और पृष्ठ पर विजेट खींचें एक अंधेरे बटन पढ़ने “अपने सीटीए सामग्री जोड़ें” प्रकट होता है, पहले से ही डिफ़ॉल्ट प्रभाव के साथ वायर्ड।
एक बटन प्रभाव पूर्व निर्धारित उठाओ #
खुला बटन प्रीसेट और नियंत्रण सामग्री टैब में। द बटन प्रभाव ड्रॉपडाउन विजेट का दिल है: डिफ़ॉल्ट, विनोना, उजराक, वेरा, तमाया, और रेयेन मुक्त हैं पिपालुक, मोएमा, इसी, आयलेन, साकी, वापाशा, नीना, नानुक, नुका, एंटीमन, इट्ज़ेल, नायरा, क्विडेल, सैकनाइट, और शिकोबा की जरूरत है मास्टर एडॉन्स प्रो.
प्रत्येक नाम एक अलग होवर एनीमेशन है प्रत्येक पिक के बाद कैनवास पर बटन को होवर करें और संपादक प्रभाव लाइव खेलता है, इसलिए ऑडिशन प्रीसेट सेकंड लेता है नाम संकेत नहीं देते हैं कि वे क्या करते हैं, इसलिए चार या पांच की कोशिश करना सबसे तेज़ तरीका है सही एक खोजने के लिए। बटन संरेखण और बटन पाठ संरेखण प्रत्येक डिवाइस सेटिंग्स के लिए एक उत्तरदायी टॉगल के साथ, ठीक नीचे बैठें।
पाठ, लिंक और वैकल्पिक पाठ सेट करें #
द बटन नियंत्रण समूह सामग्री को कवर करता है। बटन पाठ लेबल है, और लिंक यूआरएल न्यू-टैब और नोफ़ॉलो विकल्पों के लिए गियर आइकन के साथ, बटन को कहीं इंगित करता है।
प्रीसेट होवर पर दूसरे संदेश के लिए लेबल स्वैप कर सकते हैं डिफ़ॉल्ट और एक के अलावा किसी भी प्रभाव को चुनें वैकल्पिक बटन पाठ फ़ील्ड प्रकट होता है; डेमो इसे “Click Now!” पर सेट करता है इसलिए बटन पढ़ता है “आराम पर अपना CTA कंटेंट” जोड़ें और होवर पर फ़्लिप हो जाता है।
एक आइकन जोड़ें #
द चिह्न नियंत्रण फ़ॉन्ट विस्मयकारी और आपके द्वारा स्थापित प्रत्येक आइकन सेट के साथ एलिमेंटर आइकन लाइब्रेरी खोलता है।
एक को चुनने के बाद, चिह्न स्थिति लेबल से पहले या बाद में रखता है, और चिह्न रिक्ति अंतर सेट करता है; डेमो इसे 12 पिक्सेल तक बढ़ा देता है ताकि आइकन और टेक्स्ट सांस ले सकें।
बटन को स्टाइल करें #
पर स्विच करें शैली टैब और खोलें बटन शैलियाँ। शीर्ष समूह आकार को संभालता हैः चौड़ाई, टाइपोग्राफी, बटन पैडिंग, सीमा प्रकार, सीमा त्रिज्या (डेमो में 8, धीरे से गोल कोनों के लिए), बॉक्स छाया, और चिह्न आकार.
उसके नीचे, सामान्य और होवर प्रत्येक टैब में तीन रंग होते हैंः पाठ रंग, पृष्ठभूमि रंग, और चिह्न रंगडेमो नीले रंग पर सामान्य स्थिति सफेद पाठ देता हैः
फिर होवर राज्य को हरे रंग पर गहरे पाठ में फ़्लिप करता है, इसलिए प्रभाव दो स्पष्ट रूप से अलग-अलग दिखने के बीच एनिमेट करता हैः
एक पैटर्न नीचे का अनुभाग निःशुल्क पैटर्न एक्सटेंशन से आता है और सजावटी पृष्ठभूमि पैटर्न जोड़ता है।
पेज पर रिजल्ट #
लाइव पेज पर, बटन कर्सर आने तक अपने सामान्य रंगों में बैठता है फिर प्रीसेट खेलता है: पृष्ठभूमि होवर रंग, आइकन और टेक्स्ट शिफ्ट में स्वीप करती है, और वैकल्पिक पाठ दिखाई देता है यदि प्रीसेट एक का उपयोग करता है।
सामान्य उपयोग के मामले #
- हीरो सेक्शन सीटीए जहां एनीमेशन मुख्य क्रिया की ओर ध्यान आकर्षित करता है।
- मूल्य निर्धारण पृष्ठ बटन “Get स्टार्टेड” से “Its Free!” ऑन होवर जैसे टेक्स्ट स्वैप के साथ।
- डाउनलोड और साइनअप बटन तत्काल पहचान के लिए एक आइकन के साथ जोड़ा गया।
- लैंडिंग पृष्ठ अनुभाग थीम के डिफ़ॉल्ट से अलग खड़े होने के लिए एक बटन की आवश्यकता होती है।
बेहतर रचनात्मक बटन के लिए युक्तियाँ #
- कैनवास पर ऑडिशन प्रीसेट। प्रत्येक प्रभाव चयन के बाद बटन को होवर करें; एनीमेशन संपादक में चलता है, किसी पूर्वावलोकन की आवश्यकता नहीं है।
- होवर राज्य विपरीत बनाओ। एनीमेशन सबसे अच्छा तब पढ़ता है जब सामान्य और होवर रंग स्पष्ट रूप से भिन्न होते हैं, जैसे नीले से हरे रंग का डेमो।
- वैकल्पिक पाठ को छोटा रखें। जब दोनों संदेश लगभग समान लंबाई के होते हैं तो टेक्स्ट-स्वैप प्रीसेट साफ़ दिखते हैं।
- प्रति अनुभाग एक रचनात्मक बटन। गति ध्यान आकर्षित करती है; एक पंक्ति में तीन गतिशील बटन एक दूसरे से प्रतिस्पर्धा करते हैं।
- मोबाइल पर टैप व्यवहार की जाँच करें। टच स्क्रीन में कोई होवर नहीं है, इसलिए सुनिश्चित करें कि सामान्य स्थिति अपने आप क्लिक करने योग्य के रूप में पढ़ी जाती है।
वीडियो ट्यूटोरियल #
यदि आप क्रिएटिव बटन को सक्रिय रूप से देखना चाहते हैं, तो आप लाइव पेज पर प्रभाव पूर्व निर्धारित चुनने से लेकर तैयार होवर एनीमेशन तक, नीचे दिया गया वीडियो भी देख सकते हैं।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर ऐडऑन में क्रिएटिव बटन विजेट क्या है?
यह प्रीबिल्ट होवर एनिमेशन के साथ कॉल-टू-एक्शन बटन के लिए एक एलिमेंटर विजेट है आप २१ नामित प्रभाव प्रीसेट (६ मुफ्त, प्रो के साथ १५) से चुनते हैं, टेक्स्ट, लिंक और आइकन सेट करते हैं, और एलिमेंटर पैनल से अलग सामान्य और होवर राज्यों को स्टाइल करते हैं।
कितने बटन प्रभाव शामिल हैं?
बटन प्रभाव ड्रॉपडाउन २१ प्रीसेट सूचीबद्ध करता है डिफ़ॉल्ट, विनोना, उजराक, वेरा, तमाया और रेयेन मुफ्त हैं, और बाकी को मास्टर एडॉन्स प्रो की आवश्यकता है, जिसमें विनोना, उजराक, वेरा, तमाया, रेयेन, मोएमा, नायरा और शिकोबा शामिल हैं, प्रत्येक एक अलग होवर एनीमेशन लागू करता है, और संपादक कैनवास प्रभाव लाइव खेलता है जब आप बटन को घुमाते हैं।
वैकल्पिक बटन पाठ क्षेत्र क्या है?
प्रभाव होवर पर दूसरे संदेश के लिए बटन लेबल को स्वैप कर सकते हैं जब आप डिफ़ॉल्ट के अलावा कोई प्रभाव चुनते हैं, तो वैकल्पिक बटन टेक्स्ट फ़ील्ड दिखाई देता है ताकि आप होवर संदेश सेट कर सकें, जैसे कि “Get स्टार्टेड” को “Its Free!” पर स्विच करना।
क्या मैं रचनात्मक बटन में एक आइकन जोड़ सकता हूं?
हाँ। आइकन नियंत्रण एलिमेंटर आइकन लाइब्रेरी खोलता है। एक आइकन चुनने के बाद, आइकन स्थिति इसे टेक्स्ट से पहले या बाद में रखती है, आइकन स्पेसिंग गैप सेट करती है, और आइकन आकार और आइकन रंग स्टाइल टैब में रहते हैं।
क्या मैं होवर राज्य को अलग से स्टाइल कर सकता हूं?
हाँ। बटन शैलियों में सामान्य और होवर टैब होते हैं, प्रत्येक का अपना टेक्स्ट रंग, पृष्ठभूमि रंग और आइकन रंग होता है। प्रीसेट दो राज्यों के बीच एनिमेट करता है, इसलिए विपरीत रंग प्रभाव को अधिक दृश्यमान बनाते हैं।
लपेटकर #
क्रिएटिव बटन विजेट कस्टम कोड के बिना एक एनिमेटेड में एक सादे सीटीए बदल जाता है: प्रभाव ड्रॉपडाउन से एक पूर्व निर्धारित उठाओ, पाठ और आइकन सेट करें, और सामान्य और होवर राज्यों के बीच एनिमेटिंग लायक रंग दें यह एनिमेटेड टेक्स्ट लिंक के लिए क्रिएटिव लिंक विजेट के साथ अच्छी तरह से ब्राउज़ करें का पूरा सेट मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें क्रिएटिव बटन विजेट पेज डेमो के लिए और एलिमेंटर बटन विजेट के साथ तुलना।
