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

طراحی وب سفارشی - از فیگما تا وردپرس با Elementor Pro

طراحی وب سفارشی - از فیگما تا وردپرس با Elementor Pro

✅ سرفصل و جزئیات آموزش

آنچه یاد خواهید گرفت:

  • تسلط به طراحی UI و UX با فیگما - ایجاد طرح‌‌بندی‌های زیبا و کاربرپسند با کامپوننت‌ها، طرح‌بندی‌های خودکار و سیستم‌های طراحی مانند حرفه‌ای‌ها
  • ساخت با Elementor Pro - تبدیل طراحی‌های فیگما به سایت‌های وردپرس واکنش‌گرا با سفارشی‌سازی پیشرفته و محتوای پویا
  • بهینه‌سازی برای عملکرد، امنیت و سئو - تسریع وبسایت‌ها، تقویت امنیت و بهبود رنکینگ در موتورهای جستجو
  • اعمال اصول طراحی متمرکز بر کاربر - ایجاد وبسایت‌های شهودی با نرخ تبدیل بالا که بازدیدکنندگان را درگیر می‌کند.

پیش‌نیازهای دوره

  • بدون نیاز به تجربه قبلی - مناسب برای مبتدیان - ما از پایه آغاز خواهیم کرد.
  • یک رایانه (مک و ویندوز)
  • اتصال اینترنتی برای دسترسی به ابزارها، میزبانی و مباحث دوره
  • علاقه به یادگیری - خلاقیت خود را به همراه بیاورید، ما بقیه را انجام می‌دهیم.

توضیحات دوره

شما چشم‌انداز طراحی خود را با این دوره عملی و گام‌به‌گام به واقعیت تبدیل می‌کنید.

در دوره «طراحی وب سفارشی - از فیگما تا وردپرس با Elementor Pro»، یاد خواهید گرفت چگونه وبسایت‌های زیبا و متمرکز بر کاربر را در فیگما طراحی کنید و با استفاده از وردپرس و Elementor Pro آنها را جان‌بخشی کنید.

چه تازه‌کار باشید یا بخواهید مهارت‌های فریلنسری خود را گسترش دهید، این دوره شما را از ایده تا ایجاد وبسایت لایو در کل فرآیند هدایت می‌کند.

آنچه خواهید آموخت:

اصول طراحی UI و UX

  • درک اصول طراحی متمرکز بر کاربر - شما می‌آموزید چگونه از تئوری رنگ، تایپوگرافی، سیستم‌های طرح‌بندی و سلسله‌مراتب ویژوال برای طراحی وبسایت‌هایی استفاده کنید که هم زیبا و هم شهودی باشند.

تسلط به فیگما برای طراحی وب

  • با رابط کاربری فیگما، طرح‌بندی خودکار، گریدها، ابزارهای نمونه‌سازی اولیه و کتابخانه‌های کامپوننت آشنا می‌شوید. شما مدل‌های UI آماده برای کلاینت می‌سازید که به راحتی به وبسایت‌های واقعی تبدیل می‌شوند.

فیگما تا وردپرس با Elementor Pro

  • شما می‌آموزید دقیقاً چگونه طراحی‌های فیگما را به سایت‌های وردپرس کاملاً تابعی تبدیل کنید. شما از Elementor Pro برای ساخت صفحات واکنش‌گرا، هدرها، فوترها و قالب‌ها بدون کدنویسی استفاده می‌کنید.

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

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

پروژه وبسایت مطالعه موردی

  • در حین دوره روی پروژه‌ای با استایل واقعی کار می‌کنید. شما یک وبسایت کامل برای کسب‌وکار از صفر تا صد می‌سازید و همه مواردی را که از طراحی UI و UX در فیگما آموخته‌اید با توسعه کامل در وردپرس با Elementor Pro به کار می‌برید. در پایان، وبسایتی خواهید داشت که برای پورتفولیو مناسب است و استانداردهای طراحی و توسعه حرفه‌ای را منعکس می‌کند.

نکات فریلنسری و گردش‌کار

  • مباحث آموزشی اضافی برای بهبود گردش‌کار شما - چک‌لیست‌های تحویل به کلاینت، نکات ارتباطی و ابزارهای هوش مصنوعی برای سرعت بخشیدن به فرآیند و بهبود موارد قابل تحویل شما

