آموزش طراحی صفحه محصول با المنتور [آموزش ویدیویی و بازطراحی ووکامرس]

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

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

Elementor در حال حاضر برای قالب Single Product ووکامرس مجموعه ای از ویجت های اختصاصی مانند عنوان محصول، تصاویر، قیمت، توضیحات کوتاه، افزودن به سبد خرید، متای محصول، تب های اطلاعات محصول و محصولات مرتبط ارائه می کند.

در این آموزش، ابتدا تفاوت میان ویرایش یک محصول و ساخت قالب کلی صفحه محصول را مشخص می کنیم، سپس مرحله به مرحله ساخت یک قالب Single Product را توضیح می دهیم و در ادامه سراغ بازطراحی صفحه محصول، چیدمان حرفه ای، طراحی نسخه موبایل، نمایش شرطی قالب و نکات مهم تجربه کاربری و هم چنین ارائه قیمت المنتور حرفه ای می پردازیم.

طراحی صفحه محصول با المنتور دقیقاً به چه معناست؟

وقتی درباره طراحی صفحه محصول با المنتور صحبت می کنیم، منظور فقط باز کردن یک محصول و تغییر متن یا تصویر آن نیست. در حالت حرفه ای، شما یک قالب برای صفحه محصول ایجاد می کنید و مشخص می کنید اطلاعات هر محصول از ووکامرس به صورت پویا داخل این قالب نمایش داده شود. برای مثال، فرض کنید یک فروشگاه ۲۰۰ محصول دارد. اگر برای هر محصول یک صفحه جداگانه را از ابتدا طراحی کنید، تغییر دادن ساختار صفحات بسیار زمان بر خواهد بود. اما در یک قالب Single Product، می توانید یک ساختار واحد طراحی کنید و اطلاعات اختصاصی هر محصول مانند عنوان، تصویر، قیمت، موجودی، توضیحات و مشخصات از اطلاعات همان محصول خوانده شود.

به همین دلیل، قالب Single Product را باید بیشتر شبیه یک الگوی طراحی برای صفحات محصول در نظر گرفت، نه یک صفحه محصول معمولی. مستندات فعلی Elementor نیز Single Product را به عنوان یک قالب قابل استفاده برای استانداردسازی صفحات محصول معرفی می کند. اگر هنوز المنتور را روی سایت نصب نکرده اید، ابتدا راهنمای نصب المنتور را بررسی کنید. همچنین اگر در انتخاب نسخه رایگان و پرو تردید دارید، مطالعه راهنمای المنتور پرو یا رایگان؟ می تواند قبل از شروع طراحی دید دقیق تری به شما بدهد.

آموزش ساخت صفحه محصولات با المنتور

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

مرحله اول: ورود به Theme Builder المنتور

از پیشخوان وردپرس وارد بخش قالب های المنتور شوید و به Theme Builder بروید. در نسخه های فعلی Elementor، قالب های مربوط به محصولات ووکامرس در بخش Single Product مدیریت می شوند. در این بخش می توانید قالب های Single Product موجود را مشاهده کنید یا یک قالب جدید بسازید. مسیر کلی ساخت قالب در مستندات فعلی Elementor به شکل Templates > Theme Builder > Single Product > Add New توضیح داده شده است.

مرحله دوم: ایجاد قالب Single Product

بعد از انتخاب Single Product یک نام برای قالب وارد کنید؛ برای مثال:

قالب صفحه محصول فروشگاه

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

مرحله سوم: طراحی ساختار اصلی صفحه

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

• ستون اول: تصاویر محصول
• ستون دوم: عنوان، امتیاز، قیمت، توضیحات کوتاه و دکمه خرید

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

مرحله چهارم: اضافه کردن عنوان محصول

