Webflow برای مبتدیان (آموزش کامل Webflow)

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

در مدت زمان کمی بیش از یک ساعت، اصول این ابزار، از رابط کاربری آن گرفته تا کار با کلاس‌ها و حتی ایجاد طراحی‌های واکنش‌گرای وب‌سایت را خواهید آموخت. این دوره هیچ وقت را تلف نمی کند، بنابراین شما به دنبال “in” خود در Webflow هستید، در اینجا شانس شماست.

مقدمه ای بر Webflow

1. به این آموزش Webflow خوش آمدید!

درس تصویری را تماشا کنید [0:00] ↗

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

با این حال، این دوره فراگیر نیست و در عوض فقط بر موارد ضروری برای کمک به شما برای شروع تمرکز می کند، زیرا Webflow می تواند کمی پیچیده باشد. این دوره به سه حوزه اصلی تقسیم می شود:

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

2. چگونه وب سایت ها ساخته می شوند

درس تصویری را تماشا کنید [2:30] ↗

اولین کار در اینجا این است که به طور کلی نحوه ساخت وب سایت ها را یاد بگیرید. برای درک نحوه عملکرد Webflow به این اطلاعات اساسی نیاز دارید. تمرکز در اینجا بر روی “تثلیث مقدس” توسعه وب ظاهری است:

3. مدل جعبه

درس تصویری را تماشا کنید [7:56] ↗

در ادامه ایده های درس 2، این درس بر روی “مدل جعبه” تمرکز می کند که در مورد چگونگی قرار گرفتن هر عنصر در یک صفحه وب در یک جعبه و چگونگی درک این مفهوم می تواند به شما کمک کند تا به طور کلی نحوه کار طراح وب را بهتر درک کنید — و همچنین شما را برای استفاده از Webflow آماده می کند.

طراح Webflow

4. رابط کاربری

درس تصویری را تماشا کنید [12:48] ↗

Webflow یک CMS است که مخفف سیستم مدیریت محتوا است. بنابراین، به معنای واقعی کلمه، سیستمی برای مدیریت محتوا است. و در حالی که CMS های زیادی وجود دارد، Webflow یکی از بهترین ها به دلیل طراح است.

طراح راهی برای دستکاری بصری HTML و CSS یک صفحه وب ارائه می دهد. اما قبل از اینکه بتوانید مستقیماً وارد طراحی اولین شاهکار وب خود شوید، باید با رابط کاربری Webflow آشنا شوید. بحث در این درس حول چهار بخش کلیدی می چرخد:

• نوار ابزار سمت چپ: این قسمت شامل مواردی مانند منوی اصلی، پانل “افزودن”، نمادها و صفحات است.
• نوار ابزار بالا: این قسمت شامل ویژگی هایی مانند دکمه پیش نمایش و گزینه های پاسخگو است.
• بوم: این منطقه جایی است که کار شما نمایش داده می شود.
• بازرس: و در نهایت، این ناحیه به شما اجازه می دهد تا ویژگی های مختلف هر شی انتخاب شده در Canvas را بررسی کنید.

5. اضافه کردن و ویرایش عناصر

درس تصویری را تماشا کنید [20:54] ↗

ایجاد طرح‌بندی با Webflow بسیار ساده است، زیرا تعداد زیادی عنصر وجود دارد که می‌توانید آن‌ها را بکشید و به داخل Canvas رها کنید. تمرکز اصلی این درس اضافه کردن و ویرایش عناصر در Webflow خواهد بود.

6. کار با کلاس ها و ارث

درس تصویری را تماشا کنید [26:25] ↗

در CSS، یک کلاس نشان دهنده یک شناسه است. این مانند یک نام است و بر اساس آن نام می توانید چندین عنصر را دقیقاً به یک شکل استایل کنید. در این درس، شما یاد خواهید گرفت که چگونه یک کلاس ایجاد کنید، چگونه عناصر را بر اساس برچسب آنها استایل دهید و یک نمای کلی از وراثت به دست آورید.

در Webflow، کلاس ها مستقیماً در زیر Selector در Inspector نمایش داده می شوند:

7. استفاده مجدد از عناصر با نمادها

درس تصویری را تماشا کنید [38:42] ↗

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

در اینجا، شما یک خلاصه کامل از موارد زیر را دریافت خواهید کرد:

• نحوه ایجاد نماد
• نحوه ایجاد نادیده گرفتن
• نحوه جدا کردن یک نماد

8. ایجاد وب سایت های واکنش گرا

درس تصویری را تماشا کنید [47:43] ↗

ایجاد وب‌سایت‌های واکنش‌گرا امروزه به سادگی یک امر ضروری است زیرا باید در هر دستگاهی که مردم استفاده می‌کنند به درستی نمایش داده شوند. خوشبختانه، انجام این کار در Webflow واقعاً آسان است. تمرکز این درس بر نحوه جابجایی بین نقاط شکست مختلف، نحوه اضافه کردن نقاط شکست جدید و همچنین نحوه آبشاری تغییراتی که ایجاد می کنید بین نقاط شکست مختلف خواهد بود.

راه اندازی وب سایت شما

9. انتشار با Webflow

درس تصویری را تماشا کنید [1:00:12] ↗

هر وب سایتی که با Webflow می سازید می تواند با Webflow نیز منتشر شود. و این دقیقاً چیزی است که این درس پوشش می‌دهد: روش‌های مختلف انتشار وب‌سایت، نحوه صادرات کد و دارایی‌ها برای آپلود دستی در سرور، و همچنین آنچه می‌توانید برای Webflow بپردازید.

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

10. نتیجه گیری

درس تصویری را تماشا کنید [1:04:38] ↗

در مجموع، Webflow بسیار عالی است. حتی کسانی که با سازندگان بصری مخالف هستند، احتمالاً این یکی را عالی می دانند زیرا استفاده از آن آسان است و در واقع کد خوانا و تمیز تولید می کند. و از آنجایی که اصول استفاده از HTML و CSS را در یک ابزار بصری گنجانده است، درک بهتری از اینکه چگونه همه چیز از نظر کد با هم پیش می‌رود – حتی اگر خودتان به صورت دستی سایت را کدنویسی نکنید، خواهید داشت.

با این آموزش های مفید درباره جریان وب و طراحی وب بیشتر بیاموزید

در زیر مجموعه‌ای از آموزش‌ها را برای کمک به شما در جریان وب و به طور کلی طراحی وب مشاهده خواهید کرد. همچنین دوره رایگان دیگری از ما را در Squarespace خواهید دید – یکی از دیگر بازیکنان برتر در فضای سازنده وب سایت.