Elementor Master Class: WordPress वेबसाइट डिजाइन करना सीखें - CodePress Academy

Published: November 13, 2025 | Last Updated: | Reading Time: 15 minutes

SKV

Sanjay Kumar Verma

Founder - CodePress Academy

Web Development & WordPress Expert with 5+ years experience | 100+ Websites Built | YouTube Educator

Specialization: WordPress Development, Elementor, Web Design, SEO Optimization

Elementor की एक Master Blog

A professional tutorial image showing the Elementor editor's Flexbox

एक सर्वे के हिसाब से यह मालूम चला है कि दुनिया में 40% से ज़्यादा वेबसाइट्स सिर्फ WordPress प्लेटफ़ॉर्म पर बनी हुई हैं। इससे यह साफ़ पता चलता है कि WordPress की पॉपुलैरिटी और डिमांड कितनी ज़्यादा है।

लेकिन क्या आपको पता है कि WordPress प्लेटफ़ॉर्म की सबसे बड़ी जीत Elementor Page Builder की वजह से है? 10 मिलियन से ज़्यादा वेबसाइट्स पर Elementor Page Builder का इस्तेमाल किया गया है। इसकी औसतन 4.5 स्टार रेटिंग है। यह एक ऐसा प्लगइन है जिसकी मदद से आप बिना कोडिंग के, बिना एक भी लाइन कोड लिखे, किसी भी तरह की वेबसाइट को आसानी से डिज़ाइन और डेवलप कर सकते हैं।

लेकिन फिर भी बहुत सारे लोगों को Elementor का सही इस्तेमाल करना नहीं आता। उन्हें यह नहीं पता होता कि Container क्या होते हैं, Margin-Padding क्या है, Border Radius क्या होता है, या Box Shadow कैसे लगाते हैं। अगर वे Image Element यूज़ कर रहे हैं, तो यह भी नहीं जानते कि उसमें कौन-कौन सी सेटिंग्स होती हैं। और अगर Button लगा रहे हैं, तो यह नहीं पता कि उसका Background Color कैसे बदलना है या Hover Effect कैसे लगाना है।

ऐसी बहुत सी छोटी-छोटी लेकिन ज़रूरी बातें हैं, जिन्हें अगर आप सीख लेते हैं, तो आप Elementor के मास्टर बन सकते हैं।

Step 1: Elementor Installation and Basic Setup

Elementor के बारे में सब कुछ जान सकें, सब कुछ सीख सकें — इसके लिए मैं आपको इतनी आसान भाषा में समझाऊँगा कि पूरे इंटरनेट पर इस तरह का ब्लॉग कहीं भी नहीं मिलेगा।

तो यह है एक फ्रेश WordPress वेबसाइट, जिस पर मैंने अभी Astra Theme इंस्टॉल की हुई है। सबसे पहले हम Elementor का फ्री वर्ज़न यूज़ करना सीखेंगे और देखेंगे कि उसमें कौन-कौन से एलिमेंट्स या विजेट्स अवेलेबल हैं।

📌 Elementor Free Version Installation

Plugins → Add New Plugin में जाएँ। टॉप राइट कॉर्नर में Search Plugin Box में टाइप करें 👉 Elementor।
यहाँ आपको Elementor Website Builder दिखेगा। इसके 10 मिलियन से ज़्यादा Active Installations हैं और 4.5 स्टार रेटिंग है।

Install करके Activate करें। अब Elementor Free Version एक्टिवेट हो जाएगा।
Pages → Add New Page। यहाँ हम नया पेज ऐड करेंगे। उदाहरण: पेज का नाम रखें Home। फिर Publish क्लिक करें ताकि पेज लाइव हो जाए।
क्लिक करें Edit with Elementor। क्लिक करते ही Elementor स्क्रीन लोड हो जाएगी।
यह ब्लॉग थोड़ा लंबा है क्योंकि हम सब कुछ डिटेल में सीखेंगे।
जल्दीबाज़ी मत कीजिए — अगर आप वाकई सीखने के इरादे से यह ब्लॉग देख रहे हैं, तो आपका टाइम वेस्ट नहीं होगा।
लेफ्ट साइड पर कई सारे Elements (Widgets) दिख रहे हैं।
जैसे — Container, Grid, Heading Element, Image, Text Editor आदि। इसके अलावा और भी एलिमेंट्स हैं, और नीचे Pro Elements दिखेंगे जो केवल Elementor Pro Version में उपलब्ध हैं।

