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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
حساب کاربری سایت دیجی کالا با المنتور
پخش ویدیو

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

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

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

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

  • ایجاد صفحه حساب کاربری و پیکربندی در ووکامرس
  • قرار دادن منو های حساب کاربری در فهرست
  • قرار دادن آیکون برای فهرست
  • طراحی صفحه حساب کاربری
  • مخفی کردن برگه ها برای کاربران وارد نشده

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

طراحی حساب کاربری سایت دیجی کالا با المنتور

ایجاد صفحه حساب کاربری و پیکربندی در ووکامرس

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

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

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

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

صفحه حساب کاربری ووکامرس را ایجاد کردیم. برای طراحی به مراحل بعد میرویم.

ایجاد فهرست حساب کاربری در وردپرس

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

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

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

قرار دادن آیکون برای منو

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

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

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

با استفاده از این افزونه می توانید از کتابخانه font awesome  و چند کتابخانه دیرگ آیکون قرار دهید. همچنین می توانید آیکون های با فرمت SVG را به صورت سفارشی آپلود کنید. توجه کنید استفاده از کتابخانه آیکون المنتور در اینجا امکان پذیر نیست.

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

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

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

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

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

صفحه باز شده در المنتور را به 2 ستون تقسیم می کنیم. عرض محتوا را روی 1676 قرار می دهیم. روی ستون سمت راست کلیک میکنیم و مقدار 21 درصد را قرار می دهیم.

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

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

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

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

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

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

در انتها روی دکمه انتشار کلیک می کنیم تا پنجره شرابط نمایش نشان داده شود.

در این قسمت باید شرط اضافه کنیم. یک شرط با عنوان برگه ها که روی برگه حساب کاربری من  تنظیم شده است را اضافه کنید.

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

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

طراحی صفحه حساب کاربری

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

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

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

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

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

در انتها می توانید صفحه را ذخیره کنید و پیش نمایش را مشاهده کنید.

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

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
متوسط

035-essay

زمان آموزش :
18 دقیقه

فهرست مطالب

Avatar
sashazz در 16:49

سلام من به نتیجه نرسیدم برای اضافه کردن منو باید تو قالب ها چه برگه ای ایجاد کنم به صورت بخش باشه یا این که به صورت تکی باشه

پاسخ
Avatar
sashazz در 16:33

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

پاسخ
المنتور فارسی
المنتور فارسی در 22:22

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

پاسخ
Avatar
sashazz در 18:23

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

پاسخ
المنتور فارسی
المنتور فارسی در 18:25

قالب در بخش برگه ها نباید طراحی شود، باید در بخش قالب ها طراحی شود و از همان بخش هم ویرایش شود.

پاسخ
Avatar
sashazz در 18:30

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

پاسخ
المنتور فارسی
المنتور فارسی در 18:42

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

پاسخ
Avatar
sashazz در 17:29

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

پاسخ
المنتور فارسی
المنتور فارسی در 17:55

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

پاسخ
Avatar
sashazz در 18:12

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

پاسخ
المنتور فارسی
المنتور فارسی در 18:24

این مورد رو داخل تیکت ارسال کنید تا بتونیم بررسی کنیم.

پاسخ
Avatar
sashazz در 18:39

مرسی ممنون تیکت ارسال میکنم حتما

siavash mohamadi
siavash mohamadi در 14:30

ببخشید تگ عنوان رو از کجا باید تغییر بدم؟
این هم بگم من کد نویسی نمیدونم.

پاسخ
siavash mohamadi
siavash mohamadi در 01:27

عنوان post title هست ولی نمایش داده نمیشه

پاسخ
المنتور فارسی
المنتور فارسی در 15:46

تگ HTML عنوان رو تغییر بدید. روی span قرار بدید و مجدد تست کنید.

پاسخ
siavash mohamadi
siavash mohamadi در 21:11

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

پاسخ
المنتور فارسی
المنتور فارسی در 00:02

با سلام
تگ عنوان صفحه که در بالای محتوای صفحه قرار دادید چیه ؟

پاسخ
Avatar
محمد حسین در 12:49

سلام ممنون از آموزش های شما ببخشید آموزش طراحی پاورقی دیجی کالا را آموزش نمی دهید

پاسخ
المنتور فارسی
المنتور فارسی در 12:59

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

پاسخ
میلاد خانی
میلاد خانی در 20:00

سلام.واقعا حرفه ای تر این دیگه نیس دمتون گرم فوق العاده بود 👌🌺

پاسخ
المنتور فارسی
المنتور فارسی در 22:14

با سلام
ممنون از شما

پاسخ

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

نیاز به کمک دارید؟ پیام دهید