جلسات آموزشی

دوره تخصصی UI باالمنتور

طراحی سایدبار در المنتور

نویسنده : ایران المنتور
12 دیدگاه
آخرین بروزرسانی : 19 شهریور, 1400

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

Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

آنچه در این مطلب می خوانید

ایجاد و توسعه ساید بار

بهترین راه برای ساخت ساید بار، ایجاد آن با استفاده از قالب های Single خواهد بود.

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

برای اینکار، یک ستون بر روی این بخش تعریف کرده و درون آن، از ابزارک table of content قرار می دهیم

برای اینکار بهتر است از table of content بهینه طراحی شده در بخش های قبل استفاده کنید.

فعالسازی چسبندگی

برای چسباندن ساید بار به برگه، گزینه sticky و stay in column را فعال کنید تا با اسکرول کردن، به صورت چسبیده، سایدبار نیز اسکرول شود.

فعالسازی share buttons

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

در بخش URL این ابزارک، میتوان انتخاب کرد که کابر، محتوای موجود(current page) را به اشتراک بگذارد و یا صفحه دلخواه (custom) با url که تعریف می کنید، را به اشتراک بگذارد.

در قسمت محتوا نیز میتوانید شبکه اجتماعی مد نظر خود را انتخاب کنید.

فعالسازی Sticky برای چند المان در ستون

فرض کنید در قسمت ساید بار، چندین المان را قرار داده و تمایل به نمایش آنها به صورت چسبنده دارید. برای این کار، دو روش وجود خواهد داشت:

فعالسازی چسبندگی برای سکشن

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

استفاده از قالب جدید

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

در بخشی که قصد استفاده از ساید بار را داریم، ابزارک Template را استفاده و درون آن، از قالب ساخته شده استفاده می کنیم. این ابزارک، به دلیل اینکه از جنس سکشن نیست، قابلیت فعالسازی sticky و stay in column را خواهد داشت و تمام المان ها درون آن، به صورت چسبنده، تا انتهای ستون نمایش داده خواهد شد.