آموزش ایجاد و طراحی سایدبار

سایدبار و ویجت‌های آن، یکی از بخش‌های مهم هر سایت محسوب می‌شود زیرا این بخش، باعث فروش یا افزایش بازدید می‌شود، با طراحی درست این بخش، می‌توانیم آمار سایت را بهبود ببخشیم.

سایدبار چیست و به کدام بخش از سایت گفته می‌شود؟

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

ایجاد Sidebar با المنتور

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

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

بنابراین قالبی از نوع بخش انتخاب و برای آن یک نام تنظیم می‌کنیم. (نام وارد شده مهم است زیرا بعداً باید به کمک همین نام، سایدبار فراخانی شود)

طراحی سایدبار

سایدبار برای ایجاد حس راحتی به کاربر و افزایش بازدید سایت است بنابراین باید ویجت‌هایی در آن قرار بگیرد که هم کاربر به آن نیاز داشته باشد و هم برای سئو سایت مفید باشد.

برخی از مواردی که می‌تواند در این محدوده قرار بگیرد:

1. می‌توانید بنر تبلیغاتی را در ابتدای Sidebar قرار دهید.
2. نمایش ۵ تا ۱۰ پست و مقاله قبلی
3. نمایش چند محصول پرفروش یا دوره خاص
4. شبکه‌های اجتماعی خود را با کاربران به اشتراک بگذارید
5. شما می‌توانید در این بخش، اطلاعات مهمی مثل ایمیل را درخواست کنید
6. فرم جستجو: برخی طراحان از فرم جستجو در سایدبار استفاده می‌کنند
7. فرم ورود به سایت: اگر وب‌سایتی دارید که ورود کاربر در آن موضوع مهمی هست، می‌توانید آن فرم را در این قسمت قرار دهید.

افزودن ویجت‌ها پرکاربرد به سایدبار

در این بخش می‌خواهیم طبق لیست بالا ویجت‌ها را اضافه کنیم

1. برای قراردادن بنرهای تبلیغاتی می‌توانید از ویجت تصویر استفاده نماید و حالت پیوند را فعال کنید تا کاربر بتواند بر روی آن کلیک کند.
2. برای نمایش نوشته‌های اخیر از ویجت نوشته‌ها استفاده نمایید (در جلسه طراحی صفحه اصلی از این ویجت در سایدبار استفاده کرده‌ایم و آموزش ویدیوی آن موجود است)
3. برای نمایش محصول خاص یا یک دوره، از ویجت محصولات استفاده نمایید.
4. شبکه‌های اجتماعی: ویجت آیکون شبکه‌های اجتماعی
5. برای درخواست ایمیل کاربر، از ویجت فرم المنتور پرو استفاده نمایید.
6. و ۷. ویجت‌های فرم جستجو و ورود با همین نام در المنتور وجود دارند.

توضیح تمامی بخش‌ها در ویدیو داده شده است.

قراردادن قالب بخش در Sidebar

بعد اضافه‌کردن ویجت‌ها به قالب بخش، نوبت به تنظیم محل قرارگیری آن می‌رسد. برای این کار وارد صفحه موردنظر شوید (هر صفحه‌ای که می‌خواهید این ویجت‌ها در آن نمایش داده شوند)

در مرحله بعد از بخش المان‌ها، ویجت قالب‌ را انتخاب کنید.

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

بیشتر بخوانید:
مشاهده جلسات دروه رایگان طراح شو در یوتیوب

چسبان کرد سایدبار

برای اینکه سایدبار شناور داشته باشید، (با اسکرول کردن، سایدبار ثابت و در طول مسیر در دید کاربر قرار می‌گیرد) ویجت قالب‌ها را به حالت انتخاب در بیاورد. (این ویژگی برای هر ویجتی قابل‌اجرا است)

1. از تب پیشرفته، افکت‌های حرکتی را انتخاب کنید و در این بخش چسبندگی را بر روی بالا تنظیم کنید.
2. چسبندگی فعال را برای صفحه‌نمایش‌هایی که Sidebar به ابتدای یا انتهای صفحه شکسته می‌شود را غیر فعال کنید. (مثل موبایل)
3. در مرحله آخر گزینه ماندن در ستون را فعال کنید تا سایدبار از محدوده اصلی خارج نشود. ۴-برای فاصله‌گذاری در هنگام اسکرول، بر طبق نیاز برای آن آفست تنظیم کنید.