آیلین وب

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

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

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

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

10 دیدگاه دربارهٔ «ساخت منوی کاربری سفارشی در هدر سایت با المنتور + فیلم آموزشی»

  1. سلام.ممنون بابت آموزش خوبتون
    من میخوام کلیدی داشته باشم به نام ورود/ثبت نام تا کاربر از اون قسمت بتونه وارد بشه یا ثبت نام کنه و بعد همون کلید بعد از ثبت نام یا ورود کاربر تبدیل بشه به نام کاربر و داخل دراپ بار هم اطلاعاطی از کاربر باشه
    آیا چنین چیزی با این آموزش شدنی هست؟چطور میتونم اینکار رو بکنم؟
    ممنون میشم راهنماییم کنید.

    1. بله میشه همچین کاری رو کرد و باید از افزونه Visibility Logic for Elementor استفاده کنید و 2 تا دکمه متفاوت ایجاد کنید و از از کاربران وارد شده مخفی کنید و یا به کاربران وارد شده نمایش دهید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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