آشنایی با ساختار کلی ویرایشگر المنتور

5.0/5

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

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

ساختار کلی ویرایشگر المنتور

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

فهرست مطالب

استفاده از المنتور در وردپرس

نصب المنتور

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

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

 

نصب المنتور از طریق داشبورد وردپرس

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

  1. وارد داشبورد وردپرس شوید
  2. از پنل سمت راست برروی افزونه و سپس افزودن کلیک کنید
  3. عبارت Elementor را جستوجو کنید و سازنده وبسایت المنتور را نصب کنید.
  4. پس از نصب افزونه آن را فعال نمایید.
آموزش نصب افزونه المنتور

نصب دستی المنتور

اما در بعضی موارد همه چیز درست پیش نمی‌رود و نمی‌توانید افزونه المنتور را از داشبورد وردپرس نصب نمایید. در چنین شرایطی می‌بایست ابتدا اقدام به نصب دستی افزونه نمایید تا مشکل رفع شود. برای نصب دستی مطابق دستورالعمل زیر پیش بروید؛

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

نصب المنتور از طریق Elementor.com

گسترش دهنده‌های المنتور روش دیگری را نیز در دسترس قرار داده‌اند که به ساده‌ترین شکل ممکن می‌توان یک سایت وردپرسی با المنتور را آماده کرد. برای انجام این کار ابتدا به سایت Elementor.com رفته و برروی دکمه Getting Started کلیک کنید تا عملیات شروع شود.

چون این روش مستلزم خرید از خود المنتور می‌باشد و ما در ایران توانایی پرداخت و در نتیجه استفاده از این روش را نداریم بیشتر به آن نمی‌پردازیم.

فعال کردن افزونه المنتور برای ویرایش برگه یا نوشته

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

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

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

رابط کاربری المنتور

ویرایشگر

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

صفحه ویرایشگر المنتور

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

منو المنتور خود به سه قسمت اصلی دیگر تقسیم می‌شود که به آنها پنل المنتور می‌گوییم.

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

منو المنتور

تصویر زیر ساختار کلی المنتور را در قسمت منو نمایش می‌دهد.

ساختار کلی افزونه Elementor
تنظیمات عمومی

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

در ادامه به جزئیات تنظیمات عمومی المنتور می‌پردازیم؛

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

دکمه ابزارک ها شما را به صفحه ابزارک ها هدایت می‌کند (صفحه پیشفرض ویرایشگر المنتور).

پنل محتوا

این پنل محتوای غیر ثابت را برای شما نمایش می‌دهد، بسته به نیازتان محتواهای داخل این پنل تغییر می‌کنند. اما در حالت پیشفرض تمام ابزارک ها برایتان لیست شده‌اند.

اگر ابزارک خاصی را مد نظر دارید می‌توانید نام آن را در نوار جستوجو بنویسید و به سادگی از آن استفاده کنید. در داخل قسمت ابزارک ها دو دکمه دیگر نیز در بالای این قسمت دیده می‌شوند؛ ابزارک ها و عمومی. دکمه ابزارک ها شما را به لیست ابزارک ها (پیشفرض المنتور) هدایت می‌کند. اما دکمه عمومی تمام ویجت‌هایی که قبلا ذخیره کرده‌اید را برای اجرا لیست می‌کند. هرچند که این قابلیت تنها برای نسخه حرفه‌ای المنتور در دسترس است.

پنل پایین

پنل پایین شامل 7 دکمه است که به ترتیب از سمت راست به چپ عملکردشان را بررسی می‌کنیم؛

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

پیشفرض؛ حالت پیشفرض المنتور.

Canvas المنتور؛ بدون سربرگ و پاورقی و سایدبار.

تمام عرض المنتور؛ بدون سایدبار.

پوسته؛ تنظیمات پوسته

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

بخش، ستون و ویجت

ساختار کلی المنتور به سه قسمت تقسیم شده است؛ بخش، ستون و ویجت.

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

بخش (سکشن)

ستون

ستون‌ها درون بخش قرار می‌گیرند و آن‌ها را به قسمت‌های عمودی تقسیم می‌کنند. هر بخش می‌تواند تا حداکثر 9 ستون را در خود جا دهد. توسط ستون‌ها می‌توانید ویجت‌ها را جاگذاری کنید.

