در دنیای توسعه وب، ایجاد طرح‌بندی‌های سفارشی اغلب مانند یک عمل متعادل بین عملکرد و طراحی به نظر می‌رسد. اما با استفاده از گوتنبرگ، ویرایشگر قدرتمند بلاک وردپرس، توسعه دهندگان اکنون ابزارهایی برای ایجاد طرح‌بندی‌های پیچیده و منحصربه‌فرد در اختیار دارند—همه بدون نیاز به صفحه‌سازهای شخص ثالث. چه در حال ساختن سایتی از ابتدا باشید و چه به دنبال بهبود سایت موجود هستید، گوتنبرگ رویکردی ساده و انعطاف پذیر برای طراحی چیدمان ارائه می دهد.
در این پست، به پنج بلوک خاص گوتنبرگ می پردازیم که به دلیل تطبیق پذیری و قدرت خود برجسته هستند.
- بلوک گروهی: به شما امکان می دهد چندین عنصر را گروه بندی کنید و یک استایل ثابت در آنها اعمال کنید.
- بلوک ستون ها: توسعه دهندگان را قادر می سازد طرح بندی های چند ستونی ایجاد کنند که به طور کامل در همه دستگاه ها پاسخگو هستند.
- بلوک پوششی: تصاویر را با محتوای لایه‌بندی، مانند متن و دکمه‌ها ترکیب می‌کند تا بخش‌هایی همه‌جانبه و برجسته ایجاد کند.
- اسپیسر بلوک: راهی آسان برای مدیریت فاصله ثابت در سرتاسر یک طرح بندی بدون تنظیم تنظیمات تک تک بلوک ها ارائه می دهد.
- بلوک حلقه پرس و جو: به صورت پویا لیستی از پست ها یا سایر محتواها را نمایش می دهد و گزینه های فیلتر و طرح بندی انعطاف پذیر را ارائه می دهد.
این بلوک‌ها ابزارهای ضروری برای توسعه‌دهندگانی هستند که می‌خواهند طرح‌بندی‌های سفارشی ایجاد کنند که هم از نظر بصری خیره‌کننده و هم کاملاً کاربردی باشند. به خواندن ادامه دهید تا نحوه عملکرد هر بلوک را بررسی کنید، نمونه هایی از آنها را در عمل ببینید و در مورد موارد استفاده بالقوه ای که می تواند پروژه بعدی شما را ارتقاء بخشد، آشنا شوید.
قفل طرح بندی های سفارشی را با بلاک گروه باز کنید
وقتی صحبت از ایجاد طرح‌بندی سفارشی در وردپرس می‌شود، بلاک گروه یکی از همه کاره‌ترین ابزارها در زرادخانه شماست. این بلوک به شما امکان می دهد عناصر متعددی مانند متن، تصاویر و دکمه ها را در یک بخش منسجم ترکیب کنید. با گروه بندی عناصر با هم و استفاده از تغییرات بلوک گروه، کنترل بیشتری بر موقعیت، استایل و پاسخگویی آنها به دست می آورید.
چرا بلوک گروه قدرتمند است
قدرت بلوک گروه در توانایی آن برای ساده کردن فرآیند طراحی شما نهفته است. به جای نیاز به تنظیم تنظیمات روی هر عنصر به صورت جداگانه، بلوک گروه به شما امکان می دهد یک استایل ثابت را برای کل بخش اعمال کنید. این نه تنها در زمان صرفه جویی می کند، بلکه تضمین می کند که چیدمان های شما منسجم و از نظر بصری در دستگاه های مختلف جذاب هستند. همچنین بلوک اصلی است که برای ایجاد عناصر ثابت مانند هدر چسبنده یا نوار کناری استفاده می شود.
نحوه کار با بلاک گروه
در صفحه ضبط شده زیر، خواهید دید که چگونه بلوک Group با ترکیب عناصری مانند تصاویر، متن و دکمه ها در یک بخش منسجم، روند ساخت بخش قهرمان را بهبود می بخشد. توجه داشته باشید که چقدر به راحتی می توانید فاصله، رنگ ها و تراز را تنظیم کنید و گردش کار طراحی خود را ساده کنید.
عملی کردن بلوک گروهی
بلوک گروه در ایجاد بخش‌های مدولار قابل استفاده مجدد، مانند یک فراخوان برای اقدام یا منطقه ویژگی، که می‌تواند به طور مداوم در چندین صفحه مستقر شود، برتری دارد. این بلوک همچنین برای سازماندهی ترتیبات محتوای پیچیده در یک بخش واحد و یکپارچه که می تواند به راحتی در سراسر سایت به روز شود ضروری است. چه در حال ایجاد یک هدر چسبنده یا سازماندهی یک ویترین محصول باشید، بلوک گروه به شما کنترل دقیقی بر نحوه قرارگیری و استایل بندی این عناصر می دهد.
طراحی با انعطاف پذیری با استفاده از بلوک ستون ها
بلوک Columns انعطاف‌پذیری را در سازماندهی محتوا در کنار هم ارائه می‌کند و به توسعه‌دهندگان اجازه می‌دهد طرح‌بندی‌های چند ستونی ایجاد کنند که می‌تواند شبکه‌ها، بخش‌های مقایسه یا هر طرح‌بندی را که اطلاعات موازی کلیدی است، در خود جای دهد.
چرا توسعه دهندگان بلوک ستون ها را دوست دارند؟
قدرت واقعی بلوک Columns در تطبیق پذیری آن برای طراحی چیدمان های ساخت یافته نهفته است. انعطاف‌پذیری آن به شما امکان می‌دهد تعداد ستون‌ها، عرض و فاصله آنها را از طرح‌بندی‌های دو ستونی ساده تا شبکه‌های پیچیده‌تر سفارشی کنید. بلوک Columns همچنین کاملاً پاسخگو است و اطمینان حاصل می کند که چیدمان ها به طور خودکار در اندازه های مختلف صفحه تنظیم می شوند و به توسعه دهندگان امکان کنترل یکپارچه بر روی طرح های بصری متعادل را می دهد.
به بلوک ستون ها در عمل مراجعه کنید
این ضبط بلوک ستون‌ها را به نمایش می‌گذارد که برای ایجاد یک طرح‌بندی سه ستونی شامل خدمات یا محصولات استفاده می‌شود. توجه کنید که چگونه می‌توان ستون‌هایی با اجزای متعدد را کپی و ویرایش کرد.
چه زمانی از بلوک ستون ها برای حداکثر تأثیر استفاده کنیم
بلوک ستون ها زمانی ایده آل است که محتوا باید در کنار هم نمایش داده شود، مانند مقایسه خدمات، شبکه های محصول یا نمایه های اعضای تیم. ترکیب آن با بلوک گروه به بخش‌های پیچیده‌تر و یکپارچه‌تر با استایلی ثابت اجازه می‌دهد و در عین حال از انعطاف‌پذیری ستون‌ها استفاده می‌کند.
با Cover Block تاثیر بصری خیره کننده ای ایجاد کنید
پس از سازماندهی محتوای خود با بلوک‌های گروه و ستون، بلوک جلد وارد عمل می‌شود تا یک تجربه بصری جسورانه و همه‌جانبه به آن اضافه کند. خواه این یک بخش تمام عرض با یک تصویر پس‌زمینه یا یک ویدیوی تمام صفحه باشد، بلوک جلد به ایجاد لحظات برجسته در صفحه شما کمک می‌کند، که برای جلب توجه مخاطبان در حین پیمایش عالی است.
چرا بلوک پوششی متمایز است
چیزی که بلوک Cover را متمایز می کند، توانایی آن در ترکیب تصاویر زیبا با محتوای لایه ای مانند متن و دکمه ها است. این بلوک ظاهری شیک و مدرن با پوشش‌های قابل تنظیم را فراهم می‌کند و جلوه منظر آن حس عمق را در حین پیمایش کاربران ایجاد می‌کند. این به توسعه دهندگان یک راه بصری چشمگیر برای جذب بازدیدکنندگان و توجه مستقیم به محتوای کلیدی ارائه می دهد.
نحوه استفاده از Cover Block به عنوان بخش شکستن
ویدیوی زیر نشان می‌دهد که بلوک پوشش برای ایجاد یک شکست بخش پویا با یک تصویر تمام عرض، متن روی هم‌پوشانی و یک فیلتر رنگ متضاد استفاده می‌شود. توجه داشته باشید که چگونه این شکست بصری چشمگیر کاربران را از یک بخش به بخش بعدی هدایت می کند.
جایی که بلوک پوشش می درخشد
چه برای یک بخش قهرمان، یک بنر برای جدا کردن بخش ها، یا یک منطقه ویژگی برای تأکید بر محتوای مهم، بلوک جلد بهترین کار را در جایی که می خواهید تأثیر بگذارید. برای صفحات فرود، رویدادها یا مناطق تبلیغاتی که در آن ترکیبی از تصاویر قدرتمند و متن عملی برای راهنمایی بازدیدکنندگان به سمت مرحله بعدی مورد نیاز است، ایده آل است.
با Spacer Block اتاق تعادل و تنفس ایجاد کنید
برای توسعه دهندگان، چیدمان های تمیز و متعادل برای یک تجربه کاربری عالی بسیار مهم است. بلوک Spacer ممکن است در نگاه اول ساده به نظر برسد، اما توانایی آن در تنظیم دقیق فاصله بین عناصر به شما کنترل دقیقی بر طراحی شما می دهد. بلاک Spacer به جای تنظیم دستی حاشیه ها یا لایه برداری در چندین بلوک، یک رویکرد ساده برای حفظ ثبات در سراسر طرح شما ارائه می دهد.
چرا توسعه دهندگان بلوک Spacer را انتخاب می کنند؟
یکی از مزایای کلیدی بلوک Spacer توانایی آن در اعمال فاصله ثابت بدون نیاز به تغییر تنظیمات جداگانه هر بلوک است. برای توسعه‌دهندگانی که طرح‌بندی‌های پیچیده را مدیریت می‌کنند، این می‌تواند صرفه‌جویی زیادی در زمان داشته باشد. می‌توانید بلوک‌های Spacer را بین بخش‌ها وارد کنید تا از فاصله ثابت اطمینان حاصل کنید، و از نیاز به پرش مکرر بین تنظیمات بلوک اجتناب کنید. این منجر به گردش کار تمیزتر و طراحی صیقلی تر می شود.
ساده کردن فاصله چیدمان
این کلیپ نشان می دهد که چگونه بلوک Spacer فاصله متعادل بین بخش ها را تضمین می کند. خواهید دید که چگونه افزودن بلوک‌های Spacer، چیدمان را تمیز و منسجم نگه می‌دارد بدون اینکه نیازی به تنظیم لایه‌ها و حاشیه‌های جداگانه برای هر عنصر باشد. بعلاوه، ببینید که چگونه تغییر ارتفاع چند بلوک Spacer یک مرحله زمانی است که یک الگوی همگام‌سازی شده Spacer ایجاد می‌کنید.
جایی که بلوک Spacer کارایی را اضافه می کند
بلوک Spacer زمانی می درخشد که شما نیاز به حفظ فاصله یکنواخت در طول پروژه دارید. می‌توانید ابعاد پیش‌فرض آن را از پیش تعیین کنید یا آن را در الگوهای طراحی همگام‌سازی کنید، و هرگونه تنظیمات آینده را می‌توان در یک مکان انجام داد، و در زمان مدیریت کل صفحه یا به‌روزرسانی‌های کل سایت در زمان شما صرفه‌جویی می‌کند. برای انعطاف‌پذیری بیشتر، می‌توانید کلاس‌های CSS سفارشی را روی الگوهای بلوک Spacer همگام‌سازی شده اعمال کنید، که تنظیم فاصله برای اندازه‌های مختلف صفحه را ساده می‌کند. این نه تنها سرعت پیاده‌سازی را بهبود می‌بخشد، بلکه سازگاری در طرح‌بندی‌های شما، چه برای صفحات فرود، پست‌ها یا قالب‌های سفارشی را تضمین می‌کند.
نمایش پویا محتوا با بلوک حلقه پرس و جو
بلوک Query Loop به شما این امکان را می دهد که به راحتی لیستی از پست ها، صفحات یا انواع پست های سفارشی را وارد کنید و به صورت پویا محتوا را بر اساس پارامترهای خاص مانند دسته ها، برچسب ها یا نویسنده نمایش دهید. این یک ابزار ضروری برای توسعه‌دهندگانی است که می‌خواهند محتوا را در طرح‌بندی‌های قابل تنظیم بدون نیاز به تنظیم دستی هر بخش به نمایش بگذارند.
چرا توسعه دهندگان به بلوک حلقه پرس و جو متکی هستند؟
بلوک Query Loop گزینه های فیلترینگ و نمایش قدرتمندی را در اختیار توسعه دهندگان قرار می دهد که کاملاً قابل تنظیم هستند. با کنترل کامل بر نحوه کشیده شدن و چیدمان پست‌ها، توسعه‌دهندگان می‌توانند بلوک Query Loop را برای نمایش محتوای فیلتر شده بر اساس دسته‌ها، برچسب‌ها یا معیارهای دیگر سفارشی کنند و به شبکه‌های وبلاگ، پورتفولیو یا صفحات آرشیو متناسب با سایت کلی آنها اجازه دهند. طراحی
ایجاد و بهبود طرح بندی حلقه پرس و جو سفارشی
این مثال نشان می دهد که چگونه بلوک Query Loop برای نمایش مجموعه سفارشی پست های وبلاگ، فیلتر شده بر اساس دسته بندی، پیکربندی شده است. به تطبیق پذیری و نحوه ادغام بلوک ها با یکدیگر توجه کنید که چیدمان را افزایش می دهد و در نتیجه یک بخش وبلاگ پویا و متعادل بصری ایجاد می شود که به طور خودکار به روز می شود.
جایی که بلوک حلقه پرس و جو می درخشد
در سایت هایی با محتوای به روز رسانی مکرر، بلوک Query Loop راه حلی پویا برای نمایش مطالب جدید ارائه می دهد. هنگامی که با بلوک‌های دیگر یکپارچه می‌شود، به توسعه‌دهندگان کمک می‌کند تا طرح‌بندی‌های بصری جذابی ایجاد کنند که به‌طور خودکار به‌روزرسانی می‌شوند و در عین حال ساختار طراحی ثابتی را حفظ می‌کنند.
طرح بندی های خود را با این 5 بلوک قدرتمند ارتقا دهید
این پنج بلوک گوتنبرگ همه کاره – گروه، ستون، جلد، فاصله‌گذار و حلقه پرس و جو – می‌توانند طرح‌بندی‌های شما را تغییر دهند و به شما در ساخت طرح‌های پویا و کاملاً سفارشی‌شده کمک کنند. چه در حال ایجاد بخش‌های چند ستونی واکنش‌گرا با بلوک Columns باشید، چه با اضافه کردن وقفه‌های بصری چشمگیر با بلوک Cover، یا نمایش محتوای پویا با بلوک Query Loop، این ابزارها به شما این امکان را می‌دهند که طرح‌بندی‌ها را با دقت و خلاقیت بسازید و اصلاح کنید.
هر بلوک نقاط قوت منحصر به فردی را ارائه می دهد، و هنگامی که با هم استفاده می شوند، یک جعبه ابزار قدرتمند به توسعه دهندگان می دهند تا طرح های پیچیده را مستقیماً در ویرایشگر وردپرس ایجاد کنند. با ترکیب این بلوک‌ها، می‌توانید گردش کار خود را ساده کنید، ثبات را حفظ کنید و طرح‌بندی‌هایی ایجاد کنید که هم از نظر بصری جذاب و هم بسیار کاربردی باشند.
خودتان آن را امتحان کنید!
حالا نوبت شماست. این بلوک‌ها را در پروژه بعدی خود آزمایش کنید و راه‌های مختلفی را که می‌توانند با هم کار کنند تا طرح‌بندی‌های سفارشی متناسب با نیازهای شما ایجاد کنند، کشف کنید. در نظرات زیر، طرح‌بندی‌های منحصربه‌فرد مبتنی بر گوتنبرگ را به اشتراک بگذارید و به ما نشان دهید که چگونه این بلوک‌ها را در پروژه‌های خود اعمال کرده‌اید. ما دوست داریم ببینیم شما با چه چیزی روبرو می شوید!
به 113.1 میلیون مشترک دیگر بپیوندید