एलिमेंटर इमेज बॉक्स: लाइव डेमो और डाउनलोड के साथ 16 डिज़ाइन

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

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

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

इस पेज पर

एक नज़र में 16 डिज़ाइन

इन्हें चलाने के लिए आपको क्या चाहिए

एलिमेंट फ्री पेज के लिए ही पर्याप्त है डिजाइन एक अलग मामला है।

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

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

०१ लुमेन छवि बक्से

लाइव डेमो   विजेट JSON डाउनलोड करें

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

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

इसके लिए उपयोग करेंः तकनीकी सेवाएँ, डार्क-थीम वाली साइटें, डार्क ग्राउंड के सामने खींची गई कोई भी चीज़।

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

02. वर्ज इमेज बॉक्स

लाइव डेमो   विजेट JSON डाउनलोड करें

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

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

इसके लिए उपयोग करेंः संपादकीय पृष्ठ, मार्गदर्शिकाएँ, चार से छह महत्वपूर्ण वस्तुओं वाली कोई भी चीज़।

इसके लिए उपयोग न करेंः लगभग आठ से अधिक आइटम डगमगाता जमा होता है और पृष्ठ बहुत लंबा हो जाता है, बहुत तेजी से।

03। एपर्चर छवि बक्से

लाइव डेमो   विजेट JSON डाउनलोड करें

तीन की दो पंक्तियों में छह बक्से, गर्म पेपर-ग्रे पर प्रत्येक छवि मुखौटा है और पंक्ति के रूप में मुखौटा बाहर की ओर खुलता है, जिस तरह से लेंस एपर्चर करता है प्रत्येक कार्ड अपने विवरण के तहत एक छोटा देखें विवरण लिंक रखता है।

यह वह है जब आपके पास छह चीजें हैं और वे वास्तव में बराबर हैं जब आप तक पहुंचने के लिए अधिकांश छवि बॉक्स लेआउट चुपचाप आकार या स्थिति से अपने आइटम रैंक करते हैं यह एक नहीं है।

इसके लिए उपयोग करेंः डार्करूम और प्रिंट सेवाएँ, छह-आइटम फीचर ग्रिड, कुछ भी फोटोग्राफिक।

इसके लिए उपयोग न करेंः तीन आइटम दो-पंक्ति लय पूरे डिजाइन है और तीन की एक पंक्ति इसे खो देती है।

04. बास्क्यूल छवि बक्से

लाइव डेमो   विजेट JSON डाउनलोड करें

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

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

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

इसके लिए उपयोग न करेंः एक पृष्ठ में आपका प्राथमिक नेविगेशन फ्लिप के पीछे की सामग्री ऐसी सामग्री है जिसे अधिकांश आगंतुक कभी नहीं देखते हैं।

०५ कैस्केड छवि बक्से

लाइव डेमो   विजेट JSON डाउनलोड करें

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

प्रत्येक कार्ड में एक पाठ्यक्रम दिनांक लिंक होता है, जो इस लेआउट के लिए वास्तव में उपहार है: ऐसी चीजें जो एक क्रम में दोहराई जाती हैं, जहां क्रम मायने रखता है।

इसके लिए उपयोग करेंः स्टूडियो और कार्यशाला सेवाएँ, पाठ्यक्रम सूची, प्रक्रिया चरण।

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

06। फिलाग्री छवि बक्से

लाइव डेमो   विजेट JSON डाउनलोड करें

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

यह यहाँ है क्योंकि हर सेवा अनुभाग एक नायक उपचार के लायक नहीं है कभी-कभी ग्यारह चीजें होती हैं जो आप करते हैं और आगंतुक उन्हें स्कैन करना चाहता है, उनकी प्रशंसा नहीं करता है।

इसके लिए उपयोग करेंः लंबी सेवा मेनू, मूल्य सूची, बहुत सारे लाइन आइटम के साथ विशेषज्ञ ट्रेड।

इसके लिए उपयोग न करेंः तीन हेडलाइन सेवाएं उस गिनती पर ऐसा लगता है कि आप अनुभाग को समाप्त करना भूल गए हैं।

07. फ़्रीज़ स्ट्रिप

