फ़्लोटिंग फ़ुटर को पृष्ठ के निचले भाग तक ठीक से कैसे धकेलें। फ़्लोटिंग फ़ुटर को पृष्ठ के निचले भाग में ठीक से कैसे धकेलें फ़्लोटिंग फ़ुटर और मोबाइल डिवाइस

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

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

तो चलिए शुरू से शुरू करते हैं...

वेबसाइट फ़ुटर या फ़ुटर HTML क्या है?

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

और जो यह सोचता है कि बहुत कम विज़िटर साइट के बेसमेंट में प्रवेश करते हैं, वह गलत है, वह मौलिक रूप से गलत है!

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

साइट के फ़ुटर को ठीक से कैसे डिज़ाइन करें?

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

यह साइट का पहला फ़ुटर है:

यह साइट के लिए दूसरा फ़ुटर है:

यह साइट के लिए तीसरा फ़ुटर है:

यह साइट के लिए चौथा फ़ुटर है:

यह साइट का पांचवां फ़ुटर है:

यह साइट का छठा फ़ुटर है:

खैर, आपको ये फूटर HTML कैसा लगा? क्या आपको उनमें से कम से कम एक पसंद आया? मुझे आशा है कि हाँ?!

यदि आप उन्हें पसंद करते हैं, तो मेरा सुझाव है कि आप उन्हें अभी पूरी तरह से निःशुल्क डाउनलोड करें और उन्हें अपने उद्देश्यों के लिए उपयोग करें!

आपके द्वारा डाउनलोड किए गए फ़ोल्डर में छह फ़ुटर HTML फ़ाइलें हैं। और आपको बस अपनी साइट के लिए टेक्स्ट एडिटर में सामग्री को सही करना होगा और बस इतना ही!

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

अब बस इतना ही. आपके ध्यान देने के लिए धन्यवाद!

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

साइट के फ़ुटर में क्या डालें?

आरंभ करने के लिए, आइए तय करें कि व्यवहार संबंधी कारकों को बेहतर बनाने के लिए किस प्रकार की साइट, पाद लेख में क्या रखा जा सकता है।

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

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

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

यह ध्यान दिया जाना चाहिए कि पाद लेख लिंक पर क्लिक करने की संभावना, यदि यह सुंदर और जानकारीपूर्ण नहीं है, तो ऐसे पाद लेख की अस्पष्टता के कारण शून्य के करीब है।

खूबसूरती से डिज़ाइन किए गए वेबसाइट फ़ुटर के उदाहरण

एक सुंदर और जानकारीपूर्ण फ़ुटर बनाने के लिए, हम आपके ध्यान में वेब डिज़ाइन स्टूडियो के सबसे प्रसिद्ध कार्यों को लाते हैं:

1. फ़्रेंच वेब स्टूडियो KDIGIT का डिज़ाइन समाधान:

2. डिजाइन वेब स्टूडियो स्नोडेन इंडस्ट्रीज के पादलेख का डिजाइन:

3. स्वीडिश कंपनी यूफोरिया सीएमएस के पाद लेख के डिजाइन में डिजाइन समाधान:

4. स्लीक टैपबॉट्स फ़ुटर डिज़ाइन:

5. तैयार डिज़ाइन फ़ुटर:

6. मेकेनिकल द्वारा फ़ुटर डिज़ाइन:

7. सुंदर फ़ुटर डिज़ाइन:

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

पादलेख में सूचना ब्लॉक जोड़ना

पाद लेख में सूचना ब्लॉक जोड़ने का सबसे आसान तरीका वर्डप्रेस व्यवस्थापक क्षेत्र में पाद लेख विजेट ब्लॉक जोड़ना है। विजेट्स का ऐसा ब्लॉक बनाने के लिए, आपको एडमिन मेनू -> एडिटर खोलना होगा और दाईं ओर कॉलम में, function.php फ़ाइल का चयन करना होगा, जिसमें हम कोड जोड़ते हैं:

