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

ڈویوی ہیڈر کے اندر مینو بار کراسنگ لوگو کو کیسے ڈیزائن کریں

Rifat Divi سبق Jul 23, 2021

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

چپکے چپکے

یہ ہیڈر ڈیزائن ہے جسے ہم آج تخلیق کرنے جارہے ہیں۔

سیکشن ون: گلوبل ہیڈر ٹیمپلیٹ

سب سے پہلے ، ہمیں عالمی ہیڈر ٹیمپلیٹ بنانے کی ضرورت ہے۔ اس کے ل let's ، آئیے "Divi" پر جائیں

"گلوبل ہیڈر شامل کریں" کے اختیار پر کلک کریں اور آپ کو ڈراپ ڈاؤن مینو نظر آئے گا۔ "عالمی سطح پر ہیڈر بنائیں" کو منتخب کریں اور آگے بڑھیں۔

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

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

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

سیکشن دو: ہیڈر ڈیزائننگ

شامل کرنا: خصوصیت کا سیکشن

ہم اس ڈیزائن کو بنانے کے لئے اسپیشلیٹی سیکشن منتخب کریں گے۔

کالم کا ڈھانچہ

براہ کرم ، اس حصے کے لئے نشان زدہ کالم ڈھانچہ منتخب کریں۔

پس منظر کا رنگ: کالم 1

اب ، نئے بنائے گئے اسپیشلٹی سیکشن کی کالم 1 سیٹنگ کھولیں اور بیک گراؤنڈ کا رنگ تبدیل کریں۔

  • پس منظر کا رنگ: آرجیبا (255،191،0،0.27)

سائز

ڈیزائن ٹیب سے درج ذیل اقدار کو تبدیل کریں۔

  • کالم کی اونچائی کو مساوی بنائیں: ہاں
  • کسٹم گٹر چوڑائی کا استعمال کریں: جی ہاں
  • گٹر کی چوڑائی: 1
  • اندرونی چوڑائی: 100
  • اندرونی زیادہ سے زیادہ چوڑائی: 2580px

وقفہ کاری

اب اسی ڈیزائن ٹیب سے وقفہ کاری کی ترتیب پر جائیں۔

  • اوپر کی بھرتی: 0px
  • نیچے کی بھرتی: 0 px
  • کالم 1 ٹاپ پیڈنگ: 0 پکس
  • کالم 1 نیچے کی بھرتی: 0 px
  • کالم 2 اوپر کی بھرتی: 0 px
  • کالم 2 نیچے کی بھرتی: 0 px

کالم سی ایس ایس IDs

ایڈوانسڈ ٹیب کے تحت ، آئیے دونوں کالموں پر ایک کسٹم سی ایس ایس آئی ڈی لگائیں۔

  • کالم 1 سی ایس ایس ID: ہیڈر-پہلا کالم
  • کالم 2 سی ایس ایس ID: ہیڈر دوسرا کالم

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

تصویری اپلوڈ

اب کالم 1 میں تصویری ماڈیول شامل کریں اور اپنا لوگو داخل کریں۔

صف بندی

اب ڈیزائن ٹیب پر جائیں اور تصویری سیدھ میں تبدیل کریں۔

  • تصویری سیدھ: مرکز

سائز

sizing سیکشن سے ، زیادہ سے زیادہ چوڑائی کی قیمت کو تبدیل کریں۔

مرئیت

اب ، اس خاص ماڈیول کو چھوٹے آلات سے چھپائیں ، ہم موبائل اور ٹیبلٹ کی مرئیت کو غیر فعال کردیں گے۔

شامل کرنا: قطار 1 سے کالم 2

کالم کا ڈھانچہ

ہم اپنے مخصوص حصوں کے کالم 2 پر نشان زدہ کالم کا ڈھانچہ شامل کریں گے۔ یہ ہماری پہلی صف کے طور پر کام کرے گا۔

پس منظر کا رنگ

قطار کی ترتیب سے پس منظر کا رنگ لگائیں۔

  • پس منظر کا رنگ: rgba (161،99،255،0.1)

وقفہ کاری

ڈیزائن ٹیب سے ، اسپیسنگ کی ترتیبات کو حسب ذیل تبدیل کریں:

  • اوپر کی بھرتی: 10px
  • نیچے کی بھرتی: 10px
  • بائیں بازو: 5٪
  • دائیں بھرتی: 5٪

بارڈر

اب ، بارڈر سیٹنگ میں کچھ تبدیلیاں کریں۔

  • نیچے بارڈر چوڑائی: 3px
  • بائیں بازو کی چوڑائی: ڈیسک ٹاپ: 3px ، ٹیبلٹ اور فون: 0 px
  • بارڈر کا رنگ: # 6c2eb9

مین عنصر سی ایس ایس

اب ، اعلی درجے کے ٹیب سے "مین عنصر" بلاک میں سی ایس ایس کوڈ لکھ دیں۔

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

مرئیت: کالم 1 اور 2 چھپائیں

ہم آسان تر ڈیزائننگ کے ل smaller چھوٹے آلات کیلئے کالم 1 اور 2 کی نمائش چھپائیں گے۔ یہ ہمارے ڈیزائن کو صاف ستھرا کردے گا۔

شامل کرنا: کالم 1 میں سوشل میڈیا ماڈیول

سوشل نیٹ ورک کا اضافہ

آئیے کالم ون میں سوشل میڈیا فالو ماڈیول شامل کریں۔ اپنا مطلوبہ سوشل میڈیا پلیٹ فارم چنیں اور یہاں شامل کریں۔

