लोगो स्लाइडर

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

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

लोगो स्लाइडर विजेट क्या करता है #

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

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

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• आपके क्लाइंट या पार्टनर लोगो छवि फ़ाइलों के रूप में तैयार हैं समान आयामों वाले लोगो सबसे अच्छे लगते हैं पारदर्शी या सफेद पृष्ठभूमि के साथ लगभग ३०० से १५० पिक्सेल अच्छी तरह से काम करता है।

लोगो स्लाइडर विजेट कैसे जोड़ें #

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

लोगो आइटम अनुभाग में अपना लोगो जोड़ें #

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

आइटम सूची के तहत तीन सेटिंग्स बैठते हैं जो पूरे स्लाइडर पर लागू होते हैंः

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

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

प्रत्येक लोगो के लिए लिंक और होवर प्रभाव सेट करें #

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

द होवर? ड्रॉपडाउन यह तय करता है कि जब कोई आगंतुक माउस को लोगो पर ले जाता है तो क्या होता है इसमें तीन मोड हैंः

• कोई नहीं: लोगो बस वहाँ बैठता है स्वच्छ और सरल।
• पाठ: लोगो फीका पड़ जाता है और ए ब्रांड नाम प्लस लघु विवरण अपनी जगह प्रकट हो जाते हैं।
• छवि: लोगो आपके द्वारा चुनी गई दूसरी छवि पर स्वैप हो जाता है।

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

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

लोगो में एक टूलटिप जोड़ें #

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

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

द शैली सेटिंग्स के बगल में टैब बबल को ही स्टाइल करता है: रंग, टाइपोग्राफी और रिक्ति टूलटिप्स २०१९ के बाद से “पार्टनर जैसे छोटे लेबल के लिए अच्छी तरह से काम करते हैं” जिन्हें पूर्ण पाठ होवर मोड की आवश्यकता नहीं है।

नेविगेशन तीर सेट करें #

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

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

हिंडोला व्यवहार को ट्यून करें #

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

• प्रति कॉलम स्लाइडः कितने लोगो एक बार में दिखाते हैं, १ से ६ तक चार या पांच अधिकांश डेस्कटॉप लेआउट के अनुरूप हैं, और उत्तरदायी आइकन आपको प्रति डिवाइस एक छोटी गिनती सेट करने देता है।
• लेआउटः हिंडोला मानक फ्लैट स्लाइडर है।
• ऑटो ऊंचाईः स्लाइडर की ऊंचाई को लोगो पंक्ति का अनुसरण करने देता है।
• ऑटोप्ले और ऑटोप्ले स्पीडः लोगो को स्वचालित रूप से घुमाएं गति मिलीसेकंड में देरी है, इसलिए ५००० का मतलब है कि हर पांच सेकंड में एक नया सेट।
• होवर पर विरामः कर्सर स्लाइडर के ऊपर होने पर रोटेशन बंद हो जाता है, जो होवर प्रभाव और टूलटिप्स के साथ अच्छी तरह से जुड़ जाता है।
• स्क्रॉल करने के लिए स्लाइडः प्रति चरण कितने लोगो आगे बढ़ते हैं।
• केंद्र स्लाइड, कर्सर पकड़ो, मुफ्त मोड खींचेंः सक्रिय लोगो को केन्द्रित करें, एक ग्रैब कर्सर दिखाएं, या आगंतुकों को पट्टी को स्वतंत्र रूप से फ़्लिंग करने दें।
• लूप: स्लाइडर को अंतहीन रूप से चलाता है, जो कि एक लोगो पट्टी लगभग हमेशा चाहता है देखने के लिए एक बात: लूप को स्लाइड प्रति कॉलम गिनती से अधिक लोगो की आवश्यकता होती है पांच कॉलम और केवल पांच लोगो के साथ, घूमने के लिए कुछ भी अतिरिक्त नहीं है।

लोगो स्लाइडर को स्टाइल करें #

