آموزش المنتور, آموزش طراحی سایت, آموزش وردپرس

صفر تا صد آموزش المنتور؛ چطور بدون یک خط کد، سایت حرفه‌ای بسازیم؟

آموزش کامل طراحی سایت با المنتور؛ از صفر تا صد برای مبتدیان

المنتور یکی از محبوب‌ترین و قدرتمندترین صفحه‌سازهای وردپرس هست که به شما امکان میده بدون نوشتن یک خط کد، سایت حرفه‌ای طراحی کنید. با بیش از ۵ میلیون نصب فعال و رتبه‌ی بالا در میان افزونه‌های Elementor وردپرس، این ابزار انتخاب اول فریلنسرها، طراحان گرافیک و کسب‌وکارهای کوچیک شده.

حالا ، شاید تو هم مثل خیلیا باشی که دوست داری سایت شخصی یا فروشگاه آنلاین خودت رو راه بندازی، اما از برنامه‌نویسی سر در نمیاری. دقیقاً برای همین اومدیم تا توی این مقاله، قدم به قدم بهت یاد بدیم چطور با آموزش المنتور برای مبتدیان، اولین صفحت رو طراحی کنی، از ویجت‌ها استفاده کنی و حتی با تمپلیت‌های آماده، یه سایت خفن بسازی. آماده‌ای؟ 🚀

قبل از اینکه بریم سراغ نصب و کارای فنی، بذار با رضا آشنا بشی. رضا یه دانشجوی ۲۵ ساله‌ی IT بود که یه ایده‌ی استارتاپی توی سرش داشت. اما یه مشکل بزرگ داشت: برنامه‌نویسی وب بلد نبود و بودجه‌ش هم اجازه نمیداد طراح بگیره. یه شب داشت توی یوتیوب دنبال راه‌حل می‌گشت که به یه ویدئو از طراحی سایت با المنتور برخورد کرد. ۳ روز بعد، اولین سایتش آماده بود و ماه اول، ۲ تا پروژه فریلنسری گرفت! حالا رضا داره با المنتور، درآمد ثابت کسب می‌کنه.

“طراحی بدون کد، یعنی آزادی برای خلاقیت بدون محدودیت.”

المنتور چیست؟

المنتور (Elementor) یه صفحه‌ساز drag-and-drop (کشیدن و رها کردن) برای وردپرس هست که بهت اجازه میده هر صفحه‌ای رو که تو ذهنت هست، به صورت بصری و لحظه‌ای طراحی کنی. اصلاً نیازی نیست HTML، CSS یا JavaScript بدونی. همه چیز اینجا visual هست.

این افزونه توسط شرکت Elementor Ltd در سال ۲۰۱۶ منتشر شد و خیلی سریع به یکی از پرطرفدارترین ابزارهای طراحی سایت تبدیل شد.

چرا المنتور انقدر محبوبه؟

  • رابط کاربری بصری: همه چیز رو به صورت لایو میبینی و تغییر میدی
  • بدون کدنویسی: هیچ نیازی به دانش فنی نداری
  • سرعت بالا: بهینه‌سازی شده برای عملکرد و SEO
  • تمپلیت‌های آماده: صدها قالب حرفه‌ای رایگان و پولی
  • پشتیبانی قوی: جامعه‌ی بزرگ کاربران و مستندات کامل

 

“خلاقیت محدودیت نمی‌شناسه، مگه اینکه ابزار رو محدود کنی.” – استیو جابز

چرا المنتور؟ مزایا و معایب

خب، حالا که فهمیدی المنتور چیه، بیا ببینیم چرا باید ازش استفاده کنی و کجاها ممکنه محدودیت داشته باشه. صادقانه حرف بزنیم که بتونی تصمیم درستی بگیری.

