آموزش نصب المنتور در وردپرس

در این آموزش قرار نیست فقط Elementor را نصب کنیم و همان‌جا متوقف شویم.

در پایان این راهنما باید بتوانید:

• نسخه رایگان Elementor را روی WordPress نصب کنید

• افزونه را فعال کنید

• وارد Elementor Editor شوید

• یک Container بسازید

• عنوان، تصویر و دکمه اضافه کنید

• نسخه موبایل صفحه را بررسی کنید

• و اولین صفحه خود را منتشر کنید

اگر هنوز دقیقاً نمی‌دانید WordPress چیست، قبل از شروع می‌توانید راهنمای «وردپرس چیست؟» نیوان وب را بخوانید:

وردپرس چیست؟ راهنمای کامل نیوان وب

اگر هم فقط دنبال نصب نسخه Pro هستید، بخش مخصوص آن در نیمه دوم مقاله قرار دارد.

قبل از نصب Elementor چه چیزهایی لازم داریم؟

قبل از شروع بهتر است مطمئن شوید سایت WordPress شما شرایط لازم را دارد.

طبق System Requirements فعلی Elementor در زمان نگارش این آموزش، حداقل موارد اصلی عبارت‌اند از:

• WordPress ۶.۵ یا جدیدتر

• PHP ۷.۴ یا جدیدتر

• MySQL ۵.۶ یا MariaDB ۱۰.۵ به بالا

• حداقل ۲۵۶MB حافظه WordPress

Elementor استفاده از PHP ۸.x را توصیه می‌کند و برای سایت‌هایی که افزونه‌های بیشتری مانند WooCommerce دارند، حافظه ۵۱۲MB می‌تواند انتخاب بهتری باشد.

همچنین خود Elementor اعلام کرده که ویرایش صفحات با Editor فعلاً باید روی کامپیوتر انجام شود و موبایل یا تبلت برای ویرایش کامل پشتیبانی نمی‌شوند.

مشاهده System Requirements رسمی Elementor

لازم نیست برای شروع Elementor Pro بخرید. نسخه Core یا Free برای انجام همین آموزش کافی است.

[اسکرین‌شات ۱: صفحه Elementor > Editor > System یا اطلاعات هاست که نسخه PHP و Memory Limit سایت را نشان دهد]

Elementor را از کجا دانلود کنیم؟

برای نسخه رایگان، ساده‌ترین و مطمئن‌ترین راه این است که Elementor را مستقیماً از مخزن افزونه‌های WordPress نصب کنید.

در این روش اصلاً لازم نیست فایل ZIP را از سایت‌های دیگر دانلود کنید.

Elementor Free با نام Elementor Website Builder در مخزن رسمی WordPress قرار دارد.

روش نصب افزونه از داخل WordPress نیز همان روشی است که مستندات رسمی WordPress توصیه می‌کنند:

Plugins > Add New Plugin

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

راهنمای رسمی مدیریت و نصب افزونه‌های WordPress

مرحله ۱: وارد پیشخوان WordPress شوید

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

بعد از ورود، منوی WordPress را در سمت راست یا چپ صفحه ـ بسته به زبان پیشخوان ـ مشاهده می‌کنید.

از منو وارد بخش:

افزونه‌ها > افزودن افزونه تازه

شوید.

در WordPress انگلیسی مسیر فعلی این است:

Plugins > Add New Plugin

[اسکرین‌شات ۲: پیشخوان WordPress و مشخص کردن مسیر «افزونه‌ها > افزودن افزونه تازه»]

مرحله ۲: Elementor Website Builder را جستجو کنید

در صفحه Add Plugins یک کادر Search وجود دارد.

عبارت زیر را وارد کنید:

Elementor Website Builder

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

طبق راهنمای رسمی Elementor، بعد از جستجوی همین عبارت، نسخه رایگان افزونه نمایش داده می‌شود.

راهنمای رسمی نصب Elementor Core

[اسکرین‌شات ۳: نتیجه جستجوی Elementor Website Builder در صفحه Add Plugins]

مرحله ۳: روی Install Now کلیک کنید

در کارت Elementor دکمه:

Install Now / نصب

را بزنید.

WordPress فایل افزونه را از Repository دریافت و نصب می‌کند.

نیازی نیست در این مرحله فایل خاصی را روی هاست آپلود یا Extract کنید.

