Selldone پلگ ان کے ذریعے ChatGPT میں لینڈنگ پیجز بنائیں

تعارف

کبھی چاہا ہے کہ آپ خوبصورت، responsive لینڈنگ پیج کے سیکشن بنا سکیں — وہ بھی ایک لائن کوڈ لکھے بغیر؟ ChatGPT میں موجود Selldone پلگ ان کے ذریعے یہ خواب حقیقت بن جاتا ہے۔

اس رہنمائی میں آپ قدم بہ قدم سیکھیں گے کہ ایک inspiration تصویر سے لے کر Selldone کے Page Builder میں ایک لائیو، پوری طرح responsive سیکشن تک کیسے پہنچا جائے — وہ بھی AI کی مدد سے۔

آخر تک پہنچ کر آپ کے پاس ایک پیشہ ورانہ طریقے سے ڈیزائن کیا گیا سیکشن ہوگا جو آپ کی Selldone ویب سائٹ پر شائع کرنے کے لیے تیار ہوگا۔

💡 نوٹ: Selldone کا Page Builder Vuetify (Vue 3) پر مبنی ہے — اس لیے پلگ ان کے ذریعے جنریٹ ہونے والا ہر سیکشن Selldone کے جدید، responsive فرنٹ اینڈ فریم ورک کے ساتھ مکمل طور پر مطابقت رکھتا ہے۔

مرحلہ 1 e28093 اپنی Inspiration تیار کریں

شروع کرنے کے لیے ایسی سیکشن ڈیزائن تلاش کریں جو آپ کو متاثر کرے۔ اس ٹیوٹوریل میں ہم بطور حوالہ Daraz کے ہوم پیج کا ایک سیکشن استعمال کر رہے ہیں — ایک صاف، جدید لے آؤٹ جو نمایاں پراڈکٹس کو مضبوط امیجری اور واضح کال ٹو ایکشن کے ساتھ دکھاتا ہے۔

اس Daraz سیکشن کی سکرین شاٹ لیں؛ ہم اسے ChatGPT میں بصری حوالہ کے طور پر استعمال کریں گے جب Selldone پلگ ان کے ساتھ اپنی کسٹم ڈیزائن جنریٹ کریں گے۔

💡 مشورہ: ایسا سیکشن منتخب کریں جس کا لے آؤٹ منظم اور بصری طور پر متوازن ہو۔ جتنا واضح ڈیزائن ہوگا، ChatGPT اتنا ہی بہتر انداز میں اسے تجزیہ کر کے دوبارہ بنا سکے گا۔

⚠️ فیئر-یوز نوٹس: یہاں دکھائی گئی Daraz سکرین شاٹ صرف تعلیمی اور بصری الہام کے مقاصد کے لیے استعمال کی گئی ہے۔ تمام ٹریڈ مارکس، تصاویر اور لے آؤٹس متعلقہ کمپنیوں کے ہیں — یہ ٹیوٹوریل اُن کمپنیوں سے منسلک یا اُن کی جانب سے منظور شدہ نہیں ہے۔

مرحلہ 2 e28093 ChatGPT کھولیں اور Selldone پلگ ان فعال کریں

یقینی بنائیں کہ آپ نے ChatGPT میں Selldone پلگ ان فعال کر رکھا ہے:

1. ChatGPT پر جائیں → Settings → Beta Features → Plugins اور plugins کو فعال کریں۔
2. Plugin Store میں جا کر Selldone Plugin انسٹال کریں۔
3. پلگ ان فعال کر کے ایک نیا چیٹ شروع کریں۔

اگر آپ کو اپنے چیٹ باکس کے ساتھ Selldone کا لوگو نظر آئے تو مطلب پلگ ان تیار ہے۔

مرحلہ 3 e28093 اپنی حوالہ ڈیزائن اپلوڈ کریں

اپنی سکرین شاٹ اپلوڈ کریں اور واضح پرامپٹ لکھیں، مثال کے طور پر:

اوپر والے مینو سے یقینی بنائیں کہ آپ ChatGPT کا تازہ ترین ورژن استعمال کر رہے ہیں۔

“میں اس تصویر جیسا ایک سیکشن بنانا چاہتا ہوں، جس میں responsive فونٹ سائزز ہوں، فونٹ اور کارڈ کلرز کسٹمائز کیے جا سکیں، اور کارڈز گول یا rounded square ہو سکیں۔”

ChatGPT (Selldone کے ساتھ) تصویر کا تجزیہ کرے گا اور Vuetify (Vue 3) بیسڈ کوڈ جنریٹ کرے گا جو Selldone کے Page Builder کے ساتھ مکمل مطابقت رکھتا ہے۔

Selldone میں نیا Landing Page بنائیں

اپنا کسٹم سیکشن شامل کرنے سے پہلے، Selldone میں ایک خالی landing page بنائیں تاکہ اسی پر کام کیا جا سکے۔

1. اسٹور کے اوپر والے مینو سے جائیں → Pages → Landing → Add New Landing۔
   
2. اس اسکرین پر آپ تین ڈیفالٹ landing page ٹیمپلیٹس دیکھیں گے۔
3. کسی بھی ٹیمپلیٹ پر کلک کر کے اسے منتخب کریں اور Landing Page Designer میں داخل ہوں۔ ڈیزائنر کے اندر بائیں طرف کے پینل میں “Code” عنصر تلاش کریں اور اسے Page Builder ایریا میں ڈریگ کریں۔ یہی “Code” عنصر ہے جہاں آپ ChatGPT (Selldone) کے ذریعے جنریٹ کیا گیا سیکشن پیسٹ یا امپورٹ کریں گے۔
4. Code باکس کے اندر کلک کریں تاکہ ٹول بار فعال ہو جائے — ایک اوپر والا ٹول بار ظاہر ہوگا جسے ہم اکثر استعمال کریں گے۔

- پہلا آئیکن (<>) Code Editor کھولتا ہے، جہاں آپ ChatGPT کے ذریعے بنے HTML اور Vue-based سیکشن کا کوڈ پیسٹ یا ایڈٹ کر سکتے ہیں۔- دوسرا آئیکن Properties کھولتا ہے، جہاں آپ سیکشن کے لے آؤٹ، اسپیسنگ، اور بصری سیٹنگز ایڈجسٹ کر سکتے ہیں۔

مرحلہ 4 e28093 ChatGPT کے ابتدائی کوڈ کو ایڈیٹر میں پیسٹ کریں

ممکنہ طور پر غلط ورژن

اب آپ کو ChatGPT کے ذریعے تیار کیے گئے پہلے ورژن کا کوڈ کاپی کرنا ہوگا۔
جیسا کہ اسکرین شاٹ میں دکھایا گیا ہے، نتیجہ آپ کے حوالہ امیج سے مختلف لگ سکتا ہے — اس کا مطلب ہے کہ ChatGPT نے سیکشن کا ایک غیر درست ورژن تیار کیا ہے۔ یہ بالکل نارمل ہے، لہٰذا پریشان نہ ہوں۔اسے درست کرنے کے لیے، حوالہ تصویر دوبارہ بھیجیں اور دوبارہ کہیں، مثال کے طور پر:

“اوپر بھیجی گئی تصویر پر دوبارہ توجہ دیں۔ میں اسے دوبارہ بھیج رہا/رہی ہوں۔”

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

اہم نوٹ: کوڈ ایڈیٹر کا ڈیفالٹ موڈ HTML ہے. آپ کو Vue آپشن پر سوئچ کرنا لازمی ہے — ورنہ آپ کا نتیجہ خالی دکھائی دے سکتا ہے۔

اب آپ ChatGPT کے بنائے گئے سیکشن کا پہلا درست ورژن دیکھیں گے۔ ٹول بار میں دوسرے آئٹم پر کلک کریں (جیسا کہ اوپر بتایا گیا تھا) تاکہ Properties مینو کھلے اور آپ ایڈجسٹمنٹ کر سکیں۔ جیسا کہ دیکھا جا سکتا ہے، بہت سی سیٹنگز دستیاب ہیں جو آپ کے کاروبار کے مطابق سیکشن کو بہتر بنا سکتی ہیں۔

RESET TO DEFAULT آپشن:

کبھی کبھار جب آپ اپ ڈیٹ شدہ ورژن پیسٹ کرتے ہیں تو کوئی ظاہری تبدیلی نظر نہیں آتی۔ یہ اس وقت ہو سکتا ہے جب ایڈیٹس بنیادی ہوں۔ ایسے معاملات میں آپ کو Reset to Default آپشن پر کلک کرنا ہوگا۔ براہ کرم نوٹ کریں کہ اس آپشن کو استعمال کرنے سے آپ کی تمام کسٹمائزڈ سیٹنگز ہٹ جائیں گی، جن میں نئے متن، رنگ، فونٹ سائزز اور اپلوڈ شدہ تصاویر شامل ہیں — یہ ایک طرح کا فیکٹری ری سیٹ ہے 🙂۔لہٰذا، اس آپشن کا استعمال صرف تب کریں جب آپ کی تبدیلیاں صحیح طریقے سے لاگو نہیں ہو رہیں۔

مرحلہ 5 e28093 سیکشن کو ایڈجسٹ کریں

ChatGPT، دوسرے صارفین کے تجربات سے سیکھ کر، اب زیادہ جامع لے آؤٹس جنریٹ کرتا ہے — یعنی آپ کو ہر عنصر ایک ایک کر کے مانگنے کی ضرورت نہیں پڑتی۔ یہی ChatGPT کے ساتھ زیادہ بات چیت کرنے کا حقیقی فائدہ ہے: جتنا زیادہ اور واضح آپ گفتگو کریں گے، ChatGPT اتنا ہی بہتر آپ کے ڈیزائن کو سمجھ کر مکمل اور درست نتائج دے گا۔ڈیفالٹ جنریٹ کیا گیا کوڈ پہلے ہی کافی responsive ہوتا ہے، مگر آپ پھر بھی تفصیلات ایڈجسٹ کر سکتے ہیں جیسے فونٹ سائزز، فونٹ وزن، سیکشن یا کارڈ کی اونچائی، چوڑائی، اور دیگر بصری عناصر اپنی پسند کے مطابق۔
مثال کے طور پر، آپ Selldone میں سیٹ کر سکتے ہیں کہ بڑے ڈیسک ٹاپ سکرینز پر فی رو 8 کارڈز دکھیں، ٹیبلیٹ پر 4 کارڈز اور موبائل پر 2 کارڈز۔
چلیں دیکھتے ہیں کہ ChatGPT ان ایڈجسٹمنٹس کو کیسے سمجھ کر لاگو کرتا ہے — اگلے مراحل میں ہمیں شاید چند مزید ایڈٹ یا درخواستیں کرنی پڑیں۔اس کیس میں، بہتر لے آؤٹ کے لیے Section Max Width کو 1400px پر سیٹ کریں۔ آپ desktop, tablet, mobile کے لیے بالترتیب 8، 4، اور 2 کارڈز فی رو بھی سیٹ کر سکتے ہیں۔
spacing کو بہتر کرنے کے لیے Cards Gap (Desktop) کو تقریباً 12px پر لائیں۔ ساتھ ہی، آپ کارڈ کی اونچائی کو 180px سے کم کر کے 160px کر سکتے ہیں، یا امیج سائز کو اپنے ڈیزائن کے مطابق ایڈجسٹ کریں۔

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

