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

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

• بخش معرفی اولیه یا Hero
• معرفی برند خود و توضیحات در مورد آن
• استفاده از المان‌های دارای انیمیشن در المنتور مانند Flip Box
• قرار دادن فرم تماس و اطلاعات مربوط به آن

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

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

برای شروع کار در داشبورد وردپرس خود صفحه جدیدی را ایجاد کنید. سپس بر روی گزینه Edit with Elementor کلیک کنید. بعد از آن اگر می‌خواهید تم یا قالب وردپرسی شما تأثیری روی طراحی صفحه اصلی سایت نداشته باشد، از بخش Page Layout گزینه Elementor Canvas را انتخاب کنید. این گزینه را در قسمت Settings مربوط به المنتور پیدا می‌کنید.

اکنون صفحه شما آماده است تا ساخت Homepage با المنتور پرو را تجربه کنید.

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

برای اولین قسمت می‌توانید هر المانی که طراحی چشم نوازی داشته باشد انتخاب کنید. عموماً در قسمت اولیه صفحه Homepage از جذابیت‌های بصری خاصی استفاده می‌شود تا تأثیر مثبتی روی بازدیدکننده بگذارد. لذا این بخش خاص را در اصطلاح Hero می‌نامند. از آنجایی که هدف این مقاله بیشتر تمرین و استفاده از المنتور است، کار خود را بدون توضیح اضافه‌تر شروع می‌کنیم. یک بخش جدید ایجاد کنید و صفحه‌بندی آن را به صورت تک ستونه تعریف کنید. ما از ویجت Container برای ایجاد بخش‌های مختلف در این آموزش استفاده می‌کنیم.

در طراحی این بخش موارد زیر را لحاظ کنید:

• در قسمت Content Width عرض این بخش را به صورت کامل یا همان Full Width تعریف کنید.
• برای این بخش یک ارتفاع حداقلی برابر 100vh تنظیم کنید.

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

سپس از ویجت Heading استفاده کرده و عنوان دلخواه خود را تایپ می‌کنیم. باز هم با مراجعه به تب Style می‌توانید تغییرات ظاهری دلخواه خود را اعمال کنید. مثلاً نوع فونت یا اندازه و رنگ آن را تنظیم کنید. به عنوان المان دیگری که در این بخش اضافه می‌کنید، یک تصویر متناسب با حرفه خود انتخاب کنید و با تنظیم میزان Margin آن، تصویر را به سمت بالا برده و بر روی متن قرار دهید.

سپس می‌توانید با مراجعه به بخش Motion Effects در تب Advanced از افکت‌های حرکتی (Scrolling Effects) برای جذاب‌تر شدن طراحی کمک بگیرید. ما این افکت را بر روی تصویر اضافه شده اعمال کرده‌ایم.

ساخت دومین قسمت صفحه اصلی سایت

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

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

برای جذب بیشتر مخاطبان سایت یک دکمه در زیر این متن اضافه می‌کنیم. مثلاً متنی مشابه Get started یا هر متن دیگری در آن وارد می‌کنیم. برای زیباتر شدن طراحی می‌توانید انیمیشن مناسبی را نیز در هنگامی که کاربر موس خود را بر روی دکمه می‌آورد، تنظیم کنید.

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

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

همچنین برای بهتر دیده شدن متن و المان‌ها بر روی تصویر پس‌زمینه، از قسمت Background Overlay رنگ کدری را انتخاب کرده و میزان Opacity آن را نیز حدود 0.76 تنظیم می‌کنیم.

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

در زیر Text Editor از ویجت Container دیگری استفاده می‌کنیم. عرض آن را برابر 1600px تنظیم می‌کنیم. برای محتوای این بخش از المان Call to Action کمک می‌گیریم. تصویر و متن مربوط به آن را متناسب با نوع محصول خود تعریف کنید. برای این المان حداقل ارتفاعی برابر 350px تنظیم کرده‌ایم. همچنین موقعیت ارتفاعی آن را نیز Middle قرار داده‌ایم. از تب Content گزینه Position را نیز بر روی Left تنظیم کرده‌ایم. با استفاده از گزینه Duplicate در المنتور می‌توانید این المان را تکرار کنید تا در واقع چندین محصول را در کنار یکدیگر نمایش دهید. این گزینه با کلیک راست کردن بر روی ویجت ظاهر می‌شود.

