آموزش طراحی سایت

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

آموزش قدم به قدم ساخت سایدبار در وردپرس

ساخت ساید بار در وردپرس

برای ساخت سایدبار در قالب­ های مختلف دنیای وردپرس، در پیشخوان، زیرگروه “نمایشßابزارک­ ها” را انتخاب کنید. از بخش ابزارک­ های در دسترس، مواردی که می­خواهید در سایدبار نمایش داده شود را با درگ و دراپ(Drag&Drop) به بخش سایدبار منتقل کنید. در این روش، سایدبار پس از ایجاد به طور خودکار در همه صفحات سایت نمایش داده می­شود.

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

 

در قالب­ های زفایر و ایمپرزا امکانات حرفه­ ای تری برای طراحی سایدبار فراهم شده است.

برای طراحی سایدبار در قالب زفایر، در پیشخوان وردپرس، زیرگروه” ß Zephyr صفحات جدید” را انتخاب کرده و دکمه “اضافه کردن بلوک صفحه” را کلیک کنید.

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

در صفحه بعد برای سایدبار یک نام درنظر گرفته و با استفاده از ویرایشگر صفحه­ ساز ویژوال کامپوزر، و انتخاب المان ­ها در آن، سایدبار را طراحی کنید.

نوشته های مشابه

با توجه به این­که سایدبار به صورت یک نوار با عرض کم در کناره­ های سایت قرار می­گیرد، بهتر است المان ردیف که در صفحه ساز برای طراحی سایدبار اضافه می­ کنید ستون بندی نشود. از المان ­های باکس آیکون، تصویر، بلوک متن و… می­توانید برای ساخت سایدبار استفاده کنید. با توجه به طراحی کلی سایت، تنظیماتی مانند رنگ پس ­زمینه، نوع فونت، اندازه و… را برای المان ­ها تغییر دهید.

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

برای فراخوانی سایدبار درسایت، کافیست در هر صفحه­ ای که می­خواهید سایدبار در آن نمایش داه شود. المان “صفحه بلوک” را اضافه کرده و در صفحه تنظیمات آن نام سایدبار که طراحی کرده­ اید را انتخاب کنید.

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

سایدبار

همچنین برای قراردادن سایدبار در تمپلیت صفحات که نوشته­ ها و مقالات سایت در این قاب نمایش داده می­شوند . المان “بلوک صفحه” را به قالب محتوا اضافه کنید.در صفحه تنظیمات آن نام سایدبار را فراخوانی کنید. با این روش سایدبار جزئی از قالب محتوا شده و پس از فراخوانی قالب در نوشته­ های سایت، سایدبار نیز به همراه قالب نماش داده می­شود.

آموزش ساخت قالب صفحات

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

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

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

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

همچنین ببینید
بستن
دکمه بازگشت به بالا