طراحی سایت فروشگاهی بدون کدنویسی مهارت پرکاربردی است که در این آموزش قرار است به آن بپردازیم. در ادامه می خوانید که المنتور و افزونه های جانبی المنتوری برای ایجاد یک فروشگاه آنلاین تمام عیار تا چه اندازه قدرتمند عمل می کنند. بنابراین اگر به دنبال آموزش المنتور جامع برای راه اندازی سایت فروشگاهی هستید؛ این معرفی برای شما مفید خواهدبود.
طراحی سایت فروشگاهی با المنتور
المنتور به عنوان قدرتمندترین صفحه ساز وردپرسی، قابلیت هایی را در اختیار طراحان سایت قرار می دهد که بتوانند قالب های اختصاصی برای انواع سایت از جمله سایت های فروشگاهی طراحی کنند.
اگر هنوز با این صفحه ساز آشنایی ندارید؛ آموزش المنتور را به صورت رایگان مشاهده کنید.
اولین قدم برای ایجاد یک سایت فروشگاهی با وردپرس نصب افزونه فروشگاه ساز ووکامرس است. باتوجه به نقش مهم ووکامرس در سایت فروشگاهی شما به عنوان یک طراح سایت باید با کلیه بخش های این افزونه و تنظیمات آن آشنایی داشته باشید.
در بخش آموزش ووکامرس در المنتورسایت با قابلیت های این افزونه پیشرفته آشنا شوید.
معرفی ویجت های ووکامرسی در المنتور
با کمک صفحه ساز المنتورهمه صفحات فروشگاه آنلاین سفارشی سازی می شوند و برای این کار شما به کدنویسی احتیاجی ندارید. چون با کمک افزونه المنتور پرو بعد از نصب ووکامرس در ویرایشگر المنتور ویجت های زیر در اختیارتان قرار میگیرد:
- درج مسیرراهنما محصولات و صفحات ووکامرسی
- درج عنوان محصول در قالب مربوط به صفحه داخلی محصول
- اضافه کردن تصویر، قیمت، امتیاز و موجودی محصولات
- دکمه افزودن به سبد خرید به همراه انتخاب ویژگی محصول
- نمایش دسته بندی، برچسب و SKU یا شناسه محصولات
- درج توضیحات کوتاه، توضیحات تکمیلی محصول، ویژگی ها و نظرات محصولات در قالب تب یا زبانه
- نشان لیستی از محصولات مشابه با محصول فعلی
- ارائه پیشنهادات به مشتری برای تشویق به خرید کالای مشابه یا کالاهای مکمل
- نمایش لیستی از محصولات با موضوع محصولات مرتبط، اخرین محصولات یا کالاهایی از دسته های دلخواه با ترتیب مورد نظر
- درج صفحات اصلی ووکامرس مثل سبد خرید، پرداخت، حساب کاربری و …
- نمایش دسته بندی محصولات به همراه تصویر و تعداد محصولات داخل هر دسته بندی
- قراردادن دسترسی به سبد خرید در منوی وبسایت
- سفارشی سازی صفحه سبد خرید (cart)، صفحه پرداخت (ckeckout) و پنل کاربری (my-account) و فاکتور ووکامرس
- سفارشی سازی پیغام های ووکامرسی یا woocomerce notices (برای اینکار به تنظیمات سایت بخش ووکامرس در کیت پیش فرض المنتور منتقل می شوید)
پیاده سازی قابلیت های پیشرفته سایت فروشگاهی با المنتور
در تیتر قبلی با ویجت های ووکامرسی المنتور برای ایجاد سایت فروشگاهی آشنا شدید اما برخی از امکانات خاص و پیشرفته در سایت آنلاین تنها با این ویجت ها قابل پیاده سازی نیستند!
بسیاری از وردپرس کاران برای ایجاد فیلترهای پیشرفته در صفحه آرشیو محصولات، قراردادن درصد تخفیف برای محصولات حراجی، ایجاد باکس تخفیف های شگفت انگیز مثل سایت دیجی کالا و … در سایت فروشگاهی سوال دارند. خوشبختانه برای این امکانات هم نیازی به کدنویسی ندارید. با کمک المنتور و افزونه های جانبی المنتوری که در ادامه معرفی می کنیم؛ سایت فروشگاهی حرفه ای با قابلیت های حرفه ای بسازید.
افزونه jet woobuilder : به آن دسته از طراحانی که می خواهند همه صفحات سایت فروشگاهی خود را به صورت حرفه ای با المنتور شخصی سازی کنند؛ این افزونه پیشنهاد می شود. جت وو بیلدر برای هر یک از صفحات اصلی ووکامرس مثل صفحه تکی محصول (single product)، فروشگاه (shop)، سبد خرید (cart)، آرشیو محصولات، صفحه تشکرو حساب کاربری ویجت های اختصاصی و کاربردی دارد. این ویجت ها هم داخل قالب های المنتور و هم در محیط طراحی قالب های jet woobulder قابل استفاده هستند.
از جمله امکانات جذاب jet woobuilder برای سایت های فروشگاهی موارد زیر هستند:
- امکان درج برچسب درصد تخفیف در باکس محصولات
- نمایش گالری تصاویر محصولات به صورت عمودی و افقی و استایل اختصاصی
- فرم های جداگانه برای هر یک از بخش های صفحه تسویه حساب مثل کد تخفیف، صورت حساب و…
- قالب ساز Woo Page Builder که به شما امکان ساخت قالب های سفارشی برای صفحات اصلی ووکامرس و همینطور کنترل محل نمایش قالب ها را می دهد
افزونه jet Engine : افزونه جت انجین برای ایجاد وبسایت های پویا و پیشرفته بسیار کاربردی است. با جت انجین می توانید برای محصولات خود متافیلدهای سفارشی مختلف بسازید و از این متافیلدها برای طراحی استفاده کنید و قابلیت نمایش شرطی برای نمایش متافیلدهای محصولات قرار دهید.
علاوه بر این جت انجین ویجتی با نام listing grid یا شبکه بندی لیست به ویرایشگر المنتور اضافه می کند که با کمک آن می توانید لیستی از محصولات پرفروش و یا تخفیف دار را به کمک کوئری های جت انجین و تنظیمات پیشرفته به صورت داینامیک نمایش دهید. در واقع این ویجت میتواند جایگزین مناسب و هوشمندی برای لوپ المنتور جهت نمایش محصولات و کالاهای فروشگاه با کوئری و ترتیب دلخواه و پیشرفته باشد.
افزونه jet smart filter : سایت های فروشگاهی معمولا کالاهای زیادی در صفحه فروشگاه یا آرشیو دسته بندی ها دارند. به همین جهت حتما باید فیلترهای مناسبی براساس پارامترهای مختلف مثل قیمت، دسته بندی کالاها و ویژگی های محصولات تنظیم شود. فیلتر کالاها باعث می شود مشتریان به سرعت به محصول مورد نظر خود دسترسی پیدا کنند و تجربه کاربری بهتری داشته باشند.
افزونه جت اسمارت فیلتر امکان تنظیم فیلترهای متنوع به صورت لیست بازشو، چک باکس، دکمه های رادیویی و محدوده را به شما می دهد. با این افزونه از امکاناتی مثل پیشرفته ای مثل مرتب سازی فیلترها، صفحه بندی و جستجو فیلتر نیز می توانید استفاده کنید. فیلترهایی که با این افزونه ایجاد می کنید روی لوپ المنتور و listing grid از افزونه جت انجین به خوبی کار می کند.
افزونه Jet Compare Wishlist: لیست علاقه مندی ها به کاربران وفادار سایت کمک می کند که در هر بار بازدید از فروشگاه آنلاین شما به سرعت به کالاهایی که همیشه به آن نیاز دارند دسترسی داشته باشند. علاوه بر این با قراردادن امکان مقایسه محصولات، کاربران می توانند کالاها را کنار هم قرار داده و بهترین انتخاب را داشته باشند. با ویجت های افزونه jet Compare این قابلیت به سایت فروشگاهی شما اضافه می شود.
4 نکته مهم در طراحی سایت فروشگاهی به کمک المنتور
قبل از هر چیز بهتر است نکات مهمی را که در ساخت فروشگاه اینترنتی باید رعایت شود بررسی کنیم. این نکات به شرح ذیل است :
- اولین و مهمترین نکته ای که باید به آن توجه کرد این است که شما به یک قالب مناسب برای سایت خود نیاز دارید. در صورتی که قالب انتخابی شما با افزونه المنتور سازگار باشد، میتوانید مسیر را ادامه دهید اما اگر این سازگاری در قالب شما وجود نداشته باشد، نیاز به تغییر قالب خواهید داشت.
به طور کلی یک پیشنهاد عالی برای این کار استفاده ازقالب hello elementor می باشد. این قالب توسط خود سازندههای المنتور ساخته شده و سازگارترین قالب وردپرس با المنتور است.
ویژگی خوبی که قالب hello elementor دارد این است که شما میتوانید تمام بخش های سایت را به کمک این قالب و افزونه المنتور سفارشیسازی کنید. شایان ذکر است که این قالب کاملاً رایگان در مخزن وردپرس وجود دارد و شما به خریداری آن نیاز ندارید. - دومین نکته برای ساخت فروشگاه اینترنتی به کمک المنتور، نصب افزونه ووکامرس است. همان طور که میدانید افزونه ووکامرس بهترین فروشگاه ساز وردپرس است. این افزونه این امکان را به شما میدهد که بتوانید به راحتی وردپرس را تبدیل به یک سایت فروشگاهی کنید.
- استفاده از افزونه المنتور در هر دو نسخه برای ساخت فروشگاه مناسب است. اما برای دسترسی بهتر به امکانات و قابلیت های آن لازم است حتماً نسخه پرو المنتور را تهیه کنید تا بتوانید یک فروشگاه اینترنتی سفارشی شده و منحصر به فردی را طراحی کنید.
اگر به دنبال آموزش المنتور هستید میتوانید به لینک درج شده مراجعه کنید و به صورت مرحلهبهمرحله کار با این افزونه را یاد بگیرید. - بهتر است قبل از استفاده از المان ها، جزئیات، مقالات و محصولات و … لازمِ فروشگاه را از قبل وارد سایت نمایید.
آموزش طراحی سایت فروشگاهی بدون کدنویسی با المنتور
درست است که تنها با کمک صفحه ساز المنتور و افزونه های جانبی المنتوری و البته ووکامرس می توان یک وبسایت فروشگاهی با امکانات مناسب راه اندازی کرد و برای این کار نیازی وجود ندارد. با این حال، راه اندازی یک سایت به این روش به دانش فنی و تخصص نیاز دارد.
اگر طراح سایت هستید و همیشه برای راه اندازی وبسایت های فروشگاهی از قالب های آماده استفاده می کنید؛ حتما به این چالش برخوردید که امکان سفارشی سازی کمی در اختیار دارید یا اصطلاحا دست شما برای طراحی بسته است. در ادامه برای آموزش طراحی سایت اختصاصی فروشگاهی با المنتور منبع مناسبی معرفی می کنیم.
ممکن است برخی از افراد نیز تصور کنند که چون طراحی سایت به دانش فنی نیاز دارد؛ برای فروش آنلاین تنها یک پیج اینستاگرام کافیست اما جالب است بدانید که 80 درصد از خریدهای اینترنتی از طریق وبسایت ها انجام می شوند. بنابراین اگر صاحب کسب و کار هستید و وبسایت فروشگاهی ندارید؛ عملا بخش زیادی از مشتریان خود را از دست می دهید.
اگر بدنبال آموزش المنتور برای ارتقا دانش فنی جهت طراحی سایت هستید یا حتی اگر هیچ دانش و تجربه ای در زمینه طراحی سایت ندارید ولی می خواهید سایت خودتان را راه اندازی کنید؛ دوره جامع طراحی سایت می تواند برای شما کمک کننده باشد. با کمک آموزش های این دوره از صفر تا صد طراحی سایت با المنتور را یاد میگیرید و می توانید هر نوع سایتی از جمله سایت فروشگاهی را بدون کدنویسی پیاده سازی کنید.
حتما می دانید که به تازگی همه وب سایت های فروشگاهی برای اتصال به هر نوع درگاه پرداختی اعم از مستقیم یا با واسطه نیاز به دریافت اینماد دارند؛ در این دوره آموزشی تمامی نکات مربوط به مبحث درگاه پرداخت و اینماد در اختیار طراحان سایت قرار میگیرد.
آموزش طراحی فروشگاه اینترنتی به کمک المنتور در دو مرحله
برای دسترسی بهتر شما، این قسمت را به دو بخش ساخت صفحه اصلی و صفحه محصول تقسیم کرده ایم:
مرحله اول: ساخت صفحه اصلی فروشگاه در المنتور
ساخت صفحه اصلی در المنتور درست شبیه ساخت صفحه اصلی در وردپرس است. برای این کار کافی است یک برگه جدید ایجاد کرده سپس از بخش تنظیمات وردپرس، گزینه “صفحه اصلی شما نمایش داده میشود” را بر روی یک برگهیکتا تنظیم کنید و در نهایت صفحه نخست را روی برگهی جدیدی که ایجاد کردید تنظیم نمایید.
پس از اینکه صفحه اصلی را برای نمایش تنظیم کردید، وارد محیط ویرایشگر افزونه المنتور شوید و صفحات مختلفی را طراحی نمایید.
مرحله دوم: ساخت و سفارشیسازی صفحه محصول با المنتور
یکی از مهمترین صفحاتی که بعد از صفحه اصلی میتوان سفارشیسازی کرد صفحه محصول است. اکثر قالب ها یک استایل پیشفرض برای این صفحه دارند که شما این امکان را دارید از طریق المنتور آن را سفارشیسازی کرده و تغییر دهید.
برای این کار وارد پیشخوان وردپرس شوید و از منوی المنتور بخش قالب ها را انتخاب کرده و افزودن جدید را کلیک کنید. سپس مطابق تصویر زیر یک قالب جدید ایجاد نمایید و نوع آن را single product انتخاب کنید.
پس از انتخاب نام برای قالب خود بر روی ایجاد قالب کلیک کنید. تا با انواع قالب های آماده المنتور شبیه تصویر زیر مواجه شوید.
کافی است در این مرحله هر کدام از طرح هایی را که میخواهید انتخاب کرده و با کلیک کردن روی آن، قالب را به داخل صفحه خود اضافه کنید. پس از آن میتوانید تمامی بخش ها را مطابق با سلیقه تان سفارشیسازی کنید.
لازم به ذکر است که برای استفاده از قالب های آماده کتابخانه المنتور حتماً باید از نسخه اورجینال و پرو آن استفاده کنید.
و یا اینکه این امکان را دارید که صفحه کتابخانه المنتور را بسته و به کمک المان هایی که نیاز دارید صفحه محصول خود را به صورت کاملاً اختصاصی چیده و طراحی کنید. المان های زیر بخشی از المان هایی است که میتوانید در صفحه محصول سایت فروشگاهی از آن ها استفاده کنید.
و در نهایت پس از اینکه صفحه دلخواه محصول خود را طراحی کردید، این امکان را دارید که آن طرح را ذخیره کرده و برای تمام صفحه محصولات سایت از آن استفاده کنید. برای این منظور کافی است بر روی دکمه انتشار کلیک کنید و مطابق تصویر زیر برای تعیین موقعیت صفحه ای که طراحی کردید Add condition را بزنید
جمع بندی
مطالعه این نوشته را به علاقه مندان طراحی سایت با المنتور و صاحبان کسب و کارهای کوچک که قصد راه اندازی وبسایت فروشگاهی دارند پیشنهاد می کنیم. با کمک ویجت ها و منابع آموزشی معرفی شده در این نوشته ایجاد سایت فروشگاهی به سادگی قابل انجام است. برای آن دسته از طراحان سایت که به دنبال قابلیت های حرفه ای در فروشگاه آنلاین خود هستند نیز افزونه های مناسب معرفی شده؛ پیشنهاد می کنیم که حتما برای ارتقا دانش فنی در زمینه آموزش المنتور این معرفی را مطالعه بفرمایید. در بخش کامنت ها هم منتظر نظرات شما در رابطه با نقشه راه معرفی شده هستیم!
