ساخت فرم ورود ایجکس در المنتور

ajax login form in elementor

فهرست مطالب

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

فرم ورود وردپرس
فرم لاگین پیشفرض وردپرس

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

طراحی فرم لاگین ایجکس با المنتور

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

ساخت فرم ورود
فرم ورود به صورت پاپ آپ در وردپرس

در پنجره ای که باز می شود نوع قالب رو بر روی پاپ آپ قرار بدید و یک نام هم برای این فرم پاپ آپ انتخاب کنید و در آخر هم بر روی ایجاد قالب کلیک کنید (همانند شکل زیر) :

ایجاد فرم ورود در وردپرس
ایجاد فرم ورود در المنتور

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

ابتدا عرض صفحه ورود ایجکس یا پاپ آپ رو بر روی 480px قرار بدید، و در لیست کشویی ارتفاع بر روی سفارشی کلیک کنید تا اندازه سفارشی خودتون رو وارد کنید. عرض صفحه ورود رو هم بر روی 660px قرار بدید، همانند تصویر زیر :

مطلب پیشنهادی :
ساختار اصولی تگ های HTML 5 در المنتور
فرم ورود المنتور
طراحی فرم ورود یا لاگین در المنتور

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

رنگ پس زمینه پاپ آپ
میتوانید رنگ پسزمینه رو انتخاب کنید

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

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

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

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

ساخت فرم login در وردپرس
طراحی فرم ورود در المنتور

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

در آخر هم باید فرمی همانند شکل زیر داشته باشید …

زیبا سازی فرم ورود ایجکس
ایجاد فرم لاگین کاربر در المنتور

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

شخصی سازی فرم ورود
شخضی سازی فرم ورود وردپرس با المنتور

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

مطلب پیشنهادی :
ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور

تنظیمات اضافی :در این بخش هم میتوانید تنظیمات اضافی فرم  ورود رو شخصی سازی کنید، این تنظیمات شامل عملیات ورود و خروج کاربر، لیبل ها یا برچسب های مربوط به فرم، عملیات مربوط به فراموش کردن رمز … می باشد.

تنظیمات اضافی
تنظیمات اضافی فرم ورود

زیبا سازی فرم ورود ایجکس در المنتور

در این بخش هم میخواهیم تا فرم ورودمون رو یکم شخصی سازی و زیباتر، شما میتوانید هر کاری میخواهید بر روی فرم ورود انجام دهید مونده به سلیقتون که چه فرمی رو دوست داشته باشید. (می توانید از المانهای المنتور برای زیبا سازی استفاده کنید)

شخصی سازی فرم لاگین
فرم ورود شخصی سازی شده

بعد از اینکه تمامی تغییرات رو روی فرم ورود در المنتور اعمال کردید، بر روی دکمه انتشار کلیک کنید.

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

اعمال فرم ورود
قرار دادن فرم ورود المنتور

مرحله آخر : قرار دادن فرم در سایت

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

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

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

مطلب پیشنهادی :
نحوه اضافه کردن دکمه دانلود متحرک در المنتور + 🎬 ویدئوی آموزشی
انتخاب پاپ آپ
انتخاب پاپ آپ در صفحه

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

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

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

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

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

۲۶ دیدگاه دربارهٔ «ساخت فرم ورود ایجکس در المنتور;

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

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

    پاسخ

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