آموزش کانتینر فلکس‌باکس و شبکه در المنتور

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

ساختار Flexbox و Grid از کجا آمده است؟

فلکس باکس چیست؟ در پاسخ به این سوال باید بگوییم اگر با برنامه‌نویسی فرانت و به‌طور خاص، با html-css آشنایی داشته باشید، ماژول فلکس‌باکس (Flexbox) و گرید (Grid)، بخشی از css برای صفحه آرایی است. قبلاً از روش‌هایی مانند float و inline-block استفاده می‌شد که لزوماً در هر جایی روش خوبی نبودند. حال این ساختار بروزتر، در css و به‌طور کل در برنامه‌نویسی فرانت مورد استفاده قرار می‌گیرد. اما ارتباط آن با المنتور چیست؟ به تصویر زیر دقت کنید. این ساختار دقیقاً همان فلکس‌باکس و گریدی هست که شما در برنامه‌نویسی دارید. البته قرار نیست اینجا کد بزنیم. شما بدون کد نویسی نیز می‌توانید از این دو ساختار صفحه آرایی در المنتور استفاده کنید.

در صورتی که با html-css آشنایی دارید و دوست داشتید با ساختار کدنویسی فلکس‌باکس و گرید هم آشنا شوید، می‌توانید به سایت css-tricks.com مراجعه کنید. برای هر دو مورد، در این سایت یک راهنمای کامل یا اصطلاحاً Complete Guide وجود دارد. افزون بر این، یک فایل داکیومنت محور برای هرکدام وجود دارد که در صورت تمایل می‌توانید آن‌ها را دانلود کنید.

مشاهده راهنمای کامل و دانلود داکیومنت از flexbox
مشاهده راهنمای کامل و دانلود داکیومنت از grid

به این نکته توجه داشته باشید که شما بدون دانش html-css و بدون مطالعه داکیومنت‌های بالا نیز می‌توانید با المنتور و صفحه آرایی آن کار کنید و طراحی سایت خود را به بهترین شکل ممکن پیاده سازی کنید. محتوای بالا صرفاً برای مطالعه بیشتر و طیف مخاطبان برنامه‌نویسی فرانت درج شده است و فعلاً اگر html-css کار نکردید می‌توانید از آن‌ها صرف‌نظر کنید.

درج ساختار فلکس‌باکس و گرید در المنتور

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

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

صفحه آرایی با فلکس‌باکس و المنتور، مهمترین بخش از آموزش المنتور

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