DIVI बिल्डर में अनुभागों, पंक्तियों, स्तंभों और मॉड्यूल को लंबवत और क्षैतिज रूप से कैसे संरेखित करें

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

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

• फ्लेक्स और डिवाई के बीच अंतर को समझना
• क्या यह आवश्यक है?
• अपने पेज पर पूर्व-कॉन्फ़िगर लेआउट जोड़ें।
• विधि 1: फ्लेक्स और ऑटो मार्जिन के साथ सामग्री को लंबवत रूप से संरेखित करना
• सामग्री को नीचे संरेखित करना
• आपकी पंक्ति के कॉलमों के लिए लंबवत सामग्री संरेखण
• विधि 2: कॉलम फ्लेक्स दिशा का उपयोग करके सामग्री को लंबवत रूप से संरेखित करना
• केवल एक कॉलम वाले लेआउट के बारे में क्या?
• DIVI के ऊर्ध्वाधर और क्षैतिज संरेखण पर अंतिम विचार

फ्लेक्स और डिवाई के बीच अंतर को समझना

फ्लेक्स (या फ्लेक्सबॉक्स) सीएसएस विशेषता वस्तुओं को क्षैतिज और ऊर्ध्वाधर स्टैक (एक तालिका की तरह) में व्यवस्थित करने का एक साधन मात्र है। हालाँकि, सामान्य तालिकाओं के विपरीत, फ्लेक्स सुविधा आपको ऐसे बॉक्स बनाने की अनुमति देती है जो उनमें मौजूद सामग्री के आकार के अनुसार "फ्लेक्स" होते हैं।

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

amp के लिए, यदि आप किसी पंक्ति में किसी कॉलम में "मार्जिन: ऑटो" जोड़ते हैं, तो उस कॉलम की सामग्री (चाहे वह एक या कई मॉड्यूल हो) लंबवत रूप से केंद्रित होगी।

यदि आप "संरेखित-आइटम: केंद्र;" जोड़ते हैं तो आपके सभी कॉलम (और उनकी सामग्री) लंबवत रूप से केंद्रित होंगे। आपकी पंक्ति में.

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

क्या यह आवश्यक है?

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

इसलिए, यदि आप विशिष्ट रिक्ति के बारे में चिंता किए बिना जानकारी को लंबवत रूप से संरेखित करने का कोई तरीका खोज रहे हैं, तो मुझे लगता है कि यह आपके लिए फायदेमंद होगा।

आइये यह पार्टी शुरू करते हैं!

अपने पेज पर पूर्व-कॉन्फ़िगर लेआउट जोड़ें।

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

आपके पेज पर लेआउट लोड होने के बाद आप शुरू करने के लिए तैयार हैं।

विधि 1: फ्लेक्स और ऑटो मार्जिन के साथ सामग्री को लंबवत रूप से संरेखित करना

दूसरी पंक्ति के लिए पंक्ति सेटिंग्स खोलें (सीधे पृष्ठ शीर्षक वाली पंक्ति के नीचे वाली पंक्ति)। डिज़ाइन विकल्पों में साइज़िंग विकल्प समूह को टॉगल करें और ध्यान दें कि "कॉलम हाइट्स को बराबर करें" पहले से ही सक्रिय है; यह दर्शाता है कि फ्लेक्स प्रॉपर्टी ("डिस्प्ले: फ्लेक्स;") को पंक्ति में जोड़ा गया है।

कॉलम 2 मुख्य तत्व इनपुट बॉक्स के अंतर्गत, उसी पंक्ति के लिए उन्नत टैब सेटिंग्स पर जाएं और निम्नलिखित सीएसएस स्निपेट जोड़ें।

दूसरे कॉलम की सामग्री को अब लंबवत रूप से केंद्रित करने के लिए स्थानांतरित कर दिया गया है।

सामग्री को नीचे संरेखित करना

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

आपकी पंक्ति के कॉलमों के लिए लंबवत सामग्री संरेखण

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

यदि आप चाहते हैं कि आपके कॉलम की सारी जानकारी नीचे संरेखित हो तो आप इस स्निपेट का भी उपयोग कर सकते हैं:

याद रखें कि आप अपने सीएसएस स्निपेट के साथ मुख्य तत्व पर राइट-क्लिक करके और "मुख्य तत्व का विस्तार करें" का चयन करके डिवी की एक्सटेंड स्टाइल्स सुविधा का उपयोग कर सकते हैं।