ویجت

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

بخش، ستون و ویجت همگی قابل ویرایش هستند. و می‌توانید و زدن دکمه آبی رنگ ویرایش در هر کدام از آنها، جایگاه و اندازه و … را شخصی سازی کنید.

ویرایش بخش ستون ویجت در المنتور

در ادامه بیشتر به معرفی ساختار کلی ویرایشگر المنتور خواهیم پرداخت و بیشتر با این سه قسمت مهم آشنا خواهیم شد.

بخش، ستون

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

بعد از ساخت بخش، به شکل اتوماتیک درون آن تعدادی ستون قرار داده شده است که می‌توانید ستون‌ها را به این شکل تنظیم نمایید؛

  • عرض ستون: دو راه برای تنظیم عرض ستون وجود دارد. اولین راه تغییر عرض ستون از تنظیمان همان ستون است و راه دوم تغییر دستی از ویرایشگر زنده المنتور می‌باشد که می‌توانید نسبت اندازه ستون‌ها را تغییر دهید.
  • اضافه کردن ستون: برای اضافه کردن ستون‌های جدید نیز دو راه پیش روی شماست؛ اولین راه این است که درون بخش مورد نظر راست کلیک کنید و روی گزینه “افزودن ستون جدید” کلیک کنید تا یک ستون جدید اضافه شود. اما راه دوم برای شرایط دیگری می‌تواند مناسب باشد، فرض کنید که یک ستون را ساخته‌اید و اکنون نیاز است آن ستون را دوباره در کنار خودش تکرار کنید (در طراحی صفحات اصلی ممکن است به دفعات به ستون‌های تکراری نیاز پیدا کنید)، کافی است روی ستون مورد نظر راست کلیک کنید و برروی “تکثیر” کلیک کنید. بعد از تکثیر می‌توانید ستون جدید را شخصی سازی کنید و کمی تغییرش دهید.
  • حذف ستون: جهت حذف یک ستون تنها کافیست روی ستون مورد نظر راست کلیک کنید و گزینه “حذف” را انتخاب کنید.

ابزارک ها

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

ابزارک های پایه
المان‌های پایه Elementor

بخش داخلی

اضافه کردن ستون‌های بیشتر در دل یک ستون دیگر.

سربرگ

سربرگ یا سرتیتر یا هدینگ تگ از این ابزارک قابل دسترس است

تصویر

افزودن تصویر با قابلیت ویرایش اندازه، شفافیت و ..

ویرایشگر متن

ویرایشگر متن دقیقا مانند پیشفرض وردپرس

ویدیو

اضافه کردن ویدیو از هاست خودتان یا از Youtube و Vimeo.

دکمه

استفاده از دکمه‌ با قابلیت شخصی سازی بالا.

جدا کننده

یک خط ممتد که ویجت‌ها را از هم جدا می‌کند.

فاصله گذار

اضافه کردن فضای خالی در بین ویجت‌ها.

نقشه گوگل

اضافه کردن موقعیت جغرافیایی توسط نقشه گوگل.

آیکن

اضافه کردن آیکن به صفحه از بین بیش از 600 آیکن برای مصارف گوناگون.

عمومی
المان‌های عمومی elementor

کادر تصویر

یک کادر دارای تصویر، سربرگ و متن

آیکن جعبه

کاملا مانند کادر تصویر با این تفاوت که به جای تصویر، آیکن نمایش داده می‌شود.

ستاره امتیازدهی

نمایش امتیاز از روی نظر کاربران یا نمایش یک مقدار ثابت

کاروسل تصویر

نمایش اسلایدی تصاویر

گالری پایه

نمایش تصاویر کنار هم

لیست آیکن

یک لیست از آیکن‌ها و متون انتخابی شما

شمارنده

ابزارکی برای نمایش شمارنده رو به بالا یا پایین

نوار پیشرفت

نوار یا نوارهایی برای نمایش مقدار پیشرفت

دیدگاه مشتری

نمایش دیدگاه مشتری به شکلی متفاوت و زیبا

