عنصر کے ساتھ ہیڈر اور فوٹر کا استعمال کیسے کریں

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

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

یہ ٹیوٹوریل ہمیں ویب سائٹ کا ہیڈر اور فوٹر بنانے کا طریقہ سکھائے گا۔ Elementor Pro استعمال کیا جائے گا (چونکہ Elementor کے بنیادی ورژن میں ان اجزاء کو بنانے کے لیے سب سے اہم خصوصیات شامل نہیں ہیں)۔ لہذا Elementor Pro ڈاؤن لوڈ کریں اور یقینی بنائیں کہ یہ آن ہے۔

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

آپ کو اپنے صفحہ بنانے والے کے طور پر Elementor کا انتخاب کیوں کرنا چاہیے؟

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

Elementor ایک بصری صفحہ بنانے والا ہے جو صارفین کو یہ دیکھنے کی اجازت دیتا ہے کہ ان کے صفحات تبدیل کیے بغیر کیسے ظاہر ہوتے ہیں۔

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

ایلیمینٹر کے چند اہم پہلو درج ذیل ہیں جو اسے کارآمد بناتے ہیں۔

• ڈریگ اینڈ ڈراپ فنکشنلٹی سپورٹ ہے۔
• اس میں ٹیمپلیٹس کی ایک بڑی تعداد ہے۔
• مجموعی طور پر 90 سے زیادہ ویجٹ ہیں۔
• ذمہ دار سپورٹ کے لیے کسی کوڈنگ کی ضرورت نہیں ہے۔
• دوبارہ کریں اور کالعدم کرنے کے اختیارات دستیاب ہیں۔
• آٹو سیو دستیاب ہے۔

Elementor آپ کو اپنے حسب ضرورت ہیڈر اور فوٹر کی مرکزی ترتیب کو منتخب کرنے کی اجازت دیتا ہے۔

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

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

لامتناہی امکانات ہیں، اور آپ اپنی مرضی کے مطابق کوئی بھی ترتیب بنا سکتے ہیں۔

میں نے نمبر 7 پہلے سے تیار کردہ ہیڈر ٹیمپلیٹ کا انتخاب کیا۔ یہ ورڈپریس ویب سائٹ پر ہیڈر استعمال کرنے کا سب سے عام اور آسان طریقہ ہے۔ ہیڈر ٹیمپلیٹ کے نام کو کاپی اور پیسٹ کریں Templates > Header > search template > کاپی شدہ ہیڈر کا نام پیسٹ کریں ۔

جب آپ کو مطلوبہ ہیڈر ٹیمپلیٹ مل جائے تو "Edit with Elementor" کو منتخب کریں، اور آپ کو Elementor Pro ہیڈر بلڈر سیکشن میں لے جایا جائے گا۔

آئیے اس پارٹی کو شروع کریں۔

ہیڈر کیا ہے اور یہ کیا کرتا ہے؟

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

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

ہیڈر آپ کی کمپنی کی برانڈ شناخت کو فروغ دینے میں بھی مدد کر سکتا ہے۔

میں کمپنی کا لوگو، فونٹ، رنگ، اور مجموعی برانڈ کی زبان جیسی خصوصیات استعمال کر رہا ہوں۔

سائٹ نیویگیشن، سائٹ کی تلاش، ایک شاپنگ کارٹ (سیلز سائٹس کے لیے)، کال ٹو ایکشن (CTA) بٹن، اور دیگر خصوصیات جو صارف کے تجربے کو بہتر کرتی ہیں اور تبادلوں کی شرح میں اضافہ کرتی ہیں، سب ہیڈر میں پائے جاتے ہیں۔

فوٹر کیا ہے، بالکل؟

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

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

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

ہیڈر بنانے کا طریقہ

