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

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

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

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

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

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

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

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

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

مرحلہ 2: عنصر میں اپنا ہیڈر بنانا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اس کے بعد، نیچے CSS کوڈ میں پیسٹ کریں۔

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

مرحلہ 5: ہماری CSS کو حسب ضرورت بنائیں

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

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

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

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

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

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

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

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

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

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

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

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

نتیجہ

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

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