آموزش طراحی سایت کامل [0 تا 100] – بهترین روش ساخت وبسایت

آموزش گام به گام طراحی سایت و معرفی بهترین روش‌های کسب درآمد

آموزش طراحی سایت از 0 تا 100 به صورت کاملا رایگان در مجله گوگ منتشر شده است. در حال حاضر دوره آموزش طراحی سایت بیش‌از 110 جلسه رایگان دارد و به مرور زمان نیز آپدیت می‌شود و قسمت‌های جدیدتری به آن اضافه می‌شود. جالب است بدانید که ما یک فصل از این دوره آموزشی را به کسب درآمد از طراحی سایت اختصاص داده‌ایم تا بعد از مشاهده آموزش گام به گام طراحی سایت بتوانید درآمدهای خیلی خوبی بدست آورید. 😍

مهدی جبین پور، مدرس آموزش طراحی سایت
مهدی جبین پور، مدرس آموزش طراحی سایت
آشنایی با مبانی و مقدمات طراحی سایت
آشنایی با مبانی و مقدمات طراحی سایت

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

فصل اول: آشنایی با مبانی و مقدمات طراحی سایت

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

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

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

1- معرفی دوره آموزش طراحی سایت

2- سایت چیست؟ چرا به سایت نیاز داریم؟

3- ابزارهای لازم برای طراحی سایت

4- معرفی هاست ( هاست چیست )

5- آشنایی کامل با دامنه یا Domain

6- آنچه که قبل از خرید هاست و دامنه باید بدانیم

7- آموزش خرید هاست و دامین معتبر

8- ایمیل های دریافتی هنگام خرید هاست و دامنه

فصل دوم: راه‌اندازی سایت و آشنایی با وردپرس (WordPress)

تاکنون با مبانی و مقدمات طراحی سایت به خوبی آشنا شدید؛ در فصل دوم از آموزش طراحی سایت ما قصد داریم شما را با سیستم مدیریت محتوای وردپرس (WordPress) آشنا کنیم. وردپرس مثل یک نرم‌افزار طراحی سایت عمل می‌کند؛ یعنی شما بدون دانش برنامه‌نویسی می‌توانید هر سایتی (سایت فروشگاهی، شرکتی، خبری، آموزشی، شخصی) را طراحی کنید.

البته شاید سوال کنید که تفاوت سایت‌های ساخته شده با وردپرس و سایت‌های برنامه‌نویسی شده در چه چیزی است؟ در یک جلسه ویدئویی ما به این سوال پاسخ داده‌ایم؛ حتی در یک جلسه دیگر اشاره کرده‌ایم که چه سایت‌هایی را با سیستم مدیریت محتوای وردپرس نمی‌توان طراحی کرد. بنابراین نگران هیچ چیز نباشید، در دوره آموزش طراحی سایت ما کنارتان هستیم. 💖

9- هوییز یا Whois مالکیت دامنه چیست؟

10- آشنایی با امکانات هاست

11- تفاوت طراحی سایت وردپرس با کدنویسی

12- تفاوت دیتابیس با فایل منیجر

13- آموزش نصب وردپرس روی هاست

14- آشنایی با فایل ها و دیتابیس بعد از نصب وردپرس

15- آموزش داشبورد یا پیشخوان وردپرس

16- سایت هایی که با وردپرس نمیتوان طراحی کرد

فصل سوم: آشنایی با قالب وردپرس و افزونه وردپرس

حالا قرار است که به صورت جامع‌تر و کامل‌تر با وردپرس آشنا شوید. شاید نام قالب وردپرس و افزونه وردپرس را هم شنیده باشید، اما قصد داریم به صورت دقیق و شفاف درباره آن‌ها توضیح دهیم تا آشنایی بسیار خوبی بدست آورید. حتی در این فصل از آموزش طراحی سایت بهترین قالب‌های وردپرس (WordPress Themes) و بهترین افزونه‌های وردپرس (WordPress Plugins) را به شما عزیزان معرفی می‌کنیم تا بتوانید هر کدام را که نیاز دارید تهیه و استفاده کنید.