بہتر بصری نتیجہ کے لیے آپ اپنی خود کی تصاویر اپلوڈ کر سکتے ہیں۔ ہم تجویز کرتے ہیں کہ شفاف بیک گراؤنڈ والی تصاویر استعمال کریں، تاکہ Card Background Color کا آپشن ان پر یکساں لاگو ہو — جس سے آپ کا سیکشن صاف اور پیشہ ورانہ نظر آئے گا۔اپنی تصاویر اپلوڈ کرنے، متون ایڈٹ کرنے اور سب کچھ حتمی شکل دینے کے بعد Save بٹن پر کلک کریں — یا Windows میں فوری طور پر Ctrl + S دبائیں۔
اب وقت ہے Live Page کھول کر اپنے سیکشن کو عمل میں دیکھنے کا۔
اسے لائیو دیکھنے کے لیے، آپ Live Preview آپشن استعمال کر سکتے ہیں یا اس کے ساتھ موجود بٹن پر کلک کریں جو آپ کے landing page کا نام دکھاتا ہے — یہ صفحہ buyer view میں کھولے گا، جیسا کہ آپ کے وزیٹر اسے دیکھیں گے۔ البتہ، میں Live Preview کو حتمی ورژن چیک کرنے کے لیے مشورہ نہیں دوں گا کیونکہ یہ پورے ڈیوائسز پر responsiveness کو مکمل طور پر ظاہر نہیں کرتا — جس پر ہم نیچے مزید بات کریں گے۔یہ کوڈ کا نتیجہ ہے۔ اب ہمیں مختلف اسکرین سائزز پر اسے ٹیسٹ کرنا ہوگا تاکہ یقینی ہو سکے کہ سب کچھ صحیح کام کر رہا ہے۔
Windows براؤزرز میں Web Developer Tools کھولنے کے لیے F12 دبائیں۔
یہ ٹول آپ کو مختلف اسکرین سائزز میں صفحہ پریویو کرنے دیتا ہے — بغیر موبائل، ٹیبلیٹ، لیپ ٹاپ یا دیگر ڈیوائسز پر الگ سے ٹیسٹ کیے۔اب اوپر کے مینو سے Responsive منتخب کریں تاکہ آپ دیکھ سکیں کہ آپ کا سیکشن مختلف سکرین سائزز پر کیسا دکھتا ہے۔جیسے کہ آپ دیکھیں گے، موبائل ورژن صاف اور مکمل responsive دکھائی دے رہا ہے۔ٹیبلٹ ویو میں — خاص طور پر iPad Pro 11-inch پر — ہماری سیٹنگز (ٹیبلٹ پر فی رو 4 کارڈز) لاگو نہیں ہو رہی ہیں اور صرف 2 دکھا رہا ہے۔ ہمیں ChatGPT سے یہ مسئلہ حل کرانے اور کوڈ ری کوڈ کرنے کو کہنا ہوگا۔

مرحلہ 6 e28093 دہرائیں اور بہتر کریں

پہلے ورژن پر رکیں مت — یہی وہ جگہ ہے جہاں اصلی تخلیقی صلاحیت سامنے آتی ہے۔ آپ ChatGPT کے ساتھ بات جاری رکھ کر تفصیلات ایڈجسٹ کر سکتے ہیں جیسے کہ:

• سیکشن کو تمام اسکرینز پر مکمل responsive بنائیں۔
• ہور اینیمیشن شامل کریں۔
• گریڈینٹ بٹن استعمال کریں۔

ہر راؤنڈ میں آپ کا سیکشن فوراً اپ ڈیٹ ہوتا ہے۔

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

میں نے Tablet size میں 4 Cards دکھانے کا انتخاب کیا ہے مگر iPad Pro 11-inch میں یہ ہر رو پر 2 Cards دکھا رہا ہے۔ اسے درست کریں۔ میں نے Mobile کے لیے 2 فی رو منتخب کیے ہیں۔

جب ChatGPT آپ کی درخواست کا جواب دیتا ہے، وہ بعض اوقات صرف مخصوص کوڈ تبدیلیاں فراہم کرتا ہے جنہیں آپ کو دستی طور پر replace یا add کرنا ہوتا ہے، جیسا کہ نیچے کی امیج میں دکھایا گیا ہے۔ آسانی کے لیے، بس کہیں “Send the full code.”اکثر، اپنے پیغام کے آخر میں ChatGPT آپ کو اضافی سیٹنگز تجویز کرتا ہے جو آپ نے نظر انداز کر دی ہوں — مثال کے طور پر اس کیس میں، وہ کارڈز میں لنکس شامل کرنے کی سفارش کرتا ہے، جو ہمارے سیکشن کے لیے ضروری ہے۔تقریباً تیار ہے! اپڈیٹڈ کوڈ کاپی کر کے ایڈیٹر میں پیسٹ کریں، تبدیلیاں محفوظ کریں، اور Live Mode میں دیکھیں کہ سب کچھ درست دکھ رہا ہے یا نہیں۔
جیسا کہ آپ دیکھ سکتے ہیں، اب یہ ٹیبلٹ ورژن میں ہر رو پر 4 کارڈز بالکل صحیح دکھا رہا ہے۔

مرحلہ 7 e28093 فائنل کوڈ تیار کریں اور سیکشن محفوظ کریں

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

Conceptual description کا بلاک