अवाडा हेडर, फूटर और कॉलम लेआउट बिल्डर का उपयोग कैसे करें

हमारा अपना पेज बिल्डर, अवाडा बिल्डर, अब दो इंटरफेस में उपलब्ध है: अवाडा बिल्डर, जो हमारा बैक-एंड वायरफ्रेम पेज बिल्डर है, और अवाडा लाइव, जो हमारा फ्रंट-एंड बिल्डर है, जिसे हाल ही में अवाडा 6.0 के साथ पेश किया गया था। .

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

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

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

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

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

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

अनुभाग लेआउट का उपयोग करना

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

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

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

एक लेआउट को अनुकूलित करना

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

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

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

लेआउट सेक्शन बिल्डर स्क्रीन पर, लेआउट सेक्शन के प्रकार का चयन करें, एक नाम दर्ज करें ( amp के लिए, फ़ुटर, संभवतः ग्लोबल फ़ुटर) और नया लेआउट सेक्शन बनाएं पर क्लिक करें, जैसा कि नीचे दिखाया गया है।

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

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

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

कस्टम लेआउट संपादन

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

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

नीचे टैक्सी डेमो के लिए बनाया गया मूल फ़ुटर देखें; यह थीम विकल्प और फ़ुटर विजेट को बदलकर बनाया गया था।

इस कस्टम हेडर का डेस्कटॉप संस्करण यहां दिखाया गया है, लेकिन इस कस्टम हेडर के दायरे को सही ढंग से समझने के लिए, आपको लाइव साइट पर जाना होगा, जिसे आप यहां एक्सेस कर सकते हैं।

सशर्त लेआउट डिजाइन

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

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

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

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

अवदा लेआउट बिल्डर से कॉलम जोड़ना

अवाडा साइट को डिज़ाइन करते समय कॉलम तत्व, कंटेनर तत्व की तरह, एक आवश्यक संरचनात्मक घटक है।

अवाडा लेआउट बिल्डर के साथ कॉलम जोड़ना अपेक्षाकृत आसान है।

  • पृष्ठ पर एक कंटेनर जोड़ने के लिए ' + कंटेनर कंटेनर डालते समय, आपसे एक कॉलम या कॉलम लेआउट चुनने के लिए कहा जाएगा। आप एक खाली कंटेनर बना सकते हैं, लेकिन आम तौर पर आप इस चरण में कॉलम जोड़ते हैं।
  • किसी मौजूदा कंटेनर में नए कॉलम जोड़ने के लिए, कंटेनर पर होवर करें और ' + कॉलम ' बटन पर क्लिक करें। नया कॉलम जोड़ने के लिए यहां क्लिक करें।
  • किसी कॉलम के ऊपरी बाएँ कोने में, 'कॉलम का आकार बदलें' आइकन पर क्लिक करें। यह अब आपके कॉलम के समान आकार का होगा। amp के लिए आकार बदलें कॉलम विकल्प के अंतर्गत 1/4 कॉलम '1/4
  • स्तंभों को पुनर्व्यवस्थित करने के लिए खींचें और छोड़ें। आप कॉलम को कंटेनर में खींच और छोड़ भी सकते हैं।

एक कॉलम को केवल समान चौड़ाई वाले कंटेनर तत्व के अंदर रखा जा सकता है; यह आमतौर पर वह साइट चौड़ाई होती है जिसे आपने साइट के लिए निर्धारित किया है। इस प्रकार, यदि आप साइट की चौड़ाई 1200px पर सेट करते हैं, तो 1/2 कॉलम 600px चौड़ा होगा। किसी पृष्ठ पर जोड़े जाने पर प्रीसेट कॉलम आकार नीचे दिखाए जाते हैं।

अवाडा में, आप बड़े, मध्यम और छोटे लेआउट पर कॉलम की चौड़ाई (और अधिक) अलग-अलग सेट कर सकते हैं। रिस्पॉन्सिव लेआउट में डिस्प्ले ऑर्डर और कॉलम का आकार कैसे सेट करें, कॉलम के साथ इस उत्कृष्ट नई सुविधा का उपयोग कैसे करें, यह बताता है।

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

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

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

केवल नए फ्लेक्स कंटेनर रिस्पॉन्सिव विकल्प सेट दिखाते हैं। लीगेसी कंटेनर्स में कॉलम उपलब्ध नहीं हैं।

निष्कर्ष

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

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

हैन्सन एफ.

हाल के पोस्ट

एलीमेंटर के साथ हेडर और फ़ूटर का उपयोग कैसे करें

किसी वेबसाइट के शीर्षलेख और पादलेख आवश्यक तत्व हैं। अधिकांश मामलों में, हेडर नेविगेशन प्रदान करता है…

6 जनवरी 2022

वर्डप्रेस थीम तुलना: एस्ट्रा बनाम ओशनडब्ल्यूपी

बाज़ार में दो सबसे लोकप्रिय वर्डप्रेस थीम एस्ट्रा और ओसियनडब्ल्यूपी हैं। पेशेवर…

2 जनवरी 2022

वर्डप्रेस समाचार थीम तुलना: समाचार पत्र बनाम एस्ट्रा

एक उत्कृष्ट समाचार वेबसाइट बनाने के लिए आपको वेब डिज़ाइनर बनने की आवश्यकता नहीं है। हम…

25 अक्टूबर 2021

समाचार पत्र थीम के साथ समाचार-संबंधित वेबसाइट बनाएं

न्यूज़पेपर थीम tagDiv द्वारा डिज़ाइन की गई सबसे महत्वपूर्ण वर्डप्रेस थीम में से एक है, जो…

18 अक्टूबर 2021

Avada WooCommerce बिल्डर के साथ ईकॉमर्स कैसे बनाएं

जब ऑनलाइन स्टोर स्थापित करने की बात आती है, तो WooCommerce एक पसंदीदा plugin है। यह…

4 अक्टूबर 2021

एलीमेंटर के साथ स्टिकी हेडर और स्क्रॉलिंग प्रभावों का उपयोग कैसे करें

जब कोई व्यक्ति आपकी वेबसाइट पर जाता है तो आम तौर पर वह पहली चीज़ हेडर देखता है,…

21 सितंबर 2021