مزایای المنتور ✅

  • طراحی بدون کد: حتی اگه هیچی از برنامه‌نویسی نمی‌دونی، میتونی سایت حرفه‌ای بسازی.
  • نسخه رایگان قدرتمند: المنتور رایگان یا پولی؟ نسخه‌ی رایگانش خیلی امکانات خوب داره و برای شروع کافیه.
  • سرعت توسعه: کارهایی که قبلاً هفته‌ها طول می‌کشید، الان چند ساعته انجام میشه.
  • ویجت‌های متنوع: از متن و تصویر گرفته تا فرم، اسلایدر، شمارنده، گالری، نقشه و صدها ویجت دیگه.
  • ریسپانسیو بودن: طراحی‌ت روی موبایل، تبلت و دسکتاپ عالی به نظر میرسه.
  • سازگاری با تم‌ها: تقریباً با همه‌ی تم‌های وردپرس کار می‌کنه.
  • جامعه‌ی بزرگ: هر مشکلی داشته باشی، توی انجمن‌ها و یوتیوب جوابش رو پیدا می‌کنی.

معایب المنتور ⚠️

  • سنگینی: اگه خیلی ویجت اضافه کنی یا تنظیمات رو بهینه نکنی، ممکنه سایت کمی کند بشه.
  • وابستگی به افزونه: اگه روزی بخوای المنتور رو حذف کنی، طراحی‌هات از بین میره (البته راه‌حل‌هایی هست).
  • نسخه‌ی پولی برای امکانات پیشرفته: ویجت‌های حرفه‌ای‌تر، تم بیلدر و پاپ‌آپ ساز فقط توی Elementor Pro هستن.
  • منحنی یادگیری: اولش ممکنه گیج بشی، اما با یه‌کم تمرین راحت میشه.

توی کتاب “Don’t Make Me Think” نوشته‌ی استیو کراگ، یه جمله‌ هست: “اگر کاربر مجبور باشه فکر کنه چطور از طراحیت استفاده کنه، طراحیت شکست خورده.” المنتور دقیقاً همین فلسفه رو دنبال می‌کنه: سادگی و قدرت در کنار هم.

مقایسه المنتور رایگان و پرو

ویژگی المنتور رایگان المنتور پرو
ویجت‌های پایه ✅ (۴۰+) ✅ (۹۰+)
تمپلیت‌های آماده ✅ (محدود) ✅ (۳۰۰+)
تم بیلدر (Header/Footer)
پاپ‌آپ بیلدر
پشتیبانی انجمن اولویت‌دار ۲۴/۷
قیمت سالانه رایگان از $۵۹

پس اگه تازه شروع کردی، نسخه‌ی رایگان برات کافیه. وقتی حرفه‌ای‌تر شدی، میتونی به پرو ارتقا بدی.

المنتور، قدرت طراحی بدون یک خط کد!”

نصب و راه‌اندازی المنتور (گام به گام)

خب، حالا بیا ببینیم چطور افزونه Elementor وردپرس رو نصب کنیم و اولین قدم‌ها رو برداریم. نگران نباش، خیلی سادس!

پیش‌نیازها

  • یه سایت وردپرس نصب شده (حتماً آخرین نسخه باشه)
  • یه تم وردپرس (هر تمی کار می‌کنه، ولی Hello Elementor که خود المنتور ساخته، بهترین گزینه‌ هست)
  • دسترسی به پنل مدیریت وردپرس

مراحل نصب المنتور

  1. ورود به پنل وردپرس: به آدرس your-site.com/wp-admin برو و وارد شو.
  2. رفتن به بخش افزونه‌ها: از منوی سمت چپ، روی Plugins → Add New کلیک کن.
  3. جستجوی المنتور: توی کادر جستجو، عبارت “Elementor” رو تایپ کن.
  4. نصب افزونه: افزونه‌ی Elementor Page Builder رو پیدا کن (سازنده: Elementor.com) و روی Install Now کلیک کن.
  5. فعال‌سازی: بعد از نصب، روی Activate کلیک کن. تمام! حالا المنتور نصب شده.

 

تنظیمات اولیه

بعد از فعال‌سازی، المنتور یه ویزارد راه‌اندازی بهت نشون میده. توصیه‌ام اینه که:

  • نام و ایمیلت رو وارد کنی (اختیاریه، ولی برای دریافت آپدیت‌ها خوبه).
  • استفاده از تم Hello Elementor: اگه تم خاصی نداری، این تم رو نصب کن. خیلی سبک و بهینه‌ست.
  • ایمپورت تمپلیت‌های نمونه: می‌تونی چند تا تمپلیت آماده رو ببینی و ازشون الهام بگیری.

