اگر می‌خواهید بدون نیاز به حتی یک خط کدنویسی، سایتی حرفه‌ای، زیبا و واکنش‌گرا طراحی کنید، افزونه المنتور دقیقاً همان ابزاری است که نیاز دارید. در این آموزش طراحی سایت با المنتور از صفر تا صد، به شما یاد می‌دهیم چطور تنها با چند کلیک و بدون نیاز به دانش فنی، سایت دلخواهتان را خلق کنید. المنتور یکی از محبوب‌ترین صفحه‌سازهای وردپرس است که با رابط کاربری ساده و بصری، طراحی سایت را برای همه ممکن کرده.
چه قصد ساخت یک سایت شخصی داشته باشید، یا طراحی سایت شرکتی یا فروشگاهی مدنظرتان است، در این مقاله از وبکده تمام مراحل استفاده از این افزونه را به شما عزیزان آموزش می‌دهیم.
المنتور چیست و چرا انتخاب مناسبی برای طراحی سایت است؟
المنتور یک صفحه‌ساز گرافیکی برای وردپرس است که بهتان اجازه می‌دهد فقط با کشیدن و رها کردن عناصر صفحات سایت را طراحی کنید. این افزونه به سرعت به انتخاب اول بسیاری از طراحان و صاحبان سایت تبدیل شد، چون هم قدرتمند است و هم بسیار کاربرپسند.
معرفی افزونه المنتور و ویژگی‌های آن
المنتور با بیش از 5 میلیون نصب فعال، محبوب‌ترین افزونه صفحه ساز وردپرس به‌شمار می‌آید. این افزونه مجموعه‌ای گسترده از ویجت‌ها (مانند متن، تصویر، فرم، دکمه و...) را در اختیار شما قرار می‌دهد تا بدون کدنویسی، صفحات متنوعی طراحی کنید.
برخی از ویژگی‌های کلیدی المنتور عبارت‌اند از:
- طراحی زنده و بصری (Live Editing)
- قابلیت واکنش‌گرایی (Responsive) برای موبایل و تبلت
- امکان استفاده از قالب‌های آماده (Templates)
- ادغام آسان با سایر افزونه‌های وردپرس
- پشتیبانی از زبان فارسی و راست‌چین (RTL)
![معرفی افزونه المنتور و ویژگی‌های آن]()
تفاوت نسخه رایگان و پرو المنتور
افزونه المنتور در دو نسخه رایگان و پرو ارائه می‌شود که هر کدام امکانات متفاوتی دارند. نسخه رایگان المنتور برای شروع طراحی سایت کاملاً کافی است و بسیاری از ویژگی‌های پایه مانند ساخت صفحات با درگ اند دراپ، ویجت‌های اصلی و قابلیت ریسپانسیو را در اختیار شما قرار می‌دهد. اما اگر به دنبال طراحی حرفه‌ای‌تر، امکانات پیشرفته‌تر و آزادی بیشتر در سفارشی‌سازی هستید، نسخه پرو انتخاب بهتری است. در نسخه پولی، شما به ویجت‌های اختصاصی، قالب‌های آماده پیشرفته، ساخت هدر و فوتر سفارشی، فرم‌ساز، طراحی پاپ‌آپ و ده‌ها ابزار دیگر دسترسی دارید که فرآیند طراحی را بسیار سریع‌تر و حرفه‌ای‌تر می‌کند.
در جدول زیر، تفاوت‌های اصلی این دو نسخه را با هم آورده شده:
| ویژگی‌ها |
نسخه رایگان Elementor |
نسخه پرو Elementor |
| ساخت صفحات با Drag & Drop |
بله |
بله |
| ویجت‌های پایه (متن، تصویر، ویدیو و...) |
دارد |
دارد |
| ویجت‌های پیشرفته (اسلایدر، فرم تماس و...) |
ندارد |
دارد |
| قالب‌های آماده حرفه‌ای |
محدود |
بیش از 300 قالب حرفه‌ای |
| ساخت هدر و فوتر سفارشی |
ندارد |
دارد |
| فرم‌ساز داخلی (تماس، عضویت، سفارش و...) |
ندارد |
دارد |
| پاپ‌آپ‌ساز (Pop-up Builder) |
ندارد |
دارد |
| پشتیبانی رسمی از طرف المنتور |
ندارد |
دارد |
| قیمت |
رایگان |
سالانه از حدود 59 دلار شروع می‌شود |
اگر به دنبال طراحی سایت ساده هستید، نسخه رایگان شروع خوبی برای کارتان است. اما اگر قصد راه‌اندازی یک وبسایت حرفه‌ای و چند منظوره دارید، ارتقاء به نسخه پرو کاملاً ارزش سرمایه‌گذاری را دارد.
پیش‌نیازهای طراحی سایت با المنتور
قبل از شروع طراحی، باید بستر لازم برای اجرای المنتور را فراهم کنید. این بستر همان وردپرس است که المنتور بر روی آن نصب و اجرا می‌شود. در این بخش، دو گام کلیدی برای شروع کار با المنتور را با هم مرور می‌کنیم: نصب وردپرس و نصب افزونه المنتور.
· نصب وردپرس و انتخاب هاست مناسب
اولین قدم، خرید یک هاست قابل اعتماد و انتخاب دامنه برای سایت است. پیشنهاد می‌شود از هاست مخصوص وردپرس استفاده کنید که سرعت و امنیت بالاتری دارد. پس از تهیه هاست، کافیست از بخش کنترل پنل مانند Cpanel یا DirectAdmin وردپرس را نصب کنید.
اگر تجربه کمی در این زمینه دارید، بسیاری از هاستینگ‌ها امکان نصب وردپرس با یک کلیک را فراهم می‌کنند. پس از نصب، وارد پنل مدیریت سایت خود شوید (yourdomain.com/wp-admin) و آماده نصب المنتور باشید.
· نصب و فعال سازی افزونه المنتور
برای نصب المنتور، از پنل مدیریت وردپرس به:
"افزونه‌ها ← افزودن" بروید و در کادر جستجو بنویسید: "Elementor"
پس از یافتن، روی "نصب" و سپس "فعال‌سازی" کلیک کنید.
حالا صفحه‌ساز المنتور در سایت شما فعال شده و می‌توانید با استفاده از آن صفحات دلخواه خود را طراحی کنید.
اگر قصد دارید از امکانات پیشرفته‌تری مثل طراحی هدر، فوتر یا فرم‌های حرفه‌ای بهره‌مند شوید، می‌توانید نسخه Elementor Proرا تهیه و با استفاده از فایل ZIP آن را نصب کنید.
شروع طراحی سایت با المنتور
پس از نصب المنتور، نوبت به شروع طراحی سایت می‌رسد. رابط کاربری این افزونه به‌گونه‌ای طراحی شده که حتی اگر تجربه قبلی در طراحی سایت نداشته باشید، باز هم بتوانید با چند کلیک یک سایت حرفه‌ای بسازید.
1. آشنایی با رابط کاربری المنتور
وقتی وارد محیط المنتور می‌شوید، با یک صفحه‌ی سفید روبه‌رو هستید که از دو بخش اصلی تشکیل شده:
در سمت راست، نمای زنده‌ی صفحه‌ای که در حال طراحی هستید را می‌بینید، و در سمت چپ، پنل ابزارها یا همان ویجت‌ها قرار دارد.
هر بخش از سایت را می‌توانید با کشیدن و رها کردن (Drag & Drop) ویجت‌ها به‌راحتی طراحی کنید. این ویجت‌ها شامل تیتر، متن، تصویر، دکمه، فرم تماس، اسلایدر و ده‌ها عنصر دیگر هستند که همگی قابل تنظیم و سفارشی‌سازی‌اند.
2. ایجاد صفحات جدید و استفاده از ویجت‌ها
برای ساخت صفحات جدید کافی است از پیشخوان وردپرس به بخش:
«برگه‌ها ← افزودن» بروید، بعد یک عنوان برای صفحه بنویسید: مثلاً "خانه" یا "تماس با ما"
سپس روی دکمه «ویرایش با المنتور» کلیک کنید.
اکنون وارد محیط طراحی المنتور می‌شوید و می‌توانید با افزودن ویجت‌ها، ساختار صفحه‌تان را شکل دهید.
مثلاً با ویجت "تصویر" لوگوی سایت را اضافه می‌کنید، با ویجت "عنوان" تیترهای جذاب می‌نویسید، و با ویجت "دکمه" کاربران را به اقدام خاصی هدایت می‌کنید.
![شروع طراحی سایت با المنتور]()
3. طراحی صفحات اصلی مانند خانه، درباره ما و تماس با ما
صفحه‌ی خانه معمولاً اولین نقطه تماس مخاطب با سایت است؛ پس باید جذاب و کاربرپسند باشد. در آموزش طراحی سایت با المنتور یاد می‌گیرید چطور از اسلایدر، معرفی خدمات، نظرات مشتریان و فراخوان به اقدام (CTA) استفاده کنید.
صفحه درباره ما فرصتی برای معرفی برند، تیم و داستان شماست؛ و صفحه تماس با ما باید شامل فرم تماس، آدرس، شماره تماس و نقشه باشد.
المنتور ابزارهای لازم برای طراحی این صفحات را به صورت آماده در اختیارتان قرار داده و تنها با چند کلیک می‌توانید ظاهر حرفه‌ای برای آن‌ها ایجاد کنید.
طراحی حرفه‌ای با المنتور
بعد از آنکه با اصول پایه طراحی سایت در المنتور آشنا شدید، وقت آن می‌رسد که سایت خود را حرفه‌ای‌تر، جذاب‌تر و متناسب با هویت برندتان سفارشی‌سازی کنید. در این مرحله شما نه تنها از امکانات پیش فرض المنتور استفاده می‌کنید، بلکه باید تجربه کاربر را هم در نظر بگیرید.
· استفاده از قالب‌های آماده و سفارشی‌سازی آن‌ها
المنتور ده‌ها قالب آماده برای انواع صفحات مختلف (صفحه اصلی، لندینگ، تماس با ما و...) ارائه می‌دهد.
این قالب‌ها نه‌تنها برای طراحی سایت‌های شرکتی مفیدند، بلکه اگر قصد طراحی سایت طلا فروشی یا دیگر سایت‌های فروشگاهی دارید، می‌توانند نقطه شروع مناسبی باشند. برای استفاده از این قالب‌ها، کافی است از بخش «قالب‌های المنتور» وارد مخزن شوید و با یک کلیک قالب دلخواهتان را بارگذاری کنید.
مزیت این روش این است که زمان کمتری نسبت به ساخت از صفر صرف می‌کنید و می‌توانید تمرکز بیشتری بر سفارشی‌سازی المان‌ها بگذارید: تغییر رنگ‌ها، فونت‌ها، عکس‌ها و متون مطابق با برند شما.
· طراحی هدر و فوتر سفارشی
با استفاده از قابلیت Theme Builder در المنتور، می‌توانید هدر (سربرگ) و فوتر (پاورقی) سایتتان را دقیقاً همان‌طور که می‌خواهید طراحی کنید. هدر شما می‌تواند شامل لوگو، منو، دکمه تماس یا شبکه‌های اجتماعی باشد و فوتر می‌تواند اطلاعات تماس، لینک‌های مهم یا فرم عضویت در خبرنامه را در بر گیرد. این امکانات برای سایت‌هایی که نیاز به طراحی خاص و منحصر به‌فرد دارند، یک امتیاز بزرگ است.
ایجاد صفحات واکنش‌گرا برای موبایل و تبلت
یکی از مهم‌ترین ویژگی‌های المنتور، امکان طراحی واکنش‌گرا (Responsive Design) است. می‌توانید برای هر بخش از سایت، نسخه‌های جداگانه‌ای برای نمایش در دسکتاپ، تبلت و موبایل طراحی کنید و المان‌ها را به‌صورت اختصاصی در هر دستگاه تنظیم کنید. این ویژگی باعث می‌شود تجربه کاربر در موبایل (که بخش بزرگی از ترافیک را تشکیل می‌دهد) بهینه و حرفه‌ای باشد.
بهینه سازی سایت طراحی‌شده با المنتور
یک طراحی خوب زمانی به نتیجه می‌رسد که علاوه بر زیبایی ظاهری، عملکرد فنی مناسبی هم داشته باشد. بهینه‌سازی سایت در المنتور یعنی مطمئن شویم صفحات سایت سریع، سئو شده و کاربر پسند هستند. در این بخش با مهم‌ترین نکات فنی برای بهبود کیفیت سایت آشنا می‌شوید.
![طراحی هدر و فوتر سفارشی]()
· نکات سئو در المنتور
برای اینکه سایت شما در گوگل دیده شود، باید به اصول سئو در طراحی صفحات توجه کنید. المنتور با افزونه‌های سئو مانند Rank Math یا Yoast سازگاری کامل دارد.
برخی از اقدامات کلیدی در المنتور برای سئو بهتر عبارتند از:
- استفاده از تگ‌های هدینگ H1، H2،...
- افزودن Alt به تصاویر
- لینک‌دهی داخلی بین صفحات
- بهینه‌سازی ساختار URL
- استفاده از متا تایتل و متا دیسکریپشن برای هر صفحه
همچنین استفاده از کلمات کلیدی مانند «آموزش طراحی سایت با المنتور» به صورت طبیعی در متن و عنوان‌ها، رتبه سایت را بهبود می‌دهد.
· افزایش سرعت بارگذاری صفحات
سرعت سایت یکی از عوامل مهم در رضایت کاربران و رتبه سئو است. برای بهینه‌سازی سرعت سایت المنتوری خود:
- تصاویر را با فرمت WebP و حجم پایین آپلود کنید.
- از کش (Cache) مرورگر استفاده کنید.
- تعداد ویجت‌ها و افزونه‌های غیرضروری را کاهش دهید.
- از افزونه‌های افزایش سرعت مثل LiteSpeed Cache یا WP Rocket استفاده کنید.
- CSS و JS اضافی را فشرده‌سازی و ترکیب کنید.
![طراحی حرفه‌ای با المنتور]()
· استفاده از افزونه‌های مکمل برای بهبود عملکرد
برای بهبود عملکرد سایت‌های المنتوری، می‌توان از افزونه‌های حرفه‌ای مکمل استفاده کرد. افزونه‌های مکمل، نقش کلیدی در ارتقاء کیفیت نهایی سایت دارند. برای مثال، بهینه‌سازی تصاویر نه تنها سرعت بارگذاری را افزایش می‌دهد، بلکه تجربه کاربری را نیز بهبود می‌بخشد. افزونه‌های سئو مانند Schema Pro به سایت کمک می‌کنند تا اطلاعات ساختار یافته به گوگل ارائه شود و نرخ کلیک در نتایج جستجو افزایش یابد. همچنین استفاده هوشمندانه از افزودنی‌های پیشرفته المنتور، باعث می‌شود سایت شما از حالت صرفاً بصری فراتر رفته و به ابزاری کاملاً حرفه‌ای برای تعامل با مخاطب تبدیل شود.
برای بهبود عملکرد سایت‌های المنتوری، می‌توانید از افزونه‌های حرفه‌ای مکمل استفاده کنید:
- Elementor Pro برای امکانات بیشتر و طراحی پویاتر.
- Essential Addons for Elementor برای افزودن ویجت‌های پیشرفته.
- Smush یا ShortPixel برای بهینه‌سازی تصاویر.
- Schema Pro برای اضافه کردن داده‌های ساختاریافته (Rich Snippets).
- Redirection برای مدیریت ریدایرکت‌ها و صفحات 404.
این ابزارها باعث می‌شوند سایت المنتوری نه‌تنها زیبا، بلکه قدرتمند، سریع و در نتایج گوگل رقابتی باشد.
قدم بعدی شما با المنتور
در این مقاله یاد گرفتیم که چطور با استفاده از المنتور، بدون نیاز به دانش برنامه‌نویسی، یک سایت حرفه‌ای، زیبا و واکنش‌گرا طراحی کنیم. ولی طراحی وبسایت شخصی حتی با افزونه‌های کاربردی مانند المنتور، همچنان زمان‌بر و چالش برانگیز است.
اگر تصمیم گرفتید اولین سایت خود را طراحی کنید، المنتور یکی از بهترین گزینه‌ها برای شروع است. همین حالا وردپرس را نصب کنید، المنتور را فعال نمایید و قدم به قدم طبق این آموزش پیش بروید. ولی اگر نیاز به طراحی سایت حرفه‌ای با المنتور دارید یا می‌خواهید صفر تا صد طراحی را به یک تیم باتجربه بسپارید، تیم وبکده آماده است تا سایت شما را دقیقاً مطابق با نیاز کسب‌وکارتان طراحی کند. برای مشاوره رایگان با ما تماس بگیرید.
سوالات متداول
آیا برای کار با المنتور باید کدنویسی بلد باشم؟
خیر. المنتور یک صفحه ساز بصری است که شما را از نیاز به کدنویسی بی‌نیاز می‌کند. با کشیدن و رها کردن (Drag & Drop) می‌توانید تمام بخش‌های سایت را طراحی کنید.
آیا نسخه رایگان المنتور کافی است؟
برای سایت‌های ساده و شخصی، نسخه رایگان المنتور کفایت می‌کند. اما اگر به امکانات پیشرفته مانند طراحی هدر و فوتر، فرم‌ساز، اسلایدرها و طراحی داینامیک نیاز دارید، نسخه پرو پیشنهاد می‌شود.
آیا المنتور برای سئو مناسب است؟
بله، المنتور به خوبی با افزونه‌های سئو مانند Yoast و Rank Math هماهنگ می‌شود و تمام المان‌های مهم سئو مانند تگ‌های عنوان، متن جایگزین تصویر، ساختار HTML بهینه و.. را در اختیار شما قرار می‌دهد.
آیا المنتور برای موبایل هم بهینه است؟
بله. المنتور قابلیت طراحی واکنش‌گرا (Responsive) دارد. می‌توانید طراحی خود را برای نمایش در موبایل و تبلت بهینه کنید و عناصر مختلف را متناسب با دستگاه‌های مختلف تنظیم نمایید.