طراحی صفحات ریسپانسیو در المنتور از صفر تا صد

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

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

طراحی ریسپانسیو در المنتور یعنی چی

ریسپانسیو یا واکنش‌گرا یعنی ظاهر صفحه خودش رو با عرض نمایشگر هماهنگ کنه. مثلاً سه کارت که روی لپ‌تاپ کنار هم هستن، روی تبلت می‌تونن دوتایی و روی موبایل زیر هم دیده بشن. هدف این نیست که نسخه دسکتاپ رو به‌زور داخل صفحه کوچک جا بدید؛ هدف اینه که کاربر روی هر دستگاهی محتوا رو راحت بخونه و با صفحه کار کنه.

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

توی این آموزش با اصطلاح Breakpoint (نقطه شکست) هم روبه‌رو می‌شید. نقطه شکست یک عرض مشخصه که با رسیدن صفحه به اون، چیدمان وارد حالت دیگه‌ای مثل تبلت یا موبایل می‌شه. لازم نیست برای شروع عددهای پیچیده حفظ کنید؛ حالت‌های آماده المنتور بیشتر نیازهای معمول رو پوشش می‌دن.

قبل از شروع طراحی صفحات ریسپانسیو در المنتور

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

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

همه گزینه‌های المنتور تنظیم جداگانه برای هر دستگاه ندارن. گزینه‌ای که کنار خودش آیکون دسکتاپ، تبلت یا موبایل داره، معمولاً واکنش‌گراست و می‌تونید مقدارش رو برای هر حالت جدا کنید. گزینه‌ای که چنین آیکونی نداره، یک تنظیم عمومی هست و تغییرش ممکنه روی همه دستگاه‌ها اثر بذاره.

مسیر دقیق بعضی تنظیمات به نوع عنصری بستگی داره که انتخاب کردید. بعد از انتخاب کانتینر یا ابزارک، معمولاً تنظیمات رو در تب‌های Layout (چیدمان)، Style (استایل) و Advanced (پیشرفته) می‌بینید. گزینه‌هایی مثل Direction (جهت)، Wrap (شکستن سطر) و Width (عرض) بیشتر در Layout (چیدمان) هستن. Padding (فاصله داخلی) و Margin (فاصله خارجی) رو هم معمولاً در Advanced (پیشرفته) پیدا می‌کنید. ممکنه ترجمه بعضی گزینه‌ها با توجه به نسخه فارسی وردپرس یا فایل ترجمه المنتور کمی فرق داشته باشه؛ پس اگه عین همین عبارت رو ندیدید، به نام انگلیسی و کاربرد گزینه هم توجه کنید.

ورود به حالت واکنش‌گرا در المنتور

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

1. از پیشخوان وردپرس وارد برگه‌ها ← همه برگه‌ها بشید و برای صفحه موردنظرتون روی ویرایش با المنتور کلیک کنید.
2. در نوار بالای ویرایشگر، گزینه پیش‌نمایش دستگاه‌ها رو باز کنید و بین حالت‌های دسکتاپ یا لپ‌تاپ، تبلت و موبایل جابه‌جا بشید. با انتخاب هر حالت، پیش‌نمایش صفحه با عرض همون دستگاه نمایش داده می‌شه.
3. عرض پیش‌نمایش رو تغییر بدید و فقط به یک اندازه ثابت اکتفا نکنید. ممکنه صفحه در پیش‌نمایش موبایل المنتور درست باشه ولی در یک موبایل باریک‌تر مشکل پیدا کنه.

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

طراحی نسخه دسکتاپ صفحه

اول اسکلت اصلی صفحه رو در حالت دسکتاپ بسازید. یک کانتینر اصلی برای هر بخش ایجاد کنید و عناصر مرتبط رو داخل اون بذارید. برای نمونه، بخش معرفی می‌تونه یک کانتینر برای متن و یک کانتینر برای تصویر داشته باشه. این ساختار بعداً تغییر جهت و ترتیب عناصر در موبایل رو خیلی راحت‌تر می‌کنه.

Width (عرض) محتوا رو طوری تنظیم کنید که متن‌ها روی نمایشگرهای بزرگ بیش‌ازحد کشیده نشن. بعد تراز عناصر، فاصله بین اون‌ها و Padding (فاصله داخلی) کانتینر رو تنظیم کنید. Padding (فاصله داخلی) فضای داخل جعبه و Margin (فاصله خارجی) فضای بیرون جعبه هست. بهتره بیشتر فاصله‌های هر بخش رو از کانتینر اصلی کنترل کنید تا مجبور نشید برای تک‌تک ابزارک‌ها Margin (فاصله خارجی) متفاوت بذارید.

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

طراحی نسخه تبلت در المنتور

حالت تبلت رو از نوار بالای المنتور انتخاب کنید و صفحه رو از بالا تا پایین ببینید. توی این مرحله معمولاً لازم نیست همه‌چیز رو از نو بسازید. بیشتر کار شما اصلاح جهت کانتینرها، عرض عناصر، فاصله‌ها و اندازه نوشته‌هاست.

تنظیم چیدمان کانتینرها برای تبلت

کانتینر موردنظرتون رو انتخاب کنید و در تب Layout (چیدمان) سراغ Direction (جهت) برید. Direction (جهت) قرارگرفتن عناصر رو مشخص می‌کنه. مقدار Row (ردیف) عناصر رو کنار هم و مقدار Column (ستون) اون‌ها رو زیر هم می‌چینه. اگه چهار کارت دارید، لازم نیست همیشه اون‌ها رو تک‌ستونه کنید؛ می‌تونید با Width (عرض) مناسب، دو کارت رو در هر ردیف نگه دارید.

گزینه Wrap (شکستن سطر) مشخص می‌کنه عناصر وقتی جا ندارن به خط بعد برن یا نه. مثلاً برای چهار کارت، Wrap (شکستن سطر) رو فعال کنید و Width (عرض) هر کارت رو نزدیک نصف فضای قابل استفاده بذارید تا دو ردیف دوتایی بسازید. فاصله بین کارت‌ها رو هم حساب کنید؛ دو عنصر با عرض ۵۰ درصد و یک فاصله اضافه ممکنه کنار هم جا نشن.

تنظیم فاصله و اندازه عناصر در تبلت

بعد از چیدمان، کانتینر یا ابزارک رو انتخاب کنید و در تب Advanced (پیشرفته)، Padding (فاصله داخلی) و Margin (فاصله خارجی) رو بررسی کنید. فاصله ۸۰ پیکسلی که روی دسکتاپ خوب دیده می‌شه شاید در تبلت فضای زیادی بگیره. آیکون دستگاه کنار این گزینه‌ها رو انتخاب کنید و فقط مقدار تبلت رو تغییر بدید.

اندازه نوشته، ارتفاع خط و فاصله بین عنوان و متن رو هم کنترل کنید. دکمه‌ها باید متن کامل و محدوده لمس مناسبی داشته باشن. فرم‌ها، تصاویر و ویدئوها هم نباید از Width (عرض) کانتینر بیرون بزنن. اگه یک تصویر کوچک و تار شده، به‌جای کشیدن اون تا عرض کامل، عرض منطقی‌تری براش انتخاب کنید.

طراحی نسخه موبایل در المنتور

حالا حالت موبایل رو انتخاب کنید و دوباره کل صفحه رو بررسی کنید. تنظیمات واکنش‌گرایی که برای تبلت تعیین کردید معمولاً در موبایل هم استفاده می‌شن، مگر اینکه برای موبایل مقدار جداگانه‌ای بذارید. برای همین بهتره همیشه ترتیب کارتون دسکتاپ، تبلت و بعد موبایل باشه.

تبدیل چیدمان چندستونه به تک‌ستونه

در بیشتر بخش‌ها بهتره کانتینر رو انتخاب کنید، وارد تب Layout (چیدمان) بشید و Direction (جهت) رو برای موبایل روی Column (ستون) بذارید تا عناصر زیر هم قرار بگیرن. Width (عرض) کانتینرها و ابزارک‌های اصلی رو روی تمام فضای قابل استفاده تنظیم کنید. اگه هنوز بخشی باریک دیده می‌شه، عرض کانتینر والد و فرزند رو جداگانه بررسی کنید.

با گزینه Order (ترتیب) در تنظیمات چیدمان عنصر می‌تونید ترتیب نمایش عناصر رو عوض کنید. مثلاً در دسکتاپ تصویر سمت راست و متن سمت چپ هست، ولی در موبایل می‌خواید عنوان و دکمه قبل از تصویر دیده بشن. Order (ترتیب) این کار رو بدون ساخت نسخه تکراری از محتوا انجام می‌ده. فقط ترتیب نهایی رو از نظر خوانایی و منطق محتوا بررسی کنید.

بهینه‌کردن متن و دکمه‌ها برای صفحه کوچک

نوشته موبایل نباید اون‌قدر کوچک باشه که کاربر مجبور بشه صفحه رو بزرگ‌نمایی کنه. عنوان‌ها رو متناسب با عرض صفحه تنظیم کنید و ارتفاع خط کافی بذارید. اگه یک کلمه بلند یا آدرس اینترنتی از صفحه بیرون می‌زنه، اول Width (عرض) عنصر و تنظیم شکستن متن رو بررسی کنید.

دکمه‌ها و لینک‌های مهم باید راحت لمس بشن. Padding (فاصله داخلی) دکمه رو طوری تنظیم کنید که محدوده لمس مناسبی بسازه و بین دو دکمه کنار هم فاصله بذارید. متن دکمه هم بهتره کوتاه و روشن باشه؛ عبارتی مثل «دریافت مشاوره» از یک جمله بلند و چندخطی خواناتر هست.

مخفی‌کردن عناصر غیرضروری در موبایل

عنصر موردنظرتون رو انتخاب کنید و در تب Advanced (پیشرفته)، بخش Responsive (واکنش‌گرا) رو باز کنید. از اونجا می‌تونید نمایش عنصر رو برای یک دستگاه غیرفعال کنید. این قابلیت برای تزئینات شلوغ یا یک تصویر تکراری مفیده، ولی محتوای اصلی، عنوان مهم، لینک ضروری یا دکمه خرید رو صرفاً برای خلوت‌شدن صفحه مخفی نکنید.

پنهان‌کردن تعداد زیادی عنصر می‌تونه مدیریت صفحه رو سخت کنه. قبل از این کار ببینید آیا با تغییر Direction (جهت)، Width (عرض) یا فاصله‌ها مشکل حل می‌شه یا نه. بهتره یک ساختار سبک و منعطف داشته باشید تا چند نسخه جدا و تکراری از یک بخش.

تنظیم نقطه‌های شکست در المنتور

Breakpoint (نقطه شکست) همون عرضیه که المنتور در اون چیدمان رو وارد حالت دستگاه دیگه می‌کنه. حالت‌های اصلی دسکتاپ، تبلت و موبایل برای بیشتر صفحه‌ها کافی هستن. اگه طراحی شما برای لپ‌تاپ کوچک، موبایل عریض یا نمایشگر خیلی بزرگ به کنترل جدا نیاز داره، در ویرایشگر المنتور منوی تنظیمات سایت رو باز کنید، وارد Layout (چیدمان) بشید و بخش Breakpoints (نقطه‌های شکست) رو پیدا کنید. از این بخش می‌تونید نقطه‌های شکست اضافه رو فعال یا مقدار اون‌ها رو تنظیم کنید.

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

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

رفتار تنظیمات واکنش‌گرا بین دستگاه‌ها

المنتور مقدار تنظیمات واکنش‌گرا رو بر اساس ترتیب نقطه‌های شکست و از نمایشگرهای بزرگ‌تر به حالت‌های کوچک‌تر منتقل می‌کنه. در حالت‌های اصلی، مقداری که برای دسکتاپ می‌ذارید معمولاً در تبلت و موبایل هم استفاده می‌شه. مقدار تبلت هم معمولاً به موبایل می‌رسه، ولی تنظیم اختصاصی موبایل روی تبلت و دسکتاپ اثر نمی‌ذاره. اگه نقطه‌های شکست اضافه رو فعال کردید، هر حالت مقدار نزدیک‌ترین نمایشگر بزرگ‌تر رو می‌گیره؛ مگر اینکه برای خودش مقدار جدا بذارید.

این رفتار فقط برای گزینه‌هایی کاربرد داره که کنترل دستگاه دارن. اگه کنار گزینه آیکون دستگاه نمی‌بینید، اون گزینه احتمالاً عمومی هست. قبل از تغییر هر مقدار، دستگاه انتخاب‌شده در نوار بالا و آیکون کنار همون گزینه رو چک کنید تا تنظیم بخش اشتباهی رو تغییر ندید.

اگه برای موبایل عددی گذاشتید و بعد می‌خواید دوباره مقدار حالت بزرگ‌تر به اون منتقل بشه، مقدار اختصاصی موبایل رو پاک یا Reset (بازنشانی) کنید. فقط نوشتن دوباره عدد قبلی ارتباط انتقال مقدار رو برنمی‌گردونه؛ باید مقدار اختصاصی اون دستگاه حذف بشه.

ریسپانسیوکردن سایت‌های قدیمی المنتوری

اگه صفحه قدیمی شما با Section (بخش) و Column (ستون) ساخته شده، لازم نیست فوری همه‌چیز رو حذف کنید. همون بخش یا ستون رو انتخاب کنید، وارد تنظیمات Layout (چیدمان) بشید و Width (عرض) ستون رو برای تبلت و موبایل تغییر بدید. مثلاً چهار ستون ۲۵ درصدی دسکتاپ می‌تونن در تبلت ۵۰ درصد و در موبایل ۱۰۰ درصد عرض داشته باشن.

این روش برای تعمیر سریع صفحه‌های قدیمی مناسبه، ولی برای بخش‌های جدید بهتره از کانتینر استفاده کنید. کانتینر کنترل مستقیم‌تری برای Direction (جهت)، Wrap (شکستن سطر)، Order (ترتیب) و فاصله بین عناصر می‌ده. راهنمای تبدیل بخش‌های قدیمی به کانتینر هم مسیر کلی تبدیل رو توضیح می‌ده.

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

رفع مشکلات رایج ریسپانسیو در المنتور

بیرون‌زدگی افقی صفحه در موبایل

اگه صفحه به چپ و راست حرکت می‌کنه، یک عنصر از عرض نمایشگر بزرگ‌تر شده. Width (عرض) ثابت تصاویر، Margin (فاصله خارجی) منفی، کانتینر عریض، نوشته بدون شکست یا ابزارک سفارشی می‌تونه علت باشه. برای عیب‌یابی، بخش‌ها رو یکی‌یکی در پیش‌نمایش مخفی کنید تا عنصر مشکل‌ساز پیدا بشه؛ بعد دوباره نمایش بخش رو فعال کنید و Width (عرض) اون رو به حالت نسبی یا تمام عرض قابل استفاده تغییر بدید. یادتون نره قبل از انتشار مطمئن بشید هیچ بخش ضروری فقط برای پیدا‌کردن مشکل مخفی نمونده.

فاصله‌های خیلی زیاد یا نامنظم

اول Padding (فاصله داخلی) کانتینر والد و بعد Margin (فاصله خارجی) ابزارک‌ها رو بررسی کنید. گاهی فاصله از هر دو بخش اعمال شده و روی موبایل دو برابر دیده می‌شه. برای فاصله‌های اصلی یک روش ثابت داشته باشید و مقدار مخصوص موبایل رو روی گزینه دارای آیکون دستگاه وارد کنید.

