طراحی فرم ورود و ثبت نام با المنتور

دوره تخصصی UI باالمنتور

طراحی فرم ورود و ثبت نام با المنتور

نویسنده : امیرمحمد معلمی
113 دیدگاه
آخرین بروزرسانی : 18 شهریور, 1400

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

Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

آنچه در این مطلب می خوانید

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

افزونه های مورد نیاز

المنتور پرو

المنت پک

فرم ورود

  1. از منو پیشخوان وردپرس > قالب ها > افزودن قالب را انتخاب می کنیم.
  2. نوع قالب را روی Section گذاشته و نامی برای قالب خود درج می کنیم.
  3. یک سکشن با عرض 300px ایجاد می کنیم.
  4. در قسمت ابزارک های المنتور، ابزارک User Login برای طراحی فرم ورود انتخاب می کنیم.
  5. ابزارک را مطابق با سلیقه خود سفارشی سازی می کنیم.

فرم ثبت نام

  1. از منو پیشخوان وردپرس > قالب ها > افزودن قالب را انتخاب می کنیم.
  2. نوع قالب را روی Section گذاشته و نامی برای قالب خود درج می کنیم. 
  3. یک سکشن با عرض 300px ایجاد می کنیم.
  4. در قسمت ابزارک های المنتور، ابزارک User Register برای طراحی فرم ورود انتخاب می کنیم.
  5. ابزارک را مطابق با سلیقه خود سفارشی سازی می کنیم.

ساخت دکمه Swicher

  1. از منو پیشخوان وردپرس > قالب ها > افزودن قالب را انتخاب می کنیم.
  2. نوع قالب را روی Section گذاشته و نامی برای قالب خود درج می کنیم. 
  3. یک سکشن با عرض 300px ایجاد می کنیم.
  4. در قسمت ابزارک های المنتور، ابزارک Switcher برای طراحی فرم ورود انتخاب می کنیم.
  5. در تنظیمات این افزونه در یخش Swich A قالبی که در مرحله ( فرم ورود ) ذخیره کردیم را فراخانی می کنیم.
  6. همچنین در یخش Swich B نیز قالبی که در مرحله ( فرم ثبت نام ) ذخیره کردیم را فراخانی می کنیم.
  7. تغیرات و قالب خود را ذخیره می کنیم.

درج دکمه ثبت نام در هدر سایت

  1. هدر خود را ویرایش کنید و ستونی را برای قرارگیری دکمه ورود / ثبت نام طراحی می کنیم.
  2. در قسمت ابزارک های المنتور، ابزارک Offcanvas در ستون مورد نظر درج می کنیم.
  3. در قسمت Select Source ابزارک نوع آن را بر روی Elementor Template قرار می دهیم.
  4. در قسمت Choose Template قالبی که در محله ( ساخت دکمه Swicher ) طراحی کردیم را فراخانی می کنیم.
  5. تنظیمات خود را ذخیره می کنیم.

نمایش نام کاربر

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


در قسمت تنظیمات محتوا ابزارک offcanvans وارد بخش Button و فیلد Button Text را در حالت داینامیک User info قرار می دهیم

بر روی آیکون آچار فیلد داینامیک کلیک کرده و Field آن را روی Username قرار می دهیم.

طراحی فرم ورود و ثبت نام

در بخش پیشرفته در فیلد قبل می توانیم کلمه سلام را اضافه کنیم. تا علاوه بر نمایش نام کاربر این کلمه هم نمایش داده شود. مثلا ( سلام Kurockey ) 

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