وبلاگ

طراحی سایت جدا برای موبایل، تبلت، دسکتاپ در المنتور

طراحی سایت جدا برای موبایل، تبلت، دسکتاپ در المنتور

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

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

منظور از سایت جدا برای موبایل، تبلت، دسکتاپ در المنتور چیست؟

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

? مقالات مرتبط را حتما ببینید :

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

✔ نکته بسیار مهم
برای طراحی جدا باید حتما یک هدر برای 3 پلتفرم ایجاد کنید و فوتر و صفحه هم به همین شکل باید صورت بگیرد. یعنی هدر، فوتر، صفحه برای هر یک از دستگاه ها باید جدا طراحی گردد.

مرحله اول : ساخت بخش هدر سایت

در این مرحله ما یک هدر طراحی می کنیم و البته این هدر ما 3 طراحی جدا دارد و باید هر 3 طرح را در همین صفحه ایجاد کنید. برای این کار ابتدا به منوی قالب ها » پوسته ساز بیایید.

ساخت هدر جدا برای سایت
ساخت هدر جدا برای سایت

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

[irinfobox]دقت داشته باشید که این آموزش ها به صورت ویدئو هست و باید حتما ویدئوی آموزشی در انتهای مقاله را مشاهده کنید تا بتوانید با ریز تنظیمات و تکنیک ها آشنا شوید.[/irinfobox]

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

اطلاعات هدر جدا برای هر بخش در المنتور
اطلاعات هدر جدا برای هر بخش در المنتور

تا اینجا ما باید توانسته باشیم تا 3 عدد هدر جدا برای پلتفرم ها با روش بالا طراحی کنیم و در ادامه باید فوتر هم به همین روال ایجاد کنید و همه مراحل شبیه به مرحله اول هست.

مرحله دوم : ساخت بخش فوتر سایت

در این مرحله هم باید یک صفحه فوتر برای سایت ایجاد کنید (برای هر پلتفرم یه فوتر) برای این کار در پیشخوان وردپرس به مسیر قالب ها » پوسته ساز بیایید.

طراحی فوتر جدا برای پلتفرم ها
طراحی فوتر جدا برای پلتفرم ها

سپس بر روی افزودن جدید کلیک کنید و در صفحه باز شده تنظیمات را همانند تصویر بالا انجام دهید و در انتها بر روی دکمه “ایجاد قالب” کلیک کنید تا بتوانید صفحه ویرایشگر المنتور را مشاهده کنید.

استایل بندی فوتر جدا برای سایت در المنتور
استایل بندی فوتر جدا برای سایت در المنتور

سپس در این بخش باید همانند تصویر بالا یک فوتر برای موبایل، تبلت، و حالت دسکتاپ طراحی کنید و با استفاده از ساختار تصویر بالا تنظیمات نمایش را انجام دهید. (حتما برای آموزش بهتر ویدئوی آموزشی را مشاهده کنید.)

مرحله سوم : ساخت صفحه و یا بخش مورد نظر

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

? حتما موارد زیر را در طراحی مد نظر قرار دهید :

  • هدر برای 3 پلتفرم جدا طراحی شود در یک صفحه
  • فوتر هم برای 3 پلتفرم باید به صورت جدا طراحی شود اما در یک صفحه
  • صفحه و یا بخش مورد نظر با محتوای جدا (تبلت، موبایل، دسکتاپ)
ساخت سایت جدا برای موبایل، تبلت و دسکتاپ
ساخت سایت جدا برای موبایل، تبلت و دسکتاپ

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

فیلم آموزشی

https://www.youtube.com/watch?v=DTU8ylsqYg4
1.7/5 - (7 امتیاز)
اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

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

در خدمت شما هستیم!

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