بعد از چند لحظه دکمه Install به Activate تغییر می‌کند.

مرحله ۴: Elementor را فعال کنید

روی:

Activate / فعال‌سازی

کلیک کنید.

نصب یک Plugin و فعال بودن آن دو مرحله جدا هستند؛ Elementor تا وقتی Activate نشود روی سایت فعال نیست.

[اسکرین‌شات ۴: Elementor بعد از نصب و دکمه Activate]

بعد از فعال‌سازی ممکن است Setup Wizard مربوط به Elementor باز شود.

مرحله ۵: Setup Wizard اولیه Elementor

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

Elementor می‌تواند از شما بخواهد حساب Elementor ایجاد یا متصل کنید.

اتصال حساب برای امکاناتی مثل Template Library کاربرد دارد، اما طبق مستندات رسمی Elementor امکان Skip کردن ساخت حساب نیز وجود دارد.

Wizard ممکن است گزینه‌هایی مثل:

• اتصال Elementor Account

• نصب Hello Theme

• انتخاب نام سایت

• اضافه کردن Logo

• شروع با صفحه Blank یا Template

را نمایش دهد.

قرار نیست برای این آموزش همه این گزینه‌ها را تغییر دهیم.

اگر از قبل Theme مناسب دارید، لازم نیست صرفاً برای استفاده از Elementor آن را با Hello Elementor عوض کنید.

مراحل رسمی Setup اولیه Elementor

[اسکرین‌شات ۵: Setup Wizard فعلی Elementor و گزینه Skip یا ادامه]

مرحله ۶: اولین Page را بسازید

حالا Elementor فعال است.

از پیشخوان WordPress وارد:

برگه‌ها > افزودن برگه تازه

یا:

Pages > Add New Page

شوید.

برای مثال عنوان صفحه را قرار دهید:

صفحه تست Elementor

سپس روی:

Edit with Elementor / ویرایش با المنتور

کلیک کنید.

این دقیقاً همان مسیر فعلی معرفی‌شده در مستند رسمی Elementor برای ساخت اولین Page است.

[اسکرین‌شات ۶: صفحه Add New Page و دکمه Edit with Elementor]

مرحله ۷: محیط Elementor Editor را بشناسید

بعد از چند لحظه وارد Elementor Editor می‌شوید.

در نسخه فعلی Editor سه بخش اصلی اهمیت بیشتری دارند:

Top Bar
ابزارهایی مثل Responsive Preview، Preview و Publish را در اختیار شما قرار می‌دهد.

Panel
عناصر طراحی و تنظیمات Element انتخاب‌شده را نمایش می‌دهد.

Canvas
همان بخش بزرگی است که صفحه را در آن طراحی می‌کنید.

راهنمای رسمی محیط Elementor Editor

در Elementor ۴.x، عناصر Editor V۴ به‌صورت پیش‌فرض فعال‌اند. اگر سایت قدیمی‌تری دارید، ممکن است بخشی از ساختار V۳ و V۴ را هم‌زمان ببینید.

[اسکرین‌شات ۷: محیط کامل Elementor Editor با مشخص کردن Top Bar، Panel و Canvas]

مرحله ۸: اولین Container را ایجاد کنید

برای ساخت Layout صفحه از Container شروع می‌کنیم.

در Canvas روی علامت + کلیک کنید.

سپس Flexbox را انتخاب کنید.

Elementor چند Layout آماده برای Container نمایش می‌دهد.

برای اولین تمرین، یک Container ساده یک‌ستونه انتخاب کنید.

Container را مثل یک جعبه در نظر بگیرید که عناصر صفحه داخل آن قرار می‌گیرند.

در پروژه‌های بزرگ‌تر می‌توانید Containerهای Child را داخل Parent Container قرار دهید و Layoutهای پیچیده‌تری بسازید.

مستندات فعلی Elementor نیز برای ایجاد Container مسیر + > Flexbox را معرفی می‌کنند.

[اسکرین‌شات ۸: کلیک روی + و انتخاب Flexbox Container]

مرحله ۹: یک Heading اضافه کنید

حالا یک عنوان به صفحه اضافه می‌کنیم.

روی علامت + کلیک کنید تا Elements نمایش داده شوند و عنصر Heading را پیدا کنید.

