Divi اور Divi بلڈر کا استعمال کرتے ہوئے خوبصورت ورڈپریس ویب سائٹس کی تعمیر

سی ایس ایس کے ساتھ ڈیوی ماڈیولز کے لئے گرڈ لے آؤٹ کیسے بنائیں

Blair2004 Divi سبق Apr 28, 2021

کیا آپ ٨٠٧١٨٤٦٤٣ کا استعمال کرتے ہوئے حیرت انگیز ویب سائٹس بنانے سے واقف ہیں؟ آپ کو شاید معلوم ہونا چاہئے کہ گرڈ لے آؤٹ دیوئی بلڈر کی ایک بنیادی خصوصیت ہے۔ عام طور پر، آپ ایک صف بنا کر شروع کرتے ہیں اور اس صف کے لئے متعدد کالم بنانے کا انتخاب کرتے ہیں۔ کالم کی جگہ کے ساتھ، کہ آپ ماڈیول شامل کریں گے. ہم ان ماڈیولز کے لئے مزید گرڈ شامل کرکے چیزوں کو مزید آگے بڑھا سکتے ہیں۔

اس پورے ٹیوٹوریل کے دوران، ہم ایک کالم کے ساتھ ڈیوی ماڈیولز کے لئے سی ایس ایس گرڈ لے آؤٹ بنا کر دیوئی کے گرڈ لے آؤٹ کو بڑھانے کا طریقہ دریافت کریں گے۔ سی ایس ایس گرڈ ہے (سی ایس ایس فلیکس کا استعمال کرتے ہوئے) صرف چند سی ایس ایس لائنوں کے ساتھ مواد کے لئے جوابدہ گرڈ بنانے کے لئے بہت مقبول ہے. اس کے بعد ہم جوابدہ ہونے کے لئے اپنے تمام ماڈیولز کو منظم کرسکتے ہیں۔ اسے ماڈیولز کے لئے ایک اضافی لے آؤٹ کے طور پر غور کریں جسے آپ دیوئی کالم میں شامل کرسکتے ہیں۔ یہاں اچھا نکتہ یہ ہے کہ ہمارے تمام گھونسلے ماڈیولز کی اونچائی اور چوڑائی ایک ہی ہوگی جس میں پیڈنگ اور اونچائی کی اقدار قائم کرنے کی ضرورت نہیں ہوگی۔

حتمی نتیجہ پیش منظر

شروع کرنے سے پہلے، آئیے دیکھتے ہیں کہ آپ اس ٹیوٹوریل کے اختتام تک کیا حاصل کر سکیں گے۔

دیوئی ماڈیول کے لئے ایک مخصوص سی ایس ایس گرڈ لے آؤٹ بنانا

حصہ 1: ڈیوی کالم میں ماڈیول شامل کرنا

سب سے پہلے چیزوں میں سے ایک جو ہمیں کرنے کی ضرورت ہے، گرڈ لے آؤٹ میں اپنے ماڈیولز کو منظم کرنا ہے۔ ہم اپنے کالم میں وہ تمام ماڈیول شامل کریں گے جو ہم استعمال کرنا چاہتے ہیں۔ آئیے طے شدہ باقاعدہ سیکشن میں ایک کالم کی نئی صف بنا کر شروع کرتے ہیں۔

Divi ڈاؤن لوڈ، اتارنا بہترین ورڈپریس تھیم

دنیا میں سب سے زیادہ مقبول ورڈپریس تھیم اور حتمی ورڈپریس پیج بلڈر

Divi ڈاؤن لوڈ، اتارنا

ماڈیول بنانا

کالموں کے اندر، ڈبلیو متن ماڈیول شامل کریں گے۔ اس کے بعد ہم مشمول سیٹنگیں اس طرح تبدیل کریں گے:

  1. پیراگراف متن کے اوپر ایک ایچ 2 سرخی شامل کریں
  2. پس منظر رنگ: #444444

ہم ڈیزائن سیٹنگوں کو درج ذیل کے طور پر اپ ڈیٹ بھی کریں گے:

  1. متن فانٹ: پوپنز
  2. متن رنگ: روشنی
  3. سرخی متن کے تحت ایچ 2 جدول منتخب کریں
  4. سرخی 2 فانٹ طرز: ٹی ٹی
  5. پیڈنگ: 10٪ اوپر, 10٪ نیچے, 10٪ بائیں 10٪ دائیں

نوٹ: اسے بہت آسان بنانے کے لئے، ہم ہر ماڈیول کے درمیان فرق ظاہر کرنے کے لئے مختلف پس منظر کے رنگوں کے ساتھ متعدد ٹیکسٹ ماڈیول استعمال کرتے رہیں گے۔

پرتوں کے منظر پر سوئچ کریں اور اگلا متن ماڈیول بنائیں جیسا کہ درج ذیل ہے:

  1. متن ماڈیول کی نقل کریں۔
  2. نقلی ماڈیول کے لیے متن سیٹنگیں کھولیں۔
  3. پس منظر رنگ پس منظر رنگ تازہ کریں: #4c6085

آپ اس عمل کو دہرا کر تیسرا متن ماڈیول بنا سکتے ہیں:

  1. پچھلے متن ماڈیول کی نقل کریں۔
  2. نقلی ماڈیول کے لیے متن سیٹنگیں کھولیں۔
  3. پس منظر رنگ پس منظر رنگ تازہ کریں: #39a0ed

ہم چوتھا ٹیکسٹ ماڈیول بنانے کے لئے اس عمل کو ایک بار پھر دہرائیں گے:

  1. پچھلے متن ماڈیول کی نقل کریں۔
  2. نقلی ماڈیول کے لیے متن سیٹنگیں کھولیں۔
  3. پس منظر رنگ پس منظر رنگ تازہ کریں: #13c4a3

اگلے چار ماڈیول بنانے کے لیے چاروں ماڈیول منتخب کرنے کے لیے ملٹی سلیکٹ فیچر استعمال کریں۔ پھر کل آٹھ ٹیکسٹ ماڈیول بنانے کے لئے ماڈیولز کو اسی کالم میں نقل اور چسپاں کریں۔

حصہ 2: آئیے ماڈیولز کے لئے سی ایس ایس گرڈ لے آؤٹ بناتے ہیں

اب جب کہ ہمارے تمام ماڈیول شامل کر لئے گئے ہیں، آئیے ان کے لئے ایک گرڈ بنائیں۔

صف سیٹنگیں

اس مثال کے طور پر، ہم ایک کالم لے آؤٹ استعمال کر رہے ہیں تاکہ ہم اپنے ماڈیول گرڈ کو مکمل چوڑائی والے لے آؤٹ میں دکھا سکیں۔ اب، ہمیں صف سیٹنگوں کو اپ ڈیٹ کرنا ہوگا تاکہ یہ یقینی بنایا جا سکے کہ صف صفحے کی مکمل چوڑائی لیتی ہے۔ ہمیں گٹر کی طے شدہ چوڑائی بھی نکالنے کی ضرورت ہوگی تاکہ ہمارے ماڈیولز میں کوئی اضافی مارجن شامل نہ کیا جائے۔

صف سیٹنگیں کھولیں اور درج ذیل تازہ کاری کریں:

  • گٹر چوڑائی: 1
  • چوڑائی: 100٪
  • زیادہ سے زیادہ چوڑائی: 100٪

ماڈیولز کے لئے گرڈ لے آؤٹ بنانے کے لئے کالم میں سی ایس ایس گرڈ شامل کرنا

یہ ٹیوٹوریل میں ایک اہم قدم ہے جو سی ایس ایس گرڈ پراپرٹی کا استعمال کرتے ہوئے ماڈیولز کے لئے لے آؤٹ بناتا ہے۔

ایسا کرنے کے لئے ہم کالم میں سی ایس ایس کی تین لائنیں شامل کرنے جارہے ہیں جو ہمارے ماڈیولز کے لے آؤٹ کا تعین کریں گی۔

کالم سیٹنگیں کھولیں اور جدید جدول کے تحت درج ذیل سی ایس ایس کو مرکزی عنصر کے اندر چسپاں کریں:

display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;

سی ایس ایس کی پہلی لائن سی ایس ایس گرڈ ماڈیول کے مطابق مواد (یا ماڈیول) بیان کرتی ہے۔

ڈسپلے:گرڈ

سی ایس ایس کی دوسری لائن پر ہم گرڈ کے کالم سانچے کی وضاحت کریں گے۔ اس صورت میں ہمارے گرڈ میں چار کالم ہوں گے جن کی چوڑائی 25 فیصد ہے۔

گرڈ سانچہ-کالم: 25٪ 25٪ 25٪

تیسری سطر میں ان صفوں کا ذکر ہے جو خود بخود پیدا ہوں گی۔ اس کا مطلب ہے کہ ہر قطار کی اونچائی کا تعین قطار کے اندر مواد (یا ماڈیول) کی عمودی اونچائی سے کیا جائے گا۔