برای نمایش نام هر محصول از ویجت Product Title استفاده کنید. نکته مهم این است که عنوان را به صورت دستی برای یک محصول خاص وارد نکنید؛ این ویجت می تواند عنوان محصول جاری را به صورت پویا دریافت کند. در تنظیمات این ویجت می توانید تگ HTML، اندازه، ترازبندی و تایپوگرافی عنوان را تنظیم کنید. مستندات Elementor نیز امکان انتخاب تگ های مختلف HTML برای عنوان محصول را ذکر می کند. از نظر ساختار محتوا، معمولاً بهتر است تنها عنوان اصلی محصول نقش H1 را داشته باشد تا صفحه از نظر سلسله مراتب هدینگ دچار آشفتگی نشود.

مرحله پنجم: اضافه کردن تصاویر محصول

در بخش تصاویر، ویجت Product Images را به قالب اضافه کنید. این بخش وظیفه نمایش تصویر اصلی و گالری محصول را بر عهده دارد. یکی از مهم ترین نکات طراحی این قسمت، ایجاد تعادل میان اندازه تصویر و فضای اطراف آن است. تصویر باید به اندازه ای بزرگ باشد که جزئیات محصول را نشان دهد، اما نباید بخش عمده صفحه را اشغال کند. در Elementor می توان ظاهر تصویر اصلی، تصاویر کوچک گالری، فاصله بین تصاویر و برخی ویژگی های بصری مانند حاشیه را کنترل کرد.

مرحله ششم: نمایش قیمت محصول

بعد از عنوان و تصاویر، قیمت یکی از مهم ترین عناصر صفحه است. ویجت Product Price را در قسمت اطلاعات محصول قرار دهید. در این بخش می توانید ترازبندی، تایپوگرافی، رنگ و ظاهر قیمت عادی و قیمت تخفیف خورده را تنظیم کنید. در مستندات Elementor برای ویجت قیمت، تنظیمات جداگانه ای برای قیمت فروش و قیمت تخفیف نیز ارائه شده است. از نظر تجربه کاربری، قیمت باید به راحتی قابل تشخیص باشد. استفاده بیش از حد از رنگ های مختلف یا اندازه های بسیار بزرگ می تواند ظاهر صفحه را شلوغ کند.

مرحله هفتم: افزودن توضیحات کوتاه محصول

توضیحات کوتاه باید در نزدیکی قیمت و دکمه خرید قرار بگیرد و مهم ترین اطلاعات اولیه محصول را منتقل کند. این بخش جای مناسبی برای یک پاراگراف کوتاه درباره مزیت اصلی محصول، کاربرد آن یا یک نکته مهم خرید است. برای این قسمت می توانید از ویجت Short Description استفاده کنید. Elementor این ویجت را به عنوان یکی از اجزای قالب Single Product ارائه می کند.

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

یکی از مهم ترین عناصر صفحه محصول، Add to Cart است. این ویجت باید در نقطه ای قرار بگیرد که بعد از مشاهده اطلاعات اصلی محصول، کاربر به راحتی آن را پیدا کند. در طراحی دکمه خرید به مواردی مانند اندازه مناسب، کنتراست، فاصله از قیمت، متن قابل فهم و نمایش صحیح در موبایل توجه کنید. نکته فنی مهم این است که ویجت Add to Cart در قالب WooCommerce Single اهمیت ویژه ای دارد و Elementor برای آن تنظیمات جداگانه ای در نظر گرفته است.

مرحله نهم: نمایش امتیاز محصول

اگر امکان ثبت امتیاز و نظر برای محصولات فعال است، نمایش امتیاز می تواند اطلاعات مفیدی در اختیار کاربر قرار دهد. ویجت Product Rating برای این منظور در Elementor وجود دارد. می توانید اندازه ستاره ها، فاصله آنها، رنگ و نحوه قرارگیری امتیاز را تنظیم کنید. اگر محصول هنوز هیچ امتیازی دریافت نکرده باشد، طبیعتاً امتیازی برای نمایش وجود نخواهد داشت.

مرحله دهم: نمایش متای محصول

اطلاعاتی مانند دسته بندی، برچسب و SKU را می توان با ویجت Product Meta نمایش داد. این بخش بهتر است بعد از اطلاعات اصلی محصول قرار گیرد و از نظر بصری وزن کمتری نسبت به عنوان، قیمت و دکمه خرید داشته باشد. Elementor برای Product Meta حالت هایی مانند نمایش جدولی، پشت سرهم یا در یک خط را ارائه می کند و امکان کنترل فاصله، جداکننده، رنگ و تایپوگرافی نیز وجود دارد.

