افزونه Layout Grid Block

By سمانه حسین زاده آموزش وردپرس, طراحی سایت

افزونه Layout Grid Block

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

تیم Automattic، به عنوان بخشی از پروژه Block Blocker خود، پلاگین Layout Grid Block را منتشر کرده است. این افزونه در اصل یک نسخه تقویت شده از بلوک اصلی ستون است. تفاوت عمده این است که تراز بندی ستون به یک نقطه خاص در شبکه می رسد که به آن Breakpoint یا نقطه شکست گفته می شود. البته نقطه شکست پاسخگو یک موضوع پیشرفته است. شما بدون نگرانی در مورد آن می توانید از افزونه Layout Grid استفاده کنید زیرا شبکه از نقاط شکست پیش فرض استفاده می کند. این شبکه هنگام ویرایش پست در پس زمینه هم نمایش داده می شود.

افزونه Layout Grid Block یک چیدمان مبتنی بر ستون با قابلیت سفارشی سازی عرض و موقعیت ستون را فراهم می کند. همچنین با استفاده از این افزونه می توانید محتوای خود را در یک شبکه چیدمان کلی در همه پست ها قرار دهید.

توجه داشته باشید که برای استفاده از این افزونه باید از ویرایشگر گوتنبرگ وردپرس به عنوان ویرایشگر نوشته/برگه خود استفاده کنید.

آموزش افزونه Layout Grid Block و ایجاد طرح بندی مبتنی بر ستون رسپانسیو در هر صفحه وردپرس

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

شبکه (grid) یک مکانیسم طراحی لایوت است که از تعدادی خط که به آن خط شبکه (Grid line) گفته می شود، تشکیل شده است. تعداد خط های شبکه توسط دستگاه مشاهده کننده (دسکتاپ، تبلت یا موبایل) به صورت زیر تعیین می شوند:

12 خط شبکه برای دسکتاپ
8 خط شبکه برای تبلت
4 خط شبکه برای موبایل

شبکه لایوت یا چیدمان شامل 1-4 ستون است و هر ستون حاوی محتوایی است که می خواهید روی شبکه قرار گیرد.

در دستگاه های کوچکتر (تبلت و موبایل) معمول است که یک طرح در چندین ردیف پخش شود. وقتی نمایش تبلت یا موبایل را فعال می کنید، این ویژگی به طور خودکار فعال می شود، اگرچه با تغییر مستقیم مقادیر شبکه می توان آن را لغو کرد.

حال که با مفهوم طرح بندی شبکه ای آشنا شدید، افزونه Layout Grid Block را دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید.

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

روی آیکون + که مربوط به اضافه کردن بلوک ها است کلیک کنید، مشاهده می کنید که در قسمت طراحی بلوک جدیدی به نام Layout Grid اضافه شده است. با کلیک روی آن، بلوک Layout Grid مشابه شکل زیر به صفحه اضافه می شود.

در اولین گام می توانید تعداد ستون ها را انتخاب کنید. به عنوان مثال طرح بندی 4 ستونه را انتخاب می کنیم.

هر زمان که بخواهید می توانید ستون ها را از سایدبار تنظیمات بلوک در سمت چپ صفحه، تغییر دهید.

هر بلوک دارای گزینه های اضافی در نوار کناری ویرایشگر و همچنین گزینه های موجود در نوار ابزار بلوک است. اگر نوار کناری را مشاهده نمی کنید، روی آیکون «چرخ دنده» در کنار دکمه انتشار کلیک کنید.

هر ستون داخل شبکه می تواند حاوی بلوک های دیگری باشد. شما می توانید محتواهای مورد نظر خود را با کلیک کردن روی آیکون + و انتخاب یک بلوک، به ستون اضافه کنید.

تغییر اندازه بلوک ها با افزونه Layout Grid Block

افزونه Layout Grid Block به شما امکان می دهد که ستون ها را در شبکه طرح بندی به دو روش تغییر اندازه دهید.

با استفاده از دستگیره های کشیدن روی صفحه
با استفاده از سایدبار تنظیمات بلوک

تغییر اندازه شبکه با استفاده از دستگیره های کشیدن

هر ستون روی شبکه یک مستطیل یا دایره آبی در چپ و راست دارد که دستگیره های کشیدن هستند. اگر روی آنها کلیک کرده و به سمت چپ یا راست بکشید، اندازه بلوک تغییر می کند.

افزونه Layout Grid Block مانع از تغییر اندازه بلوک ها در خارج از محدوده شبکه می شود و ممکن است لازم باشد ستون های دیگری را برای ایجاد فضا تنظیم کنید.

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

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

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

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

شما می توانید مقادیر مربوط به هر ستون را به صورت زیر اصلاح کنید:

Offset- این ستون از ستون قبلی (یا شروع) چند خط شبکه را رد می کند.
Span- این ستون در چند خط شبکه گسترش می یابد.

هنگام استفاده از دستگیره های کشیدن، این موارد بصورت خودکار تنظیم می شوند.

نمایش در تبلت و موبایل

مشکل در شبکه ها، ترازبندی ساده ستونها در نمایش دسکتاپ نیست بلکه نحوه تبدیل آن ستون ها در دستگاه های کوچکتر مانند تبلت ها و تلفن های هوشمند است. بلوک Layout Grid افزونه Layout Grid Block دارای تب “Responsive Breakpoints” در پنل گزینه های بلوک است که به کاربران اجازه می دهد طرح بندی ها را بر اساس دستگاه های مختلف پیکربندی کنند.

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

چیدمان تبلت و موبایل می تواند چند ردیف داشته باشد.

با استفاده از دستگیره های کشیدن می توانید ستون ها را در هر ردیف تغییر اندازه دهید. اگر می خواهید ستون ها را در بین ردیف ها جابجا کنید، باید از نوار کناری تنظیمات بلوک استفاده کنید.

قوانین شبکه

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

به عنوان مثال، در یک دستگاه دسکتاپ (12 خط شبکه)، یک چیدمان سه ستونی می تواند شامل 4 خط شبکه span بدون افست یا 3 خط شبکه span با یک افست باشد. به همین ترتیب یک ستون می تواند 10 خط شبکه و دو ستون دیگر را پوشش دهد دهانه هر کدام.

نحوه چیدمان شبکه کاملاً به شما بستگی دارد و این قانون اطمینان می دهد که ستون های شما روی یکدیگر نمی افتد. این قانون می تواند مانع از این شود که شما از ترکیبات خاصی از offset ها و span ها (به ویژه هنگام کار با چند ردیف) استفاده کنید. بنابراین باید مقادیری را انتخاب کنید که از قانون شبکه پیروی می کنند.

تنظیم فضای بین ستون ها با افزونه Layout Grid Block

تنظیمات دیگری که در سایدبار سمت چپ صفحه وجود دارد، تنظیمات Gutter است. با تغییر تنظیمات Gutter می توانید فضای بین ستونهای داخل شبکه را تنظیم کنید.

اندازه Gutter بر فضای بین همه ستون ها تأثیر می گذارد. انتخاب گزینه no gutter باعث می شود که همه آنها از جمله اولین و آخرین Gutter حذف شوند.

وقتی اندازه Gutter روی هر مقداری غیر از no gutter باشد، می توانید Gutter سمت چپ و راست شبکه را با غیر فعال کردن گزینه Add end gutters حذف کنید. با این کار می توانید شبکه خود را در لبه های صفحه قرار دهید.

تنظیمات پدینگ و رنگ

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