گرڈ آٹو قطاریں: خود کار

Adjust Grid Layout on Mobile

اب، ہمیں ضرورت کے مطابق موبائل ڈیوائسز پر گرڈ لے آؤٹ کو ایڈجسٹ کرنے کی بھی ضرورت ہوگی۔

ایسا کرنے کے قابل ہونے کے لئے، ہمیں صرف ٹیبلٹ اور موبائل دونوں میں کچھ سی ایس ایس شامل کرنے کی ضرورت ہوگی جو کالموں کی تعداد اور ہر کالم کی چوڑائی کو تبدیل کرتا ہے۔

اس مثال میں، ہم ٹیبلٹس پر ماڈیولز کے لئے گرڈ لے آؤٹ کو تبدیل کرنے جا رہے ہیں جو دو کالم ہیں جو چوڑائی میں ہر 50 فیصد ہیں۔

آئیے جوابدہ اختیارات کھولیں اور بنیادی عنصر کے تحت ٹیبلٹ ٹیب منتخب کریں اور درج ذیل سی ایس ایس پیسٹ کریں:

display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;

فون ڈسپلے کے لیے ہم سنگل کالم لے آؤٹ چاہتے ہیں۔ اس کو بنانے کے لیے، فون ٹیب مین عنصر کے تحت درج ذیل سی ایس ایس چسپاں کریں:

display:grid;grid-template-columns: 100%;grid-auto-rows: auto;

حصہ 3: گرڈ ماڈیول میں تبدیلیاں کرنا

گرڈ میں ایک نیا ماڈیول شامل کرنا اور یہ کس طرح رد عمل ظاہر کرتا ہے

اب جب کہ ہمارے پاس گرڈ میں ہر ماڈیول ہے، اگر ہم مزید ماڈیول شامل کریں تو دوسرے کو دائیں طرف دھکیل دیا جائے گا اور نئی قطاریں بنائی جائیں گی۔ چونکہ ہمیں بہرحال اس لے آؤٹ کے لئے ایک اور ماڈیول کی ضرورت ہے، پہلے ٹیکسٹ ماڈیول کو ڈپلیکیٹ کریں تاکہ یہ دیکھا جا سکے کہ دوسرے ماڈیول گرڈ کے اندر کس طرح ایڈجسٹ ہوتے ہیں۔

گرڈ مواد کی مختلف مقدار کے ساتھ ماڈیول کا جواب کیسے دیتا ہے

اس دوران، تمام ماڈیول مواد کی ایک ہی مقدار ہے, تو ہم واقعی نہیں دیکھ سکتے کہ گرڈ کس طرح ماڈیول ہے کہ مختلف اونچائیوں ہے سنبھالے گا. یہ دیکھنے کے لئے کہ یہ کیسے کام کرتا ہے، ہر ماڈیول کے اندر پیراگراف متن کی مقدار تبدیل کریں۔ غور کریں کہ ماڈیول ایک ہی صف میں زیادہ تر مواد کے ساتھ ماڈیول کے طور پر ایک ہی اونچائی رہے گا. اب سے صف کی اونچائی کا تعین بھی سب سے زیادہ مواد (یا عمودی اونچائی) کے ساتھ ماڈیول کے ذریعہ کیا جائے گا۔

گرڈ پر ماڈیول ز کی پوزیشن تبدیل کرنا

سی ایس ایس گرڈ کی اشیاء کو گرڈ ماڈیول پر بلٹ ان نمبرنگ سسٹم کا استعمال کرتے ہوئے پوزیشن کیا جاسکتا ہے۔ گرڈ پر ہر لائن ایک عدد کی نمائندگی کرتی ہے۔ کالموں کے لیے لائن نمبر 1 سے شروع ہوتے ہیں اور افقی طور پر جاری رہتے ہیں۔ ہر سطر نمبر ہر کالم کے شروع اور آخر میں بیٹھتا ہے۔ چنانچہ ہمارے کالم کے ڈھانچے کے لیے لائن نمبر پہلے کالم کے بائیں جانب 1 سے شروع ہوتا ہے اور چوتھے کالم کے دائیں جانب 5 پر ختم ہوتا ہے۔ اور چونکہ ہمارے پاس تین قطاریں ہیں اس لیے قطاروں کے لائن نمبر پہلی صف کے اوپر 1 اور تیسری قطار کے نچلے حصے میں 4 تک شروع ہوتے ہیں۔