💡 Notes:

"Get Elementor Pro" ऑप्शन अभी हमें ज़रूरी नहीं है, पहले फ्री वर्ज़न सीखते हैं।
Pages → Add New Page → Publish → Edit with Elementor स्टेप्स को फॉलो करें।
लेफ्ट साइड Elements पैनल में सभी बेसिक एलिमेंट्स मिलेंगे।
फ्री वर्ज़न में भी Container, Grid, Heading, Image, Text Editor जैसी चीज़ें पूरी तरह इस्तेमाल कर सकते हैं।

Elementor Free Flexbox Layout की शुरुआत

Visual guide to Elementor Pro and Free elements - Showing Flexbox layout selection, lock icons on pro features, and premium interface in Hindi tutorial

Step 2: Flexbox Layout Setup

मतलब अगर आप Elementor का फ्री वर्ज़न यूज़ करोगे, तो आप सिर्फ फ्री एलिमेंट्स को ही यूज़ कर पाओगे। अभी हम Elementor का फ्री वर्ज़न ही यूज़ कर रहे हैं, इसलिए कुछ एलिमेंट्स के सामने लॉक सिंबल लगा हुआ है।

अगर मैं किसी Pro एलिमेंट पर क्लिक करता हूँ, तो यह मैसेज दिखाता है — "Upgrade to Pro"।
तो फिलहाल हमें Pro एलिमेंट्स का इस्तेमाल नहीं करना है। हम केवल फ्री एलिमेंट्स को यूज़ करके सीखेंगे कि Elementor कैसे काम करता है।

अब ज़रा ध्यान से देखिए — दाईं तरफ जो एरिया आपको दिखाई दे रहा है, वो असल में आपका Page Area (Page Canvas) है।
आप जो भी डिज़ाइन करेंगे, जो भी एलिमेंट्स यहाँ पर रखेंगे, वो सब इसी एरिया में दिखाई देंगे।

अब सवाल ये है कि शुरुआत कैसे करनी होती है?
तो शुरुआत हमें करनी होती है प्लस (+) बटन पर क्लिक करके। जैसे ही आप इस पर क्लिक करेंगे, एक ऑप्शन आएगा — "Which Layout would you like to use?"
यहाँ दो लेआउट ऑप्शन दिए होते हैं —
👉 Flexbox
👉 Grid

हम Grid को बाद में समझेंगे, पहले हम Flexbox को समझते हैं।

Flexbox दरअसल एक तरह का Base Structure होता है। जैसे मान लीजिए यह एक टेबल है — टेबल का जो टॉप हिस्सा है, वही हमारा बेस है। मैं इस बेस पर माइक रख सकता हूँ, माउस रख सकता हूँ, पेन रख सकता हूँ। अगर यह बेस ही न हो, तो मैं कोई भी चीज़ इस पर रख नहीं पाऊँगा।

इसी तरह Elementor में Flexbox भी आपको एक बेस देता है, जिस पर आप अपने सभी एलिमेंट्स जैसे Heading, Image, Button या कोई भी विजेट रख सकते हैं।

अब हम Flexbox वाले ऑप्शन पर क्लिक करेंगे। जैसे ही आप क्लिक करते हैं, यह आपसे पूछेगा — "आपका जो बेस है, उसका स्ट्रक्चर कैसा होना चाहिए?"

यहाँ कई स्ट्रक्चर दिए होते हैं —

Single column structure
Multiple column structures
Pre-designed layouts

Step 3: Direction और Styling Settings

