سفارش تبلیغ
صبا ویژن

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

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

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

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

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

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

  • افزونه المنتور پرو
  • افزونه PowerPack
  • افزونه Menu Icons (رایگان در مخرن وردپرس)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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