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

جلسه

نهم

زمان ویدئو

22 دقیقه

محتوای این جلسه

در این ویدئو آموزشی با آموزش ابتدایی در رابطه با المنتور توضیحاتی را آغاز کردیم که به راحتی قادر خواهید بود با آن طراحی را شروع کنیم. چندین المان المنتور توضیح داده شد. هدف این ویدئو آموزش شروع کار و آشنایی اولیه با افزونه المنتور است.

سوالی داری؟ در دیدگاه های این ویدئو میتونی سوالت رو مطرح کنی

در بخش نظرات مطرحش کن! ما به همه سوالات جواب میدیم

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

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

مرحله 1- ساخت برگه جدید

در اولین قدم می ­بایست یک برگه جدید برای صفحه اصلی سایت ایجاد کنید. برای ساخت صفحه جدید در پیشخوان وردپرس منوی “برگه­ ها > افزودن جدید” را انتخاب کنید. سپس یک عنوان برای این صفحه بنویسید و دکمه “ویرایش با المنتور” را کلیک کنید تا وارد محیط صفحه­ ساز المنتور شوید.

برای اینکه برگه ­ای که ایجاد کردید را به ­عنوان صفحه­ ی اصلی سایت قرار دهید، وارد منوی “تنظیمات > خواندن” در پیشخوان وردپرس شوید. سپس گزینه ­ی “یک برگه یکتا” را انتخاب کنید و از جعبه بازشونده­ ی “صفحه­ ی نخست” نام برگه را انتخاب کنید. به این ترتیب برگه مورد نظر شما به ­عنوان صفحه اصلی سایت نمایش داده می ­شود و کاربران در ابتدای ورود به سایت این برگه را مشاهده خواهند کرد.

در جلسه ­ی قبل به ­طور کامل 2 مورد از تنظیمات اصلی وردپرس که برای شروع کار با صفحه ­ساز المنتور ضروری است را توضیح دادیم. پیشنهاد می­کنیم این ویدیو را مشاهده کنید و تنظیمات آن را انجام دهید.

درصورتی که قبلاً صفحه اصلی سایت را ایجاد کرده ­اید، نیاز به ساخت مجدد نیست. آن را در حالت ویرایش باز کنید و با کلیک دکمه “ویرایش با المنتور” به محیط طراحی با صفحه ­ساز بروید.

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

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

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

مرحله 3- طرح ­بندی صفحه

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

در بخش تنظیمات المنتور آیکون چرخ دنده را انتخاب کنید. تمامی تنظیمات صفحه و استایل ­دهی را در اینجا می ­توانید انجام دهید. در این قسمت گزینه ­ی “طرح ­بندی صفحه” که یکی از مهمترین تنظیمات طراحی صفحه است را انتخاب کنید. در ابتدا این گزینه بر روی حالت پیش­ فرض قرار دارد. آن را روی “Canvas” تنظیم کنید. مشاهده خواهید کرد بخش اصلی طراحی با المنتور به حالت تمام عرض تبدیل می­شود و فضای استانداردی در اختیارتان قرار می­دهد.

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

مرحله4 – افزودن بخش و المان ها

علامت (+) در قسمت وسط سمت چپ، بخش جدید برای طراحی و افزودن المان­ ها اضافه می­کند. با کلیک روی (+) ساختار مورد نظر طراحی خود که شامل ردیف و ستون است، انتخاب کنید. شما محدودیتی برای تعداد ستون ­ها ندارید. حتی می­ توانید تعداد ستون­ های بیشتری از ساختار را به ردیف اضافه کنید.

افزودن بخش و المان ها
افزودن بخش و المان ها

افزونه قدرتمند المنتور امکان ویرایش ردیف را نیز فراهم کرده است. کادر با حاشیه آبی ­رنگ نمایانگر ردیفی است که اضافه کرده­اید. علامت شش ­نقطه (:::) مربوط به تنظیمات حرفه­ای بخش و سکشن است. دانستن این تنظیمات برای هر طراح سایت لازم است چون باعث می­شود او با قدرت و تسلط بیشتری به کار خود ادامه دهد. علامت (+) برای افزودن بخش جدید و (×) برای حذف ردیف است.

پس از انتخاب ساختار موردنظرتان، آن به صفحه ویرایشگر المنتور اضافه می­شود. در هرکدام از ستون ­های ساختار باز هم علامت (+) را مشاهده می ­کنید. این بار برای اضافه کردن المان­ ها به بخش، این علامت را کلیک کنید. حالا باید از سمت راست المان موردنظر خود را بکشید و در ستون رها کنید (دراگ و دراپ).

