فهرست مطالب
آیا به دنبال ایجاد یک سایدبار حرفهای با آیکونهای تعاملی، شبیه به آنچه در وبسایت دیجی کالا میبینید، برای سایت خود هستید؟ سایدبار دیجی کالا یک نوار کناری هوشمند است که به جای دستهبندی، شامل آیکونهای مهمی است که با کلیک بر روی هر یک، یک پنجره اختصاصی باز میشود.
اگر خاطرتان باشد در بخش آموزش ساخت صفحه محصول به شما در مورد این بخش بطور کامل توضیح دادیم ، در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور، به شما آموزش ساخت سایدبار دیجی کالا با المنتور را با استفاده از ویجت آف کنواس (Off-Canvas) ارائه میدهیم. این روش به شما اجازه میدهد تا یک رابط کاربری مدرن و کارآمد بسازید که دسترسی به قابلیتهای کلیدی سایت را برای کاربران فوقالعاده آسان میکند.
سایدبار دیجی کالا چه امکاناتی دارد ؟
سایدبار آیکونی یا سایدبار ثابت، یک نوار کناری است که به جای نمایش لیستهای طولانی، از آیکونهای کوچک برای نمایش قابلیتهای اصلی سایت استفاده میکند. این سایدبار معمولاً به صورت چسبان (Sticky) طراحی میشود تا همیشه در دسترس کاربر باشد. با کلیک بر روی هر آیکون، یک پنجره جانبی به نام آف کنواس باز میشود که محتوای مربوطه را نمایش میدهد. این رویکرد به ویژه در فروشگاههای آنلاین مانند دیجی کالا، برای بهبود تجربه کاربری (UX) و جلوگیری از شلوغی رابط کاربری (UI) بسیار مؤثر است.
گام به گام: طراحی سایدبار دیجی کالا با ویجتهای آف کنواس
برای ساخت سایدبار دیجی کالا با المنتور به روش دیجی کالا، ابتدا باید برای هر آیکون، یک قالب آف کنواس جداگانه بسازیم.
گام ۱: ساخت قالبهای آف کنواس (پنجرههای جانبی)
- در پیشخوان وردپرس، به “المنتور” > “قالبها” بروید و روی “اضافه کردن جدید” کلیک کنید.
- نوع قالب را “Pop-up” انتخاب کرده و برای هر پنجره یک نام مشخص انتخاب کنید (مثلاً “آف کنواس علاقهمندیها” یا “آف کنواس مقایسه کالا”).
- با ورود به محیط ویرایش المنتور، برای هر آیکون یک پنجره آف کنواس جداگانه طراحی کنید.
- با کلیک بر روی آیکون علاقهمندی، پنجرهای باز میشود که امکان افزودن محصول به لیست علاقهمندیهای کاربر را فراهم میکند.
- با کلیک بر روی آیکون اشتراکگذاری، پنجرهای باز میشود که شامل لینک صفحه برای اشتراکگذاری در شبکههای اجتماعی است.
- با کلیک بر روی آیکون اطلاعرسانی شگفتانگیز، پنجرهای باز میشود که کاربر میتواند اطلاعات خود را برای دریافت نوتیفیکیشن درباره تخفیفهای ویژه وارد کند.
- با کلیک بر روی آیکون نمودار قیمت، پنجرهای باز میشود که روند تغییرات قیمت محصول را نمایش میدهد.
- با کلیک بر روی آیکون مقایسه کالا، پنجرهای باز میشود که به کاربر امکان مقایسه این محصول با سایر محصولات را میدهد.
- در تنظیمات پاپآپ، از قسمت “Advanced” و “Entrance Animation”، یک انیمیشن ورود از سمت راست (مانند “Slide In Right”) انتخاب کنید تا شبیه به پنجرههای دیجی کالا شود.
- پس از اتمام طراحی، قالب را ذخیره کرده و این فرآیند را برای هر یک از آیکونها تکرار کنید.
گام ۲: طراحی ساید بار دیجی کالا
- مجدداً به “المنتور” > “قالبها” بروید و یک قالب جدید از نوع “سایدبار” (Sidebar) ایجاد کنید.
- در محیط ویرایش المنتور، یک بخش (Section) با یک ستون ایجاد کنید.
- ویجت “آیکون” (Icon) یا “دکمه” (Button) را به ستون بکشید و آیکون مورد نظر را برای آن انتخاب کنید.
- تولتیپ (Tooltip): برای نمایش توضیح هر آیکون هنگام قرار گرفتن ماوس روی آن، میتوانید از کد CSS سفارشی استفاده کنید.
- اتصال به آف کنواس: در تنظیمات ویجت آیکون، به قسمت “Link” بروید و از بخش “Dynamic Tags” گزینه “off-canvas” را انتخاب کنید. سپس از لیست کشویی، قالبی را که در مرحله قبل ساختهاید (مثلاً “آف کنواس علاقهمندیها”) انتخاب کنید.
- این مراحل را برای تمام آیکونها تکرار کنید.
نتیجهگیری
با استفاده از این راهنمای جامع، شما میتوانید سایدبار دیجی کالا با المنتور را به صورت حرفهای و با قابلیتهای پیشرفته مانند ویجت آف کنواس و تولتیپ ایجاد کنید. این روش نه تنها ظاهر سایت شما را مدرنتر و کاربرپسندتر میکند، بلکه با بهبود ناوبری و دسترسی سریع به عملکردهای کلیدی، به طور مستقیم به افزایش فروش و بهبود تجربه کاربری (UX) منجر میشود. با کمی خلاقیت در طراحی قالبهای آف کنواس، میتوانید یک سایدبار کاملاً منحصربهفرد برای وبسایت خود داشته باشید.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