Direction

अगर आप "Row" चुनते हैं, तो एलिमेंट्स एक लाइन में, यानी लेफ्ट से राइट की तरफ आते हैं। और अगर आप "Column" चुनते हैं, तो एलिमेंट्स ऊपर से नीचे, यानी टॉप से बॉटम की दिशा में लगते हैं। यह Direction ऑप्शन आपको कंटेनर के अंदर एलिमेंट्स की पोज़िशन और फ्लो कंट्रोल करने की पूरी आज़ादी देता है।

अभी हमारे कंटेनर की Direction "Vertical" है। इसका मतलब यह है कि जो भी एलिमेंट्स आप इस कंटेनर के अंदर डालेंगे, वे अपने आप ऊपर से नीचे अरेंज होंगे। अगर आप Direction को Horizontal (Row) में बदलते हैं, तो एलिमेंट्स लेफ्ट से राइट अरेंज हो जाते हैं। उदाहरण के लिए, "Heading One" लेफ्ट में, "Heading Two" बीच में और एक बटन राइट में आ जाएगा।

Justify Content

Justify Content यह तय करता है कि आपके एलिमेंट्स कंटेनर में Horizontally कहां दिखाई देंगे। इसके कुछ मुख्य विकल्प हैं — Start (लेफ्ट साइड से), Center (सेंटर में), End (राइट साइड से), Space Between, Space Around और Space Evenly। डिफ़ॉल्ट रूप से यह "Start" पर होता है।

अगर आप चाहते हैं कि आपका कंटेंट सेंटर या राइट में दिखे, तो ये सेटिंग्स बहुत काम आती हैं।

Align Items

Align Items यह तय करता है कि कंटेनर के अंदर एलिमेंट्स Vertically यानी ऊपर-नीचे कहां पोज़िशन होंगे। अगर आपने Minimum Height 500px रखी है और दो हेडिंग्स डाली हैं, तो डिफ़ॉल्ट रूप से वे टॉप पर दिखेंगी। लेकिन अगर आप चाहते हैं कि वे कंटेनर के बीच में आएं, तो "Center" चुनिए। नीचे लाने के लिए "End" और पूरे कंटेनर में फैलाने के लिए "Stretch" का इस्तेमाल करें।

अगर आप चाहते हैं कि कंटेंट बिल्कुल सेंटर पॉइंट पर दिखे — Horizontally और Vertically दोनों — तो "Justify Content" और "Align Items" दोनों को Center पर सेट करें।

Background Type

Background Type में आप कंटेनर का बैकग्राउंड सेट कर सकते हैं। इसमें चार विकल्प होते हैं — Classic, Gradient, Video, और Slideshow। Classic में आप सॉलिड कलर या इमेज लगा सकते हैं, Gradient में दो रंगों का मिक्सचर बना सकते हैं, Video में YouTube लिंक से बैकग्राउंड वीडियो लगा सकते हैं, और Slideshow में कई इमेजेस को स्लाइड के रूप में दिखा सकते हैं।

ज्यादातर लोग Classic या Gradient का इस्तेमाल करते हैं क्योंकि ये हल्के और प्रोफेशनल दिखते हैं।

Background Overlay

Background Overlay का इस्तेमाल बैकग्राउंड इमेज के ऊपर कलर या इफेक्ट डालने के लिए होता है। इससे इमेज में Depth और Contrast आता है। Overlay के अंदर आप कलर, Pattern या Texture भी जोड़ सकते हैं। Opacity से आप ओवरले की डार्कनेस या ट्रांसपेरेंसी कंट्रोल कर सकते हैं।

Borders

Borders से आप कंटेनर के चारों ओर लाइन या आउटलाइन बना सकते हैं। आप इसका कलर, Width और Style (जैसे Solid, Dotted, Dashed) चुन सकते हैं। अगर कोनों को गोल बनाना चाहते हैं तो "Border Radius" बढ़ाएं। जैसे 20px देने पर कोने गोल और 50px देने पर पूरी तरह राउंड दिखेंगे।