می‌توانید Heading را کلیک کنید یا با Drag & Drop داخل Container قرار دهید.

متن نمونه:

اولین صفحه من با Elementor

را وارد کنید.

در Elementor Editor V۴ تنظیمات اصلی Heading در تب General قرار دارند و Styling از بخش Style انجام می‌شود. همچنین می‌توانید HTML Tag مناسب مثل H۱ یا H۲ را انتخاب کنید.

در این مثال اگر این عنوان، عنوان اصلی صفحه است می‌توانید H۱ انتخاب کنید.

[اسکرین‌شات ۹: Heading داخل Container و بخش تنظیم Title]

مرحله ۱۰: یک Image اضافه کنید

دوباره Elements را باز کنید و Image را انتخاب کنید.

آن را زیر Heading قرار دهید.

در پنل تنظیمات روی Select Image کلیک کنید و از Media Library تصویر انتخاب کنید یا تصویر جدیدی Upload کنید.

Elementor V۴ اجازه می‌دهد تصویر را انتخاب و سپس اندازه، Alignment و Style آن را تنظیم کنید.

برای سایت واقعی بهتر است تصویر قبل از Upload از نظر حجم و ابعاد بهینه شده باشد.

[اسکرین‌شات ۱۰: Image Element و پنجره انتخاب تصویر]

مرحله ۱۱: یک Button اضافه کنید

حالا یک CTA ساده می‌سازیم.

عنصر Button را داخل همان Container قرار دهید.

متن Button را مثلاً:

مشاهده خدمات

قرار دهید.

در بخش Link می‌توانید لینک مقصد را اضافه کنید.

برای تمرین اولیه اگر هنوز صفحه مقصد ندارید، می‌توانید لینک را خالی بگذارید.

تنظیمات Button در Editor V۴ شامل متن، Link و Styleهای ظاهری است.

[اسکرین‌شات ۱۱: Button Element و تنظیم Button Text و Link]

در این مرحله صفحه ساده ما از سه Element تشکیل شده است:

Heading
Image
Button

همین ساختار ساده برای یادگیری نحوه کار Editor کافی است.

مرحله ۱۲: فاصله‌ها و ظاهر Container را تنظیم کنید

Container را انتخاب کنید.

از تنظیمات Style می‌توانید مواردی مثل:

• Width

• Min Height

• Padding

• Gap

• Alignment

• Background

• Border

را تغییر دهید.

برای تمرین، Padding مناسبی بدهید تا محتوا به لبه‌های Container نچسبد.

یکی از اشتباه‌های رایج کاربران تازه‌کار این است که برای ایجاد فاصله تعداد زیادی Spacer یا Container اضافی بسازند.

در طراحی بهتر، ابتدا از Padding و Gap خود Layout استفاده کنید.

مرحله ۱۳: نسخه موبایل صفحه را بررسی کنید

قبل از انتشار، صفحه را فقط در Desktop بررسی نکنید.

در Top Bar روی Device مربوط به Responsive Mode کلیک کنید و نمای Mobile را باز کنید.

در Editor V۴ می‌توانید بسیاری از Styleها را برای Breakpointهای مختلف تغییر دهید.

برای مثال ممکن است Heading در Desktop اندازه ۵۶ داشته باشد، اما در Mobile آن را کوچک‌تر کنید.

همچنین می‌توانید فاصله‌ها یا Background را برای Mobile جدا تنظیم کنید.

طبق مستند فعلی Elementor، دستگاه موردنظر از Top Bar انتخاب می‌شود و Styleهای Element را می‌توان در همان Responsive Mode تغییر داد.

[اسکرین‌شات ۱۲: Elementor در Mobile Responsive Preview]

مواردی که قبل از انتشار بررسی کنید:

• متن از صفحه بیرون نزده باشد

• تصویر بیش‌ازحد بزرگ نباشد

• Button قابل لمس باشد

• فاصله چپ و راست مناسب باشد

• Heading چند خط نامرتب ایجاد نکرده باشد

مرحله ۱۴: Preview بگیرید

قبل از Publish بهتر است صفحه را مثل یک بازدیدکننده واقعی ببینید.

از Top Bar روی Preview کلیک کنید.

صفحه در حالت پیش‌نمایش باز می‌شود.

Elementor تأکید می‌کند Preview URL با URL نهایی صفحه متفاوت است؛ پس برای اشتراک‌گذاری نهایی از لینک Published Page استفاده کنید.

مرحله ۱۵: اولین صفحه Elementor را منتشر کنید

اگر Desktop و Mobile درست هستند، روی:

Publish

کلیک کنید.

اگر صفحه قبلاً منتشر شده باشد، این دکمه معمولاً به Update تبدیل می‌شود.

تبریک؛ اولین Page شما با Elementor ساخته و منتشر شده است.

[اسکرین‌شات ۱۳: دکمه Publish در Top Bar و صفحه نهایی منتشرشده]

در این مرحله شما چرخه اصلی کار با Elementor را یاد گرفته‌اید:

ساخت Page → باز کردن Editor → ایجاد Container → اضافه کردن Elements → Responsive → Preview → Publish

Elementor Free و Elementor Pro چه تفاوتی در نصب دارند؟

Elementor Pro جایگزین Elementor Core نیست.

نسخه Pro یک افزونه مکمل است و Elementor Core باید همچنان نصب و فعال باشد.

این موضوع در مستند رسمی نصب Pro نیز صراحتاً ذکر شده است.

اگر هنوز مطمئن نیستید به نسخه پولی نیاز دارید یا خیر، بهتر است اول Free را یاد بگیرید و فقط براساس نیاز واقعی پروژه تصمیم بگیرید.

در نیوان وب نیز صفحه Elementor Pro برای بررسی نسخه و نحوه دریافت آن وجود دارد:

صفحه Elementor Pro در نیوان وب

آموزش نصب Elementor Pro

اگر فایل رسمی elementor-pro.zip را در اختیار دارید، قبل از هر کاری مطمئن شوید Elementor Core فعال است.

سپس وارد:

Plugins > Add New Plugin

شوید.

این بار به‌جای Search روی:

Upload Plugin

کلیک کنید.

فایل ZIP را انتخاب و سپس:

Install Now

را بزنید.

بعد از نصب روی:

Activate Plugin

کلیک کنید.

مسیر دستی رسمی فعلی Elementor نیز همین مراحل را ذکر می‌کند.

[اسکرین‌شات ۱۴: Upload Plugin و انتخاب elementor-pro.zip]

فعال‌سازی License نسخه رسمی Elementor Pro

در نسخه رسمی دارای Subscription، بعد از نصب باید حساب و License را Connect کنید.

مسیر فعلی مستندات Elementor:

Elementor > Editor > System > License

و سپس:

Connect & Activate

است.

[اسکرین‌شات ۱۵: Elementor > Editor > System > License و Connect & Activate]

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

مشکلات رایج نصب Elementor

Elementor Pro فعال نمی‌شود و می‌گوید Plugin موردنیاز وجود ندارد

اول بررسی کنید نسخه رایگان Elementor نصب و فعال باشد.

Elementor Pro به Core وابسته است.

در WordPressهای جدید Plugin Dependency نیز بررسی می‌شود. اگر Elementor Core در پوشه غیرعادی قرار گرفته باشد، Elementor توصیه می‌کند نسخه Core را حذف و از Repository رسمی دوباره نصب کنید تا در مسیر استاندارد wp-content/plugins/elementor/ قرار گیرد.

خطای «Theme is missing the style.css stylesheet»

این خطا معمولاً زمانی دیده می‌شود که فایل Elementor Pro را از:

Appearance > Themes

نصب کرده باشید.

Elementor Pro یک Plugin است، نه Theme.

فایل ZIP باید از:

Plugins > Add New Plugin > Upload Plugin

نصب شود.

Elementor Editor روی Loading می‌ماند

اگر Widget Panel یا Editor دائماً Loading نمایش می‌دهد، ابتدا System Requirements را بررسی کنید.

علل تأییدشده توسط Elementor شامل:

• Memory Limit پایین

• Conflict با Plugin دیگر

• بعضی تنظیمات Server

هستند.

از:

Elementor > Editor > System Info

می‌توانید Memory Limit را بررسی کنید.

Elementor حداقل ۲۵۶MB را توصیه می‌کند و برای سایت‌های سنگین‌تر ممکن است ۵۱۲MB لازم باشد.

خطای Preview Could Not Be Loaded

