३ डी एलिमेंटर फ्लिपबॉक्स एनिमेशन कैसे बनाएं?

एलिमेंटर में ३ डी फ्लिपबॉक्स एनिमेशन बनाना

एलिमेंटर एक शक्तिशाली पेज बिल्डर है जो आपको आसानी से आश्चर्यजनक वेबसाइट बनाने की अनुमति देता है, और इसका मूल फ्लिपबॉक्स विजेट इंटरैक्टिव ३ डी प्रभाव जोड़ने का एक सरल तरीका प्रदान करता है मुद्दा? यह एक प्रो फीचर है, डिजाइन और एनिमेशन सीमित हैं।

मास्टर एडॉन्स एक शक्तिशाली एलिमेंटर एडऑन है जो फ्लिपबॉक्स विजेट भी प्रदान करता है यह मुफ़्त है और एलिमेंटर्स फ्लिपबॉक्स विजेट की तुलना में अधिक अनुकूलन की अनुमति देता है।

मास्टर एडॉन्स के साथ, आप नेत्रहीन हड़ताली ३ डी फ्लिपबॉक्स बना सकते हैं जो उपयोगकर्ताओं को उन तरीकों से स्थानांतरित, रूपांतरित और संलग्न करते हैं जो डिफ़ॉल्ट एलिमेंटर विजेट बस नहीं कर सकते हैं।

इस गाइड में, हम आपको दिखाएंगे कि मास्टर एडॉन्स के साथ शीर्ष पायदान ३ डी फ्लिपबॉक्स कैसे बनाएं और आंख को पकड़ने वाले डिजाइन बनाएं जो बाहर खड़े हों।

मास्टर एडॉन्स के साथ ३ डी एलिमेंटर फ्लिपबॉक्स बनाना

ईंट से ईंट जाने दो और अपना खुद का निर्माण करें फ्लिपबॉक्स का उपयोग मास्टर ऐडऑनअंत तक आप कैसे अपने खुद के अद्वितीय बनाने के लिए की एक बहुत स्पष्ट समझ होनी चाहिए।

चरण १: एलिमेंट के लिए मास्टर ऐडऑन स्थापित करना

इससे पहले कि आप मास्टर एडॉन्स फ्लिपबॉक्स विजेट का उपयोग शुरू कर सकें, आपको इसकी आवश्यकता होगी स्थापित करें और सक्रिय करें मास्टर ऐडऑन प्लगइन। यहाँ बताया गया है कि कैसेः

१ अपने वर्डप्रेस डैशबोर्ड में, पर जाएं प्लगइन्स > नया जोड़ें।

२ खोज बार में एलिमेंटोरैग्माग् के लिए “मास्टर ऐडऑन खोजें।

३ क्लिक करें अभी इंस्टॉल करें और फिर सक्रिय करें एक बार प्लगइन स्थापित हो जाने के बाद।

एक बार सक्रिय होने पर, फ्लिपबॉक्स सहित मास्टर ऐडऑन विजेट, एलिमेंटर संपादक के भीतर उपलब्ध होंगे।

चरण २: फ्लिपबॉक्स विजेट जोड़ना

अब जब प्लगइन इंस्टॉल हो गया है, तो आइए फ्लिपबॉक्स को अपने पेज पर जोड़ें

१ एलिमेंट संपादक में अपना पृष्ठ खोलें फ्लेक्सबॉक्स या ग्रिड को अपने लेआउट के रूप में चुनें।

2। बाएं हाथ के पैनल पर, खोजें फ्लिपबॉक्सआपको एक “ के साथ एक फ्लिपबॉक्स विजेट देखना चाहिएएमएआईएमबीईडी टैग।

फ्लिपबॉक्स तत्व को कैसे खींचें

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

एक बार जोड़े जाने के बाद, आपके कैनवास पर एक बुनियादी फ्लिपबॉक्स डिज़ाइन दिखाई देता है, जो अनुकूलित होने के लिए तैयार है।

चरण ३: एक ३ डी एलिमेंटर फ्लिपबॉक्स बनाना

अब हम उन सेटिंग्स पर पहुंच गए हैं जिन्हें आप अपने फ्लिपबॉक्स पर प्रीमियम दिखने वाले ३ डी प्रभाव प्राप्त करने के लिए ट्विक कर सकते हैं।

पहले बंद।

१ शैली प्रीसेट

बेहतर डिजाइन के लिए ३ कॉलम संरचना

स्टाइल प्रीसेट में आप सेट करें डिजाइन भिन्नता और एनीमेशन शैली

डिजाइन भिन्नता आपको अपने बॉक्स के सामने अनुकूलित करने देती है आप इसे सेट कर सकते हैंः चूक, छवि, विकर्ण, फ्रंट आइकन।

डिजाइन विविधता ३ डी एलिमेंटर फ्लिपबॉक्स

एनीमेशन शैली के साथ आप चुन सकते हैं कि आपका फ्लिपबॉक्स कैसे एनिमेटेड होगा।

मास्टर एडॉन्स में २०+ प्रीमियम एनिमेशन उपलब्ध हैं सरल क्षैतिज और ऊर्ध्वाधर फ्लिप से ३ डी फ्लिप, घन एनिमेशन, रोलओवर प्रभाव, आदि।

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

2. सामने की सामग्री

पर क्लिक करें फ्लिपबॉक्स इसे संपादित करने के लिए विजेट।

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

फ्लिपबॉक्स फ्रंट बॉक्स सामग्री और आइकन

३ वापस सामग्री

नीचे स्क्रॉल करें वापस सामग्री उसी में अनुभाग सामग्री टैब।

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

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

बैक बॉक्स सामग्री

चरण ४: अन्य एक्सटेंशन के साथ ३ डी फ्लिपबॉक्स को बढ़ाना

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

हम उन शक्तिशाली विशेषताओं का पता लगाएंगे जो आपको अपने फ्लिपबॉक्स को बढ़ाने की अनुमति देते हैं, जिससे यह अधिक गतिशील, नेत्रहीन मनोरम और उपयोगकर्ता के अनुकूल हो जाता है।

चाहे आप उन्नत ३ डी परिवर्तन बनाना चाहते हैं, लंबन प्रभाव जोड़ना चाहते हैं, या प्रवेश एनिमेशन को ठीक करना चाहते हैं, मास्टर एडॉन्स आपके फ्लिपबॉक्स को अगले स्तर पर ले जाने के लिए आवश्यक सब कुछ प्रदान करता है।

परिवर्तन:

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

रिलैक्स (पैरालैक्स प्रभाव):

  • रिलैक्स प्रभाव को सक्षम करने के लिए, पर जाएँ उन्नत टैब करें और स्क्रॉल करें रिलैक्स सेटिंग्स।
  • प्रभाव सक्षम करें और समायोजित करें स्क्रॉल गति लंबन प्रभाव बनाने के लिए, जहां फ्लिपबॉक्स उपयोगकर्ताओं के स्क्रॉल करते समय बाकी सामग्री की तुलना में एक अलग गति से चलता है।

फ्लोटिंग प्रभावः

  • फ़्लिपबॉक्स को सूक्ष्मता से स्थानांतरित करने के लिए फ़्लोटिंग प्रभाव जोड़ें क्योंकि उपयोगकर्ता पृष्ठ के साथ इंटरैक्ट करता है। यह विकल्प इसके अंतर्गत पाया जा सकता है मोशन प्रभाव अनुभाग।
  • आंदोलन का प्रकार चुनें (जैसे, ऊपर या नीचे फ़्लोटिंग) और अपनी पसंद के अनुसार तीव्रता को समायोजित करें।

टूलटिप्स:

  • मास्टर ऐडऑन आपको जोड़ने की सुविधा भी देता है टूलटिप्स आपके फ्लिपबॉक्स में, जो तब दिखाई देते हैं जब उपयोगकर्ता तत्वों पर होवर करते हैं टूलटिप्स आपके डिज़ाइन को अव्यवस्थित किए बिना अतिरिक्त जानकारी या संदर्भ प्रदान कर सकते हैं।
  • आप उन्नत सेटिंग्स के तहत फ्लिपबॉक्स की फ्रंट और बैक दोनों सामग्री के लिए टूलटिप्स को सक्षम और अनुकूलित कर सकते हैं।
  • अपने डिज़ाइन में फिट होने के लिए टूलटिप टेक्स्ट, स्थिति (ऊपर, नीचे, बाएँ या दाएँ), और शैली (रंग, फ़ॉन्ट आकार) को अनुकूलित करें।
एलिमेंट के लिए टूलटिप

कुछ अन्य सहायक एक्सटेंशन

प्रवेश एनीमेशन:

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

प्रकट करना:

  • यदि आप फ्लिपबॉक्स फ़्लिप होने पर एक सहज प्रकटीकरण एनीमेशन चाहते हैं, तो सक्षम करें प्रकट करना के अंतर्गत विकल्प उन्नत सेटिंग्स।
  • यह सुविधा फ्लिपबॉक्स की पिछली सामग्री को धीरे-धीरे प्रकट करने देती है, जिससे एक पॉलिश संक्रमण बनता है।

प्रदर्शन की शर्तें:

  • उपयोग प्रदर्शन की शर्तें फ्लिपबॉक्स कब और कहाँ दिखाई देता है इसके लिए नियम निर्धारित करने के लिए आप डिवाइस प्रकार (डेस्कटॉप, टैबलेट, मोबाइल) या स्क्रॉलिंग स्थिति जैसी स्थितियों के आधार पर दृश्यता को नियंत्रित कर सकते हैं।

अपने फ्लिपबॉक्स का पूर्वावलोकन करना और उसे अंतिम रूप देना

एक बार जब आप अपने फ्लिपबॉक्स को अनुकूलित कर लेते हैं, तो इसे कार्रवाई में देखने का समय आ गया है।

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

एक बार संतुष्ट होने पर, क्लिक करें प्रकाशित करें अपनी साइट पर अपने फ्लिपबॉक्स को लाइव करने के लिए।

निष्कर्ष

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

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

इस गाइड का पालन करके, आप आसानी से अपनी साइट पर आंख को पकड़ने वाले फ्लिपबॉक्स जोड़ सकते हैं, उपयोगकर्ता सगाई और दृश्य अपील दोनों को बढ़ा सकते हैं इसलिए, मास्टर एडॉन्स में गोता लगाएँ और आश्चर्यजनक ३ डी फ्लिपबॉक्स बनाने के लिए प्रयोग करना शुरू करें जो आपके आगंतुकों को प्रभावित करेगा!

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

40% सब कुछ बंद

प्रत्येक मास्टर एडॉन्स प्रो योजना, वार्षिक और जीवनकाल एक कोड, आठ दिन।

00दिनों
00घंटे
00मिन
00सेकंड

सोमवार 14 सितंबर, 23:59 ईटी को समाप्त होता है

  • व्यक्तिगत1 साइट $129$77
  • व्यापार5 साइटें $199$119
  • डेवलपरअसीमित साइटेंएजेंसियों के लिए सर्वश्रेष्ठ $599$359

एक बार भुगतान करें कोई नवीनीकरण नहीं, कभी भी।

कूपन कोड MALIFE40
अब ४०% की छूट प्राप्त करें
  • 30,000+ सक्रिय इंस्टाल
  • 212 समीक्षाओं में से 4.5/5
  • 14 दिन का पैसा वापस