در این آموزش جذاب، می‌خواهیم روش ساخت حساب کاربری با المنتور رو به شما همراهان سایت تم فور آموزش بدهیم.
به شما آموزش می‌دهیم که چگونه بدون نیاز به نصب افزونه جانبی یا اضافی، فقط با افزونه المنتور و افزونه المنتور پرو یک حساب کاربری حرفه‌ای بسازید.
مهم نیست چه قالبی استفاده می‌کنید، می‌توانید با این آموزش، حساب‌های کاربری جذاب و حرفه‌ای برای فروشگاه خود طراحی کنید.
الگو و نمونه‌ای که در آموزش ساخت حساب کاربری با المنتور می‌خواهیم کار کنیم، ایجاد حساب کاربری فروشگاه به سبک حساب تم فور است.
گام اول: صفحه حساب کاربری ووکامرس را ویرایش کنید
به صفحۀ حساب کاربری ووکامرس بروید و روی ویرایش با المنتور کلیک کنید، اگر امکان پذیر نیست، کافیست یکبار به ویرایش صفحه بروید.
در حالت ویرایش صفحه، روی دکمۀ ویرایش با المنتور کلیک کنید تا همیشه بتوانید این صفحه را با المنتور ویرایش نمایید.
گام دوم: مخفی سازی تب ناوبری ووکامرس
مانند الگو، نیازی به ستون و تب سمت راست صفحه که حاوی لینک دسترسی به موارد حساب کاربری است نداریم.
کافیست قطعه کد زیر را در بخش CSS سفارشی کپی و پیست کنید، البته روی ویجت سکشن این کار را انجام دهید.
.woocommerce-account .woocommerce-MyAccount-navigation {
display: none;
}
.woocommerce-account .woocommerce-MyAccount-content {
width: 100%;
}
توجه کنید از قبل از همۀ لینک‌های حساب کاربری (سفارشات، دانلودها و غیره) کپی و در یک فایل txt ذخیره کنید.
در گام‌های بعدی فرآیند ساخت حساب کاربری با المنتور به این قطعه کد نیاز خواهیم داشت.
گام سوم: بخش‌ها یا سکشن‌ها را بسازید
با کلیک روی آیکون بعلاوه، یک سکشن یا بخش جدید به صفحه اضافه کنید، نیاز به دو سکشن داریم.
سکشن اول، برای نمایش تصویر پروفایل، نام کاربر، اطلاعات اضافی و سکشن دوم برای نمایش باکس‌ها نیاز است.
میان این سکشن‌ها می‌توانید از ویجت فاصله گذار برای رعایت فاصله میان آن‌ها و مرتب سازی استفاده کنید.
گام چهارم: به باکس‌ها و سکشن‌ها استایل بدهید
شما می‌توانید به هر بخش (سکشن) استایل بدهید که در این آموزش، برای بخش‌ها، سایه تعریف و تنظیم می‌کنیم.
کدری یا شفافیت سایه، رنگ بندی‌ها و سایر موارد به دلخواه و سلیقه خودتان پیاده سازی کنید.
گام پنجم: استفاده از ویجت باکس آیکون
برای ساخت باکس آیکون دسترسی به بخش‌های مختلف ووکامرس، ویجت باکس را به بخشی که در صفحه قرار دادید اضافه کنید.
شما می‌توانید یک ستون باکس آیکون را از هر نظر طراحی کنید و سپس به عنوان الگو چند کپی (تکثیر) از آن ایجاد کنید.
این روش، به افزایش سرعت شما در طراحی سریع صفحه حساب کاربری ووکامرس کمک خوبی می‌کند.
گام ششم: برچسب‌های داینامیک المنتور
افزونه Elementor Pro دارای ویژگی برچسب‌های داینامیک بوده که می‌توانیم هر داده‌ای را در صفحه نمایش دهیم.
به عنوان نمونه، ویجت عنوان (title) را به صفحه اضافه کنید و روی آیکون برچسب داینامیک کلیک کنید و نوع ورودی را مشخص کنید.
درج کد کوتاه، نمایش عکس پروفایل، نمایش اطلاعات کاربر و سایر موارد در قسمت برچسب‌های داینامیک قرار دارد.
گام هفتم: افزودن اطلاعات اضافی برای کاربر
برای اینکه بتوانیم اطلاعاتی مانند تاریخ عضویت کاربر، تعداد سفارشات، تعداد خریدها را در حساب کاربری نمایش دهیم، نیاز به نصب افزونه ابزار شاپ است.
این افزونه همۀ این داده‌ها را در اختیار ما قرار می‌دهد و ویژگی‌های بیشتری نیز برای طراحان سایت ارائه می‌کند.
برای نمایش تصویر پروفایل کاربر، ویجت تصویر را به صفحه اضافه و روی برچسب داینامیک کلیک و گزینۀ عکس پروفایل کاربر را انتخاب کنید.
با این کار، تصویر پروفایل کاربر در صفحه حساب کاربری به سادگی قابل نمایش خواهد بود.
می‌توانید به این تصویر، استایل، گردی، تنظیم رنگ یا افکت برای آن تعبیه کنید تا به زیبایی نمایش داده شود.
گام هشتم: لینک دهی به باکس‌های دسترسی
در گام دوم لینک تب‌های حساب کاربری را ذخیره کردیم، اکنون در اینجا به آن‌ها نیاز داریم تا به باکس‌ها لینک بدهیم.
برای باکس سفارشات، لینک سفارشات ووکامرس، برای باکس دانلودها، لینک دانلودهای ووکامرس و به همین ترتیب ادامه دهید.
در نهایت تغییرات ذخیره کنید، می‌بینید که به سادگی توانستیم بدون نصب و نیاز به افزونه‌های اضافی، یک حساب کاربری حرفه‌ای طراحی کنیم.
آموزش ساخت حساب کاربری با المنتور
نوع استایل و حالت حساب کاربری براساس سلیقه خودتان بوده و آموزش ساخت حساب کاربری با المنتور صرفاً یک راهنما برای شماست.
امیدواریم آموزش ساخت حساب کاربری با المنتور مورد پسند و رضایت شما عزیزان قرار گرفته باشد، منتظر نظرات ارزشمند شما هستیم.
