بلوک های گوتنبرگی با افزونه Stackable

آشنایی با افزونه Stackable؛ تحولی در ویرایشگر گوتنبرگ

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

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

استفاده از پلاگین Stackable به شما این امکان را می دهد که کنترل کاملی روی فواصل، رنگ ها و چیدمان المان ها داشته باشید. در واقع، این افزونه شکاف میان ویرایشگر ساده گوتنبرگ و صفحه سازهای سنگینی مثل المنتور را پر کرده است.

چرا باید از افزونه Stackable استفاده کنیم؟

یکی از بزرگترین دغدغه های مدیران سایت، سرعت وب سایت است. برخلاف صفحه سازهای قدیمی، افزونه Stackable بسیار سبک است و تنها کدهای لازم را در صفحه بارگذاری می کند. این ویژگی باعث بهبود تجربه کاربری و سئو سایت می شود.

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

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

راهنمای گام‌به‌گام نصب و راه‌اندازی افزونه Stackable

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

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

مرحله اول: ورود به مخزن افزونه‌های وردپرس

ابتدا وارد پیشخوان وردپرس خود شوید. از منوی سمت راست، روی گزینه “افزونه‌ها” (Plugins) و سپس “افزودن” (Add New) کلیک کنید. در کادر جستجو که در سمت چپ بالا قرار دارد، عبارت Stackable را تایپ کنید.

اولین نتیجه‌ای که با آیکون بنفش رنگ و نام “Gutenberg Blocks and Solutions – Stackable” ظاهر می‌شود، همان افزونه مورد نظر ماست. این پلاگین Stackable توسط تیم WP Stackable توسعه یافته و امتیاز بسیار بالایی در مخزن دارد.

مرحله دوم: نصب و فعال‌سازی

روی دکمه “نصب” (Install Now) کلیک کنید. پس از چند ثانیه که عملیات دانلود و نصب توسط وردپرس به پایان رسید، دکمه به رنگ آبی درآمده و عبارت “فعال‌نمایید” (Activate) را نمایش می‌دهد. روی آن کلیک کنید تا افزونه روی سایت شما اجرا شود.

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

آموزش گام به گام کار با بلوک های Stackable

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

برای شروع، کافی است روی علامت “+” کلیک کرده و عبارت Stackable را جستجو کنید. لیستی از بلوک های متنوع شامل بنرها، لیست ویژگی ها، جداول قیمت و ویدیوها ظاهر می شود. هر بلوک دارای سه تب اصلی: Layout، Style و Advanced است.

تنظیمات بخش Layout و طراحی ساختار

در تب Layout، شما می توانید چیدمان کلی بلوک را انتخاب کنید. به عنوان مثال، اگر از بلوک “Feature” استفاده می کنید، می توانید تعیین کنید که تصویر در سمت راست باشد یا چپ. این انعطاف پذیری در طراحی بسیار کاربردی است.

در این بخش، گزینه هایی برای تعیین تعداد ستون ها و فاصله بین آن ها وجود دارد. شما می توانید با کشیدن لغزنده ها، دقیقاً همان فاصله ای را ایجاد کنید که در ذهن دارید. این دقت در جزئیات، ویژگی بارز پلاگین Stackable است.

شخصی سازی ظاهری در تب Style

تب Style قلب تپنده طراحی شماست. در اینجا می توانید رنگ بندی، تایپوگرافی، سایه ها و حاشیه ها را تغییر دهید. نکته جالب این است که می توانید برای هر المان، حالت Hover یا نگه داشتن موس را نیز تعریف کنید.

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

معرفی بلوک های کاربردی و مثال های عملی

برای درک بهتر قدرت این افزونه، بیایید به چند بلوک پرکاربرد نگاهی بیندازیم. بلوک “Container” یکی از مهم ترین هاست. این بلوک به شما اجازه می دهد چندین المان دیگر را درون خود جای دهید و برای کل مجموعه یک پس زمینه یا حاشیه واحد تعیین کنید.

