وبلاگ
آموزش جامع طراحی سایت فروشگاهی با المنتور
بدون یک خط کد فروشگاهت را بساز! | راهنمای صفر تا صد
توی این مقاله یاد می‌گیری چطور با المنتور (Elementor)، بدون نوشتن یک خط کد، یه فروشگاه آنلاین حرفه‌ای راه بندازی. از نصب افزونه تا طراحی صفحه محصول، سبد خرید و اتصال درگاه پرداخت، همه چیز رو قدم‌به‌قدم باهات میریم. اگه دنبال یه راه سریع و ارزون برای ورود به دنیای فروش آنلاین هستی، این آموزش دقیقاً برای توئه!
بدون یک خط کد فروشگاهت را بساز! | راهنمای صفر تا صد
رها، طراح جواهرات دست‌ساز، یه سال پیش تو یه بازارچه محلی کارش رو شروع کرد. مشتری‌ها عاشق طرح‌هاش بودن، ولی هر بار میگفتن: «چرا سایت نداری؟ ما از شهرستان هم میخریم!» رها هم دلش می‌خواست یه فروشگاه آنلاین داشته باشه، ولی فکر میکرد باید برنامه‌نویس بگیره یا کلی پول بده. تا اینکه یه دوستش بهش گفت: «با المنتور خودت میتونی بسازیش، حتی یه خط کد هم لازم نیست!»
رها یه شنبه عصر، با یه فنجون چای، نشست و شروع کرد. ۴ ساعت بعد، اولین محصولش رو توی سایت جدیدش آپلود کرد. حالا، ۸ ماهه داره از همه جای ایران سفارش می‌گیره.
⚡ حالا نوبت توئه! توی این آموزش، دقیقاً همون مسیری که رها رفت رو باهات طی میکنیم، قدم‌به‌قدم و بدون سردرگمی.
مقالات مرتبط در پارس‌تات:
۱. چرا المنتور برای فروشگاه آنلاین؟
طبق آمار سال ۲۰۲۳، بیش از ۱۲ میلیون سایت توی دنیا از المنتور استفاده میکنن. دلیلش چیه؟
- رابط کشیدن و رها کردن (Drag & Drop): نیازی به کد نیست.
- سازگاری کامل با ووکامرس (WooCommerce): قدرتمندترین افزونه فروشگاهی وردپرس.
- قالب‌های آماده: صدها نمونه برای صفحه محصول، سبد خرید و چک‌اوت.
- ویرایشگر زنده (Live Editor): تغییرات رو لحظه‌ای می‌بینی.
- پشتیبانی موبایل: طراحی ریسپانسیو خودکار.
💬 نکته رها: «من اول فکر میکردم باید فتوشاپ بلد باشم. ولی توی المنتور، حتی رنگ دکمه رو با یه کلیک عوض میکنم!»
۲. پیش‌نیازهای شروع کار
قبل از شروع، این‌ها رو آماده کن:
| مورد | توضیح | هزینه تقریبی (سالانه) |
|---|---|---|
| هاست و دامنه | شروع اقتصادی (هاست ایرانی + دامنه .ir) | ۴۵۰,۰۰۰ تا ۱,۰۰۰,۰۰۰ تومان |
| وردپرس | نسخه ۶.۰ یا جدیدتر | رایگان |
| افزونه ووکامرس | نصب از مخزن رسمی وردپرس | رایگان (نسخه پایه) |
| المنتور | نسخه رایگان یا پرو (Pro) | رایگان / ۴۹ دلار (پرو) |
| درگاه پرداخت | زرین‌پال، آیدی‌پی، نکست‌پی یا سایر درگاه‌ها | کارمزد تراکنش (معمولاً ۱-۳٪) |
گام صفر: نصب وردپرس و ووکامرس
- نصب وردپرس: از پنل هاستت (cPanel یا DirectAdmin)، وردپرس رو نصب کن.
- نصب ووکامرس:
- از داشبورد وردپرس، برو
افزونه‌ها > افزودن - جستجو کن: WooCommerce
- روی نصب و بعد فعال‌سازی کلیک کن.
- ویزارد راه‌اندازی ووکامرس رو طی کن (واحد پول: ریال، کشور: ایران).
- از داشبورد وردپرس، برو
۳. نصب و راه‌اندازی المنتور
گام ۱: دانلود و نصب افزونه المنتور
- برو
افزونه‌ها > افزودن - جستجو کن: Elementor
- روی نصب کلیک کن، بعد فعال‌سازی.
آموزش طراحی سایت فروشگاهی با المنتور
گام ۲: نصب قالب سازگار
المنتور با اکثر قالب‌ها کار میکنه، ولی برای بهترین نتیجه، از قالب‌های زیر استفاده کن:
- Hello Elementor (رایگان، سبک و توصیه‌شده)
- Astra
- OceanWP
- Kadence
نصب قالب:
ظاهر > قالب‌ها > افزودن- جستجو: Hello Elementor
- نصب و فعال‌سازی.
۴. طراحی صفحه اصلی فروشگاه
گام ۳: ساخت صفحه اصلی (Home Page)
- برو
صفحات > افزودن - عنوان: صفحه اصلی فروشگاه
- روی دکمه ویرایش با المنتور کلیک کن.
ساخت صفحه اصلی (Home Page)
افزودن ویجت‌ها (Widgets)
بخش هدر (Header):
- ویجت Heading: عنوان جذاب (مثلاً: «تازه‌ترین طرح‌های جواهرات دست‌ساز»)
- ویجت Button: دکمه CTA (مثلاً: «مشاهده محصولات»)
افزودن ویجت‌ها (Widgets)
بخش محصولات ویژه:
از ویجت Products (فقط در نسخه پرو) یا از Shortcode ووکامرس استفاده کن:
[products limit="8" columns="4" orderby="popularity"]
💬 نکته رها: «من از ویجت Icon Box استفاده کردم و عکس مشتری‌ها رو با متن نظرشون کنار هم گذاشتم. خیلی ساده بود!»
۵. ساخت صفحه محصول (Product Page)
ووکامرس به صورت پیش‌فرض یه قالب محصول داره، ولی با المنتور پرو میتونی کاملاً سفارشی‌سازیش کنی.
گام ۴: طراحی قالب محصول
- برو
المنتور > قالب‌های من (My Templates) - کلیک کن افزودن > Single Product
- یه قالب آماده انتخاب کن یا از صفر شروع کن.
طراحی قالب محصول
ویجت‌های کلیدی:
- Product Title: عنوان محصول
- Product Images: گالری تصاویر
- Product Price: قیمت
- Add to Cart: دکمه افزودن به سبد
- Product Meta: دسته‌بندی، برچسب‌ها، SKU
- Product Tabs: توضیحات، نظرات، اطلاعات بیشتر
بهینه‌سازی موبایل
- از حالت Responsive (آیکون موبایل/تبلت توی پایین ویرایشگر) استفاده کن.
- فونت‌ها رو کوچک‌تر، فاصله‌ها رو کم‌تر کن.
بهینه‌سازی موبایل
۶. صفحه سبد خرید و چک‌اوت
ووکامرس به طور پیش‌فرض صفحات سبد خرید (Cart) و پرداخت (Checkout) رو می‌سازه، ولی بیاییم اون‌ها رو با المنتور قشنگ‌تر کنیم.
گام ۵: ویرایش صفحه سبد خرید
- برو
صفحات > سبد خرید - کلیک کن ویرایش با المنتور
- از ویجت Cart (نسخه پرو) یا شورت‌کد ووکامرس استفاده کن:
[woocommerce_cart]
گام ۶: ویرایش صفحه پرداخت (Checkout)
ویرایش صفحه پرداخت (Checkout)
- برو
صفحات > پرداخت - کلیک کن ویرایش با المنتور
- از ویجت Checkout (پرو) یا شورت‌کد:
[woocommerce_checkout]
⚠️ نکته امنیتی: حتماً گواهی SSL روی سایتت نصب کن تا اطلاعات مشتری‌ها رمزنگاری بشن. اکثر هاست‌ها SSL رایگان Let’s Encrypt ارائه میدن.
۷. اتصال درگاه پرداخت ایرانی
برای فروش در ایران، باید یه درگاه پرداخت ایرانی به ووکامرس وصل کنی. محبوب‌ترین‌ها:
- زرین‌پال (ZarinPal): ساده‌ترین نصب، پشتیبانی خوب
- آیدی‌پی (IDPay): کارمزد پایین‌تر، امکانات بیشتر
- نکست‌پی (NextPay): مناسب کسب‌وکارهای نوپا
گام ۷: نصب افزونه درگاه پرداخت
- برو
افزونه‌ها > افزودن - جستجو: ZarinPal WooCommerce (یا IDPay)
- نصب و فعال‌سازی
- برو
ووکامرس > تنظیمات > پرداخت‌ها - درگاه موردنظر رو فعال کن وAPI Key رو که از سایت درگاه گرفتی وارد کن.
نصب افزونه درگاه پرداخت
✅ تست درگاه: حتماً قبل از انتشار سایت، یه خرید آزمایشی با درگاه پرداخت انجام بده تا مطمئن بشی همه چیز درسته.
۸. بهینه‌سازی سئو فروشگاه
گام ۸: نصب افزونه سئو
- افزونه Yoast SEO یا RankMath رو نصب کن.
- برای هر محصول:
- Focus Keyword رو وارد کن (مثلاً: «خرید دستبند نقره دست‌ساز»)
- Meta Description جذاب بنویس (زیر۱۶۰ کاراکتر)
- Alt Text برای تصاویر محصول فراموش نشه!
چک‌لیست سئو داخلی
- ✅ عنوان هر محصول شامل کلمه کلیدی اصلی
- ✅ توضیحات محصول حداقل ۳۰۰ کلمه
- ✅ URL کوتاه و معنادار (
yoursite.com/product/silver-bracelet) - ✅ تصاویر فشرده‌شده (زیر ۱۰۰KB)
- ✅ لینک‌دهی داخلی به محصولات مرتبط
- ✅ Schema Markup محصول (Yoast این رو خودکار اضافه میکنه)
بهینه‌سازی سئو فروشگاه
💡 آمار: طبق تحقیقات Backlinko، صفحاتی که عکس‌هاشون Alt Text دارن تا ۴۵٪ترافیک بیشتری از تصویر گوگل دریافت میکنن.
۹. المنتور رایگان یا پرو؟ مقایسه کامل
| ویژگی | رایگان (Free) | پرو (Pro) |
|---|---|---|
| تعداد ویجت | +۴۰ | +۱۰۰ |
| ویجت‌هایووکامرس | ❌ | ✅ |
| قالب‌های آماده (Kits) | محدود | +۱۰۰ کیت کامل |
| Theme Builder | ❌ | ✅ |
| Popup Builder | ❌ | ✅ |
| پشتیبانی اختصاصی | انجمن | تیکت اختصاصی |
| قیمت سالانه | رایگان | از۵۹ دلار |
🎯 توصیه پارس تات: اگه تازه شروع می‌کنی، نسخه رایگان کاملاً کافیه. وقتی فروشت رفت بالا و نیاز به سفارشی‌سازی بیشتر داشتی، اون موقع به پرو ارتقا بده.
۱۰. تست نهایی و انتشار سایت
گام ۹: چک‌لیست قبل از انتشار
چک لیست قبل انتشار
- ✅ تست خرید کامل (از سبد تا تأیید سفارش)
- ✅ چک کردن ایمیل تأیید سفارش (باید به مشتری برسه)
- ✅ نمایش صحیح در موبایل و تبلت
- ✅ سرعت بارگذاری زیر ۳ثانیه (تست باPageSpeed Insights)
- ✅ اتصال SSL (آدرس سایت با
https://شروع بشه) - ✅ صفحه ۴۰۴ سفارشی (برای لینک‌های خراب)
- ✅ Google Search Console و Analytics نصب باشه
گام ۱۰: بهینه‌سازی سرعت
- افزونه کش: WP Rocket، LiteSpeed Cache، یا WP Super Cache
- فشرده‌سازی تصاویر: افزونه Smush یا ShortPixel
- CDN: Cloudflare رایگان (کاهش تأخیر)
💡 آمار: طبق تحقیقات Google، هر۱ثانیه تأخیر در لود سایت موبایل، نرخ تبدیل رو تا۲۰٪ کاهش میده!
خلاصه ۱۰ گام در یک نگاه
اینفوگرافی ۱۰ مرحله طراحی سایت فروشگاهی
وقت نداری یا می‌خوای حرفه‌ای‌تر بشی؟
تیم پارس تات دوره مقدماتی طراحی سایت با وردپرس را با بالاترین استانداردها طراحی کرده، از مشاوره رایگان شروع کن!
سوالات متداول (FAQ)
جمع‌بندی: حالا نوبت توئه!
همون‌طور که دیدی، ساخت فروشگاه آنلاین با المنتور دیگه کار سختی نیست. با۱۰ گامی که باهات رفتیم، از صفر تا یه فروشگاه کامل رفتی. مثل رها، یه شنبه عصر با یه فنجون چای بشین و شروع کن!
🌟 «بهترین زمان برای شروع دیروز بود، دومین بهترین زمان همینه!»
اگه سوال داری یا می‌خوای یه مرحله خاص رو بیشتر توضیح بدیم، توی بخش نظرات بنویس. هر هفته جواب می‌دیم!👇
