۳۹۹ هزار تومان خرید قالب
خرید قالب - ۳۹۹ هزار تومان

کاملترین قالب HTML فروشگاهی سایت دیجی کالا

طراح قالب: علیرضا روشنایی

قالب html فروشگاهی مشابه سایت دیجی کالا

طراحی اختصاصی مطابق سلیقه ایرانی

بیش از 37 صفحه قالب html فروشگاهی

رعایت اصول سئو و کدهای کاملا بهینه شده

فول ریسپانسیو و کاملا یوزر فریندلی

طراحی و پیاده سازی با آخرین ورژن بوت استرپ

طراحی جذاب و جدید و از پایه نوشته شده

پشتیبانی از همه مرورگرها

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

تبدیل آسان به قالب وردپرس

بروزرسانی منظم و رایگان

تاریخ انتشار : 1403/02/28
تاریخ بروزرسانی: 1403/02/28
نسخه قالب: 1.1
پشتیبانی: 6 ماه پشتیبانی کاملا رایگان

دموهای...

قالب HTML فروشگاهی سایت دیجی کالا

صفحه اصلی قالب HTML فروشگاهی سایت دیجی کالا

در این بخش به معرفی صفحه اصلی قالب html دیجی کالا می پردازیم

صفحه اصلی 1

سایر صفحات قالب HTML فروشگاهی سایت دیجی کالا

در این بخش به معرفی سایر صفحات قالب html دیجی کالا می پردازیم

صفحه فیلتر محصولات

صفحه فیلتر محصولات شگفت انگیز

صفحه 404

صفحه پروفایل کاربری - پروفایل

صفحه پروفایل کاربری - ویرایش اطلاعات شخصی

صفحه پروفایل کاربری - آدرس ها

صفحه پروفایل کاربری - نقد و نظرات

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

صفحه پروفایل کاربری - جزئیات سفارش

صفحه پروفایل کاربری - همه سفارش ها

صفحه پروفایل کاربری - درخواست مرجوعی

صفحه پروفایل کاربری - اطلاعات شخصی

صفحه پروفایل کاربری - بازدیدهای اخیر

صفحه سبد خرید

صفحه سبد خرید خالی

صفحه لیست خالی سبد خرید بعدی

صفحه فرم ورود

صفحه فرم ثبت نام

صفحه تایید شماره موبایل

صفحه خوش آمدگویی

صفحه تغییر رمز عبور

صفحه پاسخ پرسش های پرتکرار 1

صفحه دسته بندی پرسش ها

صفحه پاسخ پرسش های پرتکرار 2

صفحه حریم خصوصی

صفحه ثبت نظر محصول

صفحه لیست محصولات برای مقایسه

صفحه اطلاعات سفارش

صفحه اتمام خرید و ارسال

صفحه پرداخت ناموفق

صفحه انتخاب شیوه پرداخت

صفحه دسته بندی مقالات

صفحه مقاله

صفحه محصول

صفحه محصول ناموجود

تکنولوژی های استفاده شده در...

قالب HTML فروشگاهی سایت دیجی کالا

