वर्डप्रेस में सरल सीएसएस ग्रिड लेआउट को एकीकृत करना
यदि आप सही टूल का उपयोग करते हैं तो वर्डप्रेस में एक सुसंगत, ठोस ग्रिड लेआउट प्राप्त करना एक दर्द रहित प्रक्रिया हो सकती है। इस ट्यूटोरियल में, आप चरण दर चरण सीखेंगे कि वर्डप्रेस में एक ग्रिड सिस्टम को कैसे जल्दी से स्थापित किया जाए जो बहुत हल्का और संशोधित करने में आसान है। हम डिज़ाइन को सरल रखेंगे ताकि हम आपके ग्रिड को स्थापित करने के लिए सही साधनों का उपयोग करने पर ध्यान केंद्रित कर सकें, लेकिन ध्यान रखें कि ज़रूरत पड़ने पर आप ग्रिड की शैली बना सकते हैं.
मैं इस ट्यूटोरियल के लिए वर्डप्रेस में एक डिफ़ॉल्ट पूल विषय का उपयोग कर रहा हूँ, ताकि आपको केवल "स्क्रैच से प्रारंभ" दृष्टिकोण दिखाई दे सके, ताकि आप इसे ठीक कर सकें.
चरण 1: अपनी ग्रिड चौड़ाई निर्धारित करें
आरंभ करने से पहले, आपको यह निर्धारित करना होगा कि आपका ग्रिड कितना चौड़ा होना चाहिए। मेरी वर्डप्रेस साइट के लिए, मैं देख सकता हूं कि जब आप किसी ऑब्जेक्ट पर राइट-क्लिक करते हैं, तो Google Chrome के "इंसपेक्ट एलीमेंट" फीचर का उपयोग करके मेरे मुख्य कॉलम की चौड़ाई 450px है। यह सबसे तेज़ तरीका है जो मैंने पाया है कि किसी वेब पेज पर किसी ऑब्जेक्ट की चौड़ाई और ऊंचाई को जल्दी से निर्धारित कर सकता है.
चरण 2: ग्रिड डिजाइनर
एक ग्रिड के निर्माण के बजाय, जो आप चाहें तो कर सकते हैं, मेरा सुझाव है कि आप कई उपलब्ध ग्रिड जनरेटर उपकरणों में से एक के साथ जा रहे हैं। इस ट्यूटोरियल के लिए, मैं माइंडप्ले द्वारा ग्रिड जनरेटर का उपयोग करूंगा। यह एक बहुत ही सरल और हल्का ग्रिड जनरेटर है.
मैं एक तीन-स्तंभ प्रदर्शन चाहता हूं और मुझे यह सुनिश्चित करने की आवश्यकता है कि मेरे पिक्सेल 450 पर हैं। इसलिए तदनुसार समायोजित करें और "निर्यात" टैब पर जाएं। हम खत्म नहीं होंगे * टाइपोग्राफी इस ट्यूटोरियल में सुविधाएँ, हालांकि यह निश्चित रूप से आपके स्वयं के अन्वेषण के लायक है.
निर्यात टैब में, शीर्ष-सबसे "स्टाइल शीट" फ्रेम का उपयोग करें और "ग्रिड" टिप्पणी देखने तक स्क्रॉल करें। आप इस फ्रेम के नीचे टिप्पणी से सब कुछ कॉपी करेंगे। यह केवल 30 पंक्तियों के बारे में होना चाहिए .
चरण 3: अपनी वर्डप्रेस शैली को अपडेट करना
अपनी वर्डप्रेस साइट पर लॉगइन करें और सूरत> संपादक पर जाएं.
संपादक पैनल के निचले-दाईं ओर, आप देखेंगे a styles.css फ़ाइल (या कुछ इसी तरह, आपके विषय पर निर्भर करता है)। इसे खोलने के लिए इस पर क्लिक करें.
शीट के नीचे तक स्क्रॉल करें और अपने प्री को माइंडप्ले.डक से चिपकाएँ:
चरण 4: ग्रिड को लागू करना
ग्रिड का उपयोग करने के लिए, आप बस एक बनाएँ यहाँ कुछ नमूना पूर्व है जिसे आप आरंभ करने के लिए जगह में चिपका सकते हैं: लेफ्ट कॉलम मध्य स्तम्भ दक्षिण पक्ष क़तार यहाँ यह कैसा दिखता है वर्डप्रेस: पेज को सेव / अपडेट करें और परिणाम देखें। मेरे मामले में, यह साइट के लिए होम पेज है: जैसा कि आप ऊपर दिए गए स्क्रीन शॉट से देख सकते हैं, हमारे पास हमारे तीन कॉलम हैं और सब कुछ ठीक है जहां हम इसके होने की उम्मीद करते हैं। आप निम्नलिखित के साथ शुरू करके जितनी चाहें उतनी पंक्तियाँ जोड़ सकते हैं लेफ्ट कॉलम मध्य स्तम्भ दक्षिण पक्ष क़तार लेफ्ट रो # 2 मध्य पंक्ति # 2 राइट रो # 2 यहां बताया गया है कि यह अब तक कैसा है: अब आप चित्र या पाठ जोड़ सकते हैं, और प्रत्येक पंक्ति को ठीक उसी तरह से स्टाइल कर सकते हैं जैसा आप चाहते हैं. एक से अधिक पंक्ति होने पर आपको कुछ ब्राउज़रों में परेशानी हो सकती है। इस समस्या को हल करने के लिए, आपको सबसे दाईं ओर हाशिया बनाना होगा ( इससे आपका यकीन हो जाएगा यदि आप पूरे ग्रिड की पृष्ठभूमि को स्टाइल करना चाहते हैं, तो आपको ऊंचाई को समायोजित करने की आवश्यकता होगी आपके द्वारा उपयोग किए जाने वाले माइंडप्ले.डाक ग्रिड जनरेटर के संस्करण के आधार पर, साइट ".grid-m4" उत्पन्न नहीं कर सकती है और इसके बजाय आपको उपयोग करने की आवश्यकता होगी लेफ्ट कॉलम मध्य स्तम्भ दक्षिण पक्ष क़तार यहाँ दो पंक्तियों और कुछ सरल ग्राफिक्स के साथ मेरे अंतिम परिणाम क्या दिखते हैं: मज़ेदार डिज़ाइनिंग करें और याद रखें कि आप अपनी ग्रिड को अपनी इच्छानुसार स्टाइल कर सकते हैं. संपादक की टिप्पणी: इस पोस्ट के द्वारा लिखा गया है तारा सींगर Hongkiat.com के लिए। तारा के पास अंग्रेज़ी में डिग्री है और वह मार्केटिंग, विज्ञापन, ब्रांडिंग, ग्राफिक डिज़ाइन और डेस्कटॉप प्रकाशन के बारे में लिखती है। अपने लेखन करियर के अलावा, तारा को अपने पति और दो बच्चों के साथ समय बिताना भी पसंद है.
:
Tweaking के लिए टिप्स
.ग्रिड m4, हमारे मामले में) जिस ऊंचाई पर आप चाहते हैं कि प्रत्येक पंक्ति हो। यदि आप उन छवियों का उपयोग कर रहे हैं जो 250px तक 250px हैं, तो पंक्ति को ऊंचाई में बनाएं .ग्रिड m4 250px होने के लिए:.ग्रिड-एम 4 फ्लोट: बाएं; चौड़ाई: 20 पीएक्स; ऊंचाई: 250 पीएक्स;
.ग्रिड से एम 1 अगली पंक्ति के बाईं ओर इसके ऊपर की पंक्ति तक नहीं तैरती है..ग्रिड कक्षा। तो मान लें कि आपकी ग्रिड पर चार पंक्तियाँ हैं, प्रत्येक 250px पर हैं। आप 1000px पर .grid वर्ग में ऊँचाई जोड़ना चाहते हैं, इसलिए आपके द्वारा जोड़ा गया कोई भी स्टाइलिंग तत्व पूरे ग्रिड डिज़ाइन को कवर करेगा..ग्रिड चौड़ाई: 450px; ऊंचाई: 1000 पीएक्स; मार्जिन: ऑटो;
.ग्रिड से एम 1 बाद .ग्रिड-सी 3 यह सुनिश्चित करने के लिए कि आपका ग्रिड उचित स्थान पर फैला हुआ है:अंतिम परिणाम
