اپنے ای کامرس اسٹور کو مقابلے سے ممتاز کرنے اور اپنے مؤکلوں کو ایک انوکھا تجربہ فراہم کرنے کے ل You آپ کو اپنے پروڈکٹ پیج میں ردوبدل کرنا ہوگا۔ مزید برآں ، آپ کے پروڈکٹ پیج کو جمالیاتی طور پر ذاتی نوعیت کا اختیار آپ کے آن لائن اسٹور میں مستقل بصری ڈیزائن کو برقرار رکھنے کے لئے اہم ہے۔
ایلیمینٹر مارکیٹ میں ورڈپریس ویب سائٹ بنانے والوں میں سے ایک ہے ، لیکن کیا آپ یہ بھی جانتے ہیں کہ آپ WooCommerce اسٹور استعمال کرکے اسے تعمیر کرسکتے ہیں؟
بہت سے بلٹ میں عنصر WooCommerce ماڈیولز آپ WooCommerce کے مواد یا فعالیت کے بلاکس کو داخل کرنے یا عنصر بلڈر کا استعمال کرتے ہوئے ان کو اسٹائل کرنے کی اجازت دیتے ہیں۔ بہت اچھا ، ٹھیک ہے؟
WooCommerce کے اسٹائلنگ اور تخصیص کو ہر چھوٹی چھوٹی تبدیلی کے لئے پی ایچ پی اور سی ایس ایس کی ضرورت ہوتی تھی ، لیکن چونکہ ایلیمینٹر جیسے اوزار بہتر ہوتے ہیں اور زیادہ پیچیدہ ہوجاتے ہیں ، آپ کے اسٹور کی نظر آنے اور کام کرنے کے انداز کو کنٹرول کرنے کے ل more زیادہ سے زیادہ اختیارات دستیاب ہوجاتے ہیں۔
آو شروع کریں.
- ایک عنصر ٹیمپلیٹ بنانا
- بلڈنگ عنصر مصنوعات کی تصویر یا گیلری
- WooCommerce پروڈکٹ کا عنوان ، قیمت اور ٹوکری میں شامل کریں۔
- عنصر کی مصنوعات کے ٹیب مرتب کرنا
- ایلیمینٹر پروڈکٹ کی مختصر تفصیل۔
- ایلیمینٹر اور WooCommerce پروڈکٹ اپ سیلز۔
- نتیجہ - Elementor پروڈکٹ پیج بلڈر۔
ایک عنصر ٹیمپلیٹ بنانا
اس طریقہ کار کا پہلا مرحلہ یہ ہے کہ ورڈپریس ڈیش بورڈ میں ٹیمپلیٹس پر تشریف لے کر ایک نیا عنصر ٹیمپلیٹ بنانا ہے۔ 'بلٹ نیو' پر کلک کریں اور پھر سنگل پروڈکٹ کو اس سانچے کے بطور منتخب کریں جسے آپ بنانا چاہتے ہیں۔
جب ہم شروع سے اس ٹیمپلیٹ کو تیار کرتے ہیں تو ، بلاکس لگانے کی ضرورت نہیں ہوتی ہے۔ اگلے خانے سے باہر نکلیں جب تک کہ آپ کسی نئے صفحے کیلئے معمول کے بلڈر اسکرین پر نہ پہنچیں۔
بلڈنگ عنصر مصنوعات کی تصویر یا گیلری
ہر WooCommerce پروڈکٹ کے پاس ایک پروڈکٹ کی تصویر یا تصویری گیلری موجود ہوتی ہے جس کی نمائش گاہکوں کے سامنے مصنوعات کی تصاویر ہوتی ہے۔ ایلیمینٹر ایک بلٹ میں پروڈکٹ امیجز ماڈیول فراہم کرتا ہے جو ہمیں اپنے ٹیمپلیٹ میں داخل کرنے کی اجازت دیتا ہے۔
ایک آسان 2 کالم قطار بنائیں اور بائیں کالم میں پروڈکٹ امیجز ماڈیول داخل کریں۔ یہ عملی نظر آرہا ہے اور یہ کام انجام دیتا ہے ، لیکن آئیے ایلیمینٹر ہیلو تھیم سے ملنے کے لئے سیل بیج کو اپنی مرضی کے مطابق بنائیں تاکہ اس مضمون کے لئے استعمال کیا جا رہا ہو۔ ایسا کرنے کے ل we ، ہمیں کسٹم سی ایس ایس کی ایک چھوٹی سی لائن کا اطلاق کرنے کی ضرورت ہے ، جو ایڈوانسڈ> کسٹم سی ایس ایس کی طرف جاکر متعارف کرایا جاسکے اور نیچے کا کوڈ پیسٹ کریں۔
سلیکٹر .onsale back back بیک گراؤنڈ رنگ: # سی سی 3366؛ \ s
WooCommerce p ، عنوان ، قیمت اور ٹوکری میں شامل کریں
ہم دائیں ہاتھ کے کالم میں پروڈکٹ کے عنوان ، مصنوع کی قیمت ، اور ٹوکری میں شامل کرنے کے ل E عنصر ماڈیول شامل کریں گے۔
ایلیمنٹر کنسٹرکٹر میں ان تینوں ماڈیولز کی تلاش کریں ، اور پھر اوپر کھینچتے ہوئے ترتیب میں ترتیب دینے کے ل them ان کو گھسیٹیں اور ڈراپ کریں۔ یہ مکمل طور پر فعال ہے ، لیکن ہم اس کو اسٹائل سے ملنے کے لئے اس کو اپنی مرضی کے مطابق بنانا چاہتے ہیں جیسا کہ مندرجہ بالا حصے ہیلو عنیمر تھیم۔ ایلیمینٹر والے اسٹائل ماڈیول آسان ہیں ، آپ سبھی کو ماڈیول پر کلک کرنا ہے ، اور ایڈیٹر کو اسٹائل کے اختیارات کو بائیں طرف کھولنا چاہئے۔
ان ماڈیولز کا مواد بہترین ہے۔ اس طرح ہم اسٹائل ٹیب کے تحت کام کرنے جارہے ہیں۔ سب سے پہلے ، آئیے ہیلو ایلیمنٹر تھیم میں استعمال ہونے والوں سے ملنے کے ل let's ، پروڈکٹ ٹائٹل کے فونٹ اور رنگ کو اپ ڈیٹ کریں۔
اس کے بعد ہمیں ہر ایک ماڈیول پر کلک کرکے اور متن کے رنگ میں ترمیم کرکے مصنوعات کی قیمت اور باسکٹ ماڈیول میں اضافہ کرنے کی ضرورت ہے۔ مصنوع کی قیمت کے ل I'm ، میں سرخی کے برعکس ایک گہرا بھوری رنگ استعمال کرنے جا رہا ہوں ، لہذا اگر آپ بھی پیروی کررہے ہیں تو یہ ہیکس کوڈ ٹائپ کریں - # 54595f
اگلا ، شامل کریں ٹو کارٹ ماڈیول پر ، ہم کچھ چیزوں کو اپ ڈیٹ کریں گے۔ بٹن کا پس منظر کا رنگ اور بٹن کے بارڈر رداس ذیل کی ترتیبات کا استعمال کرتے ہوئے:
- مواد کو 'ٹوکری میں شامل کریں' پر سیٹ کریں۔
- پس منظر کا رنگ '# cc3366' پر سیٹ کریں
- بارڈ رداس کو 0 پر سیٹ کریں
میں نے رقم سلیکٹر کے بارڈر رداس کو 0 میں تبدیل کردیا ، جو آپ مقدار کے لئے اسٹائل ٹیب کے اندر کرسکتے ہیں۔
عنصر کی مصنوعات کے ٹیب مرتب کرنا
ہر پروڈکٹ کو کچھ بنیادی معلومات ظاہر کرنا ہوں گی جیسے مصنوع کی وضاحت اور اگر دستیاب ہو تو جائزے۔ یہ عام طور پر پروڈکٹ ٹیبز کے ذریعہ سنبھالا جاتا ہے۔
براہ کرم اوپر والے حصے کے نیچے ایک نئی قطار بنائیں اور ایلیمینڈر بلڈر سے پروڈکٹ ڈیٹا ٹیبس ماڈیول کو داخل کرنے کیلئے قطار میں گھسیٹیں۔ یہاں زیادہ اسٹائلنگ کی ضرورت نہیں ہے کیونکہ اس کو ہیلو ایلیمنٹر تھیم سے کچھ اسٹائل وراثت میں ملتے ہیں۔ تاہم ، آئیے نظر ثانی پیش کرنے والے بٹن کے انداز میں ترمیم کریں۔
ایسا کرنے کے ل we're ، ہمیں دوبارہ اپنی مرضی کے مطابق CSS کی تھوڑی بہت ضرورت ہوگی۔ پروڈکٹ ڈیٹا ٹیبز میں ترمیم کرنا شروع کریں پھر اعلی درجے کی ٹیب پر کلک کریں اور کسٹم سی ایس ایس پر نیچے سکرول کریں۔ ذیل میں سی ایس ایس درج کریں ، اور آپ اپنے ڈیزائن کے مطابق رنگوں کو ایڈجسٹ کرسکتے ہیں۔
.wocommerce #review form #reply. form-submit ان پٹ {پس منظر کا رنگ: # cc3366؛ رنگ: # ایف ایف؛ سرحد کا رداس: 0 px؛ }
عنصر P مختصر مختصر وضاحت
ٹھیک ہے ، لہذا ہمارے پاس ابھی تک ایک مہذب ، آسان نظر آنے والا ڈیزائن ہے ، لیکن یہ تھوڑا سا ویرل نظر آتا ہے۔ اوپری حصے میں کسی پراڈکٹ شارٹ ڈسٹرکٹ ماڈیول کو شامل کرنے سے اس کی مدد مل سکتی ہے اور مزید سیاق و سباق کو شامل کیا جاسکتا ہے۔
براہ کرم WooCommerce مختصر تفصیل کے ماڈیول کی تلاش کریں ، اور پھر اسے مصنوعات کی قیمت کے نیچے اور Add To Cart Module کے اوپر ڈریگ اور ڈراپ کریں۔
یہاں ابھی تک کسی اسٹائل کی ضرورت نہیں ہے کیوں کہ اسے ہیلو ایلیمنٹر سے اسٹائل ورثے میں ملا ہے۔
عنصری اور WooCommerce کے پی کام کو فروغ دیتے ہیں
آپ کی اوسط ٹوکری کی قیمت میں اضافہ ہر WooCommerce سائٹ کے لئے بہت ضروری ہے ، یہی وجہ ہے کہ عنقریب آپ کو آسانی سے اپنے اسٹور پر تخصیص کو مربوط کرنے کے ل Product ایک پروڈکٹ اپسلز ماڈیول شامل کرتا ہے۔
براہ کرم عنصر بلڈر میں پروڈکٹ اپ سیلز ماڈیول کی تلاش کریں اور اسے پروڈکٹ ڈیٹا ٹیبز کے پیچھے ایک نئی صف میں داخل کریں۔
جیسا کہ آپ دیکھ سکتے ہیں ، ہمارے بقیہ انداز کی تکمیل کے ل this اس میں تھوڑا سا ایڈجسٹمنٹ کی ضرورت ہے۔ ماڈیول میں ترمیم کرنا شروع کریں اور درج ذیل تبدیلیاں کریں:
- عنوان کا رنگ اس پر مقرر کریں - # cc3366
- سرخی کا رنگ اس پر مقرر کریں - # cc3366
- قیمت کا رنگ اس پر مقرر کریں - # 54595f
- بٹن کے پس منظر کا رنگ اس پر سیٹ کریں - # cc3366
- بٹن کا رنگ اس پر سیٹ کریں - # ff
- بٹن بارڈر رداس t0 - 0 طے کریں
تیار شدہ مصنوعات اوپر کی طرح نظر آئے گی۔ آپ رنگ ہیکس کوڈ کو ایڈجسٹ کرسکتے ہیں جیسا کہ آپ کو فٹ نظر آتا ہے اگر آپ اپنے نمونے کے لئے جمپنگ آف پوائنٹ کے طور پر اس رہنما کو استعمال کرتے ہیں۔
ایک بار جب آپ کام کر لیں ، تو آپ اپنا سانچہ شائع کریں گے۔ اگلی ونڈو میں ، آپ کو یہ سوال نظر آئے گا کہ "آپ اپنے سانچے کو کہاں دکھانا چاہتے ہیں؟" اس سانچے کو کب استعمال کیا جانا چاہئے اس کا تعین کرنے کیلئے "حالت شامل کریں" پر کلک کریں۔ آپ اپنے تمام پروڈکٹ پیجز پر ٹیمپلیٹ کو استعمال کرنے کے لئے "تمام پروڈکٹ" کو منتخب کرسکتے ہیں۔ آپ یہ نمونہ صرف ان مصنوعات کے لئے استعمال کرنے کا انتخاب کرسکتے ہیں جو کسی خاص زمرے میں آئیں یا ان کے ساتھ کوئی خاص ٹیگ وابستہ ہوں۔
نتیجہ - عنصر p roduct صفحہ بلڈر
کچھ صارفین کو ایلیمینٹر کا استعمال کرتے وقت ظاہر کرنے کیلئے اپنی مرضی کے مطابق ڈیزائن کی ترتیبات ، جیسے فونٹ کا رنگ اور نوع ٹائپ حاصل کرنے میں دشواری ہوسکتی ہے۔ اگر آپ ورڈپریس تھیم استعمال کررہے ہیں جو آپ کے اسٹور کی ظاہری شکل کو کنٹرول کرسکتا ہے تو آپ کے WooCommerce اسٹور کی ظاہری شکل متاثر ہوگی۔ اگر آپ کو یہ پریشانی کا سامنا کرنا پڑتا ہے تو ، یاد رکھیں کہ آپ کا مضمون کچھ معاملات میں آپ کے کسٹم پیج کی ترتیبات کو اوور رائیڈ کرسکتا ہے۔
آپ ایک خالی صفحہ بھی منتخب کرسکتے ہیں اور مکمل طور پر اپنی مرضی کے مطابق نمودار ہونے کیلئے مصنوعاتی وجیٹس کا استعمال کرکے ایک گراؤنڈ اپ تشکیل دے سکتے ہیں۔ خالی صفحے کا استعمال کریں ، جب ٹیمپلیٹ لائبریری کا پاپ اپ ونڈو ظاہر ہوتا ہے تو اسے بند کریں اور نئے بنائے ہوئے صفحے پر تعمیر شروع کریں۔ کسٹم "ٹوکری میں شامل کریں" بٹن ، "مصنوع کی قیمت" ، "مصنوعات کی شبیہہ" ، اور "پروڈکٹ کا عنوان اور تفصیل" WooCommerce کے کچھ ویجٹ ہیں جنہیں آپ اپنے پروڈکٹ پیج کو اپنی مرضی کے مطابق بنانے کے لئے استعمال کرسکتے ہیں۔ آپ اس صفحے پر جاکر فی الحال دستیاب تمام مختلف ویجٹ کو دیکھ سکتے ہیں۔ اگر آپ ترجیح دیتے ہیں تو ، آپ صفحے کی ترتیب پر جہاں بھی چاہیں ویجٹ کا بندوبست کرسکتے ہیں اور اپنی مطلوبہ نمائش سے ملنے کے ل their ان کے انداز کو اپنی مرضی کے مطابق بنا سکتے ہیں۔
اپنے ای کامرس اسٹور کو مقابلے سے ممتاز کرنے اور اپنے مؤکلوں کو ایک انوکھا تجربہ فراہم کرنے کے ل You آپ کو اپنے پروڈکٹ پیج میں ردوبدل کرنا ہوگا۔ مزید برآں ، آپ کے پروڈکٹ پیج کو جمالیاتی طور پر ذاتی نوعیت کا اختیار آپ کے آن لائن اسٹور میں مستقل بصری ڈیزائن کو برقرار رکھنے کے لئے اہم ہے۔ ایلیمینٹر آپ کے WooCommerce اسٹور کے صفحات کو اپنی مرضی کے مطابق بنانے کے لئے ایک لاجواب ٹول ہے ، اور اس کی سفارش کی جاتی ہے۔ استعمال کرنے میں آسان ہونے کے علاوہ ، صفحہ بنانے والے میں کسٹم پروڈکٹ پیجز بنانے میں آپ کی مدد کرنے کے لئے تمام ضروری ویجٹ اور اسٹائل کے آپشنز شامل ہیں۔ ہم امید کرتے ہیں کہ آپ کو یہ ٹیوٹوریل معلوماتی تھا اور ایلیمینٹر کا استعمال کرتے ہوئے اپنے WooCommerce پروڈکٹ اور پروڈکٹ آرکائیو پیجز کو اپنی مرضی کے مطابق بنانے کے لئے درکار معلومات آپ کو مہیا کریں گی۔ کیا آپ ماضی میں WooCommerce صفحات بنانے کے ل E ایلیمینٹر کا استعمال کرتے ہیں؟ تبصرے کے سیکشن میں اپنے خیالات بانٹنے کے لئے آپ کا خیر مقدم ہے۔ ہمیں ایک نظر ڈال کر خوشی ہوگی۔
انا وولٹا پرسنلزاٹا لا پیجینا ، کم سی ایسوسیہ ال پروڈوٹو ڈیل نیگوزیو؟
ہیلو ، یہ سیٹ اپ ہے جب آپ پہلی بار اپنے صفحے کے ڈیزائن کو بچاتے ہیں یا ایلیمینٹر بچانے والے بٹن کے اوپر چھوٹے تیر کا استعمال کرتے ہیں۔