ग्रिड लेआउट साफ-सुथरे होते हैं, और साफ-सुथरे उबाऊ हो सकते हैं एक छवि जो अपने कॉलम से बाहर निकलती है, या एक कार्ड जो कर्सर के नीचे थोड़ा बढ़ता है: इन जैसे छोटे परिवर्तन एक स्टैक्ड से एक डिज़ाइन किए गए पृष्ठ को अलग करते हैं रूप बदल देती है विस्तार में मास्टर एडॉन्स प्रो प्रत्येक तत्व में एक ट्रांसफॉर्म पैनल जोड़ता है: सामान्य और होवर राज्यों के लिए अलग-अलग सेटिंग्स के साथ अनुवाद, घुमाएं, स्केल करें, तिरछा करें और फ्लिप करें।
ट्रांसफॉर्म्स एक्सटेंशन क्या करता है #
एक बार सक्षम होने पर, प्रत्येक एलिमेंटर तत्व को एक मिलता है रूप बदल देती है इसके तहत धारा उन्नत टैब। पलटना सक्षम परिवर्तन हाँ और छह नियंत्रण दिखाई देते हैं, प्रत्येक वास्तविक लेआउट प्रवाह को छूने के बिना तत्व में सीएसएस परिवर्तन लागू करता हैः
- अनुवाद करेंः तत्व को X और Y अक्षों के साथ, पिक्सेल में -1000 से 1000 तक ले जाएँ।
- घुमाएँ: इसे X, Y या Z अक्ष पर -180 से 180 डिग्री तक घुमाएँ।
- पैमाना: इसे प्रत्येक अक्ष पर 0 से 5 तक स्वतंत्र रूप से बड़ा या सिकोड़ें।
- तिरछा: एक विकर्ण, गतिशील देखो के लिए इसे तिरछा करें।
- क्षैतिज फ्लिप करें/लंबवत फ्लिप करेंः एक क्लिक से इसे मिरर करें।
द सामान्य और होवर टैब अलग-अलग मान रखते हैं, इसलिए एक तत्व आराम से एक तरफ बैठ सकता है और जब कर्सर उस पर उतरता है तो बदल सकता है, आपके द्वारा नियंत्रित संक्रमण अवधि के साथ।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया है का पालन करें स्थापना गाइड पहले।
- एक मास्टर एडॉन्स प्रो लाइसेंस, क्योंकि ट्रांसफॉर्म एक प्रो एक्सटेंशन है।
ट्रांसफॉर्म एक्सटेंशन को कैसे सक्षम करें #
अपने वर्डप्रेस डैशबोर्ड से, पर जाएं मास्टर ऐडऑन और खोलो एक्सटेंशन टैब। ट्रांसफॉर्म्स में बैठता है एनीमेशन विजेट बीच में हॉट बैज वाला समूह प्रवेश एनीमेशन और खुलासा करें इसके टॉगल पर क्लिक करें ताकि यह बैंगनी हो जाए, फिर हिट करें परिवर्तन सहेजें और हरे रंग की प्रतीक्षा करें “सेटिंग्स सफलतापूर्वक सहेजी गई” नोटिस।

किसी तत्व पर ट्रांसफॉर्म पैनल खोलें #
एलिमेंटर संपादक में तत्व, डेमो में एक छवि विजेट का चयन करें और खोलें उन्नत टैब। का विस्तार करें रूप बदल देती है बैंगनी एमए बैज और स्विच के साथ अनुभाग सक्षम परिवर्तन हाँ करने के लिए। छह परिवर्तन नियंत्रण सामान्य और होवर टैब के नीचे दिखाई देते हैं, प्रत्येक अपने पेंसिल आइकन के साथ खुलता है।

तत्व को स्थानांतरित करें और स्केल करें #
बगल में पेंसिल पर क्लिक करें अनुवाद करना और दो स्लाइडर खुलते हैं: अनुवाद एक्स और अनुवाद वाई डेमो छवि को एक्स अक्ष पर ७१ को धक्का देता है, और यह कैनवास पर अनुभाग के किनारे की ओर स्लाइड करता है क्योंकि स्लाइडर चलता है जैसे ही स्लाइडर के मान पिक्सेल में होते हैं, और प्रत्येक अक्ष की अपनी उत्तरदायी सेटिंग होती है प्रति डिवाइस।

द स्केल नियंत्रण उसी तरह काम करता है डेमो में स्केल एक्स को १.४ पर सेट करना छवि को उसके कॉलम से परे बढ़ाता है, एक सादे ग्रिड को तैयार करने के प्रकार के ब्रेकआउट के लिए अनुभाग सीमा को ओवरलैप करना नहीं कर सकता है स्केल वाई १ के अपने डिफ़ॉल्ट पर रहता है जब तक कि आप इसे बदलते नहीं हैं, इसलिए दोनों को एक समान विस्तार के लिए सेट करें।

घुमाएं और तिरछा काम उसी तरह करें नियंत्रण खोलें, स्लाइडर खींचें, और कैनवास कोण दिखाता है जैसे आप जाते हैं।
एक होवर परिवर्तन जोड़ें #
पर स्विच करें होवर टैब और वही नियंत्रण केवल तब लागू होते हैं जब कर्सर तत्व पर होता है, प्लस दो अतिरिक्तः फ्लिप क्षैतिज और लंबवत पलटें हाँ/नहीं स्विच बनें, और ए संक्रमण अवधि (एमएस) स्लाइडर नियंत्रित करता है कि परिवर्तन कितनी तेजी से एनिमेट करता है डेमो ४०० मीटर संक्रमण के साथ फ्लिप क्षैतिज पर बदल जाता है, इसलिए छवि खुद को होवर पर आसानी से दर्पण करती है और कर्सर छोड़ने पर वापस स्नैप करती है।

पेज पर रिजल्ट #
सामने के अंत को प्रकाशित और जांचें छवि अपने कॉलम से स्थानांतरित और विस्तारित बैठती है बिल्कुल संपादक में व्यवस्थित, और मँडराते हुए यह ४०० मीटर आसानी के साथ फ्लिप खेलता है परिवर्तन एक छोटे स्टाइलशीट के साथ सादे सीएसएस हैं, और तत्व के चारों ओर लेआउट कभी भी रिफ्लो नहीं होता है।

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