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

Franklin ورڈپریس سبق Dec 10, 2020

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

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

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

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

1. ایک نئے ہیڈر ٹیمپلیٹ میں ہیڈر عنصر کے ڈھانچے کی تعمیر

نیا عالمی ہیڈر ٹیمپلیٹ بنائیں

پہلا قدم گلوبل ہیڈر ٹیمپلیٹ حاصل کرنا ہے اور اسے Divi builder مرکزی خیال پر ڈاؤن لوڈ کرنا ہے۔ Divi پر ، آپ ایک نیا عالمی یا کسٹم ہیڈر بنائیں گے۔

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

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

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

سیکشن # 1 مرتب کریں

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

Gradient background

ہم پہلے درج ذیل تدریجی پس منظر کا اطلاق کریں گے:

  • رنگین 1: # ffba60
  • رنگین 2: # ffd6a0
  • تدریجی سمت: 90deg
  • شروع مقام: 50٪
  • اختتامی پوزیشن: 50٪

Spacing

آپ کو اگلے سب کو پہلے سے طے شدہ اور نیچے کی بھرتی کو ختم کرنا ہوگا۔

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

ایک نئی قطار شامل کریں

اپنا سر فہرست بار بنانے کے ل، ، ہم اپنے حصے میں ایک نئی قطار شامل کریں گے۔

Column Structure

مندرجہ ذیل کالم ڈھانچے کا استعمال کرکے نئی صف کی تعریف کی جانی چاہئے۔

Sizing

ابھی تک کسی ماڈیول کو شامل کیے بغیر ، صف کی ترتیبات کو کھولیں اور سائز کی ترتیبات کو مندرجہ ذیل میں ترمیم کریں:

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

Spacing

اس سطح پر ، آپ کچھ کسٹم ٹاپ اور نیچے پیڈنگ شامل کریں گے۔

  • اوپر کی بھرتی: 15 پکس
  • نیچے کی بھرتی: 15 پکس

Main Element CSS

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

01display: flex;

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

اب ہم ماڈیولز شامل کرسکتے ہیں۔ آئیے کالم 1 میں ایک سوشل میڈیا فالو ماڈیول کے ساتھ آغاز کریں۔

Add Social Networks of Choice

آپ اپنی پسند کے سوشل نیٹ ورکس کو ان کے متعلقہ لنکس کے ساتھ شامل کریں گے۔

پھر ، آپ کو ہر سوشل نیٹ ورک کا پس منظر کا رنگ ختم کرنا ہوگا۔

Icon Settings

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

  • آئکن کا رنگ: # 26333a

Spacing

کچھ اوپر مارجن شامل کریں۔

  • ٹاپ مارجن: 5px

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

کالم 2 میں ، ہمیں جس واحد ماڈیول کی ضرورت ہے وہ بٹن ماڈیول ہے۔ آپ پہلے اپنی پسند کی ایک کاپی شامل کریں گے۔

پھر آپ ایک لنک شامل کریں۔

اس کے بعد ، آپ کو ڈیزائن ٹیب پر جانے اور بٹن کی سیدھ کو تبدیل کرنے کی ضرورت ہے۔

  • بٹن سیدھ: ٹھیک ہے

آئیے بٹن کیلئے اسٹائل کے کچھ عناصر تشکیل دیں:

  • بٹن کے لئے کسٹم اسٹائل کا استعمال کریں: جی ہاں
  • بٹن ٹیکسٹ سائز: 14px
  • بٹن متن کا رنگ: # 26333a
  • بٹن بارڈر کی چوڑائی: 2px
  • بٹن بارڈر کا رنگ: # 26333a
  • بٹن بارڈر رداس: 0 px
  • بٹن خط وقفہ کاری: 4px
  • بٹن فونٹ وزن: بولڈ
  • بٹن فونٹ انداز: بڑے
  • بٹن دکھائیں: ہاں

اور ہم فاصلاتی ترتیبات میں کچھ اوپر اور نیچے کی پیڈنگ شامل کرکے ماڈیول کی ترتیبات کو مکمل کریں گے۔

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