फिर, पृष्ठ पर प्रत्येक कॉलम की सभी सामग्री को लंबवत रूप से केन्द्रित करने के लिए, मुख्य तत्व सीएसएस को पूरे पृष्ठ (या अनुभाग) की सभी पंक्तियों पर लागू करें।

अब सब कुछ लंबवत संतुलित है।

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

विधि 2: कॉलम फ्लेक्स दिशा का उपयोग करके सामग्री को लंबवत रूप से संरेखित करना

हमने सबसे पहले पंक्ति में जोड़ी गई फ्लेक्स प्रॉपर्टी का उपयोग किया। परिणामस्वरूप, हमारा प्रत्येक कॉलम एक "फ्लेक्स बॉक्स" बन गया जिसे मार्जिन को बदलकर लंबवत रूप से संरेखित किया जा सकता था।

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

आइए पिछली पूर्व amp ले की पंक्ति पर वापस लौटें। कस्टम सीएसएस पर राइट-क्लिक करके और "कस्टम सीएसएस शैलियाँ रीसेट करें" का चयन करके, आप पंक्ति सेटिंग्स में मौजूद किसी भी कस्टम सीएसएस को हटा सकते हैं।

फिर, कॉलम 2 मुख्य तत्व में, निम्नलिखित सीएसएस लागू करें:

सामग्री को निचले स्तर पर संरेखित करने के लिए "जस्टिफ़ाई-कंटेंट: सेंटर" को "जस्टिफ़ाई-कंटेंट: फ़्लेक्स-एंड" में बदलें।

मुझे यह कॉन्फ़िगरेशन पसंद है क्योंकि यदि मैं अपनी सामग्री को लंबवत रखता हूं और पंक्ति को पूरी चौड़ाई में बनाता हूं, तो सामग्री केंद्रित रहती है।

पाठ की विभिन्न मात्राओं के साथ लंबवत रूप से संरेखित ब्लर्ब बनाना

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

डिजिटल भुगतान होम पेज लेआउट के लिए, मैं इस amp के लिए ब्लर्ब्स को लंबवत रूप से संरेखित करूंगा।

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

अब मुझे पंक्ति सेटिंग्स में "कॉलम की ऊंचाई बराबर" करने की आवश्यकता है।

अब मैं सीएसएस स्निपेट का उपयोग करके अपने टेक्स्ट को संरेखित कर सकता हूं और डिज़ाइन को समायोजित कर सकता हूं।

हम अपनी पंक्ति सेटिंग्स के उन्नत टैब के मुख्य तत्व अनुभाग में निम्नलिखित जोड़कर अपने कॉलम की सामग्री को लंबवत रूप से केन्द्रित कर सकते हैं:

कृपया उन्हें नीचे संरेखित करने के लिए इसे निम्नलिखित में बदलें।

आप अपनी कस्टम सीएसएस शैलियों को रीसेट करके और निम्नलिखित कस्टम मार्जिन जोड़कर पहले कॉलम को नीचे-संरेखित और तीसरे कॉलम को शीर्ष-संरेखित भी कर सकते हैं।

 कॉलम 1 मुख्य तत्व सीएसएस:

 कॉलम 3 मुख्य तत्व सीएसएस:

केवल एक कॉलम वाले लेआउट के बारे में क्या?

आपको अपनी एक-कॉलम सामग्री को लंबवत रूप से केंद्रित करने के लिए सीएसएस स्निपेट या फ्लेक्स की आवश्यकता नहीं है। आपको बस यह सुनिश्चित करना है कि आपके टेक्स्ट में ऊपर और नीचे (या मॉड्यूल) समान रिक्ति है। अधिकांश उपभोक्ताओं को कई कॉलम वाले लेआउट पर लंबवत केंद्रित सामग्री की आवश्यकता होती है क्योंकि वे चाहते हैं कि आसन्न सामग्री सही ढंग से पंक्तिबद्ध हो।

DIVI के ऊर्ध्वाधर और क्षैतिज संरेखण पर अंतिम विचार

भले ही यह समाधान कस्टम सीएसएस के कुछ छोटे स्निपेट्स पर निर्भर करता है, मुझे लगता है कि यह उन लोगों के लिए मददगार हो सकता है जो समय लेने वाली प्रक्रिया का त्वरित इलाज ढूंढ रहे हैं। कृपया बेझिझक इस दृष्टिकोण पर अपनी राय साझा करें, साथ ही यह भी amp कि अतीत में इसने आपका समय और प्रयास कैसे बचाया है।