مخاطبان دوره:

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

آنچه نیاز دارید:

  • یک کامپیوتر (مک یا ویندوز)
  • یک اتصال اینترنت پایدار
  • تمایل به یادگیری و دنبال کردن گام به گام
  • ما همه موارد را از ایجاد حساب فیگما، خرید و راه‌اندازی هاست و دامین، نصب وردپرس و فعال‌سازی Elementor Pro با هم طی خواهیم کرد. هیچ تجربه قبلی نیاز نیست.

از تکیه بر قالب‌هایی که با برند شما یا نیازهای مشتری شما مطابقت ندارند، دست بردارید. ساخت وبسایت‌های سفارشی و با عملکرد بالا را شروع کنید که عالی به نظر می‌رسند و نتایج واقعی ارائه می‌دهند.

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

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

  • طراحان وب آینده - با تسلط به گردش کار کامل طراحی تا توسعه با استفاده از ابزارهای پرطرفدار مانند فیگما و Elementor Pro، حرفه خود را شروع می‌کنید.
  • فریلنسرها و کارآفرینان - با سایت‌های وردپرس سفارشی ساخته شده از ابتدا (بدون قالب!) مشتریان را تحت تأثیر قرار می‌دهید و برای مهارت‌های خود قیمت‌های بالایی دریافت می‌کنید.
  • طراحان UI و UX - با یادگیری نحوه تبدیل نمونه‌های اولیه فیگما به وبسایت‌های تابعی، شکاف بین طراحی و توسعه را پر می‌کنید.
  • کسی که عاشق طراحی وبسایت است.

