آموزش ساخت فروشگاه با المنتور (قسمت دوم)

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

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

صفحه محصول چیست؟

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

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

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

پیش نیاز های این جلسه آموزشی

در این جلسه آموزشی هم باید شما افزونه المنتور، المنتور پرو، ووکامرس و افزونه Woocommerce Page Builder را در وب سایت خود نصب و فعال کرده باشید تا بتوانید صفحه محصولی بسیار زیبا داشته باشید.

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

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

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

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

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

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

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

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

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

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

المان اول

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

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

المان دوم

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

المان سوم

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

المان چهارم و ششم

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

 المان های بخش پنجم

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

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

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

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

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

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

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

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

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

سخن پایانی:

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

اگر سوالی درباره این جلسه آموزشی دارید حتما در زیر همین پست برای ما بنویسید.