اگر ہم سی ایس ایس گرڈ میں ایک ماڈیول (یا گرڈ آئٹم) کی پوزیشن تبدیل کرنا چاہتے ہیں، تو ہم وضاحت طے کر سکتے ہیں کہ ہم کہاں چاہتے ہیں کہ ایک مخصوص ماڈیول گرڈ میں رکھا جائے۔ ایسا کرنے سے گرڈ میں ماڈیول کی طے شدہ جگہ ختم ہوجائے گی۔

اس مثال کے طور پر، ہم پہلے ٹیکسٹ ماڈیول کو ایک مختلف پوزیشن پر منتقل کریں گے۔ اس کے لئے، ہمیں صرف ماڈیول میں سی ایس ایس کی دو لائنیں شامل کرنے کی ضرورت ہے۔

پہلے متن ماڈیول کے لیے سیٹنگیں کھولیں اور درج ذیل مخصوص سی ایس ایس کو مرکزی عنصر پر چسپاں کریں:

grid-column: 2/4;grid-row: 2/3;

سی ایس ایس کی پہلی لائن ماڈیول کو کالم لائن 2 پر شروع کرنے اور کالم لائن 4 پر ختم کرنے کے لئے کہہ کر ماڈیول کی پوزیشن کو افقی طور پر واضح کرتی ہے۔

گرڈ کالم: 2/4

سی ایس ایس کی دوسری لائن ماڈیول (یا گرڈ آئٹم) کی پوزیشن کو عمودی طور پر یہ کہہ کر وضاحت کرتی ہے کہ ماڈیول کو قطار لائن 2 پر شروع کریں اور صف لائن 3 پر ختم کریں۔

گرڈ صف: 2/3

ٹیبلٹ اور فون ڈسپلے کے لیے ہم ماڈیول کو اصل مقام پر واپس لائیں گے۔ یہ آپ کے مرکزی سرتحریر کو صفحے کے اوپر رکھنے کے لئے مددگار ہے۔

لہذا اس کے لیے، مرکزی عنصر کے لیے جوابدہ اختیار کے تحت ٹیبلٹ ٹیب منتخب کریں اور درج ذیل سی ایس ایس پیسٹ کریں:

grid-column: auto;grid-row: auto;

اب ماڈیول کی پوزیشن گرڈ اشیاء کے اصل (خودکار) بہاؤ پر واپس جائے گی۔

آئیے آگے بڑھتے ہیں اور اس طریقہ کار کا استعمال کرتے ہوئے کچھ اور ماڈیول (یا گرڈ آئٹمز) کی پوزیشن کرتے ہیں۔

اب ہم تیسرے ٹیکسٹ ماڈیول (اب اوپر کی صف کے دوسرے کالم میں) کو گرڈ کے اندر ایک نئے سیٹ مقام پر رکھیں گے۔ یہ نئی پوزیشن کالم لائن 1 سے شروع ہو کر کالم لائن 2 پر ختم ہو گی اور صف لائن 2 سے شروع ہو کر صف لائن 4 پر ختم ہو جائے گی۔

ایسا کرنے کے لیے، تیسرے متن ماڈیول کے لیے سیٹنگیں کھولیں اور درج ذیل مخصوص سی ایس ایس کو مرکزی عنصر پر چسپاں کریں:

grid-column: 1/2;grid-row: 2/4;

اب ہم ٹیبلٹ کے لئے مندرجہ ذیل سی ایس ایس شامل کرکے موبائل کی پوزیشن تبدیل کرسکتے ہیں:

grid-column: auto;grid-row: auto;

ہماری آخری ترمیم کے لئے، ہم گرڈ کے اندر ایک نئے سیٹ مقام پر ساتویں ماڈیول پوزیشن کریں گے. یہ نئی پوزیشن کالم لائن 4 سے شروع ہو کر کالم لائن 5 پر ختم ہو گی اور صف لائن 2 سے شروع ہو کر صف لائن 4 پر ختم ہو جائے گی۔

اس کے لیے، آئیے ساتویں ٹیکسٹ ماڈیول کے لیے سیٹنگیں کھولیں اور درج ذیل مخصوص سی ایس ایس کو مرکزی عنصر میں چسپاں کریں:

grid-column: 4/5;grid-row: 2/4;

اب ٹیبلٹ ڈسپلے کے لیے درج ذیل سی ایس ایس پیسٹ کریں۔

grid-column: auto;grid-row: auto;

مرکز میں مشمول ماڈیول (یا گرڈ آئٹم) سیدھ میں لا رہا ہے