HTML (زبان توصیف ساختار صفحه‌های وب)

  • اولین نکته ای که وجود داره اینه که وقتی دوستان وارد مبحث طراحی وب میشن، فکر میکنن زبان HTML یک زبان برنامه نویسی هستش! در صورتی که اصلا اینطور نیست، درسته که واژه زبان روی HTML وجود داره اما اون رو به عنوان یک زبان نشانه گذاری می شناسیم که HTML مخفف عبارت Hyper Text Markup Language هستش (یعنی زبان نشانه گذاری ابر متن).
  • منظور اینه که شما تمامی المان هایی که توی یک صفحه وب دارید و باهاشون کار می کنید یا ایجادش می کنید توسط تگ هایی که درون زبان HTML وجود دارن نشانه گذاری میشن و مرورگرها بر اساس این تگ ها رفتار اون ساختاری که توی صفحه وب هست رو متوجه میشن.
  • به عنوان مثال اگر پاراگراف یا متنی درون یک تگ باشه با نام تگ p مرورگر اون رو به عنوان یک پاراگراف میشناسه، پس این رو اشتباه نکنید که HTML زبان برنامه نویسیه، بلکه زبان نشانه گذاری محتوا هستش.
  • می خوام یه تاریخچه کوتاهی در مورد HTML بهتون بگم که جالبه! در سال 1989 آقایی با نام (تیم برنرزلی) که اصلا کارشون مربوط به وب نبود بلکه روی پروژه های مربوط به فیزیک کار می کردن، به فکرشون می یوفته که چطور کاری انجام بدن بدون این که تمام اعضای تیمشون که در سراسر دنیا ممکنه پراکنده باشن، گرد هم بیان و در مورد موضوعات صحبت کنن، چیکار می تونن انجام بدن که اینها از راه دور هم با هم در ارتباط باشن و بتونن متونشون رو با هم دیگه به اشتراک بزارن و بر سرش صحبت کنن و بررسی های لازم رو انجام بدن.
  • اینجا بود که ایشون اومد زبان و ساختار و پایه زبان HTML رو ایجاد کرد و فکر نمی کنم، خودشون هم فکر نمی کردن که زمانی برسه که این زبان HTML بشه دروازه ورود به دنیای وب و اینقدر توسعه پیدا کنه و روی زندگی تک تک افراد در جوامع امروزی تاثیر بزاره.
  • خب این زبان در مراحل اولیه خیلی نوپا بود و ساختار ساده تری نسبت به الان داشت و در حد این که بیان نشانه گذاری ها رو روی متن کنن، و در نهایت لینک هایی به صفحات مختلف داده بشه که بتونن صفحات رو از یک پروژه رو ببینن و روش کار کنن.
  • رفته رفته این زبان در عرض تقریبا 10 سال ورژن های مختلفی ازش اومد (2 - 3 - 4) که جدیدترین ورژنش همین ورژن HTML5 هست که با ویژگی های بسیار بالا در اختیار علاقه مندان و کسانی که توی حوزه وب دارن کار می کنن مخصوصا طراحی و برنامه نویسی قرار گرفت و به طور کلی میشه گفتش که، وب و آنچه که ما از وب الان می دونیم بدون زبان نشانه گذاری HTML قائدتا هیچ معنا و مفهومی نداره و این زبان بسیار ساده است که اگر زمان بگذارید و 2 - 3 ماه وقت صرفش کنید می تونید به راحتی ازش استفاده کنید.
  • اما در ورژن جدیدش که HTML5 هست در کنار حالا تگ هایی که به مرور زمان توی ورژن های مختلف به این زبان اضافه شد، امکانات پیشرفته و پیچیده تری هم اضافه شده که اون ها نیازمند این هستش که شما زمان بگذارید و مطالعه بیشتری کنید.
  • HTML5 هدفش بیشتر روی وب مفهومی هست که بسیار اهمیت داره توی مبحث سئو چرا که یکسری از تگ های ساختار و اصلیش حالتی رو دارن که یک مفهوم رو به شما می رسونن یعنی شما نیاز دارین اگر می خواین بخشی رو به عنوان هدر توی سایتتون بزارین و اون رو به موتور های جستجو معرفی کنید می آیید از تگی با نام header که توی HTML5 اضافه شده استفاده می کنید یا اگر navigation ای دارید می آیید از تگ nav استفاده می کنید یا اگر content ای دارید می آیید از تگ content یا article استفاده می کنید.
  • در کنار این امکانات، امکانات بیشتری مثل API هایی که توی HTML5 وجود داره مانند session storage ، local storage ، index DB و انواع و اقسامی که روزانه به اینها اضافه میشن و امکانات خیلی زیادی در اختیار طراحان و برنامه نویسان می زارن تا بتونن به راحتی از زبان HTML استفاده کنن.

css

javascript

jquery

bootstrap

bootstrap.bundle

bootstrap-slider

jQuery Bootstrap TouchSpin (کنترل مقدار داخل اینپوت ها)

  • یک پلاگین عالی جی کوئری با نام jQuery Bootstrap TouchSpin وجود داره که با استفاده از این پلاگین می تونیم مقدار داخل input ها رو با استفاده از دکمه های + و - کنترل کنیم که در واقع آپشن هایی رو این پلاگین در اختیارمون قرار میده که قابلیت های بیشتری در کنترل ورودی با ظاهر زیباتری داشته باشیم.

Swiperjs (ایجاد اسلایدر های مدرن و بشدت سازگار با موبایل)

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

