11 CSS टेम्प्लेट साइट्स: स्क्रैच से शुरू न करें!

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

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

इस गाइड में हम CSS टेम्प्लेट पर करीब से नज़र डालेंगे, और उन्हें कहाँ ढूँढ़ेंगे।

CSS टेम्प्लेट क्या है?

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

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

आपके सामने आने वाले अधिकांश अन्य प्रकार के टेम्पलेट के विपरीत -- चाहे वह Wordpress हो, Excel हो, या इनडिजाइन टेम्प्लेट -- CSS टेम्प्लेट के लिए एक निश्चित मात्रा में तकनीकी ज्ञान की आवश्यकता होती है।

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

कंप्यूटर के पुर्जे खरीदने के लिए सबसे अच्छी वेबसाइट

CSS टेम्पलेट में क्या देखना है

चुनने के लिए बहुत सारे मुफ्त सीएसएस टेम्पलेट हैं। तो आप कैसे जानते हैं कि आपके लिए कौन सा सही है? देखने के लिए यहां कुछ चीज़ें दी गई हैं:

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

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

1. Templated.co

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

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

2. Styleshout.com

Styleshout मुफ्त और प्रीमियम दोनों प्रकार के टेम्पलेट्स की एक बड़ी श्रृंखला प्रदान करता है, जो पहले Creative Commons लाइसेंस के तहत जारी किया गया था।

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

3. HTML5Up.net

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

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

चार। फ्रीबीजबग.कॉम

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

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

इसके अलावा, Freebiesbug.com में वेब डिजाइनरों के लिए सभी प्रकार के मुफ्त संसाधन शामिल हैं, जिनमें फोंट, स्टॉक फोटो, इलस्ट्रेटर स्केच और PSD फ़ाइलें, और बहुत कुछ शामिल हैं।

5. फ्री-CSS.com

Free-CSS.com एक बिना तामझाम वाली वेबसाइट है - लेखन के समय - कुछ 2503 निःशुल्क टेम्प्लेट, साथ ही बहुत सारे प्रीमियम वाले भी, यदि आपको अभी भी वह नहीं मिल रहा है जो आप खोज रहे हैं।

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

6. ओएस-टेम्पलेट्स.कॉम

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

OS-Templates.com 'बुनियादी टेम्पलेट्स' का एक बड़ा संग्रह भी प्रदान करता है। ये आपको विभिन्न लोकप्रिय लेआउट योजनाओं (दो-स्तंभ, तीन-स्तंभ, आदि) में एक वेबसाइट के लिए बुनियादी संरचना प्रदान करते हैं, जबकि पूरी तरह से अस्थिर होते हैं। Wordpress में डिफ़ॉल्ट थीम का उपयोग करने की तरह, रिक्त कैनवास आपको अपनी साइट को अपनी इच्छानुसार किसी भी चीज़ में बदलने में सक्षम बनाता है।

7. boag.online [अब उपलब्ध नहीं है]

मैग्लेव एक सिंगल पेज वेबसाइट टेम्प्लेट है जो हो सकता है boag.online पर कार्रवाई में पूर्वावलोकन किया गया .

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

8. पिक्सेल बुद्ध

पिक्सेल बुद्धा के टेम्प्लेट केवल वेबसाइटों तक ही सीमित नहीं हैं, उनमें कुछ ईमेल न्यूज़लेटर्स के लिए भी शामिल हैं।

किसी भी तरह से, वे सभी HTML5 और CSS3 के साथ डिज़ाइन किए गए हैं, और प्रतिक्रियाशील हैं इसलिए किसी भी डिवाइस पर शानदार दिखें। हाइलाइट्स में हाउडी एचटीएमएल, एक सुंदर पोर्टफोलियो/रिज्यूमे टेम्पलेट, और एसओएचओ एचटीएमएल, एक भयानक दिखने वाला ईकामर्स पेज शामिल है जिसमें एचटीएमएल और सीएसएस के शीर्ष पर स्रोत PSD फ़ाइलें शामिल हैं।

कंप्यूटर का कहना है कि प्लग इन चार्ज नहीं हो रहा है

9. Templatemo.com

Templatemo से लगभग 500 निःशुल्क टेम्पलेट उपलब्ध हैं। कुछ बेहतरीन वे हैं जो कुछ अलग करने की कोशिश करने के लिए बूटस्ट्रैप-शैली ग्रिड सिस्टम से मुक्त हो जाते हैं।

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

10. Startbootstrap.com

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

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

ग्यारह। बूट्सवॉच.कॉम

अंत में, कुछ और हाथ पर। बूट्सवॉच बूटस्ट्रैप का उपयोग करके निर्मित स्टाइल साइटों के लिए 16 ओपन सोर्स थीम प्रदान करता है।

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

बूटस्ट्रैप के साथ एक मूल वेबसाइट को एक साथ रखना आसान है, और बूट्सवॉच इसे कुछ त्वरित पॉलिश देता है।

CSS टेम्प्लेट का उपयोग कैसे करें

मोटे तौर पर, टेम्प्लेट का उपयोग करने के दो तरीके हैं। आप या तो उनका उपयोग वैसे ही करते हैं या आप उन्हें अपने स्वयं के डिज़ाइन के आधार के रूप में उपयोग करते हैं।

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

कैसे सुनिश्चित करें कि आपका फोन हैक नहीं हुआ है

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

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

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

क्या आप वेबसाइट बनाते समय CSS टेम्प्लेट का उपयोग करते हैं? उन्हें खोजने के लिए आपके पसंदीदा स्थान कौन से हैं? अपने अनुभव और सुझाव हमारे साथ टिप्पणियों में साझा करें।

साझा करना साझा करना कलरव ईमेल कमांड प्रॉम्प्ट का उपयोग करके अपने विंडोज पीसी को कैसे साफ करें

यदि आपका विंडोज पीसी स्टोरेज स्पेस पर कम चल रहा है, तो इन फास्ट कमांड प्रॉम्प्ट यूटिलिटीज का उपयोग करके जंक को साफ करें।

आगे पढ़िए संबंधित विषय

प्रोग्रामिंग
वेब डिजाइन
सीएसएस

लेखक के बारे में एंडी बेट्स(२२१ लेख प्रकाशित)

एंडी एक पूर्व प्रिंट पत्रकार और पत्रिका संपादक हैं जो 15 वर्षों से प्रौद्योगिकी के बारे में लिख रहे हैं। उस समय में उन्होंने अनगिनत प्रकाशनों में योगदान दिया है और बड़ी तकनीकी कंपनियों के लिए कॉपी राइटिंग का काम किया है। उन्होंने मीडिया के लिए विशेषज्ञ टिप्पणी भी प्रदान की है और उद्योग की घटनाओं में पैनल की मेजबानी की है।

एंडी बेट्स की ओर से ज़्यादा

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें