آموزش جامع کار با افزونه المنتور (Elementor): از نصب تا طراحی صفحات حرفه‌ای

آموزش جامع کار با افزونه المنتور (Elementor):

از نصب تا طراحی صفحات حرفه‌ای

اگر به دنبال راهی آسان و قدرتمند برای طراحی صفحات وبسایت وردپرسی خود هستید، بدون شک نام المنتور (Elementor) به گوشتان خورده است. این افزونه صفحه ساز با رابط کاربری کشیدن و رها کردن (Drag and Drop) به شما این امکان را می‌دهد تا بدون نیاز به دانش کدنویسی، صفحات زیبا و حرفه‌ای برای وبسایت خود خلق کنید. در این آموزش جامع، از مراحل نصب و فعال‌سازی المنتور گرفته تا طراحی ساختار صفحات و کار با ابزارک‌های پرکاربرد را به صورت گام به گام فرا خواهید گرفت. پس با ما همراه باشید!

۱. المنتور چیست و چرا باید از آن استفاده کنیم؟

المنتور یک افزونه صفحه ساز قدرتمند برای وردپرس است که به شما اجازه می‌دهد تا به صورت بصری و در لحظه (Live Editor) صفحات وبسایت خود را طراحی کنید. با استفاده از این افزونه، دیگر نیازی به دست و پنجه نرم کردن با کدهای پیچیده HTML و CSS نخواهید داشت. المنتور با ارائه مجموعه‌ای گسترده از ابزارک‌ها (Widgets) و امکانات سفارشی‌سازی بی‌نظیر، فرآیند طراحی وبسایت را برای همگان آسان و لذت‌بخش کرده است. چه یک مبتدی باشید و چه یک طراح حرفه‌ای، المنتور می‌تواند ابزار کارآمدی برای شما باشد.

۲. نصب و فعال‌سازی افزونه المنتور:

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

• روش اول: از طریق مخزن وردپرس:

  1. وارد پیشخوان وردپرس خود شوید.
  2. از منوی سمت راست، به بخش افزونه‌ها رفته و روی افزودن کلیک کنید.
  3. در نوار جستجو، عبارت Elementor را تایپ کنید.
  4. افزونه Elementor Website Builder را پیدا کرده و روی دکمه نصب هم‌اکنون کلیک کنید.
  5. پس از نصب، دکمه فعال کردن را بزنید تا افزونه روی وبسایت شما فعال شود.

• روش دوم: از طریق بارگذاری فایل (در صورت داشتن نسخه Pro):

  1. اگر نسخه حرفه‌ای (Pro) المنتور را خریداری کرده‌اید، فایل zip آن را از وبسایت المنتور دانلود کنید.
  2. در پیشخوان وردپرس، به بخش افزونه‌ها رفته و روی افزودن کلیک کنید.
  3. در بالای صفحه، روی دکمه بارگذاری افزونه کلیک کنید.
  4. روی دکمه Choose File کلیک کرده و فایل zip المنتور Pro را انتخاب کنید.
  5. روی دکمه نصب هم‌اکنون کلیک کنید.
  6. پس از نصب، افزونه را فعال کنید. (توجه داشته باشید که برای استفاده از المنتور Pro، باید نسخه رایگان المنتور نیز نصب و فعال باشد.)

۳. آشنایی با محیط کاربری المنتور:

پس از فعال‌سازی المنتور، هنگام ویرایش یک برگه یا نوشته جدید (یا ویرایش برگه/نوشته‌های موجود)، با دکمه ویرایش با المنتور روبرو خواهید شد. با کلیک بر روی این دکمه، وارد محیط ویرایشگر زنده المنتور می‌شوید. این محیط از سه بخش اصلی تشکیل شده است:

• پنل سمت راست (Widgets Panel): در این بخش، مجموعه‌ای گسترده از ابزارک‌ها (مانند متن، تصویر، دکمه، ویدیو و غیره) را مشاهده می‌کنید که می‌توانید با کشیدن و رها کردن آن‌ها به صفحه خود اضافه کنید.

• پیش‌نمایش زنده (Live Preview): در این بخش، پیش‌نمایش زنده از تغییراتی که در صفحه اعمال می‌کنید را مشاهده خواهید کرد. هر تغییری که در پنل سمت راست اعمال کنید، بلافاصله در این بخش نمایش داده می‌شود.

• نوار ابزار بالا و پایین:

  • نوار ابزار بالا: شامل تنظیمات کلی صفحه (مانند طرح‌بندی، استایل، عنوان)، دکمه ذخیره، پیش‌نمایش، تاریخچه تغییرات و خروج به پیشخوان وردپرس است.
  • نوار ابزار پایین: شامل تنظیمات واکنش‌گرایی (نمایش در موبایل، تبلت و دسکتاپ)، تنظیمات لایه (Layer Manager) و تنظیمات المنتور است.

۴. طراحی ساختار صفحات با سطر (Section) و ستون (Column):

قبل از اضافه کردن ابزارک‌ها، باید ساختار کلی صفحه خود را با استفاده از سطرها و ستون‌ها ایجاد کنید.

