How to turn WordPress into a visual builder

Jan 31, 2026
कैसे करना है
(छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9]

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

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

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

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

इसे बढ़ाने के लिए प्रत्येक छवि के ऊपरी दाएं भाग में आइकन का उपयोग करें

    [4 9] 2019 में सबसे अच्छी वर्डप्रेस होस्टिंग सेवाएं

01. वर्डप्रेस की एक प्रति स्थापित करें

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

02. उन हिस्सों को हटाएं जिनकी आपको आवश्यकता नहीं है

Give yourself a clutter-free page to work with

अपने आप को काम करने के लिए एक अव्यवस्था मुक्त पृष्ठ दें (छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] [7 9]

प्लगइन्स पर जाएं, और वर्डप्रेस के साथ बंडल की गई सब कुछ हटाएं। लेखन के समय, यह नए को अक्षम करने के लिए 'क्लासिक संपादक' प्लगइन को स्थापित करने के हमारे प्रयासों को व्यवस्थित करेगा गुटेनबर्ग संपादक । अव्यवस्था को कम करने के लिए, हमें भी उपस्थिति और जीटी पर जाना चाहिए; विजेट और सभी विजेट हटा दें।

03. एक शीर्षलेख और पाद लेख के साथ एक विषय चुनें

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

04. Elector स्थापित करें और एक पृष्ठ बनाएं

[9 7] You'll find Elementor in the WordPress plugins library

आपको वर्डप्रेस प्लगइन्स लाइब्रेरी में एलिमेंट मिलेगा (छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] [7 9]

खोजने के लिए वर्डप्रेस प्लगइन खोज का उपयोग करें तत्व और इसे स्थापित करें। एक बार स्थापित और सक्रिय होने के बाद, एक नया पृष्ठ बनाएं। नया पृष्ठ 'होम' नाम दें और इसे ड्राफ्ट के रूप में सहेजें ताकि यह डेटाबेस में मौजूद हो। 'Elementor में संपादित करें' पर क्लिक करें। यह एलिमेंट विजुअल बिल्डर को लोड करेगा।

05. पूर्ण चौड़ाई पृष्ठ

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

06. कुछ सामग्री जोड़ें

[12 9] Give yourself some content to work with

अपने आप को काम करने के लिए कुछ सामग्री दें (छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] [7 9]

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

07. हेडिंग लाइन्स निकालें

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

[14 9] एच 1: पहले, एच ​​2: पहले { कुछ भी डिस्प्ले मत करो; }

08. सामग्री चौड़ाई को ठीक करें

[15 9] Ensure the content lines up with the header

हेडर के साथ सामग्री लाइन सुनिश्चित करें (छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] [7 9]

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

हमें मुख्य तत्व सेटिंग्स पृष्ठ में सामग्री चौड़ाई भी बढ़ाना चाहिए।

[14 9] @media केवल स्क्रीन और (न्यूनतम चौड़ाई: 768px) { .Ementor-TOP-SECRY.EMENTOR-SECRE- बॉक्सिंग और जीटी; .Ementor-कंटेनर { मार्जिन: 0 कैल्क (10% + 60 पीएक्स); } }

09. एक उद्घाटन अनुभाग बनाएं

[1 9 0] [1 9 1] [1 9 2]

उन तत्वों में खींचें जिन्हें आप शामिल करना चाहते हैं (छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] [7 9]

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

10. एक पृष्ठभूमि जोड़ें

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

लेआउट टैब का उपयोग करके, हमारे अनुभाग को 80 वीएच की ऊंचाई दें। विकल्पों को खोजने के लिए शैली का चयन करें, और # 0073AA की पृष्ठभूमि सेट करने के लिए पृष्ठभूमि विकल्प का उपयोग करें।

11. पाठ शैली

You can change the font for your whole document in one go

आप अपने पूरे दस्तावेज़ के लिए फ़ॉन्ट को एक बार में बदल सकते हैं (छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] [7 9]

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

12. पृष्ठभूमि ओवरले प्रभाव का उपयोग करें

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