آپ شاید تعلیم سے تھک چکے ہیں، لیکن اگر ہم یہاں رک جائیں تو ہم اپنے ماڈیول مواد کو عمودی طور پر سیدھ میں لانے (یا مرکز) کرنے کے ایک مددگار طریقے سے محروم رہ جائیں گے۔ ماڈیول مواد عمودی طور پر مرکوز ہونا ایک گرڈ لے آؤٹ کی ایک اچھی خصوصیت ہے کیونکہ یہ ہر چیز کو زیادہ متناسب اور جمالیاتی طور پر خوشگوار بناتا ہے۔

لہذا اس کے لئے، ہم سی ایس ایس کا ایک ٹکڑا شامل کر سکتے ہیں جو مرکز میں مواد کو سیدھ میں لانے اور جواز فراہم کرنے کے لئے فلیکس سی ایس ایس پراپرٹی کا استعمال کرتا ہے۔ ہمیں ہر ماڈیول میں یہ ٹکڑا شامل کرنے کی ضرورت ہے۔ ہم ان تمام ماڈیولز (یا گرڈ آئٹمز) کو منتخب کرنے کے لئے کثیر منتخب استعمال کر سکتے ہیں جن میں پہلے سے ہی مرکزی عنصر کے لئے مخصوص سی ایس ایس نہیں ہے (کیونکہ ہم مخصوص پوزیشنوں کے ساتھ ان ماڈیولز کو ختم نہیں کرنا چاہتے)۔ پھر منتخب ماڈیولوں میں سے کسی ایک کے لیے سیٹنگیں کھول کر عنصر سیٹنگیں کھولیں۔ جدید ٹیب کے تحت، مرکزی عنصر پر درج ذیل سی ایس ایس چسپاں کریں:

display:flex;flex-direction:column;align-items:center;justify-content:center;

اب ہم انفرادی طور پر اپنے دیگر تین ماڈیولز (ماڈیول #1، #3 اور #7) پر واپس جا سکتے ہیں اور سی ایس ایس کے علاوہ سی ایس ایس کا وہی ٹکڑا شامل کرسکتے ہیں جو ماڈیول کو گرڈ پر ایک مخصوص پوزیشن دینے کے لئے استعمال کیا گیا تھا۔ ڈیسک ٹاپ اور ٹیبلٹ دونوں کے لئے موجودہ سی ایس ایس کے تحت سی ایس ایس کا ٹکڑا شامل کرنا یقینی بنائیں۔

حتمی نتیجہ

یہاں ہے کہ ہم نے اب تک جو کچھ کیا وہ کیسا لگتا ہے۔

کیا آپ دیکھ سکتے ہیں کہ کس طرح ماڈیول (یا گرڈ آئٹمز) ایک اچھے جوابدہ ڈیزائن کے لئے مختلف براؤزر چوڑائیوں پر آسانی سے ایڈجسٹ کرتے ہیں۔

مختلف ماڈیول اور ڈیزائن کا استعمال کرتے ہوئے حقیقی مثال

اگر آپ اس گرڈ سسٹم کا استعمال کرتے ہوئے ایک حقیقی مثال دیکھنا چاہتے ہیں، تو آپ مختلف ماڈیول استعمال کر سکتے ہیں۔ یہاں وہ ہے جو آپ اس تکنیک کا استعمال کرتے ہوئے بنا سکتے ہیں۔ یہ فٹنس جم لے آؤٹ پیک پر دستیاب ہے۔

اب آپ کے تمام میں

اس ٹیوٹوریل میں، ہم ڈیوی ماڈیولز کے لئے سی ایس ایس گرڈ لے آؤٹ بنانے پر کام کر رہے ہیں۔ اگرچہ یہ عمل کچھ مخصوص سی ایس ایس پر انحصار کرتا ہے، لیکن حیرت انگیز طور پر اتنا زیادہ نہیں ہے، اس سے ہمارے طاقتور نتائج پر غور کرتے ہوئے۔ جب مزید منفرد دیوئی لے آؤٹ کی ضرورت ہو تو کالم کی سطح پر اپنے تمام ماڈیولز کے لے آؤٹ کو کنٹرول کرنے کے قابل ہونا اچھا ہے۔ اگر آپ سی ایس ایس کے عادی ہیں اور مزید غوطہ لگانا چاہتے ہیں، تو آپ کو مزید امکانات پر غور کرنے کے لئے یہ مکمل رہنما چیک کرنا چاہئے۔

ہمیں خوشی ہوگی تو دیکھیں کہ آپ تبصروں کے حصے میں کتنے کامیاب ہیں۔

Share Your Thoughts