تبریک میگم! حالا المنتور آماده‌ی استفاده هست. 🎉

“شروع، مهم‌ترین قدمه. حتی اگه کوچیک باشه.”

آموزش گام‌به‌گام طراحی اولین صفحه با المنتور

حالا که المنتور نصب شده، بیا اولین صفحه‌مون رو بسازیم. من قول میدم که تا آخر این بخش، یه صفحه‌ی حرفه‌ای آماده داری! 💪

گام ۱: ساخت صفحه جدید

  1. از داشبورد وردپرس، برو به Pages → Add New.
  2. یه عنوان برای صفحه‌ات انتخاب کن، مثلاً “صفحه اصلی” یا “درباره ما”.
  3. روی دکمه‌ی “Edit with Elementor” کلیک کن. ویرایشگر بصری المنتور باز میشه.

گام ۲: انتخاب یا ساخت ساختار (Section & Column)

توی المنتور، صفحه از Sections (بخش‌ها) تشکیل شده که هر کدوم میتونن چند Column (ستون) داشته باشن.

  • روی دکمه‌ی + (پلاس) کلیک کن تا یه Section (بخش) جدید اضافه بشه.
  • ساختار ستون‌هات رو انتخاب کن (مثلاً یک ستون، دو ستون، سه ستون و غیره).
  • میتونی با drag کردن، عرض ستون‌ها رو تنظیم کنی.

گام ۳: اضافه کردن ویجت‌ها

حالا نوبت اضافه کردن محتواست. ویجت‌ها توی پنل سمت چپ هستن:

  • ویجت Heading رو بکش بذار توی ستون برای عنوان.
  • ویجت Text Editor برای متن توضیحات.
  • ویجت Image برای اضافه کردن تصویر.
  • ویجت Button برای دکمه‌ی کال تو اکشن.

 

گام ۴: تنظیم استایل‌ها

هر ویجتی که انتخاب کنی، سه تب داره: Content، Style و Advanced.

  • Content: محتوای اصلی (متن، تصویر، لینک) رو اینجا تنظیم کن.
  • Style: رنگ، فونت، سایز، فاصله‌ها و همه‌ی استایل‌های بصری اینجاست.
  • Advanced: مارجین، پدینگ، انیمیشن، CSS اختصاصی و موارد پیشرفته‌تر.

گام ۵: ریسپانسیو کردن صفحه

المنتور یه ابزار عالی برای طراحی ریسپانسیو داره. پایین ویرایشگر، آیکون‌های دسکتاپ، تبلت و موبایل رو می‌بینی. روی هر کدوم کلیک کن و ببین طراحیت چطور به نظر میرسه. اگه نیاز به تنظیم داشت، همونجا اصلاح کن.

گام ۶: ذخیره و انتشار

  1. وقتی راضی شدی، پایین صفحه روی Publish کلیک کن.
  2. یا اگه میخوای قبلش ذخیره کنی و بعداً منتشر کنی، Save Draft رو انتخاب کن.
  3. با کلیک روی آیکون چشم (Preview)، پیش نمایش صفحه رو توی مرورگر ببین.

🎉 تبریک! اولین صفحت با المنتور آمادست. رضا هم همین کار رو کرد و اولین سایت استارتاپیش رو توی ۳ روز راه انداخت!

یه سایت خوب، فروشنده‌ی ساکتیه که ۲۴ ساعت شبانه‌روز کار می‌کنه.”

ویجت‌های پرکاربرد المنتور که باید بشناسی

نگار یه طراح گرافیک بود که می‌خواست پورتفولیوی آنلاین بسازه. وقتی با ویجت‌های المنتور آشنا شد، گفت: “انگار این ابزار دقیقاً برای آدم‌هایی مثل من ساخته شده!” بیا ببینیم نگار از کدوم ویجت‌ها بیشتر استفاده کرد:

ویجت‌های ضروری برای شروع

  • Heading: برای تیترها و زیرتیترها. میتونی فونت، سایز، رنگ و تراز رو تنظیم کنی.
  • Text Editor: ویرایشگر متن کامل با امکانات فرمت‌بندی.
  • Image: اضافه کردن تصویر با تنظیمات سایز، border radius و لینک.
  • Button: دکمه‌های CTA با طراحی‌های مختلف و لینک‌دهی.
  • Divider: خط جداکننده بین بخش‌ها.
  • Spacer: ایجاد فضای خالی بین المان‌ها.

ویجت‌های پیشرفته‌تر

  • Image Gallery: گالری تصاویر با چیدمان‌های مختلف.
  • Testimonial: نظرات مشتریان به صورت کارت‌های زیبا.
  • Icon Box: آیکون + عنوان + متن، عالی برای معرفی خدمات.
  • Counter: شمارنده‌ی انیمیشن‌دار برای آمارها (مثل “۵۰۰+ مشتری راضی”).
  • Progress Bar: نوار پیشرفت برای نشون دادن مهارت‌ها.
  • Accordion / Toggle: محتوای تاشو برای سوالات متداول.
  • Video: جاسازی ویدئوهای یوتیوب، ویدئو یا فایل‌های مستقیم.
  • Google Maps: نقشه‌ی لوکیشن کسب‌وکارت.
  • Contact Form: فرم تماس ساده (نیاز به افزونه WPForms یا Contact Form 7 داره).

 

 

نگار با همین ویجت‌ها تونست یه پورتفولیوی حرفه‌ای بسازه که بازدیدکننده‌هاش گفتن فکر می‌کردن این سایت رو یه آژانس طراحی ساخته! قدرت المنتور اینجاست: نتیجه‌ای حرفه‌ای با تلاشی مینیمال.

تمپلیت‌های آماده المنتور؛ میان‌بر حرفه‌ای‌ها

یکی از بزرگ‌ترین مزیت‌های صفحه‌ساز المنتور اینه که نیازی نیست از صفر شروع کنی. کتابخونه‌ی عظیمی از قالب‌های آماده المنتور وجود داره که فقط باید شخصی‌سازیشون کنی.

چطور از تمپلیت‌ها استفاده کنیم؟

  1. توی ویرایشگر المنتور، روی آیکون پوشه (Templates) کلیک کن.
  2. بین تمپلیت‌های Pages (صفحات کامل) و Blocks (بخش‌های آماده) انتخاب کن.
  3. از فیلترها برای یافتن تمپلیت مناسب کسب‌وکارت استفاده کن (پورتفولیو، فروشگاه، رستوران، بلاگ و…).
  4. روی Preview کلیک کن تا پیش‌نمایش ببینی.
  5. با کلیک روی Insert، تمپلیت رو به صفحه اضافه کن.
  6. حالا فقط متن و تصویرها رو با اطلاعات خودت جایگزین کن!

منابع تمپلیت رایگان

  • کتابخانه داخلی المنتور: بیش از ۱۰۰ تمپلیت رایگان مستقیم توی افزونه.
  • Envato Elements: هزاران تمپلیت حرفه‌ای با اشتراک ماهانه.
  • TemplateMonster: تمپلیت‌های تکی با قیمت مناسب.
  • سایت‌های ایرانی: بسیاری از سایت‌های ایرانی هم تمپلیت فارسی برای المنتور ارائه میدن.

💡 نکته: وقتی تمپلیت اضافه می‌کنی، المنتور ممکنه بخواد فونت‌ها یا تصاویر رو از سرورهای خارجی لود کنه. اگه سرعت برات مهمه، بعد از import، تصاویر رو با فایل‌های خودت جایگزین کن.

نکات حرفه‌ای و اشتباهات رایج در المنتور

رضا بعد از اینکه چند تا سایت ساخت، این نکات رو یاد گرفت. بعضیاشون رو از طریق اشتباه کردن یاد گرفت. ما اینجاییم که تو از اول درست یاد بگیری.

