افزونه Atomic Blocks: راهنمای جامع سفارشی‌سازی ویرایشگر گوتنبرگ

سفارشی‌سازی گوتنبرگ

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

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

چرا Atomic Blocks؟ مزایای کلیدی این افزونه

افزونه Atomic Blocks، با ارائه‌ی ویژگی‌های منحصربه‌فرد، به شما کمک می‌کند تا:

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

ویژگی‌های برجسته‌ی Atomic Blocks

این افزونه، مجموعه‌ای از بلوک‌های کاربردی را در اختیار شما قرار می‌دهد. در ادامه، به معرفی برخی از این بلوک‌ها می‌پردازیم:

ویژگی‌های Atomic Blocks

نصب و راه‌اندازی Atomic Blocks

نصب Atomic Blocks بسیار آسان است. برای این کار، مراحل زیر را دنبال کنید:

نصب Atomic Blocks

  1. ابتدا، فایل افزونه را از منبعی معتبر دانلود کنید.
  2. وارد پیشخوان وردپرس خود شوید.
  3. به بخش "افزونه‌ها" و سپس "افزودن" بروید.
  4. روی دکمه "بارگذاری افزونه" کلیک کنید.
  5. فایل افزونه را انتخاب و بارگذاری کنید.
  6. پس از اتمام بارگذاری، افزونه را فعال کنید.

آموزش استفاده از Atomic Blocks

پس از فعال‌سازی افزونه، می‌توانید از بلوک‌های آن در ویرایشگر گوتنبرگ استفاده کنید. برای این کار:

  1. وارد صفحه‌ی ویرایش نوشته یا برگه خود شوید.
  2. روی علامت + (افزودن بلوک) کلیک کنید.
  3. از میان بلوک‌های موجود، Atomic Blocks را انتخاب کنید.
  4. بلوک مورد نظر خود را انتخاب و به صفحه‌ی خود اضافه کنید.
  5. اطلاعات و تنظیمات مربوط به هر بلوک را وارد کنید.

افزودن بلوک

در ادامه، به معرفی و بررسی برخی از مهم‌ترین بلوک‌های Atomic Blocks می‌پردازیم:

بلوک‌های Atomic Blocks

Profile Box (جعبه پروفایل)

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

Profile Box

  • Font Size: اندازه‌ی فونت متن جعبه را تنظیم کنید.
  • Avatar Shape: شکل تصویر (دایره یا مربع) را انتخاب کنید.
  • Background Color: رنگ پس‌زمینه‌ی جعبه را تعیین کنید.
  • Text Color: رنگ متن را انتخاب کنید.
  • Social Link Color: رنگ لینک شبکه‌های اجتماعی را تنظیم کنید.
  • Social Links: آدرس شبکه‌های اجتماعی فرد مورد نظر را وارد کنید.

تنظیمات Profile Box

Testimonial (نقل قول)

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

Testimonial

  • Text: متن نقل قول را وارد کنید.
  • Name: نام شخص را بنویسید.
  • Title: عنوان شغلی شخص را وارد کنید.
  • Image: تصویر شخص را آپلود کنید.
  • Text Color/Background Color: رنگ متن و پس‌زمینه‌ی بلوک را تنظیم کنید.

Call To Action (فراخوان به عمل)

این بلوک به شما کمک می‌کند تا دکمه‌های فراخوان به عمل جذابی را در صفحات خود قرار دهید. این دکمه‌ها می‌توانند کاربران را به انجام اقداماتی مانند ثبت‌نام در خبرنامه، دانلود فایل، خرید محصول و غیره ترغیب کنند.

Call To Action

  • Title: عنوان فراخوان به عمل را وارد کنید.
  • Text: متن توضیحی را بنویسید.
  • Button Text: متن دکمه را وارد کنید.
  • Button URL: آدرس صفحه‌ای که با کلیک بر روی دکمه باز می‌شود را وارد کنید.

تنظیمات Call To Action

  • Text Options: اندازه‌ی فونت عنوان و متن را تنظیم کنید.
  • Text Color: رنگ متن را انتخاب کنید.
  • Background Options: رنگ یا تصویر پس‌زمینه را انتخاب کنید.
  • Button Options: تنظیمات مربوط به دکمه (استایل، رنگ، اندازه و …) را انجام دهید.

Button (دکمه)

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

Button

  • Button Text: متن دکمه را وارد کنید.
  • Button URL: آدرس صفحه مورد نظر را وارد کنید.

تنظیمات Button

  • Open in New Tab: تعیین کنید دکمه در تب جدید باز شود یا خیر.
  • Button Style: استایل دکمه (رنگ، اندازه، شکل و …) را تنظیم کنید.