लाइव डेमो   विजेट JSON डाउनलोड करें

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

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

इसके लिए उपयोग करेंः उत्पादन अनुक्रम, लंबी सूचियाँ जो एक ग्रिड को नष्ट कर देंगी, अंतर्निहित क्रम वाली कोई भी चीज़।

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

08. गायर इमेज बॉक्स

लाइव डेमो   विजेट JSON डाउनलोड करें

कार्ड जहां भी सूचक है, वहां की ओर झुकाव, और एक चमक सतह को पार करती है क्योंकि वे चलते हैं यह प्रभाव है कि २०२१ में सभी ने कोशिश की और ज्यादातर लोगों ने ओवरडिड किया यहां झुकाव कुछ डिग्री है, पंद्रह नहीं।

कीबोर्ड उपयोगकर्ताओं को ठीक से संभाला जाता है, जो लगभग कुछ भी नहीं करता है एक कार्ड पर टैब करें और आपको लिफ्ट और शीन मिलता है लेकिन कोई रोटेशन नहीं होता है, क्योंकि कीबोर्ड में घूमने के लिए कोई पॉइंटर स्थिति नहीं होती है और नकली एक बकवास है।

इसके लिए उपयोग करेंः भौतिक उत्पाद, फ़्रेम, तैयार किए गए सामान, प्रकाश पकड़ने लायक सतह वाली कोई भी चीज़।

इसके लिए उपयोग न करेंः पाठ-भारी कार्ड किसी पैराग्राफ को झुकाते हुए, जबकि कोई इसे पढ़ता है, शत्रुतापूर्ण है।

०९ आवेग छवि बक्से

लाइव डेमो   विजेट JSON डाउनलोड करें

कार्ड आपके कर्सर की ओर झुकते हैं क्योंकि यह दृष्टिकोण करता है, फिर इसे छोड़ देता है आधे कार्ड के खिलाफ पुल को सामान्यीकृत किया जाता है और क्लैंप किया जाता है, इसलिए एक बार जब आप किनारे से आगे निकल जाते हैं तो यह स्क्रीन पर कार्ड को फ़्लिंग करने के बजाय बढ़ने से रोकता है।

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

इसके लिए उपयोग करेंः पाठ, किराया, बुकिंग, कुछ भी जहां प्रत्येक कार्ड एक बटन में समाप्त होता है।

इसके लिए उपयोग न करेंः बिना क्लिक लक्ष्य वाले सूचनात्मक कार्ड आप एक ऐसी बातचीत का वादा कर रहे हैं जो आप वितरित नहीं करते हैं।

10। किंत्सुगी छवि बक्से

लाइव डेमो   विजेट JSON डाउनलोड करें

छवियां टुकड़ों में आती हैं और फिर से इकट्ठा होती हैं दो ब्रेक पैटर्न इसके साथ जहाज: तीन लंबे टुकड़े, जैसे कि इसकी ऊंचाई में एक फलक फटा हुआ है, और छह वेजेज ऑफ-सेंटर सेट एक बिंदु से विकिरण करते हैं, जो एक साफ ब्रेक के बजाय प्रभाव के रूप में पढ़ता है।

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

इसके लिए उपयोग करेंः कांच, चीनी मिट्टी की चीज़ें, पुनर्स्थापन, मरम्मत, संरक्षण।

इसके लिए उपयोग न करेंः अस्पताल, बीमा, कुछ भी जहां “shattering” एक ऐसा अर्थ रखता है जो आप नहीं चाहते हैं।

11। पलिसडे छवि बक्से

लाइव डेमो   विजेट JSON डाउनलोड करें

तीन लंबे पैनल, प्रत्येक ऊर्ध्वाधर स्लैट्स से इकट्ठे होते हैं जो अनुक्रम में आते हैं, एक समय में एक बोर्ड बनाया जा रहा बाड़ स्लैट गिनती पैनल की चौड़ाई के अनुकूल होती है, इसलिए एक संकीर्ण कॉलम को कम, व्यापक बोर्ड मिलते हैं बजाय एक ही संख्या निचोड़ा पतला।

