آموزش ساخت قستی از بدنه سایت با المنتور

body design in elementor

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

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

نکته مهم : در قسمت های قبلی ما برای استفاده از فونت دلخواه آموزشی رو قرار دادیم و با استفاده از بخش “فونت دلخواه” در Elementor تونستیم تا فایل های فونت ها را به قالب اضافه کنیم و در صفحات استفاده کنیم. در نسخه جدید و فارسی المنتور دیگه نیازی نیست که شما فونت ها را اضافه کنید، 👌 چون آپدیت جدید دارای فوت های فارسی جدید است و فونت هایی همانند ایران یکان،ایران سنس و … در این افزونه اضافه شده و براحتی میتوانید فونت دلخواه خود را انتخاب کنید.

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

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

آموزش ساخت قستی از بدنه سایت با المنتور

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

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

ادیتور متن
ابزار ویرایشگر متن در المنتور

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

قرار دادن تصویر در صفحه

در سمت چپ ردیفی که ایجاد کردید میخوام که یک تصویر قرار بدم، البته چون تصویر پس زمینه ما سفید هست باید یک تصویر با پس زمینه سفید پیدا کنیم. سایتی رو به شما معرفی میکنم که براحتی میتوانید هر تصویری که میخاهید رو پیدا کنید. به آدرس https://Dribbble.com برید. بعد از اینکه وارد سایت شدید با تصویر همانند تصویر زیر مواجه می شوید :

Dribbble
وبسایت دانلود تصاویر زیبای Dribbble

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

تصویر و متن
اضافه کردن تصویر و متن به صفحه

اضافه کردن آیکون باکس به صفحه

در این بخش هم میخوام که یک ردیف یا سکشن ایجاد کنم و در این سکشن باکس های آیکون قرار بدم، در بیشتر سایت های دیده اید که خدمات سایت رو در جعبه های کوچیک نمایش میدن. من هم در این جا میخوام یک همچین بخضی را به صفحه اضافه کنم.

برای این کار مراحل زیر رو دنبال کنید :

  1. بر روی دکمه + در صفحه کلیک کنید و یک ردیف یک ستونه ایجاد کنید.
  2. از ابزار های سمت راست گزینه “جعبه آیکون”رو به صفحه بکشید و در داخل ستون ایجاد شده قرار دهید.
  3. آیکون های مورد نظر رو در صفحه قرار بدید.
  4. متن ها و عناوین باکس ها رو وارد کنید.

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

آیکون باکس
جعبه آیکون در elementor

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

استفاده از آیکون باکس
اضافه کردن جعبه های آیکون زیبا در صصفحه ساز Elementor

موفق باشید. ❤❤❤❤❤

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