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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ایک ٹیمپلیٹ بنائیں

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ہیڈر کی اشاعت

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

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

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

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

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

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

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

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

تیار شدہ مصنوعات

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

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

آپ اپنے ہیڈر اور فوٹر کی ردعمل کو مختلف طریقوں سے جانچ سکتے ہیں۔ amp کے طور پر، آپ Browserstack، CrossBrowser Testing، اور Google Resizer جیسے ٹولز استعمال کر سکتے ہیں تاکہ یہ یقینی بنایا جا سکے کہ آپ کے ویب صفحات زیادہ سے زیادہ ریسپانسیو ہیں۔ آپ اسے مختلف آلات کے ساتھ تجربہ کرکے دستی طور پر بھی کرسکتے ہیں۔

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

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

ایک تبصرہ چھوڑیں

آپ کا ای میل پتہ شائع نہیں کیا جائے گا۔ مطلوبہ فیلڈز نشان زد ہیں *