آیلین وب

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

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

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

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

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

تب پیشخوان

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

word image 16 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
صفحه آماده برای طراحی

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

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

word image 17 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
نوشته حساب کاربری وردپرس

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

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

word image 18 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
انتخاب قسمت داینامیک

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

word image 19 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
قرار دادن اطلاعات کاربر

بعد از انتخاب گزینه اطلاعات کاربر بر روی دکمه آچار کنار آن کلیک کرده و هر کدام از فیلدهای مورد نظر را انتخاب و اضافه کنید.

word image 20 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
مشخصات کاربر رو انتخاب کنید

توجه داشته باشید فیلدهای اطلاعات کاربر شامل موارد زیر است:

  • آیدی
    این بخش شامل نمایش شناسه کاربر می‌شود
  • نام نمایش
    نمایش دادن نامی که خود کاربر در بخش پروفایل تعیین کرده است
  • نام کاربری
    نمایش نامی که کاربر در هنگام ثبت نام درج کرده است
  • نام کوچک
    نشان دادن نام کوچک کاربر
  • نام خانوادگی
    نمایش نام خانوادگی فرد
  • بیوگرافی
    نشان دادن بیوگرافی نگارش شده در پروفایل
  • ایمیل
    نمایش ایمیل تعیین شده در بخش پروفایل
  • نام وب سایت
    نمایش وب سایت کاربر
  • متا کاربر

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

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

word image 21 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
زبانه پیشرفته رو انتخاب میکنیم

شما پس از انتخاب بخش پیشرفته، گزینه‌های قبل و بعد را می‌توانید مشاهده و جایگزین کنید. در فیلد قبل، قرارگیری متن و کد HTML بلامانع است. این گزینه قبل از ایمیل نمایش داده می‌شود. در فیلد بعد می‌توانید محتواهای مختلف را بعد از ایمیل قرار دهید. فیلد جایگزین نمایش اطلاعات پیش فرض کاربر در غیاب وی است. به عنوات مثال اگر در فیلد جایگزین abc@Yahoo.Com را قرار دهید اگر ایمیل کاربر موجود نباشد عبارت فوق به صورت پیش فرض قرار می‌گیرد.

word image 22 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
ایمیل رو وارد کنید

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

word image 23 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
ویژگی های حساب کاربری

تب سفارش‌های من

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

word image 24 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
در این بخش سفارش ها نمایش داده می شود

در این بخش به افزونه WooCommerce Page Builder نیاز دارید. ویجت سفارش‌های حساب من را باید در زیر ویجت جدا کننده قرار داده و تنظیمات استایل را با توجه به سلیقه‌ی خود انتخاب کنید. این ویجت دارای کاربری نمایش مجزا است.

word image 25 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
بخش سفارشات کاربر رو قرار بدید

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

word image 26 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
نمایش دادن سفارشات

تب آدرس‌های من

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

word image 27 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
قرار دادن آدرس ها

تب دانلودهای من

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

word image 28 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
قرار دادن بخش دانلودها

طراحی برگه حساب کاربری ووکامرس

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

word image 29 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
طراحی حساب کاربری ووکامرس

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

word image 30 - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
نوع قالب رو انتخاب کنید

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

woo panel - طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور
طراحی صفحه حساب کاربری ووکامرس به کمک افزونه المنتور

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

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

پیشنهاد میکنیم این مقالات را هم بخوانید
آموزش انتخاب بهترین کلمات کلیدی (Keywords) برای محتوا + فیلم آموزشی

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

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

هاست ویندوز و هاست لینوکس : کدوم رو انتخاب کنم؟

هاست ویندوز و هاست لینوکس

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

آموزش ساخت مگامنو در المنتور (رایگان) + 📽فیلم آموزشی

آموزش ساخت مگامنو در المنتور

با آموزش ساخت مگامنو در المنتور در خدمت شما عزیزان هستم و

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

کپی کردن صفحات المنتور به

شاید برای خیلی از شماها پیش اومده که توی طراحی صفحات با

مطالب داغ
اسکرول به بالا