एक तिरछी पृष्ठभूमि पृष्ठ के पार एक खंड के किनारे को एक कोण पर काटती है बजाय इसे सपाट छोड़ने के यह क्षैतिज बैंड के सामान्य ढेर को तोड़ता है, और आंख अगले खंड में विकर्ण नीचे का अनुसरण करती है लैंडिंग पृष्ठ और सास होमपेज इसका लगातार उपयोग करते हैं।
एलिमेंट अभी भी कोई “स्क्यू इस खंड” टॉगल नहीं है, इसलिए आप इसे सीएसएस की कुछ पंक्तियों के साथ करते हैं परेशानी यह है, एलिमेंट का अपना कस्टम सीएसएस फ़ील्ड प्रो के पीछे लॉक है यही कारण है कि यह ट्यूटोरियल मुफ्त का उपयोग करता है मास्टर ऐडऑन में कस्टम सीएसएस एक्सटेंशन, जो मुफ्त एलिमेंटर पर प्रत्येक तत्व के लिए एक सीएसएस बॉक्स जोड़ता है।
इस गाइड को फिर से बनाया गया है कि एलिमेंटर वास्तव में २०२६ में कैसे काम करता है इस पोस्ट का मूल संस्करण अनुभागों और इनर कॉलम के खिलाफ लिखा गया था, और दोनों अब विरासत हैं नीचे दी गई हर चीज का उपयोग करता है फ्लेक्सबॉक्स कंटेनर३.६ के बाद से एलिमेंट का डिफ़ॉल्ट लेआउट तत्व और एक नए पेज पर आपको मिलने वाली एकमात्र संरचना।
शुरू करने से पहले आपको क्या चाहिए
- एलिमेंट फ्री (3.6 या नया, इसलिए कंटेनर चालू हैं)
- मास्टर ऐडऑन: इसे WordPress.org से निःशुल्क इंस्टॉल करें, फिर कस्टम सीएसएस एक्सटेंशन पर स्विच करें
- पृष्ठभूमि रंग या छवि सेट वाला एक कंटेनर। इसे मत छोड़ो. तिरछा बॉक्स को बदल देता है, इसलिए यदि बॉक्स में कुछ भी दिखाई नहीं देता है, तो आपको बिल्कुल भी कोई बदलाव नहीं दिखाई देगा एक पारदर्शी कंटेनर नंबर एक कारण है कि लोग सोचते हैं कि यह चाल टूट गई है।
आपको किसी भी बिंदु पर एलिमेंटर प्रो की आवश्यकता नहीं होगी यदि आपके पास पहले से ही है, तो इसका मूल कस्टम सीएसएस फ़ील्ड उसी तरह से व्यवहार करता है, इसलिए इसके बजाय कोड को वहां पेस्ट करें।
कुछ भी पेस्ट करने से पहले तिरछा समझना
तिरछा करना एक सीएसएस परिवर्तन है। transform: skew(0deg, -10deg) तत्व को Y अक्ष के अनुदिश दस डिग्री तक झुकाता है, इसके ऊपरी और निचले किनारों को विकर्णों में बदल देता है।
लोगों को जो चीज़ परेशान करती है वह यह है कि परिवर्तन तत्व पर लागू होता है और उसके अंदर की हर चीजएक कंटेनर तिरछा और आप अपनी पृष्ठभूमि तिरछा, यकीन है, लेकिन आप भी शीर्षक तिरछा, बटन, और छवि में बैठे अपने पाठ समाप्त होता है झुका हुआ।
तो आप काउंटर-तिरछा करते हैं पहले के अंदर एक दूसरे कंटेनर को घोंसला करें और इसे विपरीत दिशा में समान मात्रा में वापस झुकाएं माता-पिता शून्य से दस डिग्री तक जाते हैं, बच्चा प्लस दस तक जाता है, और वे रद्द कर देते हैं कोणीय पृष्ठभूमि, ईमानदार सामग्री।
दो कंटेनर, दो नियम, विपरीत मूल्य यही पूरी बात है।
चरण १: कंटेनर संरचना का निर्माण करें
एलिमेंटर में अपना पेज खोलें और छोड़ें कंटेनरइसकी चौड़ाई को पूर्ण चौड़ाई में सेट करें यह बाहरी है, जो कोण को वहन करता है।
अब एक खींचें पहले के अंदर दूसरा कंटेनरउस नेस्टेड कंटेनर में वास्तविक सामग्री होती है: शीर्षक, पाठ, बटन, छवि, जो भी अनुभाग के लिए है इसे आप जैसे चाहें डिज़ाइन करें।
तो संरचना हैः
- बाहरी कंटेनर: पृष्ठभूमि का रंग या छवि, तिरछा हो जाता है
- भीतरी कंटेनर: आपकी सारी सामग्री, काउंटर-स्क्यू हो जाती है
एक पुराने पृष्ठ को बनाए रखना अभी भी अनुभागों और आंतरिक अनुभागों पर बनाया गया है तर्क समान है बाहरी तत्व तिरछा, आंतरिक तत्व अन-तिरछा हालांकि कुछ भी नया करने के लिए, कंटेनरों का उपयोग करें वे बहुत कम डोम भेजते हैं, जो अगर आप परवाह करते हैं तो जोड़ता है एलिमेंटर पेज की गति.
चरण २: बाहरी कंटेनर में तिरछा सीएसएस जोड़ें
बाहरी कंटेनर का चयन करें, पर जाएं उन्नत टैब करें, और ढूंढें एमए कस्टम सीएसएस बॉक्स जो मास्टर एडॉन्स जोड़ता है इसे इसमें चिपकाएँः
selector {
padding: 400px 0;
margin-top: -200px;
transform: skew(0deg, -10deg);
overflow: hidden;
}यहां बताया गया है कि प्रत्येक पंक्ति क्या कर रही है, इसलिए आप इसे केवल उम्मीद करने के बजाय समायोजित कर सकते हैंः
selectorक्या एलिमेंटर का शॉर्टहैंड “ के लिए हैयह विशिष्ट तत्व।” मास्टर एडॉन्स इसे आपके लिए स्कोप करता है, इसलिए नियम अन्य कंटेनरों पर लीक नहीं हो सकता है।padding: 400px 0कंटेनर को कहीं जाने के लिए कोणीय किनारों के लिए पर्याप्त ऊर्ध्वाधर कमरा देता है एक छोटे कंटेनर को तिरछा करें और आप सिर्फ कोनों को क्लिप करें।margin-top: -200pxकंटेनर को ऊपर एक में ऊपर खींचता है ताकि विकर्ण ओवरलैप हो, पीछे एक सफेद त्रिकोण छोड़ने के बजाय आधा पैडिंग मूल्य एक सभ्य प्रारंभिक अनुपात है।transform: skew(0deg, -10deg)कोण ही है नकारात्मक एक तरह से झुकता है, दूसरे सकारात्मक।overflow: hiddenतिरछे कोनों को बग़ल में बाहर निकलने से रोकता है इसे छोड़ दें और आपको एक क्षैतिज स्क्रॉलबार मिलेगा, जिसे मैं वापस आऊंगा।
फ़्लैग करने लायक एक बात: यदि आपने भी छुआ है रूप बदलना एलिमेंटर के अपने उन्नत टैब में नियंत्रण, वे इस सीएसएस के साथ लड़ेंगे, क्योंकि दोनों एक ही लिखते हैं transform संपत्ति और लोड करने के लिए आखिरी जीत कोण सेट करने के लिए एक जगह चुनें और दूसरे को अकेला छोड़ दें।
इस ट्यूटोरियल के 2020 संस्करण में चार विक्रेता-पूर्वनिर्धारित पंक्तियाँ सूचीबद्ध हैं (-webkit-, -moz-, -ms-, -o-)। उन्हें हटा दें। उपसर्ग रहित transform अब लगभग एक दशक से हर ब्राउज़र में काम किया है, और उन अतिरिक्त लाइनों सिर्फ सीएसएस बॉक्स को पढ़ने के लिए कठिन बनाते हैं।
चरण ३: आंतरिक कंटेनर को काउंटर-तिरछा करें
इस बिंदु पर आपकी सामग्री पृष्ठभूमि के साथ झुका हुआ है चुनें भीतरी कंटेनर, इसके उन्नत टैब खोलें, और इसे एमए कस्टम सीएसएस में पेस्ट करेंः
selector {
transform: skew(0deg, 10deg);
}समान संख्या, विपरीत चिह्न। बाहरी कंटेनर पर -10deg इसका मतलब है आंतरिक कंटेनर 10degएक को दूसरे को बदले बिना बदलें और आपका पाठ एक मामूली कोण पर बैठता है जिसे पाठक नोटिस करते हैं भले ही वे क्यों नहीं कह सकते।
सहेजें और पूर्वावलोकन करें आपके पास एक कोणीय पृष्ठभूमि होनी चाहिए जिसके ऊपर सीधी सामग्री बैठी हो यदि संपादक अभी भी इसे झुका हुआ दिखाता है, तो संपादक टैब को पुनः लोड करें; कस्टम सीएसएस कभी-कभी पूर्वावलोकन आईफ्रेम में पिछड़ जाता है।
चरण ४: मोबाइल ओवरफ्लो को ठीक करें (इसे छोड़ें नहीं)
अधिकांश ट्यूटोरियल चरण ३ पर रुकते हैं, और यही कारण है कि तिरछे खंड एक सप्ताह बाद लाइव साइटों से वापस खींच लिए जाते हैं।
एक पूर्ण चौड़ाई वाला तत्व तिरछा करें और इसके कोने व्यूपोर्ट के किनारे से बाहर निकलते हैं डेस्कटॉप पर, कोई भी नोटिस नहीं करता है एक फोन पर, वह ओवरहैंग आपको एक क्षैतिज स्क्रॉलबार देता है और पृष्ठ उपयोगकर्ता के अंगूठे के नीचे बग़ल में फिसलने लगता है, क्योंकि यह टूटा हुआ है।
दो चीजें इसे रोकती हैंः
- रखना
overflow: hiddenतिरछे कंटेनर पर, जैसा कि ऊपर दिए गए कोड में है। - छोटी स्क्रीन पर कोण कम करें। एक १०-डिग्री तिरछा जो १४४० पीएक्स मॉनिटर पर तेज दिखता है, ३७५ पीएक्स फोन पर एक कठोर विकर्ण में बदल जाता है, और यह आपके शीर्षक में खाता है।
बाहरी कंटेनर के सीएसएस बॉक्स में कोड के नीचे इसे जोड़ेंः
@media (max-width: 767px) {
selector {
padding: 200px 0;
margin-top: -100px;
transform: skew(0deg, -4deg);
}
}और आंतरिक कंटेनर में मिलान उलटः
@media (max-width: 767px) {
selector {
transform: skew(0deg, 4deg);
}
}अब प्रभाव लेआउट को बर्बाद करने के बजाय नीचे स्केल करता है इसे एक वास्तविक फोन पर परीक्षण करें, न कि केवल संपादक के उत्तरदायी पूर्वावलोकन, क्योंकि पूर्वावलोकन फलक हमेशा अतिप्रवाह को पुन: पेश नहीं करता है यदि आप एलिमेंट के डिफ़ॉल्ट के बजाय कस्टम ब्रेकपॉइंट चलाते हैं, तो कस्टम ब्रेकप्वाइंट प्लगइन आपको इन मीडिया प्रश्नों को अपनी वास्तविक डिवाइस चौड़ाई से मिलान करने देता है।
आधुनिक विकल्प: क्लिप-पथ, जिसमें कोई प्रति-तिरछा नहीं है
तिरछा और काउंटर तिरछा काम करता है, और यह वही है जो मूल ट्यूटोरियल सिखाया गया था हालांकि अब एक क्लीनर तरीका है, और एक नए निर्माण के लिए यह आमतौर पर एक है जिसके लिए मैं पहुंचूंगा।
clip-path तत्व को बदलने के बजाय एक आकार को काट देता है चूंकि यह घूर्णन के बजाय क्लिप करता है, इसलिए अंदर की सामग्री कभी नहीं चलती है, इसलिए कोई नेस्टेड कंटेनर नहीं है और सिंक में रखने के लिए कोई दूसरा मूल्य नहीं है।
एक कंटेनर, एक नियमः
selector {
padding: 160px 0;
clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}वे चार निर्देशांक कोने हैं, ऊपर-बाएँ से दक्षिणावर्त। कोण बदलने के लिए प्रतिशत को हिलाएँ: बढ़ाएँ 6% अधिक तीव्र कटौती के लिए, इसे की ओर गिराएँ 0 कुछ सूक्ष्म के लिए आप केवल नीचे के किनारे को भी कोण कर सकते हैं और शीर्ष फ्लैट छोड़ सकते हैं, जो एक नायक के लिए सामान्य पैटर्न है।
आपको किस विधि का उपयोग करना चाहिए?
| स्थिति | उपयोग | क्यों |
|---|---|---|
| नया पृष्ठ, एक कोणीय किनारा चाहते हैं | clip-path | एक कंटेनर, एक नियम, सामग्री को कभी नहीं छुआ जाता है |
| आप पृष्ठभूमि चाहते हैं छवि खुद को झुकाने के लिए | skew | क्लिप-पथ बॉक्स को काटता है, यह उसके अंदर जो कुछ भी है उसे घुमाता नहीं है |
| केवल एक किनारे को कोण दिया जाना चाहिए | clip-path | तिरछा हमेशा दोनों किनारों को एक साथ झुकाता है |
| तिरछा के साथ पहले से ही निर्मित एक पुराने पृष्ठ को बनाए रखना | skew | जो काम करता है उसे फिर से बनाने का कोई कारण नहीं |
प्रत्येक वर्तमान ब्राउज़र दोनों को संभालता है। जाँच करें एमडीएन पर क्लिप-पथ समर्थन तालिकाएँ यदि आप किसी असामान्य चीज़ का समर्थन करते हुए फंस गए हैं।
सीएसएस को पूरी तरह से छोड़ें: तैयार टेम्पलेट आयात करें
कोड को छूना नहीं चाहते तिरछा पृष्ठभूमि लेआउट एक टेम्पलेट के रूप में जहाज है एलिमेंट के साथ किसी भी पृष्ठ को संपादित करें, क्लिक करें मास्टर एडॉन्स टेम्पलेट लाइब्रेरी ऐड-एलिमेंट बटन के बगल में आइकन, और तिरछा पृष्ठभूमि टेम्पलेट की तलाश करें इसे आयात करें, फिर अपने स्वयं के पाठ और रंगों में स्वैप करें।
वही तकनीक, पहले से ही तार-तार हो चुकी है। द मास्टर एडॉन्स टेम्पलेट लाइब्रेरी तैयार पृष्ठ, अनुभाग, हेडर और फ़ुटर उसी तरह बनाए गए हैं, और टेम्पलेट किट पूर्ण बहु-पृष्ठ साइट डिज़ाइन के साथ आगे बढ़ें।
जहां तिरछी पृष्ठभूमि वास्तव में काम करती है
कहने लायक है, क्योंकि यह प्रभाव अति प्रयोग हो जाता है: कोणीय वर्गों उनके रखने कमाता है जब वे एक संक्रमण को चिह्नित सुविधाओं में हीरो, मूल्य निर्धारण में सुविधाओं, प्रशंसापत्र में मूल्य निर्धारण वे एक लंबे पृष्ठ कुछ लय दे।
वे काम करना बंद कर देते हैं जब हर खंड कोण होता है अब कुछ भी संक्रमण के रूप में नहीं पढ़ता है और पृष्ठ सिर्फ व्यस्त महसूस करता है एक लंबे लैंडिंग पृष्ठ पर, दो या तीन कोण वाले किनारे आमतौर पर पर्याप्त होते हैं।
यदि आप ज्यामिति के बिना अधिक गहराई चाहते हैं, तो अन्य प्रभाव शीर्ष पर अच्छी तरह से परत करते हैं। एनिमेटेड ग्रेडिएंट पृष्ठभूमि (प्रो) धीमी रंग गति जोड़ें, कणों एक इंटरैक्टिव परत जोड़ें, और काँच आकार कार्ड को एक फ्रॉस्टेड लुक देता है जो तिरछे पैनल के खिलाफ अच्छी तरह से बैठता है एक्सटेंशन को बदलता है (प्रो) एलिमेंटर यूआई में रोटेट, स्केल और स्क्यू कंट्रोल भी डालता है, अगर आप टाइप डिग्री के बजाय स्लाइडर को खींचना पसंद करते हैं।
समस्या निवारण
- कुछ भी नहीं बदला. कंटेनर की कोई पृष्ठभूमि नहीं है एक रंग या छवि सेट करें और फिर से देखें।
- पूरा पृष्ठ बग़ल में स्क्रॉल करता है। जोड़ना
overflow: hiddenतिरछे कंटेनर के लिए, फिर जांचें कि उसके माता-पिता भी ओवरफ्लो नहीं हो रहे हैं। - पाठ अभी भी झुका हुआ है। काउंटर-तिरछा गलत तत्व पर है, या संकेत गलत है यदि बाहरी कंटेनर नकारात्मक है, तो आंतरिक एक सकारात्मक होना चाहिए।
- अनुभाग के ऊपर सफेद अंतर। नकारात्मक को बढ़ाएं
margin-topतो कोण ऊपर के अनुभाग में और खींचता है। - कोण अप्रत्याशित रूप से चारों ओर कूदता है। एलिमेंट के अंतर्निहित ट्रांसफॉर्म नियंत्रण एक ही तत्व पर सेट हैं और आपके सीएसएस को ओवरराइड कर रहे हैं उन्हें साफ़ करें।
- उन्नत टैब पर कोई एमए कस्टम सीएसएस बॉक्स नहीं। एक्सटेंशन बंद है मास्टर एडॉन्स, फिर सेटिंग्स, फिर एक्सटेंशन, और इसे सक्षम करें।
अक्सर पूछे जाने वाले प्रश्न
क्या मैं एलिमेंट फ्री में तिरछी पृष्ठभूमि बना सकता हूं?
हाँ एलिमेंट फ्री में कोई कस्टम सीएसएस फ़ील्ड नहीं है, लेकिन मास्टर एडॉन्स कस्टम सीएसएस एक्सटेंशन प्रत्येक तत्व में एक जोड़ता है, और यह मुफ़्त है कंटेनर के उन्नत टैब पर एमए कस्टम सीएसएस बॉक्स में तिरछा परिवर्तन चिपकाएं किसी एलिमेंट प्रो लाइसेंस की आवश्यकता नहीं है।
अनुभाग को तिरछा करने के बाद मेरा पाठ तिरछा क्यों है?
एक सीएसएस परिवर्तन तत्व और उसके सभी बच्चों पर लागू होता है, इसलिए सामग्री पृष्ठभूमि के साथ झुकती है अंदर एक कंटेनर घोंसला और इसे विपरीत तिरछा मूल्य दें बाहरी कंटेनर पर -10deg, आंतरिक एक पर 10degऔर दोनों रद्द हो जाते हैं।
क्या तिरछी पृष्ठभूमि पृष्ठ गति को नुकसान पहुँचाती है?
नहीं, दोनों transform और clip-path क्या जीपीयू-त्वरित गुण ब्राउज़र के कंपोजिटर हैंडल हैं वे कोई स्क्रिप्ट नहीं जोड़ते हैं और कोई अतिरिक्त HTTP अनुरोध नहीं करते हैं सीएसएस की कुछ पंक्तियों की लागत एक कोणीय आकार की छवि से बहुत कम है।
मैं तिरछा के कोण को कैसे बदलूं?
डिग्री मान संपादित करें। skew(0deg, -10deg) एक मध्यम झुकाव है, -5deg सूक्ष्म है, -15deg नाटकीय है बाहरी कंटेनर के मूल्य और आंतरिक कंटेनर के काउंटर-वैल्यू को एक साथ बदलें, उन्हें बराबर और विपरीत रखें।
क्या मुझे अभी भी विक्रेता उपसर्गों की आवश्यकता है जैसे -वेबकिट-ट्रांसफॉर्म?
नहीं, अप्रमाणित transform साल के लिए हर प्रमुख ब्राउज़र में काम किया है पुराने ट्यूटोरियल में उपसर्ग लाइनें, इस एक के २०२० संस्करण सहित, हटाने के लिए सुरक्षित हैं।
लपेटकर
एलिमेंटर में एक तिरछी पृष्ठभूमि बनाना दो सीएसएस बक्से में दो नियमों के लिए नीचे आता है: बाहरी कंटेनर को तिरछा करें, आंतरिक एक को काउंटर-तिरछा जोड़ें overflow: hiddenे, मोबाइल पर कोण को कम करें, और यह केवल संपादक के बजाय वास्तविक उपकरणों पर पकड़ लेगा एक नए निर्माण पर, clip-path आधे सेटअप के साथ आपको एक ही लुक मिलता है।
तब से यह सब मुफ़्त एलिमेंटर पर चलता है मास्टर ऐडऑन क्या कस्टम सीएसएस बॉक्स को वहां शुरू करने के लिए रखता है यदि आप बाद में टूलकिट के बाकी (थीम बिल्डर, पॉपअप बिल्डर, पूर्ण एक्सटेंशन सेट) चाहते हैं, तो यही है प्रो कवर, लेकिन इस ट्यूटोरियल में कुछ भी इसकी जरूरत नहीं है।
संबंधित पढ़नाः एलिमेंटर एनीमेशन प्रभाव, एलिमेंटर में फ्लोटिंग प्रभाव कैसे जोड़ें, और एलिमेंटर में चिपचिपा हेडर कैसे बनाएं.
