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

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

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

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

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

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

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

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

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

در حالت ویرایش صفحه، روی دکمۀ ویرایش با المنتور کلیک کنید تا همیشه بتوانید این صفحه را با المنتور ویرایش نمایید.

گام دوم: مخفی سازی تب ناوبری ووکامرس

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

گام دوم: مخفی سازی تب ناوبری ووکامرس

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

				
					.woocommerce-account .woocommerce-MyAccount-navigation { 
 display: none;
}
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}
				
			

توجه کنید از قبل از همۀ لینک‌های حساب کاربری (سفارشات، دانلودها و غیره) کپی و در یک فایل txt ذخیره کنید.

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

گام سوم: بخش‌ها یا سکشن‌ها را بسازید

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

گام سوم: بخش‌ها یا سکشن‌ها را بسازید

سکشن اول، برای نمایش تصویر پروفایل، نام کاربر، اطلاعات اضافی و سکشن دوم برای نمایش باکس‌ها نیاز است.

گام سوم: بخش‌ها یا سکشن‌ها را بسازید 2

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

گام سوم: بخش‌ها یا سکشن‌ها را بسازید 3
گام چهارم: به باکس‌ها و سکشن‌ها استایل بدهید

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

گام چهارم: به باکس‌ها و سکشن‌ها استایل بدهید

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

گام پنجم: استفاده از ویجت باکس آیکون

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

افزودن باکس آیکون به صفحه حساب کاربری

شما می‌توانید یک ستون باکس آیکون را از هر نظر طراحی کنید و سپس به عنوان الگو چند کپی (تکثیر) از آن ایجاد کنید.

گام پنجم: استفاده از ویجت باکس آیکون 2
گام پنجم: استفاده از ویجت باکس آیکون 3

این روش، به افزایش سرعت شما در طراحی سریع صفحه حساب کاربری ووکامرس کمک خوبی می‌کند.

گام ششم: برچسب‌های داینامیک المنتور

افزونه Elementor Pro دارای ویژگی برچسب‌های داینامیک بوده که می‌توانیم هر داده‌ای را در صفحه نمایش دهیم.

گام ششم: برچسب‌های داینامیک المنتور

به عنوان نمونه، ویجت عنوان (title) را به صفحه اضافه کنید و روی آیکون برچسب داینامیک کلیک کنید و نوع ورودی را مشخص کنید.

گام ششم: برچسب‌های داینامیک المنتور 3
گام ششم: برچسب‌های داینامیک المنتور 4

درج کد کوتاه، نمایش عکس پروفایل، نمایش اطلاعات کاربر و سایر موارد در قسمت برچسب‌های داینامیک قرار دارد.

گام هفتم: افزودن اطلاعات اضافی برای کاربر

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

گام هفتم: افزودن اطلاعات اضافی برای کاربر

این افزونه همۀ این داده‌ها را در اختیار ما قرار می‌دهد و ویژگی‌های بیشتری نیز برای طراحان سایت ارائه می‌کند.

گام هفتم: افزودن اطلاعات اضافی برای کاربر 5

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

گام هفتم: افزودن اطلاعات اضافی برای کاربر 3

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

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

گام هفتم: افزودن اطلاعات اضافی برای کاربر 4
گام هشتم: لینک دهی به باکس‌های دسترسی

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

گام هشتم: لینک دهی به باکس‌های دسترسی

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

گام هشتم: لینک دهی به باکس‌های دسترسی 2

در نهایت تغییرات ذخیره کنید، می‌بینید که به سادگی توانستیم بدون نصب و نیاز به افزونه‌های اضافی، یک حساب کاربری حرفه‌ای طراحی کنیم.

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

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

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

این مطلب را با دوستان خود به اشتراک بگذارید

ارسال یک دیدگاه

برای ارسال دیدگاه، نیاز است که را انجام دهید.

دلیل بازپرداخت