सीढ़ियाँ, सैश खिड़कियां, फिट कमरे ये सभी ऐसे विषय हैं जिन्हें आप झूठ बोलने के बजाय खड़े होने की तस्वीर लेंगे, और जो इस लेआउट को एक लैंडस्केप कार्ड से बेहतर सूट करता है।

इसके लिए उपयोग करेंः बढ़ईगीरी, वास्तुकला, आंतरिक सज्जा, लंबे उत्पाद शॉट्स।

इसके लिए उपयोग न करेंः लैंडस्केप फोटोग्राफी पोर्ट्रेट पैनल तस्वीर को एक स्लॉट में क्रॉप करते हैं और आप शॉट खो देते हैं।

१२ छवि बक्से अपवर्तित करें

लाइव डेमो   विजेट JSON डाउनलोड करें

एक रंग धोने मिश्रण मोड में हर छवि पर बैठता है, इसलिए चार अलग-अलग दिनों में चार अलग-अलग रोशनी में शूट की गई चार तस्वीरें एक सेट की तरह दिखती हैं यहां वास्तविक काम है, और यह कम ग्लैमरस है जितना लगता है।

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

इसके लिए उपयोग करेंः मिश्रित-स्रोत इमेजरी, स्टॉक फ़ोटो, कुछ भी जहां आप रीशूट नहीं कर सकते।

इसके लिए उपयोग न करेंः उत्पाद रंग सटीकता। पेंट के नमूने को धोना एक रिटर्न समस्या है।

13। राइजर इमेज बॉक्स

लाइव डेमो   विजेट JSON डाउनलोड करें

कार्ड नीचे से कैप्शन के एक होंठ के साथ नीचे दिखाते हैं होंठ को एक निश्चित ऊंचाई पर सेट करने के बजाय इसके अंदर पाठ के खिलाफ मापा जाता है, इसलिए दो-शब्द कैप्शन और दो-पंक्ति एक दोनों उनमें से एक क्लिपिंग के बजाय सही ढंग से बैठते हैं।

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

इसके लिए उपयोग करेंः एजेंसियां, उत्पादन कंपनियां, तीन-सेवा पृष्ठ।

इसके लिए उपयोग न करेंः लंबे विवरण होंठ एक कैप्शन है, पैराग्राफ नहीं।

१४ संक्रांति छवि बॉक्स

लाइव डेमो   विजेट JSON डाउनलोड करें

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

थोक भूनना, हरी सोर्सिंग, एस्प्रेसो अंशांकन छह की जगह दी गई तीन सेवाएं इसका उपयोग करें जब आपके पास कहने के लिए कुछ चीजें हों और वे प्रत्येक को पूरी स्क्रीन के लायक हों।

इसके लिए उपयोग करेंः दो से चार प्रीमियम सेवाएं, कहानी कहने वाले पेज, कॉफी और खाद्य ब्रांड।

इसके लिए उपयोग न करेंः छह या अधिक आइटम छह आइटम पर यह डिज़ाइन एक बहुत लंबा पृष्ठ है कोई भी नीचे तक नहीं पहुंचता है।

१५ थ्रेसहोल्ड इमेज बॉक्स

लाइव डेमो   विजेट JSON डाउनलोड करें

दो दरवाजे प्रत्येक छवि पर बंद बैठते हैं और कार्ड के दृश्य में प्रवेश करने के बीच में भाग लेते हैं दरवाजे छवि के अपने स्रोत से बनाए जाते हैं, इसलिए वे कभी भी उनके पीछे की तस्वीर को बेमेल नहीं करते हैं।

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

इसके लिए उपयोग करेंः उद्यान, स्थान, उद्घाटन, कुछ भी जो एक आगंतुक शारीरिक रूप से प्रवेश करता है।

इसके लिए उपयोग न करेंः बारह कार्ड दरवाजे खोलने के बारह सेट दरवाजे का एक बहुत कुछ है।

16। वेल्लम छवि बॉक्स

लाइव डेमो   विजेट JSON डाउनलोड करें

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

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

इसके लिए उपयोग करेंः अभिलेखागार, बाइंडिंग, संरक्षण, शांत और महंगे ब्रांड।