راستی! بعد از اینکه بهترین قالب‌ها و بهترین افزونه‌ها را معرفی کردیم، نحوه نصب قالب وردپرس و نصب افزونه وردپرس را نیز آموزش می‌دهیم. اینگونه می‌توانید هر قالب و هر افزونه‌ای را بر روی سایت خودتان به راحتی نصب کنید. (ما به جزئی‌ترین نکات نیز توجه کرده‌ایم؛ نگران هیچ چیز نباشید، در دوره آموزش طراحی سایت در کنارتان هستیم.) 💎

17- قالب وردپرس چیست؟

18- آموزش یافتن بهترین قالب وردپرسی

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

20- آموزش نصب قالب وردپرس

21- افزونه وردپرس چیست؟

22- بهترین افزونه های وردپرسی

23- آموزش نصب افزونه وردپرس

24- آموزش خرید قالب و افزونه وردپرس

فصل چهارم: نصب قالب و شروع به طراحی سایت

اکنون زمان طراحی سایت فرا رسیده است! تا به الان در دوره رایگان آموزش طراحی سایت به خوبی با مبانی و مقدمات اولیه طراحی سایت آشنا شدید؛ همچنین به صورت کامل و جامع نیز با سیستم مدیریت محتوای وردپرس (WordPress) آشنا شدید. حالا قصد داریم از 0 شروع به طراحی سایت کنیم؛ یعنی دقیقا از انتخاب و نصب یک قالب وردپرس در کنارتان هستیم.

در فصل چهارم از دوره آموزش طراحی سایت یاد می‌گیرید که بعد از نصب قالب وردپرس باید چه کارهایی را انجام دهید. همچنین با امکانات و قابلیت‌های قالب نصب شده (زفایر) بر روی سایت آشنا می‌شوید. علاوه‌بر آن یاد می‌گیرید که چطور صفحه اصلی سایت را بسازید. 🙂

25- آشنایی با ساختار وبسایت استاندارد

26- آموزش ایجاد حالت تعمیر و بزودی در وردپرس

27- معرفی قالب زفایر وردپرس

28- آموزش نصب قالب زفایر

29- معرفی افزونه های قالب زفایر

30- اتفاقات بعد از نصب قالب وردپرسی

31- آشنایی با امکانات قالب زفایر

32- آموزش ساختن صفحه اصلی وردپرس

فصل پنجم: آموزش طراحی و ساخت هدر سایت (Header)

اولین بخشی که در هر سایت آن را مشاهده می‌کنید، سر صفحه یا همان هدر (Header) است. بنابراین می‌توان گفت که یکی از اصلی‌ترین و مهم‌ترین بخش‌های هر سایت که باید نسبت به آن توجه کرد، طراحی سر صفحه (Header) می‌باشد. در فصل پنجم از دوره رایگان آموزش طراحی سایت ما ابتدا طراحی هدر سایت را به شما آموزش می‌دهیم. سپس به سراغ ساخت فهرست (منو) می‌رویم؛ حتی شما را با مگامنو (Mega Menu) آشنایی می‌کنیم و نحوه ساخت مگا منو را نیز آموزش می‌دهیم.

در همین فصل از آموزش طراحی سایت به شما آموزش می‌دهیم که چطور هدر سایت را به صورت واکنشگرا (Responsive) طراحی کنید. اگر دقت کرده باشید، هدر برخی از سایت‌ها هم شفاف است و هیچ پس‌زمینه‌‌ای ندارد، این مورد را هم به شما آموزش می‌دهیم تا بتوانید هدر مورد علاقه خودتان را طراحی کنید. 😃

33- هدر وبسایت چیست؟

34- آموزش طراحی هدر وردپرس

35- ادامه ساخت هدر وبسایت

36- آموزش ساخت فهرست یا منو در وردپرس

37- مگامنو چیست ؟ ساخت مگامنو

38- آموزش طراحی هدر واکنشگرا