روی‌هم‌افتادن متن، تصویر و دکمه

Position (موقعیت) روی Absolute (مطلق)، ارتفاع ثابت و Margin (فاصله خارجی) منفی از علت‌های رایج هستن. Absolute (مطلق) یعنی عنصر از جریان عادی صفحه بیرون میاد و روی بخش‌های دیگه قرار می‌گیره. اگه استفاده از اون ضروری نیست، موقعیت رو به حالت عادی برگردونید و ارتفاع کانتینر رو روی حالت خودکار بذارید.

نمایش نامناسب منو و هدر

Width (عرض) لوگو، فاصله دکمه‌ها و تنظیم نقطه شکست منو رو بررسی کنید. منوی دسکتاپ معمولاً روی موبایل به منوی بازشونده تبدیل می‌شه. خود هدر رو هم در قالب‌ساز المنتور باز کنید؛ ویرایش محتوای صفحه، تنظیمات یک هدر جداگانه رو تغییر نمی‌ده.

کوچک‌شدن بیش‌ازحد نوشته‌ها

اندازه متن موبایل رو از بخش Typography (تایپوگرافی) بررسی کنید. Typography (تایپوگرافی) یعنی تنظیمات ظاهری نوشته مثل اندازه، وزن و فاصله خطوط. اگه واحد اندازه بر پایه عرض صفحه انتخاب شده، ممکنه متن روی نمایشگر خیلی باریک بیش‌ازحد کوچک بشه. در این حالت یک اندازه خوانا و مشخص برای موبایل انتخاب کنید.

اعمال‌نشدن تغییرات بعد از انتشار

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

تست نهایی صفحه ریسپانسیو

1. صفحه رو در پیش‌نمایش دسکتاپ، تبلت و موبایل المنتور از بالا تا پایین بررسی کنید.
2. ابزار توسعه‌دهنده مرورگر رو باز کنید، حالت نمایش دستگاه رو فعال کنید و عرض صفحه رو کم‌کم تغییر بدید.
3. صفحه منتشرشده رو حداقل روی یک موبایل و در صورت دسترسی روی یک تبلت واقعی ببینید.
4. منوها، فرم‌ها، لینک‌ها و دکمه‌ها رو واقعاً لمس کنید و فقط به ظاهر اون‌ها نگاه نکنید.
5. خوانایی متن، اندازه تصاویر و سرعت بازشدن صفحه موبایل رو بررسی کنید. تصاویر خیلی سنگین می‌تونن تجربه کاربر رو خراب کنن، حتی اگه چیدمان کاملاً درست باشه.

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

چک‌لیست طراحی صفحات ریسپانسیو در المنتور

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

یادگیری طراحی سایت با دوره رایگان المنتور میهن وردپرس

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

توی این دوره پروژه‌هایی مثل طراحی سایت دیجی‌کالا، اپل و اتریوم آموزش داده شدن. برای نمونه، می‌تونید آموزش طراحی سایت دیجی‌کالا با المنتور، طراحی هدر سایت اپل با المنتور و طراحی سایت اتریوم رو ببینید. انجام این پروژه‌ها کمک می‌کنه مهارت‌های لازم برای طراحی بخش‌های مختلف سایت‌های متنوع رو قدم‌به‌قدم تمرین کنید.

جمع‌بندی

برای طراحی صفحات ریسپانسیو در المنتور، اول یک ساختار تمیز با کانتینر بسازید و بعد تنظیمات رو از دسکتاپ به تبلت و موبایل پیش ببرید. Direction (جهت)، Wrap (شکستن سطر)، Width (عرض) و Order (ترتیب) چیدمان رو کنترل می‌کنن و Padding (فاصله داخلی)، Margin (فاصله خارجی) و Typography (تایپوگرافی) ظاهر هر دستگاه رو مرتب می‌کنن.

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

سؤال‌های پرتکرار

تیم تولید محتوا

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