طراحی وب سفارشی - از فیگما تا وردپرس با Elementor Pro

  • مقدمه 03:08
  • چرا قالب‌های عمومی وبسایت کار نمی‌کنند؟ 02:10
  • UI و UX چیست و چگونه می‌توان آنها را در طراحی وب به کار برد؟ 02:44
  • ابزار طراحی فیگما چیست؟ 01:17
  • ایجاد حساب فیگما 03:09
  • فیگما UI3 چیست؟ 02:15
  • راهنمای فیگما UI2 12:29
  • یادگیری طرح‌بندی گرید فیگما 07:23
  • کامیونیتی فیگما چیست؟ 06:02
  • طراحی بخش hero با فیگما UI2 - بخش 1 19:27
  • طراحی بخش hero با فیگما UI2 - بخش 2 19:05
  • طراحی بخش hero با فیگما UI2 - بخش 3 15:02
  • یادگیری طرح‌بندی خودکار فیگما 13:39
  • فعال‌سازی UI3 Beta برای فیگما 02:00
  • راهنمای فیگما UI3 03:43
  • یادگیری طرح‌بندی خودکار فیگما با UI3 05:05
  • طراحی دکمه‌ها با طرح‌بندی خودکار 06:36
  • طراحی بخش hero با طرح‌بندی خودکار - بخش 1 14:57
  • طراحی بخش hero با طرح‌بندی خودکار - بخش 2 19:51
  • طراحی بخش hero با طرح‌بندی خودکار - بخش 3 10:57
  • مقدمه‌ای بر اصول طراحی UI و UX 00:55
  • سلسله‌مراتب ویژوال 01:54
  • یادگیری درباره تایپوگرافی 02:38
  • یادگیری درباره فونت 01:38
  • نحوه یافتن فونت‌ها با Google Fonts 03:24
  • نحوه استفاده از روانشناسی رنگ 02:36
  • قانون 60-30-10 چیست؟ 02:40
  • طراحی کاربر محور چیست؟ 04:00
  • اصل KISS چیست؟ 02:40
  • یادگیری محدوده پروژه 01:31
  • Mood board چیست؟ 01:57
  • چگونه پالت رنگ بسازیم؟ 06:55
  • درک مراحل طراحی وب سفارشی 05:23
  • ایجاد پروپوزال پروژه و چک‌لیست الزامات 04:27
  • چک‌لیست پروژه 10:44
  • استفاده از هوش مصنوعی در طراحی وب 05:27
  • ایجاد پروپوزال پروژه 10:13
  • جمع‌آوری الهامات طراحی 10:44
  • ایجاد Mood board 11:39
  • ایجاد ساختار وبسایت 05:38
  • ایجاد sitemap 06:58
  • انتخاب فونت برای وبسایت 10:14
  • استیکر شیت چیست؟ 07:53
  • ایجاد پالت رنگ 07:15
  • طراحی لوگوی برند 05:33
  • کامپوننت فیگما چیست؟ 05:00
  • یادگیری بیشتر درباره کامپوننت‌ها با دکمه‌ها 08:36
  • چگونه محتوای طراحی وب را پیدا کنیم؟ 04:56
  • طراحی بخش hero 06:11
  • طراحی منو 10:53
  • طراحی عنصر تماس با ما 09:11
  • طراحی CTA بخش hero 10:28
  • طراحی بخش درباره ما 20:00
  • طراحی بخش خدمات - بخش 1 12:23
  • طراحی بخش خدمات - بخش 2 06:50
  • طراحی بخش خدمات - بخش 3 06:38
  • تولید محتوا برای بخش ارائه‌دهندگان ما 01:26
  • طراحی بخش ارائه‌دهندگان ما 18:37
  • تغییر چینش بخش‌ها 01:09
  • طراحی بخش تماس با ما 17:06
  • طراحی بخش نظرات 14:01
  • طراحی بخش فوتر 16:23
  • طراحی صفحه درباره ما - بخش 1 14:27
  • طراحی صفحه درباره ما - بخش 2 05:13
  • طراحی صفحه وبلاگ 04:42
  • طراحی صفحه‌بندی وبلاگ 07:03
  • طراحی صفحه تماس با ما - بخش 1 08:20
  • طراحی صفحه تماس با ما - بخش 2 04:24
  • طراحی صفحه درباره ما - بخش 1 16:55
  • طراحی صفحه درباره ما - بخش 2 02:45
  • طراحی صفحه درخواست وقت ملاقات 04:31
  • خرید هاست و دامین 09:24
  • نصب وردپرس 02:41
  • پاکسازی وردپرس 01:49
  • راهنمای وردپرس 07:30
  • راه‌اندازی Elementor Pro 04:37
  • پاکسازی داشبورد وردپرس 00:50
  • راهنمای ویرایشگر المنتور 11:19
  • صفحه coming soon در المنتور 15:12
  • وردپرس و المنتور چگونه ایجاد شدند؟ 09:08
  • طراحی بخش hero - بخش 1 14:14
  • طراحی بخش hero - بخش 2 10:48
  • طراحی بخش hero - بخش 3 09:40
  • طراحی بخش hero - بخش 4 12:44
  • طراحی بخش hero - بخش 5 17:29
  • طراحی بخش hero - هایلایت‌های منو 03:52
  • طراحی بخش hero - چالش 00:22
  • طراحی بخش hero 09:28
  • فیکس کردن مشکل واکنش‌گرایی دسکتاپ 04:00
  • طراحی بخش hero 12:33
  • المنتور بروزرسانی شده 03:08
  • پاکسازی بک‌اند وبسایت 03:01
  • فونت‌ها و رنگ‌های جهانی المنتور 11:04
  • راه‌اندازی تنظیمات سایت 07:34
  • طراحی هدر - بخش 1 15:07
  • طراحی هدر - بخش 2 03:37
  • حذف فوتر پیش‌فرض 01:21
  • طراحی بخش Hero 10:03
  • بخش خلاصه درباره - بخش 1 10:35
  • بخش خلاصه درباره - بخش 2 05:05
  • بخش خلاصه درباره - بخش 3 03:04
  • بخش خلاصه درباره - بخش 4 07:54
  • طراحی بخش خدمات - بخش 1 09:07
  • طراحی بخش خدمات - بخش 2 16:38
  • افزایش امنیت 07:21
  • تغییر URL لاگین به وردپرس 03:40
  • ایجاد فیلدهای سفارشی با پلاگین Advanced Custom Fields 12:53
  • طراحی بخش ارائه‌دهندگان ما - بخش 1 11:44
  • نحوه استفاده از کاروسل حلقه - بخش 1 09:33
  • نحوه استفاده از کاروسل حلقه - بخش 2 10:15
  • طراحی بخش ارائه‌دهندگان ما - بخش 2 10:19
  • طراحی بخش ارائه‌دهندگان ما - بخش 3 02:22
  • طراحی بخش ارائه‌دهندگان ما - بخش 4 08:37
  • طراحی بخش ارتباط با ما - بخش 1 09:29
  • طراحی بخش ارتباط با ما - بخش 2 02:05
  • طراحی بخش ارتباط با ما - بخش 3 07:33
  • طراحی بخش ارتباط با ما - بخش 4 02:16
  • فیکس کردن مشکل box shadow 02:38
  • طراحی بخش نظرات - بخش 1 04:59
  • طراحی بخش نظرات با عناصر نظرات 09:12
  • طراحی بخش نظرات - بخش 2 25:49
  • طراحی بخش نظرات - بخش 3 03:13
  • طراحی بخش نظرات - بخش 4 06:52
  • طراحی بخش فوتر 12:27
  • طراحی بخش کپی‌رایت فوتر 03:46
  • افزودن افکت موشن 01:34
  • فیکس کردن مشکل واکنش‌گرایی - بخش 1 10:12
  • فیکس کردن مشکل واکنش‌گرایی - بخش 2 11:02
  • فیکس کردن مشکل واکنش‌گرایی - بخش 3 19:36
  • طراحیصفحه درباره ما - بخش 1 16:55
  • طراحیصفحه درباره ما - بخش 2 02:45
  • طراحی صفحه وبلاگ - بخش 1 03:48
  • طراحی صفحه وبلاگ - بخش 2 04:37
  • طراحی صفحه وبلاگ - بخش 3 05:14
  • طراحی صفحه وبلاگ - بخش 4 03:55
  • طراحی صفحه وبلاگ - بخش 5 13:11
  • طراحی فرم تماس با ما - بخش 1 08:26
  • افزودن کد CSS برای نمایش برچسب در فیلد فایل 01:24
  • طراحی فرم تماس با ما - بخش 2 03:10
  • طراحی فرم تماس با ما - بخش 3 03:07
  • فیکس کردن مشکل هدر 08:17
  • طراحی درخواست وقت ملاقات - بخش 1 01:05
  • طراحی درخواست وقت ملاقات - بخش 2 01:29
  • طراحی درخواست وقت ملاقات - بخش 3 05:48
  • لینک‌دهی به صفحه اصلی 04:38
  • ایجاد پاپ‌آپ 14:08
  • افزودن پاپ‌آپ‌های پویا با کاروسل حلقه 12:57
  • فیکس کردن مشکل نمایش نیافتن پاپ‌آپ‌های پویا 07:51
  • تابعی کردن فوتر 05:15
  • واکنش‌گرا کردن وبسایت 09:08