39- نمایش نام کاربر در هدر وردپرس

40- آموزش طراحی هدر شفاف در وردپرس

فصل ششم: آشنایی با صفحه‌سازها و شروع کار با ویژوال کامپوسر

با کمک صفحه‌سازها می‌توان صفحه‌های سایت را بدون نیاز به دانش کدنویسی طراحی کرد. در واقع صفحه‌سازها، افزونه‌هایی هستند که بر روی سایت وردپرسی نصب می‌شوند و فرایند طراحی سایت را برای ما ساده‌تر می‌کنند. در حال حاضر صفحه‌ساز المنتور و صفحه‌ساز ویژوال کامپوسر، دو نمونه از محبوب‌ترین افزونه‌های صفحه‌ساز وردپرس هستنند. (ما در فصل ششم از دوره رایگان آموزش طراحی سایت، بهترین صفحه‌سازهای وردپرس را به شما عزیزان معرفی کرده‌ایم.)

به این نکته هم توجه داشته باشید که برای انتخاب یک افزونه صفحه‌ساز، باید به قالب سایت خود توجه کنید؛ چرا که قالب‌ها، با هر صفحه‌سازی کار نمی‌کنند. برای مثال برخی از قالب‌ها فقط با صفحه‌ساز ویژوال کامپوسر سازگاری دارند، یا برخی دیگر فقط با صفحه‌ساز المنتور سازگاری دارند؛ حتی برخی از قالب‌ها نیز یک صفحه‌ساز اختصاصی دارند. (در دوره آموزش طراحی سایت، نحوه کار با افزونه صفحه‌ساز ویژوال کامپوسر را به صورت کامل یاد می‌گیرید.) 😀

41- بهترین صفحه ساز های وردپرسی

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

43- کار با ردیف و ستون در ویژوال کامپوزر

44- تمرین طراحی با ردیف و ستون

45- آشنایی با تنظیمات ردیف و ستون

46- آموزش المان های ویژوال کامپوسر

46- آموزش المان های ویژوال کامپوسر

48- آموزش ایجاد تغییرات css در سایت با افزونه مداد زرد

فصل هفتم: جزئیات تکمیلی برای حرفه‌ای شدن در طراحی سایت

تاکنون دانش بسیار خوبی در زمینه طراحی سایت کسب کرده‌اید و حالا باید با جزئیات کار آشنا شوید. در این فصل از آموزش طرحی سایت می‌خواهیم نحوه قراردادن پس‌زمینه (Background) در وردپرس را به شما آموزش دهیم. همچنین به صورت کامل با مفاهیم مارجین (Margin)، پدینگ (Padding)، بوردر (Border)، سایه (Box Shadow) و هاور (Hover) آشنا خواهید شد.

علاوه‌بر همه این موارد، در فصل هفتم از دوره رایگان آموزش طراحی سایت، طراحی واکنشگرا (Responsive) را نیز یاد می‌گیرید. منظور از طراحی واکنشگرا یا طراحی ریسپانسیو، این است که سایت شما در دستگاه‌های مختلف لپ‌تاپ، موبایل و تبلت به خوبی نمایش داده شود. 😍

49- آموزش پس زمینه یا Background در وردپرس

50- آموزش جداکننده های جذاب صفحه ساز

51- مفهوم مارجین و پدینگ و بوردر

52- آموزش سایه ها (Box Shadow)

53- استفاده از آیکن های زیبا در طراحی وب

54- آموزش هاور Hover در وردپرس

55- آموزش طراحی ریسپانسیو صفحه ساز

56- آموزش طراحی ریسپانسیو صفحه ساز 2

فصل هشتم: معرفی افزونه‌های کاربردی وردپرس

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

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

58- آموزش پخش صوت یا آهنگ در وردپرس

59- آموزش ساخت فرم در وردپرس

60- آموزش ساخت جدول در وردپرس

61- آموزش ساخت جستجو در وردپرس

62- آموزش نمایش نقشه در وردپرس

