फीडबैक फॉर्म के साथ लैंडिंग पेज टेम्प्लेट। लैंडिंग पेज टेम्प्लेट। लैंडिंग पृष्ठ: वाक्य, लंबन और काउंटर के साथ कोड उदाहरण
एक-पृष्ठ साइट व्यवसायियों के लिए सुविधाजनक है क्योंकि यह एक दिन में शाब्दिक रूप से किया जा सकता है। यदि एक एक पृष्ठ वेबसाइट टेम्पलेट डाउनलोड करें रेडी-मेड, आप अपनी कंपनी के लिए एक न्यूनतम राशि के लिए एक वेबसाइट बना सकते हैं, क्योंकि आपको केवल होस्टिंग के लिए भुगतान करना होगा। क्लाइंट के लिए, एक-पृष्ठ पृष्ठ सुविधाजनक है क्योंकि इस पर सभी जानकारी संक्षिप्त रूप से प्रस्तुत की जाती है और संभव के रूप में संरचित होती है, कुछ भी नहीं है। अपनी ग्राहक मित्रता के कारण, एक पृष्ठ की वेबसाइटें अक्सर अन्य प्रकार की साइटों की तुलना में उच्च रूपांतरण दिखाती हैं।
एक-पृष्ठ टेम्पलेट कैसे चुनें?
- सूरत। कंपनी की सामान्य शैली में डिजाइन तैयार करना वांछनीय है। इंटरफ़ेस में बहुत असंगत रंग नहीं होना चाहिए। हालांकि, कुछ पेस्टल रंगों में लंबे समय तक ऊबने वाले उपयोगकर्ता भी हैं, इसलिए चमक और रचनात्मकता का स्वागत है।
- "वजन"। एनिमेटेड डिजाइन, टिमटिमाते बैनर, "भारी" तत्व, स्लाइडर्स साइट को इतना अधिक भारित कर सकते हैं कि प्रतियोगियों की तुलना में इसे खोलने में अधिक समय लगेगा।
- ब्लॉक की संख्या और उन्हें अनुकूलित करने की क्षमता। टेम्प्लेट चुनने से पहले, यह तय कर लें कि पेज को ओवरलोड न करने के लिए कम से कम किन ब्लॉक की जरूरत है। एक टेम्पलेट पर प्रयास करना, पता करें कि क्या ब्लॉक को हटाया जा सकता है और प्रतिस्थापित किया जा सकता है।
- क्रॉस-ब्राउज़र संगतता और उत्तरदायी डिजाइन संभावित ग्राहकों के दर्शकों का बहुत विस्तार करेगा। इसलिए, केवल चुनना सुनिश्चित करें उत्तरदायी एक पृष्ठ टेम्पलेट्स.
हम प्रदान करते हैं एक पृष्ठ मुक्त करने के लिए टेम्पलेट्स
यदि आप अपनी कंपनी के लिए करने का फैसला करते हैं लैंडिंग पृष्ठ, डाउनलोड टेम्प्लेट हमारी वेबसाइट पर। हम वायरस के लिए सभी टेम्प्लेट को ध्यान से जांचते हैं, ताकि आप एक संक्रमित फाइल डाउनलोड करने से डरे नहीं। सब लैंडिंग पेज टेम्प्लेट हमारे कैटलॉग में एक आधुनिक डिज़ाइन है, जो विभिन्न प्रकार की शैलियों में बनाया गया है। ब्लॉक की संख्या को समायोजित करने की क्षमता, रंग योजना और अन्य कार्यों को बदलने से आपको सरल टेम्पलेट पर आधारित एक अद्वितीय मूल वेबसाइट बनाने में मदद मिलेगी।
हम आपको एक-पृष्ठ वेबसाइट टेम्पलेट डाउनलोड करने के लिए आमंत्रित करते हैं
उन लोगों की मुख्य समस्या जिन्होंने डाउनलोड करने का फैसला किया लैंडिंग पृष्ठ का टेम्पलेट नि: शुल्क, फ्री टेम्पलेट में वायरस और बग की एक बड़ी मात्रा है। इसलिए, एक सुरक्षित और विश्वसनीय वेबसाइट ढूंढना बहुत महत्वपूर्ण है। हम आपको हमें यात्रा करने के लिए आमंत्रित करते हैं, क्योंकि हम सावधानीपूर्वक सुरक्षा की निगरानी करते हैं। इसके अलावा, हम आपको विस्तृत श्रृंखला के साथ खुश करेंगे hTML एक पेज टेम्प्लेट, डाउनलोड जो आप अभी कर सकते हैं!
पाठ को और पढ़ें ...अभिवादन, मेरे प्रिय पाठकों। आज हम उन तकनीकी बिंदुओं के बारे में बात करेंगे जिनके साथ हम बढ़ सकते हैं बिक्री रूपांतरण उनके माल या सेवाओं। महत्वपूर्ण बिंदुओं में से एक उत्पादों के साथ एक सुविचारित लैंडिंग पृष्ठ है। तथाकथित लैंडिंग पृष्ठ, जिसके निर्माण के बारे में हम आगे बात करेंगे और तैयार पृष्ठ कोड प्राप्त करेंगे।
लैंडिंग पृष्ठ क्या है? यह वह पृष्ठ है जो आमतौर पर लोग किसी विज्ञापन पर क्लिक करने के बाद उतरते हैं। एक प्रस्ताव के लिए बनाया गया: उत्पाद, सेवा या सदस्यता। एक प्रभावी लैंडिंग पेज सफल इंटरनेट मार्केटिंग की आधारशिला है। उत्पाद बाजार पर सबसे अच्छा हो सकता है, विज्ञापन पूर्ण होते हैं, लेकिन एक अच्छा लैंडिंग पृष्ठ के बिना, प्रयास परिणाम का 100% नहीं देते हैं। वह आगंतुकों को बताती है कि प्रस्ताव क्या है और उन्हें यह क्यों चाहिए। त्वरित निर्णय लेने और उपयोगकर्ता को ग्राहक की श्रेणी में लाने के लिए तत्परता की भावना का योगदान होता है।
लैंडिंग पेज कैसे बनाये? यह मानना \u200b\u200bगलत है कि उत्तर टाइपसेट करने की क्षमता में है। एक अच्छा लैंडिंग पृष्ठ लक्ष्यों, पाठ, डिजाइन और कोड पर अच्छी तरह से समन्वित कार्य का परिणाम है। लैंडिंग पृष्ठ, जिनमें से उदाहरण नीचे होंगे, शुरुआती लोगों को लेआउट के साथ काम करने की मूल बातें सीखने में मदद करेंगे, लेकिन रूपांतरण ग्रंथों और लक्षित दर्शकों की समझ को प्रतिस्थापित नहीं करेंगे। आप विभिन्न का उपयोग करके भी उन्हें बना सकते हैं कंस्ट्रक्टर लैंडिंग पृष्ठ.
इसलिए लैंडिंग पृष्ठ बनाने से पहले, स्वयं से पूछें:
- लैंडिंग पृष्ठ से टकराने के बाद कोई व्यक्ति क्या करेगा? क्या वह कुछ खरीदेगा? फॉर्म को भरें? न्यूज़लेटर की सदस्यता लें? अपनी रूपांतरण दर ट्रैक करने से पहले, स्पष्ट लक्ष्य निर्धारित करें।
- मेरे प्रतियोगी कौन हैं? वास्तव में, ये तीन प्रश्न हैं: कौन, वे कितने सफल हैं और उनकी उपलब्धियों को कैसे लागू किया जा सकता है? नकल चापलूसी का सबसे ईमानदार रूप है। यदि प्रतियोगी क्या कर रहे हैं, तो इसे अपनी साइट पर दोहराएं।
- मेरे दर्शक कौन हैं? जितना बेहतर आप अपने आला और लक्षित दर्शकों को समझते हैं, उतने अधिक संभावनाएं कि आपके प्रयास बंद हो जाएंगे।
आपको आवश्यक सभी जानकारी प्रदान करने की आवश्यकता है, लेकिन एक संभावित ग्राहक को दूर करने और दूर करने के लिए पर्याप्त नहीं है।
डमी के लिए लैंडिंग पृष्ठ + कोडिंग बनाने के उदाहरण
व्यवसाय में उतरने से पहले, HTML और CSS पर एक नज़र डालते हैं। यह समझना कि वे कैसे काम करते हैं, आपको लैंडिंग बनाने में मदद करेगा।
एचटीएमएल - साइटों को देखने के लिए एक ब्राउज़र मार्कअप भाषा। सामग्री को परिभाषित करने वाले कोण कोष्ठक में संलग्न टैग का उपयोग करके लिखा गया।
टैग खुलता है (<>) और भरने के आसपास बंद हो जाता है:
<тег>सामग्रीтег>
पिनपॉइंट समायोजन के लिए, नाम के बाद विशेषताएँ जोड़ी जाती हैं:
<тег атрибут="значение">सामग्रीтег>
CSS - HTML तत्वों को व्यवस्थित करने के तरीके को परिभाषित करता है। चयनकर्ताओं, गुणों और मूल्यों से युक्त:
# चयनकर्ता (संपत्ति: मूल्य;)
चयनकर्ता html में एक विशिष्ट टैग के नाम से मेल खाता है। मूल्यों को बदलना और गुणों को जोड़ना इसकी उपस्थिति को नियंत्रित करता है। आप एक ही HTML में विभिन्न सीएसएस शैलियों को लागू करके डिसिमिलर पेज बना सकते हैं।
5 प्रारंभिक चरण
एक त्वरित लेआउट के लिए, हम बूटस्ट्रैप के आधार पर न्यूनतम डिजाइन के साथ एक टेम्पलेट का उपयोग करेंगे। यह अपने स्वयं के चयनकर्ताओं के साथ एक प्रणाली है जिसका उपयोग दुनिया भर में लेआउट को गति देने के लिए किया जाता है।
यह मामूली दिखता है।
इस मछली से कई चरणों में हर स्वाद के लिए एक साइट बनाई जाती है।
फ़ोल्डर में निर्देशिका संरचना:
- index.html: यह मुख्य फाइल है जिसका हम संपादन करेंगे।
- / संपत्ति: सहायक फाइलें यहां स्थित हैं:
- / css: डायरेक्टरी में बूटस्ट्रैप और आइकन स्टाइल शामिल हैं। संपादित की जाने वाली फ़ाइल main.css है।
- / img: साइट छवियों के लिए फ़ोल्डर।
- / फोंट: चिह्न फोंट।
- / js: बूटस्ट्रैप के लिए जावास्क्रिप्ट फाइलें।
चरण 1: हेडर का उपयोग करना
प्रस्ताव के मूल्य को स्पष्ट रूप से संप्रेषित करने में मदद करने के लिए शीर्षक और उपखंड प्रमुख बिंदु हैं।
आइए साइट का शीर्षक और नाम बदलें। यहां, टाइप करने की क्षमता की आवश्यकता नहीं है - आपका पाठ स्क्रीन पर पीले रंग में हाइलाइट किए गए स्थानों में लिखा गया है।
चरण 2. Brevity रूपांतरण की बहन है। लाभ और दरों को जोड़ना
इसमें 4 खंड होंगे:
- फायदे;
- दरें;
- समीक्षा;
- कार्यवाई के लिए बुलावा।
चलो मुख्य सामग्री अनुभाग "मुख्य" डिज़ाइन करते हैं, जिसमें हम आवश्यक अनुभाग सम्मिलित करेंगे:
…..
…..
…..
…..
डॉट्स के बजाय भरने के साथ भरें।
लाभ अनुभाग को इस कोड की आवश्यकता होगी:
लाभ
तेज
विश्वसनीय
सेड दीम नम्मी
लाभदायक
एलीट, सेड डायम नॉनमी
तकनीकी तौर पर
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी
विश्वसनीय
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी
लाभदायक
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी
तकनीकी तौर पर
लॉरेम इप्सम डोलर अमेट, कंसेटेट्युर एडिपिसिंग
विश्वसनीय
लॉरेम इप्सम डोलर अमेट, कंसेटेट्युर एडिपिसिंग
लाभदायक
लॉरेम इप्सम डोलर अमेट, कंसेटेट्युर एडिपिसिंग
स्पष्टता के लिए सामग्री:
हालांकि यह मैला दिखता है, लेकिन घबराहट का कोई कारण नहीं है, हम जारी रखते हैं।
हम कीमतें निर्धारित करते हैं। सामग्री उसी तरह बदलती है जैसे पहले चरण में। वर्ग "टैरिफ" और तीन टैरिफ के साथ सामान्य विवरण।
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी निब युरिस्मोड टिंसीडंट यूट लोरेट डोलोर मैग्ना अलिकम एरट वुल्लेट। यूट विदिनी एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्ससेरी टेशन ullamcorper suscipit lobortis nisl ut aliquip ex eaodo resultat।
शुल्क योजना
शुल्क संख्या 1
$10
प्रति माह / प्रति व्यक्ति
- लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट
- लोरम इपसम डोलर
- 10 लोरम ipsum
शुल्क संख्या 2
$20
प्रति माह / प्रति व्यक्ति
- लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट
- लोरम इपसम डोलर
- 10 लोरम ipsum
शुल्क संख्या 3
$30
प्रति माह / प्रति व्यक्ति
- लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट
- लोरम इपसम डोलर
- 10 लोरम ipsum
जैसा दिखता है।
हालांकि हम भविष्य के लैंडिंग पृष्ठ की उपस्थिति में रुचि नहीं रखते हैं, हम नीचे दी गई शैलियों को बदलने के उदाहरणों पर विचार करेंगे।
चरण 3: ट्रस्ट और कॉल टू एक्शन के संकेत
लक्षित संकेतों का उपयोग आगंतुकों को इंगित करता है कि ब्रांड भरोसेमंद है। सिग्नल कई रूप ले सकते हैं, लेकिन क्लासिक्स ग्राहक समीक्षा हैं।
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिलेटिंग इलीट, सेड इइसमोड अस्थायी इनिडीडंट यूट लैबर एट डोलोर मैग्ना एलिका। यूट एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्सरसाइज ullamco laboris nisi ut aliquip ex eaopo:
ग्राहक समीक्षा
“लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिलेटिंग एलीट, सेड इइसमोड अस्थायी इंकिडीडंट यूट लैटर एट डोलोर मैग्ना एलिका। यूट एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्सरसाइज ullamco laboris nisi ut aliquip ex eaodo। "
“लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिलेटिंग एलीट, सेड इइसमोड अस्थायी इंकिडीडंट यूट लैटर एट डोलोर मैग्ना एलिका। यूट एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्सरसाइज ullamco laboris nisi ut aliquip ex eaodo। "
चलो कार्रवाई के लिए एक कॉल सेट करें।
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी निब युरिस्मोड टिंसीडंट यूट लोरेट डोलोर मैग्ना अलिकम एरट वुल्लेट। यूट वेदिनी एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्ससेरी टेशन ullamcorper suscipit lobortis nisl ut aliquip ex eaodod resultat:
आज ऑर्डर करते समय लाभ उठाएं
समीक्षा संभावित ग्राहकों को उत्पाद खरीदने का निर्णय लेने में मदद करेगी। स्पष्टता के लिए, हमें अवतारों की आवश्यकता है, इसलिए हम उन्हें तुरंत जगह में लिखेंगे - प्रत्येक उद्धरण के तहत।
ग्राहक का नाम।
चरण 4: ग्रिड एकीकरण और मोबाइल अनुकूल
ग्रिड को इंजेक्ट करने के लिए हमें बूटस्ट्रैप कंटेनरों की आवश्यकता है। स्वीकृत कॉलम सेगमेंट की कुल संख्या को याद रखना महत्वपूर्ण है - 12. वर्ग सामग्री प्रदर्शन की चौड़ाई निर्धारित करता है। इस तैयार ग्रिड का लाभ यह है कि कंटेनरों को जवाबदेही को ध्यान में रखते हुए डिजाइन किया गया है और यह तुरंत मोबाइल उपकरणों पर लागू होता है। आधिकारिक वेबसाइट पर विस्तृत विवरण। ग्रिड इस तरह दिखता है।
चलो एक कंटेनर में "मुख्य" की सामग्री लपेटते हैं। ऐसा करने के लिए, इसके ऊपरी भाग में लिखा है:
यदि आप चाहते हैं कि ब्लॉक स्क्रीन की पूरी चौड़ाई में फिट हो, तो कंटेनर अंदर डाला जाता है। यहां यह एक जंबोट्रॉन और एक कॉल टू एक्शन होगा।
हम उन सभी तत्वों को लपेटते हैं जिन्हें लाइन सेपरेटर के साथ एक के ऊपर एक स्थिति की आवश्यकता होती है।
अब हम बूटस्ट्रैप ग्रिड पर ध्यान केंद्रित करते हुए कॉलम को चौड़ाई में समायोजित कर सकते हैं। लपेटने के बाद, भरना स्क्रीन के किनारों से चिपकना बंद हो गया, और साफ संकेत दिखाई दिए।
हम col-lg-4 कॉलम वर्ग का उपयोग करके एक पंक्ति में मूल्य निर्धारित करते हैं। पंक्तियों की पंक्तियों के अंदर, रैपिंग के लिए अलग-अलग दिवस लिखना आवश्यक नहीं है, आप उन्हें एक स्थान से अलग मौजूदा लोगों के साथ जोड़ सकते हैं।
सादृश्य द्वारा, हम समीक्षाओं और लाभ अनुभाग के लिए कॉलम सेट करते हैं। यदि आपको किसी तत्व को साइड में शिफ्ट करने की आवश्यकता है, तो col-lg-ऑफसेट-2 ऑफसेट कॉलम क्लास का उपयोग करें। अंत में संख्या यह निर्धारित करती है कि शिफ्ट में कितने आधार कॉलम होंगे।
चरण 5. फ़ॉन्ट और आइकन
हम Google फ़ॉन्ट शीर्षक के लिए फोंट लागू करेंगे। जब आप चयन करते हैं, तो आयात टैब खोलें और इसे डेटा से main.css फ़ाइल में कॉपी करें। हम फ़ाइल में हेडर चयनकर्ताओं को भी जोड़ते हैं, जिसके लिए नया फ़ॉन्ट लागू किया जाता है।
@import "https://fonts.googleapis.com/css?family\u003dRoboto+Condensed" / * शीर्षकों के लिए फ़ॉन्ट आयात * /
.navbar ब्रांड,
एच 1,
h2,
h3,
h4,
h5,
h6 (
फ़ॉन्ट-परिवार: "रोबोटो कंडेंस्ड", संस-सेरिफ़; / * Googlephone आउटपुट * /
}
स्पष्टता के लिए, स्व-व्याख्यात्मक नाम पाठ-केंद्र के साथ एक वर्ग और बूटस्ट्रैप सेट से FontAwesome आइकन पंजीकृत हैं।
इससे तैयारी पूरी हो जाती है।
लैंडिंग पृष्ठ: वाक्य, लंबन और काउंटर के साथ कोड उदाहरण
हम तीन सबसे लोकप्रिय प्रकारों का उपयोग करते हैं: एक प्रस्ताव के साथ, एक फॉर्म और एक उलटी गिनती काउंटर के साथ। जैसा कि आप टाइप करते हैं, टेम्पलेट प्रभाव द्वारा पूरक होगा।
उदाहरण 1: एक वाक्य के साथ
पहली स्क्रीन को कवर करने के लिए मुख्य बॉडी और पैडिंग की पृष्ठभूमि सेट करें।
जुंबोट्रॉन (
पृष्ठभूमि: # f5f5f5 url (../ img / fon.jpg) शीर्ष केंद्र नो-रिपीट;
अधिकतम-चौड़ाई: 100%;
पैडिंग-टॉप: 250 पीएक्स;
पैडिंग-बॉटम: 200 पीएक्स;
पाठ-संरेखित करें: केंद्र;
}
जंबोट्रॉन के सिर को h2 से h1 तक का आकार दें। अगला, हम उन तत्वों के लिए शैलियों को लिखते हैं जिन्हें बदलने की आवश्यकता है।
आइए आइकनों से शुरू करते हैं।
लाभ मैं (
रंग: # cac4c4;
}
हैश साइन के बाद एक रंग निर्दिष्ट किया जाता है। आप html कलर टेबल या इमेज एडिटर का उपयोग करके अपना विकल्प चुन सकते हैं।
अनुभाग हेडर के लिए इंडेंटेशन
अनुभाग h2 (
पैडिंग-टॉप: 30 पीएक्स;
मार्जिन-बॉटम: 25 पीएक्स;
}
हम टैरिफ की उपस्थिति के क्रम में डाल रहे हैं। सुविधा के लिए, हम उन तत्वों के लिए अपनी कक्षाएं बनाते हैं जिन्हें हम पॉइंटवाइज़ हाइलाइट करना चाहते हैं।
शुल्क संख्या 1
$10
प्रति माह / प्रति व्यक्ति
- लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट
- लोरम इपसम डोलर
- 10 लोरम ipsum
और बहुत सीएसएस। साइटें किन स्थानों के लिए जिम्मेदार हैं, इस पर टिप्पणी की जाती है - / * एक तारांकन के साथ स्लैश के बीच * /
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d तारिफ शैली \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
/ * टैरिफ का सामान्य दृश्य * /
.pricing_item (
पृष्ठभूमि: # f2f2f2;
स्थिति: रिश्तेदार;
प्रदर्शन: -webkit- फ्लेक्स;
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: स्तंभ;
संरेखित-आइटम: खिंचाव;
पाठ-संरेखित करें: केंद्र;
-webkit- फ्लेक्स: 0 1 330px;
फ्लेक्स: 0 1 330px;
गद्दी: 2em 3em;
मार्जिन: 1em;
रंग: # 262b38;
कर्सर: डिफ़ॉल्ट;
छिपा हुआ सैलाब;
}
प्रेस करने पर / * पृष्ठभूमि बदलें * /
.pricing_item: होवर (
रंग: # 444;
पृष्ठभूमि: #daebef;
}
/ * प्रत्येक टैरिफ में मूल्य टैग का व्यक्तिगत आधार * /
.pricing_item: प्रथम-बच्चा .price (
पृष्ठभूमि: # 9ba9b5;
}
.pricing_item: nth-child (2) .price (
पृष्ठभूमि: # 1f6098;
}
/ * चौड़ी स्क्रीन पर, इंडेंट करें और टैरिफ के मध्य कॉलम को उजागर करें * /
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 66.250em) ()
.pricing_item (
मार्जिन: 1.5em 0;
}
.featured (
z-index: 10;
मार्जिन: 0;
फ़ॉन्ट-आकार: 1.15em;
}
}
/ * हैडर * /
.pricing_item h3 (
फ़ॉन्ट-आकार: 2em;
मार्जिन: 0.5em 0 0;
रंग: # 1d211f;
}
/ * लेबल अंडरले * /
।कीमत (
फ़ॉन्ट-आकार: 2em;
फोंट की मोटाई: बोल्ड;
रंग: #fff;
स्थिति: रिश्तेदार;
z- इंडेक्स: 100;
लाइन-ऊँचाई: 95px;
चौड़ाई: 100px;
ऊंचाई: 100 पीएक्स;
मार्जिन: 1.15em ऑटो 1em;
सीमा-त्रिज्या: 50%;
पृष्ठभूमि: # 77a5cc;
-वेबकैट-संक्रमण: रंग 0.3s, पृष्ठभूमि 0.3s;
संक्रमण: रंग 0.3s, पृष्ठभूमि 0.3s;
}
/ * मुद्रा * /
.currency (
फ़ॉन्ट-आकार: 0.5em;
ऊर्ध्वाधर-संरेखित करें: सुपर;
}
/ * क्लॉज स्पष्टीकरण * /
।वाक्य (
फोंट की मोटाई: बोल्ड;
मार्जिन: 0 0 1em 0;
गद्दी: 0 0 0.5em;
रंग: # 2a6496;
}
/ * सूची * /
.pricing_item उल ()
फ़ॉन्ट-आकार: 0.95em;
मार्जिन: 0;
गद्दी: 1.5em 0.5em 2.5em;
पाठ-संरेखण: बायां;
}
/ * सामान सूचि * /
.pricing_item ली (
गद्दी: 0.15em 0;
}
/ * दर आदेश बटन * /
.pricing_item बटन (
फोंट की मोटाई: बोल्ड;
मार्जिन-टॉप: ऑटो;
गद्दी: 1em 2em;
रंग: #fff;
सीमा-त्रिज्या: 5 पीएक्स;
पृष्ठभूमि: # 428bca;
-वेबकैट-संक्रमण: पृष्ठभूमि-रंग 0.3s;
संक्रमण: पृष्ठभूमि-रंग 0.3s;
}
बटन दबाते ही रंग बदल जाता है * /
.pricing_item बटन: होवर,
.pricing_item बटन: ध्यान दें (
पृष्ठभूमि-रंग: # 285e8e;
}
/ * टैरिफ पृष्ठभूमि * /
.bg-2 (
पृष्ठभूमि: #dddddd;
}
परिणाम
ग्राहक समीक्षा। आइए उन्हें एक साफ रूप दें, स्थान को नामित करें।
/ * \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d प्रशंसापत्र शैली \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * /
प्रशंसापत्र (
गद्दी: 4em 0;
पाठ-संरेखित करें: केंद्र;
}
.testimonials .avatar img ()
सीमा-त्रिज्या: 50%;
बाईंओर तैरना;
प्रदर्शन: इनलाइन;
मार्जिन-राइट: 1em;
चौड़ाई: 65 पीएक्स;
ऊंचाई: 65 पीएक्स;
मार्जिन-बॉटम: 30 पीएक्स;
}
.testimonials .avatar p ()
पाठ-संरेखण: बायां;
गद्दी-शीर्ष: 1em;
रंग: # 5d5d5d;
फ़ॉन्ट-वजन: 900;
}
अंतिम कॉल टू एक्शन और फुटर को सजाने के लिए छोड़ दिया जाता है।
/ * कार्रवाई * /
। निष्क्रियता (
पृष्ठभूमि: # 476177;
न्यूनतम ऊंचाई: 180px;
चौड़ाई: 100%;
गद्दी: 4em 0;
पाठ-संरेखित करें: केंद्र;
}
.act h2 (
रंग: #fff;
फ़ॉन्ट-वजन: 300;
}
निष्क्रियता पी (
रंग: #fff;
पाठ-छाया: 0 1px 2px rgba (0, 0, 0, .2);
फ़ॉन्ट-आकार: 1.2em;
}
। निष्क्रियता
मार्जिन-टॉप: 3em;
}
/ * फुटर * /
पाद लेख (
पृष्ठभूमि: # 333333;
गद्दी: 1em 0;
पाठ-संरेखण: सही;
}
पाद लेख p (
रंग: #fff;
लाइन-ऊंचाई: 1;
पाठ-परिवर्तन: अपरकेस;
फ़ॉन्ट-आकार: 0.7em;
मार्जिन-टॉप: 0.5em;
}
फुटर बटन को btn-default बिल्ट-इन बूटस्ट्रैप क्लास सौंपा गया है।
टेम्पलेट को पुनर्जीवित करना। हम वर्गों के लिए चिकनी स्क्रॉलिंग और बटन, साथ ही पहली स्क्रीन पर पाठ का एनीमेशन पेश करेंगे।
संक्रमणों को काम करने के लिए, हम कुछ वर्गों वर्गों को आईडी के साथ बदल देंगे - लाभ और शुल्क के लिए। और हम आईडी से बटनों के लिंक प्रदान करेंगे। स्क्रीन - पीले मार्कर के साथ जो हाइलाइट किया गया है, उससे क्या जुड़ा हुआ है।
बटन के लिए गद्दी सेट करें - jbutton। स्क्रॉल जब काम करता है, लेकिन बहुत अचानक।
जावास्क्रिप्ट या jquery का उपयोग करके चिकनी बदलाव बनाए जाते हैं। बाद को डिफ़ॉल्ट रूप से बूटस्ट्रैप टेम्प्लेट से जोड़ा जाता है।
स्क्रॉल अब सुचारू है।
Animate.css का उपयोग करके पाठ में एनीमेशन जोड़ना ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css)। यह एक तैयार-निर्मित खुला स्रोत है, इसका उपयोग किसी भी साइट पर किया जा सकता है। फ़ाइल को css फ़ोल्डर में github से रखें और पथ लिखें।
हम यहां प्रभावों का चयन करते हैं: https://daneden.github.io/animate.css/... हमने fadeInDown का चयन किया है। इसे इस तरह कोड में लिखा गया है:
अब, जब पेज लोड या रिफ्रेश होता है, तो टेक्स्ट एनिमेटेड होगा। किया हुआ।
उदाहरण 2: आकार और लंबन प्रभाव के साथ
किसी विज़िटर को जितने अधिक फ़ील्ड दिए जाते हैं, उनके भरने की संभावना उतनी ही कम होती है। केवल आपकी आवश्यक न्यूनतम जानकारी के लिए पूछें।
सादृश्य द्वारा एकत्रित। हम पृष्ठभूमि और रंगों को बदल देंगे। और, ज़ाहिर है, चलो आकार को जोड़ते हैं।
चलो साथ - साथ शुरू करते हैं लंबन .
जंबोट्रॉन पृष्ठभूमि को पारदर्शी में बदलें:
पृष्ठभूमि: पारदर्शी;
सिर के अंदर हम स्क्रिप्ट डालेंगे:
शरीर में पहली पंक्ति लंबन के लिए कंटेनर है:
और CSS में, इसका व्यवहार:
Bgparallax (
पृष्ठभूमि: url (/../ img / fon.jpg) दोहराना;
स्थिति: निश्चित;
चौड़ाई: 100%;
ऊंचाई: 300%;
शीर्ष: 0;
बायां: 0;
z- इंडेक्स: -1;
}
लंबन तैयार है। लेकिन कोड और नई पृष्ठभूमि में परिवर्तन करने के लिए रंग योजना को पुन: असाइन करने की आवश्यकता होती है।
मेनू को अंधेरा बनाना:
नवबार-डिफ़ॉल्ट (
पृष्ठभूमि-रंग: # 333;
सीमा-रंग: # 444;
रंग: डार्कग्रे;
सीमा-त्रिज्या: 0;
}
Navbar-default .navbar-nav\u003e .active\u003e a, .navbar-default -navbar-nav\u003e .active\u003e a: हॉवर, .navbar-default .navbar-nav\u003e .active\u003e a: फ़ोकस
रंग: डार्कग्रे;
पृष्ठभूमि-रंग: rgba (0, 0, 0, 0.5);
}
हम एक नए कोड के साथ जंबोट्रॉन में वाक्य को प्रतिस्थापित करते हैं - फॉर्म कोड के साथ:
लैंडिंग पेज आगंतुकों को ग्राहकों में बदल देता है
Quisque tincidunt dui एग्यू सस्पेंडिससे लॉरेम वेल डैम कंसेक्टेटुर पॉस्यूरी व्हीकलिकुला पॉसुरेट मौरिस व्हीकल्सुला टॉर्चर रोनकस वल्यूटेट मास।
-
-
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी।
और हम उपस्थिति को निर्धारित करते हैं
/ * प्रपत्र * /
.डॉफॉर्म-लिस्ट (
सूची-शैली-प्रकार: कोई नहीं;
लाइन-ऊँचाई: 26 पीएक्स;
फ़ॉन्ट-वजन: 400;
गद्दी: 0px;
मार्जिन-बॉटम: 40 पीएक्स;
}
।
छिपा हुआ सैलाब;
स्थिति: रिश्तेदार;
पृष्ठभूमि-रंग: rgba (0,0,0, .4);
गद्दी: 35px 40px;
सीमा-त्रिज्या: 8 पीएक्स;
}
इनपुट, बटन, चयन, textarea (
चौड़ाई: 100%;
मार्जिन-नीचे: 10px;
}
.प्रदान-सूची ली .fa।]
स्थिति: निरपेक्ष;
शीर्ष: 0px;
बायां: 0px;
चौड़ाई: 42 पीएक्स;
फ़ॉन्ट-आकार: जीपीएक्स;
पाठ-संरेखित करें: केंद्र;
}
। हेड-लिस्ट लि।
स्थिति: रिश्तेदार;
न्यूनतम ऊंचाई: 38 पीएक्स;
पैडिंग-लेफ्ट: 62px;
मार्जिन-बॉटम: 20 पीएक्स;
}
.jumbotron p;
रंग: #fff;
फ़ॉन्ट-आकार: 16 पीएक्स;
फ़ॉन्ट-शैली: इटैलिक;
}
जाम्बोत्रोन का पाठ भी यहाँ मिला, क्योंकि इसमें बदलाव की माँग थी।
शुल्क की वसूली।
/ * टैरिफ का सामान्य दृश्य * /
.pricing_item (
पृष्ठभूमि-रंग: rgba (0,0,0, .4); / * लाइन बदली गई * /
सीमा-त्रिज्या: 4 पीएक्स; / * लाइन बदली गई * /
स्थिति: रिश्तेदार;
प्रदर्शन: -webkit- फ्लेक्स;
प्रदर्शन: फ्लेक्स;
-webkit- फ्लेक्स-दिशा: स्तंभ;
फ्लेक्स-दिशा: स्तंभ;
-webkit-align-items: खिंचाव;
संरेखित-आइटम: खिंचाव;
पाठ-संरेखित करें: केंद्र;
-webkit- फ्लेक्स: 0 1 330px;
फ्लेक्स: 0 1 330px;
गद्दी: 2em 3em;
मार्जिन: 1em;
रंग: # f2f2f2; / * लाइन बदली गई * /
कर्सर: डिफ़ॉल्ट;
छिपा हुआ सैलाब;
बॉक्स-छाया: 0 0 15px आरजीबीए (0, 0, 0, 0.05);
}
प्रेस करने पर / * पृष्ठभूमि बदलें * /
.pricing_item: होवर (
रंग: # 444;
पृष्ठभूमि: #ddd; / * लाइन बदली गई * /
}
अब वे इस तरह दिखते हैं - पारदर्शी पृष्ठभूमि और गोल कोनों।
खाका तैयार है।
उदाहरण 3: एक उलटी गिनती काउंटर के साथ
जम्बोट्रॉन के फिर से भरने को बदलें और पिछले टेम्पलेट के साथ सादृश्य द्वारा नई पृष्ठभूमि से मिलान करने के लिए टेम्पलेट को पुन: रंग दें। हम काउंटर स्क्रिप्ट कनेक्ट करते हैं:
एचटीएमएल
समय समाप्त हो रहा है
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी निब युरिस्मोड टिंसीडंट यूट लोरेट डोलोर मैग्ना अलिकम एरट वुल्लेट। यूट विदिनी एनिम एड मिनिमम वेनियम, क्विस नॉस्ट्रुड एक्ससेरी टेशन ullamcorper suscipit lobortis nisl ut aliquip ex eaodo resultat। ड्यूस ऑटम वेल यूम आइरियोर डोलर इन हिंड्र्रिट इन वेंडपुटेट वेलिट एसे मोलेस्टी रिजल्ट, वेल इल्म डोलोर यूआर फ्यूगियाट नुल्ला फैसिलिसिस एट वर्स एरोस एट एलीसन एट इस्टो ओडियो डिग्निसिम क्वीन ब्लैंडिट प्रेटेंट लपटेटम ज़िलर ड्रील
-
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी।
-
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट, सेड डायम नोनमी।
स्टाइलशीट में, आकृति के निचले त्रिज्या को हटा दें, और बटन को मोड़ दें।
इसके अतिरिक्त, मेनू को एक नई पृष्ठभूमि के लिए फिर से लिखा गया था और जंबोट्रॉन में ग्रंथों की शैली को बदल दिया गया था - पिछले उदाहरण के साथ सादृश्य द्वारा। परिणाम।
नीचे के भाग
यह लैंडिंग पृष्ठ के उदाहरणों को पूरा करता है, लेकिन कोड को अतिरिक्त काम की आवश्यकता होती है।
लैंडिंग पृष्ठ को फेरारी की तरह तेज और अच्छा होना चाहिए - पृष्ठ लोड समय का उछाल दरों पर बहुत प्रभाव पड़ता है। छवियों का अनुकूलन करें, अधिकतम दक्षता के लिए तैयार स्क्रिप्ट और शैलियों के आकार को कम से कम करें।
सबक अच्छा लैंडिंग पृष्ठ बनाने के उदाहरण प्रदान करता है जो आपको वास्तविक ग्राहक लाने में मदद करेगा, और आप कुछ नया सीखेंगे। हम पसंद करते हैं और रेपोस्ट करते हैं। जल्द ही फिर मिलेंगे।
पाठ में प्रस्तुत सभी स्रोतों को तैयार पृष्ठों के रूप में डाउनलोड करने के लिए, किसी एक बटन पर क्लिक करें सामाजिक महल इसे खोलने के लिए और एक लिंक प्राप्त करें।
सम्मान से आपका, गलुलिन रुस्लान।
विषय लैंडिंग पेज छेद करने के लिए मला। हालाँकि लैंडिंग पृष्ठों में उछाल थोड़ा कम हो गया है, लैंडिंग पृष्ठ अभी भी मांग में हैं। वे सभी और विविध द्वारा लॉन्च किए जाते हैं, भले ही यह स्पष्ट रूप से व्यापार में उनके निशानों के लिए एक खोने वाला कदम हो। कोई इसे केवल खेलने के लिए करता है, और कोई पैसा कमाने के लिए। लेकिन यह इतना महत्वपूर्ण नहीं है कि आप किन लक्ष्यों का पीछा कर रहे हैं, जो महत्वपूर्ण है वह यह है कि सभी को एक पृष्ठ विकसित करने की आवश्यकता होगी। कोई व्यक्ति पेशेवरों से आदेश देगा, और कोई, एक कारण या किसी अन्य के लिए, अपना स्वयं का लैंडिंग पृष्ठ बनाना शुरू कर देगा। यह संग्रह बाद के लिए समर्पित है।
फैसला करने वाले लोग खुद एक वेबसाइट बनाएं, वे खरोंच से विकास शुरू कर सकते हैं, या वे तैयार लोगों का उपयोग कर सकते हैं, क्योंकि उन्हें विशेष विकास ज्ञान की आवश्यकता नहीं है। HTML और CSS का एक बुनियादी ज्ञान पर्याप्त है, जैसा कि स्कूल में पढ़ाया जाता है। यहां फिर से सवाल उठता है। क्या मुझे पेड या फ्री का इस्तेमाल करना चाहिए? बेशक, भुगतान किया जाने वाला बेहतर गुणवत्ता वाला होगा, और संभवतः उच्च रूपांतरण दिखाएगा। मुक्त विपणन, लेआउट और डिजाइन के मामले में कम सुंदर, कम विस्तृत होगा।
इस संग्रह में सिर्फ शामिल हैं लैंडिंग पृष्ठ बनाने के लिए मुफ्त शुद्ध HTML... प्रारंभ में, चयन में 40 पद शामिल थे, लेकिन सुबह उठने और इन टेम्प्लेट को नए सिरे से देखते हुए, मैंने इसका अधिकांश भाग हटाने का फैसला किया, क्योंकि यह स्पष्ट रूप से, बकवास, और इंटरनेट पर बहुत बकवास है। केवल सबसे योग्य टेम्पलेट बचे हैं, जिस पर आप कम से कम कुछ बना सकते हैं। चयन में शामिल हैं लैंडिंग पेज टेम्प्लेट विभिन्न विषयों में, लेकिन, किसी कारण से, मोबाइल अनुप्रयोगों के लिए एलपी प्रबल होता है। वे उच्चतम गुणवत्ता के निकले।
हमने पहले फ्री लैंडिंग पेज टेम्प्लेट का चयन किया है। वे एक विशिष्ट विषय के अनुरूप थे। इस बार मैंने एक पूर्वनिर्मित विषय बनाने का फैसला किया जो किसी भी दिशा से संबंधित नहीं है।
नि: शुल्क HTML लैंडिंग पेज टेम्पलेट्स के अन्य संग्रह:
वैसे। यदि, किसी कारण से, आप Wordpress इंजन पर इन टेम्पलेट्स को खींचना चाहते हैं, तो इस विषय पर मैंने एक बार Wordpress पर लैंडिंग पृष्ठ बनाने के लिए प्लगइन्स का चयन किया था। आप उनका उपयोग करके देख सकते हैं। शायद इससे बहुत समय बचेगा। हालाँकि, व्यक्तिगत रूप से, मुझे ऐसा करने में ज़्यादा बात नहीं दिखती, क्योंकि शुद्ध HTML एक साधारण एलपी के लिए पर्याप्त है।
इसलिए। यहाँ 20 Free HTML Landing Page Templates दिए गए हैं।
अप्पी - पृष्ठभूमि वीडियो टेम्पलेट
फुल स्क्रीन बैकग्राउंड वीडियो के साथ मोबाइल ऐप के लिए एक और लैंडिंग पेज टेम्पलेट। वीडियो पृष्ठभूमि वाले टेम्पलेट के विपरीत, जो नीचे दिया जाएगा, यह एक बहुत बेहतर है, हालांकि यह एक विशिष्ट विषय के लिए तेज है।bukku
नि: शुल्क HTML टेम्पलेट बनाने के लिए लैंडिंग सेलिंग किताबें... हरे रंग के रंगों में सपाट शैली में बनाया गया है। कुछ मनोरंजक एनीमेशन है।इसके अलावा, डेवलपर PSD प्रारूप में मुफ्त डाउनलोड के लिए स्रोत प्रदान करता है।
लैंडिंग पेज बेचना कॉफी
कॉफी लैंडिंग पेज टेम्प्लेट... लेआउट का डिज़ाइन और कार्यान्वयन बहुत दिलचस्प है। पृष्ठ स्क्रॉल करते समय तत्वों का एनीमेशन होता है। सब कुछ नरम रंगों में किया जाता है। कॉफी देने वाले संगठनों के लिए बिल्कुल सही। हालाँकि, इस टेम्पलेट को चित्रों को बदलकर अपनी थीम के अनुरूप आसानी से संशोधित किया जा सकता है।लैंडिंग ज़ीरो - पृष्ठभूमि वीडियो के साथ लैंडिंग पृष्ठ
वीडियो पृष्ठभूमि के साथ मुफ्त HTML टेम्पलेट सार्वभौमिक विषय। किसी भी विशेषज्ञता के एक फ्रीलांसर का एक पोर्टफोलियो बनाने के लिए उपयुक्त है, यह एक फोटोग्राफर या एक डिजाइनर हो।सामान्य तौर पर, पृष्ठभूमि वीडियो के साथ मुफ्त टेम्पलेट ढूंढना मुश्किल है। तो इसे डाउनलोड करें।
पहली स्क्रीन पर वीडियो को अपने स्वयं के साथ बदला जा सकता है, और यदि कोई नहीं है, तो आप इसे मुफ्त वीडियो स्टॉक पर डाउनलोड कर सकते हैं। मैंने पहले कानूनी वीडियो के साथ वीडियो स्टॉक की एक सूची दी थी।
संलग्न
एक और बहुमुखी बूटस्ट्रैप के साथ उत्तरदायी एक पृष्ठ... पृष्ठ एक साधारण उत्पाद प्रस्तुति के लिए उपयुक्त है। ऐप्पल उत्पादों की प्रस्तुति पृष्ठ की संरचना में समान है।एक कैफे या रेस्तरां के लिए लैंडिंग पृष्ठ
एक साधारण रनर यूजर के लिए आदतन ग्रैब फॉर्म के साथ फ्री लैंडिंग पेज टेम्प्लेट पहली स्क्रीन में। एक बार, रेस्तरां, कैफे या कुछ भी पाक के लिए एक लैंडिंग पृष्ठ के निर्माण के लिए तीव्र। एप्लिकेशन फॉर्म का उपयोग करके, आप एक निर्दिष्ट समय के लिए एक टेबल बुक कर सकते हैं।Oleose
बहुत ही उच्च गुणवत्ता, उत्तरदायी, मुफ्त, लेकिन फिर से एक मोबाइल एप्लिकेशन के लिए। लैंडिंग पेज बूटस्ट्रैप फ्रेमवर्क का उपयोग करके कार्यान्वित किया जाता है। तीन रंग विकल्प हैं: हल्का नीला, हल्का हरा और बैंगनी। हालांकि, यह इसके विषय के साथ कड़ाई से अनुरूप नहीं है, इसलिए, यह आपको सूट करने के लिए आसानी से याद किया जा सकता है।टेक एक निशुल्क एक-पृष्ठ वेबसाइट है
और फिर से दूसरा मुफ्त एक पृष्ठ HTML टेम्पलेट एक मोबाइल एप्लिकेशन के लिए। हालांकि, इसका डिज़ाइन बहुत दिलचस्प और असामान्य है। मैं भी अनूठा कहूंगा। पोस्ट के अधिकांश आगंतुक मोबाइल एप्लिकेशन के डेवलपर नहीं हैं, इसलिए आपको अपने विषय को फिट करने के लिए सब कुछ फिर से करना होगा।Foodee
नि: शुल्क एक पृष्ठ एचटीएमएल 5 लैंडिंग पेज टेम्पलेट कैफे, रेस्तरां या किसी प्रकार का भोजनालय। पूर्ण स्क्रीन पृष्ठभूमि और लंबन प्रभाव के साथ टेम्पलेट।इस तरह के ब्लॉक हैं: मेनू, आगामी कार्यक्रम, ग्राहक समीक्षा और ब्लॉकों का एक मानक सेट जिसमें आप लाभ डाल सकते हैं, आदि।