بعد از ساخت این بخش و استایل‌دهی مناسب به المان‌های Call to Action ایجادشده، احتمالا طراحی شما چیزی شبیه به تصویر زیر خواهد بود (البته با تصاویر پس‌زمینه و رنگ و متن دلخواه شما).

توجه داشته باشید که برای رسیدن به طراحی موردنظر خود باید با تب‌های مختلف در المان‌ها درگیر شوید و اندازه‌های هر یک را متناسب با طرح دلخواه خود تنظیم کنید. مثلا در تب Advanced اکثر المان‌های المنتور گزینه‌هایی برای تنظیم Padding و Margin وجود دارد که باید به شکل مناسب مقداردهی شوند تا موقعیت المان‌ها نسبت به یکدیگر به درستی تنظیم شود.

استفاده از المنتور برای چهارمین مرحله از ساخت Homepage

در این بخش قرار است به کمک المان Flip Box که باز هم از المان‌های المنتور پرو است، به ساختن بخش کارکنان سایت بپردازیم. یعنی در ساخت صفحه اصلی سایت با المنتور قسمتی برای معرفی تیم فعال در شرکت خود قرار دهیم. برای این کار باز هم یک ویجت Container به ساختار صفحه اضافه می‌کنیم. این بار حداقل ارتفاع آن را برابر 55vh تنظیم می‌کنیم. عرض آن را به صورت Full Width تعریف می‌کنیم. همچنین یک رنگ ثابت نیز به عنوان رنگ پس‌زمینه برای آن قرار می‌دهیم.

سپس به کمک ویجت Heading عنوان این بخش را هم وارد می‌کنیم. مطابق معمول رنگ مناسب و ابعاد فونت مدنظر خود را برای آن تنظیم کنید. با اضافه کردن مقداری Margin فاصله آن را با المان بعدی تنظیم کنید. ما در این مثال حدود 100px به قسمت پایینی آن مارجین اضافه کرده‌ایم.

در زیر این عنوان است که از المان‌های Flip Box المنتور پرو استفاده می‌کنیم. برای این کار ابتدا باید یک ویجت Container جدید در زیر Heading ایجاد کنیم و عرض آن را 100 درصد تنظیم کنیم. سپس ویجت Flip Box را در داخل آن قرار می‌دهیم. اگر می‌خواهید به شکل صحیح استفاده از المنتور را یاد بگیرید، باید توجه کنید که در چنین حالت‌هایی که قرار است یکی از المان‌ها را در طراحی خود تکرار کنید، بهتر است تمامی تنظیمات را ابتدا روی یکی از آنها اجرا کنید و سپس به کمک گزینه Duplicate در المنتور، آن را تکرار کنید و فقط محتوای المان‌های بعدی را تغییر دهید. با این کار سرعت و دقت طراحی شما بهبود پیدا می‌کند.

المان Flip Box نیز از بخش‌های مختلفی چون Front ، Back و Settings تشکیل شده است. محتوای هر بخش را متناسب با نیاز سایت خود تکمیل کنید. در بخش Settings گزینه‌ای به نام 3D Depth نیز وجود دارد که با فعال کردن آن المان‌های شما در هنگام انیمیشن، به نوعی حالت سه بعدی به خود می‌گیرند.

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

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

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

سپس به کمک یک ویجت Text Editor متن مورد نظر خود را برای این بخش وارد می‌کنیم. مطابق معمول، استایل‌دهی مناسب به متن نباید فرموش شود.
بعد از آن از المان Form در المنتور پرو استفاده می‌کنیم. ما در این مثال قسمت فیلد ایمیل و دکمه ارسال فرم را نیاز داریم. پس سایر المان‌ها را حذف می‌کنیم. جهت طراحی بهتر عرض دکمه فرم و فیلد ایمیل را برابر 50 درصد قرار می‌دهیم. همچنین از بخش Style ، Gap و Spacing را برابر صفر تنظیم می‌کنیم. به این ترتیب دکمه ارسال و فیلد ایمیل به همدیگر می‌چسپند. می‌توانید به کمک همین تب Style و گزینه‌های موجود، طرح مدنظر خود را برای این قسمت صفحه اصلی سایت پیاده کنید. مثلاً ما به کمک Border Radius گوشه‌های دکمه و فیلد فرم را گرد کرده‌ایم.

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

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

جمع‌بندی

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