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

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

user menu - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
ساخت منوی کاربری در المنتور

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

[message_box bg_color=”rgb(255, 113, 113)”] [row v_align=”middle” h_align=”center”] [col span__sm=”12″]

پیشنیاز های آموزش : 

  1. ساخت هدر در المنتور
  2. نمایش نام کاربر وارد شده در المنتور
[/col] [/row] [/message_box]

برای طراحی منوی کاربری در المنتور باید از افزونه های زیر استفاده کنید :

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

مطلب پیشنهادی :   ساخت بخش مقالات آموزشی و گالری تصویر در المنتور

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

میریم سراغ طراحی منوی کاربری در هدر سایت و میخواهیم تو این مرحله منوی اولیه رو طراحی کنیم.

ویرایش سربرگی که قبلا طراحی کردید

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

وقتی شما افزونه Element Pack رو نصب میکنید یک ابزارک با نام دراپ بار به ابزارک های المنتور اضافه میشه و شما باید این ابزارک رو همانند تصویر زیر پیدا کنید و در جای مورد نظر در هدر سایت قرار بدید.

account menu elementor dropbar - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
ابزارک دراپ بار در المنتور

وقتی المان رو در جا مورد نظر قرار دادید باید رو این ابزارک کلیک کنید تا تنظیمات براتون باز بشه. در این تنظیمات رو بخش محتوا برید و انتخاب منبع رو روی الگو المنتور قرار بدید. (همانند تصویر زیر)

account menu elementor dropbar setting - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
تنظیمات ابزارک دراپ بار

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

ساخت زیر منوهای منوی کاربری

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

ایجاد بخش جدید

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

section - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
ساخت سکشن در افزونه المنتور

ساخت محتوای منوها

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

مطلب پیشنهادی :   افزونه المنتور چیست + معرفی تمامی مزایای طلایی المنتور

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

account menu elementor list - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
لیست آیکون محتوای منوی کاربری

محتوای منو رو توی سربرگ قرار بدید

محتوای منویی که ساختید رو باید به المان دراپ بار متصل کنید و برای این مورد ادامه رو بخونید.

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

account menu elementor template - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
انتخاب منوی کاربری

شخصی سازی دکمه منوی کاربری

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

در منوی باز شده همانند تصویر زیر روی اطلاعات کاربر کلیک کنید.

account menu user - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
نمایش اطلاعات کاربر وارد شده

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

account menu user name - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
نمیش نام نمایشی کاربر در هدر سایت

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

مطلب پیشنهادی :   آموزش قدم به قدم ساخت سایدبار در المنتور
account menu hover - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
دکمه نام کاربری

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

account menu dropbar - ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی
استایل محتوای منوی دراپ بار

ویدئوی آموزشی

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

6 دیدگاه

  • Author's gravatar
    ملیکا 9th آوریل 2020 , 11:00 ب.ظ

    کاش موسیقی نذارید توی اموزش هاتون

    پاسخ
    • Author's gravatar
      محمود شعبانی 9th آوریل 2020 , 11:14 ب.ظ

      سلام
      توی آموزش های بعد صدای موزیک کم میشه و بهتر میکس میشه

      پاسخ
  • Author's gravatar
    سجاد 16th آوریل 2020 , 12:00 ق.ظ

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

    پاسخ
    • Author's gravatar
      محمود شعبانی 16th آوریل 2020 , 12:58 ق.ظ

      سلام دوست عزیز
      خواهش میکنم منتظر آموزش های بعدی باشید که قرار داده میشه 🧡❤

      پاسخ
  • Author's gravatar
    عليرضا 10th می 2020 , 4:06 ب.ظ

    داش اين منو سايت خودت وقتي اسكرول ميشه تغيير ميكنه, ميشه بگي از چي استفاده كردي؟

    پاسخ
    • Author's gravatar
      محمود شعبانی 13th می 2020 , 2:32 ق.ظ

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

      پاسخ

دیدگاهتان را بنویسید

مطالب داغ