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

ڈوی پر سکرال کرتے وقت ہیڈر کو چھپانے کا طریقہ

Rifat Divi سبق May 12, 2021

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

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

چوری چھپے جھانکنا

ہم مرکزی سیکشن میں کودنے سے پہلے ہمارے ڈیزائن کے نتائج پر نظر ڈالیں گے.

تعمیر: ہیڈر کی ساخت

ڈیش بورڈ سے گلوبل ہیڈر بنائیں

اپنے ڈیش بورڈ سے ڈوی کے تحت "تھیم بلڈر" اختیار پر جائیں اور تصویر میں دکھایا گیا اختیار سے "گلوبل ہیڈر کی تعمیر" کا انتخاب کریں.

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

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

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

ترتیبات: گلوبل ہیڈر سیکشن

پس منظر کا رنگ

ہیڈر ٹیمپلیٹ کو منتخب کرنے کے بعد، "سکریچ سے تعمیر کریں." پھر پرت اختیار کھولیں، اور آپ پہلے سے پیدا شدہ سیکشن دیکھیں گے. سیکشن کے لئے کھولیں ترتیبات اور پس منظر کو تبدیل کریں.

  • پس منظر کا رنگ: # 002854.

اسپیسنگ

ڈیزائن ٹیب کے تحت، کچھ وقفہ کاری اقدار کو تبدیل کریں.

  • اوپر بھرنے: 0px.
  • نیچے کی بھرتی: 0px.

نئی قطار شامل

کالم کی ساخت

مندرجہ ذیل صف کو شامل کریں جو سیکشن میں کالم ڈھانچہ نشان لگا دیا گیا ہے.

پس منظر کا رنگ

اس قطار میں ہم کسی بھی ماڈیول کو شامل کرنے سے پہلے، چلو کچھ ایڈجسٹمنٹ بناتے ہیں. پس منظر کے رنگ کے ساتھ شروع کریں.

  • پس منظر کا رنگ: # 002854.

Sizing.

ڈیزائن ٹیب کے تحت، قطار کے سائز کی اقدار کو تبدیل کریں.

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

اسپیسنگ

اب، پیڈنگ اقدار کو بھی تبدیل کریں.

  • اوپر بھرنے: 0px.
  • نیچے کی بھرتی: 0px.
  • بائیں پڈنگنگ: ٹیبلٹ اور فون: 5٪
  • دائیں پیڈنگ: ٹیبلٹ اور فون: 5٪

ترتیبات: کالم 1.

پس منظر کا رنگ

پوری قطار کو ڈیزائن کرنے کے بعد، ہم کالم ڈیزائن کرنا شروع کریں گے 1. سب سے پہلے ہم ایک پس منظر کا رنگ شامل کریں گے.

  • پس منظر کا رنگ: # 85A8B2.

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

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

اب ہم کالم میں مینو ماڈیول شامل کریں گے 1. اپنی پسند کے مطابق ایک مینو کا انتخاب کریں.

لوگو

اب، آپ کے ہیڈر میں علامت (لوگو) شامل کریں.

پس منظر کا رنگ

اب ایک پس منظر کا رنگ شامل کریں.

  • پس منظر کا رنگ: # 063765.

پس منظر کی تصویر

اب آپ کی پسند کی ایک تصویر شامل کریں اور مندرجہ ذیل ایڈجسٹمنٹ بنائیں.

  • پس منظر کی تصویر کا سائز: فٹ
  • پس منظر کی تصویر کی پوزیشن: سینٹر

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

ماڈیول کے ڈیزائن ٹیب پر منتقل کریں اور مینو متن کا سائز تبدیل کریں.

  • متن کا رنگ: #ffffff.
  • مینو ٹیکسٹ سائز: 18px.

ترتیبات: ڈراپ مینو

اب، ڈراپ ڈاؤن مینو کی ترتیبات کو مندرجہ ذیل تبدیل کریں:

  • ڈراپ ڈاؤن مینو لائن رنگین: RGBA (0،0،0،0)
  • موبائل مینو پس منظر کا رنگ: # DDC1A7.
  • موبائل مینو متن کا رنگ: # 063765.

ترتیبات: آئکن

اب، تمام شبیہیں سفید کو تبدیل کریں.

  • خریداری کی ٹوکری آئکن رنگ: #FFFFF.
  • تلاش آئکن رنگ: #FFFFF.
  • ہیمبرگر مینو آئکن رنگ: #ffffff.

Sizing.

پھر، علامت (لوگو) sizing ترتیبات میں ترمیم کریں.

  • علامت (لوگو) زیادہ سے زیادہ چوڑائی: 70px.

اسپیسنگ

کچھ تبدیلیاں پڈنگنگ میں بنائیں.

  • اوپر بھرتی: 1٪
  • نیچے کی بھرتی: 1٪
  • بائیں پڈنگنگ: 5٪
  • دائیں پڈنگنگ: 5٪

باکس سائے

اپنی مرضی کے مطابق باکس سائے میں کچھ تبدیلیاں شامل کریں.

  • باکس شیڈو بلور طاقت: 50px.
  • شیڈو رنگ: آر جی بی اے (0،0،0،0.3)

ٹرانسمیشن ترجمہ

