Skip Navigation Links.

تم‌ها

ساخت محتوای تب بندی شده / Responsive Tabs

افزونه‌ی Responsive Tabs یک ماژول سبک، واکنش‌گرا و چندمنظوره برای نمایش محتوای تب‌بندی‌شده در وب‌سایت‌های مبتنی بر DNN است. این افزونه با هدف سازماندهی بهتر اطلاعات، کاهش شلوغی صفحات و بهبود تجربه کاربری طراحی شده و به‌صورت خودکار تب‌ها را در دستگاه‌های کوچک به حالت آکاردئون تبدیل می‌کند.

ویژگی‌ها

طراحی واکنش‌گرا

تب‌ها در دسکتاپ به‌صورت افقی یا عمودی و در موبایل به‌صورت آکاردئون نمایش داده می‌شوند.

پشتیبانی از چند مجموعه تب

امکان استفاده از چند ماژول تب به‌صورت هم‌زمان بدون تداخل.

سازگاری با مرورگرهای مدرن

عملکرد صحیح در Chrome، Firefox، Safari، Edge و IE7+.

پشتیبانی از چند زبان

امکان ترجمه عنوان تب‌ها و محتوای داخلی برای سایت‌های چندزبانه.

قابلیت سفارشی‌سازی

تنظیم رنگ، فونت، موقعیت تب‌ها و افکت‌های حرکتی با استفاده از CSS یا تنظیمات داخلی.

پشتیبانی از تب‌های افقی و عمودی

انتخاب نوع نمایش تب‌ها بر اساس نیاز طراحی.

تبدیل خودکار به آکاردئون

در دستگاه‌های موبایل، تب‌ها به‌صورت آکاردئون نمایش داده می‌شوند.

سازگاری با قالب‌های DNNGo و EasyDNN

عملکرد روان در قالب‌های مدرن و تجاری.

نحوه عملکرد

نصب افزونه:

1. دریافت فایل نصب از DNN Store یا وب‌سایت توسعه‌دهنده (مانند DNNGo یا CMSDNNModule).

2. ورود به پنل مدیریت DNN و نصب از بخش Extensions.

3. افزودن ماژول Responsive Tabs به صفحه‌ی دلخواه.

ساخت تب‌ها:

1. ورود به بخش مدیریت ماژول.

2. افزودن عنوان و محتوای هر تب (HTML، متن، تصویر یا ماژول دیگر).

تنظیمات نمایش:

1. انتخاب نوع تب (افقی یا عمودی).

2. تعیین رنگ، فونت، افکت حرکتی و موقعیت تب‌ها.

3. فعال‌سازی حالت آکاردئون برای موبایل.

ذخیره و تست عملکرد:

1. ذخیره تنظیمات و بررسی نمایش تب‌ها در مرورگرهای مختلف و دستگاه‌های همراه.

توصیه‌های حرفه‌ای

برای صفحات طولانی، از تب‌های عمودی استفاده کنید تا فضای بیشتری برای محتوا فراهم شود.
در سایت‌های چند زبانه، از توکن‌های زبانی برای ترجمه عنوان تب‌ها و محتوای داخلی بهره ببرید.
برای بهبود SEO، از محتوای متنی قابل ایندکس در تب‌ها استفاده نمایید.
در صفحات فرود، از تب‌هایی با محتوای خلاصه و لینک به جزئیات استفاده کنید تا نرخ تبدیل افزایش یابد.
برای هماهنگی با طراحی سایت، از قالب‌های سفارشی یا تنظیمات CSS اختصاصی استفاده نمایید.
درخواست دمو

راهنمای تصویری کار با این افزونه

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

نصب افزونه‌ی Responsive Tabs از طریق بخش Extensions و افزودن به صفحه.

فرم افزودن عنوان و محتوای تب با قابلیت انتخاب نوع محتوا.

انتخاب نوع تب (افقی یا عمودی)، رنگ، فونت و افکت‌های حرکتی.

نمایش تب‌ها به‌صورت آکاردئون در دستگاه‌های همراه برای تجربه کاربری بهتر.

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

سوالات متداول

