ایجاد یک منوی سایدبار خلاقانه با المنتور

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

میخواین که به فضای عمودی بیشتری در وب سایت وردپرس خودتون دسترسی داشته باشین؟  یک تجربه پیمایشی همه جانبه برای کاربرانتون ایجاد کنین؟ یک منوی سایدبار چسبناک چاره کار شماست.

با استفاده از این نوع منو، میتونید به جای استفاده از منوی افقی سنتی از منو و ناوبری عمودی چسبنده سایدبار بهره ببرید.

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

منوی چسبنده سایدبار چیه؟

برخلاف یک هدر چسبنده سنتی یا کوچک که به صورت افقی در بالای سایت شما قرار می گیره، یک هدر سایدبار چسبنده فضای عمودی رو در سمت چپ یا راست سایت شما اشغال میکنه.

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

منوی سایدبار استیکی به طور پیش فرض به این صورته:

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

فوائد منوی چسبنده سایدبار المنتور

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

همچنین یک تجربه پیمایشی جالب برای کاربرانه که در هر لحظه میتونن به منوی ناوبری دسترسی داشته باشن.

برای ایجاد منوی استیکی سایدبار در المنتور به چه چیزهایی نیاز دارین؟

باید چند تا الگو رو با همدیگه ترکیب کنین:

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

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

چطوری منوی سایدبار چسبنده ایجاد کنیم؟

1. هدر سایت رو در دسک تاپ و لپ تاپ مخفی کنید.

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

میتونین از الگوهای موجود در افزونه المنتور پرو هم استفاده کنین ما در این مطلب از الگوی Digital Agancy استفاده کردیم.

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

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

2. یک الگو برای ناوبری سایدبار ایجاد کنید.

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

برای ایجاد الگوی خودتون، به قسمت قالبساز المنتور در داشبورد خود برین:

• به تب Single برین.
• روی افزودن جدید کلیک کنین.
• بخش رو انتخاب کنین.
• نام اون رو  Sticky Side-Nav Header بذارین.

نکته مهم:
توجه کنین که بخش ایجاد کردیم، هدر ایجاد نکردیما نگین نگفتی.

تنظیمات بخش

اول یک بخش جدید با یک ستون ایجاد کنین. در بخش تنظیمات Layout، بخش رو طبق توضیحات زیر پیکربندی کنین:

عرض محتوا: عرض کامل
ارتفاع:حداقل ارتفاع: 100 VH (هدر سایدبار شما رو طوری تنظیم میکنه که 100٪ از ارتفاع عمودی رو به خودش اختصاص بده)
موقعیت ستون: کشیده
برچسب Header : Html (این گزینه اختیاریه، اما پیکربندی این قسمت برای SEO خوبه)

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

تنظیمات ستون

نوبت تنظیمات ستونه:

در زبانه طرح بندی، کشویی تراز عمودی رو برابر با فاصله بینابینی کنین.
در برگه پیشرفته، یک پدینگ 50 px به پایین ستون اضافه کنین.

اضافه کردن ویجت

حالا وقتشه که  ابزارک ها رو برای نمایش در منوی سایدبار اضافه کنین. برای مثال:

• یک آرم
• نمادی برای باز کردن منوی کام
• آیکون های اجتماعی را دنبال کنید.

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

لوگوی سایت

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

آیکن

نماد منوی بازشو رو با استفاده از ابزارک آیکن اضافه کنین. برای مثال من از نماد Bars استفاده کردم. با این حال، میتونین هر آیکونی یا فایل لاتی در المنتور بکار ببرین. فقط مطمئن بشین که بازدیدکنندگان میتونن به وضوح درک کنن که با کلیک روی این گزینه منو باز میشه.

رنگها رو هم متناسب کنین، یادتون نره.

آیکن شبکه های اجتماعی

با استفاده از ابزارک Social Icons میتونین هر تعداد شبکه اجتماعی که میخواین اضافه کنین. همچنین میتونین اشکال و رنگ ها رو متناسب با تم سایت پیکربندی کنین.

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

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

3. یک الگو برای برگه با سایدبار ایجاد کنین.

حالا یک الگوی برگه در المنتور باید ایجاد کنیم که سایدبار داشته باشه.

برای انجام این کار، به الگوهای قالبساز المنتور برین:

• به برگه Single برین.
• روی افزودن جدید کلیک کنین.
• به عنوان نوع الگو، Single Page رو انتخاب کنین.
• نام اونرو Fixed Side-Nav بذارین.

در ویرایشگر المنتور، بخشی با دو ستون ایجاد کنین:

ستون سمت چپ – نوار کناری چسبنده رو نگه می داره.
ستون سمت راست – شامل محتوای عادی سایت شماست.

تنظیمات ستون سمت راست

برای افزودن محتوای عادی خود به ستون سمت راست، ابزارک های محتوای مورد نیاز سایت رو اضافه کنین. احتمالاً Post Title و Post Content و همچنین هر ابزارک دیگری که لازمه اضافه کنین.

تنظیمات ستون سمت چپ

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

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

تنظیمات فاصله و طرح بندی ستون

در حال حاضر، سایدبار شما 50٪ از صفحه رو اشغال میکنه. برای برطرف کردنش، ستون سمت چپ بهمراه سایدبار رو انتخاب کنین و عرض ستون رو برابر با 5٪ در برگه Layout قرار بدین. به اینصورت ستون سمت راست بطور خودکار 95% میشه.

حالا، برای تکمیل کارها، باید CSS سفارشی اضافه کنین:

• تنظیمات ستون سمت چپ را باز کنین.
• به برگه پیشرفته برین.
• CSS زیر رو در کادر Custom CSS جایگذاری کنین.

selector {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 60px;
    margin-left: 0px;
    padding: 0px;
    margin-top: 0px;
    z-index: 10000;
}

این CSS چند کار انجام میده:

سایدبار رو با تنظیم عرض برابر با 60 پیکسل همیشه باریک نگه میداره. در صورت تمایل این عدد را مطابق با تنظیمات سیایتتون تنظیم کنین، فقط زیاد از 60 پیکسل فاصله نداشته باشین.
سایدبار رو همیشه ثابت نگه میداره.
پنجره ناوبری کامل رو که در مرحله بعدی ایجاد میکنیم، با تنظیم z-index برابر با 10،000، در زیر سایدبار قرار میده.

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

4. یک پاپ آپ برای منوی ناوبری ایجاد کنین.

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

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

آموزش پاپ آپ منو در المنتور رو هم میتونین ببیننی.

برای شروع، یک قالب پاپ آپ با نام Sliding Nav بسازین.

تنظیمات قالب پاپ آپ

تنظیمات پاپ آپ رو با کلیک روی نماد چرخ دنده در گوشه پایین سمت چپ باز کنین و مانند زیر پیکربندی کنین:

عرض: 450px
ارتفاع: متناسب با صفحه
موقعیت افقی: چپ
همپوشانی: پنهان کردن (خاموش)
انیمیشن ورودی: اسلاید به سمت چپ
انیمیشن خروجی: اسلاید به سمت چپ

برای اطمینان از اینکه پنجره پاپ آپ موقع باز شدن در سمت راست سایدبار ظاهر بشه، باید حاشیه اضافه کنین:

به برگه پیشرفته برین.
تنظیمات حاشیه رو پیدا کنین.
60 پیکسل به سمت چپ اضافه کنین (یا ممکنه سمت راست رو انتخاب کرده باشین).
در قسمت پدینگ هم 20 پیکسل اضافه کنین.

منوی ناوبری شما

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

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

5. تنظیم آیکن سایدبار برای پاپ اپ منو

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

• برای اینکار در قالبساز المنتور الگوی بخشی که ساخته بودیم رو در ویرایشگر المنتور باز کنین.
• نماد پیمایش برای پاپ اپ رو انتخاب کنین.
• بر روی گزینه Dynamic Tags برای پیوند کلیک کنین.
• در گزینه ها پاپ اپ رو انتخاب کنین.
• حالا روی نماد آچار کلیک کنین.
• عملکرد روی گزینه Toggle Popup باشه.
• از منوی کشویی بعدی هم نام پاپ آپ رو انتخاب کنین.

حالا باید الگوی بخش رو آپدیت کنین.

6.تست کنید و لذت ببرید.

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

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

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

هم منوی خلاقانه و جذابتری داشته باشین، هم با منوی سایدبار چسبنده فضای بیشتری برای محتوا داشته باشین. همین امروز شروع کنین.

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

دموی آماده المنتور