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

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

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

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

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

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

• آموزش کامل واکنش گرایی (رسپانسیوی) در المنتور
• ساخت سربرگ سفارشی در المنتور با JetBlock

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

فیلم آموزشی