Drop Cap (حرف ابتدایی بزرگ)

این بلوک، حرف اول پاراگراف را بزرگ‌تر و برجسته‌تر می‌کند. این ویژگی، به زیبایی و جذابیت متن شما می‌افزاید.

Drop Cap

  • تنظیمات این بلوک، شامل رنگ و اندازه‌ی حرف اول می‌شود.

Notice (اطلاعیه)

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

Notice

  • Notice Title: عنوان اطلاعیه را وارد کنید.
  • Notice Text: متن اطلاعیه را بنویسید.

تنظیمات Notice

  • Font Size: اندازه‌ی فونت متن را تنظیم کنید.
  • Notice Display: تعیین کنید اطلاعیه قابل بستن باشد یا همیشه نمایش داده شود.
  • Color Options: رنگ پس‌زمینه، عنوان و متن را تنظیم کنید.

Sharing (اشتراک‌گذاری)

این بلوک، دکمه‌های اشتراک‌گذاری در شبکه‌های اجتماعی را به صفحات شما اضافه می‌کند. به این ترتیب، کاربران می‌توانند محتوای شما را به راحتی با دیگران به اشتراک بگذارند.

Sharing

  • در تنظیمات این بلوک، شبکه‌های اجتماعی مورد نظر خود را انتخاب کنید.

تنظیمات Sharing

  • Button Style: استایل دکمه‌ها (آیکون، نام شبکه، یا هر دو) را انتخاب کنید.
  • Button Shape: شکل دکمه‌ها را تنظیم کنید.
  • Button Size: اندازه‌ی دکمه‌ها را تعیین کنید.
  • Button Color: رنگ دکمه‌ها را انتخاب کنید (یا از رنگ‌های پیش‌فرض شبکه‌های اجتماعی استفاده کنید).

Accordion (آکاردئون)

این بلوک، امکان ایجاد لیست‌های آکاردئونی را فراهم می‌کند. این ویژگی، برای نمایش اطلاعات به صورت جمع‌وجور و مرتب، بسیار مفید است.

Accordion

  • Title: عنوان آکاردئون را وارد کنید.
  • Content: محتوای آکاردئون را بنویسید (می‌توانید از بلوک‌های دیگر نیز استفاده کنید).

تنظیمات Accordion

  • Font Size: اندازه‌ی فونت متن را تنظیم کنید.
  • Open by default: تعیین کنید آکاردئون به طور پیش‌فرض باز باشد یا بسته.

Spacer (فاصله‌دهنده)

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

Spacer

  • Height: ارتفاع فضای خالی را بر حسب پیکسل تنظیم کنید.
  • Add divider: یک خط جداکننده به فضای خالی اضافه کنید.

Container (ظرف)

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

Container

  • Padding: فاصله‌ی داخلی محتوا را از بالا، پایین، چپ و راست تنظیم کنید.
  • Margin: فاصله‌ی خارجی محتوا را از بالا و پایین تنظیم کنید.
  • Background Options: رنگ یا تصویر پس‌زمینه را برای کانتینر انتخاب کنید.

Post Grid (شبکه‌ی نوشته‌ها)

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

Post Grid

  • در تنظیمات این بلوک، می‌توانید نحوه‌ی نمایش نوشته‌ها را به صورت شبکه‌ای یا لیستی انتخاب کنید.

انتخاب نوع نمایش

تنظیمات Post Grid

  • Order by: ترتیب نمایش نوشته‌ها را (تاریخ، عنوان، و غیره) تعیین کنید.
  • Category: دسته‌بندی نوشته‌ها را انتخاب کنید.
  • Number of items: تعداد نوشته‌های نمایش داده شده را مشخص کنید.
  • Columns: تعداد ستون‌ها را تعیین کنید.
  • Display Featured Image: نمایش یا عدم نمایش تصویر شاخص را تعیین کنید.
  • Featured Image Style: استایل تصویر شاخص را تنظیم کنید.
  • و تنظیمات دیگر برای نمایش عنوان، نویسنده، تاریخ، خلاصه‌ی نوشته و دکمه‌ی "ادامه مطلب".

با استفاده از بلوک‌های Atomic Blocks، می‌توانید صفحات خود را به شکلی جذاب و حرفه‌ای طراحی کنید. در تصویر زیر، نمونه‌ای از یک صفحه که با استفاده از این افزونه ساخته شده است، نمایش داده می‌شود:

نمونه صفحه ساخته شده با Atomic Blocks

سخن پایانی

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

امیدواریم این راهنما، شما را در استفاده از Atomic Blocks یاری کرده باشد.