इसके लिए उपयोग न करेंः कुछ भी जिसे तात्कालिकता की आवश्यकता है इस डिजाइन में कोई नहीं है और यह दिखावा नहीं कर रहा है।

डिफ़ॉल्ट एलिमेंट छवि बॉक्स विजेट क्या कर सकता है?

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

यह बहुत सारी साइटों को कवर करता है, और यदि यह आपकी साइटों को कवर करता है, तो इसका उपयोग करें आपको एक शीर्षक के ऊपर एक तस्वीर लगाने के लिए एक ऐडऑन की आवश्यकता नहीं है।

जहां यह बाहर निकलता है गति और संरचना है कोई पीछे का चेहरा नहीं है, कोई प्रति-कार्ड अनुक्रमण नहीं है, कोई क्षैतिज लेआउट नहीं है, एक कार्ड को अपने पड़ोसियों से अलग व्यवहार करने का कोई तरीका नहीं है वे अंतराल हैं जो ऊपर सोलह डिजाइन भरते हैं।

छवि बॉक्स बनाम आइकन बॉक्स: आपको किसका उपयोग करना चाहिए?

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

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

एक तीसरा विकल्प जिसे लोग भूल जाते हैं: a फ्लिपबॉक्स, जो एक पीठ के साथ एक छवि बॉक्स है ऊपर बास्क्यूल वह विचार है जिसे एक काज के साथ फिर से बनाया गया है।

आप एलिमेंट छवि बॉक्स में होवर प्रभाव कैसे जोड़ते हैं?

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

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

यदि यह विशेष रूप से टेक्स्ट-ओवर-इमेज प्रभाव है जो आप के बाद हैं, तो हमने सूचीबद्ध किया छवि होवर प्रभावों पर 25+ एलिमेंट टेक्स्ट अलग से, और वे स्टॉक विजेट के साथ काम करते हैं।

इन एलिमेंटर छवि बॉक्स डिज़ाइन को कैसे आयात करें

ऊपर दिए गए किसी भी डिज़ाइन से JSON डाउनलोड करें, फिर वर्डप्रेस पर जाएँ मास्टर ऐडऑन → विजेट बिल्डर → विजेट आयात करें और फ़ाइल अपलोड करें विजेट पसंदीदा के तहत एलिमेंटर पैनल में दिखाई देता है, सामग्री और शैली टैब में अपने स्वयं के नियंत्रण के साथ।

1. क्लिक करें विजेट JSON डाउनलोड करें आपके इच्छित डिज़ाइन पर ज़िप में JSON और एक पूर्वावलोकन छवि शामिल है।
2. इसे अनज़िप करें एलिमेंट का अपना टेम्पलेट आयातक इस फ़ाइल को नहीं पढ़ेगा, क्योंकि यह टेम्पलेट्स के बजाय विजेट बिल्डर के पास जाता है।
3. को जा मास्टर ऐडऑन → विजेट बिल्डर और चुनें विजेट आयात करें.
4. JSON अपलोड करें। एलिमेंटर के साथ किसी भी पृष्ठ को संपादित करें और विजेट नाम के लिए पैनल खोजें।
5. प्लेसहोल्डर छवियों और पाठ को बदलें कार्ड एक पुनरावर्तक हैं, इसलिए विजेट को डुप्लिकेट करने के बजाय वहां आइटम जोड़ें या निकालें।

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

क्या ये छवि बॉक्स मोबाइल पर काम करते हैं, और क्या वे पहुंच योग्य हैं?

दोनों के लिए हाँ, एक डिजाइन-स्तर चेतावनी के साथ यहां हर विजेट सम्मान करता है prefers-reduced-motion: यदि किसी आगंतुक ने ओएस स्तर पर सक्षम गति को कम कर दिया है, तो प्रवेश एनिमेशन नहीं चलते हैं और कार्ड अपने अंतिम राज्य में प्रस्तुत करते हैं विजेट में संभाला जाता है, आपके लिए नहीं छोड़ा जाता है।

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

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

आपको वास्तव में कौन सा एलिमेंटर छवि बॉक्स चुनना चाहिए?

अपने आइटम की गिनती से शुरू करें, प्रभाव से नहीं।

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

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

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

आगे कहाँ जाना है

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

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