طراحی صفحه محصول با المنتور
- زمان مطالعه: 12 دقیقه
- به‌روز رسانی در 21 آبان 1403
طراحی صفحه محصول با المنتور یکی از نیازهای اساسی برای ساخت سایت فروشگاهی با المنتور و وردپرس است. در آموزش ساخت صفحه تک محصول با المنتور، به نکات کلیدی با جزئیات مهمی پرداختیم که به سادگی می‌توانید صفحه محصول ووکامرس را با المنتور بسازید. با تم فور همراه باشید.
سر فصل‌های این مقاله:
قبل از شروع آموزش، باید بدانید در کنار فعال بودن افزونه المنتور به افزونه المنتور پرو نیز نیاز دارید. برخی از قابلیت‌های المنتور و استفاده از ویجت‌ها یا عناصر آن، تنها با فعال کردن نسخه پرو امکان پذیر است.
ساخت الگوی صفحه محصول با المنتور
برای شروع طراحی صفحه محصول با المنتور، ابتدا به منوی الگوها یا قالب‌ها بروید و روی افزود الگوی جدید کلیک کنید.
همانطور که می‌دانید همه الگوهایی که می‌سازید در بخش الگوها قرار می‌گیرند و دسته بندی می‌شوند. سپس در پنجره‌ای که باز می‌شود، نوع الگو را صفحه محصول انتخاب کنید.
نام الگو را به دلخواه قرار دهید. مثلاً در تصویر بالا، نام الگو را صفحه محصولات قرار دادیم که بعداً بتوانیم به راحتی الگو را برای ویرایش مجدد پیدا کنیم.
بعد از این مراحل، به صفحه ویرایشگر المنتور هدایت می‌شوید. در اینجا کتابخانه الگوها مربوط به صفحه محصول ظاهر می‌شود. می‌توانید از این الگوها استفاده کنید. اما توصیه می‌کنیم بهتر است ابتدا خودتان از صفر یک الگوی صفحه محصول با المنتور را طراحی کنید.
این کار باعث می‌شود بعداً با تسلط و مهارت بیشتری صفحه محصول نهایی را بسازید.
پس کتابخانه الگو را ببندید و روی گزینه یا دکمه + (افزودن کانتینر یا بخش) کلیک کنید.
با کلیک روی + باید ساختار بخش یا کانتینر را مشخص کنید. مثلاً اگر می‌خواهید صفحه محصول المنتوری که می‌سازید، دو ستونه باشد گزینه مشخص شده را انتخاب کنید.
بعد از انتخاب ساختار، از طریق ویرایشگر المنتور، ابتدا به ویجت تصویر برای نمایش تصویر شاخص محصول نیاز داریم. البته ویجت تصویر محصول هم در دسترس است. اما امکانات و کنترل کمتری دارد.
تصویر شاخص محصول
با ویجت تصویر، می‌توانید برای تصویر شاخص، ابعاد و استایل مدنظرمان را در نظر بگیریم. همانند تصویر راهنمای زیر، روی برچسب داینامیک کلیک کنید تا تصویر شاخص محصول خودکار جایگزین این تصویر پیش‌فرض المنتور شود.
در مرحله انتخاب برچسب داینامیک، روی گزینه تصویر محصول قرار دهید. این کار باعث می‌شود تصویر شاخص محصول جایگزین این تصویر شود.
در نهایت، می‌ببینید تصویر یکی از محصولات نمایش داده می‌شود. در تب محتوا، شما می‌توانید وضوح تصویر محصول را مشخص کنید. اگر از قبل، تصویر محصول را در اندازه مناسب آپلود کردید و حجم زیادی ندارد، روی همین حالت پیش‌فرض یا روی حالت «کامل» قرار دهید.
برای تصویر شاخص محصول و سایر تصاویر محصولات، شدیداً توصیه می‌شود از فرمت webp استفاده کنید.
اما بهترین راه برای کنترل ابعاد تصویر برای نمایش در صفحه، تنظیمات تب استایل است. در اینجا می‌توان، اندازه نمایشی تصویر را مدیریت کرد. پیش‌فرض ابعاد به صورت درصدی % درنظر گرفته می‌شود. می‌شود حالت درصدی را روی px قرار داد. به تصویر راهنما توجه کنید.
به همین سادگی، توانستم تصویر شاخص محصول را به صفحه محصول المنتوری سایت‌مان اضافه کنیم.
افزودن عنوان به صفحه محصول
از بخش ویجت‌ها، ویجت عنوان محصول را بگیرید و روی ستون دیگر رها کنید. با این اقدام، عنوان محصول در سمت چپ تصویر محصول قرار می‌گیرد.
ویجت عنوان، نام محصولات را نمایش می‌دهد. این ویجت در کنار ویجت تصویر، الزامی‌ترین عناصر برای طراحی صفحه محصول با المنتور است.
در نظر داشته باشید که تگ HTML عنوان باید H1 باشد. پس به تب استایل بروید تا ظاهر آن را سفارشی کنید.
در تب استایل، می‌توان موقعیت یا جایگاه عنوان و همچنین رنگ بندی و تایپوگرافی آن را کنترل کرد.
نمایش قیمت در صفحه محصول
بعد از تصویر شاخص و عنوان، نیاز به نمایش قیمت محصول است. ویجت قیمت محصول را همانند توضیحات قبلی، بگیرید و در زیر عنوان محصول قرار دهید.
برای تنظیم رنگ بندی‌ها و شخصی سازی ظاهر قیمت محصول، در تب استایل می‌توانید این کار را انجام دهید.
دکمه افزودن به سبد خرید المنتور
به یکی از مهم‌ترین نیازهای طراحی صفحه محصول با المنتور یعنی دکمه افزودن به سبد خرید المنتور رسیدیم. در اینجا ویجت افزودن به سبد خرید را به صفحه محصول اضافه می‌کنیم.
این ویجت، دقیقاً دکمه ثبت سفارش یا همان خرید را در صفحه محصول نمایش می‌دهد. مشتری با کلیک روی آن، به صفحه سبد خرید و سپس پرداخت هدایت می‌شود.
در ادامه، از طریق تب استایل، امکاناتی برای کنترل ظاهر دکمه افزودن به سبد خرید المنتور تعبیه شده است.
افزودن اطلاعات محصول به صفحه
اگر می‌خواهید اطلاعاتی مانند: دسته بندی محصول و برچسب‌ها یا کد محصول را نمایش دهید باید از ویجت اطلاعات استفاده کنید.
این ویجت، دسته محصول و سایر مواردی که در بالا اشاره شد در صفحه محصول نمایش می‌دهد.
به مانند موارد دیگر، از طریق تب استایل می‌شود رنگ بندی متن، فاصله‌های اطلاعات محصول را سفارشی کرد.
اضافه کردن محتوا به صفحه محصول
تقریباً قسمت بالایی صفحه محصول را ساختیم. البته فراموش نکنید این ظاهر و چیدمان تنها جنبه آشنایی با نحوه طراحی صفحه محصول با المنتور دارد. شما می‌توانید چیدمان حرفه‌ای و جذاب‌تری بسازید.
برای نمایش محتوا و توضیحات محصول به یک کانتینر یا بخش دیگر نیاز داریم. روی دکمه + کلیک کنید.
اولین مورد را انتخاب کنید تا محتوا تمام عرض باشد. ساختار صفحه را در نهایت براساس طرح مدنظرتان بسازید.
جهت نمایش محتوای محصول، ویجتی به همین نام را داخل کانتینر جدیدی که ایجاد کردید قرار بدهید.
در صورتی که محصولات شما دارای محتوا و توضیحات باشند، در مکانی که ویجت را قرار دادید نمایش داده می‌شوند.
نمایش فرم نظرات در صفحه محصول المنتور
برای نمایش دیدگاه‌ها و فرم ارسال نظر، در نوار جستجوی ویرایشگر المنتور، عبارت نظر یا دیدگاه را سرچ کنید.
سپس ویجت دیدگاه‌های نوشته را به پایین ویجت محتوای محصول یا بعد از آن اضافه کنید.
این ویجت، نظرات مشتریان را نمایش می‌دهد. همچنین فرم ارسال نظر را نیز به صفحه محصول اضافه می‌کند.
پس از ساخت صفحه تک محصول با المنتور، باید طرح خود را ذخیره کنید. برای این کار، در بالای سمت چپ صفحه، روی دکمه انتشار کلیک کنید.
اینجا المنتور از شما می‌خواهد یک شرط برای نمایش این الگو اضافه کنید.
شرط نمایش روی صفحه محصولات را انتخاب کنید. این شرط باعث می‌شود، الگوی شما جایگزین الگوی پیش‌فرض صفحه محصول ووکامرس شود.
بعد از اقدامات بالا، در پایین همین پنجره انتخاب شرط، روی گزینه Save & Close (ذخیره و بستن) کلیک نمایید.
تمام! اکنون صفحه یکی از محصولات خود را بررسی کنید. می‌ببینید صفحه محصولی که شما با المنتور ساختید، جایگزین صفحه محصول پیش‌فرض ووکامرس شد.
جمع بندی آموزش طراحی صفحه محصول با المنتور
با همین آموزش افزونه المنتور با اصول و مباحث پایه طراحی صفحه محصول در المنتور آشنا شدید. این آموزش به شما کمک می‌کند بتوانید طرح‌های زیباتر و مدرن را هم طراحی کنید. زیرا پایه و اساس این کار را اینجا یاد گرفتید.
امیدواریم از این آموزش سایت تم فور لذت برده باشید و برای شما مفید واقع شده باشد. با آرزوی سلامتی و موفقیت روزافزون کسب‌و کارتان.
تیم تولید محتوای تم فور
همۀ تلاش مجموعه‌ی تم فور اینه که بهترین آموزش‌ها برای وردپرس رو به صورت کاملاً رایگان برای جامعه‌ی وردپرس ایران تولید بکنه. امیدواریم آموزش‌های ما براتون مفید واقع بشه :)
این مقاله را با دوستان خود به اشتراک بگذارید
ثبت دیدگاه
