اپنے ای کامرس اسٹور کو مقابلے سے ممتاز کرنے اور اپنے کلائنٹس کو ایک منفرد تجربہ فراہم کرنے کے لیے آپ کو اپنے پروڈکٹ کے صفحے میں ترمیم کرنا ہوگی۔ مزید برآں، آپ کے پروڈکٹ کے صفحہ کو جمالیاتی طور پر ذاتی بنانے کا آپشن آپ کے آن لائن اسٹور میں ایک مستقل بصری ڈیزائن کو برقرار رکھنے کے لیے اہم ہے۔
Elementor مارکیٹ میں ورڈپریس ویب سائٹ بنانے والوں میں سے ایک ہے، لیکن کیا آپ یہ بھی جانتے ہیں کہ آپ اسے استعمال کرتے ہوئے WooCommerce اسٹورز بنا سکتے ہیں؟
بہت سے بلٹ ان Elementor WooCommerce ماڈیولز آپ کو Elementor بلڈر کا استعمال کرتے ہوئے WooCommerce مواد یا فنکشنلٹی بلاکس داخل کرنے یا انہیں اسٹائل کرنے کی اجازت دیتے ہیں۔ بہت اچھا، ٹھیک ہے؟
WooCommerce کو اسٹائل کرنے اور حسب ضرورت بنانے کے لیے ہر چھوٹی تبدیلی کے لیے PHP اور CSS کی ضرورت پڑتی تھی، لیکن جیسے جیسے Elementor جیسے ٹولز بہتر ہوتے ہیں اور پیچیدہ ہوتے جاتے ہیں، آپ کے اسٹور کی شکل اور کام کرنے کے طریقے کو کنٹرول کرنے کے لیے زیادہ سے زیادہ اختیارات دستیاب ہوتے ہیں۔
آئیے شروع کرتے ہیں۔
طریقہ کار کا پہلا مرحلہ ورڈپریس ڈیش بورڈ میں ٹیمپلیٹس پر تشریف لے کر ایک نیا عنصر ٹیمپلیٹ بنانا ہے۔ 'Build New' پر کلک کریں پھر سنگل پروڈکٹ کو بطور ٹیمپلیٹ منتخب کریں جسے آپ بنانا چاہتے ہیں۔
جیسا کہ ہم اس ٹیمپلیٹ کو شروع سے تیار کرتے ہیں، کوئی بلاک لگانے کی ضرورت نہیں ہے۔ اگلے باکس سے باہر نکلیں جب تک کہ آپ ایک نئے صفحہ کے لیے عام ایلیمینٹر بلڈر اسکرین پر نہ پہنچ جائیں۔
ہر WooCommerce پروڈکٹ کے پاس پروڈکٹ کی تصویر یا تصویری گیلری ہوتی ہے جو صارفین کو پروڈکٹ کی تصاویر دکھاتی ہے۔ Elementor ایک بلٹ ان پروڈکٹ امیجز ماڈیول فراہم کرتا ہے جو ہمیں اسے اپنے ٹیمپلیٹ میں داخل کرنے کی اجازت دیتا ہے۔
ایک سادہ 2 کالم قطار بنائیں اور بائیں کالم میں پروڈکٹ امیجز ماڈیول درج کریں۔ یہ عملی نظر آتا ہے اور کام کو انجام دیتا ہے، لیکن آئیے اس مضمون کے لیے استعمال کیے جانے والے Elementor Hello تھیم سے ملنے کے لیے سیلز بیج کو حسب ضرورت بنائیں۔ ایسا کرنے کے لیے، ہمیں کسٹم سی ایس ایس کی ایک چھوٹی لائن کو لاگو کرنے کی ضرورت ہے، جسے ایڈوانسڈ> کسٹم سی ایس ایس پر جا کر متعارف کرایا جا سکتا ہے اور نیچے کا کوڈ پیسٹ کیا جا سکتا ہے۔
سلیکٹر .onsale { \sbackground-color: #cc3366 ; \s}
دائیں ہاتھ کے کالم میں پروڈکٹ کے عنوان، پروڈکٹ کی قیمت، اور ٹوکری میں کے لیے ایلیمینٹر ماڈیولز شامل کریں گے
ایلیمینٹر کنسٹرکٹر میں ان تینوں ماڈیولز کو تلاش کریں، پھر انہیں اوپر بیان کردہ ترتیب میں ترتیب دینے کے لیے گھسیٹیں اور چھوڑیں۔ یہ مکمل طور پر فعال ہے، لیکن ہم اسے اوپر والے سیکشن ہیلو ایلیمینٹر تھیم کی طرح اسٹائل سے مماثل بنانا چاہتے ہیں۔ Elementor کے ساتھ ماڈیولز کو اسٹائل کرنا آسان ہے، آپ کو صرف ماڈیول پر کلک کرنے کی ضرورت ہے، اور ایڈیٹر کو اسٹائلنگ کے اختیارات کو بائیں طرف کھولنا چاہیے۔
ان ماڈیولز کا مواد بہترین ہے۔ اس طرح ہم اسٹائل ٹیب کے تحت کام کرنے جا رہے ہیں۔ سب سے پہلے، آئیے ہیلو ایلیمینٹر تھیم میں استعمال ہونے والے فونٹ اور پروڈکٹ ٹائٹل کے رنگ کو اپ ڈیٹ کریں۔
پھر ہمیں پروڈکٹ کی قیمت کے لیے بھی ایسا ہی کرنا ہوگا اور ہر ماڈیول پر کلک کرکے اور متن کے رنگ میں ترمیم کرکے باسکٹ ماڈیولز میں اضافہ کرنا ہوگا۔ پروڈکٹ کی قیمت کے لیے، میں سرخی کے مقابلے میں گہرے سرمئی رنگ کا استعمال کرنے جا رہا ہوں، لہذا اگر آپ اس کے ساتھ پیروی کر رہے ہیں تو یہ ہیکس کوڈ ٹائپ کریں - #54595f
اس کے بعد، Add to Cart ماڈیول پر، ہم کچھ چیزوں کو اپ ڈیٹ کریں گے۔ بٹن کا پس منظر کا رنگ اور بٹن کا بارڈر رداس درج ذیل سیٹنگز کا استعمال کرتے ہوئے:
میں نے رقم سلیکٹر کے بارڈر رداس کو 0 میں تبدیل کیا ہے، جو آپ مقدار کے لیے اسٹائل ٹیب میں کر سکتے ہیں۔
ہر پروڈکٹ کو کچھ بنیادی معلومات دکھانی ہوتی ہیں جیسے پروڈکٹ کی تفصیل اور اگر دستیاب ہو تو جائزے؛ یہ عام طور پر پروڈکٹ ٹیبز کے ذریعے سنبھالا جاتا ہے۔
براہ کرم اوپر والے حصے کے نیچے ایک نئی قطار بنائیں اور اسے داخل کرنے کے لیے Elementor بلڈر سے پروڈکٹ ڈیٹا ٹیبز کے ماڈیول کو قطار میں گھسیٹیں۔ یہاں زیادہ اسٹائلنگ کی ضرورت نہیں ہے کیونکہ اسے ہیلو ایلیمینٹر تھیم سے کچھ اسٹائل ورثے میں ملے ہیں۔ تاہم، آئیے جائزہ جمع کرانے کے بٹن کے انداز میں ترمیم کریں۔
ایسا کرنے کے لیے، ہمیں دوبارہ تھوڑا سا حسب ضرورت CSS کی ضرورت ہوگی۔ پروڈکٹ ڈیٹا ٹیبز میں ترمیم کرنا شروع کریں پھر ایڈوانسڈ ٹیب پر کلک کریں اور حسب ضرورت CSS تک نیچے سکرول کریں۔ ذیل میں سی ایس ایس درج کریں، اور آپ اپنے ڈیزائن کے مطابق رنگوں کو ایڈجسٹ کر سکتے ہیں۔
.woocommerce #review form #reply .form-submit input { background-color: #cc3366; رنگ: #fff؛ سرحدی رداس: 0px؛ }
ٹھیک ہے، تو ہمارے پاس اب تک ایک مہذب، سادہ نظر آنے والا ڈیزائن ہے، لیکن یہ تھوڑا سا کم نظر آتا ہے۔ اوپر والے حصے میں پروڈکٹ شارٹ ڈسکریپشن ماڈیول شامل کرنے سے اس کو ختم کرنے اور مزید سیاق و سباق شامل کرنے میں مدد مل سکتی ہے۔
براہ کرم WooCommerce مختصر تفصیل کا ماڈیول تلاش کریں، پھر اسے پروڈکٹ کی قیمت کے نیچے اور Add to Cart Module کے اوپر گھسیٹیں۔
یہاں ابھی تک کسی اسٹائلنگ کی ضرورت نہیں ہے کیونکہ اسے ہیلو ایلیمینٹر سے وراثت میں سٹائل ملا ہے۔
آپ کی اوسط باسکٹ ویلیو میں اضافہ ہر WooCommerce سائٹ کے لیے بہت ضروری ہے، یہی وجہ ہے کہ Elementor میں ایک پروڈکٹ اپ سیلز ماڈیول شامل ہے تاکہ آپ آسانی سے اپنے اسٹور پر حسب ضرورت مربوط کر سکیں۔
براہ کرم Elementor بلڈر میں پروڈکٹ Upsells ماڈیول تلاش کریں اور اسے پروڈکٹ ڈیٹا ٹیبز کے پیچھے ایک نئی قطار میں داخل کریں۔
جیسا کہ آپ دیکھ سکتے ہیں، اس کے لیے ہمارے باقی انداز کو پورا کرنے کے لیے تھوڑا سا ایڈجسٹمنٹ درکار ہے۔ ماڈیول میں ترمیم کرنا شروع کریں اور درج ذیل تبدیلیاں کریں:
تیار شدہ مصنوعات اوپر کی طرح نظر آئے گی۔ اگر آپ اس گائیڈ کو اپنے ٹیمپلیٹ کے لیے جمپنگ آف پوائنٹ کے طور پر استعمال کرتے ہیں تو آپ رنگ ہیکس کوڈ کو ایڈجسٹ کر سکتے ہیں جیسا کہ آپ مناسب سمجھتے ہیں۔
ایک بار جب آپ کام کر لیتے ہیں، آپ اپنی ٹیمپلیٹ شائع کرتے ہیں۔ اگلی ونڈو میں، آپ کو سوال نظر آئے گا "آپ اپنی ٹیمپلیٹ کہاں ڈسپلے کرنا چاہتے ہیں؟"۔ اس ٹیمپلیٹ کو کب استعمال کیا جانا چاہیے اس کا تعین کرنے کے لیے "Add Condition" پر کلک کریں۔ آپ اپنے تمام پروڈکٹ کے صفحات پر ٹیمپلیٹ استعمال کرنے کے لیے "تمام مصنوعات" کو منتخب کر سکتے ہیں۔ آپ اس ٹیمپلیٹ کو صرف ان مصنوعات کے لیے استعمال کرنے کا انتخاب بھی کر سکتے ہیں جو کسی مخصوص زمرے میں آتے ہیں یا ان کے ساتھ کوئی خاص ٹیگ وابستہ ہے۔
ایلیمینٹر استعمال کرتے وقت کچھ صارفین کو اپنی مرضی کے مطابق ڈیزائن کی ترتیبات حاصل کرنے میں دشواری ہو سکتی ہے، جیسے فونٹ کا رنگ اور نوع ٹائپ۔ آپ کے WooCommerce اسٹور کی ظاہری شکل متاثر ہوسکتی ہے اگر آپ ورڈپریس تھیم استعمال کررہے ہیں جو آپ کے اسٹور کی ظاہری شکل کو کنٹرول کرسکتا ہے۔ اگر آپ کو یہ مسئلہ درپیش ہے، تو ذہن میں رکھیں کہ آپ کا مضمون بعض صورتوں میں آپ کے حسب ضرورت صفحہ کی ترتیبات کو اوور رائیڈ کر سکتا ہے۔
آپ ایک خالی صفحہ بھی منتخب کر سکتے ہیں اور مکمل طور پر حسب ضرورت ظاہری شکل کے لیے پروڈکٹ ویجیٹس کا استعمال کرتے ہوئے زمین سے ایک تخلیق کر سکتے ہیں۔ ایک خالی صفحہ استعمال کریں، ٹیمپلیٹ لائبریری پاپ اپ ونڈو کے ظاہر ہونے پر اسے بند کر دیں اور نئے بنائے گئے صفحہ پر تعمیر شروع کریں۔ حسب ضرورت "کارٹ میں شامل کریں" بٹن، "مصنوعات کی قیمت،" "مصنوعات کی تصویر،" اور "مصنوعات کا عنوان اور تفصیل" صرف چند WooCommerce ویجیٹس ہیں جنہیں آپ اپنے پروڈکٹ کے صفحہ کو حسب ضرورت بنانے کے لیے استعمال کر سکتے ہیں۔ آپ اس صفحہ پر جا کر اس وقت دستیاب تمام مختلف وجیٹس کو دیکھ سکتے ہیں۔ اگر آپ چاہیں تو، آپ صفحہ کے لے آؤٹ پر جہاں چاہیں ویجیٹس کو ترتیب دے سکتے ہیں اور اپنی مطلوبہ شکل سے ملنے کے لیے ان کے انداز کو اپنی مرضی کے مطابق بنا سکتے ہیں۔
اپنے ای کامرس اسٹور کو مقابلے سے ممتاز کرنے اور اپنے کلائنٹس کو ایک منفرد تجربہ فراہم کرنے کے لیے آپ کو اپنے پروڈکٹ کے صفحے میں ترمیم کرنا ہوگی۔ مزید برآں، آپ کے پروڈکٹ کے صفحہ کو جمالیاتی طور پر ذاتی بنانے کا آپشن آپ کے آن لائن اسٹور میں ایک مستقل بصری ڈیزائن کو برقرار رکھنے کے لیے اہم ہے۔ Elementor آپ کے WooCommerce اسٹور کے صفحات کو حسب ضرورت بنانے کے لیے ایک لاجواب ٹول ہے، اور یہ انتہائی تجویز کردہ ہے۔ استعمال میں آسان ہونے کے علاوہ، صفحہ بنانے والے میں حسب ضرورت پروڈکٹ پیجز بنانے میں آپ کی مدد کرنے کے لیے تمام ضروری ویجیٹس اور اسٹائلنگ کے اختیارات شامل ہیں۔ ہم امید کرتے ہیں کہ آپ کو یہ ٹیوٹوریل معلوماتی لگا اور آپ کو وہ معلومات فراہم کیں جو آپ کو Elementor کا استعمال کرتے ہوئے اپنے WooCommerce پروڈکٹ اور پروڈکٹ آرکائیو کے صفحات کو حسب ضرورت بنانے کے لیے درکار ہیں۔ کیا آپ نے ماضی میں WooCommerce صفحات بنانے کے لیے Elementor کا استعمال کیا ہے؟ تبصرے کے سیکشن میں اپنے خیالات کا اشتراک کرنے کے لیے آپ کا استقبال ہے۔ ہمیں ایک نظر ڈال کر خوشی ہوگی۔
ویب سائٹ کے ہیڈر اور فوٹر ضروری عناصر ہیں۔ زیادہ تر معاملات میں، ہیڈر نیویگیشن فراہم کرتا ہے…
مارکیٹ میں سب سے زیادہ مقبول ورڈپریس تھیمز میں سے دو Astra اور OceanWP ہیں۔ پیشہ ورانہ…
ایک بہترین نیوز ویب سائٹ بنانے کے لیے ضروری نہیں کہ آپ ویب ڈیزائنر بنیں۔ ہم…
اخبار کی تھیم ایک اہم ترین ورڈپریس تھیم ہے جسے tagDiv نے ڈیزائن کیا ہے، ایک…
جب آن لائن اسٹور قائم کرنے کی بات آتی ہے تو، WooCommerce جانے والا plugin ہے۔ یہ…
ہیڈر عام طور پر پہلی چیز ہوتی ہے جب کوئی شخص آپ کی ویب سائٹ پر جانے پر دیکھتا ہے،…
تبصرے دیکھیں
Una volta personalizzata la pagina, come si associa al prodotto del negozio؟
ہائے، یہ سیٹ اپ تب ہوتا ہے جب آپ پہلی بار اپنے صفحہ کے ڈیزائن کو محفوظ کرتے ہیں یا Elementor سیو بٹن کے اوپر چھوٹے تیر کا استعمال کرتے ہیں۔