63- آموزش نمایش محتوا با گرید قالب زفایر

64- آموزش نمایش محتوا با افزونه گرید

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

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

شما در فصل نهم از آموزش طراحی سایت با صفحات تکرار شونده آشنا می‌شوید. همچنین به صورت کامل با ساخت قالب صفحات آشنا می‌شوید که به شما کمک می‌کند با سرعت بسیار بیشتری، صفحات سایت را طراحی کنید. علاوه‌بر این موارد، نحوه طراخی پاورقی (Footer)، صفحه دسته‌بندی و صفحه برچسب‌ها را نیز یاد می‌گیرید. (یعنی دقیقا تبدیل به یک متخصص می‌شوید.) 💖

65- صفحات تکرار شونده در وب

66- ساخت قالب صفحات ( تمپلیت صفحات )

67- آموزش نمایش مطالب مرتبط

68- آموزش طراحی سایدبار

69- فوتر سایت چیست؟

70- آموزش طراحی فوتر با قالب زفایر

71- آموزش طراحی صفحات دسته بندی

72- آموزش طراحی صفحات برچسب

فصل دهم: طراحی و ساخت اسلایدرهای جذاب و گرافیکی

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

در صورتی که با اسلایدر و کاربرد آن آشنا نیستید، نگران نباشید؛ چرا که ابتدا به معرفی اسلایدر می‌پردازیم و سپس در ادامه به سراغ طراحی و ساخت اسلایدرهای جذاب می‌رویم. پیشنهاد می‌کنیم این فصل هیجان‌انگیز از آموزش طراحی سایت را از دست ندهید. 💎

73- اسلایدر وردپرس چیست؟

74- معرفی روولوشن اسلایدر و نصب آن

75- آموزش نمایش اسلایدر و شروع مقدماتی

76- درون ریزی اسلایدر روولوشن و فارسی سازی

77- ساخت اسلاید خام و معرفی تنظیمات

78- ساخت عکس های زیبا برای سایت

79- ساخت اسلایدر خلاقانه در روولوشن اسلایدر

80- طراحی ریسپانسیو با روولوشن

فصل یازدهم: آموزش طراحی سایت پروژه محور

حالا در فصل یازدهم از آموزش طراحی سایت می‌خواهیم با کمک تمام مواردی که یاد گرفتیم، شروع به ساخت یک سایت کنیم و از 0 تا 100 آن را به صورت کاملا پروژه محور طراحی کنیم. توجه داشته باشید که 0 تا 100 پروژه را در همین فصل انجام می‌دهیم. ما ابتدا به سراغ الگوهای زیبا برای طراحی سایت می‌گردیم، سپس از همان الگو کمک می‌گیریم و 0 تا 100 طراحی سایت را انجام می‌دهیم.

این فصل از دوره رایگان آموزش طراحی سایت به شما کمک می‌کند تا بتوانید ذهنیت بهتری نسبت به طراحی سایت داشته باشید و دقیقا بدانید که 0 تا 100 یک پروژه طراحی سایت چگونه انجام می‌شود. اینگونه اگر پروژه‌ای را هم قبول کردید، دیگر نگران نخواهید بود، چرا که دقیقا با روند کار آشنایی کامل دارید. 🙂

81- پیدا کردن الگو های زیبا برای طراحی سایت

82- شروع طراحی پروژه محور طراحی سایت

83- ادامه طراحی پروژه محور طراحی سایت

84- ادامه طراحی پروژه محور طراحی سایت

85- ادامه طراحی پروژه محور طراحی سایت

86- ادامه طراحی پروژه محور طراحی سایت

87- ادامه طراحی پروژه محور طراحی سایت

88- صفحات مهم هر سایت که باید طراحی شود

فصل دوازدهم: کسب درآمد از طراحی سایت (همراه با تعرفه و قرارداد)

