مرحله سیزدهم : کار با صفحه‌ساز المنتور (Elementor)

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

اما یک نکته مهم از همین ابتدا:

طراحی خوب ≠ صفحه‌ساز سنگین
طراحی خوب = ساختار درست + استفاده محدود و هدفمند از ابزارها

صفحه‌ساز چیست و چرا استفاده می‌شود؟

صفحه‌ساز (Page Builder) ابزاری است برای طراحی صفحات سایت به صورت Drag & Drop.

در وردپرس معروف‌ترین‌ها:

• Elementor (پیشنهادی)
• WPBakery Page Builder (قدیمی‌تر)
• گوتنبرگ (ویرایشگر پیش‌فرض وردپرس)

 هدف صفحه‌ساز:

• ساخت صفحات بدون کدنویسی
• طراحی سریع Landing Page
• کنترل کامل روی UI

تفاوت المنتور با ویرایشگر وردپرس

ویرایشگر وردپرس (Gutenberg)

• سبک و سریع
• مناسب نوشته‌ها و وبلاگ
• ساختار محور (Block-based)

المنتور

• بصری و طراحی محور
• مناسب لندینگ پیج و صفحه اصلی
• کنترل کامل روی طراحی

 نتیجه مهم:

• مقاله‌ها → ویرایشگر وردپرس
• صفحات تبلیغاتی و صفحه اصلی → المنتور

بعد از یادگیری المنتور، مهم‌ترین جایی که باید روی آن اجرا کنی صفحه اصلی سایت است.

چه صفحاتی را با المنتور طراحی کنیم؟

✔ صفحه اصلی (Home)
✔ لندینگ‌ها (Landing Pages)
✔ درباره ما (در صورت طراحی خاص)
✔ صفحات فروش دوره / محصول
✔ صفحات کمپین

❌ چه صفحاتی را نباید با المنتور ساخت؟

• مقالات وبلاگ ، برای ساخت مقالات و ساختار محتوایی سایت بهتر است از مسیر استاندارد انتشار محتوا استفاده کنی.
• نوشته‌های آموزشی
• محتواهای طولانی سئو محور

نصب و فعال‌سازی المنتور

مسیر:

افزونه‌ها → افزودن → جستجو:

Elementor

سپس:

• نصب
• فعال‌سازی

 نسخه پیشنهادی:

• Elementor Free برای شروع کافی است
• نسخه Pro برای هدر/فوتر و طراحی پیشرفته

آشنایی با محیط المنتور

داخل المنتور 3 بخش اصلی داریم:

1) Section / Container

ساختار کلی صفحه

2) Widgets

مثل:

• Heading
• Image
• Button
• Text Editor

3) Settings Panel

تنظیمات طراحی

ساخت اولین صفحه

مراحل:

1. برگه‌ها → افزودن جدید
2. نام صفحه (مثلاً صفحه اصلی)
3. Edit with Elementor
4. انتخاب قالب:
   • Full Width
   • Elementor Canvas (صفحه خالی)

سکشن، کانتینر و ویجت‌ها

ساختار مدرن المنتور:

Container (پیشنهادی جدید)
└── Widgets

📌 نکته مهم:
کانتینر جایگزین سکشن شده (سبک‌تر و سریع‌تر)

ویجت‌های مهم:

• Heading → تیتر
• Text Editor → متن
• Image → تصویر
• Button → CTA
• Icon Box → ویژگی‌ها

ریسپانسیو (Mobile Optimization)

در المنتور:

• Desktop
• Tablet
• Mobile

📌 نکات مهم:

• فونت موبایل را کوچک‌تر کن
• فاصله‌ها (Padding) را کاهش بده
• ستون‌ها را Stack کن

ذخیره قالب‌ها (Templates)

می‌توانی بخش‌ها را ذخیره کنی:

• Header
• Hero Section
• Pricing Box

📌 کاربرد:
استفاده مجدد در صفحات دیگر

ساخت هدر و فوتر

دو روش:

1) با المنتور پرو

Theme Builder

2) با قالب وردپرس

Theme Options

تنظیم صفحه اصلی

مسیر:

تنظیمات → خواندن

✔ صفحه اصلی → یک برگه ثابت

نکات مهم سئو در المنتور

⚠️ اشتباهات رایج:

• استفاده زیاد از Heading H1
• ساختار نامنظم H2/H3
• تصاویر بدون ALT
• استفاده بیش از حد از ویجت‌ها

قانون طلایی:

المنتور برای طراحی است، نه تولید محتوا

اشتباهات رایج کاربران

• ساخت همه صفحات با المنتور
• سنگین کردن صفحه با انیمیشن زیاد
• استفاده از فونت‌های متعدد
• عدم توجه به موبایل

چک‌لیست نهایی قبل انتشار

✔ ریسپانسیو چک شده
✔ سرعت صفحه تست شده
✔ H1 فقط یکی است
✔ CTA وجود دارد
✔ تصاویر بهینه شده‌اند
✔ فاصله‌ها منظم هستند

جمع بندی:

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

سوالات متداول

آیا المنتور برای سئو بد است؟

خیر، اگر درست استفاده شود مشکلی ندارد.

المنتور بهتر است یا گوتنبرگ یا ویرایشگر کلاسیک؟

برای مقاله → الویت اول ویرایشگر کلاسیک، الویت دوم گوتنبرگ
برای طراحی → المنتور

آیا المنتور سرعت سایت را کم می‌کند؟

اگر بیش‌ازحد استفاده شود بله.

آیا بدون المنتور می‌شود سایت ساخت؟

بله، ولی طراحی محدودتر می‌شود.