लैंडिंग पेज बिल्डर के साथ GrapesJS

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

स्टॉक GrapesJS डेमो: ब्लॉक पैलेट, कैनवास, स्टाइल मैनेजर और लेयर ट्री। यहां दिखाई देने वाली हर चीज ओपन-सोर्स कोर में शिप होती है।

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

GrapesJS आपको विज़ुअल एडिटिंग फाउंडेशन देता है ताकि आपकी टीम अपने आसपास के उत्पाद पर ध्यान केंद्रित कर सके।

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

• कैंवस — GrapesJS कोर
• खींचें और छोड़ें — GrapesJS कोर
• अवयव — GrapesJS कोर
• ब्लॉक — GrapesJS कोर
• लेयरिंग — GrapesJS कोर
• शैली प्रबंधक — GrapesJS कोर
• उत्तरदायी संपादन — GrapesJS कोर
• पूर्ववत करें / फिर से करें — GrapesJS कोर
• संपत्ति — GrapesJS कोर
• क्रमबद्धता — GrapesJS कोर
• आदेश — GrapesJS कोर
• प्लगइन आर्किटेक्चर — GrapesJS कोर
• अनुभाग पुस्तकालय — प्लगइन्स
• टेम्पलेट्स — प्लगइन्स
• प्रपत्र घटक — प्लगइन्स
• SEO नियंत्रण — आपका आवेदन
• प्रकाशन-व्‍यवसाय — आपका आवेदन
• विश्लेषण (Analytics) — आपका आवेदन
• प्रयोगों — आपका आवेदन

GrapesJS संपादन इंजन को कवर करता है। प्लगइन्स लैंडिंग-पेज-विशिष्ट सतहों को कवर करते हैं। अंतिम लेन में सब कुछ वह है जहां आपका उत्पाद वास्तव में हर किसी से अलग है।

एक लैंडिंग पेज बिल्डर एक विज़ुअल एडिटर है जो उपयोगकर्ताओं को हर HTML तत्व और CSS नियम को हाथ से लिखे बिना अभियान पृष्ठ बनाने देता है।

यह एक विशेषता नहीं है। एक लैंडिंग पेज बिल्डर एक एडिटर प्लस ब्लॉक प्लस टेम्प्लेट प्लस फॉर्म प्लस SEO प्लस एनालिटिक्स प्लस एक्सपेरिमेंट प्लस पब्लिशिंग - और उनमें से प्रत्येक इस बारे में निर्णय है कि किसका मालिक है।

व्यवहार में, एक आधुनिक लैंडिंग पेज बिल्डर से निम्नलिखित सभी प्रदान करने की अपेक्षा की जाती है:

GrapesJS दृश्य संपादन परत प्रदान करता है। आपका एप्लिकेशन बैकएंड, डेटा, प्रमाणीकरण और प्रकाशन वर्कफ़्लो को नियंत्रित करता है।

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

• Hero

  शीर्षक, उपशीर्षक और कार्रवाई के लिए प्राथमिक कॉल।

• सुविधाऐं

  आइकन के साथ दो से चार लाभ कॉलम।

• लोगो बादल

  सामाजिक प्रमाण के रूप में ग्राहक या एकीकरण लोगो।

• प्रशंसापत्र

  रूपांतरण बिंदु के पास उद्धरण, नाम और अवतार।

• मूल्य निर्धारण

  एक अनुशंसित कॉलम के साथ स्तरीय योजनाएं।

• तुलनात्‍मक मूल्‍यांकन

  विकल्प के खिलाफ फ़ीचर टेबल आगंतुक वजन कर रहा है।

• FAQ

  आगंतुक के अपने शब्दों में आपत्ति से निपटना।

• संपर्क फ़ॉर्म

  लीड कैप्चर सतह, आपके API पर पोस्ट करना।

• न्यूज़ लैटर

  एकल-फ़ील्ड सदस्यता लें, उस आगंतुक के लिए जो अभी तक तैयार नहीं है।

• कार्यवाई के लिए बुलावा

  बार-बार पूछना, पृष्ठ के निचले भाग में।

• पाद लेख

  नेविगेशन, कानूनी और विश्वास संकेत।

कैप्चर सतह के बिना एक लैंडिंग पृष्ठ एक ब्रोशर है। प्रपत्र घटक एक संपादक चिंता है; सबमिट बटन के बाद सब कुछ आपका है।

// The form component is editor-side. The submission is yours.
// Never let the published page post straight to a third party you do not
// control — route it through your own endpoint so you keep the lead.

app.post('/api/leads', async (req, res) => {
  const parsed = leadSchema.safeParse(req.body);     // validate server-side
  if (!parsed.success) return res.status(422).json({ error: 'invalid' });

  await rateLimit(req.ip);                            // forms get abused
  const lead = await db.leads.create({
    data: { ...parsed.data, pageSlug: req.body.pageSlug, utm: pickUtm(req.body) },
  });

  await crm.upsertContact(lead);                      // your CRM, your rules
  res.json({ ok: true });
});

Plugin Forms

संपादन योग्य प्रपत्र घटक उपयोगकर्ता किसी पृष्ठ पर जा सकते हैं और आपके समापन बिंदु पर इंगित कर सकते हैं.

निःशुल्कप्लगइन देखें

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

1. 01Editor

   निर्माण

   संपादक में पृष्ठ को डुप्लिकेट करें और एक चीज़ बदलें - शीर्षक, ऑफ़र, फ़ॉर्म की लंबाई।

   ↓→
2. 02आपका ऐप

   प्रकाशित करना

   दोनों प्रकार एक ही स्लग पर प्रकाशित होते हैं, जिसका वजन आपका एप्लिकेशन तय करता है।

   ↓→
3. 03आपका ऐप

   माप

   एक बार एक विज़िटर असाइन करें, असाइनमेंट जारी रखें और अपने रूपांतरण ईवेंट के साथ इसकी रिपोर्ट करें।

   ↓→
4. 04आपका ऐप

   सुधार

   विजेता को डिफ़ॉल्ट रूप से प्रचारित करें और उससे अगला परीक्षण शुरू करें।

GJS.Market कैटलॉग में कोई A/B परीक्षण प्लगइन नहीं है, और GrapesJS में कोई प्रयोग सुविधा नहीं है। यह आपके एप्लिकेशन में लागू करने के लिए एक पैटर्न है, इंस्टॉल करने के लिए उत्पाद नहीं - और एक पेज बिल्डर ही इसे सस्ता बनाता है।

// A/B testing is an application concern, not an editor feature.
// A landing page builder makes it cheap because a variant is just
// another project row pointing at the same slug.

const variants = await db.pageVariants.findMany({
  where: { slug, status: 'running' },
});

// Assign once, persist the choice, and report it to your analytics.
const variant = pickWeighted(variants, hash(visitorId));
res.setHeader('Set-Cookie', `exp_${slug}=${variant.id}; Path=/; Max-Age=2592000`);
res.setHeader('Vary', 'Cookie');   // or the page will be cached for everyone

return renderPublishedPage(variant);

आपको अपने पेज बिल्डर के अंदर एक एनालिटिक्स प्लेटफॉर्म बनाने की आवश्यकता नहीं है। आपको उन घटनाओं को उत्सर्जित करने के लिए प्रकाशित पृष्ठों की आवश्यकता है जिन्हें आपका मौजूदा स्टैक पहले से ही समझता है।

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

Grapesjs GA

तार Google Analytics संपादक में निर्मित पृष्ठों में।

निःशुल्कप्लगइन देखें

वही चौदह क्षमताएं, दो बार पढ़ें। बाईं ओर, प्रत्येक पंक्ति एक परियोजना है। दाईं ओर, उनमें से अधिकांश कॉन्फ़िगरेशन हैं - और जो तीन नहीं हैं उन्हें ईमानदारी से लेबल किया गया है।

GrapesJS दस्तावेज़ीकरण और GJS.Market कैटलॉग के विरुद्ध 2026-09-03 के विरुद्ध सत्यापित। "एक्स्टेंसिबल" का अर्थ है कि इसके लिए API और मौजूदा प्लगइन्स हैं; "इंटीग्रेट" का अर्थ है कि संपादक जानबूझकर ऐसा नहीं करता है और आपके एप्लिकेशन को ऐसा करना चाहिए।

संपादक इंजन के लिए GrapesJS का उपयोग करें। अपने व्यवसाय के लिए विशिष्ट हर चीज़ के लिए अपने स्वयं के एप्लिकेशन का उपयोग करें।

GJS.Market कैटलॉग से वास्तविक लिस्टिंग, चार क्षमता क्षेत्रों द्वारा समूहीकृत की जाती है जहां से एक लैंडिंग पेज बिल्डर को इकट्ठा किया जाता है। कीमतें और उपलब्धता निर्माण समय पर कैटलॉग से पढ़ी जाती है।

सामग्री और लेआउट

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

श्रेणी ब्राउज़ करें

Plugin Basic Blocks

आपके लैंडिंग पृष्ठ अनुभाग लाइब्रेरी के शीर्ष पर बनाने के लिए एक प्रारंभिक ब्लॉक सेट किया गया है।

निःशुल्कप्लगइन देखें

Plugin Blocky for Tailwind CSS

पूर्वनिर्मित Tailwind अनुभाग - नायक, सुविधाएँ, मूल्य निर्धारण - Tailwind पर पहले से ही टीमों के लिए।

US$59,00प्लगइन देखें

Super Header for GrapesJS

एक कॉन्फ़िगर करने योग्य हेडर अनुभाग, प्रत्येक अभियान पृष्ठ से शुरू होने वाले ब्लॉक अनुभाग।

US$39,00प्लगइन देखें

Super Footer for GrapesJS

नेविगेशन, कानूनी और विश्वास संकेतों के साथ एक कॉन्फ़िगर करने योग्य पाद लेख अनुभाग।

US$39,00प्लगइन देखें

Templates Manager

आपके बिल्डर को अभियान टेम्पलेट्स को सहेजने, सूचीबद्ध करने और फिर से खोलने के लिए कहीं देता है।

US$39,00प्लगइन देखें

Pages Manager

उन अभियानों के लिए बहु-पृष्ठ प्रोजेक्ट, जिन्हें एक से अधिक URL की आवश्यकता होती है.

US$25,00प्लगइन देखें

विपणन (मार्केटिंग)

कैप्चर, खोजने की क्षमता और माप: वे भाग जो किसी पृष्ठ को दस्तावेज़ के बजाय एक अभियान बनाते हैं।

श्रेणी ब्राउज़ करें

Plugin Forms

संपादन योग्य प्रपत्र घटक उपयोगकर्ता किसी पृष्ठ पर जा सकते हैं और आपके समापन बिंदु पर इंगित कर सकते हैं.

निःशुल्कप्लगइन देखें

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

इन-एडिटर एक्सेसिबिलिटी और SEO ऑडिटिंग, इसलिए प्रकाशित होने से पहले समस्याएं सामने आती हैं।

निःशुल्कप्लगइन देखें

Grapesjs GA

तार Google Analytics संपादक में निर्मित पृष्ठों में।

निःशुल्कप्लगइन देखें

Plugin Countdown

टाइम-बॉक्स ऑफ़र, लॉन्च और वेबिनार के लिए एक उलटी गिनती घटक।

निःशुल्कप्लगइन देखें

डिज़ाइन

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

श्रेणी ब्राउज़ करें

GrapesJS Swiper Slider

प्रशंसापत्र, लोगो क्लाउड और स्क्रीनशॉट गैलरी के लिए हिंडोला।

निःशुल्कप्लगइन देखें

Typed Text

hero सुर्खियों के लिए एनिमेटेड टाइपिंग, कैनवास में हाथ से लिखे जावास्क्रिप्ट के बिना।

निःशुल्कप्लगइन देखें

Grapesjs Style Easing

स्टाइल मैनेजर में नियंत्रण को आसान बनाना, उन संक्रमणों के लिए जो डिज़ाइन किए गए महसूस करते हैं।

निःशुल्कप्लगइन देखें

Custom Fonts

संपादक में ब्रांड टाइपोग्राफी, इसलिए एक बाज़ारिया जो देखता है वह वही है जो जहाज है।

निःशुल्कप्लगइन देखें

अवसरंचना

प्रोजेक्ट कहां रहता है, एसेट कैसे मिलता है, और पेज संपादक को कैसे छोड़ता है।

श्रेणी ब्राउज़ करें

Grapesjs Project Manager

प्रोजेक्ट लिस्टिंग और प्रबंधन — एकल संपादन सत्र के ऊपर की परत।

निःशुल्कप्लगइन देखें

Grapesjs Netlify

उन टीमों के लिए सीधे Netlify पर प्रकाशित करता है जो पहले दिन एक होस्टिंग लक्ष्य चाहते हैं।

निःशुल्कप्लगइन देखें

Export Zip

पृष्ठ को HTML, CSS और संपत्तियों के डाउनलोड करने योग्य संग्रह के रूप में निर्यात करता है।

निःशुल्कप्लगइन देखें

Grapesjs Cloudinary

स्थानीय अपलोड के बजाय Cloudinary के साथ परिसंपत्ति प्रबंधक का समर्थन करता है।

निःशुल्कप्लगइन देखें

तीन खरीदारी सूचियाँ, जो आप कैटलॉग श्रेणी के बजाय निर्माण कर रहे हैं, उसके आधार पर तैयार की गई हैं।

कीमतें निर्माण समय पर कैटलॉग से पढ़ी जाती हैं और बदल सकती हैं - उत्पाद पृष्ठ आधिकारिक है।

GrapesJS विज़ुअल एडिटिंग फाउंडेशन प्रदान करता है। GJS.Market प्लगइन्स आपको हर सुविधा को स्वयं बनाए बिना विशेष क्षमताएं जोड़ने देते हैं।

किसी उत्पाद के अंदर पेज बिल्डर डालना ज्यादातर संपादक की समस्या नहीं है। संपादक एक मार्ग है; बाकी इसके चारों ओर बहु-किरायेदार मशीनरी है।

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

// The editor is an authoring environment. Keep it out of the bundle
// that a visitor downloads to read a published landing page.

// /admin/editor — loaded only for authenticated authors.
const PageBuilder = dynamic(() => import('@/components/page-builder'), {
  ssr: false,                       // GrapesJS measures the DOM on init
  loading: () => <EditorSkeleton />,
});

// Heavy, optional plugins load when the panel that needs them opens.
async function openAssetManager(editor) {
  const { default: cloudinary } = await import('grapesjs-cloudinary');
  cloudinary(editor, { cloudName: process.env.NEXT_PUBLIC_CLOUDINARY });
  editor.runCommand('open-assets');
}

एक विज़ुअल बिल्डर ब्राउज़र से संरचित इनपुट स्वीकार करता है और इसे आपके द्वारा प्रदान किए जाने वाले मार्कअप में बदल देता है। नीचे दिया गया प्रत्येक आइटम उस एक वाक्य का अनुसरण करता है।

• APIs प्रमाणित करें

  लोड करें, सहेजें और प्रकाशित करें समापन बिंदु विशेषाधिकार प्राप्त हैं। उनके साथ ऐसा व्यवहार करें।

• प्रति क्रिया अनुमतियाँ मान्य करें

  किसी पृष्ठ को संपादित करने की अनुमति दिया जाना इसे प्रकाशित करने की अनुमति देने के समान नहीं है।

• अपलोड की गई एसेट की पुष्टि करें

  प्रकार, आकार और सामग्री सर्वर-साइड की जाँच करें, और उपयोगकर्ता अपलोड को उस मूल से परोसें जिसे आप अलग करना चाहते हैं।

• उपयोगकर्ता-जनित सामग्री को स्वच्छ करें

  जहां पृष्ठ लेखकों पर पूरी तरह से भरोसा नहीं किया जाता है, sanitize बाहर और साथ ही अंदर भी।

• प्रोजेक्ट डेटा को मान्य करें

  प्रोजेक्ट JSON आपके API पर पहुंचना अविश्वसनीय इनपुट है। इसे पार्स करें, इसे केवल स्टोर न करें।

• प्रकाशन समापन बिंदु को सुरक्षित रखें

  प्रकाशन से जनता जो देखती है उसे बदल जाता है। इसे दर-सीमित करें, इसे लॉग करें और इसे वापस लाने योग्य बनाएं।

• क्लाइंट-साइड स्थिति पर कभी भरोसा न करें

  संपादक जो कुछ भी भेजता है वह जाली हो सकता है। सर्वर पर स्वामित्व और सीमाएं पुनः प्राप्त करें।

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

तीन चरण, प्रत्येक शिप करने योग्य। गलती यह है कि किसी ने पहले से एक पृष्ठ प्रकाशित करने से पहले तीसरे तक पहुंचने की कोशिश की है।

1. 1चरण 1

   MVP

   एक व्यक्ति एक पृष्ठ बना और प्रकाशित कर सकता है।

   • दृश्य संपादक
   • बुनियादी ब्लॉक
   • टेम्पलेट्स
   • सरल भंडारण
   • प्रकाशन-व्‍यवसाय
   क्विकस्टार्ट देखें
2. 2चरण 2

   उत्पादन

   एक टीम कमरे में आपके बिना इस पर भरोसा कर सकती है।

   • प्रमाणीकरण
   • परियोजनाओं
   • संपत्ति प्रबंधन
   • कस्टम घटक
   • अनुमतियां
   • संस्करण
   • SEO
   • फार्म
   प्लगइन्स ब्राउज़ करें
3. 3चरण 3

   विपणन मंच

   बिल्डर कुछ ऐसा बन जाता है जिसे आप बेच सकते हैं।

   • ए/बी परीक्षण
   • विश्लेषण (Analytics)
   • टेम्पलेट लाइब्रेरी
   • अभियान प्रबंधन
   • टीमें
   • सफेद लेबल
   • बिलिंग
   SaaS पेज बिल्डर

पहले के बाद हर चरण एक उत्पाद निर्णय है, न कि संपादक का निर्णय - यही कारण है कि संपादक वह चीज नहीं होनी चाहिए जिसे आप अभी भी बना रहे हैं।