ساخت صفحات فرود فروش — راهنمای گامبهگام
نوشته شده در تاریخ December 23, 2025
مقدمه
در این راهنما مرحلهبهمرحله یاد میگیرید چگونه از یک تصویر الهامبخش به یک بخش زنده و کاملاً واکنشگرا داخل Page Builderِ Selldone برسید — همه با کمک هوش مصنوعی.
در پایان، یک بخش حرفهای طراحیشده خواهید داشت که آماده انتشار در وبسایت Selldone شماست.
💡 نکته: Page Builderِ Selldone بر پایه Vuetify (Vue 3) ساخته شده — بنابراین هر بخشی که توسط پلاگین تولید میشود کاملاً با فریمورک مدرن و واکنشگرای فرانتاند Selldone سازگار است.
گام ۱ — آمادهسازی منبع الهام
برای شروع، یک طراحی بخش پیدا کنید که الهامبخش باشد. در این آموزش از بخشی از صفحه اصلی دیجیکالا بهعنوان مرجع استفاده میکنیم — چیدمانی پاک و مدرن که محصولات برجسته را با تصاویر قوی و فراخوانهای عمل واضح نمایش میدهد.از آن بخش در دیجیکالا اسکرینشات بگیرید؛ ما از این تصویر بهعنوان مرجع بصری در ChatGPT هنگام تولید طراحی سفارشی با پلاگین Selldone استفاده خواهیم کرد.
💡 نکته: بخشهایی را انتخاب کنید که چیدمانی ساختاریافته و متوازن داشته باشند. هرچقدر طراحی واضحتر باشد، ChatGPT بهتر میتواند آن را تحلیل و بازتولید کند.
⚠️ اطلاع استفاده منصفانه: اسکرینشاتی که در اینجا نشان داده شده تنها برای مقاصد آموزشی و الهامبخش استفاده شده است. تمام علائم تجاری، تصاویر و چیدمانها متعلق به دیجیکالا هستند — این آموزش وابسته به یا مورد تأیید دیجیکالا نیست.
گام ۲ — باز کردن ChatGPT با پلاگین Selldone
اطمینان حاصل کنید پلاگین Selldone در ChatGPT فعال است:1. به ChatGPT → Settings → Beta Features → Plugins بروید و گزینه plugins را فعال کنید.
2. به Plugin Store مراجعه کنید و پلاگین Selldone را نصب کنید.
3. یک چت جدید با پلاگین فعال شروع کنید.
باید لوگوی Selldone را کنار باکس چت خود ببینید — این یعنی آماده به کار است
گام ۳ — آپلود طراحی مرجع
اسکرینشات خود را آپلود کنید و یک پرامپت واضح وارد کنید، برای مثال:From the top menu, make sure you are using the latest version of ChatGPT.
"من میخواهم یک بخشی مثل این تصویر بسازم، با اندازه فونتهای واکنشگرا، امکان تغییر فونت و رنگ کارتها، و کارتهایی که میتوانند دایرهای یا مربع با گوشههای گرد باشند."
ChatGPT (با Selldone) تصویر را تحلیل کرده و کدی بر پایه Vuetify (Vue 3) تولید میکند که کاملاً با Page Builderِ Selldone سازگار است.
ایجاد یک صفحه فرود جدید در Selldone
قبل از اضافه کردن بخش سفارشیتان، ابتدا یک صفحه فرود خام در Selldone بسازیم تا از آن استفاده کنیم.
- در منوی بالای فروشگاه، به Pages → Landing → Add New Landing بروید.
- در این صفحه سه قالب پیشفرض برای صفحه فرود مشاهده میکنید.
- روی هرکدام از آنها کلیک کنید تا انتخاب شوند و وارد Landing Page Designer شوید. داخل طراح، پنل سمت چپ را باز کنید، عنصر "Code" را پیدا کرده و آن را روی ناحیه Page Builder بکشید. این عنصر "Code" جایی است که کدی را که ChatGPT با پلاگین Selldone تولید کرده، پیست یا وارد خواهید کرد.
- برای فعالسازی نوارابزار داخل کادر Code کلیک کنید — یک نوارابزار بالایی نمایش داده میشود که اغلب از آن استفاده خواهیم کرد.
گام ۴ — کپی و پیست کد اولیه ChatGPT در ویرایشگر
احتمال نسخهٔ اشتباه
حالا باید اولین نسخهای از کدی که ChatGPT برای شما تولید کرده را کپی کنید.همانطور که در اسکرینشات میبینید، نتیجه ممکن است متفاوت از تصویر مرجع باشد — یعنی ChatGPT نسخه اشتباهی از بخش تولید کرده است. این کاملاً طبیعی است، پس نگران نشوید.
"روی تصویری که فرستادم تمرکز کن. دوباره آن را ارسال میکنم."
نکته مهم: حالت پیشفرض ویرایشگر کد HTML است. باید به گزینه Vue سوئیچ کنید — در غیر این صورت نتیجهٔ خالی خواهید دید.
گزینه RESET TO DEFAULT:
گاهی وقتی نسخهٔ بهروزرسانیشدهٔ کد را پیست میکنید ممکن است تغییرات قابل مشاهدهای نبینید. این اتفاق زمانی رخ میدهد که ویرایشها بنیادین باشند. در این موارد باید روی گزینه Reset to Default کلیک کنید. توجه داشته باشید که استفاده از این گزینه تمام تنظیمات سفارشی شما را حذف میکند، شامل متون جدید، رنگها، اندازه فونتها و حتی تصاویر آپلودشده — در واقع یک ریست کارخانهای است 🙂.
گام ۵ — تنظیم بخش
ChatGPT، بر اساس آنچه از کاربران دیگر آموخته که از این روش برای ساخت بخشها استفاده کردهاند، اکنون طرحهای جامعتری تولید میکند — پس نیازی نیست همهٔ المانها را یکییکی درخواست کنید. این مزیت واقعی گفتگوهای بیشتر با آن است: هرچه گفتگوی شما طولانیتر و واضحتر باشد، ChatGPT سبک طراحی شما را بهتر میفهمد و نتایج کاملتر و دقیقتری ارائه میدهد.کد تولیدشده بهطور پیشفرض نسبتاً واکنشگرا است، اما هنوز میتوانید جزئیات را تنظیم کنید مانند اندازه و وزن فونتها، ارتفاع و عرض بخش یا کارتها و دیگر المانهای ظاهری بر اساس سلیقهتان.برای مثال میتوانید تنظیم کنید Selldone در صفحههای دسکتاپ بزرگ 8 کارت در هر ردیف، در تبلت 4 کارت و در موبایل 2 کارت نمایش دهد.
ببینیم ChatGPT چگونه این تنظیمات را تفسیر و اعمال میکند — ممکن است در مراحل بعدی نیاز به چند ویرایش یا درخواست دیگر داشته باشیم.در این مثال باید Section Max Width را روی 1400px تنظیم کنید تا چیدمان بهتر شود. همچنین میتوانید تعداد کارتها در هر ردیف را برای دسکتاپ، تبلت و موبایل به ترتیب 8، 4 و 2 قرار دهید.
برای بهبود فاصلهها، سعی کنید Cards Gap (Desktop) را حدود 12px قرار دهید. علاوه بر این میتوانید ارتفاع کارتها را از 180px به 160px کاهش دهید، یا اندازه تصویر را برای تطابق با طراحی تنظیم کنید.
مهم است که بدانید با بازی کردن اعداد این تنظیمات بهراحتی میتوانید ظاهر و حس بخش را شخصیسازی کنید — کمی آزمون و خطا کنید تا بهترین حالت مطابق سبک شما پیدا شود.
حالا زمان باز کردن صفحه زنده و دیدن بخش شما در عمل است.
برای مشاهدهٔ زنده، میتوانید از گزینه Live Preview استفاده کنید یا دکمهای که نام صفحه فرودتان را نمایش میدهد کلیک کنید — این کار صفحه را در نمای خریدار باز میکند، همانطور که بازدیدکنندگان شما آن را خواهند دید. با این حال، من توصیه نمیکنم از Live Preview برای بررسی نهایی استفاده کنید چون بهطور کامل ریسپانسیو بودن صفحه در دستگاههای مختلف را نشان نمیدهد — که در ادامه در مورد آن بیشتر توضیح خواهیم داد.
برای باز کردن Web Developer Tools در مرورگرهای ویندوز، کلید F12 را فشار دهید.
این ابزار به شما امکان پیشنمایش صفحه در اندازههای مختلف را میدهد — بدون اینکه نیاز به تست جداگانه روی موبایل، تبلت یا لپتاپ داشته باشید.
گام ۶ — تکرار و بهینهسازی
در اولین نسخه متوقف نشوید — اینجا جایی است که خلاقیت واقعی اتفاق میافتد. میتوانید به گفتگو با ChatGPT ادامه دهید تا جزئیاتی مانند موارد زیر را تنظیم کنید:• واکنشگرایی کامل بخش در همهٔ اندازهها.
• افزودن انیمیشن رویهاور.
• استفاده از دکمههای گرادیانت.
هر دور گفتگو بخش شما را فوراً بهروزرسانی میکند.
💡 نکته حرفهای: هرچه بیشتر چت کنید و دقیقتر توضیح دهید چه میخواهید، ChatGPT سبک طراحی شما را بهتر میفهمد. با گذشت زمان، ترجیحات شما را یاد میگیرد و نتایج دقیقتر و باکیفیتتری تولید میکند.
اینجا باید مشکل را واضح توضیح دهید تا ChatGPT بهتر آن را درک کند.
به یاد داشته باشید، ChatGPT ذهن شما را نمیخواند — باید مشکل را با جزئیات شرح دهید، مانند نمونهٔ زیر:
من در تنظیمات، برای سایز تبلت 4 کارت در هر ردیف انتخاب کردهام اما در iPad Pro 11-inch فقط 2 کارت نمایش میدهد. این را اصلاح کنید. برای موبایل 2 در هر ردیف انتخاب کردهام.
همانطور که میبینید، حالا در نمای تبلت بهدرستی 4 کارت در هر ردیف نمایش داده میشود.
گام ۷ — نهاییسازی کد و ذخیره بخش
وقتی طراحی شما آماده شد، خوب است یک توضیح دقیق از ساختار و نیازهای بخش به ChatGPT بدهید. از پرامپت زیر برای تولید کد نهایی استفاده کنید:بالای تگ یک بلوک توضیحی مفهومی اضافه کن که ساختار کلی، رفتار و جزئیات طراحی را خلاصه کند، سپس کد نهایی کامل را بده.ChatGPT کد نهایی کامل را با این ساختار تولید میکند که میتوانید آن را بهعنوان پایه برای بخشهای آینده نیز استفاده کنید.
- این بخش ذخیرهشده به منوی سمت راست Page Builder اضافه خواهد شد. اگر منو محو شد، کافیست گزینه Repository در منوی بالایی را کلیک کنید تا دوباره فعال شود.
برای تغییر نام این صفحه فرود:
به منوی سمت چپ بروید و آیکونهای SEO و Settings را پیدا کنید. اگر آنها را نمیبینید، به انتهای منو اسکرول کنید. سپس هرکدام را باز کرده و تغییرات لازم را اعمال کنید.
گام ۸ — پیشنمایش زنده
حالا سایت خود را باز کنید و بخش جدیدتان را زنده و کاملاً واکنشگرا ببینید. پنجره مرورگر را تغییر اندازه دهید یا آن را در موبایل باز کنید — بهصورت خودکار به هر اندازه صفحه سازگار میشود، به لطف Vuetify (Vue 3).
• در پرامپتها توصیفی باشید ("از سایههای نرم استفاده کن"، "CTA را وسط چین کن"، "گرادیانت ملایم اضافه کن").
• به تکرار ادامه دهید — هر دور گفتگو کیفیت طراحی را بهتر میکند.
• چند بخش را ترکیب کنید تا یک صفحه فرود کامل بسازید.
• به یاد داشته باشید: Selldone از Vuetify (Vue 3) استفاده میکند و این تضمینکنندهٔ چیدمانهای تمیز، انعطافپذیر و آماده تولید است.
• همیشه قبل از انتشار، ریسپانسیو بودن را در پیشنمایش Selldone تست کنید.
نتیجهگیری
با پلاگین Selldone در ChatGPT، ساخت بخشهای حرفهای صفحه فرود سریعتر و سادهتر از همیشه است. از یک تصویر شروع کنید (مثل مرجع دیجیکالا)، طراحی خود را از طریق گفتگو پالایش کنید و ایدههایتان را مستقیماً داخل Page Builderِ Selldone به واقعیت تبدیل کنید.هوشمند، بصری و لذتبخش است. پس طراحی موردعلاقهتان را انتخاب کنید، ChatGPT را باز کنید و بگذارید Selldone امروز به شما کمک کند چیزی شگفتانگیز بسازید!
👉 همین حالا امتحان کنید: Selldone ChatGPT Landing Builder Plugin
یا اگر ترجیح میدهید با تماشا یاد بگیرید، از این ویدیوی آموزشی استفاده کنید:
افزودن نظر
با بهترین فروشگاه ساز رایگان، کسب و کار خود را آنلاین کنید.
30 روز ضمانت بازگشت مبلغ
شروع فروش آنلاین ساخت فروشگاه حرفه ای — رایگانبا نرخ پایین فروش آنلاین خود خداحافظی کنید!
