آیلین وب

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

action login form 1 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

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

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

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

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

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

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

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

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

action login form 2 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

action login form 3 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

action login form 4 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

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

 نام کاربری

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

action login form 5 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

 فیلد رمز عبور

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

action login form 6 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

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

action login form 7 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

action login form 8 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

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

action login form 9 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

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

action login form 10 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

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

action login form 11 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

action login form 12 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

action login form 13 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

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

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

action login form 14 min - آموزش ساخت فرم ورود المنتور زیبا با افزونه Action Pack + 🎬فیلم آموزشی

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

فیلم آموزشی

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد میکنیم این مقالات را هم بخوانید
ساخت استایل منوی اپلیکیشن موبایل با المنتور

ساخت استایل منوی اپلیکیشن موبایل

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

قالب Unik | قالب وردپرس شرکتی و خلاقانه (رایگان!)

قالب Unik | قالب وردپرس

امروز قصد یکی از بهترین و خلاقانه ترین قالب های وردپرس را

قالب Alaska | قالب وردپرس هاستینگ (اورجینال و فارسی)

قالب Alaska | قالب وردپرس

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

قالب Amax | قالب وردپرس چندمنظوره خلاقانه (رایگان!)

قالب Amax | قالب وردپرس

از دیگر قالب های وردپرس که امروز قصد معرفی آن را برای

مطالب داغ
اسکرول به بالا
طراحی انواع سایت
طراحی انواع سایت با قیمت بسیار ارزان!