کار با صفحه ساز المنتور (Elementor)
در این راهنمای جامع و کاربردی کار با المنتور قصد داریم روش کار پلاگین صفحه ساز (Elementor) را از صفر تا صد به شما آموزش دهیم.
با کمی تلاش و صبر و حوصله قادر خواهید بود بهترین توانایی و قدرت را در طراحی صفحات یک سایت به دست آورید.
افزونه المنتور بهترین ومعروف ترین صفحه ساز وردپرس است.
با این افزونه بدون کد نویسی می توانید سایت خود را طراحی و سفارشی سازی کنید. رابط کاربری این افزونه بسیار آسان است.
مزایای متعدد این پلاگین فوق العاده به شما این امکان را می دهد که هر المانی را تنها با کشیدن و رها کردن در سایت خود پیاده سازی کنید.
فهرست مطالب
- معرفی المنتور
- مهم ترین مزایای صفحه ساز المنتور
- چرا با المنتور سایت طراحی کنیم
- آموزش نصب و کانفیگ المنتور
- نصب نسخه elementor pro
- تفاوت نسخه رایگان افزونه المنتور و المنتور پرو
- سیستم مورد نیاز برای نصب المنتور
- آموزش بخش های مختلف المنتور
- تنظیمات مهم صفحه
- عنوان
- تصویر شاخص
- مخفی کردن عنوان
- وضعیت
- طرح بندی صفحه
- تنظیمات مهم صفحه
- فعال سازی المنتور برای صفحات و پست ها
- کار با المان های افزونه المنتور
- المان های پایه المنتور
- المان های پرو
- المان های کلی
- با المنتور صفحه ۴۰۴ بسازید
- آموزش ساخت صفحه ۴۰۴ در المنتور
- آموزش درون ریزی (import) تمپلیت های آماده
- تنظیمات ریسپانسیو بودن افزونه المنتور برای موبایل، تبلت و دکستاپ
- جمع بندی
معرفی المنتور
ما پلاگین های صفحه ساز زیادی داریم که هر کدام را در مقالاتی جداگانه به طور کامل آموزش و توضیح دادیم.
مانند صفحه ساز visual composer ،ux builder، و صفحه ساز های معروف دیگر.
اما از بین همه این صفحه سازها در حال حاضر المنتور بهترین صفحه ساز وردپرس در جهان است.
المنتور به افزونه وردپرسی با قابلیت طراحی زنده معروف است چون تغییرات هنگام ویرایش با این صفحه ساز را می توانید در همان لحظه ببینید.
مهم ترین مزایای صفحه ساز المنتور
امکان طراحی و پیادهسازی قالبهای وردپرسی
امکان طراحی صفحات با کشیدن و رها کردن در کمترین زمان ممکن
دارای بیش از ۹۰ المان با قابلیت سفارشیسازی
کاملا واکنشگرا
امکان ایجاد انواع فرم، پاپآپ و اسلایدر
سازگاری کامل با ووکامرس
دارای بیش از ۴۵۰ صفحه و ۲۰۰ بلوک آماده
ادغام با سیستمهای مارکتینگ، ACF و…
امکان ساخت پستتایپهای سفارشی
دارای افزودنیهای کاربردی و متعدد سازگار با اکثر قالبها و افزونههای وردپرسی
چرا با المنتور سایت طراحی کنیم
قدرت المنتور در بین پلاگین های صفحه ساز وردپرس، برای همه ی طراحان سایت ثابت شده است.
المنتور هیچ محدودیتی در طراحی ندارد و شما می توانید انواع سایت های شخصی، شرکتی، خبری و فروشگاهی و غیره را با المنتور طراحی کنید.
دلیل دیگر آن سازگاری المنتور با تمامی المان ها و افزونه های وردپرسی است.
با این ویژگی می توانید سایت وردپرسی خود را به صورت شخصی سازی شده داشته باشید.
پیشنهاد می کنیم قبل از کار با المنتور، مقالات مربوط به آموزش های مقدماتی وردپرس و یا پیشخوان را مطالعه کنید و به طور کامل یاد بگیرید تا کار با المنتور برایتان آسان تر باشد.
آموزش نصب و کانفیگ المنتور
برای نصب المنتور ۲ راه وجود دارد.
راه اول:
۱- به سایت المنتور مراجعه کرده و روی دکمه دانلود کلیک کنید.
۲- در قسمت جست و جوElementor را وارد کرده و Elementor Page Builder افزونه برگه ساز المنتور را برای نصب انتخاب کنید.
۳- بعد از دانلود و نصب، آن را فعال سازی کنید.
راه دوم:
۱- از پیشخوان وردپرس مسیر زیر را دنبال کنید.
افزونه ها- -Plugins – افزودن- Add New
۲- در قسمت جست و جو Elementor را وارد کرده و Elementor Page Builder افزونه برگه ساز المنتور را برای نصب انتخاب کنید.
۳- بعد از نصب، آن را فعال سازی کنید.
نصب نسخه elementor pro
برای نصب نسخه افزونه المنتور پرو(نسخه حرفه ای المنتور)، پس از خرید آن از سایت های معتبر از حالت فشرده خارج کنید.
سپس به قسمت افزونه ها در پیشخوان وردپرس بروید و روی افزودن کلیک نمایید.
فایل افزونه را که دانلود کردید انتخاب کندی و پس از نصب آن را فعال سازی نیز کنید.
در بالای داشبورد اعلانی برای وارد کردن لاینسس دریافت می کنید. برای این کار از طریق فروشگاهی که افزونه را خریداری کردید پیگیری لازم را انجام دهید تا لاینسس شما فعال شود.
بعد از اتمام این مرحله، تمامی امکانات افزونه المنتور فعال می شود و می توانید شروع به کار نمایید.
تفاوت نسخه رایگان افزونه المنتور و المنتور پرو
اگر قصد شما از کار با المنتور تنها به عنوان یک ویرایشگر است می توانید از نسخه رایگان آن استفاده کنید.
اما اگر می خواهید به عنوان یک پوسته ساز از آن استفاده کنید و قالب بسازید باید نسخه حرفه ای را نصب کنید تا بتوانید سربرگ، پاورقی، فروشگاه، برگه های مقالات و سایر قسمت ها را خودتان طراحی کنید.
سیستم مورد نیاز برای نصب المنتور
۱- المنتور فقط با وردپرس نسخه ۴٫۷ به بالا کار می کند.
۲- با نسخه PHP 7 به بالا، احتمال وجود مشکلات در سایت شما خیلی کم می شود.
المنتور با نسخه های پایین تر PHP نیز کار می کند ولی نسخه های قدیمی سایت شما را در معرض آسیب و حتی اشکالات امنیتی قرار می دهند. پس بهتر است آن را به آخرین نسخه ارتقا دهید.
۳- My SQL باید نسخه ۵٫۶ یا بالاتر باشد.
۴- حافظه وردپرس را حداقل روی ۱۲۷ مگابایت تنظیم کنید.
۵- برای کار ویرایش صفحات با المنتور حتما باید از مرورگرهای firefox، Google Chrome، Safari استفاده کنید.
۶- صفحات المنتور را تنها با رایانه های رومیزی یا لپ تاپ می توان ویرایش کرد.
۷- هاست را روی same origin تنظیم کنید.
۸- بهتر است PHP Z-Lib روی سرور شما فعال باشد.
آموزش بخش های مختلف المنتور
برای شروع کار طراحی صفحات حتما باید با محیط این افزونه آشنا باشید.
در صفحه المنتور بخش های زیر وجود دارد: تنظیمات کلی، لیست ویجت های المنتور، جست و جوی ویجت ها، ویجت های المنتور، پیش نمایش صفحه، تنظیمات صفحه منوی لایه ها، بازگردانی تغییرات، واکنش گرایی، انتشار و به روزرسانی.
تنظیمات مهم صفحه
در سمت راست جعبه ابزار المنتور بر روی دکمه چرخ دنده کلیک کنید تا تنظیمات مهم این قسمت را حتما یاد بگیرید.
عنوان
تصویر شاخص
مخفی کردن عنوان
وضعیت
بر روی دو وضعیت منتشر شده و پیش نویس می توان صفحه را ذخیره کرد.
طرح بندی صفحه
این یکی از مهم ترین تنظیمات برای طراحی صفحات است.
که شامل ۳ بخش است:
پیش فرض: در این حالت پیش فرض هدر و فوتر وجود دارد و همچنین عنوان صفحات در حالت پیش فرض وجود دارد.
Cananvas: در این حالت هدر و فوتر پنهان است و شما فقط یک صفحه سفید در المنتور دارید که از بالا به پایین طبق سلیقه خود طراحی کنید.
تمام عرض: در این حالت هدر و فوتر وجود دارد اما هنوان صفحه وجود ندارد.
با توجه به نیاز و سلیقه خود یکی از این سه گزینه را انتخاب کنید.
فعال سازی المنتور برای صفحات و پست ها
در حالت پیش فرض ویرایش نوشته ها بر روی ویرایشگر وردپرس قرار دارد و شما باید المنتور را به صورت دستی برای برگه ها وپست ها آن را فعال کنید.
در قسمت برگه ها روی افزودن جدید کلیک کنید.
سپس در صفحه باز شده یک دکمه آبی رنگ با عنوان ویرایش با المنتور ظاهر می شود که در بالای صفحه قرار دارد.
با کلیک بر روی این دکمه صفحه شما با ویرایشگر المنتور باز می شود و می توانید صفحه را ویرایش کنیم.
پس از ورود به صفحه ویرایش محیط المنتور برای شما نمایش داده می شود.
در سمت راست تمام ویجت های المنتور را می بینید که به شما در ساختن محتوای صفحه کمک می کند.
کار با المان های افزونه المنتور
المان های پایه المنتور
بخش داخلی: ساخت ردیف های چند ستونه
سربرگ: ساخت عناوین متنی
تصویر: بارگذاری عکس دلخواه
ویرایشگر متن: قرار دادن ویرایشگر متن در وردپرس
ویدیو: قرار دادن ویدیو در صفحه
دکمه: ایجاد دکمه برای کاربردهای مختلف با توجه به نیاز یک صفحه سایت
جدا کننده: ایجاد خط جدا کننده
فاصله گذار: ایجاد فاصله در بین ویجت ها
نقشه گوگل
آیکن
المان های پرو
پست ها: قرار دادن باکس نوشته ها و مقالات
نمونه کار: بخش نمونه کارها
گالری: ساخت گالری تصاویر در المنتور
فرم: ساخت فرم در المنتور
ورود: فرم ورود پیش فرض وردپرس
اسلاید: ساخت اسلایدر
فهرست ناوبری: ساخت فهرست یا منو
عنوان انمیشنی: ساخت عنوان متحرک
لیست قیمت: ساخت لیست قیمت
جدول قیمت: جدول های قیمت مختلف قرار دادن
چرخش جعبه : ساخت جعبه متحرک چرخشی
فراخوانی برای اقدام : ساخت عنصر قابل کلیک
کنترل کاروسل : ساخت کاروسل تصویر و متن
کاروسل گواهینامه : ساخت کاروسل چرخشی دیدگاه
(Carousel Image ویجتی در المنتور است که امکان ایجاد تصاویر به صورت اسلایدری و پویا را به شما می دهد.)
بررسی : ساخت بخش بررسی یا نظرات به صورت اسلایدر
فهرست مطالب : ساخت فهرست مطالب محتوا
شمارش معکوس : ساخت شمارش معکوس
دکمه های اشتراک گذاری: قرار دادن دکمه های اشتراک گذاری در صفحات
نقل قول: قرار دادن نقل قول
دکمه فیس بوک
نظرات فیس بوک : قرار دادن نظرات و کامنت های فیس بوک
فیس بوک Embeded: قرار دادن کدها و اسکریپت های فیس بوک
برگه فیس بوک : نمایش برگه های فیس بوک در صفحه
قالب: ایجاد قالب هایی با المنتور می سازند
Lottie: قرار دادن فایل های متحرک Lottie
( با ابزارک Lottie می توان عناصر متحرک یا همان انیمیشن های مختلف را با فرمت JSON، در سایت به نمایش درآورید.)
کدهای لایت: کد درون صفحه قرار دادن
المان های کلی
کادر تصویر: قرار دادن جعبه تصویر با متن
آیکون جعبه: قرار دادن جعبه آیکون با متن
ستاره امتیاز دهی: قرار دادن ستاره امتیاز در صفحه
کاروسل تصویر : ساخت کاروسل تصویر به صورت چرخشی
گالری پایه : ساخت گالری پیشفرض
لیست آیکون : نمایش لیست با آیکون
شمارنده : نمایش شمارنده عدد
نوار پیشرفت: قرار دادن نوار های پیشرفت
دیدگاه مشتری : نمایش دیدگاه مشتری به سبک های متنوع
زبانه ها : ساخت تب یا زبانه های متنوع
آکاردئون : ساخت لیست باز شو
تغییر وضعیت : ساخت بخش تغییر وضعیت یا همان آکاردئون
آیکون شبکه های اجتماعی : نمایش آیکون شبکه های اجتماعی
هشدار : نمایش پیام هشدار سفارشی
ساوند کلاود : نمایش صدا های ساوند کلاود در صفحه
کد کوتاه: قرار دادن کد کوتاه (Shortcode) در صفحه
HTML: قرار دادن کد HTML سفارشی
سایدبار : نمایش سایدبار پیشرفض وردپرس
بیشتر بخوانید : نمایش بخش بیشتر بخوانید پیشفرض وردپرس
با المنتور صفحه ۴۰۴ بسازید
وقتی کاربر در سایت شما دنبال یک محتوای خاص باشد و به دلایلی این صفحه یا محتوا وجود نداشته باشد، با صفحه ای که اصولا به شکل ” Not Found 404″ یا ” صفحه مورد نظر یافت نشد” است، روبرو می شود.
برای بهینه سازی یک صفحه ۴۰۴ باید به مواردی توجه کنید. مانند:
عنوان خوب و جذاب
تصاویر خلاقانه
ایجاد فرم جست و جو
ایجاد قسمت مطالب محبوب سایت
و دیگر نکات مهم که یک صفحه ۴۰۴ سفارشی و بهینه سازی برای سایت را ایجاد می کند.
آموزش ساخت صفحه ۴۰۴ در المنتور
ابتدا باید یک قالب پیشفرض برای صفحه طراحی کنیم.
در مسیر زیر روی گزینه خطای ۴۰۴ کلیک کنید.
پیشخوان وردپرس- قالب ها- پوسته ساز
در صفحه باز شده برای شما، تمامی فیلدها را پر کنید و در پایان ایجاد قالب را بزنید.
بعد از این مرحله صفحه ای با ویرایش المنتور باز می شود که همه ی المان های المنتور در این صفحه قرار دارند. شما باید یک صفحه ۴۰۴ را در اینجا طراحی کنید.
آموزش درون ریزی (import) تمپلیت های آماده
در ابتدا تمپلیت خود را درون ریزی کنید و سپس ویرایش کنید.
بعد این که تمپلیت خود را انتخاب کردید از طریق مسیر زیر فایل خود را آپلود کنید.
پیشخوان وردپرس > قالب ها > قالب های ذخیره شده> درون ریزی قالب ها> choose file
تمپلیت مورد نظر خود را که حتما با فرمتjson است را انتخاب و دکمه ” هم اکنون درون ریزی کن” را کلیک کنید.
اگر روی گزینه ویرایش کلیک کنید تمپلیت با ویرایشگر المنتور برای شما باز می شود.
تنظیمات ریسپانسیو بودن افزونه المنتور برای موبایل، تبلت و دکستاپ
برای تنظیم کردن ویژگی هایی مانند اندازه متن، مارجین و پدینگ المان ها و … پس از آن که یک صفحه را منتشر کردید روی آیکن حالت واکنش گرا کلیک کنید. سپس روی دستگاه های مختلف سوییچ کرده و تنظیمات این دستگاه ها را پیکربندی کنید. هر کدام از ابزارها را که انتخاب کنید می توانید نوع نمایش آن را را در آن دستگاه مشاهده کنید.
کار با ستون ها و ایجاد اسلایدر در صفحه اصلی
در صفحه های اصلی سایت به طور معمول بعد از هدر اسلایدر می سازند.
در صفحه اصلی با کلیک روی دکمه (+) یک تک ستون بسازید.
بعد از این مرحله هر المانی که مد نظرتان است را از بخش المان ها بکشید و در ستونی که ایجاد کرده اید رها کنید.
بعد از انتخاب دکمه + در وسط صفحه باید ساختار خود را در یکی از سربرگ های طرح بندی، استایل یا پیشرفته انتخاب و ویرایش کنید.
جمع بندی
اگرچه افزونه المنتور بسیار قدرتمند و حرفه ای بوده و قابلیت های زیادی دارد، اما با این حال از افزودنی (add-on) هایی که مخصوص کار با المنتور است نیز می توانید استفاده کنید.
تا به حال بیشتر از ۱۳۰ افزودنی برای المنتور طراحی کرده اند که ابزارک های مختلفی را به المنتور اضافه می کند.
مطمئن باشید با کمی تلاش و پشتکار و همچنین یادگرفتن طرز کار و تنظیمات المنتور می توانید خلاقانه و جذاب ترین صفحات را طراحی کنید.
امیدواریم این آموزش مورد توجه شما قراربگیرد.