Fancybox (نمایش تصاویر، فایل های چندرسانه ای به صورت لایت باکس)

  • ممکن است در برخی از وب سایت ها مشاهده کرده اید که وقتی بر روی یک تصویر کلیک می کنید و تصویر در یک جعبه به نمایش در می آید که به صورت تمام صفحه و کاربر پسند است. نه تنها تصاویر، بلکه هر فایل چند رسانه ای رو می توان بدین شکل نمایش داد.
  • FancyBox یک ابزار ساخته شده بر پایه jQuery هستش که توسط این ابزار می توانید تصاویر، فایل های چندرسانه ای رو به صورت لایت باکس (LightBox) نمایش دهید.
  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحه محصول رو مشاهده کنید خواهید دید زمانی که کاربر بر روی تصویر محصول کلیک کنه، در سایز بزرگ تر به صورت لایت باکس نمایش داده میشه که با استفاده از این ابزار شما می تونید یه همچین قابلیتی رو پیاده سازی کنید.

Owl Carousel (ساخت اسلاید شو با پلاگین جی کوئری)

  • بیشتر اسلایدر هایی که در وبسایت ها میبینیم با جاوا اسکریپت و کتابخانه محبوب جی کوئری ساخته شده اند. ناگفته نماند که با css3 و بدون استفاده از جاوا اسکریپت و جی کوئری اسلایدر های زیبایی می توان ساخت ولی امکانات و ویژگی هایی که یک اسلایدر با css ساخته شده باشد زیاد نیست و ممکن است نیاز ها و انتظارات شما رو از یک اسلایدر عالی برطرف نکند.
  • ساخت اسلایدر با جاوا اسکریپت و جی کوئری نیاز به یادگیری این زبان و کتابخانه ای داره و افرادی که دانش برنامه نویسی ندارن برای انها عقلانی نیست که به خاطر یک اسلایدر زمان برای یادگیری این زبان و کتابخانه بگذارند و برای برنامه نویس هایی که این زبان و کتابخانه را اموخته اند، برنامه نویسی و طراحی الگوریتم یک اسلایدر در زمانی که نمونه های انلاین با امکانات فوق العاده وجود دارند یک تفکر اشتباهی است .
  • پلاگین Owl Carousel یکی از پر امکانات ترین گزینه ها برای ایجاد اسلایدر است که کاملا رایگان میباشد و با جاوا اسکریپت و جی کوئری ساخته شده.
  • این افزونه کاملا رایگانه و از قابلیت تاچ پیروی میکنه و کاربرانی که از موبایل یا تبلت استفاده میکنن به راحتی میتونن با اسلایدر ارتباط برقرار کنند و این افزونه با جی کوئری ساخته شده و با مرورگر های قدیمی و خیلی قدیمی (مرورگر های زامبی ) سازگاری کامل داره.
  • این افزونه از لود تنبل و اتو پلی پشتیبانی میکنه و می تونید به حالت راستچین هم دربیاورید و افکت های زیبایی رو موقع تعویض اسلاید ها اعمال کنید.
  • با استفاده از این پلاگین می تونید هر نوع اسلایدری، تصویری، متنی و ویدیویی و یا ترکیبی از این سه مورد رو ایجاد کنید و اسلاید ها رو به صورت تکی و چندین اسلاید به صورت همزمان نمایش دهید .
  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحاتی مثل، صفحه اصلی رو مشاهده کنید کروسل مربوط به محصولات رو خواهید دید که با استفاده از این پلاگین یه همچین قابلیتی رو میشه پیاده سازی کرد.

Owl Carousel 2 Thumbnails plugin (پشتیبانی از تصاویر بند انگشتی در ایجاد اسلایدر)

  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحه محصول رو مشاهده کنید در بخش مربوط به گالری تصاویر محصول یکسری تصویر در سایز کوچک (بند انگشتی) وجود داره که زمانی که کاربر روی هر کدام از اون تصاویر بند انگشتی کلیک کنه تصویر در سایز بزرگتر رو نمایش میکنه که با استفاده از این پلاگین Owl Carousel 2 Thumbnails می توانیم این قابلیت رو پیاده سازی کنیم نکته ای که باید توجه کنید جتما قبلش خود Owl Carousel رو به پروژه اضافه کنید بعدش این پلاگین اضافه بشه و برای فعال کردن این قابلیت ویژگی thumbs: true رو فعال می کنیم.

noUiSlider (ایجاد اسلایدر رنج قیمت)

  • شاید دیده باشید در برخی از سایت‌ها که محصولات یا خدماتی رو بفروش میرسونن فیلترهایی رو در کنار صفحات خود قرار میدن تا کاربر با اعمال این فیلترها به محصول سریع‌تر دسترسی پیدا کنه.
  • برای این کار noUiSlider که یک افزونه جاوا اسکریپت سبکه که noUiSlider دارای ویژگی‌های فراوانیه که هیچ وابستگی به افزونه خاصی نداره و کیبورد رو هم پشتیبانی می‌کنه و به خوبی در طراحی‌های ریسپانسیو کار می‌کنه.
  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحه فیلتر محصولات رو مشاهده کنید، در ستون سمت چپ بخشی وجود داره با عنوان محدوده قیمت که کاربر با جابه جا کردن اسلایدر میتونه بازه قیمت رو مشخص کنه و زمانی که اسلایدر رو جابه جا میکنه قیمت تغییر پیدا میکنه، که این بخش با استفاده از این پلاگین noUiSlider پیاده سازی شده.

wNumb.js (تعیین فرمت نمایش برای عدد و پول)

  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحه فیلتر محصولات رو مشاهده کنید، در ستون سمت چپ بخشی وجود داره با عنوان محدوده قیمت که کاربر با جابه جا کردن اسلایدر میتونه بازه قیمت رو مشخص کنه و زمانی که اسلایدر رو جابه جا میکنه قیمت تغییر پیدا میکنه، حالا با استفاده از این کتابخانه wNumb.js می تونیم فرمت نمایش واحد پول رو تعیین کنیم که بعد از هر 3 رقم عدد یه کامایی (,) قرار بده.

jQuery Nice Select (ساخت Select های زیبا برای سایت)

  • Nice Select یک پلاگین سبک و زیبا که میتونه افکت جذاب و ظاهری زیبا رو برای select های سایت شما ایجاد کنه، پلاگین jQuery Nice Select شامل یک فایل CSS و یک فایل جاوا اسکریپت بوده و استفاده از آن بسیار آسان می باشد. هنگامی که قصد ساخت Select های زیبا برای سایت را دارید، jQuery Nice Select یک انتخاب عالی به شمار می رود.
  • زیبایی و افکت جالب در هنگام باز و بسته شدن، از خصوصیات این پلاگین به شمار می رود.
  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحات (اطلاعات سفارش - پروفایل کاربری (آدرس ها)) رو مشاهده کنید خواهید دید زمانی که کاربر بر روی ایجاد آدرس یا تغییر آدرس ارسال کلیک کند یک مدالی براش باز میشه که در اون مدال یک بخشی وجود داره که مربوط به لیست استان ها و شهرها هستش که با استفاده از این پلاگین می تونیم یک زیبایی و افکت جالبی رو هنگام باز و بسته شدن به select هامون اعمال کنیم.

jQuery Stack Menu (لیستهای مورد نظرمون رو به صورت یک منوی استک عمودی در می یاره)

  • Stack Menu یک پلاگین ناوبری jQuery، سازگار با سئو و موبایل که لیست HTML تودرتو رو به یک منوی استک عمودی تبدیل میکنه.
  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحه محصول رو مشاهده کنید در سکشن مربوط به مشخصات محصول که شامل تصویر،قیمت،ویژگی های محصول میشه از دو قسمت تشکیل شده که قسمت سمت چپ مدنظره (اون قسمتی که قیمت محصول وجود داره ) اگر کاربر روی فروشنده دیجی کالا کلیک کنه یا روی موجود در انبار دیجی کالا کلیک کنه آیتم های مربوط به هر لیست رو با یک ظاهر زیبا نمایش میده که با استفاده از این پلاگین Stack Menu این قابلیت پیاده سازی شده.

jquery.horizontalmenu (منو رو در صفحه نمایش کوچک به صورت فهرست کشویی درمیاره)

  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحات (محصول - فیلتر محصولات) رو مشاهده کنید خواهید دید زمانی که عرض دستگاه کوچک شود منوی مربوط به دسته بندی محصولات در صفحه فیلتر محصولات و منوی مربوط به معرفی ویژگی های محصول در صفحه محصول به صورت منوی کشویی در می آید که با استفاده از این پلاگین horizontalmenu می تونیم این قابلیت رو پیاده سازی کنیم.

Headroom.js (پنهان کردن هدر وب سایت در اسکرول)

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

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

Theia Sticky Sidebar (کتابخانه ای برای ایجاد نوار کناری | سایدبار چسبان)

  • اگر کدنویس و طراح سایت باشید، می دونید که برای ثابت کردن نوار کناری سایت، به طوری که با پیمایش عمودی صفحه، همچنان نوار کناری تا حد زیادی در جایگاه خود ثابت باقی بماند، باید از جاوا اسکریپت استفاده کنید.
  • اگر خواسته باشید از ابتدا این کدها رو بنویسید، زمان زیادی از شما سلب خواهد شد. بهترین کار استفاده از یک کتابخانهٔ آماده به نام Theia Sticky Sidebar است که با افزودن سند آن به سایت خود و ویرایش چند تا Class از کدهای HTML سایت، به خوبی کار خواهد کرد.
  • با ورود به نشانی این کتابخانه در github می تونید توضیحات کاملی از اون رو دریافت کنید. همچنین خود سند کتابخانه Sticky Sidebar که در پوشهٔ js قرار گرفته است را هم دانلود کنید.
  • در پوشهٔ examples هم نمونه کدهای آماده قرار گرفته، که با فریم ورک‌هایی مثل Bootstrap و Foundation و حتی بدون هیچ فریم ورک ساخته شدند. با بررسی آنها نحوهٔ کار کردن با این کتابخانه رو خواهید آموخت.
  • اما به طور کلی شما باید jQuery رو به همراه این کتابخانه در صفحات سایت خود لود کنید. سپس از یک تکه کد جاوا اسکریپت هم در همان صفحات استفاده می‌کنید. حالا کلاس‌هایی را به div های نوار کناری اضافه می‌نمایید.
  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحات (فیلتر محصولات - فیلتر محصولات شگفت انگیز - صفحات مربوط به پروفایل کاربری - سبد خرید - انتخاب شیوه پرداخت - دسته بندی مقالات - مقاله) رو مشاهده کنید خواهید دید سایدبار تمامی این صفحات به صورت چسبان است.

ResizeSensor (اسکریپت تشخیص ارتفاع)

  • Theia Sticky Sidebar از کتابخانه CSS Element Queries برای تشخیص زمان تغییر ارتفاع نوارهای کناری شما استفاده میکنه تا بتونه موقعیت اون ها رو دوباره محاسبه کنه. مثلاً اگر از آکاردئون استفاده می کنید، این اتفاق می افته.
  • شما می توانید اسکریپت ResizeSensor.min.js رو در صفحه خود قرار ندهید، در این صورت نوار کناری Theia Sticky به کار خودش ادامه میده (احتمالاً کمی هموارتر) اما به طور خودکار تغییرات ارتفاع رو تشخیص نمیده.
  • پس بهتره قبل از فراخوانی فایل theia-sticky-sidebar.min.js فایل ResizeSensor.min.js رو فراخوانی کنیم تا تغیرات ارتفاع تشخیص داده بشه.

Chart.js (کتابخانه ای برای نمایش داده ها بر روی نمودار)

  • کتابخانه Chart.js یک کتابخانه متن‌باز و جاوااسکریپتی هستش که برای ساخت نمودارهای تعاملی و قابل تنظیم در وب‌سایت‌ها استفاده میشه.
  • این کتابخانه به برنامه‌نویسان این امکان رو میده تا به سادگی نمودارهایی مانند نمودارهای خطی، نمودارهای میله‌ای، نمودارهای دایره‌ای و دیگر انواع نمودارها رو در صفحات وب خود ایجاد کنن.
  • Chart.js بر پایه HTML5 Canvas ساخته شده و به عنوان یک کتابخانه کوچک و سبک به شمار می‌رود.
  • این کتابخانه از ساختار داده JSON برای توصیف داده‌های نمودار استفاده میکنه و قابلیت تنظیم و سفارشی‌سازی بالا رو به برنامه‌نویسان ارائه میده.
  • با استفاده از Chart.js، می‌تونید نمودارها رو بصورت تعاملی و داینامیک در وبسایت‌ها نمایش دهید. این کتابخانه انواع امکاناتی رو فراهم میکنه، از جمله تنظیم رنگ‌ها، استفاده از عناصر بصری مانند برچسب‌ها و افزودن افکت‌ها و انیمیشن به نمودارها.
  • Chart.js برای کاربردهای مختلفی مانند نمایش داده‌های آماری، پیشرفت پروژه‌های داده‌برداری، نمایش تحول زمانی و بسیاری از کاربردهای دیگر مورد استفاده قرار میگیره.
  • از آنجایی که Chart.js در مرورگرهای مدرن قابل پشتیبانی است و دارای مستندات کامل و جامع است، به عنوان یک ابزار قدرتمند برای ساخت و نمایش نمودارها در وبسایت‌ها شناخته میشه.
  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحه محصول رو مشاهده کنید خواهید دید که در کنار تصویر محصول یکسری آیکون هایی وجود داره، که با کلیک بر روی آیکون نمودار قیمت، نمودار قیمت فروش محصول رو در بازه زمانی های مختلف خواهید دید.

