طراحی هدر وب سایت دیجی کالا

اهمیت هدر وب سایت

در زبانی ساده به محتوای اولین بخشی که در ابتدای وب سایت قرار دارد هدر وب سایت میگویند. که معمولا تمامی صفحات نمایش داده میشود و مشترک است. ودر تمامی وب سایت ها شخصی، فروشگاهی، شرکتی و… با یک هدف واحد یعنی ارائه تمامی سرویس ها و محتویات وب سایت در یک قاب کلی برای کاربران میباشد که به منظور هدایت صحیح کاربر به بخش مورد نیاز خود استفاده میشود
از آنجایی که هدر به عنوان اولین فضای بصری که کاربران مواجه میشوند اهمیت ویژه ای پیدا میکند و باید مفاهیمی در بر داشته باشدکه با استفاده از تصویر و متون مختلف اهدافی که را که دنبال میکند به کاربران انتقال دهد. طراحی هدر وب سایت از حساسیت بالایی نیز برخوردار است به نحوی که کاربران با هدری بی کیفیت و نامطلوب مواجه شوندحتی اگر وب سایت از محتوای غنی و قدرتمندی برخوردار باشد  در نگاه اول تاثیر منفی بر روی آنها خواهد گذاشت و ممکن است تصمیم به ترک صفحه بگیرند

چرا هدر دیجی کالا ؟

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

اگر بتونی هدر دیجی کالا رو بسازی ... طراحی انواع هدر برات مثل آب خوردن می مونه !

تمامی چالش های مختلف در ساخت انواع هدر با المنتور مثل ساخت مگامنو سفارشی، چند لایه بودن هدر و همچنین از تعداد المان های زیاد مانند لوگو، فیلد جستجو، فرم ورود، سبد خرید و … که بتونن کنار هم و درست صحیح قرار بگیرند در هدر دیجی کالا وجود داره و شک نکن که اگه بتونی این هدرو بسازی، دیگه میتونی به تمامی هدر ها غلبه کنی و هر هدری که از این به بعد دوست داری طراحی کنی

واکنشگرایی (ریسپانسیو)

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

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

آموزش ساخت هدر دیجی کالا

سر فصل های دوره آموزشی

تمامی دوره به صورت ویدئو آموزشی در 4 قسمت می باشد

بخش اول

  • نصب و فعال سازی افزونه های JetMenu, JetBloCk و JetSearch
  • ایجاد قالب با فرمت هدر
  • ساخت سکشن سفارشی برای بخش اول هدر
  • تکثیر و سفارشی سازی ستون های بخش اول
  • طراحی و نمایش لوگو دیجی کالا
  • ساخت فیلد جستجو با افزونه JetSerach
  • ساخت سبد خرید مبتنی بر فروشگاه ساز ووکامرس با افزونه JetBlock

بخش دوم

  • ساخت فرم ورود با افزونه JetMenu

بخش سوم

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

بخش چهارم

  • توسعه هدر و واکنشگرا کردن هدر در نمایشگر موبایل

افزونه های مورد نیاز برای طراحی هدر دیجی کالا

  • افزونه المنتور پرو
  • افزونه JetBlocks
  • افزونه JetMenu
  • افزونه JetSearch

15
دیدگاه

avatar
9 دیدگاه نویسنده
Esfahlan.comiranelementorفرهادمصطفی صفریAmiRmOhammad اخرین دیدگاه های نویسنده
علی
مهمان
علی

سلام وقتتون خوش
ی سوال دارم من الان وب سایتم فروشگاهی نیست. راهنمایی میکنید که برای ساختن یک هدر برای سایتی با حوضه خدماتی باید چیکار کنم ؟

محمد امین معظمی
مهمان
محمد امین معظمی

دست مریزاد به مجموعه خوبتون . ایول، ایوله ایول!!!!

مشتری 565
مهمان
مشتری 565

جالبه!

محسن دلاوری
مهمان
محسن دلاوری

سلام من این افزونه های جتو دارم .تخفیف شامل بنده نمیشه؟

مصطفی صفری
مهمان
مصطفی صفری

خیلی خوبه واقعا
منکه حالا حالا با شما و آموزشاتون کار دارم

فرهاد
مهمان
فرهاد

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

با تشکر

فرهاد
مهمان
فرهاد

بسیار عالی و ممنون بابت پاسخگویی سریع

فرهاد
مهمان
فرهاد

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

خیلی ممنون

Esfahlan.com
مهمان
Esfahlan.com

سلام
1- منوی آجاکسی دیجیکالا و 2- ورود/عضویت به صورت پاپ آپ و 3- جستجوی آجاکسی شبیه دیجیکالا ساخته میشود در این آموزش؟
با تشکر
– امین

  • پشتیبانی مادام العمر
  • دسترسی همیشگی به فایل محصول
  • به روزرسانی ویدئو های آموزش

پکیج پایه

  • ویدئو آموزش هدر دیجی کالا
29000 تومان – خرید

پکیج کامل

  • ویدئو آموزش هدر دیجی کالا
  • افزونه JetMenu
  • افزونه JetBlocks
  • افزونه JetSearch
99000 تومان – خرید
You can`t add more product in compare