You are currently viewing آموزش ساخت حساب کاربری با المنتور نحوه طراحی صفحه ثبت نام با المنتور پرو

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


بارگذاری…

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

مزایای ایجاد حساب کاربری با استفاده از Elementor

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

آموزش ساخت پنل سفارشی با Elementor

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

نکته: ابتدا باید گزینه «عضویت» را در قسمت تنظیمات عمومی سایت خود فعال کنید. برای این کار ابتدا وارد داشبورد وردپرس خود شوید و سپس از قسمت تنظیمات بر روی گزینه “General” کلیک کنید. سپس گزینه «عضویت» را فعال کنید.

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

آموزش ایجاد حساب کاربری با المنتور

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

مرحله 1: با استفاده از ویجت یک فرم ثبت نام کاربر ایجاد کنید

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

سپس ماژول اجرایی User Registration Form را بکشید و در موقعیت دلخواه رها کنید. سپس فیلدهای فرم پیش فرض را خواهید دید.

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

بیشتر بخوانید: نحوه پشتیبان گیری از وردپرس با افزونه BackUpWordPress

مرحله 2: تنظیمات فرم را پیکربندی کنید

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

  • نقش کاربر جدید

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

بیشتر بخوانید: 10 صفحه ای که هر وب سایت باید داشته باشد

  • اقدامات پس از ثبت نام

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

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

در زیر گزینه های این بخش را توضیح می دهیم:

– تغییر مسیر پس از ثبت نام: با استفاده از این گزینه می توانید کاربر را پس از ثبت نام موفق به صفحه تشکر و یا به صفحه ورود هدایت کنید. برای این کار کافیست آدرس صفحه مورد نظر را در قسمت آدرس زیر این گزینه قرار دهید.

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

– ورود خودکار: این گزینه به کاربر اجازه می دهد تا به طور خودکار وارد وب سایت شما شود. کاربر پس از ثبت نام نیازی به ورود به سایت نخواهد داشت زیرا پس از ثبت نام موفق مستقیماً وارد سایت می شود.

– ایمیل بفرست: با انتخاب این گزینه ایمیلی برای کاربر ارسال می شود که نشان می دهد با موفقیت در وب سایت شما ثبت نام کرده است. همچنین می توانید محتوای ایمیل در بخش ایمیل را به دلخواه شخصی سازی کنید.

همچنین می توانید ظاهر فرم ورود و ثبت نام سایت خود را از تب Style شخصی سازی کنید.

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

مرحله 3: یک فرم ثبت نام کاربر را به وب سایت خود اضافه کنید

در آخرین مرحله ایجاد حساب کاربری با المنتور، باید فرم ثبت نامی که ایجاد کرده اید را به سایت خود اضافه کنید. درست مانند سایر ابزارک های Elementor، می توانید مستقیماً ویجت فرم ثبت نام را به موقعیت دلخواه بکشید و رها کنید. چیزی شبیه به ویدیوی زیر:

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

طراحی صفحه حساب کاربری WooCommerce با استفاده از Elementor

همچنین می توانید فرم ثبت نام کاربر را در صفحه ووکامرس خود قرار دهید. برای این کار می توانید یک صفحه ایجاد کنید و نام آن را «صفحه حساب سفارشی» بگذارید. اکنون روی دکمه “ویرایش با المنتوربرای ورود به صفحه ویرایشگر پلاگین Elementor کلیک کنید.

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

پس از ایجاد فرم، از داشبورد وردپرس، روی گزینه “Configuration” از قسمت “WooCommerce” کلیک کنید. سپس به تب “Advanced” بروید. سپس نام برگه ای را که ایجاد کرده اید از منوی کشویی My Account Sheet انتخاب کنید.

بیشتر بخوانید: آموزش پلاگین Digits نصب و تنظیمات افزونه Digits

نحوه ایجاد فرم ثبت نام کاربر در المنتور به روشی دیگر

به طور پیش فرض، Elementor ماژول اجرایی برای افزودن فرم ثبت نام کاربر ندارد. اما می توانید با استفاده از ماژول اجرایی “فرم” یک حساب کاربری جذاب و بخش ثبت نام ایجاد کنید.

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

برای سفارشی کردن فرم به پنل سمت چپ بروید. اولین بلوک گزینه ای که باید باز کنید بلوک Form Fields در زیر تب Content است. فرم ثبت نامی که ما ایجاد خواهیم کرد از 5 فیلد به شرح زیر تشکیل شده است:

  • نام
  • نام خانوادگی
  • نام کاربری
  • پست الکترونیک
  • رمز عبور

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

پس از تنظیم فیلدهای فرم، بلوک “اقدام پس از ارسال” را باز کنید. از آنجایی که می خواهید یک فرم ثبت نام کاربر ایجاد کنید، می توانید عمل را روی Redirect تنظیم کنید.

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

بلوک Additional Options را باز کرده و گزینه Custom Message را فعال کنید. می توانید پیام موفقیت را با چیزی مانند “Created by User” جایگزین کنید.

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

ایجاد یک صفحه سفارشی 404 در وردپرس

خلاصه: ایجاد یک حساب کاربری با Elementor

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

منبع: ultimateelementor

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