آموزش قالب Shoptimizer | فیلم آموزش کامل(رایگان)

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

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

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

[irinfobox]در این آموزش همه بخش ها به صورت کامل آموزش داده می شود و به راحتی با این آموزش می توانید قالب را طبق سلیقه خود پیکربندی کنید.[/irinfobox]

در بتدا به مسیر زیر بیاید تا به تنظیمات قالب هدایت شویم، دقت داشته باشید تنظیمات این قالب در بخش سفارشی سازی قرار دارد و با قالب ها دیگر تفاوت دارد.

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

تنظیمات قالب Shoptimizer

در ابتدا به مسیر زیر بیاید :

پیشخوان وردپرس > نمایش > سفارشی سازی

در ین بخش تنظیماتی برای شما نمایش داده می شود که در تصویر زیر می توانید مشاهده کنید : (کل تنظیمات قالب در این بخش قرار دارد و منوی جدا برای تنظیمات همانند سایر قالب ها ندارد!)

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

تنظیمات عمومی

این تنظیمات شامل بخش های زیر هست :

لوگوی سایت

• Logo height : در این بخش می توانید اندازه لوگو را تنظیم کنید. (ارتفاع آرم خود را بر حسب پیکسل تنظیم کنید. می توانید تصویر آرم خود را در پنل “هویت سایت” بارگذاری کنید.)
• Display tagline under logo : اگه فعال کنید، توضیح کوتاه سایت در زیر لوگو نماشی داده می شود. (در تنظیمات > عمومی تنظیم شده است)

آرم مهم

• Sticky logo : لوگویی که در منوی سایت ثابت هست را می توانید در اینجا بارگذاری کنید.
• Sticky logo width : می توانید عرض لوگوی ثابت را تنظیم کنید. (عرض پیشنهادی حداقل 60)

تنظیمات سرعت

• Enable critical CSS? : می تواند css بحرانی را فعال نمایید که توصیه می کنیم این گزینه روی فعال قرار دهید.
• Load minified CSS files? : کل فایل های css را به صورت فشرده لود می کند و بر روی فعال قرار دهید.
• Load Rivolicons icon font? : اگر می خواهید که فونت آیکون های Rivolicons را لود کند این گزینه را فعال کنید.

حتما آموزش افزایش سرعت سایت المنتور را هم مشاهده کنید.

هویت سایت

• نشان : می توانید لوگوی سایت را مشخص و آپلود کنید.
• عنوان سایت : عنوان سایت را می توانید تنظیم کنید.
• معرفی کوتاه : معرفی کوتاه در باره سایت و موضوع سایت را می توانید وارد کنید.
• نمادک سایت : همان آیکون مرورگر را می توانید تنظیم کنید.

نمادک‌های سایت چیزهایی هستند که در برگه‌های مرورگر (tab)، نوارهای نشان‌گذاری (bookmark)، و برنامه‌های موبایل وردپرس مشاهده می‌نمایید. یکی از آنها را در اینجا بارگذاری نمایید!

نمادک سایت، باید مربعی باشد و دست کم 512 × 512 پیکسل باشد.

رنگ

می توانید همه رنگ های سایت را تنظیم کنید

نوار بالا

• Top bar background : می توانید رنگ نور بالا را تنظیم کنید.
• Top Bar text color : رنگ متن نوار بالا را تنظیم کنید.
• Top bar border : رنگ حاشیه نوار بالا را تنظیم کنید.

هدر یا سربرگ

• Header background : رنگ پس زمینه هدر را انتخاب کنید.
• Header border color : رنگ حاشیه هدر را انتخاب کنید.
• Mobile : رنگ ها را در موبایل می توانید تنظیم کنید.
  • Navigation icon : رنگ آیکون در منو ها
  • Cart icon : رنگ آیکون سبدخرید
  • Mobile navigation background : رنگ پس زمینه منو در موبایل
  • Mobile navigation text : رنگ متن منوها در موبایل
  • Mobile navigation divider : رنگ خط جداکننده منو ها در موبایل

زیر هدر

• Below header background : رنگ پس زمینه زیر هدر را می توانید تنظیم کنید.
• Below header text color : رنگ متن پس زمینه زیر هدر را می توانید تنظیم کنید.

[irinfobox]? جالبه!
این قالب اصلا به هیچ وجه ویجت برای المنتور ندارد و برای نمایش محصولات هم از شورتکدهای خود ووکامرس استفاده می کند که همین مورد من رو شیفته قالب کرد، واقعا امکان بسیار جالبیه و هر بار آپدیت هم میکنه ویجتی اضافه نمیکنه! فقط تنظیمات جدید با کدنویسی بهینه اضافه میکنه[/irinfobox]

ناوبری

• Fade out other links on hover : می توانید مقدار شفافیت منو در حالت فعال را تنظیم کنید.
• Navigation background : رنگ پس زمینه منو را تنظیم کنید.
• Navigation links : رنگ لینک های منو
• Navigation links hover/selected : رنگ لینک های منو در حالت فعال و هاوور
• DROPDOWNS : تنظیمات رنگ در حالت منوی کشویی
  • Navigation dropdown background : رنگ پس زمینه منوی کشویی
  • Navigation dropdown text : رنگ متن منوی کشویی
  • Navigation dropdown hover : رنگ متن منوی کشویی در حالت هاوور
• SECONDARY NAVIGATION : رنگ های منوی ثاونیه
  • Secondary navigation color : رنگ متون منوی ثانویه را تنظیم کنید
• CART : تنظیمات رنگ سبدخرید
  • Cart icon : رنگ آیکون سبدخرید
  • Cart text : رنگ متن سبد خرید
  • Cart text hover color : رنگ متن سبدخرید در حالت هاوور

عمومی

• Primary swatch color : رنگ اصلی قالب را می توانید انتخاب کنید. این رنگ، رنگ کلی هست و کل قالب را صورت خودکار این رنگ را به خود می گیرند.
• General links : رنگ کل لینک های سایت را مشخص می کنند.
• General links hover : رنگ لینک های کل سایت در حالت هاور را مشخص می کند.
• Body background color : رنگ پس زمینه بدنه سایت را تعیین می کند.

Woocommrce

• PRIMARY BUTTON : رنگ دکمه اصلی خرید در ووکامرس
  • Primary button text color : رنگ متن دکمه خرید
  • Primary button background : پس زمینه دکمه خرید ووکامرس
  • Primary button background hover : رنگ پس زمینه دکمه خرید در حالت هاوور
• SALE FLASH : رنگ المان فروش ویژه
  • Sale flash background : رنگ پس زمینه المان فروش ویژه
  • Sale flash text color : رنگ متن المان فروش ویژه
• RATINGS : تنظیمات رنگ ستاره ها و امتیاز ها
  • Star ratings color : رنگ ستاره های امتیاز دهی
• PRODUCT ARCHIVES : تنظیمات رنگ برای آرشیو محصولات
  • Archive description background : رنگ پس زمینه برای توضیحات آرشیوها
  • Archive description text : رنگ متن بخش توضیحات آرشیو
• SINGLE PRODUCT : تنظیمات رنگ محصولات تکی
  • Product container background : رنگ کانتینر یا بخش محصول
  • Floating button background : رنگ پس زمینه دکمه چسبان خرید
  • Floating button text color : رنگ متن دکمه چسبان خرید
• CART AND CHECKOUT : تنظیمات رنگ برای سبدخرید و پرداخت
  • Progress bar color : رنگ پس زمینه نوار پیشرفت

بالا و پایین صفحه

• Below content icons : رنگ محتوای آیکون ها در پایین صفحه
• Footer background : رنگ پس زمینه فوتر
• Footer headings color : رنگ عناوین فوتر
• Footer text color : رنگ متن های فوتر
• Footer links : رنگ لینک های فوتر
• Footer links hover : رنگ لینک های فوتر در حالت هاوور

سربرگ و منوها

همه تنظیمات مربوط به سربرگ ها و منوها را می توانید در این بخش انجام دهید.

نوار بالا

• Display top bar? : اگر می خواهید که نوار بالای سایت وجود داشته باشد این گزینه را فعال کنید.
• Hide top bar on mobile? : اگر می خواهید که نوار بالای سایت در موبایل نمایش داده شود این گزینه را فعال کنید.

هدر

