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

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

بخش یک: برای قرار دادن نام شرکت و برچسب.

بخش دو: برای قرار دادن شرح خدمات.

بخش سه: برای قرار دادن توضیحات تیم.

بخش چهار: برای قرار دادن چرخ فلک و بخش پایانی لوگوی مشتریان

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

ابتدا وارد داشبورد (پیشخوان ) وردپرس خود شوید و یک صفحه جدید ایجاد کنید (صفحات -> افزودن جدید) و با کلیک بر روی دکمه ویرایش با المنتور آن را با Elementor ویرایش کنید.

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

برای اینکه بتوانید بعداً صفحه اصلی خود را شناسایی کنید، پیشنهاد می کنیم عنوان صفحه را مانند “صفحه اصلی” “صفحه اول” یا چیزی مشابه قرار دهید.

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

صفحه آرایی را روی گزینه convas المنتور تنظیم کنید.

اگر صفحه آرایی را روی تمام عرض المنتور قرار  دهید. 

گزینه نوار کناری موضوع شما را حذف می کند (در صورت وجود) و فقط پاورقی و سرصفحه را حفظ می کند.

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

طبق تصویری که قرار است طراحی کنیم ابتدا باید بخش اول را ایجاد نمائیم.

پس طبق روش زیر عمل کنید.

برای افزودن یک بخش جدید روی دکمه پلاس (+) کلیک کنید.

و گزینه ساختار تک ستونی را انتخاب کنید.

به پنل (پنجره) سمت چپ بروید.

در قسمت چیدمان در تب چیدمان عرض محتوا را روی تمام عرض  قرار دهید.

همچنین ارتفاع را روی متناسب با صفحه نمایش قرار دهید.

و در بخش پس زمینه، اندازه تصویر را روی  پوشش (Cover) قرار دهید.

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

در این مثال از روکش گرادیان (نارنجی و مشکی) استفاده می کنیم.

کدورت پوشش پس زمینه را روی گزینه Opacity تنظیم کنید

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

برای تغییر رنگ فونت، سبک فونت و اندازه فونت می توانید به تب Style بروید.

برای تغییر رنگ فونت بر روی انتخابگر رنگ در گزینه رنگ متن کلیک کنید و برای تغییر سبک و اندازه قلم روی نماد مداد در گزینه تایپوگرافی کلیک کنید.

برای سفارشی کردن المان عنوان جدید می توانید مراحل بالا را تکرار کنید.

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

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

گزینه ساختار تک ستونی را انتخاب کنید.

المان بخش داخلی را اضافه کنید.

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

المان تصویر را به ستون سمت چپ اضافه کنید و تصویری را که می خواهید استفاده کنید انتخاب کنید.

برای تنظیم اندازه تصویر به تب استایل بروید.

می توانید اندازه را با تنظیم مقدار عرض و مقدار حداکثر عرض در قسمت تصویر تنظیم کنید.

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

همانطور که در بخش اول در بالا انجام دادید، عنوان را با رفتن به تب استایل در پنجره سمت چپ سفارشی کنید.

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

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

پس از اتمام کار باالمان ویرایشگر متن، المان دکمه (Button) را به ستون سمت راست اضافه کنید.

آن را در زیر المان ویرایشگر متن قرار دهید.

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

برای تغییر اندازه دکمه می توانید از منوی کشویی روی گزینه اندازه انتخاب کنید.

برای تغییر رنگ دکمه و شعاع حاشیه، می توانید به تب Style بروید.

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

برای تنظیم شعاع حاشیه می توانید به گزینه شعاع مرزی (Border Radius ) بروید.

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

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

با کلیک بر روی دکمه + یک بخش جدید اضافه کنید.

گزینه ساختار تک ستونی را انتخاب کنید.

و المان بخش داخلی را اضافه کنید.

این مرحله دو ستونی است.

المان عنوان را به ستون سمت چپ اضافه کنید.

متن پیش فرض را با متن خود جایگزین کنید.

برای سفارشی کردن عنوان، به تب استایل در پنجره سمت چپ بروید.

المان ویرایشگر متن را به ستون سمت چپ اضافه کنید و آن را در زیرالمان عنوان (سربرگ)  قرار دهید.

متن پیش فرض را جایگزین کنید و متن را از تب استایل درپنل سمت چپ سفارشی کنید.

المان دکمه را از بخش دو کپی کنید و آن را در پنل سمت چپ در بخش 3 (زیر المان ویرایشگر متن) قرار دهید.

این می تواند به جای ایجاد دکمه جدید از ابتدا در زمان شما صرفه جویی کند.

المان تصویر را به ستون سمت راست اضافه کنید و تصویری را که می خواهید استفاده کنید انتخاب کنید.

برای تنظیم اندازه تصویر به تب استایل در پنجره سمت چپ بروید.

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

حاشیه سمت چپ را به حدود 40 تغییر دهید تا کمی به راست بلغزانید.

بخش (بخش 3) را با کلیک بر روی کنترل کننده آن فعال کنید و به تب استایل بروید. پس زمینه را به دلخواه تغییر دهید.

المان فاصله را در بالا و زیر المان بخش داخلی اضافه کنید.

مقدار فاصله را به حدود 40 تغییر دهید.

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

گزینه ساختار تک ستونی را انتخاب کنید.

المان عنوان را اضافه کنید.

متن پیش فرض را جایگزین کنید و تراز را به سمت راست تنظیم کنید.

برای سفارشی کردن عنوان، به تب Style در پنجره سمت چپ بروید.

چرخ فلک تصویر را اضافه کنید و آن را در زیر المان عنوان قرار دهید.

به پنجره سمت چپ بروید و تصاویر را انتخاب کنید.

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

می توانید تعداد تصاویر در هر اسلاید را در گزینه اسلایدها برای نمایش، اندازه تصویر و سبک ناوبری را تنظیم کنید.

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

بخش داخلی را اضافه کنید و آن را در زیر المان چرخ فلک قرار دهید.

نسبت ستون را روی 70%:30% تنظیم کنید.

المان عنوان را به ستون سمت چپ بخش داخلی که در بالا اضافه کردید اضافه کنید.

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

المان ویرایشگر متن را به ستون سمت چپ بخش داخلی اضافه کنید.

آن را در زیر المان عنوان قرار دهید.

متن پیش فرض را جایگزین کنید و به تب استایل بروید تا متن را سفارشی کنید.

المان دکمه را از بخش 3 (یا بخش 2) کپی کنید و آن را در ستون سمت راست المان بخش داخلی قرار دهید.

همچنین می توانید ابتدا با کلیک بر روی نماد چشم، پیش نمایش آن را مشاهده کنید.

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

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