अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

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

आएँ शुरू करें!

नीचे स्क्रॉल करें बटन पूर्वावलोकन

सबसे पहले, आइए उन डिज़ाइनों को देखें जो हम इस पोस्ट में बनाएंगे।

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण एक

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण एक

फ़ोन स्क्रॉल डाउन बटन उदाहरण एक

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण एक

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण दो

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

फ़ोन स्क्रॉल डाउन बटन उदाहरण दो

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण तीन

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

फ़ोन स्क्रॉल डाउन बटन उदाहरण तीन

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण चार

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

फ़ोन स्क्रॉल डाउन बटन उदाहरण चार

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

स्क्रॉल डाउन बटन फुलविड्थ हैडर डिज़ाइन

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

फ़ुल विड्थ हैडर डिज़ाइन

फुलविड्थ सेक्शन डिवाइडर

हम इस पूर्ण-चौड़ाई वाले हेडर के लिए एक डिवाइडर जोड़ेंगे। के लिए सेटिंग्स खोलें पूर्ण-चौड़ाई अनुभाग.

Divi स्क्रॉल डाउन बटन फुलविड्थ हैडर मॉड्यूल

अगला, स्क्रॉल करें परकार. दबाएं नीचे टैब करें और 8 . चुनेंवां डिवाइडर स्टाइल। रंग को #e5e8f0 पर सेट करें और ऊंचाई के लिए 10vw दर्ज करें। अनुभाग की सेटिंग बंद करें.

  • डिवाइडर: नीचे
  • विभक्त शैली: 8वां शैली
  • रंग: #e5e8f0
  • ऊंचाई: 10vw

Divi स्क्रॉल डाउन बटन फुलविड्थ हैडर मॉड्यूल

फ़ुल विड्थ हैडर टेक्स्ट

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

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

फ़ुल विड्थ हैडर टेक्स्ट

पूर्ण-चौड़ाई वाली शीर्षलेख छवियां

नीचे स्क्रॉल करें इमेजिस और एक विस्तृत हैडर छवि चुनें। मैं एक ऐसी छवि चुन रहा हूं जो थेरेपी लेआउट पैक के साथ आती है। आप उस पोस्ट को नीचे स्क्रॉल करके और इमेज एसेट डाउनलोड करके इमेज ढूंढ सकते हैं।

पूर्ण-चौड़ाई वाली शीर्षलेख छवियां

फ़ुल विड्थ हैडर बैकग्राउंड

नीचे स्क्रॉल करें पार्श्वभूमि. बैकग्राउंड कलर डिलीट करें और ग्रेडिएंट टैब चुनें। पहले ग्रैडिएंट स्टॉप का रंग #2e5b61 में बदलें और स्थिति को 25% पर सेट करें। दूसरे ग्रेडिएंट स्टॉप को 100% पर छोड़ दें और रंग को rgba (46,91,97,0.5) में बदलें।

  • ग्रेडिएंट स्टॉप वन: #2e5b61, 25%
  • ग्रेडिएंट स्टॉप टू: आरजीबीए (46,91,97,0.5), 100%

फ़ुल विड्थ हैडर बैकग्राउंड

सक्षम करना पृष्ठभूमि छवि के ऊपर ढाल रखें.

  • पृष्ठभूमि छवि के ऊपर ढाल रखें: हाँ

फ़ुल विड्थ हैडर बैकग्राउंड

पूर्ण-चौड़ाई हैडर पृष्ठभूमि छवि

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

पूर्ण-चौड़ाई हैडर पृष्ठभूमि छवि

पूर्ण-चौड़ाई वाला हैडर लेआउट

अगला, चुनें डिज़ाइन टैब और सक्षम करें फ़ुलस्क्रीन बनाएं.

Divi स्क्रॉल डाउन बटन फुलविड्थ हैडर मॉड्यूल

फ़ुल विड्थ हैडर स्क्रॉल डाउन आइकन

अगला, सक्षम करें स्क्रॉल डाउन बटन दिखाएं. हम इस बटन को अपने उदाहरणों में स्टाइल करेंगे, इसलिए हम इसे अभी के लिए डिफ़ॉल्ट सेटिंग्स में छोड़ देंगे।

  • स्क्रॉल डाउन बटन दिखाएँ: हाँ

फ़ुल विड्थ हैडर स्क्रॉल डाउन आइकन

पूर्ण-चौड़ाई हैडर छवि

अगला, स्क्रॉल करें छवि और डेस्कटॉप के लिए टॉप लेफ्ट राउंडेड कॉर्नर को 200px में बदलें। शेष गोल कोनों को 0px पर सेट करें। टेबलेट और फ़ोन के लिए गोल कोनों को 100px में बदलें।

  • गोल कोनों वाले डेस्कटॉप: 200px ऊपर बाएँ, 0px अन्य सभी
  • गोल कोनों वाले टैबलेट और फ़ोन: 200px ऊपर बाईं ओर, 0px अन्य सभी

