آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

 پیش نیازهای آموزش

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

1. افزونه Elementor Pro
2. افزونه Action Pack

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

آموزش طراحی فرم ورود المنتور

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

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

در این مرحله که بعدا از نصب افزونه ها دومین مرحله میشه ما باید یک پنجره پاپ آپ ایجاد بکنیم.

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

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

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

حالا باید به تنظیمات فرم المنتور برید و فایل های مورد نظر خودتون رو طبق فیلد های زیر ایجاد کنید.

اضافه کردن فیلدهای ورود

 نام کاربری

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

 فیلد رمز عبور

سپس بر روی دکمه افزودن آیتم کلیک کنید و باز هم یک فیلد ایجاد کنید و نوع اون رو روی کلمه عبور قرار بدید و یک برچسب همانند رمز عبور برای این فیلد انتخاب کنید همانند تصویر زیر :

فیلم مرا به خاطر بسپار

باز هم بر روی افزودن آیتم کلیک کنید و یک فیلد جدید با نوع پذیرش و با برچسب مرا به خاطر بسپار اضافه کنید و در بخش متن پذیرش هم جمله “مرا به خاطر بسپار” رو تایپ کنید همانند تصویر زیر :

تا اینجای آموزش ما تونستیم تمامی فیلد های مورد نظر برای ورود کاربر رو ایجاد بکنیم.

بخش واکنش بعد از ارسال

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

وقتی شما توی این بخش گزینه ورود را انتخاب میکنید یک تب جدید با همین گزینه یعنی گزینه ورود به تب های زیر اضافه میشه.

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

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

• Password : اگر این گزینه را انتخاب کنید ورود کاربر فقط با استفاده از رمز عبوری که انتخاب کرده میسر میشه.
• OTP :  اگر این گزینه را انتخاب کنید ورود کاربر با استفاده از کد ارسالی به ایمیل یا sms میسر میشه.
• OTP & Password :  اگر این گزینه را انتخاب کنید همانطور که از اسمش پیداست هم کاربر میتونه با رمز عبور و همچنین با کد ارسالی به ایمیل و sms وارد حسابش بشه.

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

و در بخش آخر این فیلد هم که عنوانش هست مرا به خاطر بسپار در کنارش لیست رو باز کنید و فیلد مرا به خاطر بسپار را همانند تصویر زیر انتخاب کنید:

سپس به گزینه بعدی برید که عنوانش است ریدایرکت بعد از ورود اگر شما این گزینه را روی روشن قرار بدید میتونید هر کاربری که با هر نقش مجزایی وارد سیستم شد به یک آدرس جدا ریدایرکت کنید. چون این امکان توی فرم المنتور نیستش افزونه Action Pack اومده و این امکان رو به فرم المنتور اضافه کرده.

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

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

امیدوارم که از این آموزش لذت کافی را برده باشید و شما هم بتونید یک فرم ورود بسیار حرفه ای و پیشرفته را برای سایت خودتون طراحی بکنید همچنین در آموزش بعدی می خوام که فرم ثبت نام را با همین افزونه طراحی بکنیم پس حتما در آموزش بعدی هم همراه ما باشید.

فیلم آموزشی