تصور کنید می خواهید یک بخش “درباره ما” بسازید. می توانید از یک بلوک کانتینر استفاده کنید، داخل آن دو ستون قرار دهید؛ در یک ستون متن و در ستون دیگر تصویر قرار دهید. سپس به کل کانتینر یک رنگ پس زمینه ملایم بدهید.

بلوک Advanced Columns؛ فراتر از ستون بندی معمولی

ستون های پیش فرض گوتنبرگ گاهی ناامیدکننده هستند. اما بلوک ستون پیشرفته در افزونه Stackable به شما اجازه می دهد اندازه هر ستون را به صورت درصدی تغییر دهید و برای هر ستون به تنهایی استایل دهی کنید.

مثلاً می توانید برای ستون سمت راست یک سایه داخلی (Inner Shadow) تعریف کنید و ستون سمت چپ را کمی بالاتر ببرید (Negative Margin) تا یک طراحی لایه ای و مدرن ایجاد شود. این تکنیک در سایت های خلاقانه بسیار محبوب است.

بلوک Pricing Table برای سایت های خدماتی

ساخت جدول قیمت گذاری همیشه چالش برانگیز بوده است. با این بلوک، شما می توانید پلن های مختلف خود را با آیکون های جذاب، دکمه های فراخوان (CTA) و نشان های “پیشنهاد ویژه” طراحی کنید.

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

نکات طلایی برای بهینه سازی طراحی با Stackable

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

یکی دیگر از قابلیت های عالی، امکان ذخیره استایل هاست. اگر یک بلوک را با تنظیمات خاصی طراحی کردید، می توانید آن را به عنوان “Global Style” ذخیره کنید تا در سایر صفحات نیز بدون تنظیم مجدد، از همان ظاهر استفاده کنید.

• استفاده از آیکون های SVG برای حفظ کیفیت در تمام نمایشگرها.
• تنظیم فواصل (Padding و Margin) برای نمایش صحیح در موبایل.
• بهره گیری از تصاویر بهینه شده برای حفظ سرعت لود.
• استفاده از تگ های HTML صحیح (مانند انتخاب H2 یا H3) برای بهبود سئو.

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

یکی از نقاط قوت افزونه Stackable، کنترل دقیق روی نمایشگرهای مختلف است. در کنار اکثر تنظیمات (مانند اندازه فونت یا فاصله)، آیکون های کوچک موبایل و تبلت دیده می شود. با کلیک بر روی آن ها، تنظیمات فقط برای همان دستگاه اعمال می شود.

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

توسعه امکانات گوتنبرگ؛ فراتر از یک ویرایشگر

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

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

مقایسه قابلیت های نسخه رایگان و پرمیوم افزونه Stackable

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

در جدول زیر می توانید تفاوت های کلیدی این دو نسخه را مشاهده کنید تا انتخاب بهتری برای پروژه خود داشته باشید:

نتیجه گیری

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

سوالات متداول

آیا استفاده از افزونه Stackable باعث کندی سایت می شود؟
خیر، این افزونه برخلاف صفحه سازهایی مثل دیوی یا المنتور، بسیار سبک طراحی شده و فقط کدهای ضروری هر بلوک را بارگذاری می کند.

آیا می توانم بلوک های افزونه Stackable را در قالب های آماده استفاده کنم؟
بله، این افزونه با اکثر قالب های استاندارد وردپرس که از گوتنبرگ پشتیبانی می کنند (مانند Astra، GeneratePress و OceanWP) کاملاً سازگار است.

آیا برای استفاده از افزونه Stackable باید کدنویسی بلد باشم؟
به هیچ وجه. تمام تنظیمات از طریق محیط گرافیکی و کشیدن و رها کردن (Drag and Drop) انجام می شود، هرچند امکان اضافه کردن CSS سفارشی هم وجود دارد.

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

دانلود افزونه Stackable از مخزن وردپرس