पर स्विच करें शैली टैब चार वर्गों स्लाइडर के देखो कवर: हिंडोला आइटम, हिंडोला आइटम होवर, चिह्न, और नेविगेशन।

हिंडोला आइटम #

यह अनुभाग सामान्य, होवर और सक्रिय स्थितियों के साथ प्रत्येक लोगो सेल को फ़्रेम करता है।

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

हिंडोला आइटम होवर #

यह अनुभाग टेक्स्ट ओवरले सहित सामग्री टैब में आपके द्वारा चुनी गई होवर स्थिति को स्टाइल करता है।

• पृष्ठभूमि, सीमा, बॉक्स छाया, पैडिंग, मार्जिनः एक मँडरा लोगो के चारों ओर फ्रेम।
• नाम रंग, नाम टाइपोग्राफी, रिक्तिः ब्रांड नाम टेक्स्ट जो टेक्स्ट होवर मोड में दिखाई देता है।

चिह्न #

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

नेविगेशन तीर #

नेविगेशन अनुभाग अलग-अलग सामान्य और होवर स्थितियों के साथ तीर बटन को स्टाइल करता है।

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

पेज पर रिजल्ट #

पूर्वावलोकन या प्रकाशित करें, और स्लाइडर लाइव चलता है: लोगो ऑटोप्ले टाइमर पर घूमते हैं, तीरों का जवाब देते हैं, और उनके होवर प्रभाव और टूलटिप्स को आग लगाते हैं यहां प्रति दृश्य पांच लोगो और प्रत्येक तरफ एक तीर के साथ समाप्त पट्टी है।

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

• ग्राहक लोगो स्ट्रिप्स एजेंसी और फ्रीलांसर होमपेज पर, प्रत्येक लोगो एक केस स्टडी से जुड़ा हुआ है।
• साझेदार और प्रायोजक हिंडोला घटनाओं, गैर-लाभकारी संस्थाओं और SaaS एकीकरण पृष्ठों के लिए।
• “As को P” प्रेस बार में दिखाया गया है कवरेज से जुड़े प्रकाशन लोगो के साथ।
• ब्रांड शोकेस वितरक और खुदरा विक्रेता साइटों पर उनके द्वारा ले जाए जाने वाले लेबल सूचीबद्ध होते हैं।
• प्रौद्योगिकी ढेर पोर्टफोलियो साइटों पर, प्रत्येक टूल को नाम देने के लिए टूलटिप्स का उपयोग करना।

एक बेहतर लोगो स्लाइडर के लिए युक्तियाँ #

• हर लोगो को एक ही आकार में रखें। मिश्रित आयाम पंक्ति कूदते हैं क्योंकि यह स्लाइड करता है समान कैनवस पर सभी लोगो का निर्यात, जैसे ३०० से १५०, पट्टी को स्थिर रखता है।
• ग्रेस्केल-टू-कलर होवर का उपयोग करें। होवर लोगो छवि के रूप में एक ग्रेस्केल मुख्य छवि और रंग संस्करण सेट करें स्ट्रिप तब तक शांत रहती है जब तक आगंतुक इसके साथ बातचीत नहीं करते।
• ऑटोप्ले के साथ होवर पर पॉज़ चालू करें। कोई भी गतिशील लक्ष्य पर टूलटिप नहीं पढ़ सकता।
• मोबाइल पर तीर छुपाएं। स्वाइप करने से उनकी जगह ले ली जाती है और स्ट्रिप छोटी स्क्रीन पर साफ रहती है।
• लोगो चौड़ाई के लिए प्रति कॉलम स्लाइड्स का मिलान करें। व्यापक वर्डमार्क लोगो को कॉम्पैक्ट आइकन चिह्नों की तुलना में कम कॉलम की आवश्यकता होती है यदि कोई लोगो निचोड़ा हुआ दिखता है, तो छवि फ़ाइलों को छूने से पहले गिनती को एक से छोड़ दें।

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

लपेटकर #

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