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

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

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

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

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

چسپاں ہیڈر صارفین کو صفحے کا ہیڈر اور مینو سیکشن دیکھنے کی اجازت دیتے ہیں چاہے وہ کتنی نیچے سکرول کریں۔

• مرحلہ 1: مینو بنانے کے لیے
• مرحلہ 2: ایلیمینٹر میں اپنا ہیڈر بنانا۔
• مرحلہ 3: ہیڈر ٹیمپلیٹ بنانے کے لیے ایلیمینٹر کا استعمال۔
• مرحلہ 4: اپنے ایلیمینٹر ہیڈر کو چسپاں کیسے کریں۔
• مرحلہ 5: ہمارے CSS کو اپنی مرضی کے مطابق بنائیں۔
• نتیجہ اخذ کرنا

مرحلہ 1: مینو بنانے کے لیے

اپنی ویب سائٹ میں ایک چسپاں ہیڈر شامل کرنے کے لیے، wp-admin> ظاہری شکل> مینیو اور ایک مین مینو بنائیں۔ ہیڈر میں، وہ سیکشن ٹائپ کریں جسے آپ ڈسپلے کرنا چاہتے ہیں۔

مرحلہ 2: ایلیمینٹر میں اپنا ہیڈر بنانا۔

جب آپ مین مینو کی تعمیر مکمل کر لیں تو Elementor Templates > Theme Builder جائیں تھیم بلڈر صفحہ پر ہیڈر کا علاقہ منتخب کریں اور " نیا ہیڈر شامل کریں ۔

ہیڈر ٹیمپلیٹ کو ایک نام دیں اور پاپ اپ اسکرین پر " ٹیمپلیٹ بنائیں

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

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

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

مرحلہ 3: ہیڈر ٹیمپلیٹ بنانے کے لیے ایلیمینٹر کا استعمال۔

دو کالم لے آؤٹ بنائیں۔ یقینی بنائیں کہ سیکشن کے مواد کی چوڑائی " باکسڈ ۔

Elementor Edit سیکشن میں مواد کی چوڑائی کی ترتیبات میں، پہلے کالم کی چوڑائی کو " ترمیم " کالم کے تحت 20% پر سیٹ کریں۔

اپنی ویب سائٹ کا سائٹ لوگو پہلے کالم میں رکھیں اور اسے بائیں طرف سیدھا کریں۔

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

ہم اس ٹیوٹوریل کے لیے ہیڈر کو سادہ رکھنے جا رہے ہیں۔ آپ پس منظر کا رنگ شامل کرکے ، حرکت پذیری کے اثرات ، بٹنوں اور دیگر عناصر کو شامل کرکے اپنے ہیڈر کو مزید تفصیلی بنا سکتے ہیں۔

مرحلہ 4: اپنے ایلیمینٹر ہیڈر کو چسپاں کیسے کریں۔

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

ایسا کرنے کے لیے، ترمیم سیکشن (پورے ہیڈر سیکشن) پر جائیں۔ ڈراپ ڈاؤن مینو سے Advanced > Motion Effects کو منتخب کریں

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

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

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

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

ہم چاہتے تھے کہ یہ ہیڈر 404 صفحے کو چھوڑ کر پوری سائٹ پر ظاہر ہو۔ نتیجے کے طور پر ، ہم نے 404 پیج کو چھوڑتے ہوئے پوری سائٹ کو انتخاب میں شامل کیا۔

جیسا کہ آپ دیکھ سکتے ہیں ، اپنے ذاتی سٹکی ہیڈر بنانے کے لیے ایلیمینٹر کا استعمال کرنا آسان اور بے درد ہے!

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

آپ چپچپا ہیڈر کی اونچائی ، پس منظر کا رنگ ، منتقلی اور چپچپا اثرات کو اپنی مرضی کے مطابق بنا سکتے ہیں۔

اپنے چسپاں ہیڈر کو مزید سجیلا بنانے کے لیے ترمیم والے حصے پر واپس جائیں (پورا ہیڈر سیکشن)۔ ڈراپ ڈاؤن مینو سے Advanced > Motion Effects کو منتخب کریں

" اثرات آفسیٹ " کو 100 پر سیٹ کریں۔ جب کوئی وزیٹر آپ کی ویب سائٹ استعمال کرتا ہے، تو یہ اسکرولنگ کا فاصلہ ہوتا ہے جہاں اسکرولنگ اثر ہوتا ہے۔

موشن آفسیٹ کو 100 پر سیٹ کریں ۔

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