سیکشن 1 کی تشکیل اب مکمل ہوچکی ہے۔ اب ہم مینو میں دوسرا سرشار سیکشن شامل کرنے جارہے ہیں ، جو اس ٹیوٹوریل کے دوسرے حصے میں چپچپا ہوجائے گا۔

دفعہ # 2 شامل کریں

مینو کے لئے مختص سیکشن 2 کو پچھلے حصے کے نیچے ہی شامل کیا جائے گا۔ جیسا کہ سیکشن 1 کی طرح ، ہم پہلے گراڈینٹ بیک گراؤنڈ تشکیل دیں گے۔

  • رنگین 1: # ففف
  • رنگین 2: # f7f7f7
  • تدریجی قسم: لکیری
  • تدریجی سمت: 90deg
  • شروع مقام: 25٪
  • اختتامی پوزیشن: 25٪

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

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

نئی قطار شامل کریں

ہمیں مندرجہ ذیل کالم ڈھانچے کو استعمال کرنے کی ضرورت ہوگی۔

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

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

اگلے سب سے پہلے سے طے شدہ نیچے اور نیچے کی بھرتی کو ہٹا دیں۔

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

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

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

اگلا ایک لوگو اپ لوڈ کریں۔

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

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

  • مینو فونٹ وزن: بولڈ
  • مینو متن کا رنگ: # 002d4c
  • مینو ٹیکسٹ سائز: 15 پکس
  • مینو خط وقفہ کاری: 4px
  • متن کی سیدھ: دائیں

اب ، ڈراپ ڈاؤن مینو کی ترتیبات میں کچھ تبدیلیاں کریں۔

  • ڈراپ ڈاؤن مینو پس منظر کا رنگ: # ففف
  • ڈراپ ڈاؤن مینو لائن رنگین: # 002d4c

شبیہیں کی ترتیبات کے ساتھ.

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

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

  • لوگو میکس اونچائی: 60px

اور یہاں ہیڈر عنصر کا ڈھانچہ ایک نیا ہیڈر ٹیمپلیٹ میں مکمل طور پر ڈیزائن کیا گیا ہے۔ اس کے علاوہ ، کسٹم اسٹکی اثرات کو لاگو کرنا ہے۔

2. کسٹم چپچپا اثرات کی درخواست

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

دفعہ # 2 چپچپا بنائیں

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

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

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

اسٹکی ریاست میں سیکشن کی تدریجی پس منظر میں ترمیم کریں

دوسرے حصے کے پس منظر کی ترتیبات پر جائیں اور درج ذیل چپچپا میلان پس منظر کا اطلاق کریں:

  • رنگین 1: # 26333a
  • رنگین 2: # 1e272f

اسٹکی ریاست میں کھینچنے والی قطار

اگلا ، مینو ماڈیول والی قطار کھولیں اور چوڑائی کو چپچپا حالت میں ترمیم کریں۔

  • چوڑائی: 95٪

اسٹکی حالت میں مینو ٹیکسٹ کا رنگ تبدیل کریں

بس مندرجہ ذیل ٹیکسٹ کلر مینو کو تشکیل دیں۔

  • مینو ٹیکسٹ کا رنگ: # ffbd68

اسٹکی ریاست میں مینو آئکن کے رنگ تبدیل کریں

آئکن رنگوں کے ساتھ۔

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

چپچپا حالت میں لوگو کی اونچائی کو ہٹا دیں

آپ کو لوگو کو زیادہ سے زیادہ سائز 0 تک کم کرکے اسے ہٹانا ہوگا۔ لہذا جب جب سیکشن کی چپچپا سیٹنگیں فعال ہوجائیں گی تو لوگو کو ہمارے ہیڈر سے ہٹا دیا جائے گا۔

  • لوگو زیادہ سے زیادہ اونچائی: 0 px

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

پیش نظارہ

اب ہم مختلف اسکرین سائز میں اپنے کام کا نتیجہ دیکھیں گے۔

ڈیسک ٹاپ

موبائل

آخری خیالات

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

اگر آپ کو مزید مشمولات میں دلچسپی ہے تو ہمارا مشورہ ہے کہ آپ ہمیں فیس بک اور ٹویٹر پر فالو کریں۔