पूर्ण-चौड़ाई हैडर छवि

फ़ुल विड्थ हैडर शीर्षक टेक्स्ट

अगला, स्क्रॉल करें शीर्षक पाठ. हेडिंग लेवल के लिए H1 का इस्तेमाल करें। टाइटल फॉन्ट के लिए कॉर्मोरेंट गारमोंड चुनें, वेट को बोल्ड और कलर को #e1ecea पर सेट करें।

  • शीर्षक स्तर: H1
  • फ़ॉन्ट: जलकाग गारमोंड
  • वजन: बोल्ड
  • रंग: #e1ecea

फ़ुल विड्थ हैडर शीर्षक टेक्स्ट

अगला, सेट करें आकार सभी तीन स्क्रीन आकारों के लिए। डेस्कटॉप के लिए 90px, टैबलेट के लिए 40px और फ़ोन के लिए 24px का उपयोग करें। लाइन की ऊँचाई को 1.1em में बदलें।

  • आकार: 90px, 40px, 24px
  • रेखा की ऊँचाई: 1.1em

फ़ुल विड्थ हैडर शीर्षक टेक्स्ट

फ़ुलविड्थ हैडर उपशीर्षक टेक्स्ट

अगला, स्क्रॉल करें उपशीर्षक पाठ. फ़ॉन्ट को इंटर, वज़न को बोल्ड और रंग को #e1ecea में बदलें।

  • फ़ॉन्ट: इंटर
  • वजन: बोल्ड
  • रंग: #e1ecea

फ़ुलविड्थ हैडर उपशीर्षक टेक्स्ट

ठीक आकार डेस्कटॉप के लिए 22px, टैबलेट के लिए 20px और फ़ोन के लिए 16px तक। बदलाव ऊंची लाईन 1.6em करने के लिए

  • आकार: 22px, 20px, 16px
  • रेखा की ऊँचाई: 1.6em

फ़ुलविड्थ हैडर उपशीर्षक टेक्स्ट

फ़ुल विड्थ हैडर बटन

सेटिंग के लिए नीचे स्क्रॉल करें बटन एक और सक्षम करें बटन वन के लिए कस्टम शैलियों का प्रयोग करें. आकार को 14px में, टेक्स्ट के रंग को #2e5b61 में और पृष्ठभूमि के रंग को #e1ecea में बदलें।

  • बटन वन के लिए कस्टम शैलियों का उपयोग करें: हाँ
  • टेक्स्ट का आकार: 14px
  • टेक्स्ट का रंग: #2e5b61
  • बटन पृष्ठभूमि: #e1eea

फ़ुल विड्थ हैडर बटन

बदलाव सीमा चौड़ाई 0px और सीमा त्रिज्या 50 पीएक्स तक। फ़ॉन्ट के लिए इंटर का उपयोग करें और वज़न को सेमी बोल्ड में बदलें।

  • सीमा चौड़ाई: 0px
  • सीमा त्रिज्या: 50px
  • फ़ॉन्ट: इंटर
  • वजन: सेमी बोल्ड

फ़ुल विड्थ हैडर बटन

के लिए बटन पैडिंगऊपर और नीचे के लिए 20px और बाएँ और दाएँ के लिए 40px का उपयोग करें।

  • पैडिंग: 20px ऊपर और नीचे, 40px बाएँ और दाएँ

फ़ुल विड्थ हैडर बटन

फ़ुलविड्थ हैडर स्क्रॉल डाउन बटन उदाहरण

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

स्क्रॉल डाउन बटन में तीन सेटिंग्स शामिल हैं। प्रत्येक सेटिंग को प्रत्येक स्क्रीन आकार के लिए स्वतंत्र रूप से समायोजित किया जा सकता है। सेटिंग्स में शामिल हैं:

  • चिह्न चयन – 11 आइकन में से चुनें। उनमें पृष्ठभूमि के साथ या बिना पृष्ठभूमि के विभिन्न तीर डिज़ाइन शामिल हैं जिनमें गैर-गोलाकार, गोलाकार और ठोस शामिल हैं।
  • रंग – मानक Divi रंग चयनकर्ता।
  • आकार – मानक Divi आकार समायोजन।

फ़ुलविड्थ हैडर स्क्रॉल डाउन बटन उदाहरण

इसमें उन्नत टैब में एक सीएसएस फ़ील्ड भी शामिल है। हम इन सभी सेटिंग्स का उपयोग करेंगे।

