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

طراحی سایدبار در وردپرس
خانه » مقالات وردپرس » آموزش طراحی سایدبار سایت با المنتور

آموزش طراحی سایدبار (sidebar) در وردپرس با افزونه قدرتمند المنتور

بخش های کناری یک سایت را سایدبار (sidebar) می نامند. در واقع سایدبار یا نوار کناری در وردپرس همان نوار افقی در کنار صفحات است.

طراحی سایدبار یکی از بخش هایی است که در ظاهر سایت شما تاثیر خوبی خواهد داشت.

اکثر سایت ها از سایدبار استفاده می کنند.

طرحی یک ساید بار زیبا به شما کمک می کند ظاهر متفاوتی را برای سایت یا فروشگاه اینترنتی خود ایجاد کنید.

در Sidebar چه چیزاهایی را قرار دهیم؟

محتوای سایدبار یا همان نوار کناری می تواند هرچیزی باشد. مانند:

لیست مطالب

آخرین نوشته های سایت

لیستی از برگه های مهم سایت

نماد های اعتماد

تبلیغات و …

سایدبار مانند لوگو و header در تمام مطالب سایت و هر صفحه ای که کاربر باز کند به صورت ثابت نمایش داده می شود و محتوای ثابتی دارد.

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

چگونه با استفاده از المنتور یک سایدبار طراحی کنیم

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

ابتدا افزونه المنتور فارسی را نصب و فعال سازی کنید.

پیشنهاد می کنیم ابتدا مقاله کار با المنتور را مطالعه کنید تا در این آموزش آمادگی بیشتری داشته باشید.

در صفحه پیشخوان وردپرس روی گزینه قالب ها>افزودن جدید کلیک کنید.

در پنجره ای که برای شما باز می شود تنظیمات را به صورت زیر اعمال کنید.

نوع قالب را بر روی تکی، نوع پست را بر روی نوشته و در گزینه آخر یک اسم برای سایدبار تنظیم کنید.

روی CREATE TEMPLATE (ایجاد قالب) کلیک کنید تا قالب ایجاد شود.

تعیین کردن نوع قالب در طراحی المنتور سایدبار
ویرایش سایدبار

صفحه ای که برای شما باز می شود، صفحه ویرایشگر زنده المنتور است. با انتخاب دکمه + در وسط صفحه، ساختار سایدبار را مشخص کنید. از ردیف اول گزینه اول از سمت چپ را کلیک کنید.

11 صفحه مهم هر سایت که باید طراحی شود
>>

بعد از انتخاب آن گزینه صفحه شما به دو بخش تقسیم می شود. بخش سمت چپ ۳۰ درصد صفحه و سمت راست ۷۰ درصد صفحه است. محتوای شما در قسمت بزرگتر و سایدبار در قسمت کوچکتر یعنی سمت چپ قرار می گیرد.

در سمت راست محتوای دلخواه خود را وارد کنید.

در سمت چپ برای ایجاد sidebar می توانید از تمامی المان های موجود در المنتور استفاده کنید.

هر المانی که برای گذاشتن در سایدبار مد نظرتان است را انتخاب کنید و با کشیدن و رها کردن Drag & Drop به سمت چپ اضافه کنید.

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

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

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

در نسخه انگلیسی المنتور در این صفحه Include را به معنای شامل شدن و exclude به معنای شامل نشدن است.

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

المان Post Contant (محتوای پست) یکی از المان های موجود در قالب نوشته تکی می باشد.

کاربرد این المان نمایش محتوای انواع نوشته ها در قالب است.

مدیریت sidebar در منوی پیشخوان وردپرس
تنظیمات مربوط به طراحی sidebar
ویجت های طراحی سایدبار

آموزش ساخت سایدبار با افزونه Custom Slidebars

ابزارهای زیادی برای ساخت سایدبارهای سفارشی در وردپرس وجود دارند.

این پلاگین را نصب و فعال کنید.

در قسمت Appearance>ابزارک ها در صفحه داشبورد یک نام انتخاب کنید و توضیحی برای سایدبار بنویسید.

افزودنی جدید شما در قسمت Custom Sidebars ظاهر می شود.

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

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

همه چیز در مورد الگوهای طراحی رابط کاربری
>>

برای اصلاح این کار به قسمت Custom Slidebars بروید و در بخش Appearance> Widgets، ساید باری که می خواهید به سایت خود اضافه کنید را روی Sidebar Location قراردهید.

در مرحله آخر به یاد داشته باشید که همه تغییرات خود را ذخیره کنید.

حرف آخر

در طراحی سایدبار سفارشی گزینه های زیادی برای طراحی و ویرایش آن دارید.

طراحی سایدبار به خصوص به صورت سفارشی می تواند تغییرات بسیار زیبایی را در سایت شما به وجود آورد.

همچنین کاربران در پیمایش سایت شما بسیار آسان تر عمل می کنند.

علاوه بر همه این ها ساخت سایدبار در وردپرس با استفاده از افزونه ها کار بسیار آسانی است و نیازی به کدنویسی های html و css ندارید .فقط لازم است کمی خلاقیت به خرج دهید.

خلاق و موفق باشید 🙂

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *