جدید!
سرور ابری ساعتی فعال شد. ۱۰۰ هزار تومان اعتبار هدیه بگیرید
به اشتراک بگذارید
آموزش وردپرس | بلاگ وبداده
طراحی صفحه محصول حرفهای با صفحهساز Fusion Builder
صفحهٔ محصول قلب هر فروشگاه اینترنتی است. در این راهنما یاد میگیرید چطور با صفحهساز فیوژن بیلدر (Avada) یک صفحهٔ محصول سفارشی و حرفهای بسازید.
طراحی صفحه محصول فیوژن بیلدر یعنی رهاکردن قالب پیشفرض ووکامرس و ساختن یک چیدمان اختصاصی که دقیقاً همان چیزی را نشان دهد که برند شما میخواهد. صفحهساز فیوژن بیلدر که امروز با نام «Avada Builder» شناخته میشود، همراه با قالب Avada عرضه میشود و ابزار «Avada WooCommerce Builder» را در اختیار شما میگذارد تا بدون نوشتن حتی یک خط کد، گالری تصویر، دکمهٔ افزودن به سبد، توضیحات و مشخصات محصول را هرجا که بخواهید بچینید. در این مقاله ابتدا روشن میکنیم این قابلیت چیست و چرا مهم است، سپس گامبهگام یک صفحهٔ محصول سفارشی میسازیم و در پایان معایب و نکات واقعی آن را صادقانه مرور میکنیم.
- ابزار بومی، نه افزونهٔ جداگانه: طراحی صفحهٔ محصول با امکان «Avada WooCommerce Builder» انجام میشود که داخل خودِ قالب Avada قرار دارد.
- روش کار = Layout Section: یک «بخش چیدمان محتوا» میسازید، آن را با المانها طراحی میکنید و با یک «چیدمان شرطی» به همهٔ محصولات اختصاص میدهید.
- ۳۶ المان اختصاصی ووکامرس: از گالری و قیمت تا دکمهٔ خرید و تبهای محصول، همه بهصورت المان آماده در دسترساند.
- نام تغییر کرده: «Fusion Builder» از نسخهٔ 7.0 به «Avada Builder» تغییر نام داده؛ منظور هر دو یکی است.
- نکتهٔ صادقانه: Avada یک قالب تجاری و سنگین است؛ اجرای روان آن به هاست با منابع کافی و نسخهٔ بهروز PHP وابسته است.
در یک جمله
برای ساخت صفحهٔ محصول سفارشی در Avada، کافی است از مسیر Avada → Layouts یک «Content Layout Section» بسازید، آن را با المانهای ووکامرس طراحی کنید و سپس با یک «Conditional Layout» شرط «All Products» را روی آن اعمال کنید تا روی تمام صفحههای محصول نمایش داده شود.
احتمالاً این مقاله را باز کردهاید چون از قالب Avada استفاده میکنید و میخواهید صفحهٔ محصول فروشگاهتان از حالت پیشفرض و کلیشهای خارج شود. خبر خوب این است که برای این کار به هیچ کدنویسی نیازی ندارید. در ادامه با مسیر دقیق هر گزینه، مرحلهبهمرحله پیش میرویم تا خودتان بتوانید یک صفحهٔ محصول حرفهای بسازید.
طراحی صفحه محصول فیوژن بیلدر چیست و چه کاربردی دارد؟
قالب Avada یکی از پرفروشترین قالبهای وردپرس در بازار جهانی است و همراه با یک صفحهساز اختصاصی به نام فیوژن بیلدر (Fusion Builder) عرضه میشود. نکتهٔ مهمی که باید بدانید این است: از نسخهٔ 7.0 این صفحهساز رسماً به «Avada Builder» تغییر نام داده است. پس اگر در آموزشهای قدیمی نام «فیوژن بیلدر» و در پیشخوان سایت خود نام «Avada Builder» را دیدید، هر دو به یک ابزار اشاره میکنند. برای فعالشدن این صفحهساز، دو افزونهٔ الزامی Avada Core و Avada Builder باید نصب باشند.
منظور از طراحی صفحهٔ محصول با این صفحهساز، ساختن یک «چیدمان» (Layout) کاملاً سفارشی برای صفحهٔ تکمحصول ووکامرس است؛ بهجای اینکه به قالب استاندارد و ثابت ووکامرس بسنده کنید. یک تشبیه ساده کمک میکند: صفحهٔ محصول پیشفرض ووکامرس مثل یک ویترین آمادهٔ فروشگاهی است که همهجا شبیه هم است، اما Avada WooCommerce Builder به شما اجازه میدهد ویترین را از پایه بچینید؛ تعیین کنید تصویر محصول کجا باشد، دکمهٔ خرید چه شکلی داشته باشد و مشخصات فنی در چه قالبی نمایش داده شوند.
نکتهٔ کلیدی
طبق مستندات رسمی Avada، برای طراحی صفحهٔ محصول ۳۶ المان اختصاصی ووکامرس در اختیار شماست (مانند گالری تصویر، قیمت، دکمهٔ افزودن به سبد و تبهای محصول) و علاوه بر آنها میتوانید از بیش از ۱۵۰ المان طراحی و چیدمان عمومی Avada هم استفاده کنید.
اگر تازه در حال راهاندازی فروشگاه هستید، ابتدا مطمئن شوید وردپرس و ووکامرس شما درست نصب شدهاند؛ برای این کار میتوانید راهنمای نصب وردپرس روی هاست سیپنل را ببینید و سپس سراغ طراحی صفحهٔ محصول بیایید.
چرا طراحی سفارشی صفحهٔ محصول برای فروشگاه شما مهم است؟
صفحهٔ محصول جایی است که تصمیم نهایی خرید در آن گرفته میشود. یک چیدمان پیشفرض و کلیشهای معمولاً همهٔ اطلاعات را دارد، اما نمیتواند مزیتهای محصول شما را برجسته کند یا کاربر را بهسمت دکمهٔ خرید هدایت کند. وقتی این صفحه را سفارشی طراحی میکنید، کنترل کاملی روی تجربهٔ خرید مشتری به دست میآورید. مهمترین مزیتهای این کار عبارتاند از:
- هویت بصری یکدست: رنگها، فونتها و چیدمان صفحهٔ محصول با برند شما هماهنگ میشود و فروشگاهتان حرفهایتر دیده میشود.
- افزایش نرخ تبدیل: با قراردادن دکمهٔ خرید، تخفیف و اعتمادسازها (مانند نظرات) در جای درست، احتمال تکمیل خرید بیشتر میشود.
- نمایش بهتر اطلاعات: میتوانید مشخصات فنی، ویدیو و تبهای سفارشی را دقیقاً همانطور که مناسب محصول شماست بچینید.
- یکبار طراحی، همهجا اجرا: با «چیدمان شرطی»، یک طراحی برای تمام محصولات اعمال میشود و لازم نیست تکتک صفحهها را دستی بسازید.
تفاوت با صفحهساز عمومی
برخلاف طراحی یک برگهٔ ثابت، صفحهٔ محصول باید «پویا» باشد؛ یعنی یک طرح واحد بسازید و ووکامرس بهصورت خودکار داده هر محصول (نام، قیمت، تصویر) را داخل همان قالب قرار دهد. Avada WooCommerce Builder دقیقاً برای همین ساخته شده است.
آموزش گامبهگام طراحی صفحهٔ محصول با Avada WooCommerce Builder
حالا به بخش عملی میرسیم. پیش از شروع، توصیه میکنیم از سایت خود یک نسخهٔ پشتیبان کامل بگیرید و در صورت امکان تغییرات را ابتدا روی یک محیط تست انجام دهید. مسیر کار در چهار گام خلاصه میشود.
گام اول: بررسی پیشنیازها
سه پیشنیاز باید فراهم باشد. نخست، قالب Avada باید فعال و ثبت (Register) شده باشد و دو افزونهٔ الزامی Avada Core و Avada Builder نصب و فعال باشند. دوم، افزونهٔ ووکامرس باید نصب و فعال باشد. سوم، و بسیار مهم: باید دستکم یک محصول ووکامرس از قبل ساخته باشید، چون صفحهساز از دادهٔ همان محصول برای نمایش پیشنمایش طراحی استفاده میکند. بدون وجود محصول، امکان دیدن نتیجهٔ کار وجود ندارد.
گام دوم: ساخت «بخش چیدمان محتوا» (Content Layout Section)
از پیشخوان وردپرس به مسیر «Avada → Layouts → Layout Section Builder» بروید. نوع بخش را روی «Content» تنظیم کنید (چون محصول در ناحیهٔ محتوای صفحه نمایش داده میشود)، یک نام برای آن بگذارید (مثلاً WooProduct) و روی Create کلیک کنید. توجه کنید که المانهای ووکامرس فقط در همین نوع «Content Layout Section» در دسترس قرار میگیرند.
هشدار: بخش چیدمان روی سایت زنده
بهمحض اینکه یک Layout Section را به چیدمان شرطی اختصاص دهید، بلافاصله روی سایت زنده اعمال میشود. پس اگر روی سایت واقعی کار میکنید، ابتدا طراحی بخش را کامل کنید و تنها در انتها آن را به شرط All Products وصل کنید تا بازدیدکنندگان صفحهٔ ناقص نبینند.
گام سوم: طراحی چیدمان با المانهای ووکامرس
حالا وارد ویرایشگر Avada شوید. ابتدا از تب Layout Section Options گزینهٔ «View Dynamic Content» را روی «Product» بگذارید و یک محصول نمونه انتخاب کنید تا پیشنمایش واقعی ببینید. سپس با یک Container/Column شروع کنید و المانهای ووکامرس را در جای دلخواه بچینید: المان گالری تصویر، عنوان محصول، قیمت، دکمهٔ افزودن به سبد، توضیح کوتاه و تبهای اطلاعات محصول. برخی المانها فقط یکبار در هر بخش قابلاستفادهاند و پس از افزودن، خاکستری (غیرفعال) میشوند. برای شروع سریعتر هم میتوانید از قالبهای آمادهٔ «Avada Studio» استفاده کنید که چند نمونه برای صفحهٔ تکمحصول دارد.
گام چهارم: ساخت «چیدمان شرطی» و اعمال روی محصولات
پس از تکمیل طراحی، به مسیر «Avada → Layouts → Layout Builder» بروید و یک Layout جدید بسازید (مثلاً WooProducts). روی «Select Content» کلیک کنید، از بخش «Existing Section» همان بخشی را که ساختید انتخاب کنید. سپس روی «Manage Conditions» بزنید، به تب Products بروید و «All Products» را انتخاب کنید. همین. از این پس تمام صفحههای تکمحصول با طراحی سفارشی شما نمایش داده میشوند. اگر بخواهید، میتوانید چند چیدمان مختلف بسازید و هرکدام را به دسته یا محصول خاصی اختصاص دهید.
برای اینکه بدانید کدام روش برای شما مناسبتر است، در جدول زیر دو رویکرد ممکن در Avada را مقایسه کردهایم:
مقایسهٔ دو روش سفارشیسازی صفحهٔ محصول در Avada:
| ویژگی | تنظیمات سراسری ووکامرس Avada | Avada WooCommerce Builder (Layout Section) |
|---|---|---|
| مسیر دسترسی | Avada → Options → WooCommerce | Avada → Layouts → Layout Section Builder |
| میزان انعطاف | محدود؛ فقط تنظیمات آماده | کامل؛ چیدمان کاملاً سفارشی |
| نیاز به مهارت | بسیار ساده | متوسط (کار با ویرایشگر) |
| طراحی سفارشی چیدمان | ندارد | دارد (۳۶ المان ووکامرس) |
| مناسب برای | شروع سریع و تغییرات جزئی | فروشگاه حرفهای با هویت اختصاصی |
جمعبندی جدول: اگر فقط میخواهید چند تنظیم کلی را عوض کنید، بخش Options کافی است؛ اما برای یک صفحهٔ محصول واقعاً سفارشی و متمایز، روش Layout Section انتخاب درست است.
معایب، نکات مهم و نقش هاست در اجرای Avada
Avada و صفحهساز آن ابزار قدرتمندی هستند، اما مثل هر ابزار حرفهای، چند محدودیت واقعی دارند که بهتر است با چشم باز بدانید:
- قالب تجاری و پولی: Avada نسخهٔ رایگان مستقل ندارد و باید لایسنس آن را تهیه کنید؛ برخلاف بعضی صفحهسازها که نسخهٔ رایگان دارند.
- سنگینبودن: Avada امکانات بسیار زیادی دارد و همین میتواند بدون بهینهسازی (کش، بهینهسازی تصویر، Performance Wizard) روی سرعت سایت اثر بگذارد.
- منحنی یادگیری: تعداد زیاد گزینهها و المانها ممکن است در ابتدا برای کاربر تازهکار گیجکننده باشد.
- وابستگی به قالب: چیدمانهایی که با Avada Builder ساخته میشوند به این قالب وابستهاند؛ اگر روزی قالب را عوض کنید، طراحی صفحهها بههم میریزد.
نقلقول از مستندات رسمی Avada
مستندات رسمی Avada دربارهٔ این قابلیت میگوید: «استفاده از Avada WooCommerce Builder به شما اجازه میدهد هر چیدمانی که میخواهید برای محصولات ووکامرس خود طراحی کنید» و برای این کار ۳۶ المان اختصاصی ووکامرس در اختیار شماست. همین انعطاف بالا نشان میدهد که چرا این ابزار برای فروشگاههای حرفهای جذاب است. منبع: avada.com — The Avada WooCommerce Builder (Product Layouts).
اما این انعطاف و امکانات فراوان یک روی دیگر هم دارد: هرچه ابزار قدرتمندتر و سنگینتر باشد، به زیرساخت بهتری روی هاست نیاز دارد تا روان اجرا شود.
هاست وردپرس وبداده؛ بستر مناسب اجرای فروشگاه Avada
در تجربهٔ پشتیبانی ما در وبداده، بخش قابلتوجهی از مشکلاتی که کاربران قالبهای سنگین مانند Avada گزارش میکنند، مثل «کندی ویرایشگر» یا «صفحهٔ سفید» هنگام طراحی، پس از تأمین حافظهٔ کافی و بهروزرسانی نسخهٔ PHP روی هاست برطرف میشود. یک فروشگاه ووکامرس هم نسبت به یک سایت ساده به منابع بیشتری نیاز دارد. به همین دلیل روی این موارد تأکید داریم:
✅ هاست وردپرس وبداده با منابع مناسب و نسخهٔ PHP بهروز برای اجرای روان قالبها و صفحهسازها.
✅ زیرساخت نسل جدید HPE (Gen11 و Gen10) برای پایداری و پاسخ سریع سرور فروشگاه شما.
✅ دیتاسنترهای ایران، هلند و آلمان برای انتخاب نزدیکترین لوکیشن به مشتریان شما.
✅ پشتیبانی فنی ۲۴ ساعته برای کمک در تنظیم حافظه، نسخهٔ PHP و رفع خطاهای احتمالی.
✅ زیرساخت نسل جدید HPE (Gen11 و Gen10) برای پایداری و پاسخ سریع سرور فروشگاه شما.
✅ دیتاسنترهای ایران، هلند و آلمان برای انتخاب نزدیکترین لوکیشن به مشتریان شما.
✅ پشتیبانی فنی ۲۴ ساعته برای کمک در تنظیم حافظه، نسخهٔ PHP و رفع خطاهای احتمالی.
اگر میخواهید فروشگاه وردپرسی شما با Avada سریع و بدون خطا اجرا شود، و برای مدیریت سادهتر افزونهها و فایلهای سایت هاست سی پنل وبداده گزینهٔ مناسبی است.
پرسشهای پرتکرار دربارهٔ طراحی صفحهٔ محصول در Avada
فرق «فیوژن بیلدر» و «Avada Builder» چیست؟
هیچ فرقی ندارند و به یک ابزار اشاره میکنند. صفحهساز اختصاصی قالب Avada در گذشته «Fusion Builder» نام داشت و از نسخهٔ 7.0 رسماً به «Avada Builder» تغییر نام داد. بنابراین اگر در آموزشهای قدیمی نام فیوژن بیلدر و در پیشخوان سایت خود نام Avada Builder را میبینید، هر دو همان صفحهساز هستند.
برای طراحی صفحهٔ محصول به افزونهٔ جداگانه نیاز دارم؟
خیر. قابلیت «Avada WooCommerce Builder» بهصورت بومی داخل خودِ قالب Avada قرار دارد و با نصب دو افزونهٔ الزامی Avada Core و Avada Builder و همچنین افزونهٔ ووکامرس فعال میشود. البته افزونههای شخصثالثی هم برای این کار وجود دارند، اما برای یک صفحهٔ محصول سفارشی معمولاً همان ابزار بومی Avada کافی است.
آیا برای این کار باید کدنویسی بلد باشم؟
نه. تمام مراحل، از ساخت Layout Section تا چیدن المانهای ووکامرس و اعمال چیدمان شرطی، بهصورت کاملاً بصری و با کشیدنورهاکردن انجام میشوند. تنها جایی که ممکن است به کمک فنی نیاز پیدا کنید، تنظیمات هاست مانند افزایش حافظهٔ PHP است که آن هم معمولاً از طریق پشتیبانی هاست انجام میشود.
چرا باید حتماً از قبل یک محصول ساخته باشم؟
چون صفحهساز برای نمایش پیشنمایش طراحی، از دادهٔ یک محصول واقعی (نام، قیمت، تصویر) استفاده میکند. اگر هیچ محصولی وجود نداشته باشد، نمیتوانید ببینید طرح شما در عمل چطور نمایش داده میشود. پس ابتدا دستکم یک محصول نمونه در ووکامرس بسازید و سپس طراحی را شروع کنید.
طراحی من روی همهٔ محصولات اعمال میشود یا فقط یکی؟
بستگی به شرطی دارد که تعیین میکنید. اگر در مرحلهٔ Conditional Layout شرط «All Products» را انتخاب کنید، طراحی روی تمام صفحههای محصول اعمال میشود. اما میتوانید چند چیدمان مختلف بسازید و هرکدام را با شرطهای خاص به دستهبندی یا محصول مشخصی اختصاص دهید و حتی برخی محصولات را از یک چیدمان مستثنا کنید.
آیا استفاده از Avada سرعت فروشگاه را کم میکند؟
Avada قالب پرامکاناتی است و اگر بهینه نشود میتواند بر سرعت اثر بگذارد. اما با ابزار داخلی Performance Wizard، استفاده از افزونهٔ کش، بهینهسازی تصاویر و مهمتر از همه اجرای سایت روی هاستی با منابع کافی و نسخهٔ PHP بهروز، میتوان به عملکرد خوبی رسید. کیفیت هاست در فروشگاههای ووکامرس نقش تعیینکنندهای دارد.
اگر روزی قالب را از Avada عوض کنم چه اتفاقی میافتد؟
چیدمانهایی که با Avada Builder ساختهاید به این قالب وابستهاند؛ بنابراین با تغییر قالب، محتوای متنی محصولات باقی میماند اما طراحی سفارشی صفحهها از بین میرود. اگر قصد مهاجرت دارید، بهتر است پیش از تغییر قالب، برای صفحههای محصول طرح جایگزین آماده کنید تا فروشگاه شما بدون وقفهٔ بصری بماند.
تفاوت طراحی صفحهٔ محصول با طراحی یک برگهٔ معمولی چیست؟
برگهٔ معمولی محتوای ثابت دارد، اما صفحهٔ محصول باید «پویا» باشد؛ یعنی یک طرح واحد میسازید و ووکامرس داده هر محصول را بهصورت خودکار داخل همان طرح قرار میدهد. به همین دلیل بهجای ساختن برگه، از Content Layout Section و المانهای پویا استفاده میکنید تا یک طراحی برای هزاران محصول کار کند.
آیا میتوانم بدون طراحی از صفر، از نمونههای آماده استفاده کنم؟
بله. Avada Studio مجموعهای از محتوای پیشساخته دارد که چند نمونه برای صفحهٔ تکمحصول ووکامرس هم در آن هست. کافی است هنگام ساخت Content Layout Section بهجای شروع از خالی، روی دکمهٔ Avada Studio کلیک کنید، یک نمونه را انتخاب و سپس آن را مطابق سلیقهٔ خود سفارشی کنید.
جمعبندی و قدم بعدی شما
در این راهنما دیدیم که ساختن یک صفحهٔ محصول سفارشی در قالب Avada بههیچوجه کار پیچیدهای نیست. ابتدا روشن کردیم که صفحهساز فیوژن بیلدر همان Avada Builder امروزی است و ابزار Avada WooCommerce Builder با ۳۶ المان اختصاصی، طراحی صفحهٔ محصول را ممکن میکند. سپس در چهار گام یک چیدمان کامل ساختیم: بررسی پیشنیازها، ساخت Content Layout Section، طراحی با المانهای ووکامرس، و اعمال چیدمان شرطی روی همهٔ محصولات. در پایان هم معایب واقعی این قالب و راه مدیریت آنها را صادقانه مرور کردیم. مهمترین توصیه این است: طراحی حرفهای را روی هاستی با منابع کافی اجرا کنید تا هم ویرایشگر روان کار کند و هم فروشگاه شما سریع بارگذاری شود.
جمعبندی سریع
✅ صفحهساز «فیوژن بیلدر» همان «Avada Builder» است.
✅ طراحی صفحهٔ محصول با Content Layout Section و المانهای ووکامرس انجام میشود.
✅ با Conditional Layout و شرط All Products طرح روی همهٔ محصولات اعمال میشود.
✅ اجرای روان این قالب سنگین به هاست با منابع کافی و PHP بهروز وابسته است.
✅ طراحی صفحهٔ محصول با Content Layout Section و المانهای ووکامرس انجام میشود.
✅ با Conditional Layout و شرط All Products طرح روی همهٔ محصولات اعمال میشود.
✅ اجرای روان این قالب سنگین به هاست با منابع کافی و PHP بهروز وابسته است.
در صورتی که سوالی داشتید میتوانید در بخش نظرات با ما در ارتباط باشید.
