पेज डिजाइनर की मदद से वेबसाइट डिजाइन करना

पेज डिजाइनर ईपेपर सीएमएस क्लाउड का बेहद महत्वपूर्ण विशेषता है. इसकी मदद से आप अपने मन मुताबिक वेबसाइट‌ का रंग रूप बदल सकते हैं। पेज डिजाइनर का प्रयोग करने के लिए System >> Page Designer में जाएं। इससे आपके समक्ष कुछ ऐसा पन्ना आ जाएगा:

जैसा कि आप इसमें देख सकते हैं, इसमें कई लेआउट हैं। इसमें से Header तथा Footer ले आउट सभी पेजों में ऊपर और नीचे दिखाई देते हैं। किन्तु इसके अतिरिक्त बाकी ले आउट अलग अलग पन्नों का प्रतिनिधित्व करते हैं।

  • Website Homepage: यह वेबसाइट के उस मुखपृष्ठ का प्रतिनिधित्व करता है जो सामान्य अवस्था में सक्रिय होता है। यानि कि डिफाल्ड होम पेज। बाकि होमपेज तो सेटिंग्स में जाकर बदला भी जा सकता है।
  • Static Page: जो पेज आप Page माड्यूल से बनाते हैं उन पन्नों के डिजाइन को आप इस ले आउट से बदल सकते हैं।
  • Epaper Archive: कैटेगरी वार अथवा दिनांक वार एडिशनों को दिखाने वाले पेज के ले आउट को हम इस पेज से निर्धारित कर सकते हैं।
  • Epaper Display: यह बेहद महत्वपूर्ण ले आउट है क्योंकि इसके जरिए आप उस पेज के रंग रूप को निर्धारित करते हैं जिस पेज पर ईपेपर पढ़ा जाता है। ऐसे कई विजेट हैं जो केवल इसी ले आउट में उपलब्ध होते हैं।
  • Epaper Map: जब आप ईपेपर पर किसी समाचार पर क्लिक करते हैं तो वह समाचार कटकर एक अलग माडल डायलॉग बाक्स में खुलता है। इस ले आउट से हम उसी पेज को डिजाइन कर सकते हैं।
  • Epaper Clip: जब कोई उपयोगकर्ता ईपेपर सीएमएस के क्लिप एंड शेयर सुविधा का प्रयोग करके किसी समाचार को स्वयं काटकर साझा करता है तब वह समाचार क्लिप जिस पेज पर खुलती है उसके डिजाइन का निर्धारण हम इस ले आउट से कर सकते हैं।

तो चलिए एक बार पेज डिजाइनर से किसी ले आउट में परिवर्तन करने के तरीके को समझते हैं। तो सबसे पहले किसी ले आउट में क्लिक करेंगे। यहां उदाहरण के तौर पर हम Website Homepage पर क्लिक करते हैं। अब हमें कुछ इस प्रकार का पेज दिखाई देगा:

एक महत्वपूर्ण बात: ईपेपर सीएमएस क्लाउड बूटस्ट्रैप ४ पर बना है अत: आप बूट स्ट्रैप की क्लासों का भरपूर इस्तेमाल कर सकते हैं।

इसमें जो Add Row की बटन बनी है उससे हम एक Row जोड़ सकते हैं। प्रत्येक रो के भीतर कालम होते हैं। रो बनने के बाद Add Column पर क्लिक करके हम कालम जोड़ सकते हैं। यह बूट स्ट्रैप के ग्रिड को पैदा करता है। प्रत्येक कालम के साथ एक धन और ऋण की बटन होती है। इस बटन पर क्लिक करके आप कालम के आकार को बढ़ा और घटा सकते हैं। जिस प्रकार बूटस्ट्रैप का ग्रिड १२ कालमों में विभक्त होता है उसी प्रकार हम भी इसमें कालमों को अधिकतम १२ इकाई तक ही बढ़ा सकते हैं।

एक बार जब आप कालम बना देते हैं तब आपको उसमें Add Widgets का बटन दिखाई देता है। इसके जरिए ही हम विजेट आदि जोड़ सकते हैं। इस बटन पर क्लिक करते ही आपको कुछ इस प्रकार का डायलॉग बाक्स नजर आएगा:

एक बार जब आप कालम बना देते हैं तब आपको उसमें Add Widgets का बटन दिखाई देता है। इसके जरिए ही हम विजेट आदि जोड़ सकते हैं। इस बटन पर क्लिक करते ही आपको कुछ इस प्रकार का डायलॉग बाक्स नजर आएगा:

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

ध्यान रखें प्रत्येक Row, Column और Widget की सेटिंग में आपको CSS Classes और Style नामक फील्ड दिखाई देगा। इसमें आप बूटस्ट्रैप क्लासों के साथ साथ स्वयं से बनाई गई क्लासों और सीएसएस स्टाइलों का प्रयोग कर सकते हैं।

रो और कालमों की सेटिंग खोलने के लिए उनके सामने लगे नीले बटन पर क्लिक करें।