• Header Top Padding : فاصله هدر از بالا
• Header Bottom Padding : فاصله هدر از پایین
• Header Layout :طرح هدر سایت را می توانید انتخاب کنید که شامل گزینه های زیر هست.
  • Logo / Search / Secondary : لوگو / فرم جستجو / منوی ثانونیه
  • Logo / Search / Secondary / Cart : لوگو / فرم جستجو / منوی ثانویه / سبد خرید
  • Search / Logo / Secondary : فرم جستجو / لوگو / منوی ثانویه
  • Secondary / Logo / Search : منوی ثانویه / لوگو / فرم جستجو
  • Logo / Navigation / Cart : لوگو / منوی اصلی / سبد خرید
• Display the search? : نمایش فرم جستجو
  • Product Search : جستجوی محصولات در فرم جستجو
  • Ajax Search for WooCommerce Plugin : جستجوی حالت ایجکس برای محصولات ووکامرس
  • Regular Search : جستجوی معمولی و ساده
  • Disable : غیر فعال کردن فرم جستجو
• Sticky Navigation : منوی حالت چسبنده (می توانید فعال ویا غیرفعال کنید)

موبایل سربرگ

• Mobile header height : ارتفاع هدر در موبایل
• Mobile logo height : ارتفاع لوگوی هدر در موبایل
• Mobile Sticky Header : فعال کردن منوی چسبنده در موبایل
• Show search on mobile : نمایش فرم جستجو در موبایل
• Mobile search position : موقعیت فرم جستجو در موبایل
• Show my account on mobile : نمایش حساب من در موبایل
• Display mobile menu label : نمایش متن “منو” در منوی موبایل
• Mobile menu label text : متن منو در موبایل

ناوبری

• Navigation Height : ارتفاع منو را می توانید تعیین کنید.
• Display menu descriptions : فعال کردن توضیحات منوها

سبدخرید

• Display cart : نمایش سبد خرید در منو
• Cart icon : انتخاب آیکون سبد خرید (پس از تعویض ، در یک پنجره ناشناس تست کنید. انتخاب قبلی به احتمال زیاد به عنوان یک قطعه ذخیره می شود.)
• Cart sidebar title : عنوان سبد خرید در سایدبار را می توانید تعیین کنید
• Cart sidebar below text : نوار کناری سبد زیر متن

تایپوگرافی

در این قسمت باید تنظیمات مربوط به تایپوگرافی را انجام دهید.

[irnot title=”توجه کنید”]نسخه آی آر المنتور دارای فونت های فارسی و افزونه اختصاصی برای فونت ها هست که می توانید فونت مورد نظر خود را انتخاب کنید و بر روی کل سایت اعمال کنید. فقط می تواند اندازه فونت ها را در این بخش تنظیم کنید.[/irnot]

• ایستگاه از پیش تنظیم : می توانید از چند طرح آماده انتخاب کنید. (دقت کنید که فونت های گوگل بری سایت فارسی اصلا کاربردی ندارند.)
• بدنه اصلی : پیکربندی فونت ها برای بدنه اصلی سایت را می توانید تعیین کنید.
• ناوبری : می توانید فونت و اندازه ها را برای ناوبری یا منوی سایت تعیین کنید.
• پاراگراف : فنت پاراگراف ها را تنظیم کنید
• عنوان یک تا پنج : می توانید فونت و تایپوگرافی عناوین H1 تا H5 را انتخاب کنید.
• نقل قول : فونت های مربوط به نقل قول ها را تنظیم کنید.
• عنوان ویجت : عناووین ویجت ها را می تواند تنظیم کنید.
• وبلاگ : تنظیمات فونت برای وبلاگ را می توانید پیکربندی کنید.
• Woocommerce : تنظیمات فونت برای فروشگاه ووکامرس

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

طرح

می توانید طرح های مختلف قالب را در همه مکان ها تنظیم کنید.

عمومی

• Contain the grid? : اگر می خواهید که طرح بندی کل سایت به یک عرض نمایش داده شود یا ان گزینه را روی بله قرار دهید.
• Content container width : عرض محتوا را می توانید در ینجا تعیین کنید.
• Display breadcrumbs : می تونید نمایش مسیر راهنما را فعال کنید.
• Breadcrumbs type : می توانید نوع مسیر راهنما و منبع آن را مشخص کنید. (در زیر افزونه های مورد نظر برای شما نمایان می شود.)

ستون های فرعی

در این می توانید طرح بندی برای سایدبارها را انتخاب کنید.

• Sidebar Width (%). : می توانید عرض سایدبار را تعیین کنید.
• Content Width (%). :می توانید اندازه طول سایدبار را تعیین کنید.
• WooCommerce Sidebar : می تونید طرز نمایش سایدبار در ووکامرس را تعیین کنید. (راست، چپ و یا پنهان)
• Page Sidebar : چینش سایدبار در صفحات را تعیین کنید.
• Blog Archives Sidebar : چینش سایدبار در صفحات آرشیو را تعیین کنید.
• Post Sidebar : چینش سایدبار در پست ها و نوشته ها را تعیین کنید.

وبلاگ

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

• Blog Layout : طرح بندی وبلاگ را انتخاب کنید
  • List : به صورت لیستی
  • Flow : به صورت فلو
  • Grid2 : حالت گرید بندی 2
  • Grid 3 : حالت گریدبندی 3
• Display blog post summary : نمایش خلاصه پست وبلاگ
• SINGLE POSTS : تنظیمات برای پست های تکی
  • Display blog author : نمایش نام نویسنده
  • Display blog meta : نمایش متاهای پست
  • Display blog previous/next : نمایش نوشته قبلی و بعدی
  • Display featured image : نمایش تصویر شاخص پست
  • Single Post Layout. : نمایش طرح بندی نوشته تکی (طرح دو عرض کامل و بهتر برای استفاده با ویرایشگر گوتنبرگ است.)
    • Layout 1 : حالت اول
    • Layout 2 : حالت دوم

طرح بندی Woocommrece

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

• GENERAL
  • Enable sidebar cart drawer : کشوی سبد خرید نوار کناری را فعال کنید
  • Enable single product ajax : فعال کردن محصول تکی ایجکس
• SHOP
  • Display product results count : تعداد نتایج محصول را نمایش دهید
  • Display pagination : نمایش صفحه بندی
  • Display product sorting : نمایش مرتب سایزی لیست محصولات سایت
  • Display sale % discount : نماش علامت “%” در کنار تخفیف ها
  • Display rating : نمایش امتیاز و یا ستاره
  • Display category : نمایش دسته بندی
  • Image change on hover : تغییر تصویر در هنگام هاور موس
  • Product card display : نمایش محصول به صورت کارتی
  • Button display : نمایش دکمه
  • Product text alignment : چینش متن محصلوات
  • Use masonry layout : استفاده از نمایش طرح بندی به صورت منشوری
• PRODUCT CATEGORIES
  • Category description layout. : طرح بندی توضیحات دسته بندی ها را تعیین کنید
  • Display category description : نمایش توضیحات دسته بندی ها
  • Display category image : نمایش تصویر دسته بندی های فروشگاه
• SINGLE PRODUCT
  • Product gallery thumbnails : نمایش پیشنمایش گالری محصول
  • Display sticky add to cart bar : نمایش دکمه افزودن به سبدخرید به صورت چسبان
  • Display product meta data : نمایش متاهای محصول
  • Display previous/next : نمیش قبلی و بعدی
  • Display floating button : نمایش دکمه شناور تماس
  • Floating button title: محتوا در ویجت اضافه می شود: “محتوای دکمه شناور”
  • Display related : نمایش مرتبط ها
  • Display upsells before related : نمایش مرتبط ها در محصولات پرفروش
  • Upsells title : عنوان محصولات پرفروش
  • Number of upsells to show : تعداد محصولات نمایش پرفروش ها
• CART AND CHECKOUT
  • Display progress bar : نمایش نوار پیشرفت
  • Cross sells position : موقعیت کراس فروش ویژه
  • Number of cross sells to show : نمایش تعداد کراس فروش ویژه
  • Mobile cart page (experimental) : صفحه سبد خرید (آزمایشی)
  • Distraction-free checkout : پرداخت بدون حواس پرتی (طرح جدید)
  • Checkout coupon code position : موقعیت کد کوپن پرداخت

بالا و پایین صفحه

• Show Below Content? : زیر محتوا نشان داده شود؟
• Show Footer? : فوتر نمایش داده شود؟
• Show Copyright? : کپی رایت نمایش داده شود یا خیر

ابزارک ها

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

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

ویرایش صفحات

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

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

پیشخوان وردپرس > برگه ها > همه برگه ها

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

نکته مهم درباره تنظیمات در آموزش قالب Shoptimizer

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

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

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

? فیلم آموزشی