به جلسه شانزدهم بخش طراحی سایت با المنتور از دوره رایگان وردپرس خوش آمدید. یکی از مهمترین کارهایی که در طراحی صفحات با المنتور انجام می‌دهیم، صفحه آرایی و ایجاد اسکلت صفحه است. یک ساختمان را در نظر بگیرید. برای اینکه مستحکم و ساختارمند باشد، یک سازه قدرتمند و البته متناسب با نیاز، می‌طلبد. در المنتور نیز باید بتوانید با استفاده از کانتینر که دو حالت فلکس‌باکس و گرید دارد، صفحه آرایی مناسبی انجام دهید. در این مقاله از آژانس نوآوری رسام قصد داریم به آموزش کانتینر المنتور بپردازیم. پس از شما دعوت میکنیم تا پایان این مقاله ما را همراهی کنید.
ساختار Flexbox و Grid از کجا آمده است؟
فلکس باکس چیست؟ در پاسخ به این سوال باید بگوییم اگر با برنامه‌نویسی فرانت و به‌طور خاص، با html-css آشنایی داشته باشید، ماژول فلکس‌باکس (Flexbox) و گرید (Grid)، بخشی از css برای صفحه آرایی است. قبلاً از روش‌هایی مانند float و inline-block استفاده می‌شد که لزوماً در هر جایی روش خوبی نبودند. حال این ساختار بروزتر، در css و به‌طور کل در برنامه‌نویسی فرانت مورد استفاده قرار می‌گیرد. اما ارتباط آن با المنتور چیست؟ به تصویر زیر دقت کنید. این ساختار دقیقاً همان فلکس‌باکس و گریدی هست که شما در برنامه‌نویسی دارید. البته قرار نیست اینجا کد بزنیم. شما بدون کد نویسی نیز می‌توانید از این دو ساختار صفحه آرایی در المنتور استفاده کنید.
در صورتی که با html-css آشنایی دارید و دوست داشتید با ساختار کدنویسی فلکس‌باکس و گرید هم آشنا شوید، می‌توانید به سایت css-tricks.com مراجعه کنید. برای هر دو مورد، در این سایت یک راهنمای کامل یا اصطلاحاً Complete Guide وجود دارد. افزون بر این، یک فایل داکیومنت محور برای هرکدام وجود دارد که در صورت تمایل می‌توانید آنها را دانلود کنید.
مشاهده راهنمای کامل و دانلود داکیومنت از flexbox
مشاهده راهنمای کامل و دانلود داکیومنت از grid
به این نکته توجه داشته باشید که شما بدون دانش html-css و بدون مطالعه داکیومنت‌های بالا نیز می‌توانید با المنتور و صفحه آرایی آن کار کنید و طراحی سایت خود را به بهترین شکل ممکن پیاده سازی کنید. محتوای بالا صرفاً برای مطالعه بیشتر و طیف مخاطبان برنامه‌نویسی فرانت درج شده است و فعلاً اگر html-css کار نکردید می‌توانید از آنها صرف‌نظر کنید.
درج ساختار فلکس‌باکس و گرید در المنتور
هنگامی که صفحه‌ای را با ویرایشگر المنتور باز کنید، بدیهی است که با تعدادی ویجت یا همان ابزارک مواجه خواهید شد. در صدر لیست گزینه‌های کانتینر و شبکه وجود دارد. منظور از کانتینر اینجا همان حالت فلکس‌باکس است. به تصویر سمت راست دقت کنید. هر گزینه را مدنظر داشتید می‌توانید آنها را با ماوس گرفته و به محیط خالی آن صفحه بکشید.
همچنین اگر به تصویر سمت چپ دقت کنید، داخل محیط صفحه نیز اگر روی گزینه + کلیک کنید، با این دو گزینه مواجه خواهید شد که در واقع فرقی با تصویر سمت راست ندارد. مجدد تکرار میکنم که کانتینر در تصویر سمت راست همان فلکس‌باکس در تصویر سمت چپ است.
صفحه آرایی با فلکس‌باکس و المنتور، مهمترین بخش از آموزش المنتور
در این جلسه از دوره رایگان طراحی سایت با وردپرس و خصوصاً محتوای ویدئویی آموزش کانتینر المنتور، تفاوت ساختار فلکس‌باکس، گرید و شیوه استفاده از آنها را بررسی کردیم. دقت داشته باشید که پایه و اساس طراحی سایت با المنتور، صفحه آرایی است. پیشنهاد میکنم این ویدئو را دو بار ببینید و حتماً دو ساعت برای تمرین و تسلط به آن اختصاص دهید. به دلیل این که اگر همین جلسه را به خوبی بیاموزید، سایر موضوعات در المنتور بسیار برای شما آسان خواهد بود. سوالات و تجربیات خود را حتماً با متخصصین آژانس نوآوری رسام در میان بگذارید.
19 پاسخ
با سلام مجدد
منظورم از حذف کردن این است که وقتی جدا کننده را انتخاب میکنیم دیگه نمیشه اون را حذف کرد یعنی باید از کلید ctrl+z استفاده کرد و به عقب برگریدم -یعنی ابزاری برای این کار انگار نداره؟
درود بر شما. وقت شما بخیر
الان متوجه شدم که در واقع می‌خواهید برگردونیدش به حالتی که جداکننده ندارد. مثل قبلش. چرا میشه و این نکته خاصی ندارد. هر موردی که انتخاب فرمودید رو مجدد روش کلیک کنید حذف میشه. من الان تستش هم کردم. قبلا طراحی اش به صورت لیستی بود. اخیرا اون رو به این شکل گذاشته که بهتر هم شده. باعث میشه طرح‌اش رو قبل از اعمال ببینیم.
موفق باشید.
با سلام
خیلی عالی. ممنون و سپاس از جنابعالی
با سلام خدمت استاد گرامی
در قسمت استایل کانتینر، در قسمت جدا کننده، اگر یک نمونه از جداکننده ها چه از بالا و چه از پایین انتخاب کنیم اجرا میشه و خیلی هم خوب-ولی سوال اینجاست که اگر بخواهیم اون را حذف کنیم ابزاری در اون قسمت موجود نیست و خیلی گشتم که جدا کننده انتخاب شده را حذف کنم نشد؟
با تشکر فراوان
درود بر شما. وقت شما بخیر
جداکننده‌ها را میشه معکوس هم استفاده کرد. همچنین میشه لایه بالا را هم رنگ زمینه‌اش رو یکنواخت بزنیم با سکشن پائین‌تر. ترکیب این دو، ما را به چیزی که می‌خواهیم می‌رسونه. اما اگر اون مقدار مدنظر قصد دارید حذف بشه و حتی با این دو موضوع که گفتم هم نشد، از ماسک‌های المنتور در تب پیشرفته هم میشه استفاده کرد. اگر بازم نتیجه نده راحت با کد css میشه اون ماسک مدنظر رو درست کنیم و نواحی که نمی‌خواهیم رو حذف کنیم و یا نگه داریم. در واقع ماسک المنتور هم در تب پیشرفته همین کار را می‌کنه.
موفق باشید.
سلام و درود بر شما جناب حمداللهی. برای محتوای عالیتون که هر مبحث را انقدر عالی و کامل تدریس می‌کنید که جای سوالی باقی نمیمونه. به دوستان خودم و هر عزیزی که از به هر شکلی این محتوا را می‌بینند پیشنهاد میکنم دوره را به طور کامل ببیند. تولید همچین اثر فاخری کار آسانی نیست به شما خداقوت عرض می کنم. ارادتمندم.
درود بر شما جناب شفیعی عزیز. وقت شما بخیر
سپاسگزارم از پیام ارزشمند شما. با شناختی که بنده دارم از شما، کلا همیشه در یادگیری، پیگیر و پرتلاش هستید. به نظرم سراغ هر دوره‌ای که بروید از آن نتیجه خواهید گرفت. چون با دقت و پرتلاش، ادامه می‌دهید و توقف نمی‌کنید. تبریک به شما.
موفق باشید.
سلام وقتتون بخیر.
من امروز با سایت‌تون آشنا شدم. آموزش این جلسه رو که دیدم خیلی خوب بود، واقعا دوست داشتم. لازم شد برم از جلسه اول ببینم بیام جلو.
بابت تدریس خیلی ممنون. خدا خیرتون بده و همیشه پیروز و سربلند باشید.
درود بر شما، وقت بخیر
سپاس از لطف و مهربانی شما. امیدوارم محتوای دوره‌ها کمک کننده و مفید واقع بشود.
موفق باشید.
سلام
اگر قبلا سایتی با طراحی قدیمی طراحی کرده باشیم این امکان رو داره که اون رو روی ساختار جدید بیاریم(کانتینر شبکه و فلکس باکس)؟
چجوری این کار رو میشه انجام داد؟
سپاس بابت ویدیوهای مفیدتون
درود بر شما. وقت بخیر
بله می‌شود. ابتدای همین جلسه ویدئویی این موضوع رو بیان کردم. در نیمه اول ویدئو. در واقع اگر ساختار سکشن و بخش داخلی باشد، باید زیرش کانتینر طراحی کنیم و آنها را داخل کانتینر بندازیم. قبل از این کار هم باید حتما از تنظیمات المنتور، قسمت کانتینر و شبکه‌ای را فعال کرد. (داخل ویدئو هست و نشان داده‌ام).
موفق باشید.
سلام استاد وقت شما به خیر
جا داره که ابتدا به خاطر تدریس عالی و کامل شما تشکر کنم و پیوسته تندرست و موفق باشید.
سوالی داشتم، من در بخش طرح بندی کانتینر، قسمت عرض محتوا (جعبه ای و تمام عرض) را متوجه نمیشم که فرقشون چیه و اینکه چه زمانی باید از کدام عرض محتوا استفاده کرد؟ ممنون میشم راهنمایی بفرمایید.
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی شما. تمام عرض زمانی استفاده می‌شود که شما قصد دارید عناصر را به اطراف صفحه بچسبانید. مثلا فرض کنید می‌خواهید یک باکس زمینه آبی بیاندازید. اگر بخواهیم کل عرض صفحه را آبی کند باید آن را تمام عرض کنیم که صرفاً باکس کانتینر را رنگی نکند و از اول تا آخر عرض آن کانتینر رنگی بشود.
موفق باشید.
سلام استاد بنده نسخه پرو را از سایتی که گفتید خریدم اما هر کار میکنم موقع بروز رسانی ارور میده همیشه هم ارور رجیستر میده ؟
درود بر شما. وقت بخیر
این سایت‌ها همگی بخش پشتیبانی فنی دارند. پاسخ می‌دهند اگر کاربران‌شان به مشکلی بخورند.
من یک مورد خریداری کردم مشکلی نیست و بروزرسانی از مخزن وردپرس را دارد.
موفق باشید.
خیلی عالی بسیار ممنون از آموزشتون
درود بر شما. وقت بخیر
سپاس از لطف و همراهی شما.
موفق باشید.
ممنون از آموزش خوبتون
درود بر شما. وقت بخیر
سپاسگزارم از لطف و توجه شما