एलिमेंटर (फ्री टेम्पलेट) में जीएसएपी एनीमेशन कैसे जोड़ें

आप एलिमेंटर के अंदर पूर्ण जीएसएपी एनीमेशन चला सकते हैं स्प्लिट-टेक्स्ट से पता चलता है, क्षैतिज स्क्रॉल पिन किया गया, स्क्रॉल-स्क्रब लंबन, काउंटर, यह सब, बिना प्लगइन विकास और कोई फ़ंक्शन नहीं है।php संपादन, और आपके क्लाइंट हर शीर्षक और रंग को संपादित करने की चाल है विजेट बिल्डर मास्टर ऐडऑन में: अपने HTML, CSS और JS को एक बार पेस्ट करें, चिह्नित करें कि क्या संपादन योग्य होना चाहिए, और यह एक सामान्य एलिमेंटर विजेट बन जाता है जिसे कोई भी पेज पर छोड़ सकता है और पैनल से संपादित कर सकता है।

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

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

शुरू करने से पहले एक शॉर्टकट: यदि आप चाहते हैं कि गति छवियों की एक पंक्ति है जो चलती है, तो आपको जीएसएपी लिखने की बिल्कुल भी आवश्यकता नहीं हो सकती है हम पहले ही भेज दिए गए हैं 20 हिंडोला और स्लाइडर विजेट इसी तरह बनाया गया है जैसे एक साइड पैनल को 3डी में घुमाता है, एक स्टैक से कार्ड छीलता है, एक घुमावदार रिम 1 के चारों ओर अपनी स्लाइड चलाता है और प्रत्येक एक सामान्य एलिमेंटर विजेट के रूप में आयात करता है जिसे आप पैनल से संपादित करते हैं।

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

जीएसएपी एनीमेशन क्या है?

जीएसएपी (ग्रीनसॉक एनिमेशन प्लेटफॉर्म) एक जावास्क्रिप्ट एनीमेशन लाइब्रेरी है जो वेब पेज पर कुछ भी एनिमेट करती है जैसे कि टेक्स्ट, इमेज, एसवीजी, सीएसएस गुण [फ्रेम-सटीक समय और आसान नियंत्रण के साथ यह स्क्रॉल प्रभावों को शक्ति प्रदान करता है और टेक्स्ट से पता चलता है कि आप पुरस्कार विजेता साइटों पर देखते हैं, और संस्करण ३.१३ के बाद से स्क्रॉलट्रिगर और स्प्लिटटेक्स्ट जैसे प्रीमियम प्लगइन्स सहित पूरी लाइब्रेरी १००% मुफ्त है।

वह अंतिम भाग लोगों की तुलना में अधिक मायने रखता है स्प्लिटटेक्स्ट (प्लगइन जो व्यक्तिगत रूप से एनिमेटेड पात्रों में सुर्खियों को तोड़ता है) का उपयोग $ ९९ + प्रति वर्ष के पीछे किया जाता था “क्लब ग्रीनसॉक” पेवॉल वेबफ्लो के अधिग्रहण के बाद जीएसएपी, सब कुछ मुफ्त हो गया तो वर्डप्रेस उपयोगकर्ताओं के लिए एकमात्र वास्तविक बाधा एकीकरण है, और यह पोस्ट क्या हटाता है।

समस्या: एलिमेंट जीएसएपी नहीं बोलता है

एलिमेंटर के अंतर्निहित गति प्रभाव प्रवेश एनिमेशन, बुनियादी लंबन और माउस ट्रैकिंग को कवर करते हैं ८०% पृष्ठों के लिए अच्छा है लेकिन वे ऐसा नहीं कर सकतेः

• स्प्लिट-टेक्स्ट से पता चलता है कि प्रत्येक पात्र अपनी देरी से कहां एनिमेट करता है
• पिन किए गए अनुभाग जो क्षैतिज रूप से स्क्रॉल करते हैं जबकि पृष्ठ लंबवत रूप से स्क्रॉल करता है
• स्क्रॉल-स्क्रब एनीमेशन सटीक स्क्रॉल स्थिति (स्क्रॉलट्रिगर की विशेषता) से बंधा हुआ है
• जंजीर समयसीमा जहां एक एनीमेशन अगले करने के लिए बंद हाथ
• वेग-प्रतिक्रियाशील प्रभाव, जहां तत्व प्रतिक्रिया करते हैं कि आगंतुक कितनी तेजी से स्क्रॉल करता है

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

एलिमेंट में जीएसएपी एनीमेशन जोड़ने के ४ तरीके (तुलना)

प्रीसेट प्लगइन्स वास्तव में ठीक हैं यदि एक फीका-ऑन-स्क्रॉल आपको बस इतना चाहिए विजेट बिल्डर जीतता है जब आप एक एनीमेशन चाहते हैं जो किसी और के पास नहीं है, क्योंकि आपने (या एआई) इसे लिखा है आप कोड काम एक बार करते हैं, संपादन योग्य भागों को नियंत्रित करने के लिए तार करते हैं, और तब से यह किसी भी स्टॉक एलिमेंटर विजेट की तरह व्यवहार करता है: पाठ फ़ील्ड, रंग पिकर, लिंक नियंत्रण, बहुत।

निःशुल्क टेम्पलेट: 6 विजेट के रूप में एक पूर्ण जीएसएपी लैंडिंग पृष्ठ

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

डाउनलोड में छह विजेटः

1. हीरो 1 स्प्लिटटेक्स्ट चरित्र प्रकट, लंबन हीरे के आकार, बहती चमक के गोले, चुंबकीय बटन
2. मार्की अनंत टिकर जो विज़िटर के तेज़ी से स्क्रॉल करने पर तेज़ हो जाता है
3. कार्य गैलरी लाइव कार्ड काउंटर और वेग-आधारित कार्ड तिरछा के साथ पिन किया गया क्षैतिज स्क्रॉल
4. आँकड़े ऐसे काउंटरों को शामिल करें जो व्यूपोर्ट में प्रवेश करते समय शून्य से ऊपर उठते हैं
5. प्रक्रिया चार सहजता वक्र हैं जो वस्तुतः स्वयं को खींचते हैं, प्रत्येक अपनी स्वयं की जीएसएपी आसानी का उपयोग करते हुए
6. सीटीए एक चुंबकीय ईमेल बटन के साथ स्क्रॉल-ट्रिगर स्प्लिट-टेक्स्ट प्रकट होता है

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

मैंने हीरो विजेट कैसे बनाया, चरण दर चरण

यह वह भाग है जो सामान्यीकरण करता है कोई एनीमेशन आप कभी भी चाहेंगे हर बार एक ही सात कदम।

चरण १: एचटीएमएल, सीएसएस, और जेएस काम करने के साथ शुरू करें

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

चरण २: एक रैपर क्लास के लिए सब कुछ स्कोप करें

आपका विजेट अन्य विजेट, अन्य प्लगइन्स, अन्य सीएसएस के साथ पृष्ठों पर रहेगा पूरे अनुभाग को एक अद्वितीय वर्ग में लपेटें और प्रत्येक चयनकर्ता को इसे लटका देंः

<section class="ph-hero-wrap">
  ...
</section>

/* every rule starts with the wrapper */
.ph-hero-wrap .ph-title { font-size: clamp(3rem, 10.5vw, 8.6rem); }
.ph-hero-wrap .ph-btn-solid { background: var(--ph-primary, #5551f0); }

जेनेरिक एनीमेशन कीफ्रेम का नाम भी बदलें। @keyframes spin बन जाता है @keyframes ph-hero-spinू ी है, तो एक पृष्ठ पर दो विजेट कभी भी एक ही नाम पर नहीं लड़ते हैं यह एकल चरण ९०% को रोकता है “my विजेट ने पेजंबाल समर्थन टिकट तोड़ दिया।

चरण ३: संपादन योग्य पाठ को टोकन से बदलें

कहीं भी एक साइट के मालिक को अलग-अलग शब्द चाहिए, डबल घुंघराले ब्रेसिज़ में टोकन के लिए हार्डकोडेड टेक्स्ट को स्वैप करेंः

<h1 class="ph-title">
  <span class="ph-split">{{title_line_one}}</span>
  <span class="ph-split">{{title_line_two}}</span>
  <em class="ph-serif">{{accent_word}}</em>
</h1>

नोटिस मैं एक के बजाय तीन टोकन में शीर्षक विभाजित उच्चारण शब्द (“मूवेग्लेम) अलग ढंग से स्टाइल है मैं इटैलिक सेरिफ़, एम्बर, एनिमेटेड ३ तो यह अपने स्वयं के नियंत्रण हो जाता है संपादन व्यक्ति को कभी पता है कि जरूरत नहीं है, वे सिर्फ तीन लेबल पाठ क्षेत्रों को देखने के लिए प्रत्येक टोकन एक हो जाता है पाठ नियंत्रण बिल्डर में।

बटन को एक यूआरएल नियंत्रण मिलता है ताकि लिंक, न्यू-टैब टॉगल हो, और पैनल से सभी काम का अनुसरण न करेंः

<a class="ph-btn" href="{{first_button_url.url}}"
   target="{{first_button_url.is_external}}"
   rel="{{first_button_url.nofollow}}">{{first_button_text}}</a>

चरण ४: ब्रांड रंगों को स्टाइल कंट्रोल में बदलें

तीस रंग नियंत्रण बनाने के आग्रह का विरोध करें मेरे नायक में पांच हैं: पृष्ठभूमि, पाठ, उच्चारण, प्राथमिक, और म्यूट वे रैपर पर सीएसएस चर खिलाते हैं, और प्रत्येक व्युत्पन्न रंग (चमक, सीमाओं, छाया) के साथ उनसे गणना की जाती है color-mix():

.ph-hero-wrap {
  --ph-accent: {{accent_color}};
  --ph-primary: {{primary_color}};
  --ph-glow-primary: color-mix(in srgb, var(--ph-primary, #5551f0) 22%, transparent);
}

में “Primary” बदलें रंग नियंत्रण और बटन, चमक ओर्ब, और हीरे के आकार सभी एक साथ अपडेट करते हैं यही एक विजेट को इकट्ठा करने के बजाय डिजाइन महसूस करता है।

चरण 5: सीडीएन से जीएसएपी लोड करें, एक बार

जेएस जीएसएपी स्क्रिप्ट को संरक्षित आईडी के साथ इंजेक्ट करता है, इसलिए एक पृष्ठ पर छह विजेट अभी भी लाइब्रेरी को ठीक एक बार लोड करते हैंः

["ph-gsap-core", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"],
["ph-gsap-st",   "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"],
["ph-gsap-split","https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"]

फिर एनीमेशन स्वयं एक मानक जीएसएपी समयरेखा है वर्ण एक डगमगाते हुए बढ़ते हैं, उच्चारण शब्द पॉप के साथ back.out(2.5), हीरे स्क्रॉल स्थिति के खिलाफ स्क्रब करते हैं यदि आप पहले से ही जीएसएपी जानते हैं, तो कुछ भी नहीं बदलता है यदि आप नहीं करते हैं, तो यह बिल्कुल कोड है जो एआई खुशी से आपके लिए लिखेगा (नीचे उस पर अधिक)।

चरण ६: विजेट बिल्डर में विजेट बनाएं

आपके वर्डप्रेस डैशबोर्ड मेंः मास्टर ऐडऑन → विजेट बिल्डर → नया जोड़ें। विजेट का नाम बताएं, एक आइकन चुनें, फिर अपनी तीन फ़ाइलों को HTML, CSS और JS टैब में पेस्ट करें।

अब प्रति टोकन एक नियंत्रण जोड़ें: मेरे नायक के लिए १९ चार भौं ग्रंथों, चार शीर्षक क्षेत्रों, विवरण, उनके लिंक के साथ दो बटन, स्क्रॉल क्यू, और स्टाइल टैब पर पांच रंग नियंत्रण नाम टोकन से बिल्कुल मेल खाना चाहिए: द {{title_line_one}} टोकन को एक नियंत्रण की आवश्यकता होती है जिसका नाम है title_line_one। पूर्ण नियंत्रण संदर्भ रहता है विजेट बिल्डर दस्तावेज़ीकरण.

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

चरण ७: इसे एलिमेंटर में छोड़ें और किसी भी विजेट की तरह संपादित करें

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

अन्य पाँच अनुभाग, संक्षेप में

मार्की (3 नियंत्रण)। अंतराल रहित सीएसएस लूप के लिए टिकर टेक्स्ट दो बार प्रिंट करता है, और जीएसएपी स्क्रॉल वेग पर प्रतिक्रिया करने के लिए लेता है तेजी से स्क्रॉल करें और यह ४ गुना तक तेज हो जाता है, फिर वापस आसान हो जाता है मजेदार शिक्षण उदाहरण क्योंकि फ़ॉलबैक शुद्ध सीएसएस है: यदि जीएसएपी कभी लोड नहीं होता है, तो यह अभी भी स्क्रॉल करता है।

कार्य गैलरी (22 नियंत्रण)। शोपीस स्क्रॉलट्रिगर अनुभाग को पिन करता है जबकि कार्ड ट्रैक क्षैतिज रूप से अनुवाद करता है, एक काउंटर ०१/०५ टिक करता है, और कार्ड स्क्रॉल वेग के आधार पर थोड़ा तिरछा होता है पांच कार्ड, प्रत्येक संपादन योग्य शीर्षक, टाइमकोड और टैग के साथ मोबाइल पर यह एक देशी स्वाइप हिंडोला में गिरावट, कोई पिनिंग और जेएस की आवश्यकता नहीं है पिन गणित के काम करने के लिए एलिमेंटर में एक पूर्ण चौड़ाई वाला अनुभाग।

आँकड़े (13 नियंत्रण)। चार संख्याएं जो देखने में स्क्रॉल होने पर एक्सपो आसानी से गिनती हैं अंतिम संख्या मार्कअप में ही रहती है, इसलिए जावास्क्रिप्ट अक्षम आगंतुकों के साथ भी “१४२” देखें, नहीं “०”।

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

सीटीए (11 नियंत्रण)। नायक के रूप में एक ही विभाजन-पाठ तकनीक लेकिन स्क्रॉल पर ट्रिगर, प्लस एक चुंबकीय बटन जो कर्सर का अनुसरण करता है और एक लोचदार आसानी के साथ वापस स्प्रिंग्स यूआरएल नियंत्रण को एक मेल्टो पर इंगित करें: लिंक और यह एक संपर्क अनुभाग है।

टेम्पलेट डाउनलोड करें (6 विजेट, एक ज़िप)

gsap-एनीमेशन-एलिमेंटर-विजेट्स.zip डाउनलोड करें सभी छह विजेट JSON फ़ाइलें निःशुल्क, कोई ईमेल गेट नहीं।

शुरू करने से पहले एक नोट: मास्टर एडॉन्स का मुफ्त संस्करण एक सीमित विजेट बिल्डर को शिप करता है, और इन विजेट्स के उपयोग की पूरी सुविधा सेट के साथ आता है मास्टर एडॉन्स प्रो. आयात करने के लिए:

1. डाउनलोड को अनज़िप करें, आपको छह JSON फ़ाइलें दिखाई देंगी, प्रति अनुभाग एक
2. को जा मास्टर ऐडऑन → विजेट बिल्डर अपने वर्डप्रेस डैशबोर्ड में
3. क्लिक करें आयात, एक JSON फ़ाइल चुनें और पुष्टि करें
4. उन अनुभागों के लिए दोहराएं जिन्हें आप चाहते हैं (आपको सभी छह की आवश्यकता नहीं है)
5. एलिमेंटर के साथ कोई भी पेज खोलें और विजेट को मास्टर ऐडऑन श्रेणी से खींचें

आयात के बाद सब कुछ संपादन योग्य है: छह विजेट, हर रंग, हर शीर्षक, हर लिंक में ८८ नियंत्रण अपलोड करने के लिए कोई चित्र नहीं सभी दृश्य सीएसएस और एसवीजी हैं, जो पूरे टेम्पलेट को २०० केबी के तहत भी रखता है।

एआई कोण: किसी भी जेनरेटेड डिज़ाइन को एलिमेंटर में बदलें

एआई उपकरण अब वास्तव में अच्छा जीएसएपी कोड लिखते हैं जीएसएपी स्प्लिट-टेक्स्ट रिवील, डार्क बैकग्राउंड, स्क्रॉल पैरालैक्स” के साथ “a हीरो सेक्शन के लिए चैटजीपीटी या क्लाउड से पूछें और आपको एक प्रतिक्रिया में एचटीएमएल, सीएसएस और जेएस काम करने में समस्या हमेशा अंतिम मील थी: वह कोड एक स्थिर फ़ाइल के रूप में अटक गया था, जो एलिमेंटर में संपादन करने वाले क्लाइंट के लिए बेकार था।

विजेट बिल्डर वह अंतिम मील है एक त्वरित पैटर्न जो अच्छी तरह से काम करता हैः

Build a [section type] with GSAP animation.
Requirements:
- Wrap everything in one unique class, prefix all selectors with it
- Load gsap from cdn.jsdelivr.net/npm/gsap@3.15 via injected script tags
- Put editable text in {{token}} placeholders
- Define brand colors as CSS variables on the wrapper

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

प्रदर्शन: जीएसएपी एनीमेशन को तेज़ रखें

• एक बार लाइब्रेरी लोड करें। चरण 5 से संरक्षित स्क्रिप्ट आईडी इसे कई विजेटों में स्वचालित रूप से संभालती हैं।
• चेतन परिवर्तन और अस्पष्टता, चौड़ाई/ऊंचाई/ऊपर/बाएं नहीं। जीएसएपी डिफ़ॉल्ट रूप से ऐसा करता है x, y, और scale ब्राउज़र कंपोजिटर उन्हें बिना रीफ्लो के संभालता है।
• सम्मान पसंद-कम-गति। टेम्पलेट में प्रत्येक विजेट इसे जांचता है और स्थैतिक सामग्री की सेवा करता है अभिगम्यता, लेकिन बैटरी जीवन भी।
• कुल लागत छोटी है। जीएसएपी कोर + स्क्रॉलट्रिगर + स्प्लिटटेक्स्ट लगभग ९० केबी मिनीफाइड है, जो अधिकांश एकल नायक छवियों से कम है दुबला पृष्ठों के साथ टेम्पलेट को जोड़ दें और आप कोर वेब वाइटल्स को आराम से पास करेंगे; हमारे एनीमेशन प्रभाव गाइड व्यापक गति चित्र को शामिल करता है।

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

वीडियो ट्यूटोरियल दिशानिर्देश

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

अक्सर पूछे जाने वाले प्रश्न

टेम्पलेट से शुरुआत करें, फिर अपना खुद का निर्माण करें

छह विजेट आयात करें, उन्हें तोड़ें, उन्हें फिर से बनाएं विजेट बिल्डर को समझने का सबसे तेज़ तरीका आयात के बाद हीरो विजेट खोलना है और देखें कि १९ कैसे अपने एचटीएमएल टैब में टोकन के लिए मानचित्र को नियंत्रित करता है उसके बाद, प्रत्येक कोडपेन आप बुकमार्क करते हैं और प्रत्येक एआई-जनित अनुभाग विजेट उम्मीदवार बन जाता है।

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