این خطا می‌تواند به Memory، Plugin/Theme Conflict، Permalink یا بعضی سیستم‌های Cache/CDN مربوط باشد.

یکی از مراحل رسمی Troubleshooting این است که ابتدا Backup بگیرید، سپس Conflictها را بررسی کنید و Permalinks و Memory را کنترل کنید.

Elementor بعد از نصب نمایش داده نمی‌شود

از:

Plugins > Installed Plugins

بررسی کنید Elementor واقعاً Active باشد.

اگر فقط نصب شده اما فعال نشده باشد، WordPress آن را اجرا نمی‌کند.

همچنین با حسابی وارد شوید که دسترسی لازم برای نصب و مدیریت Pluginها را داشته باشد.

مشکلات بعد از نصب Plugin یا Theme دیگر

اگر Elementor قبلاً درست کار می‌کرد و بعد از نصب Plugin جدید مشکل ایجاد شد، احتمال Conflict وجود دارد.

راهنمای رسمی Elementor پیشنهاد می‌کند بعد از Backup، Pluginهای دیگر را موقتاً غیرفعال و سپس یکی‌یکی فعال کنید تا عامل Conflict مشخص شود.

[تجربه واقعی تیم نیوان وب از نصب/رفع خطای Elementor اضافه شود]

جمع‌بندی

نصب Elementor در WordPress پیچیده نیست.

برای نسخه رایگان کافی است از Repository رسمی WordPress وارد مسیر Plugins > Add New Plugin شوید، Elementor Website Builder را نصب و Activate کنید.

اما هدف این آموزش فقط نصب نبود.

حالا می‌توانید یک Page بسازید، وارد Elementor Editor شوید، Container ایجاد کنید، Heading، Image و Button اضافه کنید، نسخه Mobile را بررسی کنید و صفحه را Publish کنید.

برای شروع طراحی سایت لازم نیست فوراً سراغ صدها Widget یا Effect بروید.

ابتدا روی همین چهار مفهوم مسلط شوید:

Container، Elements، Responsive Design و Spacing.

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

اگر هنوز در ابتدای مسیر WordPress هستید، مطالعه راهنمای زیر می‌تواند قدم قبلی مناسبی باشد:

وردپرس چیست؟ راهنمای مبتدیان نیوان وب

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

Elementor Pro در نیوان وب

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

آیا نصب Elementor رایگان است؟

بله. Elementor Core از Repository رسمی WordPress قابل نصب است و برای انجام طراحی‌های پایه نیازی به خرید Pro ندارید.

برای نصب Elementor از کجا باید شروع کنیم؟

در پیشخوان WordPress وارد Plugins > Add New Plugin شوید، Elementor Website Builder را جستجو و روی Install Now و سپس Activate کلیک کنید.

آیا برای کار با Elementor باید حساب بسازم؟

برای کار پایه با Plugin الزاماً لازم نیست، اما بعضی امکانات مانند Template Library به اتصال Elementor Account نیاز دارند. Wizard اولیه امکان اتصال حساب را در اختیار شما قرار می‌دهد.

آیا برای نصب Elementor Pro باید نسخه رایگان را حذف کنیم؟

خیر. برعکس، Elementor Core باید نصب و فعال بماند. Pro افزونه مکمل آن است.

آیا Elementor Pro را باید از بخش Themes نصب کرد؟

خیر. Elementor Pro یک Plugin است و فایل ZIP آن از Plugins > Add New Plugin > Upload Plugin نصب می‌شود.

چرا Edit with Elementor را نمی‌بینم؟

ابتدا مطمئن شوید Plugin فعال است و صفحه‌ای را باز کرده‌اید که Elementor امکان ویرایش آن را دارد. اگر مشکل ادامه داشت، Plugin Conflict، نسخه WordPress و System Requirements را بررسی کنید.

آیا می‌توان Elementor را با موبایل طراحی کرد؟

طبق System Requirements فعلی Elementor، ویرایش کامل Editor روی موبایل و تبلت پشتیبانی نمی‌شود و بهتر است از کامپیوتر استفاده کنید.

بعد از نصب Elementor چه چیزی را اول یاد بگیریم؟

ابتدا Container، Heading، Image، Button، Spacing و Responsive Editing را یاد بگیرید. سراغ Animationها و Add-onهای متعدد را بعد از تسلط بر اصول Layout بروید.