Hint.css (برای نمایش Tooltipها استفاده میشه)

  • Hint.css یکی از کتابخانه‌های معروف CSS برای نمایش Tooltipها هستش که توسط بسیاری از وبسایت‌های معروف استفاده میشه.
  • Hint.css از aria-label استفاده میکنه،که با استفاده از متدولوژی BEM، می تونید از طریق نام کلاس، رنگ و اندازه Tooltip ها رو تنظیم کنید. Hint.css بر روی NPM، Bower و CDNJS در دسترس است.
  • اگر به قسمت دموهای قالب HTML فروشگاهی سایت دیجی کالا مراجعه کرده و پیش نمایش صفحه محصول رو مشاهده کنید خواهید دید که در کنار تصویر محصول یکسری آیکون هایی وجود داره، زمانی که کاربر موس اش رو بر روی هر کدام از آیکون ها ببرد یه Tooltip ای براش ظاهر میشه مثلا اگر موس رو بر روی آیکون قلب ببرد Tooltip (افزودن به علاقه مندی) رو مشاهده خواهد کرد.

countdown

Font Awesome (کتابخانه ای برای استفاده از آیکون‌فونت)

  • حتما در مورد آیکون و فونت تا به حال شنیده‌ و با آن‌ها کار کرده‌اید. اما «آیکون‌فونت» (Icon Font) چیه؟
  • آیکون‌فونت دقیقا مشابه فونت‌های معمولی، شکل و حس یک متن رو به بیننده نشان میده. با این وجود آیکون‌فونت‌ها از حروف و اعداد ساخته‌ نمیشن.شاید این سوال برای شما پیش بیاید وقتی نتونیم از حروف برای نوشتن استفاده کنیم، آیکون‌فونت چه کاربردی داره؟
  • آیکون‌فونت رو برای شکل‌ دادن به وب‌سایت، مورد استفاده قرار میدن. به دلیل ماهیت وکتور (vector)، اون ها رو می‌توان با زبان CSS از نظر اندازه و شکل تغییر یا حرکت داد. این روش مزایای زیادی نسبت به راه سنتی استفاده از تصاویر داره.
  • ظاهر و حس یک آیکون رو تنها با چند خط کد می‌توان تغییر داد. همچنین نیازی به کار با ابزارهای ویرایش عکس مانند فتوشاپ یا بارگذاری فایل‌های جدید نیست. تنها باید کد بنویسید.
  • فونت آسام (Font Awesome) یک وب سایت فوق العاده قدرتمند و حرفه ای و البته مشهور در زمینه ارائه آیکون هستش. Font Awesome آیکون های بسیاری زیادی داره و به نوعی بزرگترین کتابخانه آیکون دنیاست.
  • جالب است بدونید وب سایت های وردپرسی نیز تمامی آیکون های خود را به صورت مستقیم از سایت فونت آسام بارگیری می کنن. تنوع فوق العاده بالا در آیکون ها که استفاده از آنها را بسیار ساده کرده.
  • کاربرد Font Awesome جهت جذب مخاطب بیشتر است. مسلما استفاده از آیکون در دکمه ها و همینطور آیتم های منو بسیار کاربردیه. کاربران بسیار به آیکون ها علاقه مند هستند. همینطور شما می تونید در جهت ریسپانسیو کردن سایت و سئو موبایل نیز از آن استفاده کنید.
  • در این قالب HTML فروشگاهی سایت دیجی کالا برای به نمایش درآوردن آیکون ها هم از Font Awesome استفاده شده و هم از آیکون هایی با فرمت SVG .

حس خوبی که کاربران ...

تجربه کرده اند...

نظر/پرسش/پیشنهاد شما

برای ارسال نظر لطفا ابتدا وارد شوید.

0