संपादकीय केस स्टडी – WooCommerce

संपादकीय केस स्टडी - WooCommerce

हमने हाल ही में संपादकीय जारी किया है, एक पत्रिका विषय जिसका उद्देश्य समाचार पत्रों और पत्रिकाओं जैसे पारंपरिक प्रिंट मीडिया की परिचित विशेषताओं की नकल करना है। यह पोस्ट उस विचार प्रक्रिया पर एक नज़र डालती है जो संपादकीय को डिजाइन करने और उनमें से कुछ विचारों के कार्यान्वयन और विकास में गई थी।

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

संपादकीय केस स्टडी - WooCommerce
एक तीन कॉलम पोस्ट लेआउट

ये लेआउट पोस्ट सामग्री को प्रिंट प्रकाशन की तरह अलग-अलग वर्टिकल कॉलम में विभाजित करते हैं। ये कॉलम लेआउट एडिट पोस्ट स्क्रीन पर कुछ विकल्पों के माध्यम से सेटअप किए गए हैं, जिससे उपयोगकर्ता को जितना संभव हो उतना लचीलापन और उनके लेआउट पर नियंत्रण मिलता है। पहले उपयोगकर्ता अपने इच्छित कॉलम लेआउट का चयन करता है – पारंपरिक पूर्ण-चौड़ाई वाला ब्लॉग, पारंपरिक ब्लॉग, 3 कॉलम, 2 कॉलम चौड़ा बाएँ, 2 कॉलम चौड़ा दाएँ या 2 कॉलम 50/50। स्तंभों के बारे में सबसे अच्छी बात यह है कि वे पाठ को स्वचालित रूप से विभाजित नहीं करते हैं। उपयोगकर्ता टूलबार पर “कॉलम ब्रेक जोड़ें” बटन का उपयोग करके पोस्ट एडिटर में “कॉलम ब्रेक” सेट करता है।

संपादकीय केस स्टडी - WooCommerce
कॉलम सेटिंग्स और “कॉलम ब्रेक जोड़ें” बटन

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

अब जबकि आपने देख लिया है कि संपादकीय में स्तंभों को कैसे नियंत्रित किया जाता है, आइए देखें कि ये स्तंभ वास्तव में CSS के साथ कैसे बनाए जाते हैं।

शोध करते समय मुझे HTML/CSS कॉलम बनाने के कुछ तरीके मिले। एक सीएसएस मल्टी कॉलम लेआउट मॉड्यूल का उपयोग करना था, जो अपेक्षाकृत अच्छी तरह से काम करने के लिए साबित हुआ, लेकिन मुझे फ़्लोटिंग छवियों और टेक्स्ट ब्रेक को नियंत्रित करने में समस्याएं आईं। वहाँ कई जावास्क्रिप्ट समाधान भी हैं, लेकिन उनमें से किसी ने भी वास्तव में मुझे वह नियंत्रण नहीं दिया जिसकी मुझे तलाश थी।

हमने एक कस्टम CSS और jQuery समाधान के साथ जाना समाप्त किया। सबसे पहले, एडिट पोस्ट स्क्रीन पर चुने गए विकल्पों के आधार पर, प्रत्येक अलग-अलग लेआउट के लिए CSS कक्षाएं HTML में जोड़ी जाती हैं, जिससे मुझे CSS के साथ प्रत्येक लेआउट को लक्षित करने की अनुमति मिलती है। अगला हमें मार्कअप में कॉलम निर्दिष्ट करना होगा। जैसा कि ऊपर उल्लेख किया गया है, पोस्ट एडिट स्क्रीन पर एक बटन के साथ कॉलम ब्रेक डाले गए हैं। ये कॉलम ब्रेक PHP के साथ पाए जाते हैं (मैटी द्वारा कुछ जादू के लिए धन्यवाद) और टेक्स्ट के ब्लॉक डीआईवी टैग में लपेटे जाते हैं, जिससे कॉलम को सीएसएस के साथ फ़्लोट किया जा सकता है।

संपादकीय केस स्टडी - WooCommerce
लेआउट कक्षाएं, कॉलम मार्कअप और कॉलम सीएसएस

पोस्ट शीर्षक को केवल स्तंभों की x मात्रा में विस्तारित करने में कुछ समस्याएँ थीं। जब आप पाठ के पैराग्राफ में एक छवि तैरते हैं, तो इसके विपरीत, जो कॉलम शीर्षक से फैले नहीं थे, वे अभी भी इसके नीचे डिफॉल्ट हैं। हमने पोस्ट शीर्षक की ऊंचाई निर्धारित करने के लिए jQuery का उपयोग किया और “नॉन-स्पैन्ड” कॉलम में नकारात्मक मार्जिन लागू किया, उन्हें शीर्षक के साथ लंबवत शीर्ष संरेखित करने के लिए खींच लिया।

संपादकीय केस स्टडी - WooCommerce
उपरोक्त फ़्लोट समस्या और jQuery जो इसे ठीक करता है

CSS और jQuery समाधान वास्तव में अच्छी तरह से काम करता है, और परिणामस्वरूप कॉलम अधिकांश ब्राउज़रों, यहां तक ​​कि इंटरनेट एक्सप्लोरर 7 में भी संगत होते हैं!

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

[wtsfc]
परीक्षण!
[/wtsfc]

सीटीए-बैनर-10-उत्पाद-पृष्ठ-v2_2x

संपादकीय केस स्टडी - WooCommerce संपादकीय केस स्टडी - WooCommerce

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *