آموزش طراحی فرم ورود (Login) پاپ آپ با استفاده از المنتور

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
طراحی فرم login با المنتور

حتما تا به حال فرم ورود (Login) پیش فرض وردپرس را دیده اید؟ یک ظاهر معمولی بدون هیچگونه سفارشی سازی. از طرف دیگر شاید برای سفارشی سازی فرم ورود، مجبور به نصب افزونه های جانبی شده اید که شاید قابلیت های زیادی به شما ندهند.

طراحی فرم login

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

طراحی فرم ورود (Login) با المنتور

ابتدا از بخش قالب ها، گزینه پاپ آپ ها رو بزنید.

طراحی فرم login با المنتور

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

طراحی فرم login با المنتور

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

برای تغییر رنگ پس زمینه پاپ آپ، به تب استایل رفته و گزینه پوشش را انتخاب کنید و کد رنگی rgba(133, 133, 133, 0.5) را وارد کنید.

طراحی فرم login با المنتور

حالا به پنل ویجت ها بریم و محتویات فرم ورود (Login) را اضافه کنیم.

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

طراحی فرم login با المنتور

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

بعد از ویرایش و استایل دهی به فرم، به سراغ تنظیمات فرم ورود می رویم. تنظیمات فرم ورود المنتور دارای قابلیت سفارشی سازی برچسب فیلد ها، سایز دکمه، قابلیت ریدایرکت بعد از ورود و خروج را دارد. در ادامه این ویژگی ها را با هم بررسی می کنیم.

طراحی فرم login با المنتور

فیلد های فرم

در تب محتوا، گزینه فیلد های فرم، می توانید برچسب های فرم را غیر فعال کنید. همچنین می توانید سایز فیلد های ایمیل و رمز عبور را تغییر دهید.

طراحی فرم login با المنتور

دکمه

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

طراحی فرم login با المنتور

تنظیمات اضافی

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

طراحی فرم login با المنتور

سفارشی سازی فرم ورود

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

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

در انتها هم یک ویجت بخش داخلی اضافه کنید یک پس زمینه با کد رنگی rgba(93,214,0,0.06) قرار داده و یک ویجت سربرگ، درون این بخش با متن دلخواه بنویسید.

طراحی فرم login با المنتور

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

طراحی فرم ورود با المنتور

قرار دادن فرم ورود به صورت پاپ آپ

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

طراحی فرم login با المنتور

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

طراحی فرم login با المنتور

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

خب، سربرگ را ذخیره کنید و به صفحه اصلی سایت رفته و روی دکمه مورد نظر کلیک کنید تا فرم ورود نمایش داده شود.

طراحی فرم ورود با المنتور

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

دانلود قالب فرم ورود

همچنین برای درون ریزی این قالب، از مقاله نحوه ذخیره، درون ریزی و خروجی گرفتن از قالب های المنتور استفاده کنید.

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

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

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=15788

Avatar
rezazp در 6:41 ب.ظ

استاد صفحه فراموشی رمز عبور وردپرس که در این ویجت هست رو نمیشه دیزاین کرد و خیلی زشت و ساده هستش چطوری میشه اونو تغییر داد؟ آیا در این ویجت جایی برای تغییر ظاهر اون هست؟

پاسخ
المنتور فارسی
المنتور فارسی در 0:56 ق.ظ

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

پاسخ
Avatar
امین ولی پور در 12:37 ب.ظ

با سلام و درود تشکر از آموزش خوبتون فقط یه سوال پایین این فرم دکمه ثبت نام کاربر جدید را چطوری باید فعال کنیم؟ (ثبت نام کاربران جدید به چه صورت است؟)

پاسخ
المنتور فارسی
المنتور فارسی در 12:46 ب.ظ

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

پاسخ
Avatar
هادی در 6:07 ب.ظ

سلام وقتتون بخیر باشه
من از اینکه آموزش کار با المنتور بصورت فارسی ارائه میدین کمال تشکر دارم ،ولی ای کاش بصورت ویدئویی باشه چون گاها آدم ذهنش نمیتونه با مراحل مچ بشه !
ممنون منتظر اموزش های بعدی شما هستم

پاسخ
المنتور فارسی
المنتور فارسی در 6:46 ب.ظ

با سلام
چشم حتما سعی میشه آموزش های ویدئویی بیشتر قرار بگیره.

پاسخ
Amirhossein Vaghefi
Amirhossein Vaghefi در 11:18 ب.ظ

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

پاسخ
المنتور فارسی
المنتور فارسی در 0:17 ق.ظ

خواهش میکنم.
نه دکمه تغییری نمی کنه. ولی میتونید با استفاده از افزونه Elementor Extras دکمه رو بر اساس وضعیت کاربر تغییر بدید. یعنی زمانی که وارد شد این دکمه مخفی شه و دکمه دیگری مثلا داشبورد فعال شه.

پاسخ
Amirhossein Vaghefi
Amirhossein Vaghefi در 10:28 ب.ظ

‌من نتوستم زیر کامنت قبلیم ریپلای کنم، برای اینکه قسمت کاربر جدید رو درست کنیم باید چکار کرد؟ اینکه بشه روش کلیک کنه و وارد صفحه‌ای بشه که توش باید ثبت نام کنه
ممنون

پاسخ
المنتور فارسی
المنتور فارسی در 11:13 ب.ظ

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

پاسخ
المنتور فارسی
المنتور فارسی در 11:18 ب.ظ

بزودی آموزش فرم ثبت نام هم قرار میگیرد.

پاسخ
Kambiz Mohammady
Kambiz Mohammady در 2:06 ب.ظ

باسلام وسپاس از سایت مفید و پرمحتواتون
خواستم سوالی رو مطرح کنم برای اون دسته از کسانی که از المنتور پرو استفاده میکنن واز قالب hello elemntor که به دلیل نداشتن ابزارک دراین قالب امکان ساخت ساید بار رو ندارن باید از چه ترفندی استفاده کنن ممنون میشم اگه توضیح بدین

پاسخ
المنتور فارسی
المنتور فارسی در 3:53 ب.ظ

با سلام
چشم در مقاله به صورت کامل براتون قرار میدم.

پاسخ
mostafa100
mostafa100 در 12:10 ب.ظ

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

پاسخ
المنتور فارسی
المنتور فارسی در 12:18 ب.ظ

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

پاسخ
mostafa100
mostafa100 در 3:32 ب.ظ

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

پاسخ
المنتور فارسی
المنتور فارسی در 3:54 ب.ظ

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

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

7 − شش =

نیاز به کمک دارید؟ پیام دهید
  • بازگشت به کتابخانه