مرحله یازدهم: اضافه کردن تب های اطلاعات محصول

در بخش پایین صفحه معمولاً باید جایی برای توضیحات کامل، اطلاعات تکمیلی و نظرات مشتریان وجود داشته باشد. ویجت Product Data Tabs برای نمایش این اطلاعات در قالب Single Product کاربرد دارد. این بخش را می توان به گونه ای طراحی کرد که از نظر بصری با سبک کلی فروشگاه هماهنگ باشد. رنگ تب ها، حالت فعال، تایپوگرافی، حاشیه، گوشه ها و ظاهر پنل محتوا قابل تنظیم است. در خود WooCommerce نیز اطلاعاتی مانند توضیحات، اطلاعات تکمیلی و نظرات می توانند در ساختار اطلاعات محصول نمایش داده شوند و نحوه ارائه آنها به قالب و ساختار فروشگاه وابسته است.

مرحله دوازدهم: نمایش محصولات مرتبط

در انتهای صفحه می توانید محصولات مرتبط را نمایش دهید تا کاربر بعد از بررسی محصول فعلی، گزینه های دیگری نیز در اختیار داشته باشد. ویجت Product Related برای همین هدف در Elementor وجود دارد و می توان تعداد محصولات، تعداد ستون ها، ترتیب نمایش و فاصله ها را تنظیم کرد. نکته مهم این است که Related Products با Upsell و Cross-sell یکسان نیست. WooCommerce محصولات مرتبط را بر اساس ارتباط دسته بندی ها و برچسب ها تعیین می کند، در حالی که Upsell و Cross-sell می توانند به صورت دستی برای محصول تعریف شوند.

چگونه صفحه محصول را بازطراحی کنیم؟

اگر فروشگاه شما از قبل صفحات محصول دارد، لزوماً نیازی نیست محصولات را حذف یا از ابتدا ایجاد کنید. در بسیاری از پروژه ها هدف اصلی، بازطراحی صفحه محصول موجود و ایجاد یک تجربه کاربری بهتر است. در این حالت ابتدا باید مشخص کنید که مشکل صفحه فعلی چیست. آیا تصاویر کوچک هستند؟ آیا قیمت و دکمه خرید به خوبی دیده نمی شوند؟ آیا توضیحات محصول بیش از حد طولانی و نامنظم است؟ آیا صفحه موبایل مناسب نیست؟ یا اینکه ظاهر صفحه با هویت بصری فروشگاه هماهنگ نیست؟ پاسخ این سؤال ها مشخص می کند که بازطراحی باید از کدام بخش شروع شود.

روش اول: بازطراحی قالب Single Product

برای فروشگاه هایی که تعداد زیادی محصول دارند، این روش معمولاً منطقی تر است. به جای ویرایش تک تک محصولات، یک قالب Single Product جدید ایجاد می کنید و طراحی را روی آن انجام می دهید. مزیت این روش این است که وقتی قالب به محصولات موردنظر اختصاص داده شود، ساختار طراحی در صفحات مربوطه به صورت یکپارچه اعمال می شود. Elementor نیز امکان تعیین Display Conditions برای قالب های ووکامرس را فراهم می کند؛ برای مثال می توانید قالب را روی همه محصولات، یک دسته محصول یا محصولات مشخص اعمال کنید.

روش دوم: ویرایش محتوای خود محصول

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

روش سوم: استفاده از محتوای پویا

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

آموزش ویدیویی ساخت صفحه محصولات با المنتور 

چطور صفحه محصول را از نظر تجربه کاربری بهتر کنیم؟

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

اطلاعات مهم را بالای صفحه قرار دهید

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

دکمه خرید را واضح طراحی کنید

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

از تصاویر باکیفیت استفاده کنید

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

فاصله گذاری را جدی بگیرید

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