नीचे स्क्रॉल करें बटन उदाहरण एक

हमारे पहले उदाहरण के लिए, हम पृष्ठभूमि के बिना एक गैर-गोलाकार आइकन का उपयोग करेंगे। पहला आइकन चुनें, रंग को #e1ecea में बदलें, और आकार को डेस्कटॉप के लिए 66px, टैबलेट के लिए 60px और फ़ोन के लिए 50px में बदलें।

  • चिह्न: 1अनुसूचित जनजाति आइकन
  • रंग: #e1ecea
  • आकार: डेस्कटॉप के लिए 66px, टेबलेट के लिए 60px, फ़ोन के लिए 50px

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

नीचे स्क्रॉल करें बटन उदाहरण एक

स्क्रॉल डाउन बटन उदाहरण दो

हमारे दूसरे उदाहरण के लिए, हम एक वृत्ताकार चिह्न का उपयोग करेंगे। सातवें आइकन का चयन करें और रंग को #e8c553 में बदलें। हम इसके लिए आइकन को बड़ा सेट करेंगे। आकार को डेस्कटॉप के लिए 78px, टेबलेट के लिए 70px और फ़ोन के लिए 60px में बदलें।

  • चिह्न: 7वां आइकन
  • रंग: #e8c553
  • आकार: डेस्कटॉप के लिए 78px, टेबलेट के लिए 70px, फ़ोन के लिए 60px

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

स्क्रॉल डाउन बटन उदाहरण दो

नीचे स्क्रॉल करें बटन उदाहरण तीन

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

आठवां आइकन चुनें और उसका रंग #0e4951 में बदलें। डेस्कटॉप के लिए आकार 60px, टेबलेट के लिए 56pc और फ़ोन के लिए 50px पर सेट करें।

  • चिह्न: 8वां आइकन
  • रंग: #0e4951
  • आकार: डेस्कटॉप के लिए 60px, टेबलेट के लिए 56px, फ़ोन के लिए 50px

हरे रंग की पृष्ठभूमि में हरे रंग का गहरा रंग है। गहरे रंग की छाया हरे रंग के ऊपर खड़ी होती है और फिर भी बाकी लेआउट से मेल खाती है।

नीचे स्क्रॉल करें बटन उदाहरण तीन

नीचे स्क्रॉल करें बटन उदाहरण चार

क्या होगा यदि आप रंगों को संयोजित करना चाहते हैं, ताकि आपके पास कटआउट आइकन के पीछे पृष्ठभूमि का रंग हो? हम इसे सीएसएस के साथ कर सकते हैं। इस उदाहरण के लिए, हम आइकन के पीछे पृष्ठभूमि आकार बनाने के लिए CSS का उपयोग करेंगे जो कटआउट आइकन के माध्यम से दिखाई देगा। आइकन स्वयं मानक सेटिंग्स का उपयोग करेगा।

ग्यारहवें आइकन का चयन करें और रंग को #e1ecea में बदलें। हम इसके लिए आइकॉन को छोटा करेंगे और एक बड़ा बैकग्राउंड शेप बनाएंगे। आकार को डेस्कटॉप के लिए 50px, टेबलेट के लिए 40px और फ़ोन के लिए 30px में बदलें।

  • चिह्न: 11वां
  • चिह्न का रंग: #e1eea
  • आकार: डेस्कटॉप के लिए 50px, टेबलेट के लिए 40px, फ़ोन के लिए 30px

नीचे स्क्रॉल करें बटन उदाहरण चार

इसके बाद, उन्नत टैब पर जाएं और स्क्रॉल डाउन बटन के सीएसएस फ़ील्ड तक स्क्रॉल करें और इस सीएसएस को दर्ज करें:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

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

नीचे स्क्रॉल करें बटन उदाहरण चार

नीचे स्क्रॉल करें बटन परिणाम

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण एक

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण एक

फ़ोन स्क्रॉल डाउन बटन उदाहरण एक

फ़ोन स्क्रॉल डाउन बटन उदाहरण एक

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण दो

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

फ़ोन स्क्रॉल डाउन बटन उदाहरण दो

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण तीन

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

फ़ोन स्क्रॉल डाउन बटन उदाहरण तीन

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

डेस्कटॉप स्क्रॉल डाउन बटन उदाहरण चार

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

फ़ोन स्क्रॉल डाउन बटन उदाहरण चार

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

विचार समाप्त

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

हम तुम से सुनना चाहते है। क्या आप अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन को स्टाइल करते हैं? हमें टिप्पणियों में बताएं।

अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें? अपने Divi फ़ुलविड्थ हैडर मॉड्यूल में स्क्रॉल डाउन बटन कैसे शामिल करें?

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *