के तपाइँ WordPress मा प्रति पोस्ट ट्याग एक पपअप सिर्जना र प्रदर्शन गर्न चाहनुहुन्छ? त्यसैले यो लेख पढ्न जारी राख्नुहोस्।
वेबसाइट ब्राउज गर्दा देखा पर्ने सानो विन्डोसँग तपाइँ पहिले नै परिचित हुनुहुन्छ भन्ने कुरामा हामी निश्चित छौं। खैर, यसलाई पपअप वा पपअप भनिन्छ। पपअपहरू वेबसाइटमा विभिन्न आकार र अन-स्क्रिन स्थितिहरूमा देखा पर्न सक्छन्।
WordPress मा, पपअपहरू सिर्जना गर्न धेरै प्लगइनहरू छन्, जस्तै Elementor Pro, JetPopup, Brizy Pro, र थप।
याद गर्न महत्त्वपूर्ण कुरा यो हो कि पप-अपहरू तपाइँको वेबसाइट आगन्तुकहरूलाई कष्टप्रद हुनु हुँदैन। त्यसकारण, सकेसम्म सरल र आकर्षक पपअप सिर्जना गर्नुहोस्।
सामग्रीको तालिका
पपअपहरू सिर्जना गर्न केही WordPress प्लगइनहरू
एलिमेन्टर प्रो
Elementor प्रो सयौं प्रिमियम सुविधाहरू भएको एलिमेन्टर विस्तार हो। यसले तपाईंलाई शक्तिशाली व्यावसायिक उपकरणहरू दिन्छ जसले तपाईंको कार्यप्रवाह र डिजाइनलाई गति दिन्छ। Elementor प्रो ले तपाईंलाई तपाईंको वेबसाइटको लेआउट र डिजाइनमा पूर्ण नियन्त्रण दिन्छ। यस अवस्थामा, तपाइँ स्वतन्त्र रूपमा तपाइँको पपअप को डिजाइन अनुकूलित गर्न सक्नुहुन्छ।
Utiliser एलिमेन्टर प्रो पोष्ट ट्याग द्वारा पपअप सिर्जना गर्न धेरै सरल र प्रयोग गर्न सजिलो छ। तपाइँ सजिलैसँग तपाइँको पपअपको प्रदर्शन अवस्थाहरू धेरै सटीक तरिकामा परिभाषित गर्न सक्नुहुन्छ।
JetPopup
Crocoblock को JetPopup को लागि एक विस्तार छ Elementor। तपाइँ यसलाई स्ट्यान्डअलोन प्लगइनको रूपमा किन्न सक्नुहुन्छ वा अन्य क्रोकोब्लक प्लगइनहरूसँग बन्डलमा किन्न सक्नुहुन्छ। पपअप विन्डो सिर्जना गर्न JetPopup प्रयोग गर्ने फाइदा यो धेरै राम्रो सुविधाहरूको साथ आउँदछ।
- तपाईं पपअप विन्डो ट्रिगरहरूसँग खेल्न सक्नुहुन्छ।
- तपाइँ पपअप विन्डोको लागि एनिमेसनहरू सिर्जना गर्न सक्नुहुन्छ।
- ठूलो संख्यामा पपअप टेम्प्लेटहरू उपलब्ध छन्।
यो पनि पढ्नुहोस्: एलिमेन्टरका लागि २२ सर्वश्रेष्ठ प्रिमियम एडअन्स
Brizy प्रो
को पपअप निर्माता Brizy प्रो तपाईंलाई दुई विकल्पहरू प्रदान गर्दछ। पहिलो क्लिक-सक्रिय पपअप हो, र दोस्रो स्वचालित ट्रिगर र सर्तहरू हो।
- क्लिकमा खोल्दै: तपाईको पपअप तपाईको पृष्ठका तत्वहरूमा क्लिक गरेर मात्र ट्रिगर गर्न सकिन्छ।
- स्वचालित ट्रिगरहरू र सर्तहरू: तपाईंले पपअपहरू कहिले देखाइन्छ भनेर निर्धारण गर्ने आगन्तुक कार्यहरू कन्फिगर गर्न सक्नुहुन्छ।
एलिमेन्टरको साथ WordPress मा पोष्ट ट्याग द्वारा पपअप कसरी सिर्जना गर्ने र प्रदर्शन गर्ने
पहिले उल्लेख गरिए अनुसार, तपाइँसँग WordPress मा पपअप सिर्जना गर्न धेरै विकल्पहरू छन्। यस ट्यूटोरियलमा, हामी तपाइँलाई कसरी संस्करण प्रयोग गरेर प्रति पोस्ट ट्याग पपअप सिर्जना गर्ने र प्रदर्शन गर्ने भनेर देखाउनेछौं एलिमेन्टर प्रो, त्यसैले निश्चित गर्नुहोस् कि तपाईसँग पहिले नै एउटा छ।
चरण 1: पपअप टेम्प्लेट सिर्जना गर्नुहोस्
गर्न को लागी पहिलो कुरा नयाँ पपअप टेम्प्लेट सिर्जना गर्नु हो। नयाँ पपअप टेम्प्लेट सिर्जना गर्न, जानुहोस् टेम्प्लेटहरू > पपअपहरू तपाईको WordPress ड्यासबोर्डमा र बटनमा क्लिक गर्नुहोस् नयाँ थप्नुहोस्।
अर्को, तपाईंको पपअपको नाम थप्नुहोस् र बटनमा क्लिक गर्नुहोस् एक मोड सिर्जना गर्नुहोस्।
तपाईंलाई टेम्प्लेट लाइब्रेरीमा निर्देशित गरिनेछ, तपाईंले पुस्तकालय विन्डोबाट टेम्प्लेट रोज्न सक्नुहुन्छ वा आफ्नै पपअप टेम्प्लेट डिजाइन गर्न सक्नुहुन्छ। पुस्तकालयबाट टेम्प्लेट प्रयोग गर्न, बटनमा क्लिक गर्नुहोस् सम्मिलित.
तर यस ट्यूटोरियलमा, हामी स्क्र्याचबाट पपअप टेम्प्लेट सिर्जना गर्न जाँदैछौं। आइकनमा क्लिक गर्नुहोस् X टेम्प्लेट पुस्तकालय बन्द गर्न।
चरण 2: पपअप सेटिङहरू समायोजन गर्नुहोस्
हामीले पपअप टेम्प्लेट बनाउन सुरु गर्नु अघि हामीले पपअप सेटिङहरूमा केही समायोजन गर्न आवश्यक छ। तपाइँ तपाइँको साइट को लागी सबै भन्दा राम्रो सेटिङहरु पाउन सक्नुहुन्छ। यस ट्यूटोरियलमा, हामी तपाइँलाई तपाइँको मनपर्ने पपअप सेटिङहरू देखाउनेछौं।
तल्लो बायाँ कुनामा गियर आइकनमा क्लिक गर्नुहोस्। पपअप सेटिङहरूमा, परिवर्तन गर्नुहोस् चौडाइ दृश्यको चौडाइको 90% मा (VW) र स्थिति en केन्द्र-तल.
चरण 3: पपअप डिजाइन गर्नुहोस्
अर्को, आफ्नो पपअप टेम्प्लेट डिजाइन गर्नुहोस्। नयाँ खण्ड थप्नुहोस् र 5 स्तम्भ संरचना चयन गर्नुहोस्। सेक्सन सेटिङहरूमा, सेट गर्नुहोस् चौडाइ 950 मा। तपाईं आफ्नो सेटिङहरूसँग खेल्न सक्नुहुन्छ।
उदाहरणका लागि, तपाईं ट्याबमा जान सक्नुहुन्छ शैली पृष्ठभूमि सेट गर्न, ट्याबमा जानुहोस् उन्नत मार्जिन, र धेरै अनुकूलन गर्न।
अब तपाईंको स्तम्भहरूमा फर्कनुहोस्। बायाँ स्तम्भमा, चौडाइ 33% मा सेट गर्नुहोस्, र अन्य चार को लागी, 16% मा।
बायाँ स्तम्भमा, हामी केही पाठको साथ शीर्षक विजेट थप्नेछौं। तपाइँ तपाइँको वेबसाइट आगन्तुकहरूलाई अन्य सामग्री हेर्नको लागि निमन्त्रणा पाठ थप्न सक्नुहुन्छ जुन हालको सामग्रीसँग सान्दर्भिक छ, वा तपाइँको मनपर्ने कुनै अन्य पाठ।
दायाँमा, हामी छवि विजेट थप्नेछौं। तपाईंले थम्बनेलहरू/पोष्टहरूको विशेष छविहरूबाट छविहरू थप्न सक्नुहुन्छ वा तिनीहरूलाई म्यानुअल रूपमा अपलोड गर्न सक्नुहुन्छ।
अब संरचना तयार छ। मा फर्कनुहोस् पपअप सेटिङहरू प्रविष्टि, निकास, र मार्जिन एनिमेसनहरू अनुकूलित गर्न। यस ट्यूटोरियलमा, हामीले इनपुट सेट गर्यौं फेड डाउन र आउटपुट अन फिक्का हुन्छ। त्यसपछि ट्याबमा जानुहोस् उन्नत र मार्जिन 30 मा सेट गर्नुहोस् (लिङ्कहरूको लागि सामान्य मान)।
चरण 4: पपअप प्रकाशित गर्नुहोस्
अब कि डिजाइन तयार छ, बटन क्लिक गर्नुहोस् प्रकाशित प्रदर्शन अवस्था र ट्रिगरहरू सेट गर्न। प्रदर्शन अवस्था परिभाषित गर्न, बटनमा क्लिक गर्नुहोस् एउटा शर्त थप्नुहोस् र ड्रप-डाउन सूचीबाट आफ्नो विकल्प चयन गर्नुहोस्।
तपाईंले पोस्ट ट्यागद्वारा पपअप प्रदर्शन गर्न चाहनुहुन्छ भने, तपाईंले निम्न प्रदर्शन अवस्थाहरू सेट गर्न सक्नुहुन्छ (एनिमेसन हेर्नुहोस्)।
अर्को क्लिक गर्नुहोस्। ट्याबमा ट्रिगरहरू, ट्रिगर सेट गर्नुहोस् स्क्रोलमा स्विच फ्लिप गर्दै हो। परिभाषित गर्नुहोस् दिशा मा Bas एट ला चौडाइ 95% भन्दा बढी। किनभने हामी पपअप देख्न चाहन्छौं जब आगन्तुकहरू हाम्रो लेखको अन्त्यमा पुग्छन्।
यस ट्यूटोरियलमा, हामी परिभाषित गर्दैनौं उन्नत नियमहरू। त्यसैले क्लिक गर्नुहोस् बचत गर्नुहोस् र बन्द गर्नुहोस्। खैर, अब हामी सकियो।
हेरौं यो कस्तो देखिन्छ।
यहाँ तपाईंले भर्खरै आफ्नो पपअप समाप्त गर्नुभयो। हाम्रो सम्बन्धित लेखहरू पनि हेर्नुहोस्:
- एलिमेन्टरको पोष्ट विजेटका लागि 6 उपयोगी CSS स्निपेटहरू
- एलिमेन्टर लूप बिल्डरको साथ कसरी सूची पृष्ठ सिर्जना गर्ने
- तपाईंको एलिमेन्टर वेबसाइटमा व्यापार घण्टा कसरी थप्ने
- एलिमेन्टर बटन पाठमा लाइन ब्रेक कसरी थप्ने
- एलिमेन्टरमा फुटर कसरी सिर्जना र सम्पादन गर्ने
- एलिमेन्टरमा छवि मास्क कसरी थप्ने
- एलिमेन्टर वा ब्रिजी: कुन उत्तम WordPress पृष्ठ निर्माणकर्ता हो?
सम्बन्धित लेखहरू
- एलिमेन्टरका लागि २२ सर्वश्रेष्ठ प्रिमियम एडअन्स
- एलिमेन्टर बनाम बीभर बिल्डर: पृष्ठ निर्माणकर्ताहरूको विस्तृत तुलना
- Elementor समीक्षा 2024: Elementor को साथ अनुभव (लाभ, विपक्ष, सुविधाहरू र थप)
- Elementor मा एक अन्तरक्रियात्मक सर्कल कसरी सिर्जना गर्ने
- कसरी एलिमेन्टर वेबसाइट सुपर फास्ट बनाउने: ट्यूटोरियल पूरा गर्नुहोस्
- कसरी Elementor Cloud मा साइट माइग्रेट गर्ने
- एलिमेन्टरका लागि 5 उत्कृष्ट इन्स्टाग्राम फिड प्लगइनहरू [हाम्रो शीर्ष छनोटहरू]
- Elementor मा उन्नत Accordion कसरी प्रयोग गर्ने