यदि (function_exists("register_sidebar")) रजिस्टर_साइडबार(सरणी("नाम" => "पाद साइडबार", "before_widget" => "", "after_widget" => "", "before_title" => "

",));

यदि (function_exists("register_sidebar") ) रजिस्टर_साइडबार(सरणी( "नाम" => "फ़ुटर साइडबार", "before_widget" => "" , "after_widget" => "" , "before_title" => " " , "after_title" => " " , ) ) ;

यह एडमिन में एक नया विजेट ब्लॉक पंजीकृत करने के लिए कोड है, जहां 'नाम' विजेट का नाम है, 'before_widget' विजेट से पहले रेंडर किया गया HTML कोड है, और 'after_widget' विजेट के बाद रेंडर किया गया HTML कोड है। साथ ही शीर्षक शीर्षलेख से पहले और बाद का कोड भी। इसे आमतौर पर function.php फ़ाइल की शुरुआत में जोड़ा जाता है।

Functions.php की सामग्री सहेजें और "विजेट्स" अनुभाग पर जाएँ। यदि सब कुछ त्रुटियों के बिना किया गया, तो आपको वहां एक नया ब्लॉक मिलेगा:

इसलिए, हमने व्यवस्थापक मेनू में विजेट्स के एक नए ब्लॉक का प्रदर्शन किया है, अब हमें इस ब्लॉक के विजेट्स को साइट पर प्रदर्शित करने की आवश्यकता है। ऐसा करने के लिए, व्यवस्थापक मेनू -> संपादक खोलें और दाईं ओर footer.php फ़ाइल का चयन करें, वैसे, ऐसे विजेट ब्लॉक न केवल पाद लेख में, बल्कि साइट पर किसी अन्य स्थान पर भी प्रदर्शित किए जा सकते हैं।

footer.php फ़ाइल में, निम्न कोड जोड़ें।

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

पादलेख में क्या रखने की प्रथा है?

मानक पाद लेख तत्व हैं:

1. सोशल मीडिया बटन और सोशल मीडिया ग्रुप विजेट
2. साइट के मुख्य अनुभागों के लिंक
3. तीसरे पक्ष के संसाधनों से लिंक
4. कॉपीराइट
5. संपर्क जानकारी
6. खोज

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

मूल पाद लेख वह स्थान है जहाँ आप आगंतुक को आश्चर्यचकित कर सकते हैं

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

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

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

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

पाद लेख में अतिरिक्त मेनू

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

उदाहरण के लिए, यह इस तरह दिख सकता है:

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

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

पाद लेख का अर्थ एवं स्थान

आमतौर पर, एक HTML पृष्ठ में एक "हस्ताक्षर" शामिल होता है - दस्तावेज़ के निचले भाग में टैग का एक ब्लॉक। तो डेवलपर (ग्राहक) साइट फ़ुटर की कल्पना करता है। यह केवल साइट के मालिक और कॉपीराइट, अन्य पेजों के लिंक, फीडबैक, तकनीकी सहायता आदि के बारे में जानकारी है, इसमें कोई संदेह नहीं है। आगंतुक इसी तरह सोचते हैं और डेवलपर्स इस पर भरोसा करते हैं।

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

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

फ्लोटिंग बेसमेंट और मोबाइल डिवाइस

किसी विंडो के नीचे फ़ुटर लगाने का विचार एक सामान्य घटना है। समस्या मुख्य सामग्री के प्लेसमेंट की शैली चुनने का निर्णय है। कुछ डेवलपर संपूर्ण पृष्ठ बनाते हैं और कोड के अंत में फ़ूटर टैग को पूर्ण स्थिति के बिना इनलाइन तत्वों के रूप में रखते हैं। सीएमएस भी इसी पैटर्न का पालन करते हैं.

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

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

वर्चुअल कीबोर्ड और वेबसाइट फ़ुटर का विचार - यह क्या है? यह इनपुट डेटा फ़ील्ड के ठीक नीचे डेटा प्रविष्टि क्षमता की वास्तविक स्थिति है। थोड़ा असुविधाजनक समाधान, लेकिन वास्तव में काम कर रहा है।

सामग्री संरचना और वास्तविक अर्थ

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

• साइट हेडर यहाँ है;
• सामग्री - यहाँ;
• और साइट का पाद लेख - कि यह केवल मांग पर है।

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

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

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

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

हम आपको पहले ही यह कहते हुए सुन सकते हैं: “किसी फ़ुटर की परवाह कौन करता है?! फिर भी, कुछ ही लोग अंत तक स्क्रॉल करते हैं। ” लेकिन हम इसके बारे में इतने निश्चित नहीं होंगे।

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

एक बहुत ही दिलचस्प केस स्टडी में, वेबसाइट कंटेंट एनालिटिक्स कंपनी चार्टबीट ने पाया कि 65% पेज एंगेजमेंट फोल्ड के ठीक नीचे होता है।

तो लोग अभी भी स्क्रॉल करते हैं! और यदि आप पाद लेख सहित अपने लैंडिंग पृष्ठ के निचले आधे हिस्से को अनुकूलित नहीं करते हैं, तो आप अनूठे अवसरों से चूक सकते हैं जैसे:

• आपके ब्रांड और उत्पाद के बारे में अतिरिक्त महत्वपूर्ण जानकारी प्रदान करना।
• बेहतर उपयोगकर्ता अनुभव और नेविगेशन.
• रूपांतरण दरें बढ़ रही हैं.

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

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

फ़ुटर क्या है?

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

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

आपको अपना फ़ुटर क्यों डिज़ाइन करना चाहिए

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

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

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

सुंदर फ़ुटर के उदाहरण

आइए पाद लेख के कुछ उदाहरण देखें जो आपके विचारों को प्रेरित कर सकते हैं।

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

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

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

Strip-lenta.com वेबसाइट में एक मूल पाद लेख है जिसमें एक लिफाफा है जिसमें संपर्क और एक संपर्क फ़ॉर्म है:

फ़ुटर के पहले सामाजिक प्रमाण के साथ एक प्री-फ़ुटर क्षेत्र है - प्रसिद्ध ग्राहकों के लोगो:

लेकिन वे यहीं नहीं रुके! यहां एक पोस्ट-फ़ुटर ज़ोन भी है, जिसमें रूपांतरण कार्रवाई का प्रदर्शन शामिल है:

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

खैर, हमारा मानना ​​है कि प्रेरणा के लिए यह पर्याप्त भोजन है। आइए अब फ़ुटर डिज़ाइन करते समय ध्यान रखने योग्य 16 बातों पर एक नज़र डालें।

मूल पाद लेख तत्व

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

2. संपर्क जानकारी. जैसा कि पहले ही उल्लेख किया गया है, बहुत से लोग आपके संपर्कों (फोन, पता, ईमेल) की तलाश में पृष्ठ को स्क्रॉल करते हैं। उन्हें पाद लेख में शामिल करना बेहद महत्वपूर्ण है, खासकर यदि आप उन्हें शीर्ष लेख में शामिल नहीं करना चुनते हैं।

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

3. गोपनीयता नीति. ऑनलाइन गोपनीयता कानून अधिक से अधिक सख्त होते जा रहे हैं, इसलिए ऐसे पेज का लिंक होना बहुत महत्वपूर्ण है।

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

5. प्रतिक्रिया/समीक्षा. एक वैकल्पिक भाग, लेकिन यदि आपके पास इसके लिए समर्पित एक अलग पेज है, तो इसका लिंक यहां शामिल करना उपयोगी होगा।

6. मानचित्र. यदि आपका लैंडिंग पृष्ठ किसी ऐसे व्यवसाय का व्यवसाय कार्ड है जिसकी मुख्य गतिविधि ऑफ़लाइन है (मान लीजिए, आपके पास एक गेस्ट हाउस, रेस्तरां या इवेंट स्पेस है), तो पादलेख में स्थान डेटा जोड़ने पर विचार करना सुनिश्चित करें। यह पते के साथ एक साधारण पाठ या यांडेक्स मैप्स, गूगल मैप्स या 2जीआईएस के साथ स्थानीय एकीकरण हो सकता है।

यहां बताया गया है कि आप अनुभाग बिल्डर का उपयोग करके अपने लैंडिंग पृष्ठ पर एक मानचित्र कैसे जोड़ सकते हैं:

वैकल्पिक पाद लेख तत्व

आइए अब अन्य, कम महत्वपूर्ण, फ़ुटर डिज़ाइन तत्वों पर नज़र डालें।

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

9. साइटमैप खोज इंजनों को आपकी साइट और सामग्री की संरचना को बेहतर ढंग से समझने में मदद करता है। कई साइटें पोस्टफ़ुटर में कॉपीराइट जानकारी के आगे साइटमैप का लिंक लगाती हैं।

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

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

13. मिशन वक्तव्य. यदि आप अपने आगंतुकों को यह दिखाना चाहते हैं कि आपका ब्रांड क्या दर्शाता है, आपके लक्ष्य और आकांक्षाएं क्या हैं, तो पाद लेख में अपने मिशन विवरण का एक संक्षिप्त संस्करण जोड़ने पर विचार करें। यदि एक व्यापक संदेश बनाना समस्याग्रस्त है, तो एक विशेष पृष्ठ का लिंक शामिल करें।

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

15. "मेरे बारे में" / "जीवनी"। जब किसी व्यक्तिगत ब्रांड वेबसाइट या ब्लॉग की बात आती है, तो आप एक फोटो सहित अपने बारे में एक संक्षिप्त जीवनी भी जोड़ सकते हैं, जो साइट पर एक जीवंत, "मानवीय" तत्व जोड़ देगा। आपके मेरे बारे में (हमारे बारे में) पृष्ठ पर एक लिंक जोड़ने से आपके आगंतुकों को आपके बारे में और अधिक जानने का अवसर मिलेगा।

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

पाद लेख में क्या नहीं जोड़ना चाहिए

यहां बताया गया है कि किससे बचना चाहिए:

• ट्रैफ़िक आँकड़े दिखाने वाले पृष्ठ दृश्य काउंटर और विजेट।
• प्रत्यक्ष संबद्ध लिंक.
• एंबेडेड सोशल मीडिया फ़ीड।
• विज्ञापन.

डिज़ाइन पर काम करते समय कौन से टूल का उपयोग करें?

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

बस इतना ही!

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

कुछ बुनियादी तत्वों से शुरुआत करें और आप जो सोचते हैं उससे नेविगेशन और उपयोगकर्ता अनुभव में सुधार होगा।

यदि आपको संदेह है कि लोग पादलेख तक स्क्रॉल नहीं कर रहे हैं, तो निश्चित रूप से पता लगाने के लिए हीटमैप और स्क्रॉलमैप्स सेट करें।

आप जो भी करने का निर्णय लें, अपने पाद लेख को ढीला न होने दें। निम्नलिखित प्रश्नों के उत्तर देने का समय:

• क्या आपकी साइट या ब्लॉग में फ़ुटर है?
• क्या आप इसका अधिकतम लाभ उठा रहे हैं?
• अभी पादलेख में क्या है? इसे कैसे सुधारा जा सकता है?