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

site design in elementor part 1

فهرست مطالب

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

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

[toc]

ابزارک ها ی المنتور
نصب و پیکربندی اولیه افزونه elementor

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

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

آموزش تنظیم صفحه در افزونه المنتور

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

تنظیمات صفحه در المنتور
page settings in elementor plugin

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

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

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

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

ایجاد تصویر هدر و فرم جستجو

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

[su_note note_color=”#ffe8fa” text_color=”#ff5454″ radius=”5″ class=”.aylin_mahmoud”]بدین منظور همانند ویدئوی آموزشی از منوی سمت راست تصویر را انتخاب کرده و یک تصویر زیبا و کشیده را برای این بخش انتخاب کنید، حال بعد از آن و تنظیمات اولیه تصویر پس زمینه اقدام به ایجاد فرم جستجو کرده و از طریق آن به راحتی ویرایش های لازم مانند، گرد کردن گوشه های فرم، تغییر رنگ دکمه، تغییر اندازه و… را بر روی آن اعمال نمایید.[/su_note]

یراحی فرم جستجوی وب سایت
ساخت قسمت جستجو در المنتور

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

مقالات پیشنهادی : 

 

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

ویدئوی آموزشی طراحی قسمت هدر در المنتور

۳۰ دیدگاه دربارهٔ «آموزش ساخت و طراحی قسمت هدر وب سایت با المنتور;

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

    پاسخ
  2. سلام خسته نباشید بابت سایت خوبی که دارید
    بنده حقیر یک سوال دارم ویژوال کامپوزر یا المنتور برای هر قالب وردپرس اماده و رایگان میشه استفاده کرد؟؟؟
    و لطف میکنید کدوم قالب ها اماده و رایگان میشه ار المنتور استفاده کرد حالا به غیر از قالب hello elmentor

    پاسخ
    • ممنونم از شما
      ویژوال کامپوزر که رایگان نیست ولی المنتور نسخه رایگان داره و میتونید استفاده کنید.
      الان فالب های سازگار با المنتور خیلی محبوب شدن که از جمله این قالب ها میشه به neve یا astra اشاره کردد که میتونید نصب و استفاده کنید

      پاسخ

دیدگاهتان را بنویسید