طراحی صفحه محصول برای موبایل

یکی از مهم ترین مراحل بازطراحی صفحه محصول، بررسی نسخه موبایل است. ممکن است طراحی دسکتاپ کاملاً مناسب باشد اما در موبایل عنوان ها بیش از حد بزرگ، تصاویر نامتناسب یا دکمه خرید بیش از اندازه کوچک باشند. در Elementor بهتر است بعد از طراحی دسکتاپ، حالت تبلت و موبایل را نیز جداگانه بررسی کنید.

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

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

جمع بندی

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

اگر صفحه محصول فعلی شما ظاهر قدیمی دارد، ابتدا مشکلات واقعی آن را شناسایی کنید؛ سپس ساختار صفحه، تصاویر، قیمت، توضیحات، CTA، اطلاعات تکمیلی، نظرات و محصولات مرتبط را بازطراحی کنید. در نهایت نیز حتماً صفحه را با چند محصول مختلف و در اندازه های مختلف نمایشگر آزمایش کنید. برای توسعه مهارت های خود در طراحی با Elementor می توانید در کنار این آموزش، راهنماهای تخصصی مانند افزونه المنتور چیست؟، افزودن آیکون در المنتور، ساخت جدول در المنتور و ویجت تصویر در المنتور را نیز مطالعه کنید.

سؤالات متداول درباره طراحی صفحه محصول با المنتور

آیا برای طراحی صفحه محصول ووکامرس با المنتور به Elementor Pro نیاز داریم؟

برای ساخت قالب اختصاصی Single Product با WooCommerce Builder، استفاده از قابلیت های Elementor Pro مورد نیاز است. Elementor در مستندات رسمی، ساخت Single Product Template را در Theme Builder و بخش امکانات WooCommerce معرفی می کند.

آیا می توان یک قالب را روی تمام محصولات فروشگاه اعمال کرد؟

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

آیا می توان برای هر دسته محصول طراحی متفاوتی داشت؟

بله. با استفاده از Display Conditions می توانید قالب های متفاوتی ایجاد کنید و هر قالب را به محصولات یا دسته های موردنظر اختصاص دهید.

آیا اطلاعات محصول به صورت خودکار داخل قالب Elementor قرار می گیرد؟

در قالب Single Product، ویجت های اختصاصی ووکامرس اطلاعات محصول جاری را دریافت می کنند. به همین دلیل یک قالب می تواند برای محصولات مختلف استفاده شود و عنوان، قیمت، تصاویر و سایر اطلاعات هر محصول را نمایش دهد.

آیا می توان دکمه افزودن به سبد خرید را شخصی سازی کرد؟

بله. ویجت Add to Cart المنتور امکان کنترل بخش هایی از ظاهر و چیدمان دکمه خرید را فراهم می کند.

چرا محصول من در پیش نمایش Elementor درست نمایش داده نمی شود؟

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

آیا می توان صفحه محصول را برای موبایل جداگانه تنظیم کرد؟

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

تفاوت صفحه محصول و قالب Single Product چیست؟

صفحه محصول اطلاعات یک محصول مشخص را نمایش می دهد، اما Single Product Template یک الگوی طراحی است که می تواند برای چندین محصول استفاده شود و اطلاعات هر محصول را به صورت پویا دریافت کند.

آیا Related Products همان Upsell است؟

خیر. WooCommerce محصولات مرتبط را بر اساس ارتباط دسته ها و برچسب ها ایجاد می کند، در حالی که Upsell برای پیشنهاد محصولات جایگزین یا سطح بالاتر استفاده می شود و می تواند به صورت دستی برای محصول تعیین شود.

آیا می توان بدون کدنویسی یک صفحه محصول حرفه ای ساخت؟

برای بسیاری از نیازهای رایج، امکانات Elementor و WooCommerce کافی است و می توانید ساختار، چیدمان، تایپوگرافی و ظاهر بسیاری از بخش های صفحه را با رابط بصری کنترل کنید. برای قابلیت های بسیار اختصاصی ممکن است به CSS یا توسعه سفارشی نیاز باشد.