اکنون زمان کسب درآمد از طراحی سایت فرا رسیده است! در حال حاضر اگر شما دوره آموزش طراحی سایت را به دقت مشاهده کرده باشید و به صورت عملی تمرین کرده باشید؛ به راحتی می‌توانید پروژه‌های مختلف طراحی سایت را قبول کنید و درآمد بسیار خوبی از این طریق بدست آورید. ما تمام چالش‌های شما را در نظر گرفته‌ایم و این فصل را به صورت کامل و جامع به موضوع “کسب درآمد از طراحی سایت” پرداخته‌ایم.

برای مثال در ابتدای این فصل از آموزش طراحی سایت به روش‌های کسب درآمد از طراحی سایت پرداخته‌ایم؛ سپس برای اینکه از قیمت‌های بازار مطلع باشید، تعرفه‌های طراحی سایت را ارائه کرده‌ایم که بدانید برای هر پروژه، باید چه قیمتی را به مشتری ارائه دهید. حتی درباره قرداد طراحی سایت صحبت کرده‌ایم و به صورت کامل توضیح داده‌ایم که یک قرارداد باید به چه صورت باشد. (حتی فایل نمونه قرارداد برای شما گذاشته‌ایم که به راحتی بتوانید دانلود کنید.)

89- روش های کسب درآمد از وردپرس

90- تعرفه های طراحی سایت با وردپرس

91- نحوه ارائه پشتیبانی در طراحی سایت

92- قرارداد طراحی سایت (دانلود نمونه قرارداد)

93- نمونه کار سایت برای نمایش به مشتری

94- شخصیت افراد برای ورود به بازارکار

95- روش های گرفتن سفارش طراحی سایت

96- کسب درآمد از سایت های آماده

فصل سیزدهم: آشنایی با هاست دانلود

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

برای مثال شما یک سایت آموزشی راه‌اندازی کرده‌اید که بخش زیادی از محتوای آن، ویدئوهای آموزشی هستند. حالا برای اینکه هاست اصلی سایت را سنگین نکنید و سرعت سایت کاهش پیدا نکند، بهتر است که یک هاست دانلود تهیه کنید و ویدئوها را در آن سایت بارگذاری کنید. البته این فقط یکی از کاربردهای هاست دانلود است. پیشنهاد می‌کنیم که فصل سیزدهم از آموزش وردپرس را تا انتها دنبال کنید تا به صورت دقیق‌تر، با هاست دانلود و نحوه راه‌اندازی آن آشنا شوید. 😃

97- چرا باید از هاست دانلود استفاده کنیم؟

98- چطور و کجا هاست دانلودی بخریم؟

99- چطور ساب دامین هاست دانلود بسازیم؟

100- چطور لینک هاست دانلود را پیدا کنیم؟

101- راه اندازی اف تی پی (FTP) هاست دانلود

102- استفاده هاست دانلود در فروش فایل

103- نمایش ویدئو و صوت با هاست دانلودی

104- امنیت هاست دانلود و نکات مهم

فصل چهاردهم: گپ‌وگفت دوستانه

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

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

105- گپ دوستانه در مورد کسب درآمد از وردپرس

106- یادگیری سئو را از کجا شروع کنیم؟

107- چطور در وردپرس سایت فروشگاهی بسازیم؟

108- چطور سایت چندزبانه بسازیم؟

109- آشنایی با خدمات شرکت توسعه کیان

110- یادگیری گرافیک سایت و طراحی پیشرفته

111- چطور سایت آموزشی وردپرسی بسازیم؟

‫4 نظرها

    1. سلام و احترام؛ استاد گرانقدر رو همه دوستان در دنیای وب می‌شناسند.
      خیلی چیزا از ایشون یاد گرفتیم و همچنان دانشجوی ایشون هستیم.
      شاد و سلامت باشید.

  1. سلام خدمت اقای جبین پور من فلم های اموزشی شما تو حوزه وب را دیده ام و هنوز میبینم به لطف فیلم های اموزشی اقای جبین پور دارم روز به روز پیشرفت میکنم ممنون بابت تمام اموزشی هایی که صادقانه میدهید این اموزش ها را ..

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا