درخواست پیش فاکتور

آموزش ایجاد تور محصول – کد

  • ۲۸ شهریور ۱۳۹۷
  • بدون دیدگاه
  • مجید عابد
 
1 Star2 Stars3 Stars4 Stars5 Stars

کد آموزش ایجاد تور محصول

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

 

 

پیش نمایش

 

آموزش ایجاد تور محصول

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

بگذارید قبل از توضیح کدها تصویری که نشان دهنده عملکرد این تور آموزشی میباشد را مشاهده کنیم :

آموزش ایجاد تور محصول - کد

 

ساخت ساختار

ساختار Html توسط یک لیست تشکیل شده است . هر آیتم از این لیست شامل .cd-more-info ( عنوان گام ، توضیحات و تصویر برای گوشی ها ) میباشد .

 

 

توجه کنید که عنصر .cd-nav (ناوبری تور قابل مشاهده در هر قسمت) به صورت مستقیم در HTML ایجاد نشده و با استفاده از جی کوئری ایجاد شده است . همچنین عنصر .cd-app-screen برای ایجاد پس زمینه برنامه جعلی استفاده شده . پس شما میتوانید آن را حذف کرده و عنصر دلخواه خود را اضافه کنید . استایلی که در موبایل وجود دارد با استایل دسکتاپ متفاوت است . ما حداقل اندازه را برای نسخه سیستم ۱۱۰۰ پیکسل در نظر گرفته ایم . برای سیستم برای هر آیتم لیست .cd-single-step یک موقعیت در نظر گرفته و اختصاص داده ایم . اما در نسخه موبایل این نمایش توضیحات و تور آموزشی در قالب یک پنجره به کاربر نمایش داده میشود .

 

 

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

منبع : codyhouse

 

دکتر رنک لول رنگ - پالت رنگ های مورد تایید آی وحید درگاه پرداخت واسط jibme