Box Shadow

Box Shadow से आप कंटेनर के चारों ओर हल्की छाया (Shadow) बना सकते हैं। इससे डिजाइन में Depth और 3D लुक आता है। Box Shadow वेबसाइट को प्रोफेशनल और विज़ुअली बैलेंस्ड दिखाता है।

🎥 वीडियो ट्यूटोरियल देखें

Elementor Master Class की पूरी वीडियो सीरीज हमारे YouTube चैनल पर उपलब्ध है

📺 YouTube चैनल देखें

Advanced Tab (Margin, Padding, Motion Effects, Transform, Responsive)

Step 4: Advanced Tab Settings

Margin

Margin का मतलब होता है किसी एलिमेंट के बाहर का स्पेस। अगर आपके पास दो कंटेनर हैं और उनके बीच कोई गैप नहीं है, तो ऊपर वाले कंटेनर का Bottom Margin बढ़ाकर उनके बीच एक्स्ट्रा स्पेस बनाया जा सकता है। ध्यान रखें — Margin की वैल्यू बदलते समय "Link Values Together" आइकन को अनचेक करें, ताकि चारों साइड की वैल्यू एक साथ न बढ़े।

Padding

Padding एलिमेंट के अंदर का स्पेस होता है। अगर आप कंटेनर के अंदर कंटेंट को थोड़ा जगह देना चाहते हैं, तो Padding बढ़ाएं। जैसे Bottom Padding बढ़ाने पर कंटेनर के अंदर की चीज़ें ऊपर चली जाती हैं क्योंकि अंदर का गैप बढ़ गया। सरल शब्दों में याद रखें — Margin = Outer Space और Padding = Inner Space।

Motion Effects

Motion Effects की मदद से आप किसी कंटेनर में एनिमेशन जोड़ सकते हैं। "Entrance Animation" ऑप्शन के तहत आप Fade In, Slide In, Bounce In, Zoom In जैसे इफेक्ट्स चुन सकते हैं। उदाहरण के लिए, "Fade In" पर कंटेनर स्मूदली दिखाई देगा, जबकि "Bounce In" पर कंटेनर उछलते हुए एंटर करेगा। ये इफेक्ट्स पेज को और प्रोफेशनल लुक देते हैं।

Transform

Transform एक एडवांस ऑप्शन है जो कंटेनर की पोजीशन और शेप को बदलने देता है। इसकी मदद से आप किसी भी एलिमेंट को Rotate, Scale या Skew कर सकते हैं।

Rotate

Rotate से आप कंटेनर को किसी भी एंगल पर घुमा सकते हैं। पेंसिल आइकन पर क्लिक करें और नीचे दिए स्लाइडर से डिग्री एडजस्ट करें। उदाहरण के लिए, अगर आप इसे 45° तक घुमाते हैं, तो पूरा कंटेनर थोड़ा टिल्टेड दिखेगा।

Scale

Scale का मतलब होता है किसी एलिमेंट का साइज छोटा या बड़ा करना। स्लाइडर को घटाने पर कंटेनर छोटा दिखाई देगा और बढ़ाने पर बड़ा। इसका उपयोग सटीक साइज एडजस्टमेंट के लिए किया जाता है।

Skew

Skew का उपयोग किसी कंटेनर को थोड़ा तिरछा (angled) दिखाने के लिए किया जाता है। आप X-axis या Y-axis पर वैल्यू बढ़ाकर यह इफेक्ट देख सकते हैं। यह डिज़ाइन को एक यूनिक विज़ुअल अपील देता है।

Responsive Settings

Responsive Settings का उपयोग वेबसाइट को मोबाइल, टैबलेट और डेस्कटॉप पर सही ढंग से दिखाने के लिए किया जाता है। Elementor में आप हर डिवाइस के लिए अलग-अलग Margin, Padding और Font Size सेट कर सकते हैं ताकि वेबसाइट हर स्क्रीन साइज पर परफेक्ट दिखे।

