क्रिएटिव बटन

एक डिफ़ॉल्ट बटन पर क्लिक हो जाता है; थोड़ी गति वाले बटन को अधिक मिलता है। द क्रिएटिव बटन विजेट इन एलिमेंट के लिए मास्टर ऐडऑन सूक्ष्म पृष्ठभूमि स्वीप से लेकर टेक्स्ट-स्वैप एनिमेशन तक, होवर प्रभाव प्रीसेट की एक लाइब्रेरी भेजता है, ताकि कॉल टू एक्शन आपके सीएसएस की एक पंक्ति लिखे बिना आगे बढ़ सके।

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

क्रिएटिव बटन विजेट क्या करता है #

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

इससे पहले कि आप शुरू करें #

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• बेसिक विजेट के अंतर्गत मास्टर ऐडऑन विकल्प पैनल में क्रिएटिव बटन विजेट सक्षम किया गया है।

क्रिएटिव बटन विजेट कैसे जोड़ें #

एलिमेंट संपादक में, खोजें तत्वों लिए पैनल क्रिएटिव बटन और पृष्ठ पर विजेट खींचें एक अंधेरे बटन पढ़ने “अपने सीटीए सामग्री जोड़ें” प्रकट होता है, पहले से ही डिफ़ॉल्ट प्रभाव के साथ वायर्ड।

एक बटन प्रभाव पूर्व निर्धारित उठाओ #

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

प्रत्येक नाम एक अलग होवर एनीमेशन है प्रत्येक पिक के बाद कैनवास पर बटन को होवर करें और संपादक प्रभाव लाइव खेलता है, इसलिए ऑडिशन प्रीसेट सेकंड लेता है नाम संकेत नहीं देते हैं कि वे क्या करते हैं, इसलिए चार या पांच की कोशिश करना सबसे तेज़ तरीका है सही एक खोजने के लिए। बटन संरेखण और बटन पाठ संरेखण प्रत्येक डिवाइस सेटिंग्स के लिए एक उत्तरदायी टॉगल के साथ, ठीक नीचे बैठें।

पाठ, लिंक और वैकल्पिक पाठ सेट करें #

द बटन नियंत्रण समूह सामग्री को कवर करता है। बटन पाठ लेबल है, और लिंक यूआरएल न्यू-टैब और नोफ़ॉलो विकल्पों के लिए गियर आइकन के साथ, बटन को कहीं इंगित करता है।

कुछ प्रीसेट, जैसे विनोना और रेयेन, होवर पर दूसरे संदेश के लिए लेबल स्वैप करें उनमें से एक और एक चुनें वैकल्पिक बटन पाठ फ़ील्ड प्रकट होता है; डेमो इसे “Click Now!” पर सेट करता है इसलिए बटन पढ़ता है “आराम पर अपना CTA कंटेंट” जोड़ें और होवर पर फ़्लिप हो जाता है।

एक आइकन जोड़ें #

द चिह्न नियंत्रण फ़ॉन्ट विस्मयकारी और आपके द्वारा स्थापित प्रत्येक आइकन सेट के साथ एलिमेंटर आइकन लाइब्रेरी खोलता है।

एक को चुनने के बाद, चिह्न स्थिति लेबल से पहले या बाद में रखता है, और चिह्न रिक्ति अंतर सेट करता है; डेमो इसे 12 पिक्सेल तक बढ़ा देता है ताकि आइकन और टेक्स्ट सांस ले सकें।

बटन को स्टाइल करें #

पर स्विच करें शैली टैब और खोलें बटन शैलियाँ। शीर्ष समूह आकार को संभालता हैः चौड़ाई, टाइपोग्राफी, बटन पैडिंग, सीमा प्रकार, सीमा त्रिज्या (डेमो में 8, धीरे से गोल कोनों के लिए), बॉक्स छाया, और चिह्न आकार.

