फ्लिपबॉक्स विजेट सेटिंग्स

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

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

फ्लिपबॉक्स विजेट क्या करता है #

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

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

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

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

फ्लिपबॉक्स विजेट कैसे जोड़ें #

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

एनीमेशन शैली सेट करें #

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

द एनीमेशन शैली ड्रॉपडाउन मजेदार हिस्सा है यह २२ विकल्पों को वहन करता है, इसलिए एक ही कार्ड फ्लिप, फीका, स्लाइड, या क्यूब कर सकता है पीछे की ओर चेहरे पर अपना रास्ता फ्लिप क्षैतिज, फ्लिप वर्टिकल, फीका, फ्लिप बॉक्स, फ्लिप बॉक्स फीका और फीका मुक्त हैं; बाकी की जरूरत प्रो।

• क्षैतिज और लंबवत फ्लिप करेंः क्लासिक कार्ड प्रत्येक अक्ष पर फ्लिप।
• घन (ऊपर नीचे, नीचे ऊपर, बाएँ दाएँ, दाएँ बाएँ): चेहरों के बीच एक ३ डी घन रोटेशन (प्रो)।
• फीका और फीका अप (मुक्त), ३ डी फ्लिप और रोलओवर (प्रो): नरम पता चलता है जब आप कुछ सूक्ष्म चाहते हैं।
• स्लाइड दिशाएं और विकर्ण (प्रो): पीछे के चेहरे को एक तरफ या कोने से अंदर धकेलें।

सामने बॉक्स सेट करें #

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

• चिह्न शैली और चिह्नः लाइब्रेरी से एक आइकन चुनें सामने की तरफ एक छवि प्रो में फ्रंट इमेज डिज़ाइन भिन्नता के साथ आती है।
• शीर्षक और विवरणः सामने का शीर्षक और पाठ, प्रत्येक में एआई विकल्प के साथ लिखें।
• संरेखण और शीर्षक एचटीएमएल टैगः सामग्री को संरेखित करें और शीर्षक स्तर (H1 से H6) सेट करें।

बैक बॉक्स सेट करें #

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

• चिह्न: पीछे के चेहरे के लिए एक अलग आइकन।
• शीर्षक और विवरणः पीछे की ओर शीर्षक और पाठ।
• संरेखण और एचटीएमएल टैगः पीछे के लिए लेआउट और हेडिंग स्तर।

क्रिया बटन जोड़ें #

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

• बटन पाठः लेबल, जैसे आरंभ करें या अधिक जानें।
• से लिंक करेंः सामान्य एलिमेंटर लिंक विकल्पों के साथ, बटन खुलने वाला यूआरएल।

फ्लिप कार्ड को स्टाइल करें #

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

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

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

• सेवा कार्ड सामने एक आइकन और विवरण के साथ-साथ पीछे एक बटन भी है।
• टीम सदस्यों सामने की तरफ एक फोटो और फ्लिप पर एक बायो दिखा रहा है।
• उत्पाद हाइलाइट्स इससे कीमत और होवर पर खरीदें बटन का पता चलता है।
• फ़ीचर ग्रिड जहां प्रत्येक कार्ड एक संक्षिप्त स्पष्टीकरण पर फ़्लिप करता है।
• पोर्टफोलियो टाइलें एक थंबनेल फ्रंट और पीछे एक प्रोजेक्ट लिंक के साथ।

फ्लिपबॉक्स विजेट के साथ काम करने के लिए टिप्स #

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

वीडियो ट्यूटोरियल देखें #

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

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

लपेटकर #

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