तो अब तक आपने सीखा — Layout, Style और Advanced Tabs की सभी बेसिक से लेकर एडवांस सेटिंग्स। अब आप किसी भी कंटेनर को पूरी तरह Design, Align और Animate करना जानते हैं।

Step 5: Responsive & Inner Containers

Responsive Visibility

Responsive Settings की मदद से आप किसी भी एलिमेंट — जैसे कंटेनर, हेडिंग या इमेज — की विज़िबिलिटी को अलग-अलग डिवाइस के हिसाब से कंट्रोल कर सकते हैं।

मान लीजिए आप चाहते हैं कि कोई कंटेनर सिर्फ Desktop पर दिखे लेकिन Mobile पर न दिखे, तो:

उस कंटेनर की सेटिंग ओपन करें।
Advanced Tab में जाएं।
नीचे स्क्रॉल करें जब तक कि "Responsive" सेक्शन न आ जाए।
यहां आपको तीन ऑप्शन मिलेंगे — Hide on Desktop, Hide on Tablet, और Hide on Mobile।
अगर आप कंटेनर को मोबाइल पर हाइड करना चाहते हैं, तो "Hide on Mobile" को Enable कर दें।

अब जब कोई यूज़र आपकी वेबसाइट को मोबाइल पर खोलेगा, तो वह कंटेनर वहाँ Hidden रहेगा। लेकिन Desktop और Tablet पर वह नॉर्मली दिखाई देगा।

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

इस तरह Responsive Settings की मदद से आप हर डिवाइस के लिए अपनी वेबसाइट को क्लीन, ऑप्टिमाइज़ और यूज़र-फ्रेंडली बना सकते हैं।

Inner Container

Inner Container का मतलब होता है — किसी Main Container के अंदर एक या एक से ज्यादा छोटे कंटेनर बनाना। ये छोटे सेक्शन आपकी वेबसाइट को बेहतर स्ट्रक्चर देने में मदद करते हैं।

सबसे पहले अपने Main Container के अंदर "+" आइकन पर क्लिक करें।
अब लेफ्ट साइड पैनल से "Container" विजेट को ड्रैग करें और उसे Main Container के अंदर ड्रॉप करें।

बस! अब आपके पास एक Inner Container तैयार है। इसे आप अलग-अलग स्टाइल में डिज़ाइन कर सकते हैं। अगर आपको और Inner Containers की ज़रूरत है, तो फिर से "+" पर क्लिक करें और एक नया कंटेनर जोड़ लें।

Outer Container यानी जो सबसे बाहर वाला कंटेनर है, उसके अंदर बने ये Inner Containers, आपके सेक्शन्स या कॉलम्स की तरह काम करते हैं। इससे आप लेआउट को और फ्लेक्सिबल बना सकते हैं।

Editing Inner Container

अगर आप किसी Inner Container की सेटिंग बदलना चाहते हैं, तो बस उस पर क्लिक करें। लेफ्ट साइड में उसी कंटेनर का पूरा सेटिंग पैनल खुल जाएगा — जहाँ से आप Layout, Style, और Advanced तीनों टैब कस्टमाइज़ कर सकते हैं।

Summary

अब आपने समझ लिया:

Motion Effects कैसे लगाते हैं,
Transform से कंटेनर को कैसे घुमाते या स्केल करते हैं,
Responsive Settings से मोबाइल या डेस्कटॉप व्यू कैसे कंट्रोल करते हैं,
और Inner Containers कैसे काम करते हैं।

अब आप Elementor में Containers के साथ एक प्रोफेशनल और Responsive Layout डिज़ाइन करने के लिए पूरी तरह तैयार हैं। 🚀

Step 6: Inner Containers Colors & Grid Layout

Elementor Inner Containers and Color Settings - How to set background colors in outer container and inner containers, Hindi tutorial guide

Inner Container Settings

यह जो ग्रे कलर का बॉक्स आपको दिखाई दे रहा है ना — जब आप इस पर क्लिक करेंगे, तो Inner Container की सेटिंग लेफ्ट साइड में ओपन हो जाएगी।

अगर आपको ऊपर वाले कंटेनर की सेटिंग ओपन करनी है, तो बस उस पर क्लिक कीजिए — अब जो सेटिंग खुली है, वो सिर्फ ऊपर वाले कंटेनर की है।

Background Color Setup

हम चाहें तो ऊपर वाले कंटेनर के Background में कोई कलर सेट कर सकते हैं।

ऊपर वाले कंटेनर को सेलेक्ट कीजिए।
Style Tab में जाएं।
Background Type में जाकर एक कलर चुनिए।

अब नीचे वाले कंटेनर की स्टाइल में जाकर एक दूसरा कलर सेट करें — उदाहरण के लिए, नीचे वाले को Blue कर देते हैं।

और अगर बाहर वाले कंटेनर (Outer Container) का कलर Green कर दें, तो तीनों में फर्क साफ दिखाई देगा —

Green = Outer Container
Blue = First Inner Container
Pink = Second Inner Container

Horizontal Layout

अगर आप चाहते हैं कि दोनों Inner Containers Side-by-Side यानी हॉरिजॉन्टल दिशा में दिखाई दें, तो:

Outer Container की सेटिंग ओपन करें।
Layout Tab में जाएं।
Direction को Horizontal (Row) पर सेट करें।

बस — दोनों कंटेनर अब अगल-बगल दिखने लगेंगे।

Add New Container

अगर आपको एक और कंटेनर जोड़ना है, तो आपके पास दो तरीके हैं:

मौजूदा कंटेनर को Duplicate करें, या
"Add New Container" पर क्लिक करके एक नया कंटेनर जोड़ें।

उसे थोड़ा Pinkish कलर दे दीजिए ताकि फर्क साफ समझ में आए।

अब "Publish" पर क्लिक करें — और आपके सारे बदलाव सेव हो जाएंगे।

Understanding Containers

अब आप समझ चुके हैं कि कंटेनर क्या होता है और कैसे यूज़ किया जाता है।

अगर अब भी कोई डाउट या सवाल है, तो आप Comment Section में पूछ सकते हैं। और अगर वीडियो पसंद आया हो, तो प्लीज़ Like और Subscribe ज़रूर करें। 😊

Step 7: Introduction to Grid

अब आगे बढ़ते हैं और समझते हैं — Grid क्या होती है?

हमने Flexbox समझ लिया, अब बारी है Grid की।

Adding a Grid

"+" बटन पर क्लिक करें।
Flexbox चुनें और एक स्ट्रक्चर सिलेक्ट करें।
अब फिर से "+" पर क्लिक करें।
लेफ्ट साइड से "Grid" एलिमेंट को ड्रैग करें और अपने पेज पर ड्रॉप करें।

Understanding Grid Layout

Grid का मतलब होता है — एक व्यवस्थित बॉक्स लेआउट। आपको कई छोटे बॉक्स दिखाई देंगे — 1, 2, 3, 4, 5, 6। हर बॉक्स में आप कोई भी एलिमेंट रख सकते हैं।

पहले बॉक्स में Image Element डालें।
दूसरे बॉक्स में Button Element डालें।
तीसरे बॉक्स में Video Element डालें।

अब छठे बॉक्स तक पहुँचते-पहुँचते एक Grid Layout तैयार हो गया — इसमें 2 Rows × 3 Columns हैं।

Edit Grid

अगर आप कॉलम्स या रोज़ की संख्या बदलना चाहते हैं, तो:

Grid आइकॉन पर Right Click करें।
"Edit Grid" चुनें।
लेफ्ट साइड सेटिंग में जाकर Columns या Rows बढ़ाएं या घटाएं।

उदाहरण के लिए, 3 कॉलम्स को बढ़ाकर 4 या 5 कर सकते हैं, या 2 रोज़ को घटाकर 1 कर सकते हैं।

Purpose of Grid

Grid का काम है कंटेंट को एक Structured Layout में व्यवस्थित करना। हर बॉक्स में आप अलग-अलग टाइप का कंटेंट रख सकते हैं — Text, Image, Video, या Button।

Next Step – Heading Element

अब बढ़ते हैं अगले एलिमेंट की ओर — जो है Heading Element।

सारे पुराने एलिमेंट्स डिलीट कर दीजिए और एक नया Flexbox Structure लीजिए। फिर "+" पर क्लिक करें और लिस्ट में से Heading Element ड्रैग करके डाल दीजिए।

Heading Element का काम है — आपके वेब पेज या ब्लॉग में हेडिंग्स बनाना। जैसे ही आप हेडिंग डालते हैं, बाईं तरफ उसकी सेटिंग्स खुल जाती हैं। अगर नहीं खुली, तो हेडिंग पर क्लिक करें → Pencil Icon पर क्लिक करें → "Edit Heading" से सेटिंग खोलें।

Step 8: Typography, Text Settings, Button, Image & Video Elements

अब इसमें तीन टैब होते हैं — Content, Style, और Advanced।

📝 Content Tab

जो भी टेक्स्ट आप यहाँ बॉक्स में लिखेंगे, वो आपकी हेडिंग बन जाएगा। जैसे लिखते हैं — I have a Digital Marketing Business — तो वो पेज पर वैसे ही दिखेगा। आप चाहें तो यहाँ से एडिट करें या सीधे हेडिंग टेक्स्ट पर क्लिक करके भी बदल सकते हैं।

नीचे Link का ऑप्शन दिया है — अगर आप चाहते हैं कि हेडिंग पर क्लिक करने से कोई वेबसाइट खुले, तो उसका URL यहाँ डालिए। जैसे https://google.com डालेंगे, तो हेडिंग पर क्लिक करते ही Google ओपन हो जाएगा। अगर लिंक नहीं चाहिए — तो बॉक्स खाली छोड़ दीजिए।

HTML Tag में आप H1 से लेकर H6 तक टैग्स चुन सकते हैं। ये SEO और हेडिंग स्ट्रक्चर के लिए होते हैं — आमतौर पर H2 ठीक रहता है।

🎨 Style Tab

यहाँ हेडिंग की Alignment, Color और Typography की सेटिंग्स होती हैं। Alignment में हेडिंग को Left, Center, Right या Justify कर सकते हैं (अभी Center चुनते हैं)।

Color में आप हेडिंग का कलर बदल सकते हैं — जैसे Pink या Blue।

Typography

Font Family: जैसे "Poppins" चुन लें।
Size: 60px रखें ताकि टेक्स्ट बड़ा दिखे।
Weight: 700 या 900 रखें ताकि Bold दिखे।

✨ Text Decoration

Decoration में आप ये ऑप्शन चुन सकते हैं:

Underline: नीचे लाइन बनती है।
Overline: ऊपर लाइन आती है।
Line Through: टेक्स्ट पर कट लाइन आती है।
None: कोई डेकोरेशन नहीं।

🔠 Letter & Word Spacing

Letter Spacing: हर अक्षर के बीच का गैप कंट्रोल करता है। Word Spacing: हर शब्द के बीच का गैप कंट्रोल करता है।

💫 Text Shadow & Stroke

Text Shadow से आप शैडो जोड़ सकते हैं — Blur, Color और Transparency कंट्रोल कर सकते हैं। Text Stroke ज़्यादातर मामलों में ज़रूरी नहीं होता।

⚙️ Advanced Settings (Margin & Padding)

अगर टेक्स्ट के चारों ओर एक्स्ट्रा स्पेस चाहिए — Left Margin या Bottom Margin बढ़ाएँ। Padding हेडिंग एलिमेंट में ज़्यादा काम नहीं करती।

🎬 Motion & Transform Effects

Entrance Animation जैसे "Zoom In Left" लगाने से हेडिंग एंट्री पर एनिमेशन के साथ दिखेगी।