उसके नीचे, सामान्य और होवर प्रत्येक टैब में तीन रंग होते हैंः पाठ रंग, पृष्ठभूमि रंग, और चिह्न रंगडेमो नीले रंग पर सामान्य स्थिति सफेद पाठ देता हैः

फिर होवर राज्य को हरे रंग पर गहरे पाठ में फ़्लिप करता है, इसलिए प्रभाव दो स्पष्ट रूप से अलग-अलग दिखने के बीच एनिमेट करता हैः

एक पैटर्न नीचे का अनुभाग सजावटी बटन पृष्ठभूमि के लिए एक अतिरिक्त प्रो है।

पेज पर रिजल्ट #

लाइव पेज पर, बटन कर्सर आने तक अपने सामान्य रंगों में बैठता है फिर प्रीसेट खेलता है: पृष्ठभूमि होवर रंग, आइकन और टेक्स्ट शिफ्ट में स्वीप करती है, और वैकल्पिक पाठ दिखाई देता है यदि प्रीसेट एक का उपयोग करता है।

सामान्य उपयोग के मामले #

• हीरो सेक्शन सीटीए जहां एनीमेशन मुख्य क्रिया की ओर ध्यान आकर्षित करता है।
• मूल्य निर्धारण पृष्ठ बटन “Get स्टार्टेड” से “Its Free!” ऑन होवर जैसे टेक्स्ट स्वैप के साथ।
• डाउनलोड और साइनअप बटन तत्काल पहचान के लिए एक आइकन के साथ जोड़ा गया।
• लैंडिंग पृष्ठ अनुभाग थीम के डिफ़ॉल्ट से अलग खड़े होने के लिए एक बटन की आवश्यकता होती है।

बेहतर रचनात्मक बटन के लिए युक्तियाँ #

• कैनवास पर ऑडिशन प्रीसेट। प्रत्येक प्रभाव चयन के बाद बटन को होवर करें; एनीमेशन संपादक में चलता है, किसी पूर्वावलोकन की आवश्यकता नहीं है।
• होवर राज्य विपरीत बनाओ। एनीमेशन सबसे अच्छा तब पढ़ता है जब सामान्य और होवर रंग स्पष्ट रूप से भिन्न होते हैं, जैसे नीले से हरे रंग का डेमो।
• वैकल्पिक पाठ को छोटा रखें। जब दोनों संदेश लगभग समान लंबाई के होते हैं तो टेक्स्ट-स्वैप प्रीसेट साफ़ दिखते हैं।
• प्रति अनुभाग एक रचनात्मक बटन। गति ध्यान आकर्षित करती है; एक पंक्ति में तीन गतिशील बटन एक दूसरे से प्रतिस्पर्धा करते हैं।
• मोबाइल पर टैप व्यवहार की जाँच करें। टच स्क्रीन में कोई होवर नहीं है, इसलिए सुनिश्चित करें कि सामान्य स्थिति अपने आप क्लिक करने योग्य के रूप में पढ़ी जाती है।

वीडियो ट्यूटोरियल #

यदि आप क्रिएटिव बटन को सक्रिय रूप से देखना चाहते हैं, तो आप लाइव पेज पर प्रभाव पूर्व निर्धारित चुनने से लेकर तैयार होवर एनीमेशन तक, नीचे दिया गया वीडियो भी देख सकते हैं।

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

लपेटकर #

क्रिएटिव बटन विजेट कस्टम कोड के बिना एक एनिमेटेड में एक सादे सीटीए बदल जाता है: प्रभाव ड्रॉपडाउन से एक पूर्व निर्धारित उठाओ, पाठ और आइकन सेट करें, और सामान्य और होवर राज्यों के बीच एनिमेटिंग लायक रंग दें यह एनिमेटेड टेक्स्ट लिंक के लिए क्रिएटिव लिंक विजेट के साथ अच्छी तरह से ब्राउज़ करें का पूरा सेट मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ बटन पैटर्न जैसे प्रो एक्स्ट्रा के लिए।