कैसे वर्डप्रेस में प्रतीक के साथ फ़ीचर बॉक्स जोड़ें

कैसे वर्डप्रेस में प्रतीक के साथ फ़ीचर बॉक्स जोड़ें

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

माउस के साथ वर्डप्रेस में फीचर बक्से जोड़ना

प्रतीक के साथ फ़ीचर बॉक्स क्या है?

ज्यादातर लोग जब वेबसाइट पर जाते हैं तो वास्तव में उन्हें नहीं पढ़ा जाता है। मनुष्य के रूप में, हम पेशेवर स्कैनर बन रहे हैं

इसका मतलब यह है कि व्यवसाय के स्वामी के रूप में, आपको आसानी से स्कैन करने योग्य और अत्यधिक आकर्षक प्रारूप में महत्वपूर्ण जानकारी पेश करने की आवश्यकता है।

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

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

यहां हमारे ऑप्टिमनमोस्टर वेबसाइट से एक उदाहरण है:

वर्डप्रेस संचालित वेबसाइट के होमपेज पर फीचर बॉक्स का उदाहरण

अपने वर्डप्रेस होमपेज पर प्रतीक के साथ सुविधा बॉक्स को जोड़ना

आपको सबसे पहले ज़रूरत है उन्नत WP कॉलम प्लगइन को स्थापित करना और सक्रिय करना। सक्रियण पर आपको यात्रा की आवश्यकता है सेटिंग्स »उन्नत WP कॉलम प्लगइन को कॉन्फ़िगर करने के लिए

बस ‘कॉलम क्लास’ को नीचे स्क्रॉल करें और दर्ज करें mycolumns इसके पास वाला। अपनी सेटिंग्स को स्टोर करने के लिए परिवर्तन सहेजें बटन पर क्लिक करने के लिए मत भूलें।

अपने कॉलम के लिए सीएसएस वर्ग जोड़ना

इसके बाद, आपको अपने एसयूवी आइकन को अपने फीचर्स बॉक्स में डालने के लिए एक प्लगइन की आवश्यकता होगी। WP SVG प्रतीक प्लगइन स्थापित और सक्रिय करें।

अब आप अपने फीचर बक्से बनाने के लिए तैयार हैं

उस पृष्ठ को संपादित करके प्रारंभ करें जहां आप सुविधा बॉक्स जोड़ना चाहते हैं।

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

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

पोस्ट संपादक में उन्नत कॉलम और एसवीजी आइकन बटन

सबसे पहले, आपको उन्नत WP कॉलम बटन पर क्लिक करना होगा। यह एक पॉपअप लाएगा जहां आपको क्लिक करना होगा खाली और फिर उन कॉलम की संख्या का चयन करें जिन्हें आप जोड़ना चाहते हैं।

फीचर बक्से कॉलम बनाना

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

अब आप अपने पोस्ट एडिटर में कॉलम देखेंगे। अगला कदम टेक्स्ट के ऊपर माउस को जोड़ना है।

पहले कॉलम में पाठ क्षेत्र की शुरुआत करने के लिए अपना माउस लें और एंटर बटन पर क्लिक करें। यह पाठ को नीचे ले जाएगा और अपने माउस को सम्मिलित करने के लिए स्थान देगा।

अब आपको ऐड आइकन बटन पर क्लिक करना होगा, जो इस तरह एक अच्छा पॉपअप लाएगा:

वर्डप्रेस में बक्से को दिखाने के लिए आइकन जोड़ना

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

अंत में, सम्मिलित करें बटन पर क्लिक करें अब आप अपने पोस्ट संपादक में एसवीजी आइकन के लिए शोर्टको देखेंगे। आपके द्वारा चुने गए चिह्न के नाम के आधार पर, यह कुछ ऐसा दिखाई देगा:

[wp-svg-icon icon = "rocket" wrap = "span"]

अन्य फीचर बॉक्स में आइकन जोड़ने के लिए प्रक्रिया को दोहराएं।

एक बार समाप्त हो जाने के बाद, अपने पृष्ठ को बचाने के लिए बस अपडेट बटन पर क्लिक करें।

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

छोटे चिह्नों के साथ फ़ीचर बॉक्स और कोई स्टाइल नहीं

इस समस्या को हल करने के लिए आपको थोड़ा सीएसएस जोड़ना होगा। बस इस सीएसएस स्निपेट को अपनी थीम या बाल थीम के स्टाइलशीट में जोड़ें।

span.wp-svg-rocket.rocket {
 font-size: 100px;
 }

 span.wp-svg-cloud.cloud {
 font-size: 100px;
 }
 span.wp-svg-headphones.headphones {
 font-size: 100px;
 }
 .mycolumns {
 सीमा: 1 पीएक्स ठोस # बीई;
 मिनट-height: 250px;
 पैडिंग-टॉप: 20px! महत्वपूर्ण;
 } 

सीएसएस को आप उपयोग कर रहे माउस के नाम से मिलान करने के लिए समायोजित करने के लिए मत भूलना।

उचित स्टाइल और बड़े आइकन वाले फीचर बॉक्स

हमें उम्मीद है कि इस आलेख ने आपको अपने होमपेज पर एक खूबसूरत फीचर्स बक्से अनुभाग जोड़ने में मदद की है