زبانه‌ها

زبانه‌های عمودی و یا افقی برای نمایش متفاوت محتوا

آکاردئون

متن‌های باز شونده

تغییر وضعیت

مانند آکاردئون، منتها برای پرسش و پاسخ بکار می‌رود.

آیکن شبکه‌های اجتماعی

نمایش آیکن‌های شبکه‌های اجتماعی مانند توییر، فیسبوک، اینستاگرام و …

هشدار

یک جعبه رنگی برای جلب توجه کاربران

ساوند کلاود

گذاشتن صدا از منبع ساوند کلاود

کد کوتاه

به سادگی کدهای کوتاه افزونه‌های دیگر را در صفحاتتان بکار ببرید

HTML

وارد کردن کدهای HTML به صفحه 

لنگر مربوط به فهرست

ساخت لنگر برای ارتباط با فهرست مطالب

ساید بار

اضافه کردن ساید بار به برگه یا نوشته

بیشتر بخوانید

دکمه بیشتر بخوانید برای استفاده در صفحات آرشیو

مسیر متن

نوشتن متن در اشکال غیر معمول

ابزارک های وردپرس
المان‌های وردپرس Elementor

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

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

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

تنظیمات بخش‌ها، ستون‌ها و ویجت‌ها

بخش‌ها، ستون‌ها و ویجت‌ها دارای تنظیمات مختلفی هستند. توسط این تنظیمات می‌توانید هرآنچه که در ذهن دارید را پیاده کنید (مانند ظاهر کلی سایت). بخش‌ها و ستون‌ها دارای تنظیمات یکسان هستند اما تنظیمات ویجت دارای قابلیت‌های بیشتری می‌باشد.

ساخت صفحه با المنتور

اکنون به طور کامل با تنظیمات ساختار کلی المنتور آشنا شده‌اید و حالا نوبت به آموزش ساخت صفحه با المنتور می‌رسد،  روند کلی ساخت صفحه با المنتور شامل 5 مرحله است:

  1. ساخت یک بخش جدید.
  2. افزودن ستون(ها) جدید داخل بخش (سکشن).
  3. ابزارک‌های مورد نیاز را به داخل ستون مورد نظر بکشیم و رها کنیم.
  4. شخصی سازی ابزارک ها.
  5. ذخیره صفحه

در ادامه قدم به قدم با هم به آموزش تصویری ساخت صفحه با المنتور خواهیم پرداخت؛

قدم اول

در ویرایشگر زنده المنتور برروی دکمه قرمز رنگ وسط تصویر کلیک کنید تا یک بخش جدید ساخته شود

صفحه ویرایشگر المنتور

قدم دوم

بعد از ساخت بخش از شما تعداد ستون‌های داخل بخش را می‌پرسد. این تعداد را می‌توان بعدا هم کم یا زیاد کرد.

ساخت ستون جدید المنتور

قدم سوم

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

https://arminsilatani.com/wp-content/uploads/2021/12/اضافه-کردن-المان-جدید-المنتور.jpg

قدم چهارم

توسط امکاناتی که در اختیارتان قرار گرفته است ابزارک را شخصی سازی کنید.

فرم ساز المنتور پرو

قدم پنجم

و در نهایت برروی گذینه “انتشار” کلیک کنید. همچنین با کلیک برروی مثلث کنار انتشار می‌توانید انتخاب‌های بیشتری نیز برای ذخیره سازی داشته باشید.

انتشار ذخیره المنتور

کتابخانه قالب‌ها

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

در ویرایشگر زنده المنتور برروی دکمه خاکستری رنگ وسط تصویر کلیک کنید تا کتابخانه قالب‌ها باز شود.

کتابخانه قالب‌ها

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

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

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

افزونه Elementor Pro سرعت ساخت سایت را می‌تواند بسیار افزایش دهد، با دسترسی‌های بیشتری که در اختیارتان است می‌توانید همه تنظیمات را شخصی سازی کنید و یک سایت درجه یک طراحی کنید!

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

جمع بندی

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

منبع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}

© هرگونه کپی برداری تنها با ذکر منبع مجاز است.