اب، مندرجہ ذیل ترتیبات میں ترمیم کی ترتیبات کو تبدیل کرکے ماڈیول کی ترتیبات ختم کریں:

  • دائیں: ڈیسک ٹاپ: 20px، ٹیبلٹ اور فون: 0px

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

بٹن ماڈیول کی ترتیب

بٹن ماڈیول کو کالم 2 میں شامل کریں اور اپنی پسند کا کچھ متن شامل کریں.

بٹن کی سیدھ

ڈیزائن ٹیب سے، بٹن کی سیدھ کو تبدیل کریں.

  • بٹن کی سیدھ: دائیں

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

اس کے بعد، بٹن سٹائل کے مطابق تبدیل کریں.

  • بٹن کے لئے اپنی مرضی کے مطابق شیلیوں کا استعمال کریں: جی ہاں
  • بٹن ٹیکسٹ سائز: 16px.
  • بٹن متن کا رنگ: # 2A2A2A.
  • بٹن پس منظر کا رنگ: #ffffff.
  • بٹن سرحد کی چوڑائی: 0px.
  • بٹن سرحد رنگین: RGBA (0،0،0،0)
  • بٹن فونٹ وزن: بولڈ
  • بٹن فونٹ سٹائل: اونچائی

اسپیسنگ

بٹن پر شکل بنانے کے لئے کچھ اپنی مرضی کے مطابق بھرتی شامل کریں.

  • اوپر بھرتی: 20px.
  • نیچے کی بھرتی: 20px.
  • بائیں پڈنگنگ: 40px.
  • دائیں پیڈنگ: 40px.

باکس سائے

اب ہم ایک باکس سائے (ایک نشان لگا دیا گیا) شامل کریں گے.

  • باکس شیڈو دھندلا طاقت: 30px.
  • شیڈو رنگ: آر جی بی اے (0،0،0،0.18)

ٹرانسمیشن ترجمہ

ہم تقریبا ماڈیول کے ساتھ کئے جاتے ہیں. تبدیل کرنے کے سیکشن پر کچھ ایڈجسٹمنٹ کے ساتھ اسے ختم کریں.

  • دائیں: ڈیسک ٹاپ: 50px، ٹیبلٹ اور فون: 0px

شامل کریں: ہیڈر کے لئے چپچپا اثرات

صف ترتیبات

ہم نے اپنے ہیڈر سیکشن کی ساخت کی تعمیر مکمل کردی ہے. اب ہم اس کے لئے ایک چپچپا اثر شامل کریں گے. اس کے لئے، ہمیں قطار کی ترتیبات سے کچھ اقدار تبدیل کرنے کی ضرورت ہے.

پوزیشن

سب سے پہلے، پوزیشن ایڈجسٹمنٹ بنائیں.

  • پوزیشن: مطلق
  • مقام: اوپر بائیں

چسپاں ترتیبات - سکرال اثرات

اگلا، ہم سیکشن کی ترتیبات کھولیں گے اور اسے سب سے اوپر رکھنا چاہتے ہیں.

  • چسپاں پوزیشن: اوپر اوپر چسپاں
  • نیچے چپچپا حد: کوئی بھی نہیں
  • ارد گرد چپچپا عناصر سے آفسیٹ: جی ہاں
  • منتقلی ڈیفالٹ اور چپچپا شیلیوں: جی ہاں

حرکت پذیری

اب ہم ایک حرکت پذیری شامل کریں گے تاکہ زائرین کو صفحہ لوڈنگ کے دوران ہیڈر کو نہیں دیکھا جائے گا.

  • حرکت پذیری انداز: دھندلا

منتقلی کی مدت

منتقلی کی مدت کی قیمت کو تبدیل کرکے، ہم منتخب کریں گے کہ سکرال کے دوران ہیڈر کے دوران ہیڈر کتنا تیز یا سست ہے.

  • منتقلی کی مدت: 800ms.

ٹرانسمیشن ترجمہ

چونکہ ہم ابتدائی طور پر ہمارے ہیڈر کو نہیں دکھانے کے لئے نہیں چاہتے ہیں، ہم ٹرانسمیشن کی ترتیبات سے Y-Adis کے لئے منفی قیمت شامل کریں گے.

  • دائیں: -300px.

اب چپچپا ترتیبات سے، قیمت 0 دوبارہ بنائیں. مطلب یہ ہے کہ، یہ ہمیں مینو دکھائے گا جیسے ہی ہم طومار شروع کرتے ہیں.

  • چسپاں دائیں: 0px.

نمائش کے لئے سی ایس ایس کی جائیداد

اس سیکشن میں، ہم ایسے عناصر کو چھپانے کے لئے ایک سی ایس ایس کی جائیداد شامل کریں گے جو استعمال نہیں کیا جا رہا ہے. یہ یاد رکھنا چاہیے کہ یہ لازمی کام نہیں ہے، لیکن یہ ایسا کرنے کا ایک اچھا خیال ہے.

visibility: hidden;

اب ہم دوبارہ اپنے مینو کو چپچپا ریاست میں نظر انداز کریں گے.

visibility: visible;

حتمی نتیجہ

چونکہ ہم نے کامیابی سے تمام اقدامات کئے ہیں، یہاں ہمارے حتمی نتائج ہیں.

حتمی الفاظ

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