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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[su_note note_color=”#b0ffb9″ text_color=”#000000″ radius=”10″]گر مشکلی در مراحل داشتید و یا سوالی مربوط به این مقاله، میتوانید در دیدگاه های همین مقاله مطرح کنید و پاسخ خودتون رو در کمترین زمان ممکن دریافت کنید.[/su_note]