13. कार्रवाई के लिए एक कॉल बनाएँ

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

अपना संपर्क फ़ॉर्म प्लगइन इंस्टॉल करें और अपने फॉर्म के लिए शोर्ट उत्पन्न करें। दाएं कॉलम में, एक शॉर्टकोड विजेट में खींचें और बॉक्स में शोर्ट पेस्ट करें।

14. मोबाइल अनुकूल

Don't forget to tweak your design for mobile

मोबाइल के लिए अपने डिजाइन को ट्विक करना न भूलें (छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] [7 9]

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

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

15. छवियों को अनुकूलित करें

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

16. प्रदर्शन को बढ़ावा देने के लिए कैश पेज

[28 9]

कैश प्लगइन से मदद के साथ अपनी साइट लाइटनिंग-फास्ट बनाएं (छवि क्रेडिट: Elementor / जोसेफ फोर्ड) [1 9] [7 9]

अंत में, हम अपने पृष्ठ के लिए लोड समय को अधिकतम करने के लिए एक कैश प्लगइन स्थापित करेंगे। वहां कई कैश प्लगइन्स हैं, लेकिन वर्तमान में, कैश Enabler कम प्रोफ़ाइल है और इस सेटअप के साथ अच्छी तरह से काम करता है।

कैश सक्षम के साथ, वेबसाइट जल्दी लोड हो जाती है। इसमें पृष्ठभूमि में एक पूर्ण कार्यात्मक दृश्य निर्माता भी है। यह आपके लिए डिजाइन करने के लिए एकदम सही तेज़ कामकाजी खाली कैनवास है।

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(छवि क्रेडिट: भविष्य) [1 9] [7 9]

26 सितंबर को हमसे जुड़ें सीएसएस उत्पन्न करें , वेब डिजाइनरों के लिए एक bespoke सम्मेलन रचनात्मक BLOQ, नेट और वेब डिजाइनर द्वारा आपके लिए लाया गया । 15 अगस्त 2019 से पहले बुक करते समय एक प्रारंभिक पक्षी टिकट के साथ £ 50 बचाएं।

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका में प्रकाशित किया गया था वेब डिजाइनर । मुद्दा 287 खरीदें या सदस्यता लेने के ।

अधिक पढ़ें:

    [4 9] 40 शानदार वर्डप्रेस ट्यूटोरियल
[4 9] एक हेडलेस सीएमएस के रूप में वर्डप्रेस का उपयोग करें [4 9] वर्डप्रेस 5.0 में नया क्या है?

कैसे करना है - सर्वाधिक लोकप्रिय लेख

माया में मिश्रण आकार निर्माण को सरल बनाने के लिए कैसे

कैसे करना है Jan 31, 2026

(छवि क्रेडिट: एंटनी वार्ड) [1 9] माया में, आकार, य..

Stop the bots with Google reCAPTCHA

कैसे करना है Jan 31, 2026

(छवि क्रेडिट: भविष्य) [1 9] बॉट्स को हमेशा एक नं�..

Create your own Calligraphic brush in Illustrator

कैसे करना है Jan 31, 2026

इलस्ट्रेटर के बारे में सबसे अच्छी चीजों में से एक..

How to paint like a 19th-century master

कैसे करना है Jan 31, 2026

1 9 वीं शताब्दी कला के लिए एक अद्भुत समय था। कलाकार�..

How to design a chatbot experience

कैसे करना है Jan 31, 2026

चाहे हम इसे स्वीकार करना चाहते हैं या नहीं, मैसेज�..

12 tips for realistic 3D lighting

कैसे करना है Jan 31, 2026

प्रकाश किसी भी में मौलिक है 3 डी कला आप जिस पर..

How to use Markdown in web development

कैसे करना है Jan 31, 2026

वेब डेवलपर्स और सामग्री निर्माता के रूप में, हम आ�..

जादुई चमकते रन कैसे पेंट करें

कैसे करना है Jan 31, 2026

इस ट्यूटोरियल में, मैं आपको दिखाऊंगा कि रहस्यमय र..

श्रेणियाँ