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

طراحی وب سایت ریسپانسیو

طراحی وب سایت ریسپانسیو

رسپانسیو چیست؟

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

طراحی یک کلید است

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

طراح اولیه را آماده کنید

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

reponsive-theme-layout

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

امکان حرکت سایدبار به پایین صفحه در صفحه نمایش های کوچک

همانطور که از عنوان پاراگراف مشخص است، خواهیم گفت که چگونه به سایدبار این امکان را دهیم تا در صفحه نمایش های کوچک تر در پایین صفحه نمایش داده شود. یکی از روش های رایج برای این کار استفاده از خاصیت @media در فایل style.css پوسته خود است. به کد زیر توجه نمایید:

کد بالایی در صفحه نمایش هایی که حداکثر عرض ۹۶۰px دارند اجرا خواهد شد و شما می توانید این مقدار را به هر اندازه صفحه ای تغییر دهید.

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

کد بالا یک نمونه استایل برای صفحه نمایش های با اندازه حداکثر ۹۶۰px است و شما می بایست این کد را مطابق طراحی خود تغییر دهید. برای مثال برای صفحه نمایش گوشی می توانید از کد زیر استفاده کرد:

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

درباره ی admin

محمد احمدی هستم، 6 سال در زمینه طراحی وب فعالیت دارم و به سیستم مدیریت محتوای وردپرس مسلط هستم. تیم دیناسافت نه تنها در زمینه طراحی وب، بلکه در زمینه های گرافیک، ابزارهای وبمستران نیز فعالیت دارد.

مطلب پیشنهادی

افزونه نمایش آب و هوا در وردپرس

سلام دوستان با آموزشی بسیار خاص از وردپرس همراه شما هستم که کمتر میتوانید آن …

پاسخ دهید

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