اصول Webflow: راهنمای مقدماتی برای ساخت وبسایتهای زیبا
✅ سرفصل و جزئیات آموزش
Webflow به شما امکان میدهد وبسایتهای ریسپانسیو و قابل دسترسی را بدون نیاز به کدنویسی پیچیده و با استفاده از تکنیکهای طراحی بصری بسازید.
این دوره برای افرادی طراحی شده که به تازگی در Webflow و طراحی وب شروع به کار کردهاند.
ما با ایجاد یک وبسایت تک صفحهای ساده شروع میکنیم، تکنیکهای پایه طرحبندی را یاد میگیریم و از انیمیشنهای ساده استفاده میکنیم.
نرمافزار Webflow بصری است و نیازی به یادگیری کدنویسی ندارد. در ادامه یاد میگیرید چگونه وبسایت خود را با دسکتاپ، لپتاپ و موبایل سازگار کنید. همچنین در مورد کلاسهای CSS برای طرحبندی، استایل فونت و اهمیت قواعد نامگذاری کلاسها می آموزیم.
اگر قبلاً با Webflow کار کردهاید و نمی دانید که آیا باید از گرید، فلکس، ستون یا div استفاده کنید یا خیر و از دلایل استفاده از آنها آگاه نیستید نگران نباشید. در پایان این دوره، میآموزید کدام را بکار ببرید و چرا!
همچنین یاد می گیریم چگونه وبسایت نمونه کار خود را بسازیم و انیمیشنهای جالبی را هم وارد کنیم.
بهصورت مشترک میآموزیم فرمها را ایجاد و استایل دهی کنیم و آنها را در وبسایت خود بگنجانیم.
بعضی از شما ممکن است از فیگما یا Adobe XD استفاده کرده باشید. به شما نشان میدهیم چگونه فایلهای خود را تبدیل کرده و در سایت Webflow بگنجانید.
تجربه قبلی استفاده از فیگما یا Adobe XD هنگام استفاده از Webflow ضروری نیست.
در ادامه در مورد Sticky Navs، سئو، سمبلها، REMها، Floats، گرادیان ها و فونتها میآموزیم.
یک وبسایت CMS و وبلاگ ایجاد کرده و یاد میگیریم چگونه مسئولیت این موارد را به مشتریان یا همکاران واگذار کنیم؛ همچنین سایت را برای دیگران واگذار می کنیم تا بتوانند به لاگین و مدیریت محتوا دسترسی داشته باشند.
یک وبسایت تجارت الکترونیک را بررسی، ایجاد و استایلبندی کرده و سبد خرید، فرم سفارش و درگاههای پرداخت را میآموزیم. همچنین یاد میگیریم چگونه محصولات و خدمات دیجیتال و فیزیکی را بفروشیم.
به یاد داشته باشید که اگر اصطلاحاتی مثل Global، فلکس، گرید و Nav برای شما دشوار به نظر میآیند، از ابتدا شروع کرده و تکنیکها را قدم به قدم مرور میکنیم. این دوره برای هر کسی که میخواهد وبسایتی با Webflow بسازد، مناسب است.
شاید فقط نیاز داشته باشید یک وبسایت برای خود طراحی کنید، طراح وب تماموقت شوید، یا به عنوان فریلنسر به گسترش نوع کارهایی که میتوانید به مشتریان پیشنهاد دهید، علاقهمند باشید. این دوره برای شما مناسب است!
در این دوره تکالیفی وجود دارد که به شما امکان میدهد مهارتهایتان را تمرین کرده و آنچه ایجاد میکنید را در نمونه کار شخصیتان به کار ببرید.
اصول Webflow: راهنمای مقدماتی برای ساخت وبسایتهای زیبا
-
مقدمهای بر دوره آموزشی Webflow 0:03:10
-
آموزش شروع کار با Webflow 0:03:00
-
Webflow چیست؟ 0:06:12
-
پرسشهای متداول Webflow - چقدر هزینه دارد؟ بخش 1 0:05:14
-
پرسشهای متداول Webflow - چقدر هزینه دارد؟ بخش 2 0:04:02
-
پرسشهای متداول Webflow - چقدر هزینه دارد؟ بخش 3 0:05:02
-
چگونه اولین وبسایت خود را در Webflow بسازیم؟ 0:08:46
-
پروژه کلاسی 01 - ایجاد خلاصه در Webflow 0:02:27
-
کانتینرها در مقابل سکشن ها در Webflow 0:09:11
-
چگونه کلاسهای CSS در Webflow ایجاد کنیم؟ 0:17:02
-
چگونه تصاویر را با حاشیه در Webflow اضافه کنیم؟ 0:06:45
-
تصاویر پسزمینه: چگونگی پوشش متن بر روی تصویر در Webflow 0:07:00
-
دکمههای با رنگ Hover در Webflow 0:13:21
-
ساخت Nav سفارشی خود در Webflow 0:11:41
-
چگونه منوی برگر موبایل کاربرپسند در Webflow ایجاد کنیم؟ 0:11:39
-
ویدئوی تولید 1 – ساخت سکشن های پشتیبانی و رویداد بعدی 0:21:41
-
هایپرلینک ها و حذف آندرلاین و رنگ از لینک در Webflow 0:05:41
-
اتصال لینک به پیج سکشن دیگری در Webflow 0:04:06
-
پروژه کلاسی 02 - ایجاد پیج کلاب 0:04:06
-
درک کلاسهای Combo در Webflow 0:06:55
-
شبکه Webflow 0:19:55
-
طراحی ریسپانسیو در Webflow چیست؟ 0:02:47
-
چگونه Webflow را ریسپانسیو کنیم؟ 0:18:12
-
شبکههای ریسپانسیو در Webflow 0:05:18
-
پروژه کلاسی 03 - شبکه و وبسایت ریسپانسیو 0:01:37
-
انیمیشن Button Hover در Webflow با استفاده از المنت تریگر 0:07:09
-
ظاهر کردن تدریجی اسکرول در Webflow 0:07:28
-
پروژه کلاسی 04 - تعاملات 0:01:05
-
اشتراکگذاری طرح خود با مشتریان 0:05:01
-
هزینه میزبانی سایت Webflow در مقابل فضای کار آن چقدر است؟ 0:06:03
-
بهترین میانبرهای Webflow و نکات و ترفندهای سریع 0:14:57
-
چگونه سبکهای پیشفرض را در Webflow تغییر دهیم؟ 0:09:18
-
کلاسهای Combo در مقابل کلاسهای Global در Webflow 0:09:38
-
قواعد نامگذاری کلاس در Webflow 0:22:05
-
چگونه از مدیر استایل در Webflow استفاده کنیم؟ 0:05:54
-
ویدئو تولید 2 – نمونه کار جدید 0:01:49
-
ارتفاع حداقلی در مقابل ارتفاع ویوپورت در Webflow 0:13:36
-
تبدیل فیگما به Webflow 0:05:26
-
تبدیل XD به Webflow 0:06:37
-
چگونه فونتها را به Webflow اضافه کنیم؟ 0:04:36
-
ویدئو تولید 3 - متن اصلی 0:15:39
-
فضای ارتفاع خط بعد از فاصلهٔ حروف در Webflow 0:08:19
-
سایههای متن و Box Button در Webflow 0:09:08
-
چگونه Global Swatcheها را در Webflow ایجاد کنیم؟ 0:12:36
-
نسبت کنتراست رنگ در Webflow چیست؟ 0:05:26
-
پسزمینه گرادیان در Webflow 0:04:47
-
کانتینر تمام عرض Navbar در Webflow 0:09:17
-
طرح بندی Webflow - مقایسه ستون، فلکس، گرید، None و Inline 0:03:06
-
طرح بندی فلکس در Webflow در مقابل Grid، کدام یک باید استفاده شود؟ 0:12:20
-
طرح بندی فلکس باکس با مثالهای عملی در Webflow 0:17:17
-
کارتهای با ارتفاع مساوی با دکمهٔ انتهایی در Webflow 0:14:22
-
توضیح موقعیت مطلق و نسبی در Webflow 0:09:34
-
Sticky Navbar، فوتر و Position Sticky در Webflow کار نمی کند 0:04:24
-
پروژه کلاسی 05 - صفحهٔ اصلی نمونه کار 0:05:11
-
پروژه کلاسی 05 - صفحهٔ اصلی نمونه کار - راه حل - بخش 1 0:24:29
-
پروژه کلاسی 05 - صفحهٔ اصلی نمونه کار - راه حل - بخش 2 0:29:42
-
چگونه از Px Rem و Em در Webflow استفاده کنیم؟ 0:11:36
-
چگونه از ارتفاع ویوپورت VH در Webflow استفاده کنیم؟ 0:08:04
-
چگونه کامپوننت Navbar را در Webflow استایل بندی دهیم؟ 0:12:15
-
افزودن و ارتباط پیج ها در Webflow 0:10:20
-
چگونه یک لینک تصویر در Webflow ایجاد کنیم؟ 0:07:13
-
ایجاد نماد و بازنویسی در Webflow 0:11:59
-
چگونه فرم تماس در Webflow ایجاد کنیم؟ 0:10:41
-
چگونه فرم را در Webflow استایل دهیم؟ 0:13:17
-
انواع تصویر در Webflow: مقایسه SVG ،PNG و JPG 0:08:11
-
تصاویر Hi-DPI و ریسپانسیو در Webflow چه هستند؟ 0:06:08
-
چگونه تصاویر را در Webflow با Object Fit برش دهیم؟ 0:02:51
-
Lazy Load در Webflow چیست؟ 0:02:00
-
چگونه favicon را در Webflow تغییر دهیم؟ 0:02:59
-
پاورقی به پایین چسبیده در Webflow 0:06:27
-
چگونه انیمیشن بارگذاری پیج در Webflow ایجاد کنیم؟ 0:20:26
-
ظاهر شدن تدریجی تصویر و بزرگتر شدن هنگام نگهداشت در Webflow 0:12:12
-
اسکرول پس زمینه Parallax - حرکت تصویر در Webflow 0:21:25
-
آیا Webflow برای سئو مناسب است؟ 0:03:35
-
توضیح متا، برچسب عنوان، روباتها و نقشه سایت در Webflow 0:07:29
-
متن جایگزین تصویر در Webflow چیست؟ 0:05:43
-
کلمات کلیدی سئو در هدینگ ها و URLها در Webflow 0:05:52
-
آیا میتوانید کد را به صورت خود میزبان از Webflow اکسپورت کنید؟ 0:07:43
-
لینک های فقط خواندنی در Webflow چه هستند؟ 0:02:43
-
مدیر استایل و پاکسازی کلاسها 0:04:42
-
استفاده از نام دامنهٔ وبسایت سفارشی خود در Webflow 0:07:57
-
اتصال دستی نام دامنهٔ سفارشی خود در Webflow 0:07:31
-
تست در دستگاه موبایل واقعی 0:02:28
-
پروژه کلاسی 06 - تکمیل نمونه کار 0:04:15
-
CMS کالکشن ایستا در مقایسه با پویا در Webflow 0:03:37
-
ایجاد CMS کالکشن در Webflow 0:06:52
-
افزودن لیست CMS کالکشن از طریق CSV در Webflow 0:05:29
-
افزودن لیست CMS کالکشن به صفحهٔ وب در فیگما 0:09:21
-
سازماندهی لیست کالکشن Webflow را نمایش می دهد 0:04:36
-
استایل دادن به لیست کالکشن با گرید و فلکس در Webflow 0:07:10
-
پروژه کلاسی 07 - کالکشن آشپزخانه 0:02:03
-
اجازه دادن به مشتری برای بروزرسانی وبسایت در ادیتور Webflow 0:07:18
-
چگونه با استفاده از پیج های CMS کالکشن در Webflow، وبلاگ ایجاد کنید؟ 0:07:33
-
اتصال به پیج کالکشن از صفحهٔ اصلی در Webflow 0:06:38
-
اتصال دستی به پیج کالکشن در Webflow 0:04:14
-
مشتری من چگونه یک پست وبلاگ را در CMS کالکشن در Webflow اضافه میکند؟ 0:02:24
-
چگونه از عناصر Rich Text در Webflow استفاده کنیم؟ 0:07:34
-
استایل دادن به Rich Text در Webflow CMS 0:06:56
-
پروژه کلاسی 08 - CMS وبلاگ 0:04:06
-
کد تعبیه HTML از Calendly، توئیتر و Castos 0:10:15
-
ایجاد فروشگاه تجارت الکترونیک در Webflow 0:06:20
-
چگونه محصولات را به فروشگاه خود در Webflow اضافه کنیم؟ 0:04:55
-
افزودن محصول تجارت الکترونیک خود به پیجی در Webflow 0:05:33
-
افزودن لیست محصولات خود به صفحهٔ اصلی 0:06:36
-
تنظیمات پرداخت در Webflow 0:04:10
-
بعد از خرید در فروشگاه Webflow چه اتفاقی میافتد؟ 0:01:32
-
پیکربندی سفارشی تنظیمات سبد خرید در Webflow 0:05:49
-
چگونه متغیرها را در محصول تجارت الکترونیک Webflow اضافه کنیم؟ 0:05:39
-
افزودن دستهبندیهای محصولات به CMS کالکشن با فیلترها 0:06:53
-
ایمپورت فایل CSV به محصول تجارت الکترونیک در Webflow 0:04:59
-
چرا دکمه سبد خرید در Nav Webflow قرار نمیگیرد؟ 0:08:27
-
در ساخت فروشگاه کامل چای در Webflow با Dan همکاری کنید - بخش 1 0:30:04
-
در ساخت فروشگاه کامل چای در Webflow با Dan همکاری کنید - بخش 2 0:29:00
-
در ساخت فروشگاه کامل چای در Webflow با Dan همکاری کنید - بخش 3 0:29:07
-
در ساخت فروشگاه کامل چای در Webflow با Dan همکاری کنید - بخش 4 0:39:12
-
پروژه کلاسی 08 - تجارت الکترونیک 0:03:32
-
بعد از دوره اصول Webflow، چه اقداماتی باید انجام دهید؟ 0:04:22
مشخصات آموزش
اصول Webflow: راهنمای مقدماتی برای ساخت وبسایتهای زیبا
- تاریخ به روز رسانی: 1405/04/02
- سطح دوره:همه سطوح
- تعداد درس:117
- مدت زمان :17:11:27
- حجم :2.98GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
- زمان: 09:44:25
- تعداد درس: 67
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 03:02:02
- تعداد درس: 14
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 58:00
- تعداد درس: 12
-
سطح دوره:
-
زبان: دوبله فارسی
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 11:25:13
- تعداد درس: 94
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 06:58:57
- تعداد درس: 60
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 02:27:39
- تعداد درس: 24
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 08:11:21
- تعداد درس: 28
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 04:52:43
- تعداد درس: 38
-
سطح دوره:
-
زبان: دوبله فارسی