वर्डप्रेस में अपने स्वयं के पेज लेआउट डिजाइन करना सबसे अधिक चुनौतीपूर्ण हो सकता है विषयों के बहुमत आपको मुट्ठी भर लेआउट विकल्प देते हैं लेकिन क्या होगा अगर उनमें से कोई भी वास्तव में आपकी आवश्यकताओं को फिट नहीं करता है?
बहुत से लोग मानते हैं कि आगे बढ़ने का एकमात्र तरीका पीएचपी, एचटीएमएल और सीएसएस सीखना है यदि आप बस चाहते हैं कि आपकी वेबसाइट किसी भी कोड को जानने के बिना अद्वितीय दिखे तो यह बहुत कुशल नहीं है।
यहाँ अच्छी खबर है! साथ तत्वू का उपयोग करके कस्टम वर्डप्रेस लेआउट बना सकते हैं ड्रैग-एंड-ड्रॉप संपादककोई कोडिंग या थीम संशोधन की आवश्यकता नहीं है अगर किसी ने आपको ऐसा बताया है, तो वे बस झूठ बोल रहे हैं।
इस गाइड में, हम आपको दिखाएंगे एलिमेंट के साथ कस्टम वर्डप्रेस लेआउट कैसे बनाएं, बताएं कि लेआउट हुड के नीचे कैसे काम करते हैं, और तेजी से चलते हुए भी अपनी साइट को शानदार बनाने के लिए प्रो टिप्स साझा करें। रास्ते में, आप देखेंगे कि कैसे मास्टर ऐडऑन अतिरिक्त विजेट, टेम्प्लेट और डिज़ाइन विकल्पों के साथ एलिमेंटर को सुपरचार्ज कर सकते हैं।
क्यों एलिमेंट के साथ कस्टम वर्डप्रेस लेआउट बनाएं?
अधिकांश मुफ्त और प्रीमियम वर्डप्रेस थीम कई लेआउट के साथ आते हैं यदि आप एक ही टेम्पलेट से चिपके हुए खुश हैं तो यह पर्याप्त हो सकता है।
लेकिन क्या होगा यदि आप चाहते हैंः
- मुखपृष्ठ जो आपकी थीम के डिफ़ॉल्ट जैसा कुछ नहीं दिखता है?
- उत्पाद लॉन्च के लिए कस्टम लैंडिंग पृष्ठ?
- चिपचिपा साइडबार, प्रगति सलाखों को पढ़ने, या एक फैंसी लेखक बॉक्स के साथ ब्लॉग पोस्ट डिजाइन लंबे समय तक पोस्ट भी एक चिपचिपा के साथ बेहतर पढ़ें सामग्री की तालिका वर्डप्रेस प्लगइन तो पाठक अंतहीन स्क्रॉलिंग के बिना अनुभागों के बीच कूद सकते हैं।
- WooCommerce उत्पाद ग्रिड जो वास्तव में आपके ब्रांड से मेल खाता है?
आप कोड के साथ अच्छे हैं फिर यह आसान है लेकिन, जैसे अधिकांश उपयोगकर्ता आप कोडिंग नहीं जानते हैं तो यह एक बड़ा झटका है।
लेकिन अब और नहीं। एलिमेंटर बिल्कुल वही डिज़ाइन करना संभव बनाता है जो आप चाहते हैं। और जब इसके साथ जोड़ा जाता है के तत्वों मास्टर ऐडऑनू ी रचनात्मक विजेट मिलते हैं जैसे उन्नत टैब, गतिशील गैलरी, या एनिमेटेड सुर्खियाँ। और यह कि मेरा मित्र अधिकांश विषयों या यहां तक कि अकेले एलिमेंटर द्वारा प्रदान की जा सकने वाली चीज़ों से कहीं आगे जाता है।
एलिमेंट के साथ शुरुआत करना
पहला, मुफ्त एलिमेंटर प्लगइन स्थापित करें और सक्रिय करें वर्डप्रेस रिपॉजिटरी से।
एक बार सक्रिय होने पर, आपको एक नया विकल्प मिलेगा जिसे कहा जाता है एलिमेंटोरैग्माग के साथ “संपादित करें आपके पृष्ठों और पोस्ट पर यह क्लिक करने से एलिमेंट संपादक लॉन्च होता है।
संपादक खुलने के बाद, यहां आप देखेंगेः
- बाईं ओर, आप देखेंगे विजेट पैनल (शीर्षक, चित्र, बटन, आदि)।
- दाईं ओर, आपको एक दिखाई देगा लाइव पूर्वावलोकन अपने पेज के।
यहां से, आप किसी भी विजेट को खींच सकते हैं और निर्माण शुरू कर सकते हैं।
प्रो टिपः एलिमेंटर प्रो थीम बिल्डर, डायनेमिक कंटेंट और वूकॉमर्स टेम्प्लेट जैसी उन्नत सुविधाओं को अनलॉक करता है यदि आप पूर्ण कस्टम वर्डप्रेस लेआउट बनाने के बारे में गंभीर हैं, तो प्रो अपग्रेड के लायक है।
क्या आपको एलिमेंट प्रो मिलना चाहिए?
जबकि मुफ्त संस्करण आपको एक साधारण वेबसाइट के माध्यम से प्राप्त करने के लिए पर्याप्त शक्तिशाली है लेकिन अपने सपने को कस्टम वर्डप्रेस लेआउट बनाने के लिए, यहां क्या है एलिमेंट प्रो अनलॉक:
- थीम बिल्डर (कस्टम हेडर, पाद लेख और संग्रह पृष्ठ)
- WooCommerce टेम्पलेट
- फॉर्म और पोस्ट जैसे उन्नत विजेट
- प्रदर्शन की स्थिति (नियंत्रण जहां टेम्पलेट दिखाई देते हैं)
यदि आप साइट-वाइड लेआउट डिजाइन करने के बारे में गंभीर हैं, तो एलिमेंटर प्रो इसके लायक है और साथ मास्टर ऐडऑन, आप कई अलग-अलग प्लगइन्स खरीदे बिना उन लेआउट को आगे बढ़ा सकते हैं वास्तव में, साइट के हिस्सों को लोगों को लगता है कि प्रो एक्सएनएनएक्स की आवश्यकता है जैसे कि पाद लेख एक्सएनएनएक्स मास्टर एडॉन्स के साथ मुफ्त हैं; यहाँ कैसे है एलिमेंट का उपयोग करके वर्डप्रेस में पाद लेख संपादित करें बिना अपग्रेड किए।
एलिमेंटर के साथ कस्टम वर्डप्रेस लेआउट कैसे बनाएं
एक कस्टम वर्डप्रेस लेआउट बनाने में पहला कदम आपकी वर्डप्रेस साइट पर एक नया पेज या पोस्ट खोलना है अधिकांश शुरुआती लोग इसे अनदेखा करते हैं और मौजूदा सामग्री को संपादित करने का प्रयास करते हैं और उन्हें जो मिलता है वह उनके विषय के डिफ़ॉल्ट डिजाइन के प्रतिबंध हैं।
एक नए पृष्ठ से शुरू करने से आपको एक साफ स्लेट मिलती है जहां आप पुराने स्वरूपण और लेआउट से मुक्त होते हैं संपादन स्क्रीन पर, आप एक बटन देखेंगे जो कहता है कि “एलिमेंट के साथ संपादित करें।” यह वह जगह है जहां जादू शुरू होता है।
उस बटन पर क्लिक करने से एलिमेंटर इंटरफ़ेस एक ड्रैग-एंड-ड्रॉप बिल्डर के साथ लॉन्च होता है जो उन लोगों के लिए डिज़ाइन किया गया है जो कोड नहीं करना चाहते हैं लेकिन फिर भी पूर्ण रचनात्मक नियंत्रण चाहते हैं यह वह जगह है जहां आप पूरी तरह से खरोंच से एक लेआउट बना सकते हैं, खाली वर्गों से शुरू कर सकते हैं, या आप एलिमेंटर के पूर्व-निर्मित टेम्पलेट्स में से एक का उपयोग करके खुद को एक हेड स्टार्ट दे सकते हैं।
कई उपयोगकर्ताओं के लिए, सबसे कठिन हिस्सा अनुकूलित नहीं है, यह जानना है कि कहां से शुरू करना है टेम्पलेट्स आपको एक नींव देकर उस रोडब्लॉक को हटा देते हैं जो पहले से ही संरचित, स्टाइल और उपयोग करने में आसान है।
यदि आप डिजाइन करने के लिए नए हैं, तो टेम्पलेट लाइब्रेरी एक जीवनरक्षक है “ टेम्प्लेट” जोड़ें बटन पर क्लिक करके, आप पेशेवर रूप से डिज़ाइन किए गए विकल्पों की एक गैलरी खोलते हैं, जो आपके पृष्ठ में गिराए जाने के लिए तैयार है आश्चर्य करने की आवश्यकता नहीं है कि एक नायक छवि कितनी व्यापक होनी चाहिए या अपने शीर्षकों को कैसे संरेखित करना चाहिए आप बस एक लेआउट के लिए ब्राउज़ कर सकते हैं जो आप चाहते हैं के करीब है।
उदाहरण के लिए, यदि आप एक “Landing” पेज पर काम कर रहे हैं, तो एलिमेंटर के पास कई लैंडिंग पेज टेम्पलेट हैं जो आपके थीम द्वारा प्रदर्शित डिफ़ॉल्ट संदेश की तुलना में कहीं अधिक पॉलिश दिखते हैं।
एक बार जब आपको एक डिज़ाइन मिल जाता है जो सही लगता है, तो एक एकल क्लिक करें“इंसर्टंबाल बटन इसे आपके पृष्ठ में लाता है क्या आपको लगता है कि यह एक स्थिर डिजाइन है नहीं, आपको पूरी तरह से संपादन योग्य संरचना मिलती है जिसे आप अपनी आवश्यकताओं के लिए अनुकूलित कर सकते हैं प्रत्येक छवि, शीर्षक, और बटन अनुकूलन योग्य है यह लचीलापन ठीक है कि इतने सारे लोग एलिमेंट चुनते हैं।
एक टेम्पलेट संपादित करना आसान है आप एक तत्व पर होवर करते हैं, इसे क्लिक करते हैं, और इसकी सेटिंग्स बाएं हाथ के पैनल में दिखाई देती हैं यह डिजाइन दृष्टिकोण पारंपरिक वर्डप्रेस संपादन के साथ एक आम निराशा को हल करता है।
एलिमेंटर के साथ, आप स्क्रीन पर जो देखते हैं वह बिल्कुल वही है जो आपके आगंतुक देखेंगे। वह त्वरित प्रतिक्रिया डिज़ाइन को तेज़, कम तनावपूर्ण और बहुत अधिक सुलभ बनाती है।
एलिमेंटर को इतना शक्तिशाली बनाता है कि यह विभिन्न प्रकार के विजेट प्रदान करता है शीर्षकों और पाठ तक सीमित होने के बजाय, आप छवि गैलरी, प्रशंसापत्र स्लाइडर, मानचित्र, बटन, हिंडोला, या यहां तक कि अन्य प्लगइन्स से फॉर्म भी सम्मिलित कर सकते हैं जो आप पहले से ही उपयोग करते हैं।
एक बार जब आप अपने लेआउट के साथ कर लेते हैं, तो अंतिम चरण इसे सहेज रहा है निचले पैनल में, “प्रकाशितंब बटन के बगल में, आप एक छोटे तीर को नोटिस करेंगे इसे क्लिक करने से विभिन्न सेव विकल्प का पता चलता है यह महत्वपूर्ण है क्योंकि कई उपयोगकर्ता गलती से दुनिया को देखने के लिए अधूरे काम को प्रकाशित करने की चिंता करते हैं।
एलिमेंटर आपको अपनी साइट पर लाइव किए बिना अपने लेआउट को ड्राफ्ट या टेम्पलेट के रूप में सहेजने की अनुमति देकर उस सिरदर्द से बचाता है आप पूर्वावलोकन कर सकते हैं कि यह कैसा दिखता है, अपने वर्डप्रेस डैशबोर्ड पर वापस जाएं, या बाद में सुरक्षित रूप से स्टोर करें, जब आपका डिज़ाइन सार्वजनिक हो जाता है तो आप नियंत्रण में रहते हैं।
आप लेआउट डिज़ाइन कर रहे हैं जो आपके ब्रांड को प्रतिबिंबित करते हैं और सीधे अपने आगंतुकों से बात करते हैं और यदि आप खुद को अधिक विजेट, प्रभाव, या पूर्व-निर्मित टेम्पलेट्स चाहते हैं तो एलिमेंटर अकेले प्रदान करता है, जैसे उपकरण मास्टर ऐडऑन अपनी डिजाइन संभावनाओं को और भी आगे बढ़ा सकते हैं यह आपको लेआउट बनाने में मदद करेगा जो न केवल पेशेवर दिखते हैं बल्कि आपकी साइट के लिए अद्वितीय भी महसूस करते हैं।
इस बिंदु पर, आपको अपना पहला कस्टम लेआउट लाइव मिल गया है लेकिन एलिमेंट की सच्ची शक्ति तब दिखाती है जब आप एकल पृष्ठों से आगे बढ़ते हैं।
अपने कस्टम एलिमेंटर लेआउट को कैसे सहेजें और पुन: उपयोग करें
हर बार डिज़ाइन को फिर से बनाने के बजाय, आप अपने कस्टम वर्डप्रेस लेआउट को टेम्प्लेट के रूप में सहेज सकते हैं और जब भी आपको आवश्यकता हो, उनका पुन: उपयोग कर सकते हैं यही वह जगह है जहां एलिमेंटर की टेम्पलेट-सेविंग सुविधा एक वास्तविक गेम परिवर्तक बन जाती है यह केवल सुविधा के बारे में नहीं है यह स्मार्ट तरीके से काम करने और सामग्री पर ध्यान केंद्रित करने के लिए समय को मुक्त करने के बारे में है, न कि संरचना।
लेआउट को सहेजने के लिए, उस पृष्ठ को खोलें जिस पर आप एलिमेंट संपादक के अंदर काम कर रहे हैं नीचे, “Publish” बटन के बगल में, आप एक छोटा तीर देखेंगे इसे क्लिक करने से अधिक विकल्पों का पता चलता है, जिसमें आपके डिज़ाइन को टेम्पलेट के रूप में सहेजने की क्षमता शामिल है टेम्प्लेट” के रूप में “सेव चुनना सुनिश्चित करता है कि आपकी कड़ी मेहनत सिर्फ एक पृष्ठ पर नहीं रहती है; यह आपकी लाइब्रेरी में पुन: प्रयोज्य संपत्ति बन जाती है।
अगली बार जब आप एक नया पृष्ठ बना रहे हों, तो आपको एक खाली कैनवास के साथ शुरू नहीं करना होगा इसके बजाय, टेम्पलेट लाइब्रेरी खोलें, मेरे टेम्पलेट्स पर स्विच करें, और एक क्लिक के साथ अपने सहेजे गए लेआउट को मैन्युअल रूप से रिक्ति, रंग, या टाइपोग्राफी को दोहराने की कोशिश करने के बजाय, एलिमेंटर आपको उस सटीक संरचना को डुप्लिकेट करने देता है जिसे आपने पहले ही पूर्ण कर लिया है।
कई उपयोगकर्ताओं के लिए, टेम्प्लेट का वास्तविक मूल्य एक वेबसाइट पर नहीं रुकता है यदि आप कई साइटों का प्रबंधन करते हैं उदाहरण के लिए, एक पोर्टफोलियो, एक क्लाइंट प्रोजेक्ट, या यहां तक कि एक ईकामर्स स्टोर आप अपने सहेजे गए टेम्प्लेट को भी निर्यात कर सकते हैं और उन्हें कहीं और आयात कर सकते हैं अपने टेम्पलेट के बगल में तीन-बिंदु आइकन पर क्लिक करके और “एक्सपोर्ट, हेमोल एलिमेंट एक फ़ाइल बनाता है जिसे आप अपने कंप्यूटर पर डाउनलोड कर सकते हैं बाद में, आप उसी फ़ाइल को किसी अन्य वर्डप्रेस इंस्टॉलेशन पर अपलोड कर सकते हैं और तुरंत अपने साथ अपना डिज़ाइन ला सकते हैं।
यह वर्कफ़्लो वर्डप्रेस उपयोगकर्ताओं के लिए एक बहुत ही वास्तविक दर्द बिंदु को हल करता है: बर्बाद समय और असंगत डिजाइन टेम्पलेट्स सुनिश्चित करते हैं कि आपकी साइट आपको एक ही विषय की सीमाओं में लॉक किए बिना एकजुट और पेशेवर दिखती है।
अपने डिजाइनों को और आगे ले जाना चाहते हैं मास्टर एडॉन्स अपनी खुद की टेम्पलेट लाइब्रेरी प्रदान करता है, जिससे आप अपने कस्टम वर्डप्रेस लेआउट को सहेज सकते हैं और पेशेवर टेम्पलेट्स के बढ़ते संग्रह में टैप कर सकते हैं आसानी से आयात करें और एक सहज, रचनात्मक बढ़ावा देने के लिए सेकंड में इन डिजाइनों को ट्विक करें।
निष्कर्ष
एलिमेंटर के साथ आश्चर्यजनक वर्डप्रेस लेआउट बनाना आसान है और यह आपको शैली के साथ डिजाइन करने की स्वतंत्रता देता है सरल पृष्ठों के साथ शुरू करें और थीम बिल्डर तक स्तर, प्रदर्शन की स्थिति, और अधिक नियंत्रण के लिए गतिशील सामग्री तो, आज आपने सीखा है कि कैसे एलिमेंटर के साथ कस्टम वर्डप्रेस लेआउट बनाने के लिए।
अपने डिजाइनों को और भी अधिक खड़ा करना चाहते हैं मास्टर एडॉन्स उन्नत विजेट्स, आंखों को पकड़ने वाले प्रभावों और उपयोग करने के लिए तैयार टेम्पलेट्स के साथ अतिरिक्त स्वभाव लाता है जो कार्यात्मक लेआउट को अविस्मरणीय लोगों में बदल देते हैं चाहे आप एक ब्लॉग, पोर्टफोलियो, या वूकॉमर्स स्टोर बना रहे हों, मास्टर एडॉन्स के साथ जोड़े गए एलिमेंटर वह सब कुछ है जो आपको कभी भी चाहिए।