نکات حرفه‌ای ✨

  • از Global Colors و Fonts استفاده کن: از منوی Hamburger بالای ویرایشگر، رنگ‌ها و فونت‌های سایتت رو یک‌بار تعریف کن. اینطوری همه جا یکسان میمونن و تغییر دادنشون آسون‌تره.
  • Section رو کپی کن، از صفر نساز: اگه یه بخش خوب طراحی کردی، راست‌کلیک → Duplicate. وقت و انرژی زیادی صرفه‌جویی میشه.
  • بخش‌های پرتکرار رو به عنوان Template ذخیره کن: هدر، فوتر، CTA – اینا رو به عنوان My Templates ذخیره کن تا توی پروژه‌های بعدی استفاده کنی.
  • تصاویر رو قبل از آپلود فشرده کن: از ابزارهایی مثل TinyPNG یا Squoosh برای کاهش حجم تصاویر استفاده کن.
  • Revision رو فعال نگه‌دار: المنتور تاریخچه‌ی تغییرات رو نگه میداره. اگه اشتباه کردی، با Ctrl+Z یا از History، به نسخه‌ی قبلی برگرد.
  • از Padding و Margin به جای Spacer ویجت استفاده کن: کد تمیزتر میشه.

اشتباهات رایج که باید ازشون دوری کنی ⛔

  • استفاده از رنگ‌های زیاد: بیشتر از ۳ رنگ اصلی نداشته باش. سادگی، حرفه‌ای‌ترین طراحیه.
  • فونت‌های متنوع: حداکثر ۲ فونت (یکی برای تیتر، یکی برای متن). بیشتر از این، طراحی رو شلوغ می‌کنه.
  • نادیده گرفتن موبایل: بیش از ۶۰٪ کاربران ایرانی از موبایل وارد سایت میشن. همیشه موبایل ویو رو چک کن!
  • تصاویر سنگین: بزرگ‌ترین دلیل کندی سایت‌های ساخته‌شده با المنتور، تصاویر بهینه نشده‌ست.
  • نصب افزونه‌های زیاد المنتور: افزونه‌های add-on المنتور خیلی زیاد هستن. هر کدوم که نصب می‌کنی کد اضافه لود میشه. فقط اونایی رو نصب کن که واقعاً نیاز داری.
  • ذخیره نکردن قبل از بستن: این رو از رضا یاد بگیر که یه بار ۲ ساعت کار رو از دست داد! همیشه Ctrl+S رو فراموش نکن.

۶ قدم اعتمادسازی با سایت المنتوری

نگار یه نکته‌ی مهم متوجه شد: داشتن سایت کافی نیست، باید سایتت اعتماد بسازه. اون با این ۶ قدم تونست توی ۴ ماه، سفارش‌هاش رو ۳ برابر کنه:

  1. نمایش پورتفولیو واقعی: از ویجت Image Gallery استفاده کن و بهترین کارهات رو نشون بده. کار واقعی از هر متنی قوی‌تره.
  2. ویجت Testimonial برای نظرات مشتریان: حتی ۳ تا نظر واقعی از مشتریان قبلی، تأثیر شگفت‌انگیزی داره.
  3. صفحه‌ی “درباره ما” انسانی: با ویجت Image و Text Editor، تصویر واقعی و داستان خودت رو بگو. آدم‌ها از آدم‌ها خرید می‌کنن، نه از لوگو.
  4. شفافیت در قیمت‌گذاری: اگه ممکنه، یه جدول قیمت ساده با المنتور بساز. ابهام در قیمت، مشتری رو فراری میده.
  5. اطلاعات تماس واضح: از ویجت Icon Box یا Contact Form استفاده کن. آدرس، تلفن، ایمیل. هر چی دسترسی راحت‌تر باشه، اعتماد بیشتره.
  6. SSL و سرعت سایت: سایت امن (HTTPS) و سریع، به‌طور غیرمستقیم اعتماد می‌سازه. مرورگرها و کاربران هر دو به سایت‌های کند و ناامن بدبین هستن.

💬 نگار میگه: “قبل از اینکه المنتور یاد بگیرم، سایتم فقط یه صفحه‌ی ساده بود. بعد از پیاده‌سازی این ۶ قدم، مشتریا قبل از تماس، انگار از قبل منو میشناختن!

۰/۵ (۰ نظر)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *