होवर फ्लिप कार्ड एनिमेशन के साथ एलिमेंटर फ्लिप बॉक्स विजेट
फ्लिपबॉक्स एलिमेंटर के लिए एक मास्टर एडॉन्स फ्लिप बॉक्स विजेट है, जिसमें एलिमेंटर प्रो की आवश्यकता नहीं है सामने का चेहरा एक शीर्षक और लघु पाठ के साथ एक आइकन या छवि दिखाता है, और होवर पर कार्ड अधिक विवरण और एक एक्शन बटन के साथ पीछे के चेहरे पर बदल जाता है विजेट डिफ़ॉल्ट और फ्रंट आइकन डिजाइन और ६ एनिमेशन के साथ आता है: क्षैतिज फ्लिप, लंबवत फ्लिप, फीका, फ्लिप बॉक्स, फ्लिप बॉक्स फीका और फीका। मास्टर एडॉन्स प्रो फ्रंट इमेज और डायगोनल डिज़ाइन और १६ और एनिमेशन जोड़ता है, जिसमें क्यूब, रोलओवर और ३ डी फ्लिप शामिल हैं, कुल मिलाकर २२ के लिए एलिमेंटर में केवल एलिमेंटर प्रो में एक फ्लिप बॉक्स है।
डिज़ाइन विविधताएँ और फ्लिप एनिमेशन
डिजाइन भिन्नता फ्रंट लेआउट सेट करता है: डिफ़ॉल्ट और फ्रंट आइकन विजेट, फ्रंट इमेज और डायगोनल नीड प्रो के साथ आते हैं। एनीमेशन शैली कार्ड कैसे बदल जाता है सेट करता है शामिल: क्षैतिज फ्लिप, लंबवत फ्लिप, फीका, फ्लिप बॉक्स, फ्लिप बॉक्स फीका और फीका अप प्रो चार घन दिशाएं, फीका हिडबैक, फीका अप हिडबैक, चार स्लाइड दिशाएं, दो विकर्ण स्लाइड, फीका इन आउट, नानानाना, रोलओवर और ३ डी फ्लिप, जिसमें अपनी दिशा सेटिंग है।
- कुल 22 एनिमेशन: 6 शामिल और 16 प्रो के साथ।
- फ्लिप डेस्कटॉप पर होवर पर और टच स्क्रीन पर टैप पर चलता है।
- प्रति अनुभाग एक एनीमेशन का उपयोग करें ताकि कार्डों की एक पंक्ति सुसंगत लगे।
डुअल-साइड कंटेंट बिल्डर
द फ्रंट बॉक्स और बैक बॉक्स प्रत्येक के पास डिफ़ॉल्ट, स्टैक्ड या फ़्रेम दृश्य और सर्कल या स्क्वायर आकार, एक शीर्षक, एक विवरण, संरेखण और एक शीर्षक टैग के साथ अपना स्वयं का आइकन है सामने को छोटा रखें, एक सेवा नाम की तरह, और स्पष्टीकरण के लिए पीछे का उपयोग करें स्टाइल टैब में प्रत्येक चेहरे को अपनी पृष्ठभूमि, शीर्षक और विवरण रंग, टाइपोग्राफी, आइकन रंग और सीमा मिलती है।
- प्रत्येक चेहरे के लिए अलग सामग्री और स्टाइल।
- दोनों चेहरों पर शीर्षक HTML टैग, इसलिए कार्डों का एक ग्रिड एक साफ शीर्षक क्रम रखता है।
- एक फ्लिप बॉक्स ऊंचाई सामान्य में सेटिंग दोनों चेहरे एक ही आकार रखता है।
होवर के साथ सीटीए बटन
द कार्रवाई बटन अपने बटन पाठ और लिंक के साथ पीछे के चेहरे पर दिखाता है सामान्य के लिए इसे स्टाइल करें और पाठ रंग, पृष्ठभूमि, सीमा, सीमा त्रिज्या और पैडिंग के साथ होवर करें, प्लस टाइपोग्राफी बटन विजेट के अंदर एकमात्र लिंक है पूरे कार्ड को क्लिक करने योग्य बनाने के लिए, जोड़ें रैपर लिंक विजेट के लिए विस्तार।
- एक विशिष्ट लेबल का उपयोग करें जैसे कि “See Pricing” जब लिंक यहीं जाता है।
- विशुद्ध रूप से सूचनात्मक कार्ड पर बटन छोड़ें।
- यदि आप रैपर लिंक का उपयोग करते हैं, तो बटन को उसी पृष्ठ पर इंगित करें।
फ्लिपबॉक्स एक नज़र में
तालिका सूचीबद्ध करती है कि विजेट आज क्या करता है, संस्करण 3.2।6 में प्लगइन स्रोत से पढ़ें।
| आइटम | फ्लिपबॉक्स |
|---|---|
| डिजाइन विविधताएं | ४: डिफ़ॉल्ट और फ्रंट आइकन शामिल; प्रो के साथ सामने की छवि और विकर्ण |
| एनिमेशन | २२: ६ शामिल (क्षैतिज फ्लिप, लंबवत फ्लिप, फीका, फ्लिप बॉक्स, फ्लिप बॉक्स फीका, फीका) और १६ प्रो के साथ (चार घन दिशाएं, दो हिडबैक फीका, चार स्लाइड, दो विकर्ण स्लाइड, फीका इन आउट, नानानाना, रोलओवर, ३ डी फ्लिप) |
| सामने और पीछे की सामग्री | आइकन या छवि (प्रो फ्रंट इमेज डिज़ाइन वाली छवि), प्रत्येक चेहरे पर अपने स्वयं के HTML टैग, विवरण और संरेखण के साथ शीर्षक |
| चिह्न शैली | डिफ़ॉल्ट, स्टैक्ड या फ़्रेमयुक्त, वृत्त या वर्गाकार आकार के साथ |
| ट्रिगर | डेस्कटॉप पर होवर करें, पहले टच स्क्रीन पर टैप करें कोई क्लिक ट्रिगर नहीं |
| होल-बॉक्स लिंक | नहीं, पिछला बटन लिंक रखता है; रैपर लिंक एक्सटेंशन पूरे कार्ड को क्लिक करने योग्य बनाता है |
| ऊंचाई नियंत्रण | हाँ, फ्लिप बॉक्स ऊंचाई शैली में, सामान्य |
| हिंडोला मोड | नहीं |
| ३ डी फ्लिप दिशा | प्रो ३ डी फ्लिप एनीमेशन पर ४ दिशाएं |
| जरूरतें | एलिमेंटर और मास्टर एडॉन्स। दो अतिरिक्त डिज़ाइन और 16 अतिरिक्त एनिमेशन के लिए प्रो |
एलिमेंटर प्रो फ्लिप बॉक्स बनाम मास्टर एडॉन्स फ्लिपबॉक्स
एलिमेंटर प्रो का अपना फ्लिप बॉक्स विजेट है यदि आप पहले से ही इसके लिए भुगतान करते हैं, तो आपको दूसरे की आवश्यकता नहीं हो सकती है यहां बताया गया है कि दोनों की तुलना कैसे की जाती है।
| फ़ीचर | एलिमेंटर प्रो फ्लिप बॉक्स | मास्टर एडॉन्स फ्लिपबॉक्स |
|---|---|---|
| कीमत | एलिमेंट प्रो की जरूरत है | मास्टर ऐडऑन; प्रो में अधिक डिज़ाइन और एनिमेशन |
| फ्लिप प्रभाव | दिशा और ३ डी गहराई के साथ, फ्लिप, स्लाइड, पुश, ज़ूम इन, ज़ूम आउट और फीका | ६ में एनिमेशन, २२ में प्रो, जिसमें क्यूब, रोलओवर और ३ डी फ्लिप शामिल हैं |
| ट्रिगर | होवर | होवर; सबसे पहले टच स्क्रीन पर टैप करें |
| सामने ग्राफिक | कोई नहीं, छवि या चिह्न | आइकन, या प्रो फ्रंट इमेज डिज़ाइन वाली एक छवि |
| पूरे कार्ड लिंक | लिंक ऑन लागू करें: केवल पूरा बॉक्स या बटन | केवल बटन, या रैपर लिंक एक्सटेंशन वाला पूरा कार्ड |
| बटन | हाँ | हां, नॉर्मल और होवर स्टाइल के साथ |
एलिमेंटर प्रो सरल है यदि आप एक संपूर्ण-बॉक्स लिंक बनाना चाहते हैं मास्टर एडॉन्स प्रो के बिना एलिमेंटर पर काम करता है और अपने स्वयं के प्रो के साथ अधिक एनीमेशन विकल्प देता है। बिना किसी छिपी हुई चीज़ वाले स्थिर कार्ड के लिए, इसका उपयोग करें जानकारी बॉक्स विजेट।
फ्लिप कार्ड सीएसएस या एक फ्लिप बॉक्स विजेट?
फ्लिप कार्ड फ्लिप बॉक्स के समान ही है: एक सामने का चेहरा जो पीछे के चेहरे पर घूमता है आप परिप्रेक्ष्य, परिवर्तन-शैली का उपयोग करके सीएसएस की लगभग ४० लाइनों के साथ एक हाथ से लिख सकते हैं: संरक्षित -३ डी और बैकफेस-दृश्यता: छिपा हुआ, और इसे एचटीएमएल विजेट में छोड़ दें जो मार्ग आपके द्वारा नियंत्रित पृष्ठ पर एक कार्ड के लिए ठीक है।
सीएसएस संस्करण में तीन आवर्ती समस्याएं हैं टच स्क्रीन में कोई होवर नहीं है, इसलिए कार्ड कभी भी फ़्लिप नहीं करता है जब तक कि आप एक टैप हैंडलर नहीं जोड़ते हैं दोनों चेहरों को एक निश्चित ऊंचाई की आवश्यकता होती है या कार्ड कूदता है क्योंकि यह बदल जाता है और रंग, पाठ या आइकन में हर बदलाव का मतलब है कोड को फिर से संपादित करना, अक्सर एक कस्टम सीएसएस फ़ील्ड के अंदर जिसे एलिमेंटर प्रो की आवश्यकता होती है फ्लिपबॉक्स विजेट संपादक पैनल से टैप, ऊंचाई और स्टाइल को संभालता है, और यह आपको एक बैक-फेस बटन, २२ एनिमेशन और कोड को छूने के बिना प्रति कार्ड एक डिज़ाइन भिन्नता देता है।
फ्लिप बॉक्स विचार और युक्तियाँ
एक फ्लिप बॉक्स एक ग्रिड को साफ रखता है जबकि अभी भी विस्तार ले जाता है, क्योंकि विवरण इसके नीचे के बजाय कार्ड के पीछे बैठता है यह सेवा ग्रिड के लिए अच्छी तरह से काम करता है, टीम कार्ड सामने की तरफ एक तस्वीर और पीछे एक जैव के साथ, टाइल और स्टेट कार्ड की सुविधा है जो एक संख्या का मतलब है।
- फ्लिप बॉक्स ऊंचाई सेट करें। इसके बिना, एक लंबा पिछला चेहरा कार्ड का आकार बदलता है क्योंकि यह मुड़ता है और पंक्ति कूदती है।
- चेहरों को अलग दिखलाएं। सामने की तरफ एक टिंट और पीछे की तरफ आपका ब्रांड रंग फ्लिप को स्पष्ट करता है।
- फोन के लिए योजना। टच स्क्रीन में कोई होवर नहीं होता है, इसलिए कार्ड टैप पर फ़्लिप करता है और बटन को दूसरे टैप की आवश्यकता होती है एक वास्तविक फोन पर परीक्षण करें।
- आवश्यक विवरण सामने रखें। कीमतें, फोन नंबर और बुकिंग लिंक केवल पीछे की तरफ नहीं रहने चाहिए।
- गति को सीमित करें। प्रति पृष्ठ एक या दो फ्लिप बॉक्स पंक्तियाँ छह अलग-अलग एनिमेशन से बेहतर पढ़ती हैं।
फ्लिप बॉक्स उदाहरण
नीचे प्रत्येक डेमो विजेट के साथ बनाया गया एक लाइव पेज है एनीमेशन और डिजाइन भिन्नता का नाम दिया गया है ताकि आप पैनल से उनमें से किसी को भी पुनर्निर्माण कर सकें।
लंबवत पलटें
- सास एनालिटिक्स कार्ड: डिफ़ॉल्ट डिज़ाइन, तीन डार्क स्टेट कार्ड जो योजना विवरण में बदल जाते हैं।
- उपकरण कार्ड ग्रिड: डिफ़ॉल्ट डिज़ाइन, दो-पंक्ति ग्रिड में छह उत्पाद टाइलें।
- स्टेट और प्रजाति ग्रिड: डिफ़ॉल्ट डिज़ाइन, सामने एक संख्या और पीछे का अर्थ।
- आर्क उत्पाद कार्ड: सामने के चेहरे पर गोल मेहराब आकार के साथ डिफ़ॉल्ट डिज़ाइन।
फ्लिप क्षैतिज
- चिह्न-केवल सेवा टाइलें: फ्रंट आइकन डिज़ाइन, चार फ़्रेमयुक्त आइकन जो शॉर्ट सर्विस ब्लर्ब में बदल जाते हैं।
- बेंटो सर्विस टाइल्स: बेंटो लेआउट में मिश्रित डिफ़ॉल्ट और फ्रंट आइकन कार्ड।
- क्रमबद्ध अनुशासन कार्ड: डिफ़ॉल्ट डिज़ाइन, तीन कार्ड एक दूसरे से ऑफसेट होते हैं।
- न्यूनतम आइकन टाइलें: फ्रंट आइकन डिज़ाइन, एक आइकन के साथ तीन गहरे रंग की टाइलें।
फीका करना
- सामने की छवि यात्रा कार्ड: सामने की छवि डिज़ाइन (प्रो), सामने की ओर एक तस्वीर और पीछे की ओर यात्रा विवरण।
- क्रमांकित अध्याय पंक्तियाँ: डिफ़ॉल्ट डिज़ाइन, चौड़ी पंक्तियाँ जो अध्याय सारांश में फीकी पड़ जाती हैं।
- समयरेखा रनबुक पंक्तियाँ: डिफ़ॉल्ट डिज़ाइन, स्टेप कार्ड जो निर्देशों के अनुसार फीके पड़ जाते हैं।
फ्लिप बॉक्स और क्यूब
- परिपत्र ब्रांड शोकेस: गोल कार्डों पर फ्लिप बॉक्स एनीमेशन।
- विकर्ण टाइलें: क्यूब लेफ्ट राइट एनीमेशन (प्रो) के साथ विकर्ण डिजाइन (प्रो)।
- उन्नत परिवर्तन प्रभाव: ट्रांसफ़ॉर्म एक्सटेंशन के साथ संयुक्त फ्लिपबॉक्स कार्ड।
३ डी फ्लिप और स्लाइड
- कॉफी उत्पाद कार्ड: ३ डी फ्लिप एनीमेशन (प्रो), स्लाइड दाएं से बाएं दिशा।
- इंटरएक्टिव मीडिया शोकेसः प्रत्येक कार्ड पर एक अलग दिशा के साथ ३ डी फ्लिप (प्रो)।
- मल्टी-आइकन कार्ड: बाएँ से दाएँ, दाएँ से बाएँ और ऊपर से नीचे स्लाइड (प्रो) एक पंक्ति में।
रोलओवर, विकर्ण और फीका इन आउट
- डार्क जिम क्लास कार्ड: डार्क थीम पर रोलओवर एनीमेशन (प्रो)।
- पेस्टल आइकन टाइलें: विकर्ण नीचे से शीर्ष एनीमेशन (प्रो) के साथ फ्रंट आइकन डिज़ाइन।
- ग्रेडिएंट बैक कार्ड: फ़ेड इन आउट एनीमेशन (प्रो) एक ग्रेडिएंट बैक फेस पर।
![फ्लिपबॉक्स [अन्य परिपत्र ब्रांड शोकेस]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2025/09/16055733/Flipbox-Circular-brand-showcase-300x197.webp)
एलिमेंटर में फ्लिप बॉक्स कैसे जोड़ें
आपको WordPress।org से एलिमेंटर और मास्टर ऐडऑन प्लगइन की आवश्यकता है।
- जांचें कि फ्लिपबॉक्स नीचे चालू है मास्टर ऐडऑन, विजेट.
- एलिमेंटर संपादक में, खोजें फ्लिपबॉक्स और इसे एक कंटेनर में खींचें।
- एक डिज़ाइन विविधता और एक एनीमेशन शैली चुनें, फिर उसका पूर्वावलोकन करने के लिए कार्ड को होवर करें।
- फ्रंट बॉक्स और बैक बॉक्स भरें: आइकन, शीर्षक, विवरण और शीर्षक टैग।
- एक्शन बटन टेक्स्ट और लिंक जोड़ें।
- स्टाइल में, सामान्य, सेट फ्लिप बॉक्स ऊंचाई इसलिए कार्ड मध्य-फ़्लिप का आकार नहीं बदलता है, फिर प्रत्येक चेहरे को स्टाइल करें।
३ डी प्रभाव के लिए, पढ़ें ३ डी एलिमेंटर फ्लिपबॉक्स एनिमेशन कैसे बनाएं. प्रत्येक सेटिंग में है फ्लिपबॉक्स विजेट सेटिंग्स.
फ्लिपबॉक्स कुछ अन्य मास्टर एडॉन्स विजेट के साथ जोड़ेः जानकारी बॉक्स एक कार्ड के लिए जो कभी नहीं फ़्लिप करता है, क्रिएटिव बटन ग्रिड के तहत कार्रवाई के लिए स्टाइल कॉल के लिए, छवि होवर प्रभाव एक तस्वीर के लिए जो पीछे के चेहरे के बजाय एक कैप्शन का खुलासा करता है, टीम सदस्य सामाजिक लिंक वाले लोगों के कार्ड के लिए, और सामग्री टॉगल करें जब खुलासा होवर के बजाय क्लिक पर होना है।
फ्लिपबॉक्स के लिए अक्सर पूछे जाने वाले प्रश्न
फ्लिप बॉक्स फोन पर कैसे काम करता है?
टच स्क्रीन में कोई होवर नहीं होता है, इसलिए टैप किए जाने पर कार्ड फ़्लिप करता है फ्लिप के बाद बैक फेस बटन को अपने स्वयं के टैप की आवश्यकता होती है सामने की ओर जानकारी अवश्य देखें और वास्तविक डिवाइस पर परीक्षण करें।
क्या मैं सामने वाले आइकन के बजाय छवि का उपयोग कर सकता हूं?
हां, फ्रंट इमेज डिज़ाइन भिन्नता के साथ, जो एक मास्टर एडॉन्स प्रो विकल्प है अन्यथा, सामने एक आइकन का उपयोग करें या स्टाइल टैब में चेहरे के लिए पृष्ठभूमि छवि सेट करें।
क्या मुझे फ्लिपबॉक्स विजेट के लिए मास्टर एडॉन्स प्रो की आवश्यकता है?
नहीं फ्लिपबॉक्स डिफ़ॉल्ट और सामने आइकन डिजाइन और ६ एनिमेशन के साथ मास्टर ऐडऑन प्लगइन के साथ आता है मास्टर ऐडऑन प्रो २ और डिजाइन और १६ और एनिमेशन जोड़ता है।
क्या फ्लिप बॉक्स क्लिक पर फ्लिप करता है?
नहीं, विजेट होवर पर फ़्लिप करता है, और टच स्क्रीन पर पहला टैप कार्ड को फ़्लिप करता है डेस्कटॉप पर कोई क्लिक ट्रिगर नहीं है एक पैनल के लिए जो क्लिक पर खुलता है, का उपयोग करें सामग्री टॉगल करें विजेट या ए पॉपअप बिल्डर पॉपअप।
क्या फ्लिप कार्ड फ्लिप बॉक्स के समान है?
हाँ फ्लिप कार्ड एक ही प्रभाव के लिए सीएसएस ट्यूटोरियल नाम है: एक सामने का चेहरा जो पीछे के चेहरे पर घूमता है फ्लिपबॉक्स विजेट संपादक पैनल से एक फ्लिप कार्ड बनाता है, ऊंचाई के साथ, टच स्क्रीन पर टैप और बैक-फेस बटन आपके लिए संभाला।
क्या एलिमेंटर के पास फ्लिप बॉक्स विजेट है?
केवल एलिमेंटर प्रो में एक है प्रो के बिना एलिमेंटर नहीं करता है, इसलिए आपको इस फ्लिपबॉक्स विजेट जैसे ऐडऑन की आवश्यकता है।
क्या मैं पूरे फ्लिपबॉक्स को अलग बटन के बिना किसी पृष्ठ से लिंक कर सकता हूं?
विजेट केवल बटन लिंक पूरे कार्ड क्लिक करने योग्य बनाने के लिए, चालू करें रैपर लिंक फ़्लिपबॉक्स विजेट में लिंक को एक्सटेंशन और जोड़ें।
कितने फ्लिप एनिमेशन हैं?
कुल में २२ क्षैतिज फ्लिप, लंबवत फ्लिप, फीका, फ्लिप बॉक्स, फ्लिप बॉक्स फीका और फीका विजेट के साथ आते हैं क्यूब, रोलओवर और ३ डी फ्लिप सहित अन्य १६, मास्टर एडॉन्स प्रो की आवश्यकता है।
क्या मैं हिंडोले में फ्लिप बॉक्स रख सकता हूँ?
अंतर्निहित सेटिंग के साथ नहीं विजेट में कोई हिंडोला मोड नहीं है एक टेम्पलेट के रूप में एक फ्लिप बॉक्स सहेजें और इसे दिखाएं छवि हिंडोला या एक लूप ग्रिड, या इसके बजाय कार्डों को एक रैपिंग कंटेनर में रखें।
एलिमेंटर प्रो फ्लिप बॉक्स से क्या अंतर है?
एलिमेंटर प्रो में दिशा और ३ डी गहराई के साथ छह प्रभाव हैं, एक पूरे बॉक्स लिंक विकल्प और एक एलिमेंटर प्रो योजना की आवश्यकता है फ्लिपबॉक्स प्रो के बिना एलिमेंटर पर काम करता है, इसमें ६ एनिमेशन और मास्टर एडॉन्स प्रो, दो आइकन या छवि डिजाइन के साथ २२ शामिल हैं, और रैपर लिंक एक्सटेंशन के माध्यम से पूरे कार्ड को लिंक करता है।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर
