تجارت الکترونیکطراحی وب

آموزش طراحی صفحات one page در ۴ قدم

طراحی وب - آی تی پورت

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

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

 

وبسایت های one page برای چه مواردی کاربرد دارد؟

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

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

 

چگونه طراحی را شروع کنیم؟

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

من برای ساخت صفحات one page  از پلاگین scrollIt.js استفاده می کنم.

مرحله اول: کتابخانه جی کوئری و scrollIt.js را دانلود و در صفحه بارگذاری کنید.

 

 

مرحله دوم: در این مرحله باید خاصیت data-scroll-index رو به اسلایدهای سایت اضافه کنیم.

 

 

مرحله سوم: خاصیت data-scroll-nav را به منوها اضافه کنید. این خاصیت باعث می شود وقتی روی منو مورد نظر کلیلک  می کنیم صفحه به سمت اسلاید مربوط به آن اسکرول بشود.

 

 

مرحله چهارم: در مرحله اخر تابع scrollIt() را صدا می زنیم.

 

 

نکته: برای سفارشی سازی پلاگین scrollIt.js می توانید کد زیر رو در مرحله چهارم استفاده کنید.

 

 

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

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


گفتگو ها
    علی

    بسیار عالی استفاده کردیم 🙂

    ممنون حدادکار عزیز

    یاس

    سلام .چطوربارگذاری کنم کجا.میشه جزئیاتشم بگین.سپاس

      با سلام

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

    محسن

    سلام ممنون از آموزش خوبتون

    آیا تبدیل قالب اهی تک صفحه ای به وردپرس با قالبهای معموملی فرق داره؟

    چه طور میشه یه قالب تک صفحه ای روبه وردپرس تبدیل کرد

    محمد

    عالی بود با تشکر

    امیر

    دمت گرم خیلی مردی

    ناشناس

    سلام .خوب بود . ولی با جوملا چطور میشه اینکار را انجام داد؟

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

    مسگرزاده

    اموزش خوبی بود.ممنون

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