هرکدام از المان ­ها تنظیماتی برای سفارشی و شخصی ­سازی مانند تغییر رنگ، اندازه، فونت، فاصله ­ها و افزودن انیمیشن دارند. همچنین کلیک راست روی المان و بخش، امکانات بیشتری مثل حذف، تکثیر، کپی و افزودن ستون را در اختیارتان قرار می­دهد.

به خاطر داشته باشید بعد از انجام هر تغییری، شامل افزودن ساختار و المان یا تنظیم آنها دکمه سبزرنگ “به روزرسانی” را کلیک کنید تا تغییرات ذخیره و در آدرس سایت در مرورگر نمایش داده شود.

علامت پوشه (فولدر) مربوط به درون ­ریزی دموهای آماده در المنتور است که در قسمت بعدی به آن می ­پردازیم. استفاده از این دموها علاوه ­بر اینکه سرعت طراحی شما را افزایش می­دهد باعث پیاده ­سازی یک وب ­سایت استاندارد می­شود.

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

Views 0
تجربه کاربران

دیدگاه‌ها و پرسش‌ها

69 دیدگاه

دیدگاه یا پرسش خود را بنویسید

  1. علی طاهری فر
    سلام چرا ویدئوی 9 و 11 دقیقا یکیه؟ آشنایی با رابط ظاهری و گرافیکی افزونه المنتور شروع کار و آشنایی اولیه با افزونه المنتور
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

  2. محمد جواد یحیی زاده
    سلام یکی از مشگلات بزرگ بنده اینکه وقتی سایت رو میسازم توی مانیتور های مختلف درست نمایش نمیده یا توی موبایل . مثلا توی موبایل a32 و a21 و بعضی گوشی ها درست نمایش میده ولی برای مثلا شیامی درست نشون نمیده . ولی مشگل فقط این نیست بزرگترین اش نمایش توی کامپیوتر های مختلف هست و مخصوص ان وقتی کاربری توی مرور گر اندازه رو بالای 100 یا زیر 100 میبره کل کانتینر ها و دکمه ها و بهم میخورن. و فکر کنم بزرگترین مشگل این نوع نمایش بخاطر استفاده از px . % . em . rem . و vw یا vh هستش . درباره حل همچین مشگلی فیلم اموزشی دارید؟
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

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

          سلام وقت شما بخیر،

           

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

          با تشکر.

          1. محمد جواد یحیی زاده
            در تنظیمات سایت برگه دیدم ۱۱۴۰ پیش فرض گذاشته همین قدر درسته ؟ و بله برای کانتینر ها از درصد استفاده میکنم و این موضوع خیلی مهمه چون نه فقط کانتینر ها بلکه روی دکمه و فونت ها تاثیر میزاره .
            1. محمد قاسمی
              امکان تغییر این مقدار وجود دارد و مقادیری چون 1320,1200,1400نیز استفاده میشود. تغییر عرض سایت نباید روی مواردی چون ابعاد داخلی دکمه یا سایز فونت آنها تاثیر داشته باشد.
  3. نام آشنا
    سلام من طبق آموزش شما دکمه نماشی عنوان را تغییر دادم، عنوان مخفی شد. حالا گزینه رو غیر فعال می کنم باز هم عنوان مخفی است باید چی کار کنم عنوان مجدد نمایش داده بشه؟ برگه رو پاک کردم مجدد امتحان کردم باز هم همین مشکل رو دارم؟
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

  4. معین رشیدی
    سلام بعضی مواقع، عنوان مخفی نمیشه با اینکه تیک مخفی سازی رو زدیم. به چه دلیل هست؟
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

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

      سلام وقت شما بخیر،

       

      این مورد در المنتور وجود دارد ، دقت داشته باشید افزونه المنتور و المنتور پرو در سایت آپدیت باشند.

      با تشکر.

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

      سلام وقت شما بخیر،

       

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

      با تشکر.

  7. مسلم سیدزاده
    بسیار عالی و مفید بود
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

      از همراهی شما بسیار ممنونیم

      با تشکر.

  8. احمد ثقفی
    سلام .. تشکر از آموزش های خوبتان .. یک درس مهم اینجا جا افتاده است ... و الان ادامه آموزش کمی سخت است
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

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