🧠 Heading vs Text Editor Difference

Heading Element सिर्फ टाइटल या हेडिंग के लिए होता है, जबकि Text Editor लंबा पैराग्राफ़ लिखने के लिए।

किसी शब्द को लिंक में बदल सकते हैं।
Bold, Italic, Underline लगा सकते हैं।

Example: "Websoft Global" को लिंक बनाना है → उसे सेलेक्ट करें → "Insert Link" क्लिक करें → URL डालें।

🔘 Button Element

Button Element से बटन जोड़ा जाता है। डिफ़ॉल्ट टेक्स्ट "Click Here" होता है — इसे बदलकर "Get a Quote" कर सकते हैं। आप बटन में Icon जोड़ सकते हैं और उसकी Position (Left/Right) सेट कर सकते हैं।

🧱 Normal vs Hover State

Normal: Background White, Text Black
Hover: Background Black, Text White

Hover Animation जैसे "Shrink" भी जोड़ सकते हैं।

🔲 Border & Padding in Button

Border Radius: कॉर्नर को राउंड करने के लिए।
Padding: टेक्स्ट और बॉर्डर के बीच स्पेस बढ़ाने के लिए।

🖼️ Image Element

Image Element से आप वेबसाइट पर कोई भी इमेज दिखा सकते हैं। "Choose Image" → मीडिया लाइब्रेरी या नई इमेज अपलोड करें।

Width / Height कंट्रोल करें।
Max Width सेट करें ताकि इमेज उससे बड़ी न हो।
Border (Solid, Dotted, Double आदि) लगा सकते हैं।
Border Radius से कॉर्नर राउंड करें।
Opacity या Hover Effect सेट करें।

🎥 Video Element

Video Element से आप YouTube, Vimeo, या Dailymotion वीडियो दिखा सकते हैं, या Self Hosted वीडियो अपलोड कर सकते हैं। बस वीडियो लिंक डालें — और वीडियो एम्बेड हो जाएगा।

आप चाहें तो Custom Thumbnail (Image Overlay) भी सेट कर सकते हैं।

🛠️ 50+ फ्री वेब डेवलपमेंट टूल्स

CodePress Academy पर 50 से ज्यादा फ्री वेब डेवलपमेंट टूल्स उपलब्ध हैं

🔧 टूल्स देखें

❓ Frequently Asked Questions

Elementor Free vs Pro में क्या difference है?

Elementor Free में basic widgets और features मिलते हैं जबकि Pro version में 50+ additional widgets, theme builder, popup builder, और advanced features include हैं।

क्या Elementor website को slow करता है?

Proper optimization के साथ Elementor fast websites बना सकता है। हमारे WordPress Speed Optimization Guide देखें।

Elementor के साथ best theme कौन सा है?

Astra Theme Elementor के साथ सबसे अच्छा work करता है क्योंकि यह lightweight और fully compatible है।

क्या मैं Elementor के साथ e-commerce website बना सकता हूँ?

हाँ! Elementor WooCommerce के साथ fully compatible है और आप professional e-commerce stores बना सकते हैं।

📱 Responsive Design के लिए महत्वपूर्ण टिप्स

हर एलिमेंट की Responsive Settings चेक करें
Mobile और Tablet व्यू में डिजाइन टेस्ट करें
जरूरत पड़ने पर Hide on Mobile/Tablet का उपयोग करें
Font sizes और spacing को डिवाइस के अनुसार एडजस्ट करें
Mobile-first approach use करें
Touch-friendly button sizes (minimum 44px)

🚀 CodePress Academy से जुड़ें

Web Development और WordPress के लिए और भी ट्यूटोरियल्स और टूल्स के लिए

🌐 Web Development 📝 WordPress Tutorials 📺 YouTube Channel

Master WordPress & Web Development

50+ Free Tools for Developers

Blogging & SEO Mastery

Elementor WordPress Tutorial for Beginners | Elementor Tips and Tricks