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

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

27 مهر 1400

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

ایجاد برگه جدید در وردپرس

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

برای شروع ایجاد صفحه اصلی و اضافه کردن المان ها به صورت زیر عمل می کنیم:

1- به پیشخوان > برگه ها > افزودن جدید می رویم.

2- در صفحه ای که باز می شود، در بخش افزودن عنوان، عبارت صفحه اصلی را می نویسیم.

3- بعد از آن برگه را ذخیره می کنیم.

4- سپس دکمه ویرایش با المنتور را مطابق تصویر می زنیم.

ایجاد برگه جدید در وردپرس

 المان های المنتور

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

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

طراحی صفحه اصلی با المنتور

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

ویرایش صفحه اصلی با صفحه ساز المنتور: ایجاد اسلایدر

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

توجه کنید که هر المانی که قصد اضافه کردن آن را به بخش موردنظرتان دارید در سمت راست و در داشبورد المنتور وجود دارد. سپس از بخش المان ها، المان موردنظر مان که اسلایدر است را کشیده و در ستونی که ایجاد کرده ایم رها می کنیم. بعد از تغییر می توانید پیش نمایش تغییرات را مشاهده کنید.

ویرایش صفحه اصلی با صفحه ساز المنتور

choosearea

 

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

تعیین ساختار بخش های صفحه اصلی

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

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

ایجاد اسلاید در طراحی صفحه اصلی سایت با المنتور

 

در بخش محتوا > تنظیمات اسلایدر هم نحوه پیمایش، نوع انتقال، سرعت و نحوه پخش، انیمیشن و .. را می توانید تغییر دهید.

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

 

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

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

 

  • بخش پیشرفته اسلایدر. در این قسمت هم افکت های حرکتی، ایجاد حاشیه و سایه، پس زمینه، قابلیت مشاهده اسلایدر در حالت های مختلف ریسپانسیو (مثل دسکتاپ، گوشی همراه و …)، کدهای css و … را می توانید بدهید.

بخش پیشرفته اسلایدر در المنتور

نکته: توجه کنید که بعد از هر تغییری که انجام دادید به روزرسانی را بزنید تا تغییرات اعمال شوند.

 

طراحی صفحه اصلی سایت با المنتور: ایجاد متن

بعد از اینکه اسلایدر صفحه اصلی را تنظیم کردیم به سراغ المان های دیگر برای صفحه اصلی می رویم برای مثال یک شرکت خدمات مالی، یکسری سرویس ها به مشتریان خود ارائه می دهد که در نظر دارد در صفحه اصلی آورده شود. برای این کار ابتدا باید عنوان این بخش را بیاوریم. پس مجددا روی علامت + زده و ساختار یک ستونه را انتخاب می کنیم. از منوی المان های پایه، سربرگ را می کشیم و در این بخش رها می کنیم.سپس متن دلخواه خودمان را می نویسیم.

ایجاد سربرگ در ویرایش صفحه اصلی با المنتور

choosearea

 

المان جدا کننده

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

برای تغییر بخش سربرگ یا جدا کننده، در سربرگ محتوا مواردی مانند عنوان، لینک پیوند، سایز، تگ html (مانند h2)، جهت متن و غیره را تغییر می دهیم. در سربرگ استایل رنگ متن، ایجاد سایه برای متن، تایپوگرافی (تنظیمات فونت، عرض نوشته و …) و غیره را می توانیم تنظیم کنیم. در سربرگ پیشرفته نیز فاصله ها، پدینگ، رنگ پس زمینه عادی و هاور، css سفارشی، قابلیت مشاهده در دستگاه های مختلف و واکنشگرایی، حاشیه عادی و هاور را می توانیم تغییر دهیم.

المان جدا کننده در طراحی صفحه اصلی با المنتور

 

ایجاد جعبه آیکن

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

ایجاد جعبه آیکون با المنتور

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

آموزش ایجاد صفحه اصلی با المنتور- گالری تصاویر

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

ایجاد گالری تصاویر با افزونه المنتور

تنظیم صفحه طراحی شده با المنتور به عنوان صفحه اصلی

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

تنظیم صفحه طراحی شده با المنتور به عنوان صفحه اصلی

 

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

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