حتمی چسپاں ہیڈر شائع کرنے سے پہلے، آپ اختیاری طور پر آخری چسپاں ہیڈر میں شرائط شامل کر سکتے ہیں۔ ایک amp ہیڈر کو دکھانا چاہتے ہیں۔ ایک مثال کے طور پر amp سائٹ " کا معیار منتخب کر سکتے ہیں ۔

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

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

حسب ضرورت CSS کو شامل کرنے کے لیے ذیل میں بتائے گئے طریقہ کار پر عمل کریں:

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

اس کے بعد ، ذیل میں سی ایس ایس کوڈ میں پیسٹ کریں۔

header.sticky-header {-header-height: 90px -صلاحیت: 0.90 -مجھے سکڑائیں: 0.80 -چپچپا پس منظر کا رنگ: #0e41e5 -منتقلی: .3s آسانی سے باہر منتقلی: پس منظر کا رنگ var (-منتقلی) ، پس منظر کی تصویر var (-منتقلی) ، بیک ڈراپ فلٹر var (-منتقلی) ، دھندلاپن var (-منتقلی)؛ } header.sticky-header.elementor-sticky-effects {background-color: var (-sticky-background-color)! important؛ پس منظر کی تصویر: کوئی نہیں! دھندلاپن: var (-دھندلاپن)! -ویبکٹ-بیک ڈراپ فلٹر: دھندلاپن (10px) بیک ڈراپ فلٹر: دھندلاپن (10px) } header.sticky-header> .elementor-container {منتقلی: min-height var (-transition)؛ } header.sticky-header.elementor-sticky-effects> .elementor-container {min-height: calc (var (-header-height) * var (-shrink-me))! important؛ اونچائی: calc (var (-header-height) * var (-shrink-me))؛ } header.sticky-header .elementor-nav-menu .elementor-item {منتقلی: بھرتی var (-منتقلی)؛ } header.sticky-header.elementor-sticky-effects .elementor-nav-menu .elementor-item {padding-bottom: 10px! important؛ بھرتی ٹاپ: 10px! اہم } header.sticky-header> .elementor-container .logo img {transition: max-width var (-transition)؛ } header.sticky-header.elementor-sticky-effects .logo img {max-width: calc (100٪ * var (-shrink-me))؛ } 

مرحلہ 5: ہمارے CSS کو اپنی مرضی کے مطابق بنائیں۔

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

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

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

یہاں پانچ سی ایس ایس متغیرات ہیں ، ہر متغیر کی ڈیفالٹ اقدار سرخ رنگ میں دکھائی گئی ہیں۔

چپچپا پس منظر کا رنگ #0e41e5 ہے اور ہیڈر کی اونچائی 90px ہے۔ اسٹائل کے دیگر اختیارات میں شامل ہیں: 0.90 کی دھندلاپن ، 0.80 کی سکرن می ، 0.90 کی دھندلاپن ، اور 300ms کی آسانی سے/آسانی سے باہر کی منتقلی۔

کسٹم پراپرٹیز وہ عناصر ہیں جو ہمارے سابق amp لی کوڈ میں ڈبل ڈیش " -" کے بعد ظاہر ہوتے ہیں ، اور آپ انہیں ہمارے ایس amp لی کوڈ کے اوپری حصے میں درج پا سکتے ہیں۔ ضرورت اس بات کی ہے کہ اس قدر کو ایڈجسٹ کیا جائے جو بڑی آنت کے بعد اور نیم کالون سے پہلے جملے میں ظاہر ہوتی ہے۔

سابق amp لی، آپ، پر 100px کرنے کے ہیڈر کی اونچائی میں اضافہ کرنے کے لئے یہاں اس سے پہلے اور اونچائی تبدیل کرنے کے بعد نظر آئے گا کہ کس طرح ہے چاہتے ہیں تو:

پہلے ، ہیڈر کی اونچائی 90 پکسلز تھی۔ بعد میں ، ہیڈر کی اونچائی 100 پکسلز تھی۔

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

ایلیمینٹر میں مختلف قسم کے ہیڈر ٹیمپلیٹس شامل ہیں۔ ہر ایک الگ اور خوبصورت ہے اور آپ کے ناظرین کو آپ کی ویب سائٹ پر تشریف لے جانے میں مدد کرتا ہے۔

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

یہاں صرف چند سابق ہو amp Elementor صارفین کے لئے دستیاب متعدد ہیڈر ڈیزائن کے اختیارات کے les کی.

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

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

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