• اضافه کردن سطر: برای اضافه کردن یک سطر جدید، روی علامت “+” در وسط صفحه کلیک کنید. سپس می‌توانید ساختار ستون مورد نظر خود را انتخاب کنید (مثلاً یک ستونه، دو ستونه، سه ستونه و غیره).
• تنظیم ستون‌ها: پس از اضافه کردن سطر، می‌توانید با کشیدن حاشیه بین ستون‌ها، عرض آن‌ها را تغییر دهید. همچنین با کلیک راست روی یک ستون، می‌توانید تنظیمات بیشتری مانند اضافه کردن ستون جدید، حذف ستون، کپی کردن و غیره را انجام دهید.
• تنظیمات سطر: با کلیک روی آیکون شش نقطه در بالای هر سطر، می‌توانید تنظیمات مربوط به آن سطر را تغییر دهید. این تنظیمات شامل طرح‌بندی (Layout)، استایل (Style) و پیشرفته (Advanced) می‌شود. در بخش طرح‌بندی می‌توانید عرض محتوا، ارتفاع و تراز عمودی را تنظیم کنید. در بخش استایل می‌توانید پس‌زمینه، حاشیه، شکل جداکننده و غیره را تغییر دهید. در بخش پیشرفته نیز تنظیمات مربوط به حاشیه و padding، افکت‌های حرکتی و غیره قرار دارد.

۵. کار با ابزارک‌های پرکاربرد المنتور:

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

• متن (Text Editor): برای اضافه کردن و ویرایش متن در صفحه.
• عنوان (Heading): برای اضافه کردن عنوان‌ها با اندازه‌ها و استایل‌های مختلف.
• تصویر (Image): برای اضافه کردن تصاویر از کتابخانه رسانه وردپرس یا بارگذاری تصاویر جدید.
• دکمه (Button): برای ایجاد دکمه‌های فراخوان به اقدام (Call to Action) با قابلیت تنظیم متن، لینک و استایل.
• ویدیو (Video): برای اضافه کردن ویدیو از یوتیوب، ویمئو یا بارگذاری ویدیوهای شخصی.
• جداکننده (Divider): برای ایجاد خطوط افقی جداکننده بین بخش‌های مختلف صفحه.
• فاصله‌دهنده (Spacer): برای ایجاد فضای خالی بین عناصر.
• آیکون (Icon): برای اضافه کردن آیکون‌های زیبا از کتابخانه المنتور یا آپلود آیکون‌های SVG.

برای استفاده از هر ابزارک، کافی است آن را از پنل سمت راست بکشید و در محل مورد نظر در صفحه رها کنید. پس از اضافه کردن ابزارک، می‌توانید تنظیمات مربوط به آن را در پنل سمت راست تغییر دهید. این تنظیمات شامل محتوا، استایل و تنظیمات پیشرفته می‌شود.

۶. استایل‌دهی به عناصر با المنتور:

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

• فونت: انتخاب فونت، اندازه، وزن، رنگ و سبک متن.
• رنگ پس‌زمینه: انتخاب رنگ یا تصویر پس‌زمینه برای سطر، ستون یا ابزارک.
• حاشیه (Border): تنظیم نوع، عرض، رنگ و شعاع حاشیه.
• سایه (Box Shadow & Text Shadow): اضافه کردن سایه به عناصر یا متن.
• شفافیت (Opacity): تنظیم میزان شفافیت عنصر.
• انیمیشن‌ها (Entrance Animations): اضافه کردن انیمیشن هنگام نمایش عنصر.

۷. تنظیمات پیشرفته در المنتور:

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

• حاشیه و Padding (Margin & Padding): تنظیم فاصله خارجی و داخلی عناصر.
• واکنش‌گرایی (Responsive): تنظیم نحوه نمایش عناصر در دستگاه‌های مختلف (دسکتاپ، تبلت، موبایل). می‌توانید برخی عناصر را در دستگاه‌های خاص مخفی کنید یا تنظیمات متفاوتی برای آن‌ها اعمال کنید.
• افکت‌های حرکتی (Motion Effects): اضافه کردن افکت‌های اسکرول و ماوس به عناصر.
• موقعیت‌دهی (Positioning): تنظیم موقعیت قرارگیری عناصر (پیش‌فرض، ثابت، مطلق، چسبنده).
• Z-index: تنظیم ترتیب قرارگیری عناصر روی یکدیگر.
• CSS سفارشی (Custom CSS): در صورت نیاز، می‌توانید کدهای CSS سفارشی را به عناصر اضافه کنید.

۸. ذخیره، پیش‌نمایش و انتشار صفحات:

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

۹. نکات و ترفندهای کار با المنتور:

• استفاده از کلیدهای میانبر: المنتور دارای کلیدهای میانبر مفیدی است که می‌تواند سرعت طراحی شما را افزایش دهد (می‌توانید لیست کامل آن‌ها را در تنظیمات المنتور پیدا کنید).
• کتابخانه الگوها (Templates Library): المنتور دارای یک کتابخانه بزرگ از الگوهای آماده برای صفحات و بخش‌های مختلف است که می‌توانید از آن‌ها برای شروع سریع طراحی خود استفاده کنید.
• ذخیره به عنوان الگو (Save as Template): می‌توانید طرح‌ها و بخش‌های مورد علاقه خود را به عنوان الگو ذخیره کنید و در صفحات دیگر از آن‌ها استفاده کنید.
• تاریخچه (History): اگر اشتباهی رخ داد، می‌توانید از بخش تاریخچه برای بازگشت به نسخه‌های قبلی صفحه استفاده کنید.
• راست کلیک: بسیاری از گزینه‌های مفید المنتور با راست کلیک روی عناصر مختلف در دسترس هستند.

نتیجه‌گیری:

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

برای آموزش‌های بیشتر و اطلاعات در مورد افزونه‌های المنتور، می‌توانید به وبسایت wp-advanc.ir مراجعه کنید.