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

✅ گوتنبرگ چیست؟

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

🧩 مزایای گوتنبرگ برای طراحی صفحات سفارشی

• بدون نیاز به افزونه صفحه‌ساز

• سبک و سریع

• کاملاً واکنش‌گرا

• قابلیت طراحی‌های حرفه‌ای با بلوک‌های ترکیبی

• سازگار با سئو و قابلیت استفاده از الگوها

✳️ 1. آشنایی با انواع بلوک‌های گوتنبرگ

در گوتنبرگ، بلوک‌های مختلفی برای ساخت محتوای صفحه وجود دارد، از جمله:

✳️ 2. ایجاد ساختار صفحه با بلوک‌های چیدمان

📌 ساخت ردیف و ستون:

برای نمایش محتوا در چند ستون، از بلوک "ستون‌ها (Columns)" استفاده کنید.

• اضافه کردن بلوک Columns → انتخاب تعداد ستون → قرار دادن بلوک‌های دیگر داخل هر ستون (تصویر، متن و ...)

✳️ 3. استایل‌دهی به بلوک‌ها

اکثر بلوک‌ها قابلیت تغییر:

• رنگ پس‌زمینه و متن

• فونت و سایز نوشته

• پدینگ و مارجین (Spacing)

• ترازبندی (راست، چپ، وسط)

• اضافه‌کردن کلاس‌های CSS سفارشی

را از پنل کناری دارند.

✳️ 4. استفاده از بلوک‌های گروه (Group) و سطر (Row)

بلوک‌های Group و Row امکان ایجاد بخش‌های مجزا با تنظیمات ظاهری خاص (مثلاً با بک‌گراند متفاوت) را فراهم می‌کنند. این برای ساخت سکشن‌های صفحه اصلی یا لندینگ پیج بسیار کاربردی است.

✳️ 5. ذخیره و استفاده مجدد از بلوک‌ها

هر ترکیب بلوک دلخواهی را می‌توانید به‌عنوان الگوی قابل استفاده مجدد (Reusable Block) ذخیره کرده و در صفحات دیگر مجدد استفاده کنید.

• روی ۳ نقطه بلوک کلیک کنید → «ذخیره به عنوان بلوک قابل استفاده مجدد»

✳️ 6. استفاده از الگوهای آماده (Patterns)

گوتنبرگ از نسخه‌های جدیدتر، قابلیت استفاده از Pattern‌ها یا الگوهای آماده را دارد.

• از پنل بلوک‌ها → بخش «Patterns»

• می‌توانید طرح‌های آماده برای Call-to-Action، معرفی خدمات، FAQ و... را به‌سادگی وارد کنید.

✳️ 7. افزودن CSS سفارشی به بلوک‌ها

برای هر بلوک می‌توان کلاس CSS سفارشی تعیین کرد و در فایل style.css قالب یا بخش سفارشی‌سازی، استایل خاصی به آن اعمال کرد.

مثال:

css
CopyEdit
.cta-box {
  background: #f3f3f3;
  padding: 20px;
  border-radius: 10px;
}

و در گوتنبرگ: کلاس cta-box را به بلوک اضافه کنید.

✳️ 8. استفاده از افزونه‌های تقویتی گوتنبرگ

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

🎯 نمونه کاربردی: ساخت بخش معرفی خدمات

1. بلوک Group → رنگ پس‌زمینه آبی روشن

2. داخل آن یک Heading و چند بلوک ستون

3. داخل هر ستون:

   • آیکون (تصویر)

   • عنوان سرویس

   • متن توضیح

   • دکمه "مطالعه بیشتر"

📦 نتیجه‌گیری

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