پس منظر اور شبیہ کے لئے رنگ تبدیل کریں

ہم سوشل میڈیا فالو ماڈیول پر کچھ رنگین ٹویکس کریں گے۔

  • پس منظر کا رنگ: # DBDD54
  • آئکن کا رنگ: آرجیبا (123،15،255،0.46)

بارڈر

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

  • تمام کونے: 100px

شامل کرنا: کالم 2 میں ٹیکسٹ ماڈیول

ماڈیول اور مشمولات

کالم 2 میں ٹیکسٹ ماڈیول شامل کریں اور اپنی پسند کے مطابق ٹیگ لائن یا کچھ بھی شامل کریں۔

متن کی ترتیبات

متن کا انداز تبدیل کریں۔

  • ٹیکسٹ فونٹ: پاپپنز
  • متن کی سیدھ: مرکز

شامل کرنا: بٹن ماڈیول کالم 3

ماڈیول اور مشمولات

کالم 3 میں ، ایک بٹن ماڈیول اور اپنی پسند کا مواد شامل کریں۔

بٹن سیدھ

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

  • بٹن سیدھ: ڈیسک ٹاپ: دائیں ، ٹیبلٹ اور فون: مرکز

بٹن کی ترتیبات

اب مزید پرکشش بنانے کے لئے بٹن میں کچھ ایڈجسٹمنٹ کریں۔

  • بٹن کے لئے کسٹم اسٹائل کا استعمال کریں: جی ہاں
  • بٹن ٹیکسٹ سائز: 14px
  • بٹن متن کا رنگ: # DBDD54
  • بٹن کے پس منظر کا رنگ: # 158DD8
  • بٹن فونٹ: پاپینز
  • بٹن فونٹ وزن: بولڈ
  • بٹن فونٹ انداز: بڑے
  • بٹن کی علامت دکھائیں: ہاں
  • بٹن آئکن کی جگہ کا تعین: بائیں

وقفہ کاری

اب بھرتی ہوئی اقدار میں درج ذیل تبدیلیاں کریں۔

  • اوپر کی بھرتی: 10px
  • نیچے کی بھرتی: 10px
  • بائیں پیڈنگ: 50px
  • دائیں بھرتی: 30px

شامل کرنا: قطار 2 سے کالم 2

کالم کا ڈھانچہ

اب ، ہم اس کالم ماڈیول میں آخری قطار شامل کریں گے۔

پس منظر کا رنگ

درج ذیل رنگ کا پس منظر کے طور پر استعمال کریں۔

  • پس منظر کا رنگ: rgba (161،99،255،0.1)

وقفہ کاری

قطار کی وقفہ کاری کی ترتیبات کو ایڈجسٹ کریں۔

  • اوپر کی بھرتی: 20px
  • نیچے کی بھرتی: 20 پکس
  • بائیں بازو: 5٪
  • دائیں بھرتی: 5٪

بارڈر

اس کے بعد ، درج ذیل بارڈر کی ترتیبات کا اطلاق کریں:

  • بائیں بازو کی چوڑائی: ڈیسک ٹاپ: 3px ، ٹیبلٹ اور فون: 0 px
  • بائیں سرحد کا رنگ: # 6c2eb9

شامل کرنا: کالم 2 میں مینو ماڈیول

اب ، آپ کی ضرورت کا مینو منتخب کریں اور اسے مرتب کریں۔

ٹیبلٹ اور فون کیلئے لوگو اپ لوڈ کریں

چھوٹے اسکرین سائز والے آلات کیلئے لوگو شامل کریں۔

مینو متن کی ترتیبات

اب مینو کے متن میں کچھ ایڈجسٹمنٹ کریں تاکہ یہ زیادہ منظم نظر آئے۔

  • مینو فونٹ: پاپینز
  • مینو متن کا رنگ: # 6c2eb9
  • مینو ٹیکسٹ سائز: 16 پکس

ڈراپ ڈاؤن مینو متن کی ترتیبات

اب ہمارے ڈراپ ڈاؤن مینو میں لائن رنگ شامل کریں۔

  • ڈراپ ڈاؤن مینو لائن رنگین: rgba (0،0،0،0)

شبیہیں کی ترتیبات

اب ، آئکن کی ترتیبات کو تبدیل کریں۔

  • خریداری کی ٹوکری کی علامت کا رنگ: # 6c2eb9
  • تلاش کریں آئکن کا رنگ: # 6c2eb9
  • ہیمبرگر مینو آئکن کا رنگ: # 6c2eb9

سائز

گولی اور فون پر لوگو کی زیادہ سے زیادہ چوڑائی لگائیں۔

  • لوگو زیادہ سے زیادہ چوڑائی: ٹیبلٹ: 70px اور فون: 50px

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

ہمارے ہیڈر ڈیزائن میں تبدیلیاں لانے کے ل we ، ہم تھوڑی سی ایس ایس ایڈجسٹمنٹ کریں گے۔ ایسا کرنے کے ل column ، کالم 1 میں کوڈ ماڈیول شامل کریں۔ اب ذیل میں کوڈ کاپی کریں اور اسے اس ماڈیول میں چسپاں کریں۔ ان کو اسٹائل کوڈ کے درمیان رکھنا یقینی بنائیں۔

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}
 
#header-second-column {
width: 90% !important;
}
}
 
@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

سیکشن تین: ڈیزائن کو محفوظ کریں

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

حتمی دیکھو

تو ہمارا آخری ڈیزائن ایسا ہی لگتا ہے۔

نتیجہ اخذ کرنا

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