ہم اس سیکشن میں اپنی مرضی کے مطابق ہیڈر بنانے جا رہے ہیں۔ پریشان نہ ہوں اگر یہ خوفناک لگتا ہے۔ ہم شروع سے شروع نہیں کریں گے۔ اس کے بجائے، ہم Elementór Pro کی ٹیمپلیٹس کا استعمال کریں گے، جو Elementor کی ڈیزائن ٹیم کے ذریعے ڈیزائن کیا گیا ہے۔

ہیڈر ٹیمپلیٹ تیار کرنا

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

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

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

ایک بار جب آپ ٹیمپلیٹ کو منتخب کر لیتے ہیں تو اسے Elementor ایڈیٹنگ سیکشن کے اوپر نظر آنا چاہیے:

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

ایک بار جب آپ لوگو کا فیصلہ کر لیں، شائع کریں ۔

اگر آپ Elementor انٹرفیس کو ریفریش کرتے ہیں تو آپ کی سائٹ کا لوگو اب ہیڈر میں ہونا چاہیے:

اس کے بعد، آپ اپنی مرضی کے مطابق تبدیلیاں کر سکتے ہیں۔

ہیڈر مینو میں تبدیلیاں کرنا

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

یہاں ہمارا مینو ڈھانچہ ہے، جسے آپ ہیڈر ٹیمپلیٹ میں جھلکتا دیکھ سکتے ہیں:

اگر آپ کے پاس ایک سے زیادہ مینو ہیں تو، اگر ضروری ہو تو آپ مواد کو اپ ڈیٹ کر سکتے ہیں۔

آپ کسی دوسرے ویجیٹ کی طرح اس کی خصوصیات میں ترمیم کر سکتے ہیں۔

اگر ہمیں مزید اشیاء شامل کرنے کی ضرورت ہے، تو ہم اپنے ہیڈر میں مزید حصے شامل کر سکتے ہیں:

آئیے ایک ہیڈر اور کچھ سوشل میڈیا شبیہیں شامل کرکے شروع کریں:

اس کے بعد، آپ اپنی پسند کی کوئی تبدیلی کر سکتے ہیں۔ یہ ہے کہ ہماری ترمیم کیسے نکلی:

ہیڈر کی اشاعت

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

اور یہاں ایک سابق اور کی amp لی ہمارے لائیو ویب سائٹ سے ایک صفحہ کا:

فوٹر بنانے کا طریقہ

فوٹر ٹیمپلیٹ تیار کرنا

فوٹر بنانے کا عمل کافی حد تک ہیڈر بنانے جیسا ہے۔ ایک بنانے کے لیے، اس طرح ایک نیا فوٹر ٹیمپلیٹ بنائیں:

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

ہم نے اپنی ویب سائٹ کے لیے جو ٹیمپلیٹ منتخب کیا ہے وہ درج ذیل ہے:

فوٹر میں ترمیم

جیسے ہی آپ ترمیم شروع کریں گے آپ کو ہیڈر نظر آئے گا (اگر آپ یہ شرط رکھتے ہیں کہ یہ تمام صفحات پر ظاہر ہو)۔

ضرورت کے مطابق فوٹر تبدیل کریں؛ ہماری نظرثانی اس طرح نظر آتی ہے:

فوٹر ختم ہونے کے بعد اسے شائع کریں:

تیار مصنوعات

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

ردعمل کے لیے اپنے ہیڈر اور فوٹر سیکشنز کی جانچ کریں۔

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

آپ اپنے ہیڈر اور فوٹر کی ردعمل کو مختلف طریقوں سے جانچ سکتے ہیں۔ سابق کے لئے amp لی، آپ کو اپنے ویب صفحات کے طور پر ممکن ذمہ دار کے طور پر ہیں کہ یقینی بنانے کے لئے Browserstack، Crossbrowser کی ٹیسٹنگ، اور گوگل resizer کی طرح کے ٹولز استعمال کر سکتے ہیں. آپ اسے مختلف آلات کے ساتھ تجربہ کرکے دستی طور پر بھی کرسکتے ہیں۔

چیزوں کو قریب لانا

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