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

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

در این آموزش از چه افزونه فروشگاهی استفاده میکنیم؟

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

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

چرا باید از ووکامرس استفاده کنیم؟

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

برخی از مزایای افزونه ووکامرس:

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

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

پیش نیاز های این مقاله:

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

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

طراحی سربرگ ( Header ) سایت فروشگاهی با المنتور:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

محصولات:

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

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

مسیر پیشمایش ووکامرس:

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

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

افزودن به سبد خرید سفارشی:

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

برگه های ووکامرس:

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

دسته بندی محصولات:

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

منو سبد خرید:

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

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

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

افزونه woocommerce page builder

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

طراحی پا برگ ( Footer ) سایت فروشگاهی با المنتور

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

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

مانند بخش های قبلی یک قالب جدید در وب سایت خود ایجاد کنید، چون در این بخش میخواهیم یک پابرگ برای وب سایت خود ایجاد کنیم باید نوع آنرا بر روی پاورقی قرار دهیم و مانند قبل یک اسم برای قالب جدید انتخاب کنیم نهایتا هم بر روی دکمه ایجاد قالب کلیک کنیم.

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

برای پا برگ سایت ما یک ساختار 4 بخشی ایجاد میکنیم چون میخواهیم قسمت اول پا برگ 4 بخش باشد و یک سری اطلاعات از طریق این بخش ها به نمایش بگذاریم.

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

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

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

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

سخن پایانی:

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

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