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

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

در بسیاری از سایت های همانند سایت آیلین وب وقتی وارد سایت می شوید در هدر سایت میبینید که هم نام کابر رو وارد کرده و وقتی روی حساب کاربری یا نام خودتون میرید میبینید که یک منویی باز می شود که میتوانید در این منو به دانلودها، سفارشات، تیکت ها و … دسترسی داشته باشید. در اینآموزش کار با افزونه 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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