اگر تا بهحال در طراحی صفحات وبسایت با WPBakery گیر کردهاید، میدانید که ترکیب امکانات پیشرفته و رابط کاربری پیچیده میتواند مسیر کار را سخت کند. در این راهنمای جامع، گام به گام شما را از نصب اولیه تا ساخت طرحهای پویا همراهی میکنیم تا هر بخش را بهصورت عملی درک کنید. ما با تکیه بر تجربه متخصصان، نکات کلیدی و ترفندهایی را که در پروژههای واقعی بهکار گرفتهاند، در اختیار شما میگذاریم.
هر مرحله با توضیحات واضح، مثالهای کاربردی و راهنماییهای دقیق پشتیبانی میشود تا از ابهامهای رایج عبور کنید. بهمحض پایان این راهنما، توانایی استفاده مؤثر از تمام ابزارهای WPBakery را خواهید داشت و میتوانید بهسرعت صفحات جذاب و کارآمد بسازید.
فهرست مطالب
- شناخت ساختار پایه WPBakery
- نصب و فعالسازی افزونه به صورت صحیح
- راهنمای گام به گام ایجاد ردیفها
- استفاده هوشمندانه از المانهای محتوا
- بهینهسازی واکنشگرایی و سازگاری موبایل
- افزودن کد سفارشی و افزونهها
- نگهداری بروزرسانی و عیبیابی پیشرفته
- سوالات متداول
شناخت ساختار پایه WPBakery
ساختار پایه WPBakery حول سه مفهوم کلیدی میچرخد: سطر (Row)، ستون (Column) و المان (Element). سطرها محفظهای برای گروهبندی ستونها هستند و به شما اجازه میدهند محتوای خود را در قالب ردیفهای افقی سازماندهی کنید. هر ستون میتواند یک یا چند المان مانند متن، تصویر یا دکمه را در خود جای دهد و عرض ستون را میتوان به صورت درصدی یا پیکسل تنظیم کرد.
در محیط ویرایشگر پشت صحنه (Backend Editor)، هر سطر، ستون و المان بهصورت یک shortcode ذخیره میشود؛ بهعنوان مثال متن شما. این شورتکدها باعث میشوند که محتوای شما حتی در حالت غیر فعالسازی افزونه نیز بهصورت ساده باقی بماند و توسط موتور وردپرس رندر میشود. فهم این تبدیل به شما کمک میکند تا در صورت نیاز به عیبیابی سریع، بهراحتی به کدهای اصلی دسترسی پیدا کنید.
قابلیت تو در تو (nesting) در WPBakery بهخصوص برای طراحیهای پیچیده بسیار مهم است. میتوانید داخل یک ستون، یک «سطر داخلی» (Inner Row) قرار دهید و سپس ستونهای جدیدی به آن اضافه کنید. این روش بهخصوص برای ایجاد بخشهای چندسطحی مانند گالریهای تصویری یا فرمهای چندبخشی مفید است و همچنین امکان تنظیم ریسپانسیو (Responsive) برای هر سطح را بهصورت جداگانه فراهم میکند.
| جزء | نقش | نکات تنظیم |
|---|---|---|
| Row | قابلمه اصلی برای گروهبندی ستونها | میتوانید حاشیه، پسزمینه و تنظیمات ریسپانسیو را برای کل ردیف تعریف کنید |
| Column | تقسیم عرض سطر به بخشهای قابل تنظیم | عرض میتواند به صورت درصد (مثلاً 33%) یا پیکسل مشخص شود؛ امکان مخفیسازی در دستگاههای خاص |
| Element | محتوای واقعی مانند متن، تصویر یا دکمه | هر المان تنظیمات مخصوص به خود دارد؛ میتوانید کلاس CSS سفارشی اضافه کنید |
| Inner Row | سطر تو در تو داخل یک ستون | استفاده برای ساختارهای پیچیده؛ تنظیمات ریسپانسیو مستقل از سطر اصلی |
یک نکته عملی که بسیاری از طراحان فراموش میکنند، استفاده از گزینه «کپی/پیست ردیف» است. پس از ساخت یک سطر کامل با ستونها و المانهای دلخواه، کافی است روی آیکون کپی کلیک کنید و همان سطر را در محل دیگری بچسبانید؛ این کار زمان میبرد و از بروز خطاهای تنظیمی جلوگیری میکند. بهعلاوه، اگر میخواهید یک الگوی ثابت برای صفحات مختلف داشته باشید، میتوانید سطر را بهصورت الگو (Template) ذخیره کنید و در پروژههای آینده بهسرعت بارگذاری کنید.
نصب و فعالسازی افزونه به صورت صحیح
برای جلوگیری از بروز خطاهای رایج، اولین گام اطمینان از سازگاری نسخه وردپرس با WPBakery Page Builder است. افزونههای قدیمی یا وردپرسهای بهروزرسانینشده میتوانند باعث تداخل شوند؛ بنابراین پیش از نصب، نسخه اصلی وردپرس را به آخرین نسخه موجود ارتقا دهید. اگر از محیط محلی (local) استفاده میکنید، حتماً یک backup از دیتابیس و فایلها بگیرید تا در صورت بروز مشکل بتوانید به سرعت بازگردید.
نصب افزونه میتواند به دو روش انجام شود: از مخزن وردپرس یا بارگذاری مستقیم فایل ZIP. در اکثر موارد، روش دوم کنترل بیشتری بر روی نسخه دقیق افزونه میدهد. برای این کار، ابتدا فایل ZIP رسمی WPBakery را از وبسایت سازنده دانلود کنید، سپس به پلاگینها → افزودن جدید → بارگذاری پلاگین بروید و فایل را انتخاب کنید. پس از کلیک بر نصب الآن، صبر کنید تا نصب کامل شود و سپس دکمه فعالسازی را فشار دهید.
- بررسی پیشنیازها: PHP نسخه 7.2 یا بالاتر، حافظهٔ RAM حداقل 128 MB.
- آپلود فایل ZIP از طریق داشبورد وردپرس.
- کلیک روی «نصب الآن» و انتظار برای تکمیل فرآیند.
- فعالسازی افزونه و بررسی پیامهای موفقیت یا هشدار.
- باز کردن صفحه «WPBakery Settings» برای تنظیمات اولیه مانند فعالسازی نقشهای کاربری.
پس از فعالسازی، مهم است که تنظیمات پیشفرض را مرور کنید. در بخش General Settings میتوانید نقشهای کاربری که میتوانند از صفحهساز استفاده کنند را مشخص کنید؛ بهطور معمول، نقش Editor کافی است. همچنین، گزینه «تغییرات خودکار ذخیره شود» (Auto‑save) را فعال کنید تا در زمان ویرایش، تغییرات بهصورت دورهای ذخیره شوند و از دست رفتن دادهها جلوگیری شود.
| مرحله | عمل صحیح | خطای رایج |
|---|---|---|
| پیشنیازها | PHP ≥ 7.2، RAM ≥ 128 MB | نسخههای قدیمی PHP باعث تداخل JS میشوند |
| نصب | بارگذاری ZIP از داشبورد | استفاده از نصب خودکار از مخزن باعث نصب نسخه قدیمی میشود |
| فعالسازی | بررسی پیام موفقیت | نادیده گرفتن هشدارهای «conflict» با افزونههای دیگر |
یک نکتهٔ عملی برای توسعهدهندگان: اگر پس از نصب، بلوکهای WPBakery در ویرایشگر گوتنبرگ نمایش داده نشوند، کافی است افزونه Gutenberg Compatibility را فعال کنید یا بهصورت موقت تمام افزونههای دیگر را غیرفعال کنید تا منبع تداخل شناسایی شود. این کار بهسرعت مشکل را عزل میکند و زمان رفع اشکال را به حداقل میرساند.
راهنمای گام به گام ایجاد ردیفها
در WPBakery Page Builder، ردیفها (Rows) پایهایترین واحد ساختار صفحه هستند؛ همهٔ ستونها و المانها داخل یک ردیف قرار میگیرند. بنابراین درک چگونگی ایجاد و تنظیم ردیف، گام اول برای طراحی لایهٔ قابلتخصیص و واکنشگرا میباشد. در ادامه، فرآیند افزودن یک ردیف را بهصورت گامبهگام توضیح میدهیم تا حتی کاربران تازهکار بتوانند بدون مانع پیش بروند.
- در نوار ابزار بالای صفحهساز، بر روی آیکون + Add Element کلیک کنید.
- از منوی باز شده، گزینهٔ Row را انتخاب کنید؛ این کار یک ردیف خالی به انتهای بخش محتوا اضافه میکند.
- روی آیکون قلم (Edit) که در بالای ردیف ظاهر میشود کلیک کنید تا پنل تنظیمات ردیف باز شود.
- در تب General میتوانید گزینههای «Full Width» یا «Full Height» را فعال کنید، یا از «Stretch row and content» برای کشیده شدن ردیف تا لبهٔ صفحه استفاده کنید.
- پس از انجام تنظیمات، روی Save changes کلیک کنید تا ردیف بهروز شود.
پس از ایجاد ردیف، معمولاً نیاز به افزودن یک یا چند ستون (Columns) داخل آن دارید. در پنل تنظیمات ردیف، میتوانید تعداد ستونها را از پیشفرض (۲) به ۳، ۴ یا حتی ۶ تغییر دهید؛ این کار با تنظیم «Column layout» انجام میشود. هر ستون میتواند عرض دلخواه (مثلاً ۱/۳ یا ۲/۵) داشته باشد و برای هر کدام میتوانید پسزمینه، حاشیه (margin) یا پدینگ (padding) جداگانه تعیین کنید. همچنین میتوانید از گزینهٔ «Equal height» استفاده کنید تا ارتفاع تمام ستونها برابر شود، که برای طرحهای کارتمحور بسیار مفید است.
بهمنظور حفظ ریسپانسیو بودن، حتماً در تب Responsive Options بررسی کنید که ردیف در دستگاههای مختلف چگونه نمایش داده شود. میتوانید برای موبایل و تبلت، ردیف را بهصورت «Full Width» یا «Hide on mobile» تنظیم کنید. یک نکتهٔ عملی این است که برای بخشهای مهم مانند بنرهای تبلیغاتی، یک کلاس CSS سفارشی (مثلاً .hero-row) اختصاص دهید و سپس در فایل استایل قالب، ارتفاع ثابت یا پسزمینهٔ تصویری دلخواه را تعریف کنید.
| گزینه ردیف | توضیح | پیشفرض |
|---|---|---|
| Full Width | کشیدن ردیف تا لبهٔ صفحه | غیرفعال |
| Full Height | تنظیم ارتفاع ردیف برابر با ارتفاع پنجره مرورگر | غیرفعال |
| Equal Height Columns | یکسانسازی ارتفاع ستونها در داخل ردیف | غیرفعال |
| Hide on Mobile | پنهانسازی ردیف در نمایشگرهای کوچک | غیرفعال |
استفاده هوشمندانه از المانهای محتوا
در WPBakery Page Builder، هر المان محتوا نهتنها یک قطعه نمایش است، بلکه یک وزن عملکردی دارد که میتواند سرعت بارگذاری و تجربه کاربری را تحت تأثیر قرار دهد. بنابراین استفاده هوشمندانه از این المانها به معنی انتخاب دقیق نوع عنصر، موقعیتگذاری معقول و تنظیمات بهینه است. با در نظر گرفتن این نکات، میتوانید صفحات زیبا و در عین حال سبکوزن بسازید.
المانهای محتوا بهصورت کلی به سه دسته تقسیم میشوند: متنی (مانند بلوک متن، سرفصلها)، رسانهای (عکس، ویدئو، اسلایدر) و تعاملی (دکمه، فرم تماس، تبها). برای هر دسته یک سری اصول پایه وجود دارد. متن باید بهصورت پاراگرافهای کوتاه و با استفاده از تگهای یا برای تاکید بهینه شود. تصاویر و ویدئوها باید قبل از بارگذاری فشرده شوند و از گزینههای lazy‑load در WPBakery بهرهبرداری شود. المانهای تعاملی بهتر است فقط در مکانهای کلیدی قرار گیرند تا از شلوغی صفحه جلوگیری شود.
در ادامه چند نکته عملی برای هر دسته آورده شده است:
- متن: از بلوک «Text Block» برای محتواهای طولانی استفاده کنید و از «Custom Heading» فقط برای عناوین اصلی بهره بگیرید.
- تصویر: از المان «Single Image» بهجای «Image Gallery» در صورتی که تنها یک تصویر نیاز است، استفاده کنید؛ این کار درخواستهای HTTP را کاهش میدهد.
- ویدئو: بهجای بارگذاری مستقیم ویدئو، از «Video Player» با گزینه «Embed» (مثلاً YouTube) استفاده کنید تا پردازش سرور به حداقل برسد.
- دکمه/CTA: رنگ و اندازه دکمه را طوری تنظیم کنید که با بقیه طراحی هماهنگ باشد و از افزودن بیش از یک CTA در هر بخش خودداری کنید.
- فرم: فرم تماس ساده را با المان «Contact Form 7 Integration» بهکار بگیرید و فیلدهای غیرضروری را حذف کنید.
| دسته المان | مثال رایج | نکته بهینهسازی |
|---|---|---|
| متن | Text Block | استفاده از shortcodes برای تقسیم محتوا |
| رسانه | Single Image / Video Player | فعالسازی lazy‑load و فشردهسازی فایلها |
| تعاملی | Button, Contact Form | حداکثر یک CTA در هر سطر؛ حذف فیلدهای زائد |
به عنوان مثال، فرض کنید میخواهید صفحه «درباره ما» را طراحی کنید. ابتدا یک ردیف دو ستونی میسازید؛ در ستون چپ یک «Single Image» با تصویر تیم و lazy‑load، در ستون راست یک «Text Block» برای توضیح ماموریت شرکت. سپس یک «Button» با متن «تماس با ما» در پایین قرار میدهید و از گزینه «Smooth Scroll» برای هدایت به فرم تماس استفاده میکنید. این ترکیب ساده، وزن صفحه را پایین نگه میدارد و در عین حال اطلاعات کلیدی را بهصورت واضح به کاربر میرساند.
بهینهسازی واکنشگرایی و سازگاری موبایل
یکی از مهمترین مسائلی که هنگام استفاده از WPBakery Page Builder باید به آن توجه کنید، واکنشگرایی (Responsive) صفحات است. این ابزار مبتنی بر سیستم ردیف‑ستون (Row‑Column) است و هر ردیف میتواند به صورت خودکار در اندازههای مختلف صفحهنمایش تنظیم شود. برای اینکه محتوای شما در موبایل، تبلت و دسکتاپ بهدرستی نمایش داده شود، ابتدا باید «نقطهشکنها» (breakpoints) مناسب را تعریف کنید؛ معمولاً این نقاط شامل 320 px برای موبایل کوچک، 768 px برای تبلت و 1024 px برای دسکتاپ میشوند.
برای اعمال تنظیمات واکنشگرایی در WPBakery، مراحل زیر را دنبال کنید:
- انتخاب ردیف (Row): در پنجره تنظیمات ردیف، تب Design Options را باز کنید و گزینه «Responsive Options» را فعال کنید.
- تنظیم عرض ستونها: در بخش
Column widthمیتوانید برای هر breakpoint مقدار درصدی یا پیکسل دلخواه وارد کنید؛ بهعنوان مثال برای موبایل میتوانید تمام ستونها را به 100 % تنظیم کنید. - پنهانسازی یا نمایش عناصر: با استفاده از گزینه «Hide on device» میتوانید عناصر خاصی را فقط برای دسکتاپ یا فقط برای موبایل مخفی کنید.
پس از پیکربندی، حتماً پیشنمایش موبایل را در ویرایشگر فعال کنید. اگر نیاز به جزئیات بیشتر داشتید، میتوانید از CSS سفارشی با @media query استفاده کنید. مثال زیر، ارتفاع یک ردیف را در صفحههای زیر 600 px به 200 px کاهش میدهد:
@media (max-width: 600px) {
.vc_row.my-custom-row { height: 200px; }
}
بهینهسازی سرعت بارگذاری در دستگاههای موبایل نیز نقش کلیدی دارد. از تصاویر بهصورت responsive (با استفاده از ویژگی srcset یا افزونههای بهینهساز تصویر) بهره ببرید و لود تنبل (lazy‑load) را برای رسانههای سنگین فعال کنید. همچنین، سعی کنید تعداد ردیف و ستونهای تو در تو را به حداقل برسانید؛ هرچقدر ساختار صفحه سادهتر باشد، پردازش مرورگرهای موبایل سریعتر انجام میشود.
| Breakpoint | پیشنهاد عرض ستون | نکته کلیدی |
|---|---|---|
| ≤ 480 px (موبایل) | 100 % | تمام ستونها به ردیف واحد تبدیل شوند |
| 481‑768 px (تبلت) | 50 % - 100 % | دو ستون در ردیف، اگر محتوا اجازه دهد |
| > 768 px (دسکتاپ) | 25 % - 33 % | سه یا چهار ستون، بسته به طرح کلی |
افزودن کد سفارشی و افزونهها
افزودن کد سفارشی به WPBakery Page Builder دو هدف اصلی دارد: ارتقاء ظاهر یا رفتار المانها که با تنظیمات پیشفرض امکانپذیر نیست، و ادغام قابلیتهای خاص که تنها از طریق اسکریپت یا استایلهای اختصاصی میتوانند پیاده شوند. این کار را میتوان در سطوح مختلف انجام داد؛ از استفاده مستقیم المان Raw HTML/JS تا افزودن کد به فایلهای قالب یا استفاده از افزونههای کمکی.
برای افزودن CSS سفارشی، دو مسیر رایج وجود دارد:
- از منوی
WPBakery → General Settings → Custom CSSمستقیماً استایلها را وارد کنید. این روش سریع است اما در صورت تغییر تم یا بهروزرسانی WPBakery، محتوا حفظ میشود. - از طریق
Appearance → Customize → Additional CSSیا فایلstyle.cssدر یک child theme (قالب فرزند) استفاده کنید. این گزینه مطمئنتر است چون تمام تغییرات در قالب فرزند ذخیره میشوند و در بروزرسانیهای آینده از دست نمیروند.
در مورد JavaScript، دو روش معمول میتوانید بکار ببرید:
- المان
Raw JSرا به صفحه اضافه کنید و اسکریپت خود را داخل تگچکلیست سریع
- ساختار پایه صفحهساز را بشناسید.
- افزونه را بهدرستی نصب و فعال کنید.
- ردیفها را بهصورت گامبهگام ایجاد کنید.
- المانهای محتوا را بهکاربردی ترکیب کنید.
- طراحی را برای واکنشگرایی موبایل بهینهسازی کنید.
- کدهای سفارشی و افزونههای کمکی را بهدقت ادغام کنید.
- بهروزرسانیها و عیبیابی پیشرفته را بهصورت منظم انجام دهید.
اکنون میتوانید با اطمینان بیشتری صفحات پویا و سازگار بسازید. به کارگیری نکات ارائهشده باعث تسهیل روند طراحی و بهبود عملکرد سایت خواهد شد. اگر سؤال یا تجربهای دارید، خوشحال میشوم بشنوم.