افزونه Responsive Tabs چه کاربردی دارد و برای چه نوع سایت‌هایی مناسب است؟

افزونه Responsive Tabs یک ماژول سبک و واکنش‌گرا برای نمایش محتوای دسته‌بندی‌شده در قالب تب‌های افقی یا عمودی است که در دستگاه‌های مختلف به‌صورت آکاردئون نمایش داده می‌شود. این افزونه برای صفحات سوالات متداول، مستندات، راهنماها، مقالات و هر نوع محتوایی که نیاز به سازماندهی بصری دارد، مناسب است.

نحوه نصب و راه‌اندازی افزونه چگونه است؟

برای نصب، فایل افزونه را از منابع معتبر مانند DNNGo یا DNN Store دریافت کرده و از طریق بخش Extensions در پنل مدیریت DNN نصب نمایید. پس از نصب، ماژول را به صفحه دلخواه اضافه کرده و از طریق تنظیمات، تب‌ها، موقعیت، افکت‌ها و رنگ‌بندی را پیکربندی کنید. نیازی به کدنویسی نیست و رابط کاربری افزونه کاملاً گرافیکی است.

آیا افزونه با نسخه‌های جدید DNN و مرورگرهای مدرن سازگار است؟

بله، افزونه‌های معتبر مانند Smart Tabs یا Tabs Pro با نسخه‌های DNN 7.x، 8.x، 9.x و حتی 10.x سازگار هستند. همچنین در مرورگرهای رایج مانند Chrome، Firefox، Safari و Edge عملکرد روانی دارند و طراحی آن‌ها واکنش‌گراست، یعنی در موبایل و تبلت نیز به‌درستی نمایش داده می‌شوند.

آیا امکان تبدیل تب‌ها به آکاردئون در موبایل وجود دارد؟

کاملاً. افزونه Responsive Tabs به‌صورت خودکار در نقاط شکست (Breakpoints) تعریف‌شده، تب‌ها را به آکاردئون تبدیل می‌کند تا تجربه کاربری در دستگاه‌های کوچک بهینه شود. این ویژگی از طریق تنظیمات CSS و جاوااسکریپت داخلی افزونه فعال است و نیازی به تنظیمات پیچیده ندارد.

در صورت بروز خطا یا عدم نمایش صحیح تب‌ها، چه اقداماتی باید انجام داد؟

ابتدا بررسی کنید که قالب سایت با جاوااسکریپت افزونه تداخل نداشته باشد. سپس مطمئن شوید که نسخه jQuery مورد نیاز (حداقل 1.7.0) در سایت فعال است. در صورت استفاده از چند ماژول تب در یک صفحه، توصیه می‌شود از شناسه‌های (ID) متفاوت برای هر ماژول استفاده شود تا تداخل ایجاد نشود.

آیا امکان سفارشی‌سازی ظاهر تب‌ها و افکت‌های نمایشی وجود دارد؟

بله، افزونه از قالب‌های آماده و قابلیت طراحی سفارشی با استفاده از jQuery Theme Roller پشتیبانی می‌کند. همچنین می‌توانید رنگ، فونت، افکت‌های نمایشی مانند Slide یا Fade، موقعیت تب‌ها (بالا، پایین، چپ، راست) و حتی آیکون‌ها را تنظیم کنید تا با طراحی سایت هماهنگ شود.

تفاوت افزونه Responsive Tabs با ماژول‌های مشابه مانند Accordion یا Tabs Pro چیست؟

Responsive Tabs تمرکز ویژه‌ای بر تطبیق‌پذیری در دستگاه‌های مختلف دارد و تب‌ها را به‌صورت خودکار به آکاردئون تبدیل می‌کند. در مقابل، افزونه‌هایی مانند Accordion فقط ساختار آکاردئونی دارند و Tabs Pro امکانات پیشرفته‌تری مانند نمایش ماژول‌های داخلی، پشتیبانی از URL سفارشی، و ادغام با Google Analytics را ارائه می‌دهد. انتخاب بین آن‌ها بستگی به نیاز طراحی و سطح کنترل مورد نظر شما دارد.