7,603,500 1,520,700 تومان

مشخصات آموزش

طراحی وب سفارشی - از فیگما تا وردپرس با Elementor Pro

  • تاریخ به روز رسانی: 1404/09/07
  • سطح دوره:مقدماتی
  • تعداد درس:150
  • مدت زمان :19:15:36
  • حجم :21.45GB
  • زبان:دوبله زبان فارسی
  • دوره آموزشی:AI Academy

آموزش های مرتبط

The Great Courses
2,495,000 499,000 تومان
  • زمان: 06:19:16
  • تعداد درس: 40
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
6,787,000 1,357,400 تومان
  • زمان: 17:11:52
  • تعداد درس: 113
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
8,360,500 1,672,100 تومان
  • زمان: 21:10:47
  • تعداد درس: 202
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
5,720,500 1,144,100 تومان
  • زمان: 14:29:26
  • تعداد درس: 36
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
4,206,500 841,300 تومان
  • زمان: 10:39:08
  • تعداد درس: 64
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
4,391,000 878,200 تومان
  • زمان: 11:07:45
  • تعداد درس: 63
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
7,261,000 1,452,200 تومان
  • زمان: 18:23:18
  • تعداد درس: 103
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
490,000 98,000 تومان
  • زمان: 00:57:00
  • تعداد درس: 20
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
490,000 98,000 تومان
  • زمان: 00:41:00
  • تعداد درس: 9
  • سطح دوره:
  • زبان: دوبله فارسی

آیا سوالی دارید؟

ما به شما کمک خواهیم کرد تا شغل و رشد خود را افزایش دهید.
امروز با ما تماس بگیرید