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

ajax login form in elementor

فهرست مطالب

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مطلب پیشنهادی :
نکات مهم سئو در طراحی سایت با المنتور

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

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

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

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

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

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

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

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

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

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

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

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

مطلب پیشنهادی :
دانلود تمپلیت المنتور (بیش از 1500 دموی آماده برای افزونه Elementor)
انتخاب پاپ آپ
انتخاب پاپ آپ در صفحه

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

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

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

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

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

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

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

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

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

    پاسخ
  3. سلام
    من همه روش گفته شدم رفتم اما وقتی روی دکمه ورود کلید می هیچی نمیاد و این پیج سفید باز میشه about:blank#blocked

    مشکل از کجاست به نظر شما ؟

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

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

    پاسخ

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