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

Layout Grid Block

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

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

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

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

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

در این مقاله افزونه Layout Grid Post را مورد بررسی قرار داده و نحوه استفاده از آن را توضیح می دهیم.

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

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

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

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

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

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

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

بعد از اینکه افزونه نصب شد آن را فعال کنید.

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

Layout Grid Block

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

Layout Grid Block

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

Layout Grid Block

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

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

Layout Grid Block

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

Layout Grid Block

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

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

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

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

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

Layout Grid Block

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

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

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

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

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

Layout Grid Block

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

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

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

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

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

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

Layout Grid Block

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

Layout Grid Block

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

قوانین شبکه

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

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

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

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

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

Layout Grid Block

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

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

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

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

Layout Grid Block

چیدمان عمودی

با کلیک روی دکمه تراز عمودی می توانید تراز عمودی کل Layout Grid یا ستون های تکی را در شبکه تغییر دهید.

Layout Grid Block

جمع بندی

افزونه Layout Grid Block یک افزونه قدرتمند برای چیدمان حرفه ای صفحه و تراز کردن بلوک ها در یک شبکه همگانی است. این افزونه توسط Automattic تیم توسعه دهنده وردپرس توسعه داه شده و بیش از 100 هزار نصب فعال دارد.

امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.

دانلود افزونه

دانلود افزونه Layout Grid Block
صفحه افزونه Layout Grid Block

درباره ی مینا قدسی

مطلب پیشنهادی

آموزش افزونه Social Warfare

آموزش افزونه Social Warfare و اشتراک گذاری مطالب در شبکه های اجتماعی

در دنیای امروز استفاده از شبکه های اجتماعی روز به روز گسترش پیدا کرده و …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *