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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

याद रखें कि आप अपने CSS स्निपेट के साथ मुख्य तत्व पर राइट-क्लिक करके और "मुख्य तत्व का विस्तार करें" का चयन करके Divi's Extend Styles सुविधा का उपयोग कर सकते हैं।

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

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

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

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

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

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

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

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

सामग्री को नीचे संरेखित करने के लिए "औचित्य-सामग्री: केंद्र" को "औचित्य-सामग्री: फ्लेक्स-एंड" में बदलें।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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