افزودن مسیر راهنما صفحه Breadcrumbs المنتور(کد اسکرول داخلی)

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

افزودن اسکرول داخلی به Breadcrumbs در المنتور برای تجربه کاربری بهترآموزش افزودن مسیر راهنما صفحه Breadcrumbs در المنتور و تغییرات در استایل با کد اختصاصی برای اسکرول داخلی با استفاده از CSS سفارشی در باران سایت

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

Breadcrumbs چیست و چرا باید در سایت از آن استفاده کنیم؟

Breadcrumbs چیست؟

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

مثال از Breadcrumbs در سایت‌ها:

در یک سایت فروشگاهی ممکن است چنین مسیری را ببینید:

خانه > موبایل > سامسونگ > گلکسی S24

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

چرا باید در سایت از Breadcrumbs استفاده کنیم؟

استفاده از Breadcrumbs دلایل زیادی دارد که هم برای کاربران و هم برای سئو (SEO) مفید است. در ادامه، برخی از مهم‌ترین مزایای آن را بررسی می‌کنیم:

1. بهبود تجربه کاربری (UX)

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

2. بهینه‌سازی ساختار سایت

• سایت‌هایی که مسیرهای مشخص و منطقی دارند، بهتر درک می‌شوند.
• ساختار سلسله‌مراتبی سایت برای کاربران و گوگل واضح‌تر خواهد بود.

3. افزایش نرخ کلیک (CTR) در نتایج گوگل

• گوگل در بسیاری از مواقع مسیر Breadcrumbs را در نتایج جستجو نمایش می‌دهد.
• این کار باعث می‌شود کاربران متوجه شوند که سایت شما سازماندهی‌شده است.

4. بهبود سئو سایت

• گوگل از Breadcrumbs برای درک بهتر ساختار سایت استفاده می‌کند.
• تجربه کاربری بهتر، باعث کاهش نرخ پرش (Bounce Rate) و افزایش رتبه سایت می‌شود.
• وجود مسیرهای مشخص، زمان حضور کاربر در سایت را افزایش می‌دهد که یک سیگنال مثبت برای گوگل است.

5. سازگاری با موبایل و طراحی واکنش‌گرا (Responsive Design)

• در نمایش موبایلی، مسیرهای طولانی می‌توانند باعث به‌هم‌ریختگی صفحه شوند.
• اضافه کردن اسکرول داخلی به Breadcrumbs کمک می‌کند که این مشکل برطرف شود و در یک خط باقی بماند.

چگونه Breadcrumbs را در سایت فعال کنیم؟

اگر از وردپرس استفاده می‌کنید، می‌توانید از طریق المنتور یا افزونه‌هایی مانند Yoast SEO و Rank Math این قابلیت را فعال کنید. اما نمایش Breadcrumbs در المنتور گاهی به دلیل طولانی بودن متن، باعث شکستن خط و شلوغ شدن صفحه می‌شود. برای حل این مشکل، می‌توان اسکرول داخلی را به آن اضافه کرد که در ادامه آموزش آن را توضیح خواهیم داد.

حالا که با اهمیت Breadcrumbs آشنا شدی، بریم سراغ آموزش افزودن اسکرول داخلی به مسیر راهنما در المنتور!

چرا باید به Breadcrumbs اسکرول داخلی اضافه کنیم؟

استفاده از Breadcrumbs اسکرولی به‌جای حالت سنتی، مزایای زیادی دارد که در جدول زیر می‌توان آن را با حالت پیش‌فرض مقایسه کرد:

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

مرحله 1: افزودن المان Breadcrumbs به صفحه

1. وارد ویرایش صفحه با المنتور شوید.
2. در قسمت افزودن المان‌ها، Breadcrumbs را اضافه کنید.
3. موقعیت آن را در صفحه مشخص کنید.

مرحله 2: اضافه کردن CSS سفارشی برای اسکرول داخلی

المنتور به هر المان، یک کلاس selector اختصاص می‌دهد که می‌توان از آن برای استایل‌دهی استفاده کرد. برای ایجاد اسکرول افقی داخلی، این کد را در بخش CSS سفارشی المان قرار دهید:

selector {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #f4a261 #ffffff;
    padding-bottom: 5px;
}

selector::-webkit-scrollbar {
    height: 5px;
}

selector::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 5px;
}

selector::-webkit-scrollbar-thumb {
    background: #f4a261;
    border-radius: 5px;
}

مرحله 3: ذخیره و مشاهده تغییرات

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

مزایای داشتن Breadcrumbs اسکرولی برای سایت

1. بهبود تجربه کاربری (UX)

• کاربران می‌توانند مسیر خود را بهتر مشاهده کنند.
• دیگر نیازی به شکستن متن‌های طولانی نیست.
• مخصوصاً در موبایل، طراحی بهتری خواهد داشت.

2. مدیریت فضای صفحه

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

3. تأثیر مثبت در سئو (SEO)

• گوگل به تجربه کاربری اهمیت زیادی می‌دهد.
• نمایش واضح و منظم مسیر صفحه، ساختار سایت را بهبود می‌دهد.
• نرخ پرش (Bounce Rate) کاربران کاهش می‌یابد، چون می‌توانند راحت‌تر در سایت حرکت کنند.

سخن پایانی

اضافه کردن اسکرول داخلی به Breadcrumbs در المنتور باعث بهبود تجربه کاربری، زیبایی طراحی و سئو سایت می‌شود. اگر از المنتور استفاده می‌کنید، حتماً این قابلیت را به سایت خود اضافه کنید تا کاربران بتوانند راحت‌تر در سایت شما جابه‌جا شوند.

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